fix(zhst/biz): 修复穿梭框溢出

packages/biz/src/treeTransfer/TreeTransfer.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Card, Flex, Input, InputProps, Tree } from 'antd';
+import { Button, Card, ConfigProvider, Flex, Input, InputProps, TransferProps, TreeDataNode, TreeProps, 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';
@@ -59,17 +58,27 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
           bodyStyle={{ padding: 12 }}
         >
           <Input prefix={<SearchOutlined />} onChange={e => setKeyWords(e.target.value)} placeholder='请输入设备名称' {...searchInputProps} />
-          <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}
-          />
+          <ConfigProvider
+            theme={{
+              components: {
+                Tree: {
+                  colorBgContainer: '#FCFCFC'
+                }
+              }
+            }}
+          >
+            <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}
+            />
+          </ConfigProvider>
         </Card>
       </div>
       <DoubleRightOutlined/>
@@ -82,6 +91,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
         >
           <div
             className={`${componentName}-right_card__items`}
+            style={{ maxHeight: '422px' }}
           >
             {targetItems.map(item => (
               <div

packages/biz/src/treeTransfer/demo/mock.ts

@@ -24,6 +24,24 @@ export const boxDataSource: TreeDataNode[] = [
           { 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-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-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 },
+        ],
       },
     ],
   },

packages/biz/src/treeTransfer/index.less

@@ -2,7 +2,7 @@
   &-left {
     &_card {
       width: 500px;
-      height: 522px;
+      min-height: 522px;
       background-color: #FCFCFC;
     }
   }
@@ -10,7 +10,7 @@
   &-right {
     &_card {
       width: 300px;
-      height: 522px;
+      min-height: 544px;
       background-color: #FCFCFC;
 
       &__items {
@@ -27,6 +27,7 @@
           margin: 0;
           padding: 4px 12px;
           cursor: pointer;
+          transition: 0.3s ease-out all;
         }
       }