feat(zhst/biz): 新增树面板2.0

packages/biz/src/index.tsx

@@ -4,6 +4,8 @@ export { default as BoxSelectTree } from './boxSelectTree'
 export type { BoxSelectTreeProps } from './boxSelectTree'
 export { default as Tree } from './tree'
 export type { BoxTreeProps, TreeData } from './tree'
+export { default as TreePanel } from './treePanel'
+export type { TreePanelProps } from './treePanel'
 export { default as TreeTransfer } from './treeTransfer'
 export type { TreeTransferProps } from './treeTransfer'
 export { default as TreeTransferModal } from './treeTransferModal'
@@ -21,8 +23,6 @@ export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewL
 export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal'
 export type { VideoPlayerCardProps } from './VideoPlayerCard'
 export { default as VideoPlayerCard } from './VideoPlayerCard'
-export type { TreePanelProps, TreePanelRefProps } from './treePanel'
-export { default as TreePanel } from './treePanel'
 export { default as RealTimeMonitor } from './RealTimeMonitor'
 export { default as InfiniteList } from './infiniteList'
 export type { InfiniteListProps, InfiniteListRefProps } from './infiniteList'

packages/biz/src/tree/index.tsx

@@ -1,8 +1,8 @@
-import { TreeDataNode } from '@zhst/meta';
+import { DataNode } from '@zhst/meta';
 import BoxTree from './boxTree';
 
-export interface TreeData extends TreeDataNode {
+export interface TreeData extends DataNode {
-  children?: TreeDataNode['children'] & {
+  children?: DataNode['children'] & {
     isCamera?: boolean
     /**
      * 0-失败  1-成功  2-进行中  3-未知

packages/biz/src/treePanel/TreePanel.tsx

@@ -37,7 +37,7 @@ interface ITag {
   children?: ITag[]
 }
 
-export interface BoxPanelProps {
+export interface TreePanelProps {
   treeType?: 'directory' | 'normal'
   searchInputProps?: InputProps
   showOptions?: boolean
@@ -69,7 +69,7 @@ export interface BoxPanelProps {
 const { ConfigContext } = ConfigProvider
 const { DirectoryTree } = BoxTree
 
-const BoxPanel: FC<BoxPanelProps> = (props) => {
+const TreePanel: FC<TreePanelProps> = (props) => {
   const {
     treeType = 'directory',
     searchInputProps,
@@ -108,7 +108,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
    * @param _list
    * @returns
    */
-  const initFilter = (_list?: BoxPanelProps['filterList']) => {
+  const initFilter = (_list?: TreePanelProps['filterList']) => {
     const WithDropdown = (dom: ReactNode, isShow?: boolean,  _config?: DropDownProps) => {
       if (!isShow) {
         return dom
@@ -127,7 +127,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
         open={item.showTooltip}
       >
         {WithDropdown(
-          <Button className={classNames(componentName + '-search-btns-btn')} type="text" onClick={item.onClick} icon={item.icon} />,
+          <Button className={classNames(componentName + '-search-btns-btn')} onClick={item.onClick} icon={item.icon} />,
           item.type === 'dropdown',
           item.dropdownConfig
         )}
@@ -140,7 +140,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
    * @param _list
    * @returns
    */
-  const initOptions = (_list?: BoxPanelProps['optionList']) => {
+  const initOptions = (_list?: TreePanelProps['optionList']) => {
     return _list?.map((item, idx) => (
       <>
         {/* @ts-ignore */}
@@ -159,7 +159,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
    * @param sort 是否分类
    * @returns
    */
-  const initTagPanel = (_tagList: BoxPanelProps['tagList'], sort?: boolean) => {
+  const initTagPanel = (_tagList: TreePanelProps['tagList'], sort?: boolean) => {
     // 正常标签渲染
     const commonTag = (_tagProps: ITag) => (
       <span
@@ -237,7 +237,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
               <span
                 className={classNames(componentName + '-tags-tag_option-btn')}
                 onClick={onTagExpand}
-              >{tagExpandAll ? '收起' : '更多'}<IconFont icon={tagExpandAll ? 'icon-shangjiantou' : 'icon-xiajiantou'} /></span>
+              >{tagExpandAll ? '收起' : '展开'}<IconFont icon={tagExpandAll ? 'icon-shangjiantou' : 'icon-xiajiantou'} /></span>
             </div>
           </div>
           {initTagPanel(tagList, tagExpandAll)}
@@ -264,4 +264,4 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
   )
 }
 
-export default BoxPanel
+export default TreePanel

packages/biz/src/treePanel/demo/basic.tsx

@@ -1,31 +1,15 @@
-import React, { useState, useRef } from 'react';
+import React, {} from 'react';
 import { TreePanel } from '@zhst/biz';
 import { Badge, Checkbox } from '@zhst/meta'
-import { treeData, boxDataSource } from './mock'
+import { boxDataSource } from './mock'
 import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
 
 const demo = () => {
-  const [checkedTags, setCheckedTags] = useState<string[]>([]);
-  const [tagExpandAll, setTagExpandAll] = useState(false);
-  const [showTagPanel, setShowTagPanel] = useState(true);
-
-
   return (
     <div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
       <TreePanel
         data={boxDataSource}
-        showTagPanel={showTagPanel}
-        tagExpandAll={tagExpandAll}
         showSelectBar
-        onTagCheck={(value) => setCheckedTags(pre => {
-          if (pre.includes(value)) {
-            return pre.filter(item => item !== value)
-          } else {
-            return [...pre, value]
-          }
-        })}
-        onResetTags={() => setCheckedTags([])}
-        checkedTags={checkedTags}
         filterList={[
           {
             label: '过滤',
@@ -65,9 +49,15 @@ const demo = () => {
               }
             }
           },
+          {
+            label: '过滤',
+            key: 'ee',
+            icon: <FilterOutlined />,
+            showTooltip: false,
+          },
         ]}
         extra={(
-          <div>
+          <div style={{ border: '1px solid red' }}>
             <span><Checkbox>全选</Checkbox></span>
             <a style={{ float: 'right', color: '#09f' }} >批量操作</a>
           </div>
@@ -92,41 +82,6 @@ const demo = () => {
             }
           },
         ]}
-        tagList={[
-          {
-            label: '标签组1',
-            value: '1',
-            children: [
-              {
-                label: '标签1-1',
-                value: '1-1',
-              },
-              {
-                label: '标签1-2',
-                value: '1-2',
-              }
-            ]
-          },
-          {
-            label: '标签组2',
-            value: '2',
-            children: [
-              {
-                label: '标签2-1',
-                value: '2-1',
-              },
-              {
-                label: '标签2-2',
-                value: '2-2',
-              }
-            ]
-          },
-        ]
-      }
-        onTagExpand={() => {
-          setTagExpandAll(pre => !pre)
-          setCheckedTags([])
-        }}
       />
     </div>
   );

packages/biz/src/treePanel/demo/normal.tsx

@@ -0,0 +1,24 @@
+import React, { useState, useRef } from 'react';
+import { TreePanel } from '@zhst/biz';
+import { boxDataSource } from './mock'
+
+const demo = () => {
+
+  return (
+    <div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
+      <TreePanel
+        data={boxDataSource}
+        treeType='normal'
+        showSelectBar
+        filterSelectProps={{
+          placeholder: '请输入',
+          options: [
+            { label: '测试', key: '123', value: 'test' }
+          ]
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/treePanel/demo/withTags.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useRef } from 'react';
+import { TreePanel } from '@zhst/biz';
+import { Badge, Checkbox } from '@zhst/meta'
+import { treeData, boxDataSource } from './mock'
+import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
+
+const demo = () => {
+  const [checkedTags, setCheckedTags] = useState<string[]>([]);
+  const [tagExpandAll, setTagExpandAll] = useState(false);
+  const [showTagPanel, setShowTagPanel] = useState(true);
+
+
+  return (
+    <div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
+      <TreePanel
+        data={boxDataSource}
+        showTagPanel={showTagPanel}
+        tagExpandAll={tagExpandAll}
+        showSelectBar
+        onTagCheck={(value) => setCheckedTags(pre => {
+          if (pre.includes(value)) {
+            return pre.filter(item => item !== value)
+          } else {
+            return [...pre, value]
+          }
+        })}
+        onResetTags={() => setCheckedTags([])}
+        checkedTags={checkedTags}
+        filterList={[
+          {
+            label: '过滤',
+            key: 'multi',
+            icon: <FilterOutlined />,
+            type: 'dropdown',
+            showTooltip: false,
+            dropdownConfig: {
+              menu: {
+                // 自定义返回项
+                _internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
+                  return (
+                    <div>
+                      {originNode}
+                    </div>
+                  )
+                },
+                selectable: true,
+                items: [
+                  {
+                    label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
+                    key: 'all',
+                    onClick: () => console.log('多选1')
+                  },
+                  {
+                    icon: <Badge status="success" />,
+                    label: '多选1',
+                    key: 'multi1',
+                    onClick: () => console.log('多选1')
+                  },
+                  {
+                    label: '多选2',
+                    icon: <Badge status='error' />,
+                    key: 'multi2',
+                  },
+                ],
+              }
+            }
+          },
+        ]}
+        extra={(
+          <div>
+            <span><Checkbox>全选</Checkbox></span>
+            <a style={{ float: 'right', color: '#09f' }} >批量操作</a>
+          </div>
+        )}
+        optionList={[
+          {
+            label: '导入盒子',
+            key: 'import',
+            icon: <ImportOutlined />,
+          },
+          {
+            label: '新建组',
+            key: 'add',
+            icon: <FolderAddOutlined />,
+          },
+          {
+            label: '删除',
+            key: 'del',
+            icon: <CloseCircleOutlined />,
+            props: {
+              danger: true
+            }
+          },
+        ]}
+        tagList={[
+          {
+            label: '标签组1',
+            value: '1',
+            children: [
+              {
+                label: '标签1-1',
+                value: '1-1',
+              },
+              {
+                label: '标签1-2',
+                value: '1-2',
+              }
+            ]
+          },
+          {
+            label: '标签组2',
+            value: '2',
+            children: [
+              {
+                label: '标签2-1',
+                value: '2-1',
+              },
+              {
+                label: '标签2-2',
+                value: '2-2',
+              }
+            ]
+          },
+        ]
+      }
+        onTagExpand={() => {
+          setTagExpandAll(pre => !pre)
+          setCheckedTags([])
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;

packages/biz/src/treePanel/index.less

@@ -6,11 +6,13 @@
 
     &-input {
       flex: 1;
-      margin-right: 4px;
     }
 
     &-btns {
       flex: none;
+      &-btn {
+        margin-left: 8px;
+      }
     }
   }
 

packages/biz/src/treePanel/index.md

@@ -8,10 +8,11 @@ group:
   title: 数据展示
 ---
 
-
 ## 代码演示
 
 <code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/normal.tsx">普通树</code>
+<code src="./demo/withTags.tsx">标签面板</code>
 
 ## API
 

packages/biz/src/treePanel/index.tsx

@@ -2,6 +2,6 @@
  * Created by jiangzhixiong on 2024/06/04
  */
 import TreePanel from './TreePanel'
-export type { TreePanelProps, TreePanelRefProps } from './TreePanel'
+export type { TreePanelProps } from './TreePanel'
 
 export default TreePanel

packages/biz/src/treeTransferModal/TreeTransferModal.tsx

@@ -1,17 +1,16 @@
 import React, { FC, useState } from 'react';
-import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from '@zhst/meta';
+import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, DataNode, TreeProps } from '@zhst/meta';
 import TreeTransfer from '../treeTransfer';
 import { TreeTransferProps } from '../treeTransfer'
 
 export interface TreeTransferModalProps {
-  dataSource: TreeDataNode[]
+  dataSource: DataNode[]
   treeProps?: TreeProps
-  targetItems: TreeDataNode[];
+  targetItems: DataNode[];
   checkedKeys: string[];
   onTreeSelect?: TreeProps['onSelect']
   onTreeCheck?: TreeProps['onCheck']
   onItemDelete?: TreeTransferProps['onItemDelete']
-  onChange?: TransferProps['onChange'];
   onOk?: (data: any) => void;
   onReset?: () => void;
   open?: boolean