fix: biz组件优化 boxSelectTree 组件，添加可以自定义配置按钮功能

2024-03-06 17:15:34 +08:00 · 2024-03-06 17:15:34 +08:00 · 690fcd9e20
commit 690fcd9e20
parent cab10522c8
38 changed files with 513 additions and 535 deletions
--- a/packages/biz/CHANGELOG.md
+++ b/packages/biz/CHANGELOG.md
@ -1,5 +1,31 @@
 # @zhst/biz

+## 0.9.0
+
+### Minor Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.8.1
+  - @zhst/func@0.7.2
+  - @zhst/meta@0.8.2
+
+## 0.8.0
+
+### Minor Changes
+
+- @zhst/biz 优化数组件
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.8.0
+  - @zhst/func@0.7.1
+  - @zhst/meta@0.8.1
+
 ## 0.7.0

 ### Minor Changes
--- a/packages/biz/es/hooks/useIntelligentTracking/index.d.ts
+++ b/packages/biz/es/hooks/useIntelligentTracking/index.d.ts
@ -15,19 +15,13 @@ export declare const getTaskCameraByCenterAndPower: (value: {
        bodyPower: number;
    };
    cameraInfos: Array<Object>;
-    center: [
-        number,
-        number
-    ];
+    center: [number, number];
 }) => Promise<Object[]>;
 /**创建追踪任务 */
 export declare const createIntelligentTrack: (value: {
    images: Array<Object>;
    deviceIds: Array<string>;
-    circleCenter: [
-        number,
-        number
-    ];
+    circleCenter: [number, number];
    model: number;
    circleRadius: number;
    facePower?: number;
@ -39,10 +33,7 @@ export declare const emitHeartbeat: (smartTrackId: number) => Promise<void>;
 export declare const ModifyTrackCameras: (value: {
    smartTrackId: number;
    deviceIds: Array<number>;
-    centerPoint: [
-        number,
-        number
-    ];
+    centerPoint: [number, number];
 }) => Promise<void>;
 export declare const setIntelligentTrackCircleInfo: (smartTrackId: number, circleCenter: [number, number]) => Promise<void>;
 export declare const getTackCameraInfo: (value: {
--- a/packages/biz/es/index.d.ts
+++ b/packages/biz/es/index.d.ts
@ -1,6 +1,7 @@
 export { default as BigImageModal } from './BigImageModal';
 export { default as BoxSelectTree } from './boxSelectTree';
 export { default as Tree } from './tree';
+export type { TreeData } from './tree';
 export { default as TreeTransfer } from './treeTransfer';
 export { default as TreeTransferModal } from './treeTransferModal';
 export { default as WarningRecordCard } from './WarningRecordCard';
--- a/packages/biz/es/utils/constants.d.ts
+++ b/packages/biz/es/utils/constants.d.ts
@ -21,3 +21,11 @@ export declare const DeviceTab: {
    REAL_CAMERA_ONLYFACE: number;
    REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: number;
 };
+export declare const BOX_TYPE_LIST: {
+    value: string;
+    label: string;
+}[];
+export declare const ALL_LIST: {
+    value: string;
+    label: string;
+}[];
--- a/packages/biz/es/utils/constants.js
+++ b/packages/biz/es/utils/constants.js
@ -27,4 +27,17 @@ export var DeviceTab = {
  REAL_CAMERA_NOFACE: 6,
  REAL_CAMERA_ONLYFACE: 7,
  REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8 // 只有普通摄像头，没有人脸、没有盒子、直连
-};
+};
+
+// 盒子 Tab 切换
+export var BOX_TYPE_LIST = [{
+  value: '1',
+  label: '盒子'
+}, {
+  value: '2',
+  label: '盒子组'
+}];
+export var ALL_LIST = [{
+  value: '',
+  label: '全部'
+}];
--- a/packages/biz/lib/index.d.ts
+++ b/packages/biz/lib/index.d.ts
@ -1,6 +1,7 @@
 export { default as BigImageModal } from './BigImageModal';
 export { default as BoxSelectTree } from './boxSelectTree';
 export { default as Tree } from './tree';
+export type { TreeData } from './tree';
 export { default as TreeTransfer } from './treeTransfer';
 export { default as TreeTransferModal } from './treeTransferModal';
 export { default as WarningRecordCard } from './WarningRecordCard';
--- a/packages/biz/lib/utils/constants.d.ts
+++ b/packages/biz/lib/utils/constants.d.ts
@ -21,3 +21,11 @@ export declare const DeviceTab: {
    REAL_CAMERA_ONLYFACE: number;
    REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: number;
 };
+export declare const BOX_TYPE_LIST: {
+    value: string;
+    label: string;
+}[];
+export declare const ALL_LIST: {
+    value: string;
+    label: string;
+}[];
--- a/packages/biz/lib/utils/constants.js
+++ b/packages/biz/lib/utils/constants.js
@ -19,7 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils/constants.ts
 var constants_exports = {};
 __export(constants_exports, {
+  ALL_LIST: () => ALL_LIST,
  BODY_SEARCH_THRESHOID: () => BODY_SEARCH_THRESHOID,
+  BOX_TYPE_LIST: () => BOX_TYPE_LIST,
  DeviceTab: () => DeviceTab,
  ENTER_CIRCLE: () => ENTER_CIRCLE,
  GLOBAL_IS_BOX_VMS_SHOW: () => GLOBAL_IS_BOX_VMS_SHOW,
@ -62,9 +64,18 @@ var DeviceTab = {
  REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8
  // 只有普通摄像头，没有人脸、没有盒子、直连
 };
+var BOX_TYPE_LIST = [
+  { value: "1", label: "盒子" },
+  { value: "2", label: "盒子组" }
+];
+var ALL_LIST = [
+  { value: "", label: "全部" }
+];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ALL_LIST,
  BODY_SEARCH_THRESHOID,
+  BOX_TYPE_LIST,
  DeviceTab,
  ENTER_CIRCLE,
  GLOBAL_IS_BOX_VMS_SHOW,
--- a/packages/biz/package.json
+++ b/packages/biz/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/biz",
-  "version": "0.7.0",
+  "version": "0.9.0",
  "description": "业务库",
  "keywords": [
    "business",
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
@ -19,23 +19,24 @@ export interface IRecord {
   用于显示  盒子 点位 柜子 等信息
  */
  warningInfo?: string[]
-  /* 
-    右侧 柜子id 显示  
+  /*
+    右侧 柜子id 显示
  */
  cabietInfo?: string;
-  /* 
-    直接传格式化好的时间 
+  /*
+    直接传格式化好的时间
  */
  warningTime?: string ;
-  /* 
+  /*
    传格时间戳
  */
  warningTimestamp?: string | number
-  /* 
-    传格时间格式 
+  /*
+    传格时间格式
    @default YYYY-MM-DD HH:mm:ss
  */
  warningTimeFormat?: string;
+
 };

 export interface WarningRecordCardProps {
--- a/packages/biz/src/boxSelectTree/boxSelectTree.tsx
+++ b/packages/biz/src/boxSelectTree/boxSelectTree.tsx
@ -16,6 +16,8 @@ export interface BoxSelectTreeProps {
  tabsProps?: TabsProps
  searchInputProps?: InputProps
  treeProps?: TreeProps
+  showOptions?: boolean
+  customImport?: any
 }

 const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
@ -31,7 +33,9 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
    onCreateSubmit,
    tabsProps,
    searchInputProps,
-    treeProps
+    treeProps,
+    customImport,
+    showOptions = true
  } = props

  const onChange = (key: string) => {
@ -54,6 +58,8 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
          onSearch={onSearch}
          onItemCheck={onItemCheck}
          onItemSelect={onItemSelect}
+          showOptions={showOptions}
+          customImport={customImport}
        />
      )
    },
@ -72,6 +78,8 @@ const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
          onSearch={onSearch}
          onItemCheck={onItemCheck}
          onItemSelect={onItemSelect}
+          showOptions={showOptions}
+          customImport={customImport}
        />
      )
    },
--- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
+++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
@ -1,13 +1,14 @@
 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 { ClockCircleOutlined, CloseCircleOutlined, DiffOutlined, FolderAddOutlined, ImportOutlined, SwitcherOutlined  } from '@ant-design/icons'
 import type { TreeProps, InputProps } from 'antd';
 import TreeTransferModal from '../../../treeTransferModal'
 import BoxTree from '../../../tree';

 export interface BoxGroupPanelProps {
  searchInputProps?: InputProps
+  showOptions?: boolean
  treeProps?: TreeProps
  data: TreeDataNode[]
  boxDataSource: TreeDataNode[]
@ -18,11 +19,16 @@ export interface BoxGroupPanelProps {
  onBoxBatchDelete?: (data?: any) => void
  onBoxDelete?: (data?: any) => void
  onCreateSubmit?: ModalFormProps['onFinish']
+  onClockClick?: () => void
+  customImport?: any
+  extraBtns?: any
 }

 const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
  const {
    searchInputProps,
+    showOptions = true,
+    extraBtns,
    data = [],
    onSearch,
    treeProps,
@ -31,7 +37,9 @@ const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
    onCreateSubmit,
    onBoxBatchDelete,
    onBoxDelete,
-    boxDataSource
+    onClockClick,
+    boxDataSource,
+    customImport
  } = props
  const [isTreeCheckable, setIsTreeCheckable] = useState(false)
  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
@ -40,8 +48,7 @@ const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
  const createFormRef = useRef<
    ProFormInstance<{
      name: string;
-      company?: string;
-      useMode?: string;
+      boxList?: any[];
    }>
  >()

@ -75,89 +82,109 @@ const BoxGroupPanel: FC<BoxGroupPanelProps> = (props) => {
    setTargetItems(pre => pre.filter(o => o.key !== key))
  }

-  const onOk = (data: any) => {
-    console.log('data', data)
+  // 盒子点击确定
+  const onBoxChoiceOk = async (data: any) => {
+    createFormRef.current?.setFieldValue('boxList', data)
+    createFormRef.current?.setFieldValue('boxName', 123)
+    console.log(createFormRef.current?.getFieldValue('boxList'))
+    setBoxChoiceOpen(false)
  }

-  const onReset = () => {
+  // 盒子选择重置
+  const onBoxChoiceReset = () => {
    setCheckedKeys([])
    setTargetItems([])
  }

  return (
    <div style={{ padding: '0 16px' }}>
+      {/* 盒子选择弹框 */}
      <TreeTransferModal
        open={boxChoiceOpen}
        onCancel={() => setBoxChoiceOpen(false)}
-        onRadioChange={(val) => console.log('radio', val)}    // 顶部 radio 事件
+        onRadioChange={(e) => console.log('radio', e.target.value)}    // 顶部 radio 事件
        dataSource={boxDataSource}                   // 数据源
        targetItems={targetItems}               // 右侧选中项
        checkedKeys={checkedKeys}               // 左侧选中
-        onReset={onReset}                       // 重置按钮事件
-        onOk={onOk}                             // 确定按钮事件
+        onReset={onBoxChoiceReset}                       // 重置按钮事件
+        onOk={onBoxChoiceOk}                             // 确定按钮事件
        onTreeCheck={onTreeCheck}               // 树check选中事件
        onItemDelete={onItemDelete}             // 右侧点击删除事件
      />
-      <Space size={12} direction='vertical'>
-        <Space>
+      <Space size={12} direction='vertical' style={{ width: '100%' }}>
+        <Space size={4}  style={{ width: '100%', justifyContent: 'space-between' }} >
          <Input size='middle' onChange={(e) => onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} />
-          <Button style={{ width: '80px' }} type='primary' >导入盒子</Button>
+          {customImport || (
+            <>
+              <Button type="text" onClick={() => handleCheckable()} icon={!isTreeCheckable ? <DiffOutlined /> : <SwitcherOutlined />} />
+              <Button type="text" onClick={() => onClockClick?.()} icon={<ClockCircleOutlined />} />
+            </>
+          )}
        </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 }} />
+        {/* 是否显示操作按钮 */}
+        {showOptions && (
+          <>
+            <Space align='center'>
+              <Button type='text' style={{ padding: '4px 8px' }} icon={<ImportOutlined />} >导入盒子</Button>
+              <Divider type="vertical" style={{ margin: '8px 0' }} />
+              <ModalForm<{
+                name: string
+                boxList?: any[]
+              }>
+                width={'600px'}
+                formRef={createFormRef}
+                title="新建组"
+                modalProps={{ destroyOnClose: true }}
+                layout='horizontal'
+                labelCol={{ span: 6 }}
+                wrapperCol={{ span: 18 }}
+                trigger={<Button type='text' style={{ padding: '4px 8px' }} icon={<FolderAddOutlined />} >新建组</Button>}
+                submitter={{
+                  searchConfig: {
+                    submitText: '确定',
+                    resetText: '取消',
+                  },
+                }}
+                onFinish={onCreateSubmit}
+              >
+                <ProFormText
+                  rules={[
+                    {
+                      required: true,
+                    },
+                  ]}
+                  width="md"
+                  name="name"
+                  label="盒子组名称"
+                  placeholder="请输入盒子名称"
+                />
+                <ProFormText
+                  width="md"
+                  name="boxList"
+                  label="盒子选择"
+                  fieldProps={{
+                    readOnly: true,
+                    value: `已选择${createFormRef.current?.getFieldValue('boxList')?.length || 0}个盒子`,
+                    suffix: (
+                      <Space>
+                        <a onClick={() => {
+                          createFormRef.current?.setFieldValue('boxList', null)
+                          onBoxChoiceReset()
+                        }} >恢复默认</a>
+                        <a onClick={() => setBoxChoiceOpen(true)}>范围选择</a>
+                      </Space>
+                    )
+                  }}
+                />
+              </ModalForm>
+              <Divider type="vertical" style={{ margin: '8px 0' }} />
+              {/* @ts-ignore */}
+              <Button danger type='text' style={{ padding: '4px 8px' }} icon={<CloseCircleOutlined />} disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
+            </Space>
+            <Divider style={{ margin: 0 }} />
+          </>
+        )}
+        {extraBtns}
        <BoxTree
          treeCheckable={isTreeCheckable}
          data={data}
--- a/packages/biz/src/boxSelectTree/demo/basic.tsx
+++ b/packages/biz/src/boxSelectTree/demo/basic.tsx
@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { BoxSelectTree } from '@zhst/biz';
 import { treeData, boxDataSource } from './mock'
 import { Select, TreeProps, Modal, Checkbox } from 'antd';
+import { BOX_TYPE_LIST } from '../../utils/constants';

 const { Option } = Select

 const demo = () => {
+  const [activeKey, setActiveKey] = useState('1')
  const [searchType, setSearchType] = useState('1')
  const [searchVal, setSearchVal] = useState('')
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
@ -32,18 +34,24 @@ const demo = () => {
  }

  return (
-    <div style={{ border: '1px solid #ccc', width: '320px' }}>
+    <div style={{ border: '1px solid #ccc', width: '320px', minHeight: '900px' }}>
      {contextHolder}
      <BoxSelectTree
-        data={treeData}
+        data={activeKey === '1' ? treeData : boxDataSource}
        boxDataSource={boxDataSource}
        onSearch={e => console.log('搜索', e)}
-        onCreateSubmit={async () => { return true }}
+        onCreateSubmit={async (_data) => {
+          console.log('新建盒子', _data)
+          return true
+        }}
        onItemCheck={onTreeCheck}
        onItemSelect={e => console.log('onItemSelect', e)}
-        onTabChange={e => console.log('tabChange', e)}
+        onTabChange={val => setActiveKey(val)}
        onBoxDelete={data => console.log('盒子删除', data)}
        onBoxBatchDelete={onBoxBatchDelete}
+        tabsProps={{
+          activeKey,
+        }}
        searchInputProps={{
          addonBefore: (
            <Select
@ -54,8 +62,9 @@ const demo = () => {
              }}
              style={{ width: '72px' }}
            >
-              <Option value="1">盒子</Option>
-              <Option value="2">盒子组</Option>
+              {BOX_TYPE_LIST.map(item => (
+                <Option value={item.value}>{item.label}</Option>
+              ))}
            </Select>
          ),
          onChange: e => setSearchVal(e.target.value),
--- a/packages/biz/src/boxSelectTree/demo/mock.tsx
+++ b/packages/biz/src/boxSelectTree/demo/mock.tsx
@ -1,6 +1,6 @@
-import { TreeDataNode } from "antd";
+import { TreeData } from "@zhst/biz";

-export const treeData: TreeDataNode[] = [
+export const boxDataSource: TreeData[] = [
  {
    title: '全部盒子',
    key: '0-0',
@ -12,10 +12,12 @@ export const treeData: TreeDataNode[] = [
          {
            title: '摄像头1',
            key: '0-0-0-0',
+            isCamera: true
          },
          {
            title: '摄像头2',
            key: '0-0-0-1',
+            isCamera: true
          },
        ],
      },
@ -25,7 +27,8 @@ export const treeData: TreeDataNode[] = [
        children: [
          {
            title: '摄像头4',
-            key: '0-0-1-0'
+            key: '0-0-1-0',
+            isCamera: true
          }
        ],
      },
@ -34,36 +37,18 @@ export const treeData: TreeDataNode[] = [
 ];


-export const boxDataSource: TreeDataNode[] = [
+export const treeData: TreeData[] = [
+  { 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-0',
-    title: '分组0-0',
-    isLeaf: false,
-    checkable: false,
-  },
-  {
-    key: '0-1',
-    title: '分组0-1',
+    key: '0-1-3',
+    title: '分组0-1-3',
    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-1-3-1', title: '分组0-1-3-1', isLeaf: true, isCamera: true },
+      { key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true, isCamera: true },
+      { key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true, isCamera: 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/demo/noOptions.tsx
+++ b/packages/biz/src/boxSelectTree/demo/noOptions.tsx
@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { BoxSelectTree } from '@zhst/biz';
+import { Button, Select, TreeProps } from 'antd';
+import { FilterOutlined } from '@ant-design/icons';
+import { BOX_TYPE_LIST } from '../../utils/constants';
+import { treeData, boxDataSource } from './mock'
+
+const { Option } = Select
+
+const demo = () => {
+  const [activeKey, setActiveKey] = useState('1')
+  const [searchType, setSearchType] = useState('1')
+  const [searchVal, setSearchVal] = useState('')
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
+    setCheckedKeys(keys)
+  }
+
+  return (
+    <div style={{ border: '1px solid #ccc', width: '340px', minHeight: '900px' }}>
+      <BoxSelectTree
+        data={activeKey === '1' ? treeData : boxDataSource}
+        boxDataSource={boxDataSource}
+        onSearch={e => console.log('搜索', e)}
+        onItemCheck={onTreeCheck}
+        onItemSelect={e => console.log('onItemSelect', e)}
+        onTabChange={val => setActiveKey(val)}
+        onBoxDelete={data => console.log('盒子删除', data)}
+        showOptions={false}
+        tabsProps={{
+          activeKey,
+        }}
+        customImport={<Button type="text" icon={<FilterOutlined />} />}
+        searchInputProps={{
+          addonBefore: (
+            <Select
+              value={searchType}
+              onChange={_type => {
+                setSearchType(_type)
+                setSearchVal('')
+              }}
+              style={{ width: '72px' }}
+            >
+              {BOX_TYPE_LIST.map(item => (
+                <Option value={item.value}>{item.label}</Option>
+              ))}
+            </Select>
+          ),
+          onChange: e => setSearchVal(e.target.value),
+          value: searchVal
+        }}
+        treeProps={{
+          checkedKeys
+        }}
+      />
+    </div>
+  );
+};
+
+export default demo;
--- a/packages/biz/src/boxSelectTree/index.md
+++ b/packages/biz/src/boxSelectTree/index.md
@ -13,7 +13,9 @@ group:
 ## 代码演示

 <code src="./demo/basic.tsx">基本用法</code>
+<code src="./demo/noOptions.tsx">不显示其它按钮</code>

+## API

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
@ -24,3 +26,8 @@ group:
 | tabsProps | Tabs组件的Props | antd的Tabs组件 | - | - |
 | searchInputProps | 搜索框的Props | antd的Input组件 | - | - |
 | onTabChange | tab切换监听 | function: (e) => void | - | - |
+| onBoxDelete | 盒子删除事件 | function: (e) => void | - | - |
+| onBoxBatchDelete | 盒子批量删除事件 | function: (e) => void | - | - |
+| onCreateSubmit | 新建提交事件 | function: (e) => void | - | - |
+| showOptions | 展示其它功能按钮 | boolean | true | - |
+
--- a/packages/biz/src/index.tsx
+++ b/packages/biz/src/index.tsx
@ -1,6 +1,7 @@
 export { default as BigImageModal } from './BigImageModal'
 export { default as BoxSelectTree } from './boxSelectTree'
 export { default as Tree } from './tree'
+export type { TreeData } from './tree'
 export { default as TreeTransfer } from './treeTransfer'
 export { default as TreeTransferModal } from './treeTransferModal'
 export { default as WarningRecordCard } from './WarningRecordCard'
--- a/packages/biz/src/tree/boxTree.tsx
+++ b/packages/biz/src/tree/boxTree.tsx
@ -1,16 +1,18 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Tree, Badge, TreeDataNode, Space, TreeProps } from 'antd';
+import theme from 'antd/es/theme'
 import { CloseOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons'
 import { ModalForm, ProFormText } from '@ant-design/pro-components';
 import './index.less'

 const componentName = 'zhst-biz-tree'
+const { useToken } = theme

 export interface BoxTreeProps extends TreeProps {
  data: TreeDataNode[]
  treeCheckable?: boolean
  showItemOption?: boolean
-  treeProps?: TreeProps
+  customOptions?: any;
  onItemCheck?: TreeProps['onCheck']
  onItemSelect?: TreeProps['onSelect']
  onItemSetting?: (_data: any) => void
@ -19,52 +21,86 @@ export interface BoxTreeProps extends TreeProps {
 }

 const boxTree: FC<BoxTreeProps> = (props) => {
-  const { onItemSelect, onItemCheck, onItemSetting, onItemDelete, data = [], showItemOption = true, treeCheckable = false, onRenameFinish } = props
+  const {
+    onItemSelect,
+    onItemCheck,
+    onItemSetting,
+    onItemDelete,
+    data = [],
+    showItemOption = true,
+    treeCheckable = false,
+    onRenameFinish,
+    customOptions
+  } = props
+  const { token } = useToken()
+  const [checkedItem, setCheckedItem] = useState<React.Key>('')
+
+  const cameraStatus = new Map([
+      ['0', 'success'],
+      ['1', 'error']
+    ])

  return (
    <Tree
      checkable={treeCheckable}
      blockNode
-      onSelect={onItemSelect}
+      onSelect={(selectedKeys, info) => {
+        setCheckedItem(selectedKeys[0])
+        onItemSelect?.(selectedKeys, info)
+      }}
      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>}
+            {/* @ts-ignore */}
+            {!_nodeData.children && _nodeData.isCamera && <Badge style={{ marginRight: '6px' }} status={cameraStatus.get('0')} />}
+            <span
+              // @ts-ignore
+              style={(checkedItem === _nodeData.key) && _nodeData.isCamera ? {
+                color: token.colorPrimary
+              } : {}}
+            >
+              {_nodeData.title as any}
+            </span>
+            {showItemOption && (
+              <Space className={`${componentName}-item-render_right`} style={{ float:'right' }} >
+                {customOptions || (
+                  <>
+                    <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>
        )
      }}
--- a/packages/biz/src/tree/demo/customOptions.tsx
+++ b/packages/biz/src/tree/demo/customOptions.tsx
@ -0,0 +1,23 @@
+import React from 'react';
+import { Tree } from '@zhst/biz';
+import { LoadingOutlined, PlayCircleOutlined, SettingOutlined } from '@ant-design/icons';
+import { treeData } from './mock'
+
+const demo = () => {
+  return (
+    <div style={{ width: '320px' }}>
+      <Tree
+        data={treeData}
+        customOptions={(
+          <>
+            <PlayCircleOutlined />
+            <SettingOutlined />
+            <LoadingOutlined />
+          </>
+        )}
+      />
+    </div>
+  );
+};
+
+export default demo;
--- a/packages/biz/src/tree/demo/customTitleRender.tsx
+++ b/packages/biz/src/tree/demo/customTitleRender.tsx
@ -14,8 +14,11 @@ const demo = () => {
            <div>
              {title}
              <div style={{ float: 'right' }} >
-                <Tooltip placement="right" title={'存在0个'}>
-                  <a >包含0个</a>
+                <Tooltip
+                  placement="right"
+                  title={'存在0个'}
+                >
+                  <a>在0个组中包含</a>
                </Tooltip>
              </div>
            </div>
--- a/packages/biz/src/tree/index.md
+++ b/packages/biz/src/tree/index.md
@ -14,8 +14,15 @@ group:
 <code src="./demo/basic.tsx">基本用法</code>
 <code src="./demo/customTitleRender.tsx">自定义渲染界面</code>
 <code src="./demo/noOption.tsx">不展示配置项</code>
+<code src="./demo/customOptions.tsx">自定义配置项</code>

+## API
+
+**额外参数可以参考 antd - Tree 组件**

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | data | 数据源 | Array[] | [] | - |
+| titleRender | 子项自定义 | ReactNode、 undefined | - | - |
+| showItemOption | 是否显示额外配置功能 | boolean | true | - |
+| customOptions | 自定义配置项 | any | - | - |
--- a/packages/biz/src/tree/index.tsx
+++ b/packages/biz/src/tree/index.tsx
@ -1,3 +1,10 @@
+import { TreeDataNode } from 'antd';
 import BoxTree from './boxTree';

+export interface TreeData extends TreeDataNode {
+  children?: TreeDataNode['children'] & {
+    isCamera?: boolean
+  }[]
+}
+
 export default BoxTree;
--- a/packages/biz/src/treeTransfer/index.md
+++ b/packages/biz/src/treeTransfer/index.md
@ -13,6 +13,8 @@ group:
 <code src="./demo/basic.tsx">基本用法</code>
 <code src="./demo/withModal.tsx">和Modal组合使用</code>

+## API
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | data | 数据源 | Array[] | [] | - |
--- a/packages/biz/src/treeTransferModal/TreeTransferModal.tsx
+++ b/packages/biz/src/treeTransferModal/TreeTransferModal.tsx
@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
+import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd';
 import TreeTransfer from '../treeTransfer';
-import { Modal, ModalProps, Radio, RadioGroupProps, TransferProps, TreeDataNode } from 'antd';
-import { TreeProps } from 'antd/lib';
+import { ALL_LIST, BOX_TYPE_LIST } from '../utils/constants';

 export interface TreeTransferModalProps {
  dataSource: TreeDataNode[]
@ -17,7 +17,10 @@ export interface TreeTransferModalProps {
  open?: boolean
  onCancel?: ModalProps['onCancel']
  onRadioChange?: RadioGroupProps['onChange']
+  onSelect?: SelectProps['onSelect']
  modalProps?: ModalProps
+  radioProps?: RadioGroupProps
+  selectProps?: SelectProps
 }

 const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
@ -31,11 +34,14 @@ const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
    onReset,
    onRadioChange,
    onTreeCheck,
+    onSelect,
    targetItems,
    modalProps,
+    radioProps,
+    selectProps,
  } = props

-  const [type, setType] = useState('box')
+  const [type, setType] = useState('1')

  return (
    <Modal
@ -48,17 +54,25 @@ const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
      {...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>
+        <div>
+          <Radio.Group
+            onChange={e => {
+              setType(e.target.value)
+              onRadioChange?.(e)
+            }}
+            style={{ marginLeft: '24px', padding: '20px 0' }}
+            value={type}
+            options={BOX_TYPE_LIST}
+            {...radioProps}
+          />
+          <Select
+            defaultValue={''}
+            style={{ marginLeft: 200, width: 150 }}
+            options={ALL_LIST}
+            onSelect={onSelect}
+            {...selectProps}
+          />
+        </div>
        {type === 'box' ?
          (
            <TreeTransfer
--- a/packages/biz/src/treeTransferModal/demo/basic.tsx
+++ b/packages/biz/src/treeTransferModal/demo/basic.tsx
@ -7,7 +7,7 @@ import { boxDataSource } from './mock'
 const App: React.FC = () => {
  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(true)

  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
    let _targetItems: TreeDataNode[] = []
@ -47,7 +47,7 @@ const App: React.FC = () => {
      <TreeTransferModal
        open={open}
        onCancel={() => setOpen(false)}
-        onRadioChange={() => setOpen(false)}    // 顶部 radio 事件
+        onRadioChange={(e) => console.log('radioChange', e)}    // 顶部 radio 事件
        dataSource={boxDataSource}                   // 数据源
        targetItems={targetItems}               // 右侧选中项
        checkedKeys={checkedKeys}               // 左侧选中
--- a/packages/biz/src/treeTransferModal/index.md
+++ b/packages/biz/src/treeTransferModal/index.md
@ -12,6 +12,8 @@ group:

 <code src="./demo/basic.tsx">基本用法</code>

+## API
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | data | 数据源 | Array[] | [] | - |
--- a/packages/biz/src/utils/constants.ts
+++ b/packages/biz/src/utils/constants.ts
@ -25,3 +25,13 @@ export const DeviceTab = {
  REAL_CAMERA_ONLYFACE: 7,
  REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8, // 只有普通摄像头，没有人脸、没有盒子、直连
 };
+
+// 盒子 Tab 切换
+export const BOX_TYPE_LIST = [
+  { value: '1', label: '盒子' },
+  { value: '2', label: '盒子组' }
+]
+
+export const ALL_LIST = [
+  { value: '', label: '全部' }
+]
--- a/packages/func/CHANGELOG.md
+++ b/packages/func/CHANGELOG.md
@ -1,5 +1,20 @@
 # @zhst/utils

+## 0.7.2
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+- Updated dependencies
+  - @zhst/request@0.8.1
+
+## 0.7.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/request@0.8.0
+
 ## 0.7.0

 ### Minor Changes
--- a/packages/func/package.json
+++ b/packages/func/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/func",
-  "version": "0.7.0",
+  "version": "0.7.2",
  "description": "函数合集",
  "keywords": [
    "hooks"
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@ -1,5 +1,23 @@
 # @zhst/hooks

+## 0.8.1
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+- Updated dependencies
+  - @zhst/func@0.7.2
+
+## 0.8.0
+
+### Minor Changes
+
+- @zhst/biz 优化数组件
+
+### Patch Changes
+
+- @zhst/func@0.7.1
+
 ## 0.7.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.7.0",
+  "version": "0.8.1",
  "description": "hooks合集",
  "keywords": [
    "hooks"
--- a/packages/meta/CHANGELOG.md
+++ b/packages/meta/CHANGELOG.md
@ -1,5 +1,24 @@
 # @zhst/utils

+## 0.8.2
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+- Updated dependencies
+  - @zhst/hooks@0.8.1
+  - @zhst/func@0.7.2
+  - @zhst/meta@0.8.2
+
+## 0.8.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/hooks@0.8.0
+  - @zhst/func@0.7.1
+  - @zhst/meta@0.8.1
+
 ## 0.8.0

 ### Minor Changes
--- a/packages/meta/package.json
+++ b/packages/meta/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/meta",
-  "version": "0.8.0",
+  "version": "0.8.2",
  "description": "原子组件",
  "keywords": [
    "meta",
--- a/packages/request/CHANGELOG.md
+++ b/packages/request/CHANGELOG.md
@ -1,5 +1,17 @@
 # @zhst/request

+## 0.8.1
+
+### Patch Changes
+
+- 优化 boxSelectTree 组件，添加可以自定义配置按钮功能
+
+## 0.8.0
+
+### Minor Changes
+
+- @zhst/biz 优化数组件
+
 ## 0.7.0

 ### Minor Changes
--- a/packages/request/es/index.js
+++ b/packages/request/es/index.js
--- a/packages/request/lib/index.js
+++ b/packages/request/lib/index.js
@ -1,155 +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.ts
-var src_exports = {};
-__export(src_exports, {
-  ResponseError: () => ResponseError,
-  User: () => User,
-  default: () => src_default,
-  doRequest: () => doRequest,
-  req: () => req
-});
-module.exports = __toCommonJS(src_exports);
-var import_umi_request = require("umi-request");
-var import_lodash_es = require("lodash-es");
-var import_antd = require("antd");
-var import_base_64 = __toESM(require("base-64"));
-var User = /* @__PURE__ */ ((User2) => {
-  User2["TOKEN_KEY"] = "USER-TOKEN";
-  User2["USER_KEY"] = "USER";
-  return User2;
-})(User || {});
-var ResponseError = class extends Error {
-  constructor(response, text, data, request, type = "ResponseError") {
-    super(text || response.statusText);
-    this.name = "ResponseError";
-    this.data = data;
-    this.response = response;
-    this.request = request;
-    this.type = type;
-  }
-};
-var req = (0, import_umi_request.extend)({
-  getResponse: true,
-  // timeout: 1000,
-  parseResponse: false
-});
-req.use(async (ctx, next) => {
-  const { req: req2 } = ctx;
-  const { toast = true } = (req2 == null ? void 0 : req2.options) || {};
-  try {
-    await next();
-    const { res } = ctx;
-    const d = await res.text();
-    if (res.status === 401) {
-      localStorage.removeItem("USER-TOKEN" /* TOKEN_KEY */);
-      localStorage.removeItem("USER" /* USER_KEY */);
-      import_antd.message.warning("登录过期，请重新登录!");
-      return;
-    }
-    const isEmptyRes = d === "";
-    if (!res)
-      return;
-    const body = !isEmptyRes ? JSON.parse(d) : d;
-    if (res.status >= 200 && res.status < 300) {
-      ctx.res = body;
-    } else {
-      let errMsg = res.headers.get("Grpc-Metadata-Errorx-Message");
-      if (errMsg) {
-        errMsg = import_base_64.default.decode(errMsg);
-      } else if (!errMsg && (0, import_lodash_es.get)(body, "message")) {
-        errMsg = `${(0, import_lodash_es.get)(body, "message")}`;
-      } else {
-        errMsg = "您的网络发生异常，无法连接服务器";
-      }
-      toast && import_antd.message.error(errMsg);
-      throw new ResponseError(res, errMsg, d, req2, "CustomError");
-    }
-  } catch (error) {
-    if ((0, import_lodash_es.get)(error, "type") !== "CustomError") {
-      toast && import_antd.message.error("您的网络发生异常，无法连接服务器");
-    }
-    throw error;
-  }
-});
-var doRequest = (cgi, option) => {
-  const {
-    method,
-    url,
-    baseUrl,
-    data = {},
-    useBaseUrl = true,
-    originUrl = false,
-    refererSuffix = ""
-  } = cgi;
-  const token = localStorage.getItem("USER-TOKEN" /* TOKEN_KEY */);
-  let newUrl = "";
-  if (useBaseUrl) {
-    newUrl = `${baseUrl}${url}`;
-  } else {
-    newUrl = `http://10.0.0.7:32223${url}`;
-  }
-  if (originUrl) {
-    newUrl = url;
-  }
-  const regex = /\/:(\w+)/g;
-  const params = [];
-  let matches;
-  while ((matches = regex.exec(newUrl)) != null) {
-    if (matches[1]) {
-      params.push(matches[1]);
-    }
-  }
-  params.forEach(function(name) {
-    let d = data == null ? void 0 : data[name];
-    if (d == null) {
-      d = "";
-    }
-    newUrl = newUrl.replace(`:${name}`, d);
-  });
-  const newData = (0, import_lodash_es.omit)(data, params);
-  const paramObj = method.toLowerCase() === "get" ? { params: newData } : { data: newData };
-  return req(newUrl, {
-    method,
-    ...paramObj,
-    ...option,
-    headers: {
-      authorization: token,
-      ...refererSuffix ? { zhst_referer: `${baseUrl}${refererSuffix}` } : {}
-    }
-  });
-};
-var src_default = doRequest;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ResponseError,
-  User,
-  doRequest,
-  req
-});
--- a/packages/request/package.json
+++ b/packages/request/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/request",
-  "version": "0.7.0",
+  "version": "0.8.1",
  "description": "请求库",
  "keywords": [
    "request",