perf(tree): strengthen BasicTree function

CHANGELOG.zh_CN.md

@@ -11,8 +11,9 @@
 - 新增修改密码界面
 - 新增部门管理示例界面
 - 新增 WebSocket 示例和服务脚本
-- BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示
-- BasicTree->actionItem 新增 show 属性，用于动态控制按钮显示
+- Tree 组件新增 `renderIcon` 属性用于控制层级图标显示
+- Tree->actionItem 新增 show 属性，用于动态控制按钮显示
+- Tree 新增工具栏/title/搜索功能
 
 ### ⚡ Performance Improvements
 

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.6",
     "@vueuse/core": "^4.3.1",
-    "@zxcvbn-ts/core": "^0.2.0",
+    "@zxcvbn-ts/core": "^0.3.0",
     "ant-design-vue": "2.0.1",
     "apexcharts": "^3.25.0",
     "axios": "^0.21.1",

src/components/StrengthMeter/src/index.vue

@@ -23,7 +23,8 @@
 
   import { Input } from 'ant-design-vue';
 
-  import zxcvbn from '@zxcvbn-ts/core';
+  // @ts-ignore
+  import { zxcvbn } from '@zxcvbn-ts/core';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
 

src/components/Tree/src/TreeHeader.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex px-2 py-1.5 items-center border-b-1">
+    <BasicTitle :helpMessage="helpMessage" v-if="title">{{ title }}</BasicTitle>
+
+    <div class="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar">
+      <div class="mr-1 w-2/3" v-if="search">
+        <InputSearch :placeholder="t('common.searchText')" size="small" @change="handleSearch" />
+      </div>
+      <Dropdown @click.prevent v-if="toolbar">
+        <Icon icon="ion:ellipsis-vertical" />
+        <template #overlay>
+          <Menu @click="handleMenuClick">
+            <MenuItem v-for="item in toolbarList" :key="item.value">
+              {{ item.label }}
+            </MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
+
+  import { Dropdown, Menu, Checkbox, Input } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { BasicTitle } from '/@/components/Basic';
+
+  import { propTypes } from '/@/utils/propTypes';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDebounce } from '/@/hooks/core/useDebounce';
+
+  import { ToolbarEnum } from './enum';
+
+  interface MenuInfo {
+    key: ToolbarEnum;
+  }
+  export default defineComponent({
+    name: 'BasicTreeHeader',
+    components: {
+      BasicTitle,
+      Icon,
+      Checkbox,
+      Dropdown,
+      Menu,
+      MenuItem: Menu.Item,
+      InputSearch: Input.Search,
+    },
+    props: {
+      helpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: '',
+      },
+      title: propTypes.string,
+      toolbar: propTypes.bool,
+      search: propTypes.bool,
+      checkAll: propTypes.func,
+      expandAll: propTypes.func,
+    },
+    emits: ['strictly-change', 'search'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const toolbarList = ref([
+        { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
+        { label: t('component.tree.unSelectAll'), value: ToolbarEnum.UN_SELECT_ALL },
+        { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
+        { label: t('component.tree.unExpandAll'), value: ToolbarEnum.UN_EXPAND_ALL },
+        { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
+        { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
+      ]);
+
+      function handleMenuClick(e: MenuInfo) {
+        const { key } = e;
+        switch (key) {
+          case ToolbarEnum.SELECT_ALL:
+            props.checkAll?.(true);
+            break;
+          case ToolbarEnum.UN_SELECT_ALL:
+            props.checkAll?.(false);
+            break;
+          case ToolbarEnum.EXPAND_ALL:
+            props.expandAll?.(true);
+            break;
+          case ToolbarEnum.UN_EXPAND_ALL:
+            props.expandAll?.(false);
+            break;
+          case ToolbarEnum.CHECK_STRICTLY:
+            emit('strictly-change', false);
+            break;
+          case ToolbarEnum.CHECK_UN_STRICTLY:
+            emit('strictly-change', true);
+            break;
+        }
+      }
+
+      function emitChange(value?: string): void {
+        emit('search', value);
+      }
+      const [debounceEmitChange] = useDebounce(emitChange, 200);
+
+      function handleSearch(e: ChangeEvent): void {
+        debounceEmitChange(e.target.value);
+      }
+
+      return { t, toolbarList, handleMenuClick, handleSearch };
+    },
+  });
+</script>

src/components/Tree/src/enum.ts

@@ -0,0 +1,8 @@
+export enum ToolbarEnum {
+  SELECT_ALL,
+  UN_SELECT_ALL,
+  EXPAND_ALL,
+  UN_EXPAND_ALL,
+  CHECK_STRICTLY,
+  CHECK_UN_STRICTLY,
+}