feat: 优化 tree 类型

FightingDesign · Aug 12, 2023 · a929dc6 · a929dc6
1 parent e64b5f7
commit a929dc6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/packages/fighting-design/tree/src/interface.ts b/packages/fighting-design/tree/src/interface.ts
@@ -6,7 +6,6 @@ export type { TreeProps } from './props'
  * 树形结构每一项类型接口
  *
  * @param { string } label label
- * @param { string } __level 层级
  * @param { Array } [children] 孩子节点
  */
 export interface TreeDataItem {
@@ -35,6 +34,6 @@ export type TreeClickLabel = (evt: MouseEvent, label: string, level: number, isO
  * @param { Array } tree 格式化后的树形数据
  */
 export interface TreeProvide {
-  onClickLabel: Function
+  onClickLabel: TreeClickLabel
   tree: TreeItemModel[]
 }
diff --git a/packages/fighting-design/tree/src/props.ts b/packages/fighting-design/tree/src/props.ts
@@ -1,10 +1,17 @@
-import { setArrayProp, setFunctionProp } from '../../_utils'
-import type { ExtractPropTypes, InjectionKey } from 'vue'
-import type { TreeData, TreeProvide, TreeClickLabel } from './interface'
+import { setFunctionProp } from '../../_utils'
+import type { ExtractPropTypes, InjectionKey, PropType } from 'vue'
+import type { TreeData, TreeProvide, TreeClickLabel, TreeDataItem } from './interface'
 
 export const Props = {
-  /** 数据 */
-  data: setArrayProp<TreeData>(),
+  /** 
+   * 树形数据
+   *
+   * 可以是对象或者数组两种状态
+   */
+  data: {
+    type: [Object, Array] as PropType<TreeDataItem | TreeData>,
+    default: (): TreeData => []
+  },
   /** 点击标签执行的回调 */
   onClickLabel: setFunctionProp<TreeClickLabel>()
 } as const

diff --git a/packages/fighting-design/tree/src/tree.vue b/packages/fighting-design/tree/src/tree.vue
@@ -2,7 +2,8 @@
   import { Props, TREE_PROPS_KEY } from './props'
   import { provide, toRef, reactive } from 'vue'
   import { FTreeItem } from '../components'
-  import type { TreeData, TreeProvide } from './interface'
+  import { isArray, isObject } from '../../_utils'
+  import type { TreeData, TreeProvide, TreeDataItem } from './interface'
   import type { TreeItemModel } from '../components'
 
   defineOptions({ name: 'FTree' })
@@ -15,17 +16,28 @@
    * @param { Object } tree 树形数据
    * @param { number } __level 层级
    */
-  const markTreeLevels = (tree: TreeData, __level = 0): TreeItemModel[] => {
+  const markTreeLevels = (
+    tree: TreeDataItem | TreeData,
+    __level = 0
+  ): TreeItemModel[] => {
+    /** 先判断数据类型 */
+    if (isObject(tree)) {
+      tree = [tree] as TreeData
+    }
+
+    /** 存储格式化后的树 */
     const markedTree: TreeItemModel[] = []
 
-    for (const node of tree) {
-      const newNode = { ...node, __level } as TreeItemModel
+    if (isArray(tree)) {
+      for (const node of tree) {
+        const newNode = { ...node, __level } as TreeItemModel
 
-      if (node.children) {
-        newNode.children = markTreeLevels(node.children, __level + 1)
-      }
+        if (node.children) {
+          newNode.children = markTreeLevels(node.children, __level + 1)
+        }
 
-      markedTree.push(newNode)
+        markedTree.push(newNode)
+      }
     }
 
     return markedTree
@@ -34,6 +46,7 @@
   /** 处理后的树形结构 */
   const tree: TreeItemModel[] = markTreeLevels(prop.data)
 
+  /** 注入依赖项 */
   provide<TreeProvide>(
     TREE_PROPS_KEY,
     reactive({