feat(biz): 修改穿梭框的样式和注释

packages/biz/src/treeTransfer/TreeTransfer.tsx

@@ -1,11 +1,12 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useContext } from 'react';
 import { Button, Input, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
 import { IconFont } from '@zhst/icon'
 import './index.less'
 
-const componentName = 'zhst-biz-treeTransfer'
+const { ConfigContext } = ConfigProvider
 
 export interface TreeTransferProps {
+  customizePrefixCls?: string
   /**
    * @description 自定义标题
    * @array []
@@ -100,53 +101,55 @@ export interface TreeTransferProps {
 
 const { useToken } = theme
 
-const TreeTransfer: React.FC<TreeTransferProps> = ({
+const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
-  dataSource,
+  const { getPrefixCls } = useContext(ConfigContext);
-  treeProps,
+  const componentName = getPrefixCls('biz-treeTransfer', props.customizePrefixCls);
-  titles = ['可选择的范围', '已选择的范围'],
+  const {
-  bordered,
+    dataSource,
-  searchInputProps,
+    treeProps,
-  showLeftSearch = true,
+    titles = ['可选择的范围', '已选择的范围'],
-  leftPanelScrollY = 300,
+    bordered,
-  leftPanelWidth = 500,
+    searchInputProps,
-  rightPanelScrollY = 422,
+    showLeftSearch = true,
-  rightPanelWidth = 300,
+    leftPanelScrollY = 300,
-  targetItems = [],
+    leftPanelWidth = 500,
-  checkedKeys = [],
+    rightPanelScrollY = 422,
-  showFilter = false,
+    rightPanelWidth = 300,
-  showLeftPanelFooter,
+    targetItems = [],
-  showRightPanelFooter = true,
+    checkedKeys = [],
-  customLeftPanelContent,
+    showFilter = false,
-  leftPanelFooterRender,
+    showLeftPanelFooter,
-  rightPanelFooterRender,
+    showRightPanelFooter = true,
-  showLeftTabs,
+    customLeftPanelContent,
-  leftTabsProps,
+    leftPanelFooterRender,
-  middleIcon,
+    rightPanelFooterRender,
-  activeTabKey,
+    showLeftTabs,
-  tabsItems = [
+    leftTabsProps,
-    {
+    middleIcon,
-      key: 'camera',
+    activeTabKey,
-      label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >摄像头</div>,
+    tabsItems = [
-    },
+      {
-    {
+        key: 'camera',
-      key: 'plan',
+        label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >摄像头</div>,
-      label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >预案</div>,
+      },
-    },
+      {
-    {
+        key: 'plan',
-      key: 'map',
+        label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >预案</div>,
-      label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >地图框选</div>,
+      },
-    },
+      {
-  ],
+        key: 'map',
-  filters = [],
+        label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >地图框选</div>,
-  onLeftTabsChange,
+      },
-  onTreeCheck,
+    ],
-  onTreeSelect,
+    filters = [],
-  onItemDelete,
+    onLeftTabsChange,
-  onSearch,
+    onTreeCheck,
-  onOk,
+    onTreeSelect,
-  onReset
+    onItemDelete,
-}) => {
+    onSearch,
-
+    onOk,
+    onReset
+  } = props
   const { token } = useToken()
 
   return (