fix: 新增业务组件BoxTree、Tree

2024-03-01 16:42:44 +08:00 · 2024-03-01 16:42:44 +08:00 · 8b2d7cfe3e
commit 8b2d7cfe3e
parent e03338ab02
115 changed files with 2963 additions and 780 deletions
--- a/.dumirc.ts
+++ b/.dumirc.ts
@ -1,10 +1,11 @@
 import { defineConfig } from 'dumi';
 import path from 'path';

+console.log(path.join(__dirname, 'packages/hooks/src'));
+
 export default defineConfig({
  logo: '/logo.jpg',
  favicons: ['/logo.jpg'],
-  history: { type: 'hash' },
  themeConfig: {
    name: 'Lambo',
    socialLinks: {
--- a/packages/biz/.fatherrc.ts
+++ b/packages/biz/.fatherrc.ts
@ -2,6 +2,12 @@ import { defineConfig } from 'father';

 export default defineConfig({
  // more father config: https://github.com/umijs/father/blob/master/docs/config.md
-  esm: { output: 'es' },
-  cjs: { output: 'lib' },
+  esm: {
+    output: 'es',
+    ignores: ['**/demo/*', 'src/**/demo/*']
+  },
+  cjs: {
+    output: 'lib',
+    ignores: ['**/demo/*', 'src/**/demo/*']
+  },
 });
--- a/packages/biz/CHANGELOG.md
+++ b/packages/biz/CHANGELOG.md
@ -1,5 +1,18 @@
 # @zhst/biz

+## 0.6.0
+
+### Minor Changes
+
+- 新增业务组件 Tree、TreeTransfer、TreeTransferModal、BoxSelectTree
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.7.0
+  - @zhst/func@0.7.0
+  - @zhst/meta@0.8.0
+
 ## 0.5.1

 ### Patch Changes
--- a/packages/biz/README.md
+++ b/packages/biz/README.md
@ -8,7 +8,7 @@

 ## 使用

-```jsx
+```js
 import React from 'react';
 import { Demo } from '@zhst/biz'

--- a/packages/biz/es/BigImageModal/BigImageModal.d.ts
+++ b/packages/biz/es/BigImageModal/BigImageModal.d.ts
@ -1,40 +0,0 @@
-import React from 'react';
-import type { ModalProps, DescriptionsProps, TabsProps, VideoViewRef, ImgViewRef } from '@zhst/meta';
-import './index.less';
-export declare const componentPrefix = "zhst-image";
-export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'VIDEO';
-export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
-export interface BigImageModalProps extends ModalProps {
-    visible: boolean;
-    activeTab?: TAB_TYPE;
-    attributeList: {
-        title: string;
-        children: Pick<DescriptionsProps, 'items'>;
-    };
-    tabs: {
-        data: Pick<TabsProps, 'items'> & {
-            key: TAB_TYPE;
-        };
-    };
-    dataSource: any;
-    imageData: any;
-    relatedData: any;
-    isRelated?: boolean;
-    footer?: React.ReactNode;
-    showCarousel?: boolean;
-    onTabChange?: (newVal?: TAB_TYPE, oldVal?: TAB_TYPE) => void;
-    onIndexChange?: (newVal?: number, oldVal?: number) => void;
-    transformPropFunc: (data: any) => void;
-}
-interface BigModalRef {
-    tab: TAB_TYPE;
-    setTab: (tab: TAB_TYPE) => void;
-    modalRef: ModalProps;
-    activeKey: string;
-    setActiveKey: (val: string) => void;
-    videoPlayerRef: VideoViewRef;
-    combineImageRef: any;
-    bigImagePreviewRef: ImgViewRef;
-}
-declare const BigImageModal: React.FC<BigImageModalProps, BigModalRef>;
-export default BigImageModal;
--- a/packages/biz/es/BigImageModal/components/navigation/index.d.ts
+++ b/packages/biz/es/BigImageModal/components/navigation/index.d.ts
@ -1,13 +0,0 @@
-import * as React from 'react';
-import './index.less';
-declare const Navigation: React.FC<{
-    show?: boolean;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    prev?: boolean;
-    next?: boolean;
-    disabled?: boolean;
-    className?: string;
-    color?: string;
-    hoverColor?: string;
-}>;
-export default Navigation;
--- a/packages/biz/es/BigImageModal/components/navigation/index.js
+++ b/packages/biz/es/BigImageModal/components/navigation/index.js
@ -1,7 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import { Button } from 'antd';
-import { Icon } from '@zhst/meta';
+import { Icon, Button } from '@zhst/meta';
 import "./index.less";
 var componentName = "zhst-image__nav";
 var Navigation = function Navigation(props) {
--- a/packages/biz/es/Demo/index.d.ts
+++ b/packages/biz/es/Demo/index.d.ts
@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: () => React.JSX.Element;
-export default _default;
--- a/packages/biz/es/Demo/index.js
+++ b/packages/biz/es/Demo/index.js
@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button } from '@zhst/meta';
 import { useThrottleFn } from '@zhst/hooks';
 export default (function () {
  var _useThrottleFn = useThrottleFn(function () {
--- a/packages/biz/es/hooks/useIntelligentTracking/index.js
+++ b/packages/biz/es/hooks/useIntelligentTracking/index.js
--- a/packages/biz/es/index.d.ts
+++ b/packages/biz/es/index.d.ts
@ -1,2 +1,5 @@
-export { default as Demo } from './Demo';
 export { default as BigImageModal } from './BigImageModal';
+export { default as BoxSelectTree } from './boxSelectTree';
+export { default as Tree } from './tree';
+export { default as TreeTransfer } from './treeTransfer';
+export { default as TreeTransferModal } from './treeTransferModal';
--- a/packages/biz/es/index.js
+++ b/packages/biz/es/index.js
@ -1,2 +1,5 @@
-export { default as Demo } from "./Demo";
-export { default as BigImageModal } from "./BigImageModal";
+export { default as BigImageModal } from "./BigImageModal";
+export { default as BoxSelectTree } from "./boxSelectTree";
+export { default as Tree } from "./tree";
+export { default as TreeTransfer } from "./treeTransfer";
+export { default as TreeTransferModal } from "./treeTransferModal";
--- a/packages/biz/es/useSocket/onceChannel.js
+++ b/packages/biz/es/useSocket/onceChannel.js
@ -2,8 +2,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 //@ts-nocheck
 import channel from "./ws";
 var startChannel = function startChannel(topic, req, callback) {
--- a/packages/biz/es/useSocket/ws.js
+++ b/packages/biz/es/useSocket/ws.js
@ -3,8 +3,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // @ts-nocheck
 import { v4 as uuidv4 } from 'uuid';
 import { has } from '@zhst/func';
--- a/packages/biz/lib/BigImageModal/BigImageModal.d.ts
+++ b/packages/biz/lib/BigImageModal/BigImageModal.d.ts
@ -1,40 +0,0 @@
-import React from 'react';
-import type { ModalProps, DescriptionsProps, TabsProps, VideoViewRef, ImgViewRef } from '@zhst/meta';
-import './index.less';
-export declare const componentPrefix = "zhst-image";
-export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'VIDEO';
-export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
-export interface BigImageModalProps extends ModalProps {
-    visible: boolean;
-    activeTab?: TAB_TYPE;
-    attributeList: {
-        title: string;
-        children: Pick<DescriptionsProps, 'items'>;
-    };
-    tabs: {
-        data: Pick<TabsProps, 'items'> & {
-            key: TAB_TYPE;
-        };
-    };
-    dataSource: any;
-    imageData: any;
-    relatedData: any;
-    isRelated?: boolean;
-    footer?: React.ReactNode;
-    showCarousel?: boolean;
-    onTabChange?: (newVal?: TAB_TYPE, oldVal?: TAB_TYPE) => void;
-    onIndexChange?: (newVal?: number, oldVal?: number) => void;
-    transformPropFunc: (data: any) => void;
-}
-interface BigModalRef {
-    tab: TAB_TYPE;
-    setTab: (tab: TAB_TYPE) => void;
-    modalRef: ModalProps;
-    activeKey: string;
-    setActiveKey: (val: string) => void;
-    videoPlayerRef: VideoViewRef;
-    combineImageRef: any;
-    bigImagePreviewRef: ImgViewRef;
-}
-declare const BigImageModal: React.FC<BigImageModalProps, BigModalRef>;
-export default BigImageModal;
--- a/packages/biz/lib/BigImageModal/components/navigation/index.d.ts
+++ b/packages/biz/lib/BigImageModal/components/navigation/index.d.ts
@ -1,13 +0,0 @@
-import * as React from 'react';
-import './index.less';
-declare const Navigation: React.FC<{
-    show?: boolean;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    prev?: boolean;
-    next?: boolean;
-    disabled?: boolean;
-    className?: string;
-    color?: string;
-    hoverColor?: string;
-}>;
-export default Navigation;
--- a/packages/biz/lib/BigImageModal/components/navigation/index.js
+++ b/packages/biz/lib/BigImageModal/components/navigation/index.js
@ -34,7 +34,6 @@ __export(navigation_exports, {
 module.exports = __toCommonJS(navigation_exports);
 var React = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var import_antd = require("antd");
 var import_meta = require("@zhst/meta");
 var import_index = require("./index.less");
 var componentName = `zhst-image__nav`;
@ -52,7 +51,7 @@ var Navigation = (props) => {
        className
      )
    },
-    /* @__PURE__ */ React.createElement(import_antd.Button, { type: "text", disabled, onClick }, /* @__PURE__ */ React.createElement(import_meta.Icon, { size: 28, color, icon: prev ? "icon-qiehuanzuo" : "icon-qiehuanyou" }))
+    /* @__PURE__ */ React.createElement(import_meta.Button, { type: "text", disabled, onClick }, /* @__PURE__ */ React.createElement(import_meta.Icon, { size: 28, color, icon: prev ? "icon-qiehuanzuo" : "icon-qiehuanyou" }))
  );
 };
 var navigation_default = Navigation;
--- a/packages/biz/lib/Demo/index.d.ts
+++ b/packages/biz/lib/Demo/index.d.ts
@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: () => React.JSX.Element;
-export default _default;
--- a/packages/biz/lib/Demo/index.js
+++ b/packages/biz/lib/Demo/index.js
@ -33,9 +33,9 @@ __export(Demo_exports, {
 });
 module.exports = __toCommonJS(Demo_exports);
 var import_react = __toESM(require("react"));
-var import_antd = require("antd");
+var import_meta = require("@zhst/meta");
 var import_hooks = require("@zhst/hooks");
 var Demo_default = () => {
  const { run } = (0, import_hooks.useThrottleFn)(() => console.log("123"));
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => run() }, "测试");
+  return /* @__PURE__ */ import_react.default.createElement(import_meta.Button, { onClick: () => run() }, "测试");
 };
--- a/packages/biz/lib/hooks/useIntelligentTracking/index.js
+++ b/packages/biz/lib/hooks/useIntelligentTracking/index.js
@ -53,7 +53,7 @@ var turf = __toESM(require("@turf/turf"));
 var import_useTaskState = require("../useTaskState");
 var import_Tree = __toESM(require("@common/components/CameraTree/Tree"));
 var import_request = __toESM(require("../../utils/request"));
-var import_antd = require("antd");
+var import_meta = require("@zhst/meta");
 var import_utils = require("@common/components/CameraTree/utils");
 var import_func = require("@zhst/func");
 var defaultFaceThreshold = 0.68;
@ -85,10 +85,10 @@ var operateTrackById = async (smartTrackId, operationType) => {
      url: "/singer.SmartTrackService/OperationSmartTrack",
      data
    });
-    import_antd.message.success("操作成功");
+    import_meta.message.success("操作成功");
  } catch (err) {
    console.error(err);
-    import_antd.message.success("操作失败");
+    import_meta.message.success("操作失败");
  }
 };
 var deleteTrackById = async (smartTrackId) => {
@ -239,7 +239,7 @@ var ModifyTrackCameras = async (value) => {
      }
    });
  } catch (err) {
-    import_antd.message.error(err);
+    import_meta.message.error(err);
  }
 };
 var setIntelligentTrackCircleInfo = async (smartTrackId, circleCenter) => {
@ -256,7 +256,7 @@ var setIntelligentTrackCircleInfo = async (smartTrackId, circleCenter) => {
      }
    });
  } catch (err) {
-    import_antd.message.error(err);
+    import_meta.message.error(err);
  }
 };
 var getTackCameraInfo = async (value) => {
--- a/packages/biz/lib/index.d.ts
+++ b/packages/biz/lib/index.d.ts
@ -1,2 +1,5 @@
-export { default as Demo } from './Demo';
 export { default as BigImageModal } from './BigImageModal';
+export { default as BoxSelectTree } from './boxSelectTree';
+export { default as Tree } from './tree';
+export { default as TreeTransfer } from './treeTransfer';
+export { default as TreeTransferModal } from './treeTransferModal';
--- a/packages/biz/lib/index.js
+++ b/packages/biz/lib/index.js
@ -30,13 +30,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
  BigImageModal: () => import_BigImageModal.default,
-  Demo: () => import_Demo.default
+  BoxSelectTree: () => import_boxSelectTree.default,
+  Tree: () => import_tree.default,
+  TreeTransfer: () => import_treeTransfer.default,
+  TreeTransferModal: () => import_treeTransferModal.default
 });
 module.exports = __toCommonJS(src_exports);
-var import_Demo = __toESM(require("./Demo"));
 var import_BigImageModal = __toESM(require("./BigImageModal"));
+var import_boxSelectTree = __toESM(require("./boxSelectTree"));
+var import_tree = __toESM(require("./tree"));
+var import_treeTransfer = __toESM(require("./treeTransfer"));
+var import_treeTransferModal = __toESM(require("./treeTransferModal"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
  BigImageModal,
-  Demo
+  BoxSelectTree,
+  Tree,
+  TreeTransfer,
+  TreeTransferModal
 });
--- a/packages/biz/package.json
+++ b/packages/biz/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/biz",
-  "version": "0.5.1",
+  "version": "0.6.0",
  "description": "业务库",
  "keywords": [
    "business",
@ -20,7 +20,7 @@
  "typings": "es/index.d.ts",
  "exports": {
    ".": {
-      "import": "./src/index.ts"
+      "import": "./es/index.js"
    }
  },
  "files": [
@ -39,6 +39,7 @@
  },
  "dependencies": {
    "@ant-design/icons": "^5.2.6",
+    "@ant-design/pro-components": "^2.6.49",
    "@zhst/func": "workspace:^",
    "@zhst/hooks": "workspace:^",
    "@zhst/meta": "workspace:^",
--- a/packages/biz/src/BigImageModal/index.md
+++ b/packages/biz/src/BigImageModal/index.md
@ -1,5 +1,5 @@
 ---
-group: 数据展示
+group: 进阶组件
 category: Components
 subtitle: 大图预览组件
 title: BigImagePreview 大图预览组件
--- a/packages/biz/src/boxSelectTree/boxSelectTree.tsx
+++ b/packages/biz/src/boxSelectTree/boxSelectTree.tsx
@ -0,0 +1,93 @@
+import React, { FC } from 'react';
+import { InputProps, Tabs, TabsProps, TreeDataNode, TreeProps } from 'antd'
+import BoxPanel from './components/boxPanel';
+import { ModalFormProps } from '@ant-design/pro-components';
+
+export interface BoxSelectTreeProps {
+  boxDataSource: TreeDataNode[]
+  data: TreeDataNode[]
+  onSearch?: (e: any) => void       // 搜索
+  onItemSelect?: TreeProps['onSelect']
+  onItemCheck?: TreeProps['onCheck']
+  onTabChange?: (e: any) => void
+  onBoxBatchDelete?: (data?: any) => void
+  onBoxDelete?: (data?: any) => void
+  onCreateSubmit?: ModalFormProps['onFinish']
+  tabsProps?: TabsProps
+  searchInputProps?: InputProps
+  treeProps?: TreeProps
+}
+
+const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
+  const {
+    data,
+    boxDataSource = [],
+    onTabChange,
+    onSearch,
+    onItemCheck,
+    onItemSelect,
+    onBoxBatchDelete,
+    onBoxDelete,
+    onCreateSubmit,
+    tabsProps,
+    searchInputProps,
+    treeProps
+  } = props
+
+  const onChange = (key: string) => {
+    onTabChange?.(key)
+  };
+
+  const items: TabsProps['items'] = [
+    {
+      key: '1',
+      label: <div style={{ textAlign:'center', width: '160px' }} >盒子组</div>,
+      children: (
+        <BoxPanel
+          searchInputProps={searchInputProps}
+          boxDataSource={boxDataSource}
+          treeProps={treeProps}
+          data={data}
+          onCreateSubmit={onCreateSubmit}
+          onBoxBatchDelete={onBoxBatchDelete}
+          onBoxDelete={onBoxDelete}
+          onSearch={onSearch}
+          onItemCheck={onItemCheck}
+          onItemSelect={onItemSelect}
+        />
+      )
+    },
+    {
+      key: '2',
+      label: <div style={{ textAlign:'center', width: '160px' }} >盒子</div>,
+      children: (
+        <BoxPanel
+          boxDataSource={boxDataSource}
+          searchInputProps={searchInputProps}
+          treeProps={treeProps}
+          data={data}
+          onBoxBatchDelete={onBoxBatchDelete}
+          onCreateSubmit={onCreateSubmit}
+          onBoxDelete={onBoxDelete}
+          onSearch={onSearch}
+          onItemCheck={onItemCheck}
+          onItemSelect={onItemSelect}
+        />
+      )
+    },
+  ];
+
+  return (
+    <Tabs
+      defaultActiveKey="1"
+      centered
+      items={items}
+      onChange={onChange}
+      tabBarGutter={0}
+      indicator={{ size: (origin) => origin, align: 'center' }}
+      {...tabsProps}
+    />
+  );
+};
+
+export default BoxSelectTree;
--- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
+++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
@ -0,0 +1,175 @@
+import React, { FC, useState, useRef } from 'react';
+import{ Button, Divider, Input, Space, TreeDataNode } from 'antd'
+import { ModalForm, ModalFormProps, ProFormInstance, ProFormText } from '@ant-design/pro-components'
+import { DiffOutlined, SwitcherOutlined  } from '@ant-design/icons'
+import type { TreeProps, InputProps } from 'antd';
+import TreeTransferModal from '../../../treeTransferModal'
+import BoxTree from '../../../tree';
+import './index.less'
+
+export interface BoxGroupPanelProps {
+  searchInputProps?: InputProps
+  treeProps?: TreeProps
+  data: TreeDataNode[]
+  boxDataSource: TreeDataNode[]
+  handleImport?: () => void
+  onSearch?: (e: any) => void
+  onItemCheck?: TreeProps['onCheck']
+  onItemSelect?: TreeProps['onSelect']
+  onBoxBatchDelete?: (data?: any) => void
+  onBoxDelete?: (data?: any) => void
+  onCreateSubmit?: ModalFormProps['onFinish']
+}
+
+const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
+  const {
+    searchInputProps,
+    data = [],
+    onSearch,
+    treeProps,
+    onItemCheck,
+    onItemSelect,
+    onCreateSubmit,
+    onBoxBatchDelete,
+    onBoxDelete,
+    boxDataSource
+  } = props
+  const [isTreeCheckable, setIsTreeCheckable] = useState(false)
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [boxChoiceOpen, setBoxChoiceOpen] = useState(false)
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+  const createFormRef = useRef<
+    ProFormInstance<{
+      name: string;
+      company?: string;
+      useMode?: string;
+    }>
+  >()
+
+  /**
+   * 修改选择状态
+   * @param _data
+   */
+  const handleCheckable = () => {
+    setIsTreeCheckable(pre => !pre)
+  }
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => !keys.includes(_key))
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <div style={{ padding: '0 16px' }}>
+      <TreeTransferModal
+        open={boxChoiceOpen}
+        onCancel={() => setBoxChoiceOpen(false)}
+        onRadioChange={(val) => console.log('radio', val)}    // 顶部 radio 事件
+        dataSource={boxDataSource}                   // 数据源
+        targetItems={targetItems}               // 右侧选中项
+        checkedKeys={checkedKeys}               // 左侧选中
+        onReset={onReset}                       // 重置按钮事件
+        onOk={onOk}                             // 确定按钮事件
+        onTreeCheck={onTreeCheck}               // 树check选中事件
+        onItemDelete={onItemDelete}             // 右侧点击删除事件
+      />
+      <Space size={12} direction='vertical'>
+        <Space>
+          <Input size='middle' onChange={(e) => onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} />
+          <Button style={{ width: '80px' }} type='primary' >导入盒子</Button>
+        </Space>
+        <Space align='center'>
+          <ModalForm
+            width={'600px'}
+            formRef={createFormRef}
+            title="新建组"
+            modalProps={{ destroyOnClose: true }}
+            layout='horizontal'
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+            trigger={<Button type='link' >新建组</Button>}
+            submitter={{
+              searchConfig: {
+                submitText: '确定',
+                resetText: '取消',
+              },
+            }}
+            onFinish={onCreateSubmit}
+          >
+            <ProFormText
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+              width="md"
+              name="name"
+              label="盒子组名称"
+              placeholder="请输入盒子名称"
+            />
+            <ProFormText
+              width="md"
+              name="boxList"
+              label="盒子选择"
+              placeholder="已选择0个盒子"
+              fieldProps={{
+                readOnly: true,
+                suffix: (
+                  <Space>
+                    <a onClick={() => {
+                      createFormRef.current?.setFieldValue('boxList', null)
+                    }} >恢复默认</a>
+                    <a onClick={() => setBoxChoiceOpen(true)}>范围选择</a>
+                  </Space>
+                )
+              }}
+            />
+          </ModalForm>
+          <Divider type="vertical" />
+          {/* @ts-ignore */}
+          <Button danger type='link' disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
+          <Divider type="vertical" />
+          <Button type="link" onClick={() => handleCheckable()} icon={isTreeCheckable ? <DiffOutlined /> : <SwitcherOutlined />} />
+          <Button type="link" onClick={() => handleCheckable()} icon={isTreeCheckable ? <DiffOutlined /> : <SwitcherOutlined />} />
+        </Space>
+        <Divider style={{ margin: 0 }} />
+        <BoxTree
+          treeCheckable={isTreeCheckable}
+          data={data}
+          onItemSelect={onItemSelect}
+          onItemCheck={onItemCheck}
+          onItemDelete={onBoxDelete}
+          {...treeProps}
+        />
+      </Space>
+    </div>
+  )
+}
+
+export default BoxGroupPanel
--- a/packages/biz/src/boxSelectTree/demo/basic.tsx
+++ b/packages/biz/src/boxSelectTree/demo/basic.tsx
@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { BoxSelectTree } from '@zhst/biz';
+import { treeData, boxDataSource } from './mock'
+import { Select, TreeProps, Modal, Checkbox } from 'antd';
+
+const { Option } = Select
+
+const demo = () => {
+  const [searchType, setSearchType] = useState('1')
+  const [searchVal, setSearchVal] = useState('')
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+  const [modal, contextHolder] = Modal.useModal();
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
+    setCheckedKeys(keys)
+  }
+
+  const onBoxBatchDelete = () => {
+    console.log('盒子批量删除', checkedKeys)
+    modal.warning({
+      content: (
+        <div>
+          <p>请确认是否从系统中删除盒子？</p>
+          <Checkbox>所选盒子同时从系统中删除</Checkbox>
+        </div>
+      ),
+      cancelText: '取消',
+      okText: '确定',
+      onOk() {},
+      onCancel() {}
+    })
+  }
+
+  return (
+    <div style={{ border: '1px solid #ccc', width: '320px' }}>
+      {contextHolder}
+      <BoxSelectTree
+        data={treeData}
+        boxDataSource={boxDataSource}
+        onSearch={e => console.log('搜索', e)}
+        onCreateSubmit={async () => { return true }}
+        onItemCheck={onTreeCheck}
+        onItemSelect={e => console.log('onItemSelect', e)}
+        onTabChange={e => console.log('tabChange', e)}
+        onBoxDelete={data => console.log('盒子删除', data)}
+        onBoxBatchDelete={onBoxBatchDelete}
+        searchInputProps={{
+          addonBefore: (
+            <Select
+              value={searchType}
+              onChange={_type => {
+                setSearchType(_type)
+                setSearchVal('')
+              }}
+              style={{ width: '72px' }}
+            >
+              <Option value="1">盒子</Option>
+              <Option value="2">盒子组</Option>
+            </Select>
+          ),
+          onChange: e => setSearchVal(e.target.value),
+          value: searchVal
+        }}
+        treeProps={{
+          checkedKeys
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;
--- a/packages/biz/src/boxSelectTree/demo/mock.tsx
+++ b/packages/biz/src/boxSelectTree/demo/mock.tsx
@ -0,0 +1,69 @@
+import { TreeDataNode } from "antd";
+
+export const treeData: TreeDataNode[] = [
+  {
+    title: '全部盒子',
+    key: '0-0',
+    children: [
+      {
+        title: '盒子组1',
+        key: '0-0-0',
+        children: [
+          {
+            title: '摄像头1',
+            key: '0-0-0-0',
+          },
+          {
+            title: '摄像头2',
+            key: '0-0-0-1',
+          },
+        ],
+      },
+      {
+        title: '盒子组2',
+        key: '0-0-1',
+        children: [
+          {
+            title: '摄像头4',
+            key: '0-0-1-0'
+          }
+        ],
+      },
+    ],
+  },
+];
+
+
+export const boxDataSource: TreeDataNode[] = [
+  {
+    key: '0-0',
+    title: '分组0-0',
+    isLeaf: false,
+    checkable: false,
+  },
+  {
+    key: '0-1',
+    title: '分组0-1',
+    isLeaf: false,
+    children: [
+      { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
+      { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
+      { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
+      {
+        key: '0-1-3',
+        title: '分组0-1-3',
+        isLeaf: false,
+        children: [
+          { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true },
+          { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
+          { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
+        ],
+      },
+    ],
+  },
+  { key: '0-2', title: '分组0-2', isLeaf: false, checkable: false, },
+  { key: '0-3', title: '分组0-3', isLeaf: false, checkable: false, },
+  { key: '0-4', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-5', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-6', title: '分组0-4', isLeaf: false, checkable: false, },
+];
--- a/packages/biz/src/boxSelectTree/index.md
+++ b/packages/biz/src/boxSelectTree/index.md
@ -0,0 +1,26 @@
+---
+category: Components
+title: BoxSelectTree 盒子树
+demo:
+  cols: 2
+group:
+  title: 进阶组件
+  order: 2
+---
+
+盒子树
+
+## 代码演示
+
+<code src="./demo/basic.tsx">基本用法</code>
+
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| data | 数据源 | Array[] | [] | - |
+| onSearch | 搜索监听 | function: (e) => void | - | - |
+| onItemSelect | 树当前选中（单选） | function: (e) => void | - | - |
+| onItemCheck | 树选择（支持多选） | function: (e) => void | - | - |
+| tabsProps | Tabs组件的Props | antd的Tabs组件 | - | - |
+| searchInputProps | 搜索框的Props | antd的Input组件 | - | - |
+| onTabChange | tab切换监听 | function: (e) => void | - | - |
--- a/packages/biz/src/boxSelectTree/index.tsx
+++ b/packages/biz/src/boxSelectTree/index.tsx
@ -0,0 +1,3 @@
+import BoxSelectTree from './boxSelectTree';
+
+export default BoxSelectTree;
--- a/packages/biz/src/boxSelectTree/mock.tsx
+++ b/packages/biz/src/boxSelectTree/mock.tsx
@ -0,0 +1,34 @@
+import { TreeDataNode } from "antd";
+
+export const treeData: TreeDataNode[] = [
+  {
+    title: '全部盒子',
+    key: '0-0',
+    children: [
+      {
+        title: '盒子组1',
+        key: '0-0-0',
+        children: [
+          {
+            title: '摄像头1',
+            key: '0-0-0-0',
+          },
+          {
+            title: '摄像头2',
+            key: '0-0-0-1',
+          },
+        ],
+      },
+      {
+        title: '盒子组2',
+        key: '0-0-1',
+        children: [
+          {
+            title: '摄像头4',
+            key: '0-0-1-0'
+          }
+        ],
+      },
+    ],
+  },
+];
--- a/packages/biz/src/index.tsx
+++ b/packages/biz/src/index.tsx
@ -1,2 +1,5 @@
-export { default as Demo } from './Demo';
 export { default as BigImageModal } from './BigImageModal'
+export { default as BoxSelectTree } from './boxSelectTree'
+export { default as Tree } from './tree'
+export { default as TreeTransfer } from './treeTransfer'
+export { default as TreeTransferModal } from './treeTransferModal'
--- a/packages/biz/src/tree/boxTree.tsx
+++ b/packages/biz/src/tree/boxTree.tsx
@ -0,0 +1,76 @@
+import React, { FC } from 'react';
+import { Tree, Badge, TreeDataNode, Space, TreeProps } from 'antd';
+import { CloseOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons'
+import { ModalForm, ProFormText } from '@ant-design/pro-components';
+import './index.less'
+
+const componentName = 'zhst-biz-tree'
+
+export interface BoxTreeProps extends TreeProps {
+  data: TreeDataNode[]
+  treeCheckable?: boolean
+  showItemOption?: boolean
+  treeProps?: TreeProps
+  onItemCheck?: TreeProps['onCheck']
+  onItemSelect?: TreeProps['onSelect']
+  onItemSetting?: (_data: any) => void
+  onItemDelete?: (_data: any) => void
+  onRenameFinish?: (_data: any, _nodeData: any) => Promise<any>
+}
+
+const boxTree: FC<BoxTreeProps> = (props) => {
+  const { onItemSelect, onItemCheck, onItemSetting, onItemDelete, data = [], showItemOption = true, treeCheckable = false, onRenameFinish } = props
+
+  return (
+    <Tree
+      checkable={treeCheckable}
+      blockNode
+      onSelect={onItemSelect}
+      onCheck={onItemCheck}
+      treeData={data}
+      titleRender={(_nodeData) => {
+        return (
+          <div className={`${componentName}-item-render`}>
+            {!_nodeData.children && <Badge style={{ marginRight: '6px' }} status="success" />}
+            {_nodeData.title as any}
+            {showItemOption && <Space className={`${componentName}-item-render_right`} style={{ float:'right' }} >
+              <ModalForm
+                title="重命名"
+                width={600}
+                modalProps={{ destroyOnClose: true }}
+                layout='horizontal'
+                labelCol={{ span: 6 }}
+                wrapperCol={{ span: 18 }}
+                trigger={<EditOutlined />}
+                submitter={{
+                  searchConfig: {
+                    submitText: '确定',
+                    resetText: '取消',
+                  },
+                }}
+                onFinish={async (value) => onRenameFinish?.(value, _nodeData)}
+              >
+                <ProFormText
+                  rules={[
+                    {
+                      required: true,
+                    },
+                  ]}
+                  width="md"
+                  name="name"
+                  label="盒子名称"
+                  placeholder="请输入盒子名称"
+                />
+              </ModalForm>
+              <SettingOutlined onClick={() => onItemSetting?.(_nodeData)} />
+              <CloseOutlined onClick={() => onItemDelete?.(_nodeData)} />
+            </Space>}
+          </div>
+        )
+      }}
+      {...props}
+    />
+  );
+};
+
+export default boxTree;
--- a/packages/biz/src/tree/demo/basic.tsx
+++ b/packages/biz/src/tree/demo/basic.tsx
@ -0,0 +1,20 @@
+import React from 'react';
+import { Tree } from '@zhst/biz';
+import { treeData } from './mock'
+
+const demo = () => {
+  return (
+    <div style={{ width: '320px' }}>
+      <Tree
+        data={treeData}
+        onItemCheck={e => console.log('多选框', e)}
+        onItemSelect={e => console.log('当前选中', e)}
+        onItemDelete={(e) => console.log('删除', e)}
+        onItemSetting={e => console.log('配置', e)}
+        onRenameFinish={async (data, pData) => console.log('重命名表单提交', data, pData)}
+      />
+    </div>
+  );
+};
+
+export default demo;
--- a/packages/biz/src/tree/demo/customTitleRender.tsx
+++ b/packages/biz/src/tree/demo/customTitleRender.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+import { Tree } from '@zhst/biz';
+import { Tooltip } from 'antd';
+import { treeData } from './mock'
+
+const demo = () => {
+  return (
+    <div style={{ width: '320px' }}>
+      <Tree
+        data={treeData}
+        titleRender={(_nodeData) => {
+          const { title } = _nodeData as any
+          return (
+            <div>
+              {title}
+              <div style={{ float: 'right' }} >
+                <Tooltip placement="right" title={'存在0个'}>
+                  <a >包含0个</a>
+                </Tooltip>
+              </div>
+            </div>
+          )
+        }
+      }
+      />
+    </div>
+  );
+};
+
+export default demo;
--- a/packages/biz/src/tree/demo/mock.tsx
+++ b/packages/biz/src/tree/demo/mock.tsx
@ -0,0 +1,34 @@
+import { TreeDataNode } from "antd";
+
+export const treeData: TreeDataNode[] = [
+  {
+    title: '全部盒子',
+    key: '0-0',
+    children: [
+      {
+        title: '盒子组1',
+        key: '0-0-0',
+        children: [
+          {
+            title: '摄像头1',
+            key: '0-0-0-0',
+          },
+          {
+            title: '摄像头2',
+            key: '0-0-0-1',
+          },
+        ],
+      },
+      {
+        title: '盒子组2',
+        key: '0-0-1',
+        children: [
+          {
+            title: '摄像头4',
+            key: '0-0-1-0'
+          }
+        ],
+      },
+    ],
+  },
+];
--- a/packages/biz/src/tree/demo/noOption.tsx
+++ b/packages/biz/src/tree/demo/noOption.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import { Tree } from '@zhst/biz';
+import { treeData } from './mock'
+
+const demo = () => {
+  return (
+    <div style={{ width: '320px' }}>
+      <Tree
+        data={treeData}
+        showItemOption={false}
+      />
+    </div>
+  );
+};
+
+export default demo;
--- a/packages/biz/src/tree/index.less
+++ b/packages/biz/src/tree/index.less
@ -0,0 +1,9 @@
+.zhst-biz-tree-item-render {
+  &_right {
+    display: none;
+  }
+
+  &:hover &_right {
+    display: inline-flex;
+  }
+}
--- a/packages/biz/src/tree/index.md
+++ b/packages/biz/src/tree/index.md
@ -0,0 +1,21 @@
+---
+category: Components
+title: Tree 树
+demo:
+  cols: 2
+group:
+  title: 数据展示
+  order: 2
+---
+
+
+## 代码演示
+
+<code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/customTitleRender.tsx">自定义渲染界面</code>
+<code src="./demo/noOption.tsx">不展示配置项</code>
+
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| data | 数据源 | Array[] | [] | - |
--- a/packages/biz/src/tree/index.tsx
+++ b/packages/biz/src/tree/index.tsx
@ -0,0 +1,3 @@
+import BoxTree from './boxTree';
+
+export default BoxTree;
--- a/packages/biz/src/treeTransfer/TreeTransfer.tsx
+++ b/packages/biz/src/treeTransfer/TreeTransfer.tsx
@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Button, Card, Flex, Input, Tree } from 'antd';
+import theme from 'antd/es/theme'
+import { TransferProps, TreeDataNode, TreeProps } from 'antd';
+import './index.less'
+import { DeleteOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-design/icons';
+import { getAllRootKeyById } from './treeTransferHelper';
+
+const componentName = 'zhst-biz-treeTransfer'
+
+export interface TreeTransferProps {
+  dataSource: TreeDataNode[]
+  treeProps?: TreeProps
+  targetItems: TreeDataNode[];
+  checkedKeys: string[];
+  onTreeSelect?: TreeProps['onSelect']
+  onTreeCheck?: TreeProps['onCheck']
+  onItemDelete?: (key: string, info?: { root: TreeDataNode[], keys: string[] }) => void
+  onChange?: TransferProps['onChange'];
+  onOk?: (data: any) => void;
+  onReset?: () => void;
+}
+
+const { useToken } = theme
+
+const TreeTransfer: React.FC<TreeTransferProps> = ({
+  dataSource,
+  treeProps,
+  targetItems = [],
+  checkedKeys = [],
+  onTreeCheck,
+  onTreeSelect,
+  onItemDelete,
+  onOk,
+  onReset
+}) => {
+
+  const { token } = useToken()
+  const [keyWords, setKeyWords ] = useState('')
+
+  function findNodesWithKeyword(_keyWords: string, _treeData: TreeDataNode[]) {
+    // @ts-ignore
+    function dfs(node: any) {
+      return node.filter((item: { title: string | string[]; }) => item.title.includes(_keyWords))
+    }
+
+    const data = dfs(_treeData)
+    return data || [];
+  }
+
+  return (
+    <Flex gap={20} className={componentName} align='center' justify='center'>
+      <div className={`${componentName}-left`}>
+        <Card
+          className={`${componentName}-left_card`}
+          title={<div style={{ textAlign: 'center' }} >可选择的范围</div>}
+          bodyStyle={{ padding: 12 }}
+        >
+          <Input prefix={<SearchOutlined />} onChange={e => setKeyWords(e.target.value)} placeholder='请输入设备名称' />
+          <Tree
+            style={{ marginTop: '6px' }}
+            height={420}
+            blockNode
+            checkable
+            checkedKeys={checkedKeys}
+            treeData={findNodesWithKeyword(keyWords, dataSource)}
+            onCheck={(keys, info) => onTreeCheck?.(keys, info)}
+            onSelect={(keys, info) => onTreeSelect?.(keys, info)}
+            {...treeProps}
+          />
+        </Card>
+      </div>
+      <DoubleRightOutlined/>
+      <div className={`${componentName}-right`}>
+        <Card
+          className={`${componentName}-right_card`}
+          title={<div style={{ textAlign: 'center' }}>已选择的范围</div>}
+          bodyStyle={{ padding: 0 }}
+
+        >
+          <div
+            className={`${componentName}-right_card__items`}
+          >
+            {targetItems.map(item => (
+              <div
+                className={`${componentName}-right_card__items___item`}
+                key={item.key}
+                onMouseEnter={(e: any) => {
+                  e.target.style.backgroundColor = token.colorPrimaryBg
+                  e.target.style.color = token.colorPrimary
+                }}
+                onMouseLeave={(e: any) => {
+                  e.target.style.color = token.colorText
+                  e.target.style.backgroundColor = null
+                }}
+              >
+                {item.title as any}
+                <div style={{ float: 'right' }}>
+                  <DeleteOutlined onClick={() => {
+                    const { root, keys } = getAllRootKeyById(item.key as string, dataSource)
+                    onItemDelete?.(item.key as string, { root, keys })
+                  }} />
+                </div>
+              </div>
+            ))}
+
+          </div>
+          <Flex
+            className={`${componentName}-right_card__btns`}
+          >
+            <Button style={{ marginRight: 8, width: '50%' }} disabled={targetItems.length <= 0} onClick={onReset}>重置</Button>
+            <Button
+              style={{ width: '50%' }}
+              type='primary'
+              onClick={() => onOk?.(targetItems)}
+            >确定</Button>
+          </Flex>
+        </Card>
+      </div>
+    </Flex>
+  );
+}
+
+export default TreeTransfer
--- a/packages/biz/src/treeTransfer/demo/basic.tsx
+++ b/packages/biz/src/treeTransfer/demo/basic.tsx
@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => !keys.includes(_key))
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <TreeTransfer
+      dataSource={boxDataSource}
+      targetItems={targetItems}
+      checkedKeys={checkedKeys}
+      onTreeCheck={onTreeCheck}
+      onItemDelete={onItemDelete}
+      onOk={onOk}
+      onReset={onReset}
+    />
+  )
+};
+
+export default App;
--- a/packages/biz/src/treeTransfer/demo/mock.ts
+++ b/packages/biz/src/treeTransfer/demo/mock.ts
@ -0,0 +1,35 @@
+import { TreeDataNode } from "antd";
+
+export const boxDataSource: TreeDataNode[] = [
+  {
+    key: '0-0',
+    title: '分组0-0',
+    isLeaf: false,
+    checkable: false,
+  },
+  {
+    key: '0-1',
+    title: '分组0-1',
+    isLeaf: false,
+    children: [
+      { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
+      { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
+      { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
+      {
+        key: '0-1-3',
+        title: '分组0-1-3',
+        isLeaf: false,
+        children: [
+          { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true },
+          { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
+          { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
+        ],
+      },
+    ],
+  },
+  { key: '0-2', title: '分组0-2', isLeaf: false, checkable: false, },
+  { key: '0-3', title: '分组0-3', isLeaf: false, checkable: false, },
+  { key: '0-4', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-5', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-6', title: '分组0-4', isLeaf: false, checkable: false, },
+];
--- a/packages/biz/src/treeTransfer/demo/withModal.tsx
+++ b/packages/biz/src/treeTransfer/demo/withModal.tsx
@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { Button, Modal, Radio, TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+
+const treeData: TreeDataNode[] = [
+  {
+    key: '0-0',
+    title: '分组0-0',
+    isLeaf: false,
+    checkable: false,
+  },
+  {
+    key: '0-1',
+    title: '分组0-1',
+    isLeaf: false,
+    children: [
+      { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
+      { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
+      { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
+      {
+        key: '0-1-3',
+        title: '分组0-1-3',
+        isLeaf: false,
+        children: [
+          { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true },
+          { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
+          { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
+        ],
+      },
+    ],
+  },
+  { key: '0-2', title: '分组0-2', isLeaf: false, checkable: false, },
+  { key: '0-3', title: '分组0-3', isLeaf: false, checkable: false, },
+  { key: '0-4', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-5', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-6', title: '分组0-4', isLeaf: false, checkable: false, },
+];
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+  const [type, setType] = useState('box')
+  const [open, setOpen] = useState(false)
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => !keys.includes(_key))
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <div>
+      <Button type="primary" onClick={() => setOpen(true)} >选择盒子</Button>
+      <Modal
+        open={open}
+        destroyOnClose
+        title="统计点位"
+        width="948px"
+        onCancel={() => setOpen(false)}
+        footer={null}
+      >
+        <div>
+          <Radio.Group
+            onChange={e => setType(e.target.value)}
+            style={{ marginLeft: '24px', padding: '20px 0' }}
+            value={type}
+          >
+            <Radio value={'box'}>盒子</Radio>
+            <Radio value={'boxGroup'}>盒子组</Radio>
+          </Radio.Group>
+          {type === 'box' ?
+            (
+              <TreeTransfer
+                dataSource={treeData}
+                targetItems={targetItems}
+                checkedKeys={checkedKeys}
+                onTreeCheck={onTreeCheck}
+                onItemDelete={onItemDelete}
+                onOk={onOk}
+                onReset={onReset}
+              />
+            ) : (
+              <TreeTransfer
+                dataSource={treeData}
+                targetItems={targetItems}
+                checkedKeys={checkedKeys}
+                onTreeCheck={onTreeCheck}
+                onItemDelete={onItemDelete}
+                onOk={onOk}
+                onReset={onReset}
+              />
+            )}
+          <p style={{ textAlign: 'right' }} >已选中{targetItems.length}个点位</p>
+        </div>
+      </Modal>
+    </div>
+  )
+};
+
+export default App;
--- a/packages/biz/src/treeTransfer/index.less
+++ b/packages/biz/src/treeTransfer/index.less
@ -0,0 +1,43 @@
+.zhst-biz-treeTransfer {
+  &-left {
+    &_card {
+      width: 500px;
+      height: 522px;
+      background-color: #FCFCFC;
+    }
+  }
+
+  &-right {
+    &_card {
+      width: 300px;
+      height: 522px;
+      background-color: #FCFCFC;
+
+      &__items {
+        padding: 8px 4px;
+        overflow: scroll;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        &___item {
+          margin: 0;
+          padding: 4px 12px;
+          cursor: pointer;
+        }
+      }
+
+      &__btns {
+        width: 100%;
+        padding: 8px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+        border-top: 1px solid #f0f0f0;
+      }
+    }
+  }
+}
--- a/packages/biz/src/treeTransfer/index.md
+++ b/packages/biz/src/treeTransfer/index.md
@ -0,0 +1,18 @@
+---
+category: Components
+title: TreeTransfer 树穿梭框
+group:
+  title: 数据展示
+  order: 2
+---
+
+盒子树
+
+## 代码演示
+
+<code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/withModal.tsx">和Modal组合使用</code>
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| data | 数据源 | Array[] | [] | - |
--- a/packages/biz/src/treeTransfer/index.tsx
+++ b/packages/biz/src/treeTransfer/index.tsx
@ -0,0 +1,3 @@
+import TreeTransfer from "./TreeTransfer";
+
+export default TreeTransfer
--- a/packages/biz/src/treeTransfer/treeTransferHelper.ts
+++ b/packages/biz/src/treeTransfer/treeTransferHelper.ts
@ -0,0 +1,62 @@
+export const isChecked = (selectedKeys: React.Key[], eventKey: React.Key) =>
+  selectedKeys.includes(eventKey);
+
+function isObject(value: any) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+/**
+ * 通过子元素找到父级节点
+ * @param objects
+ * @param element
+ * @returns
+ */
+export const findParentByChild = (objects: any[], propertyValue: string | number, propertyKey: string = 'key') => {
+  for (let i = 0; i < objects.length; i++) {
+    const obj = objects[i];
+
+    if (obj[propertyKey] === propertyValue) {
+      return obj
+    } else if (typeof obj === 'object') {
+      const found = findParentByChild(Object.values(obj), propertyValue);
+
+      if (found) {
+        return obj
+      }
+    }
+  }
+  return null; // 如果找不到包含具有指定属性的子对象的父对象，返回 null
+}
+
+export const getAllRootKeyById = (val: string | number, list: any[], key: string = 'key') => {
+  let keys: any[] = []
+  const findParentByChild = (propertyValue: string | number, objects: any[], propertyKey: string) => {
+    for (let i = 0; i < objects.length; i++) {
+      const obj = objects[i];
+
+      if (obj[propertyKey] === propertyValue) {
+        console.log('obj', obj)
+        return obj
+      } else if (typeof obj === 'object') {
+        const found = findParentByChild(propertyValue, Object.values(obj), propertyKey);
+
+        if (found) {
+          if (isObject(found)) {
+            keys.push(found.key)
+          }
+
+          return obj
+        }
+      }
+    }
+    return null; // 如果找不到包含具有指定属性的子对象的父对象，返回 null
+  }
+
+  const data = findParentByChild(val, list, key)
+  data.key && keys.push(data.key)
+
+  return {
+    root: data,
+    keys
+  }
+}
--- a/packages/biz/src/treeTransferModal/TreeTransferModal.tsx
+++ b/packages/biz/src/treeTransferModal/TreeTransferModal.tsx
@ -0,0 +1,91 @@
+import React, { FC, useState } from 'react';
+import TreeTransfer from '../treeTransfer';
+import { Modal, ModalProps, Radio, RadioGroupProps, TransferProps, TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+
+export interface TreeTransferModalProps {
+  dataSource: TreeDataNode[]
+  treeProps?: TreeProps
+  targetItems: TreeDataNode[];
+  checkedKeys: string[];
+  onTreeSelect?: TreeProps['onSelect']
+  onTreeCheck?: TreeProps['onCheck']
+  onItemDelete?: (key: string, info?: { root: TreeDataNode[], keys: string[] }) => void
+  onChange?: TransferProps['onChange'];
+  onOk?: (data: any) => void;
+  onReset?: () => void;
+  open?: boolean
+  onCancel?: ModalProps['onCancel']
+  onRadioChange?: RadioGroupProps['onChange']
+  modalProps?: ModalProps
+}
+
+const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
+  const {
+    open,
+    dataSource = [],
+    checkedKeys,
+    onItemDelete,
+    onOk,
+    onCancel,
+    onReset,
+    onRadioChange,
+    onTreeCheck,
+    targetItems,
+    modalProps,
+  } = props
+
+  const [type, setType] = useState('box')
+
+  return (
+    <Modal
+      open={open}
+      destroyOnClose
+      title="统计点位"
+      width="948px"
+      footer={null}
+      onCancel={onCancel}
+      {...modalProps}
+    >
+      <div>
+        <Radio.Group
+          onChange={e => {
+            setType(e.target.value)
+            onRadioChange?.(e)
+          }}
+          style={{ marginLeft: '24px', padding: '20px 0' }}
+          value={type}
+        >
+          <Radio value={'box'}>盒子</Radio>
+          <Radio value={'boxGroup'}>盒子组</Radio>
+        </Radio.Group>
+        {type === 'box' ?
+          (
+            <TreeTransfer
+              dataSource={dataSource}
+              targetItems={targetItems}
+              checkedKeys={checkedKeys}
+              onTreeCheck={onTreeCheck}
+              onItemDelete={onItemDelete}
+              onOk={onOk}
+              onReset={onReset}
+            />
+          ) : (
+            <TreeTransfer
+              dataSource={dataSource}
+              targetItems={targetItems}
+              checkedKeys={checkedKeys}
+              onTreeCheck={onTreeCheck}
+              onItemDelete={onItemDelete}
+              onOk={onOk}
+              onReset={onReset}
+            />
+          )}
+        <p style={{ textAlign: 'right' }} >已选中{targetItems.length}个点位</p>
+      </div>
+    </Modal>
+  )
+};
+
+export default TreeTransferModal;
+
--- a/packages/biz/src/treeTransferModal/demo/basic.tsx
+++ b/packages/biz/src/treeTransferModal/demo/basic.tsx
@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { TreeTransferModal } from '@zhst/biz';
+import { Button, TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+  const [open, setOpen] = useState(false)
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => !keys.includes(_key))
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <div>
+      <Button type="primary" onClick={() => setOpen(true)} >选择盒子</Button>
+      <TreeTransferModal
+        open={open}
+        onCancel={() => setOpen(false)}
+        onRadioChange={() => setOpen(false)}    // 顶部 radio 事件
+        dataSource={boxDataSource}                   // 数据源
+        targetItems={targetItems}               // 右侧选中项
+        checkedKeys={checkedKeys}               // 左侧选中
+        onReset={onReset}                       // 重置按钮事件
+        onOk={onOk}                             // 确定按钮事件
+        onTreeCheck={onTreeCheck}               // 树check选中事件
+        onItemDelete={onItemDelete}             // 右侧点击删除事件
+      />
+    </div>
+  )
+};
+
+export default App;
--- a/packages/biz/src/treeTransferModal/demo/mock.ts
+++ b/packages/biz/src/treeTransferModal/demo/mock.ts
@ -0,0 +1,35 @@
+import { TreeDataNode } from "antd";
+
+export const boxDataSource: TreeDataNode[] = [
+  {
+    key: '0-0',
+    title: '分组0-0',
+    isLeaf: false,
+    checkable: false,
+  },
+  {
+    key: '0-1',
+    title: '分组0-1',
+    isLeaf: false,
+    children: [
+      { key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
+      { key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
+      { key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
+      {
+        key: '0-1-3',
+        title: '分组0-1-3',
+        isLeaf: false,
+        children: [
+          { key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true },
+          { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true },
+          { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true },
+        ],
+      },
+    ],
+  },
+  { key: '0-2', title: '分组0-2', isLeaf: false, checkable: false, },
+  { key: '0-3', title: '分组0-3', isLeaf: false, checkable: false, },
+  { key: '0-4', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-5', title: '分组0-4', isLeaf: false, checkable: false, },
+  { key: '0-6', title: '分组0-4', isLeaf: false, checkable: false, },
+];
--- a/packages/biz/src/treeTransferModal/index.md
+++ b/packages/biz/src/treeTransferModal/index.md
@ -0,0 +1,17 @@
+---
+category: Components
+title: TreeTransferModal 树穿梭框弹框
+group:
+  title: 数据展示
+  order: 2
+---
+
+树穿梭框弹框
+
+## 代码演示
+
+<code src="./demo/basic.tsx">基本用法</code>
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| data | 数据源 | Array[] | [] | - |
--- a/packages/biz/src/treeTransferModal/index.tsx
+++ b/packages/biz/src/treeTransferModal/index.tsx
@ -0,0 +1,3 @@
+import TreeTransferModal from './TreeTransferModal'
+
+export default TreeTransferModal
--- a/packages/func/.fatherrc.ts
+++ b/packages/func/.fatherrc.ts
@ -4,4 +4,5 @@ export default defineConfig({
  // more father config: https://github.com/umijs/father/blob/master/docs/config.md
  esm: { output: 'es' },
  cjs: { output: 'lib' },
+  // umd: { output: 'dist' }
 });
--- a/packages/func/CHANGELOG.md
+++ b/packages/func/CHANGELOG.md
@ -1,5 +1,16 @@
 # @zhst/utils

+## 0.7.0
+
+### Minor Changes
+
+- 新增业务组件 Tree、TreeTransfer、TreeTransferModal、BoxSelectTree
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/request@0.7.0
+
 ## 0.6.0

 ### Minor Changes
--- a/packages/func/dist/func.min.js
+++ b/packages/func/dist/func.min.js
--- a/packages/func/dist/umd/func.min.js
+++ b/packages/func/dist/umd/func.min.js
--- a/packages/func/es/index.js
+++ b/packages/func/es/index.js
@ -7,7 +7,4 @@ export * from "./number";
 export * from "./time";
 export * from "./utils";
 export * from "./camera";
-export * from "./math";
-export var a = function a(data) {
-  console.log('data', data);
-};
+export * from "./math";
--- a/packages/func/package.json
+++ b/packages/func/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/func",
-  "version": "0.6.0",
+  "version": "0.7.0",
  "description": "函数合集",
  "keywords": [
    "hooks"
--- a/packages/func/src/index.tsx
+++ b/packages/func/src/index.tsx
@ -8,7 +8,3 @@ export * from './time'
 export * from './utils'
 export * from './camera'
 export * from './math'
-
-export const a = (data: string) => {
-  console.log('data', data)
-}
--- a/packages/hooks/.fatherrc.ts
+++ b/packages/hooks/.fatherrc.ts
@ -4,4 +4,5 @@ export default defineConfig({
  // more father config: https://github.com/umijs/father/blob/master/docs/config.md
  esm: { output: 'es' },
  cjs: { output: 'lib' },
+  // umd: { output: 'dist' }
 });
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@ -1,5 +1,16 @@
 # @zhst/hooks

+## 0.7.0
+
+### Minor Changes
+
+- 新增业务组件 Tree、TreeTransfer、TreeTransferModal、BoxSelectTree
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/func@0.7.0
+
 ## 0.6.0

 ### Minor Changes
--- a/packages/hooks/es/useActivateWrapper/index.js
+++ b/packages/hooks/es/useActivateWrapper/index.js
@ -48,4 +48,4 @@ export var useActivateState = function useActivateState() {
  });
  return isActive;
 };
-export default useActivateWrapper;
+export default useActivateWrapper;
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/hooks",
-  "version": "0.6.0",
+  "version": "0.7.0",
  "description": "hooks合集",
  "keywords": [
    "hooks"
--- a/packages/material/.fatherrc.ts
+++ b/packages/material/.fatherrc.ts
@ -1,7 +0,0 @@
-import { defineConfig } from 'father';
-
-export default defineConfig({
-  // more father config: https://github.com/umijs/father/blob/master/docs/config.md
-  esm: { output: 'es' },
-  cjs: { output: 'lib' },
-});
--- a/packages/material/CHANGELOG.md
+++ b/packages/material/CHANGELOG.md
@ -1,140 +0,0 @@
-# @zhst/biz
-
-## 0.5.1
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/hooks@0.6.0
-  - @zhst/func@0.6.0
-  - @zhst/meta@0.7.0
-  - @zhst/biz@0.5.1
-
-## 0.5.0
-
-### Minor Changes
-
- feat: 初版发布
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/hooks@0.5.0
-  - @zhst/func@0.5.0
-  - @zhst/meta@0.6.0
-  - @zhst/biz@0.5.0
-
-## 0.4.2
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/meta@0.5.2
-  - @zhst/biz@0.4.2
-
-## 0.4.1
-
-### Patch Changes
-
- feat: 初始化
- Updated dependencies
-  - @zhst/hooks@0.4.1
-  - @zhst/func@0.4.1
-  - @zhst/meta@0.5.1
-  - @zhst/biz@0.4.1
-
-## 0.4.0
-
-### Minor Changes
-
- fix: 修改 pkg
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/hooks@0.4.0
-  - @zhst/func@0.4.0
-  - @zhst/meta@0.5.0
-  - @zhst/biz@0.4.0
-
-## 0.3.6
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/meta@0.4.4
-  - @zhst/biz@0.3.6
-
-## 0.3.5
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/meta@0.4.3
-  - @zhst/biz@0.3.5
-
-## 0.3.4
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/meta@0.4.2
-  - @zhst/biz@0.3.4
-
-## 0.3.3
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/func@0.3.1
-  - @zhst/biz@0.3.3
-  - @zhst/hooks@0.3.1
-  - @zhst/meta@0.4.1
-
-## 0.3.2
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/meta@0.4.0
-  - @zhst/biz@0.3.2
-
-## 0.3.1
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/meta@0.3.1
-  - @zhst/biz@0.3.1
-
-## 0.3.0
-
-### Minor Changes
-
- feat: 初始化项目包
-
-### Patch Changes
-
- Updated dependencies
-  - @zhst/hooks@0.3.0
-  - @zhst/func@0.3.0
-  - @zhst/meta@0.3.0
-  - @zhst/biz@0.3.0
-
-## 0.2.4
-
-### Patch Changes
-
- feat: 新增 meta 包
- Updated dependencies
-  - @zhst/func@0.2.4
-  - @zhst/hooks@0.2.4
-  - @zhst/meta@0.2.4
-
-## 0.2.3
-
-### Patch Changes
-
- fix: 调试包 link
- Updated dependencies
-  - @zhst/hooks@0.2.3
--- a/packages/material/README.md
+++ b/packages/material/README.md
@ -1,20 +0,0 @@
-:::warning{title=待开始}
-目前项目正在如火如荼的筹备中...
-:::
-
-## 介绍
-
-物料库，每一个物料都是单独存在的个体，不需要任何依赖，就能形成一个页面，甚至一个项目
-
-## 安装
-
-> pnpm install @zhst/material
-
-## 使用
-
-```jsx
-import React from 'react';
-import { Demo } from '@zhst/material'
-
-export default () => <Demo />
-```
--- a/packages/material/es/Demo/index.d.ts
+++ b/packages/material/es/Demo/index.d.ts
@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: () => React.JSX.Element;
-export default _default;
--- a/packages/material/es/Demo/index.js
+++ b/packages/material/es/Demo/index.js
@ -1,4 +0,0 @@
-import React from 'react';
-export default (function () {
-  return /*#__PURE__*/React.createElement("div", null, "hi");
-});
--- a/packages/material/es/index.d.ts
+++ b/packages/material/es/index.d.ts
@ -1 +0,0 @@
-export { default as Demo } from './Demo';
--- a/packages/material/es/index.js
+++ b/packages/material/es/index.js
@ -1 +0,0 @@
-export { default as Demo } from "./Demo";
--- a/packages/material/lib/Demo/index.d.ts
+++ b/packages/material/lib/Demo/index.d.ts
@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: () => React.JSX.Element;
-export default _default;
--- a/packages/material/lib/Demo/index.js
+++ b/packages/material/lib/Demo/index.js
@ -1,38 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Demo/index.tsx
-var Demo_exports = {};
-__export(Demo_exports, {
-  default: () => Demo_default
-});
-module.exports = __toCommonJS(Demo_exports);
-var import_react = __toESM(require("react"));
-var Demo_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement("div", null, "hi");
-};
--- a/packages/material/lib/index.d.ts
+++ b/packages/material/lib/index.d.ts
@ -1 +0,0 @@
-export { default as Demo } from './Demo';
--- a/packages/material/lib/index.js
+++ b/packages/material/lib/index.js
@ -1,39 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  Demo: () => import_Demo.default
-});
-module.exports = __toCommonJS(src_exports);
-var import_Demo = __toESM(require("./Demo"));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Demo
-});
--- a/packages/material/package.json
+++ b/packages/material/package.json
@ -1,39 +0,0 @@
-{
-  "name": "@zhst/material",
-  "version": "0.5.1",
-  "description": "物料库",
-  "keywords": [
-    "business",
-    "biz",
-    "zhst",
-    "material"
-  ],
-  "license": "ISC",
-  "author": "dev",
-  "sideEffects": [
-    "dist/*",
-    "es/**/style/*",
-    "lib/**/style/*",
-    "*.less"
-  ],
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "typings": "es/index.d.ts",
-  "files": [
-    "es",
-    "lib"
-  ],
-  "scripts": {
-    "build": "father build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "http://10.0.0.77:4874"
-  },
-  "dependencies": {
-    "@zhst/hooks": "workspace:^",
-    "@zhst/meta": "workspace:^",
-    "@zhst/func": "workspace:^",
-    "@zhst/biz": "workspace:^"
-  }
-}
--- a/packages/material/src/Demo/index.tsx
+++ b/packages/material/src/Demo/index.tsx
@ -1,8 +0,0 @@
-import React from 'react'
-
-export default () => {
-
-  return (
-    <div>hi</div>
-  )
-}
--- a/packages/material/src/changelog/index.md
+++ b/packages/material/src/changelog/index.md
@ -1,8 +0,0 @@
---
-nav:
-  title: 元组件
-title: 版本更新日志
-order: 99
---
-
-<embed src="../../CHANGELOG.md" ></embed>
--- a/packages/material/src/index.tsx
+++ b/packages/material/src/index.tsx
@ -1 +0,0 @@
-export { default as Demo } from './Demo';
--- a/packages/meta/CHANGELOG.md
+++ b/packages/meta/CHANGELOG.md
@ -1,5 +1,18 @@
 # @zhst/utils

+## 0.8.0
+
+### Minor Changes
+
+- 新增业务组件 Tree、TreeTransfer、TreeTransferModal、BoxSelectTree
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.7.0
+  - @zhst/func@0.7.0
+  - @zhst/meta@0.8.0
+
 ## 0.7.0

 ### Minor Changes
--- a/packages/meta/es/BigImagePreview/BigImagePreview.js
+++ b/packages/meta/es/BigImagePreview/BigImagePreview.js
@ -16,23 +16,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect, useState, useCallback, useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { useLatest } from '@zhst/hooks';
-import { get, pick, isNull,
-// @ts-ignore
-generateImg,
-// @ts-ignore
-dataURLToBlob,
-// @ts-ignore
-getOdRect,
-// @ts-ignore
-getExtendRect,
-// @ts-ignore
-getTransformRect,
-// @ts-ignore
-getRotateImg, getTransforms, addEventListenerWrapper,
-// @ts-ignore
-getFileByRect
-// @ts-ignore
-} from '@zhst/func';
+import { get, pick, isNull, generateImg, dataURLToBlob, getOdRect, getExtendRect, getTransformRect, getRotateImg, getTransforms, addEventListenerWrapper, getFileByRect } from '@zhst/func';
 import Align from 'rc-align';
 import { Button, Empty } from '..';
 import Icon from "../iconfont";
--- a/packages/meta/es/VideoPlayer/VideoPlayer.js
+++ b/packages/meta/es/VideoPlayer/VideoPlayer.js
@ -14,11 +14,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { noop, get, addEventListenerWrapper,
-// @ts-ignore
-dataURLToBlob, nextTick, toRealNumber, getTransforms, formatDurationTime
-// @ts-ignore
-} from '@zhst/func';
+import { noop, get, addEventListenerWrapper, dataURLToBlob, nextTick, toRealNumber, getTransforms, formatDurationTime } from '@zhst/func';
 import Align from 'rc-align';
 import { useLatest, useUpdateEffect, useFullscreen, useUnmount } from '@zhst/hooks';
 import classNames from 'classnames';
--- a/packages/meta/es/VideoPlayer/components/FlvPlayer/index.js
+++ b/packages/meta/es/VideoPlayer/components/FlvPlayer/index.js
@ -19,7 +19,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { Component } from 'react';
 import flvjs from 'flv.js';
-// @ts-ignore
 import { isEqual } from '@zhst/func';
 export var FLV_EVENT = flvjs.Events;
 var VideoPlayer = /*#__PURE__*/function (_Component) {
--- a/packages/meta/package.json
+++ b/packages/meta/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/meta",
-  "version": "0.7.0",
+  "version": "0.8.0",
  "description": "原子组件",
  "keywords": [
    "meta",
@ -67,7 +67,7 @@
    "@types/tar": "^6.1.10",
    "@types/throttle-debounce": "^5.0.2",
    "@types/warning": "^3.0.3",
-    "@types/zhst": "workspace:^",
+    "@zhst/types": "workspace:^",
    "@typescript-eslint/eslint-plugin": "^6.17.0",
    "@typescript-eslint/parser": "^6.17.0",
    "react": "^18.2.0",
--- a/packages/meta/src/BigImagePreview/BigImagePreview.tsx
+++ b/packages/meta/src/BigImagePreview/BigImagePreview.tsx
@ -5,23 +5,15 @@ import {
  get,
  pick,
  isNull,
-  // @ts-ignore
  generateImg,
-  // @ts-ignore
  dataURLToBlob,
-  // @ts-ignore
  getOdRect,
-  // @ts-ignore
  getExtendRect,
-  // @ts-ignore
  getTransformRect,
-  // @ts-ignore
  getRotateImg,
  getTransforms,
  addEventListenerWrapper,
-  // @ts-ignore
  getFileByRect
-// @ts-ignore
 } from '@zhst/func';
 import Align from 'rc-align';
 import { Button, Empty } from '..';
--- a/packages/meta/src/BigImagePreview/interface.ts
+++ b/packages/meta/src/BigImagePreview/interface.ts
--- a/packages/meta/src/VideoPlayer/VideoPlayer.tsx
+++ b/packages/meta/src/VideoPlayer/VideoPlayer.tsx
@ -3,13 +3,11 @@ import {
  noop,
  get,
  addEventListenerWrapper,
-    // @ts-ignore
  dataURLToBlob,
  nextTick,
  toRealNumber,
  getTransforms,
  formatDurationTime
-  // @ts-ignore
 } from '@zhst/func';
 import Align from 'rc-align';
 import { Rect, IScreenshotButtonProp, AlignType } from '@zhst/types'
--- a/packages/meta/src/VideoPlayer/components/FlvPlayer/index.tsx
+++ b/packages/meta/src/VideoPlayer/components/FlvPlayer/index.tsx
@ -1,6 +1,5 @@
 import React, { Component, CSSProperties } from 'react';
 import flvjs from 'flv.js';
-// @ts-ignore
 import { isEqual } from '@zhst/func';

 export const FLV_EVENT = flvjs.Events;
--- a/packages/meta/src/config-provider/context.ts
+++ b/packages/meta/src/config-provider/context.ts
@ -190,12 +190,6 @@ export interface ConfigConsumerProps {
  warning?: WarningContextProps;
 }

-/**
- *
- * @param suffixCls
- * @param customizePrefixCls
- * @returns
- */
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
  if (customizePrefixCls) {
    return customizePrefixCls;
--- a/packages/meta/src/config-provider/demo/direction.tsx
+++ b/packages/meta/src/config-provider/demo/direction.tsx
@ -8,7 +8,7 @@ import {
  SmileOutlined,
 } from '@ant-design/icons';
 import React, { useState } from 'react';
-import type { RadioChangeEvent } from '@zhst/meta';
+import type { RadioChangeEvent } from 'antd';
 import {
  Badge,
  Button,
@ -29,7 +29,7 @@ import {
  Switch,
  Tree,
  TreeSelect,
-} from '@zhst/meta';
+} from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';

 const InputGroup = Input.Group;
--- a/packages/meta/src/config-provider/demo/locale.tsx
+++ b/packages/meta/src/config-provider/demo/locale.tsx
@ -5,7 +5,7 @@
 import { EllipsisOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import React, { useState } from 'react';
-import type { RadioChangeEvent, TourProps, UploadFile } from '@zhst/meta';
+import type { RadioChangeEvent, TourProps, UploadFile } from 'antd';
 import {
  Upload,
  Tour,
@ -29,7 +29,7 @@ import {
  Image,
  InputNumber,
  Divider,
-} from '@zhst/meta';
+} from 'antd';
 import type { Locale } from 'antd/es/locale';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
--- a/packages/meta/src/config-provider/demo/theme.tsx
+++ b/packages/meta/src/config-provider/demo/theme.tsx
@ -1,16 +1,11 @@
 import React from 'react';
 import {
  Button,
-  ColorPicker,
-  ConfigProvider,
  Divider,
-  Form,
  Input,
-  InputNumber,
  Space,
-  Switch,
-} from 'antd';
-import type { Color } from 'antd/es/color-picker';
+  ConfigProvider,
+} from '@zhst/meta';

 type ThemeData = {
  borderRadius: number;
@ -30,8 +25,6 @@ const defaultData: ThemeData = {
 };

 export default () => {
-  const [form] = Form.useForm();
-
  const [data, setData] = React.useState<ThemeData>(defaultData);

  return (
@ -56,46 +49,6 @@ export default () => {
        </Space>
      </ConfigProvider>
      <Divider />
-      <Form
-        form={form}
-        onValuesChange={(_, allValues) => {
-          setData({
-            ...allValues,
-          });
-        }}
-        name="theme"
-        initialValues={defaultData}
-        labelCol={{ span: 4 }}
-        wrapperCol={{ span: 20 }}
-      >
-        <Form.Item
-          name="colorPrimary"
-          label="Primary Color"
-          trigger="onChangeComplete"
-          getValueFromEvent={(color: Color) => color.toHexString()}
-        >
-          <ColorPicker />
-        </Form.Item>
-        <Form.Item name="borderRadius" label="Border Radius">
-          <InputNumber />
-        </Form.Item>
-        <Form.Item label="Button">
-          <Form.Item name={['Button', 'algorithm']} valuePropName="checked" label="algorithm">
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            name={['Button', 'colorPrimary']}
-            label="Primary Color"
-            trigger="onChangeComplete"
-            getValueFromEvent={(color: Color) => color.toHexString()}
-          >
-            <ColorPicker />
-          </Form.Item>
-        </Form.Item>
-        <Form.Item name="submit" wrapperCol={{ offset: 4, span: 20 }}>
-          <Button type="primary">Submit</Button>
-        </Form.Item>
-      </Form>
    </div>
  );
 };
--- a/packages/meta/src/config-provider/index.tsx
+++ b/packages/meta/src/config-provider/index.tsx
@ -212,7 +212,7 @@ interface ProviderChildrenProps extends ConfigProviderProps {
  legacyLocale: Locale;
 }

-export const defaultPrefixCls = 'zhst';
+export const defaultPrefixCls = 'ant';
 let globalPrefixCls: string;
 let globalIconPrefixCls: string;
 let globalTheme: ThemeConfig;
--- a/packages/meta/src/config-provider/index.zh-CN.md
+++ b/packages/meta/src/config-provider/index.zh-CN.md
@ -0,0 +1,201 @@
+---
+category: Components
+subtitle: 全局化配置
+group: 其他
+title: ConfigProvider 全局化配置
+---
+
+为组件提供统一的全局化配置。
+
+## 使用
+
+ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
+
+```ts
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+// ...
+const Demo: React.FC = () => (
+  <ConfigProvider direction="rtl">
+    <App />
+  </ConfigProvider>
+);
+
+export default Demo;
+```
+
+### Content Security Policy
+
+部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：
+
+```ts
+<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
+  <Button>My Button</Button>
+</ConfigProvider>
+```
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<!-- <code src="./demo/locale.tsx">国际化</code>
+<code src="./demo/direction.tsx">方向</code>
+<code src="./demo/size.tsx">组件尺寸</code> -->
+<code src="./demo/theme.tsx">主题</code>
+<!-- <code src="./demo/wave.tsx">自定义波纹</code>
+<code src="./demo/prefixCls.tsx" debug>前缀</code>
+<code src="./demo/useConfig.tsx" debug>获取配置</code>
+<code src="./demo/warning.tsx" debug>警告</code> -->
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |  |
+| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
+| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
+| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
+| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
+| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
+| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
+| locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - |  |
+| popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 5.5.0 |
+| popupOverflow | Select 类组件弹层展示逻辑，默认为可视区域滚动，可配置成滚动区域滚动 | 'viewport' \| 'scroll'  | 'viewport' | 5.5.0 |
+| prefixCls | 设置统一样式前缀 | string | `ant` |  |
+| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty-cn) | function(componentName: string): ReactNode | - |  |
+| theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-cn) | [Theme](/docs/react/customize-theme-cn#theme) | - | 5.0.0 |
+| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
+| warning | 设置警告等级，`strict` 为 `false` 时会将废弃相关信息聚合为单条信息 | { strict: boolean } | - | 5.10.0 |
+
+### ConfigProvider.config()
+
+设置 `Modal`、`Message`、`Notification` 静态方法配置，只会对非 hooks 的静态方法调用生效。
+
+```ts
+ConfigProvider.config({
+  prefixCls: 'ant',
+  iconPrefixCls: 'anticon',
+
+  // 5.6.0+
+  // 请优先考虑使用 hooks 版本
+  theme: { token: { colorPrimary: 'red' } },
+});
+```
+
+### ConfigProvider.useConfig() `5.3.0+`
+
+`5.2.0` 版本后可用。获取父级 `Provider` 的值。如 `DisabledContextProvider`、`SizeContextProvider`。
+
+```js
+const {
+  componentDisabled, // 5.3.0+
+  componentSize, // 5.3.0+
+} = ConfigProvider.useConfig();
+```
+
+<!-- prettier-ignore -->
+| 返回值 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| componentDisabled | antd 组件禁用状态 | boolean | - | 5.3.0 |
+| componentSize | antd 组件大小状态 | `small` \| `middle` \| `large` | - | 5.3.0 |
+
+### 组件配置
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
+| breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
+| descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
+| dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
+| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
+| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
+| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| list | 设置 List 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
+| notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
+| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
+| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| wave | 设置水波纹特效 | { disabled?: boolean, showEffect?: (node: HTMLElement, info: { className, token, component }) => void } | - | 5.8.0 |
+
+## FAQ
+
+#### 如何增加一个新的语言包？
+
+参考[《增加语言包》](/docs/react/i18n#%E5%A2%9E%E5%8A%A0%E8%AF%AD%E8%A8%80%E5%8C%85)。
+
+#### 为什么时间类组件的国际化 locale 设置不生效？
+
+参考 FAQ [为什么时间类组件的国际化 locale 设置不生效？](/docs/react/faq#为什么时间类组件的国际化-locale-设置不生效)。
+
+#### 配置 `getPopupContainer` 导致 Modal 报错？
+
+相关 issue：<https://github.com/ant-design/ant-design/issues/19974>
+
+当如下全局设置 `getPopupContainer` 为触发节点的 parentNode 时，由于 Modal 的用法不存在 `triggerNode`，这样会导致 `triggerNode is undefined` 的报错，需要增加一个[判断条件](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a)。
+
+```diff
+ <ConfigProvider
+-  getPopupContainer={triggerNode => triggerNode.parentNode}
+  getPopupContainer={node => {
+    if (node) {
+      return node.parentNode;
+    }
+    return document.body;
+  }}
+ >
+   <App />
+ </ConfigProvider>
+```
+
+#### 为什么 message.info、notification.open 或 Modal.confirm 等方法内的 ReactNode 无法继承 ConfigProvider 的属性？比如 `prefixCls` 和 `theme`。
+
+静态方法是使用 ReactDOM.render 重新渲染一个 React 根节点上，和主应用的 React 节点是脱离的。我们建议使用 useMessage、useNotification 和 useModal 来使用相关方法。原先的静态方法在 5.0 中已被废弃。
+
+#### Vite 生产模式打包后国际化 locale 设置不生效？
+
+相关 issue：[#39045](https://github.com/ant-design/ant-design/issues/39045)
+
+由于 Vite 生产模式下打包与开发模式不同，cjs 格式的文件会多一层，需要 `zhCN.default` 来获取。推荐 Vite 用户直接从 `antd/es/locale` 目录下引入 esm 格式的 locale 文件。
--- a/packages/meta/src/form/FormItem/index.tsx
+++ b/packages/meta/src/form/FormItem/index.tsx
@ -302,7 +302,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
      validateTrigger={mergedValidateTrigger}
      onMetaChange={onMetaChange}
    >
-      {/* @ts-ignore */}
+    {/* @ts-ignore */}
      {(control, renderMeta, context: FormInstance<Values>) => {
        const mergedName = toArray(name).length && renderMeta ? renderMeta.name : [];
        const fieldId = getFieldId(mergedName, formName);
--- a/packages/meta/src/form/changelog.md
+++ b/packages/meta/src/form/changelog.md
@ -0,0 +1,5 @@
+# Form Dom 变化
+
+- 状态 className 现在移动到顶层，不再是 input only
+- 去除 `ant-form-item-control-wrapper` 一层 div
+- `.has-success` 等状态样式添加 `ant-form-item` 前缀
--- a/packages/meta/src/form/demo/advanced-search.tsx
+++ b/packages/meta/src/form/demo/advanced-search.tsx
@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';
+import { Button, Col, Form, Input, Row, Select, Space, theme } from '@zhst/meta';

 const { Option } = Select;

--- a/packages/meta/src/form/demo/custom-feedback-icons.tsx
+++ b/packages/meta/src/form/demo/custom-feedback-icons.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { AlertFilled, CloseSquareFilled } from '@ant-design/icons';
 import { Button, Form, Input, Tooltip } from 'antd';
 import { createStyles, css } from 'antd-style';
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from '@zhst/func';

 const useStyle = createStyles(() => ({
  'custom-feedback-icons': css`
--- a/packages/meta/src/form/demo/register.tsx
+++ b/packages/meta/src/form/demo/register.tsx
@ -1,9 +1,7 @@
 import React, { useState } from 'react';
-import type { CascaderProps } from 'antd';
+import type { CascaderProps } from '@zhst/meta';
 import {
-  AutoComplete,
  Button,
-  Cascader,
  Checkbox,
  Col,
  Form,
@ -11,7 +9,7 @@ import {
  InputNumber,
  Row,
  Select,
-} from 'antd';
+} from '@zhst/meta';

 const { Option } = Select;

@ -193,16 +191,6 @@ const App: React.FC = () => {
        <Input />
      </Form.Item>

-      <Form.Item
-        name="residence"
-        label="Habitual Residence"
-        rules={[
-          { type: 'array', required: true, message: 'Please select your habitual residence!' },
-        ]}
-      >
-        <Cascader options={residences} />
-      </Form.Item>
-
      <Form.Item
        name="phone"
        label="Phone Number"
@ -218,17 +206,6 @@ const App: React.FC = () => {
      >
        <InputNumber addonAfter={suffixSelector} style={{ width: '100%' }} />
      </Form.Item>
-
-      <Form.Item
-        name="website"
-        label="Website"
-        rules={[{ required: true, message: 'Please input website!' }]}
-      >
-        <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="website">
-          <Input />
-        </AutoComplete>
-      </Form.Item>
-
      <Form.Item
        name="intro"
        label="Intro"
--- a/packages/meta/src/form/demo/time-related-controls.tsx
+++ b/packages/meta/src/form/demo/time-related-controls.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, DatePicker, Form, TimePicker } from 'antd';
+import { Button, DatePicker, Form, TimePicker } from '@zhst/meta';

 const { RangePicker } = DatePicker;

--- a/Show More
+++ b/Show More