feat: 完成 tree 组件

packages/effects/common-ui/src/components/table/table-tree/table-tree.vue

@@ -1,55 +1,87 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-
-import { DirectoryTree, type TreeProps } from 'ant-design-vue';
-
-const expandedKeys = ref<string[]>(['0-0', '0-1']);
-const selectedKeys = ref<string[]>([]);
-const treeData: TreeProps['treeData'] = [
-  {
-    key: '0-0',
-    title: 'parent 0',
-    children: [
-      {
-        title: 'leaf 0-0',
-        key: '0-0-0',
-        isLeaf: true,
-      },
-      {
-        title: 'leaf 0-1',
-        key: '0-0-1',
-        isLeaf: true,
-      },
-    ],
-  },
-  {
-    key: '0-1',
-    title: 'parent 1',
-    children: [
-      {
-        title: 'leaf 1-0',
-        key: '0-1-0',
-        isLeaf: true,
-      },
-      {
-        title: 'leaf 1-1',
-        key: '0-1-1',
-        isLeaf: true,
-      },
-    ],
-  },
-];
+import type { EventDataNode } from 'ant-design-vue/es/tree';
+
+import type { TableTreeProps } from './types';
+
+import { computed, ref } from 'vue';
+
+import { useForwardProps } from '@vben/hooks';
+
+import {
+  DirectoryTree,
+  Dropdown,
+  Menu,
+  MenuItem,
+  type TreeProps,
+} from 'ant-design-vue';
+
+interface Props extends TableTreeProps {}
+
+const props = defineProps<Props>();
+const emits = defineEmits<{
+  (event: 'contextMenu', treeKey: string, menuKey: number | string): void;
+  (event: 'selectTree', node: EventDataNode): void;
+}>();
+
+const expandedKeys = ref<TreeProps['expandedKeys']>([]);
+const selectedKeys = ref<TreeProps['selectedKeys']>([]);
+
+const delegatedProps = computed(() => {
+  const {
+    expandedKeys: _expandedKeys,
+    nodeContextMenu: _nodeContextMenu,
+    'onUpdate:checkedKeys': _updateCheckedKeys,
+    'onUpdate:expandedKeys': _updateExpandedKeys,
+    'onUpdate:selectedKeys': _updateSelectedKeys,
+    selectedKeys: _selectedKeys,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardProps(delegatedProps);
+
+function onContextMenu(treeKey: string, menuKey: number | string) {
+  emits('contextMenu', treeKey, menuKey);
+}
+
+function selectTree(_: TreeProps['selectedKeys'], $event: any) {
+  emits('selectTree', $event.node as EventDataNode);
+}
 </script>
 
 <template>
   <DirectoryTree
+    v-bind="forwarded"
     v-model:expanded-keys="expandedKeys"
     v-model:selected-keys="selectedKeys"
-    :style="{ lineHeight: '30px' }"
-    :tree-data="treeData"
     class="min-w-[160px]"
-    multiple
-  />
+    show-line
+    @select="selectTree"
+  >
+    <template #icon></template>
+    <template #title="{ key: treeKey, title }">
+      <Dropdown
+        v-if="nodeContextMenu && nodeContextMenu.length > 0"
+        :trigger="['contextmenu']"
+      >
+        <div>{{ title }}</div>
+        <template #overlay>
+          <Menu @click="({ key: menuKey }) => onContextMenu(treeKey, menuKey)">
+            <MenuItem v-for="item in nodeContextMenu" :key="item.type">
+              {{ item.title }}
+            </MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+      <div v-else>{{ title }}</div>
+    </template>
+  </DirectoryTree>
 </template>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.ant-tree-treenode-selected::before {
+  border-radius: 6px;
+}
+</style>

packages/effects/common-ui/src/components/table/table-tree/types.ts

@@ -0,0 +1,15 @@
+import type { TreeProps } from 'ant-design-vue';
+
+interface NodeContextMenuItem {
+  title: string;
+  type: string;
+}
+
+export interface TableTreeProps extends Omit<TreeProps, 'treeData'> {
+  treeData?: any[];
+  nodeContextMenu?: NodeContextMenuItem[];
+}
+
+export interface TableTreeMethods {
+  onContextMenu?: (treeKey: string, menuKey: number | string) => void;
+}

packages/effects/common-ui/src/ui/table/table.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { EventDataNode } from 'ant-design-vue/es/tree';
+
 import { computed, ref } from 'vue';
 
 import { useForwardProps } from '@vben/hooks';
@@ -47,6 +49,11 @@ const delegatedTableProps = computed(() => {
 
 const tableForwarded = useForwardProps(delegatedTableProps);
 
+/** tree props */
+const treeProps = computed(() => {
+  return props.formConfig?.tree;
+});
+
 /** 搜索 */
 async function searchTable() {
   const formData = props.formConfig?.data;
@@ -64,12 +71,20 @@ async function resetTable() {
   await vxeFormRef.value?.reset();
   await vxeGridRef.value?.commitProxy('reload');
 }
+
+async function handleSelectTree($event: EventDataNode) {
+  // eslint-disable-next-line no-console
+  console.log('SelectTree', $event);
+  await vxeGridRef.value?.commitProxy('reload');
+}
 </script>
 
 <template>
-  <section class="flex gap-[20px]">
-    <Card>
-      <TableTree />
+  <section class="flex gap-[20px] max-sm:flex-col">
+    <Card
+      v-if="treeProps && treeProps.treeData && treeProps.treeData.length > 0"
+    >
+      <TableTree v-bind="treeProps" @select-tree="handleSelectTree" />
     </Card>
     <Card>
       <VxeGrid

packages/effects/common-ui/src/ui/table/types.ts

@@ -2,6 +2,10 @@ import type { ButtonProps } from 'ant-design-vue';
 import type { VxeGridEventProps, VxeGridProps } from 'vxe-table';
 
 import type { TableRadioGroupProps, TableTabProps } from '../../components';
+import type {
+  TableTreeMethods,
+  TableTreeProps,
+} from '../../components/table/table-tree/types';
 
 export interface FormConfigExtraButton {
   title: string;
@@ -18,12 +22,21 @@ export interface TabsConfig extends Partial<TableTabProps> {
   parentKeyName?: string;
 }
 
-type TablePropsAndEmits<T = any> = Omit<VxeGridProps<T>, 'border'> &
+export type TreeConfig = {
+  filed: string | string[];
+} & TableTreeMethods &
+  TableTreeProps;
+
+type TablePropsAndEmits<T = any> = Omit<
+  VxeGridProps<T>,
+  'border' | 'treeConfig'
+> &
   VxeGridEventProps<T>;
 
 export interface TableProps<T = any> extends TablePropsAndEmits<T> {
   formConfig?: {
     /** form 右侧按钮列表 */
     extraButton?: FormConfigExtraButton[];
+    tree?: TreeConfig;
   } & VxeGridProps['formConfig'];
 }

packages/styles/src/antd/index.css

@@ -11,3 +11,21 @@
 .ant-notification-notice {
   @apply dark:border-border/60 dark:border;
 }
+
+.ant-tree {
+  font-size: 16px !important;
+}
+
+.ant-tree.ant-tree-directory .ant-tree-treenode::before,
+.ant-tree-treenode-selected::before {
+  border-radius: 6px;
+}
+
+.ant-tree-show-line .ant-tree-indent-unit::before {
+  top: -3px;
+  bottom: -7px;
+}
+
+.ant-tree-treenode {
+  padding: 3px 3px 7px !important;
+}

playground/src/views/examples/table/helper.ts

@@ -96,6 +96,7 @@ export const defaultTableConfig: TableProps<RowVO> = {
       nickname: '',
       sex: '',
       tab: '',
+      tree: '',
     },
     enabled: true,
     extraButton: [
@@ -105,6 +106,66 @@ export const defaultTableConfig: TableProps<RowVO> = {
         type: 'addDetail',
       },
     ],
+    tree: {
+      fieldNames: { key: 'treeID' },
+      filed: 'tree',
+      nodeContextMenu: [{ title: '删除', type: 'delete' }],
+      treeData: [
+        {
+          name: '1',
+          title: 'parent 1',
+          treeID: '0-0',
+          children: [
+            {
+              title: 'parent 1-0',
+              treeID: '0-0-0',
+              name: '3',
+              children: [
+                {
+                  title: 'leaf',
+                  treeID: '0-0-0-0',
+                  name: '4',
+                },
+                {
+                  title: 'leaf',
+                  treeID: '0-0-0-1',
+                  name: '5',
+                },
+                {
+                  title: 'leaf',
+                  treeID: '0-0-0-2',
+                  name: '6',
+                },
+              ],
+            },
+            {
+              title: 'parent 1-1',
+              treeID: '0-0-1',
+              children: [
+                {
+                  title: 'leaf',
+                  treeID: '0-0-1-0',
+                },
+              ],
+            },
+            {
+              title: 'parent 1-2',
+              treeID: '0-0-2',
+              children: [
+                {
+                  title: 'leaf',
+                  treeID: '0-0-2-0',
+                },
+                {
+                  title: 'leaf',
+                  treeID: '0-0-2-1',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
     items: [
       {
         field: 'buttonGroup',