fix: 修复 f-tree 组件的类型问题 🧺🧺🧺

packages/fighting-design/_hooks/use-tree-data/index.ts

@@ -1,7 +1,6 @@
 import { computed } from 'vue'
-import { Add, treeToFlat, isArray } from '../../_utils'
-import type { TreeData } from '../../tree'
-import type { UseTreeDataReturn } from './interface'
+import { treeAddKey, treeToFlat, isArray } from '../../_utils'
+import type { UseTreeDataReturn, FormatTreeData, FlatTreeData } from './interface'
 
 export * from './interface.d'
 
@@ -10,21 +9,21 @@ export * from './interface.d'
  *
  * @param data 树形结构
  */
-export const useTreeData = (data: TreeData): UseTreeDataReturn => {
+export const useTreeData = (data: FormatTreeData): UseTreeDataReturn => {
   /** 处理后的树形结构 */
-  const treeData = computed((): TreeData => Add(data))
+  const treeData = computed((): FlatTreeData[] => treeAddKey(data) as FlatTreeData[])
 
   /** 扁平是树形结构 */
-  const flatTreeData = computed((): TreeData => treeToFlat(treeData.value))
+  const flatTreeData = computed((): FlatTreeData[] => treeToFlat(treeData.value) as FlatTreeData[])
 
   /**
    * 隐藏节点方法
    *
    * @param tree 树形结构
    */
-  const hidden = (tree: TreeData): void => {
+  const hidden = (tree: FormatTreeData[]): void => {
     isArray(tree) &&
-      tree.forEach(item => {
+      tree.forEach((item: FormatTreeData): void => {
         item.show = false
         item.open = false
 
@@ -38,8 +37,8 @@ export const useTreeData = (data: TreeData): UseTreeDataReturn => {
    * @param data 树形结构
    * @param id id
    */
-  const getItem = (data: TreeData, id: number): void => {
-    data.forEach(item => {
+  const getItem = (data: FormatTreeData[], id: number): void => {
+    data.forEach((item: FormatTreeData): void => {
       if (item.id === id) {
         if (item.open) {
           item.children && hidden(item.children)

packages/fighting-design/_hooks/use-tree-data/interface.d.ts

@@ -1,6 +1,47 @@
-import type { TreeData } from '../../tree'
 import type { ComputedRef } from 'vue'
 
+/**
+ * 处理数据结果之前的类型接口
+ *
+ * @param label label
+ * @param level 标识
+ * @param open 是否打开
+ * @param isChild 是否带有子节点
+ * @param show 是否展示
+ * @param id id
+ * @param children 子节点
+ */
+export interface FormatTreeData {
+  label: string
+  level?: number
+  open?: boolean
+  isChild?: boolean
+  show?: boolean
+  id?: number
+  children?: FormatTreeData[]
+}
+
+/**
+ * 处理数据结果之后的类型接口
+ *
+ * @param label label
+ * @param level 标识
+ * @param open 是否打开
+ * @param isChild 是否带有子节点
+ * @param show 是否展示
+ * @param id id
+ * @param children 子节点
+ */
+export interface FlatTreeData {
+  label: string
+  level: number
+  open: boolean
+  isChild: boolean
+  show: boolean
+  id: number
+  children?: FlatTreeData[]
+}
+
 /**
  * useTreeData 返回值类型接口
  *
@@ -9,7 +50,7 @@ import type { ComputedRef } from 'vue'
  * @param getItem 获取到指定的元素进行操作
  */
 export interface UseTreeDataReturn {
-  treeData: ComputedRef<TreeData>
-  flatTreeData: ComputedRef<TreeData>
-  getItem: (data: TreeData, id: number) => void
+  treeData: ComputedRef<FlatTreeData[]>
+  flatTreeData: ComputedRef<FlatTreeData[]>
+  getItem: (data: FormatTreeData[], id: number) => void
 }

packages/fighting-design/_utils/tree/index.ts

@@ -1,17 +1,16 @@
 import { isArray } from '../is'
-import type { TreeAddLevelReturn } from './interface'
-import type { TreeData, TreeDataItem } from '../../tree'
+import type { FormatTreeData } from '../../_hooks'
 
 /**
  * 扁平化树形结构
  *
  * @param data 树形数据
  */
-export const treeToFlat = (data: TreeData): TreeAddLevelReturn[] => {
-  const result: TreeAddLevelReturn[] = []
+export const treeToFlat = (data: FormatTreeData[]): FormatTreeData[] => {
+  const result: FormatTreeData[] = []
 
-  data.forEach((item: TreeDataItem): void => {
-    result.push(item as TreeAddLevelReturn)
+  data.forEach((item: FormatTreeData): void => {
+    result.push(item)
 
     if (item.children) {
       result.push(...treeToFlat(item.children))
@@ -21,30 +20,51 @@ export const treeToFlat = (data: TreeData): TreeAddLevelReturn[] => {
   return result
 }
 
-export const Add = (tree: TreeData): TreeData => {
+/**
+ * 给树形结构添加一些配置键
+ * 
+ * @param tree 树形结构
+ * @returns 添加一些配置键的树形结构
+ */
+export const treeAddKey = (tree: FormatTreeData): FormatTreeData[] => {
   if (!isArray(tree)) return []
 
-  const recursive = (array: TreeData, level = 0): TreeData => {
+  /**
+   * 给一棵树添加各种所需的配置键
+   * 
+   * @param array 树形结构数组
+   * @param level 层级
+   * @returns 添加了各种键的树形结构
+   */
+  const addKey = (array: FormatTreeData[], level = 0): FormatTreeData[] => {
     level++
 
-    return array.map((item: TreeDataItem): TreeDataItem => {
+    return array.map((item: FormatTreeData): FormatTreeData => {
       item.level = level
       item.show = item.level === 1 ? true : false
       item.open = false
       item.isChild = !!item.children
 
-      const child: TreeData = item.children as TreeData
+      /** 尝试获取到孩子节点 */
+      const child: FormatTreeData[] | undefined = item.children
 
       if (child && child.length) {
-        recursive(child, level)
+        addKey(child, level)
       }
 
       return item
     })
   }
 
-  const addId = (arr: TreeData, parentId = ''): TreeData => {
-    arr.forEach((item, i) => {
+  /**
+   * 给树形结构添加 id
+   * 
+   * @param arr 树形数组
+   * @param parentId 父级 id
+   * @returns 带有 id 的树形结构
+   */
+  const addId = (arr: FormatTreeData[], parentId = ''): FormatTreeData[] => {
+    arr.forEach((item, i: number): void => {
       if (item.children && item.children.length) {
         item.id = Number(`${parentId}${i + 1}`)
         addId(item.children, `${parentId}${i + 1}`)
@@ -56,5 +76,5 @@ export const Add = (tree: TreeData): TreeData => {
     return arr
   }
 
-  return addId(recursive(tree))
+  return addId(addKey(tree))
 }

packages/fighting-design/tree/src/interface.d.ts

@@ -4,17 +4,10 @@ export type { TreeProps } from './props'
  * 树形结构每一项类型接口
  *
  * @param label label
- * @param level 标识
- * @param show 是否展示
  * @param children 孩子节点
  */
 export interface TreeDataItem {
   label: string
-  level: number
-  open?: boolean
-  isChild?: boolean
-  show?: boolean
-  id?: number
   children?: TreeDataItem[]
 }
 

packages/fighting-design/tree/src/tree.vue

@@ -3,18 +3,18 @@
   import { FSvgIcon } from '../../svg-icon'
   import { FIconChevronRightVue } from '../../_svg'
   import { useTreeData } from '../../_hooks'
-  import type { TreeDataItem } from './interface'
+  import type { FormatTreeData } from '../../_hooks'
 
   const prop = defineProps(Props)
 
-  const { getItem, treeData, flatTreeData } = useTreeData(prop.data)
+  const { getItem, treeData, flatTreeData } = useTreeData(prop.data as unknown as FormatTreeData)
 
   /**
    * 点击展开或关闭
    *
    * @param item 每一项
    */
-  const handleClick = (item: TreeDataItem): void => {
+  const handleClick = (item: FormatTreeData): void => {
     getItem(treeData.value, item.id as number)
   }
 </script>