style: 优化 tabs 组件

packages/fighting-design/tabs-item/src/tabs-item.vue

@@ -1,7 +1,15 @@
 <script lang="ts" setup>
   import { Props } from './props'
   import { TABS_PROPS_KEY } from '../../tabs/src/props'
-  import { inject, computed, getCurrentInstance, ref, onMounted, reactive } from 'vue'
+  import {
+    inject,
+    computed,
+    getCurrentInstance,
+    ref,
+    onMounted,
+    reactive,
+    toRef
+  } from 'vue'
   import type { ComponentInternalInstance } from 'vue'
 
   defineOptions({ name: 'FTabsItem' })
@@ -11,26 +19,30 @@
   /** 获取当前组件实例 */
   const instance = getCurrentInstance() as ComponentInternalInstance
 
-  const paneName = ref(prop.name)
+  /** 当前选中的 name */
+  const activeName = ref(prop.name)
 
   /** 获取父组件注入的依赖项 */
   const parentInject = inject(TABS_PROPS_KEY, null)
 
-  const pane = reactive({
-    paneName,
-    label: prop.label,
+  const options = reactive({
+    activeName,
     uid: instance.uid,
-    prop
+    label: toRef(prop, 'label')
   })
 
   /** 该组件是否显示 */
-  const isShow = computed(
-    (): boolean | null => parentInject && parentInject.activeName.value === pane.paneName
-  )
+  const isActive = computed((): boolean | null => {
+    if (!parentInject) {
+      return false
+    }
 
-  /** 在组件插入及卸载时都要更新父级的 pane 列表 */
+    return parentInject.activeName.value === options.activeName
+  })
+
+  /** 在组件插入及卸载时都要更新父级的 nav 列表 */
   onMounted((): void => {
-    parentInject && parentInject.registerChild(pane)
+    parentInject && parentInject.registerChild(options)
   })
 
   // onBeforeUnmount((): void => {
@@ -40,8 +52,8 @@
 
 <template>
   <div
-    v-show="isShow"
-    :class="['f-tabs-item', { 'f-tabs-item__active': isShow }]"
+    v-show="isActive"
+    :class="['f-tabs-item', { 'f-tabs-item__active': isActive }]"
     role="tabpanel"
   >
     <slot />

packages/fighting-design/tabs/src/interface.ts

@@ -1,4 +1,4 @@
-import type { Slot } from 'vue'
+import type { Ref } from 'vue'
 
 export type { TabsProps } from './props'
 
@@ -43,13 +43,18 @@ export type TabsEdit = (
   index?: number
 ) => void
 
-/**
- * nav 列表集合
- *
- * @param { string | number } name 标签的 name
- * @param { * } label 标签的 label
- */
-export interface TabsNavInstance {
-  name: TabsModelValue
-  label: string | Slot
+export interface TabsChildrenItem {
+  label: string
+  name: string | number
+}
+
+export interface TabsOpts {
+  activeName: number | string
+  uid: number
+  label: string
+}
+
+export interface TabsProvide {
+  activeName: Ref<number | string>
+  registerChild: (opts: TabsOpts) => void
 }

packages/fighting-design/tabs/src/props.ts

@@ -12,9 +12,9 @@ import type {
   TabsType,
   TabsJustifyContent,
   TabsSwitch,
-  TabsEdit
+  TabsEdit,
+  TabsProvide
 } from './interface'
-import type { TabsProvide } from '../../_hooks'
 
 export const Props = {
   /** 活跃的 name */
@@ -44,7 +44,7 @@ export const Props = {
    * @see justify-content https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content
    */
   justifyContent: setStringProp<TabsJustifyContent>(
-    null,
+    undefined,
     (val: TabsJustifyContent): boolean => {
       return (
         [

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

@@ -3,7 +3,13 @@
   import { provide, getCurrentInstance, ref, isVNode } from 'vue'
   import { isObject, isArray } from '../../_utils'
   import type { TabsItemProps } from '../../tabs-item'
-  import type { ComponentInternalInstance, VNode, Component } from 'vue'
+  import type {
+    ComponentInternalInstance,
+    VNode,
+    Component,
+    VNodeNormalizedChildren
+  } from 'vue'
+  import type { TabsOpts, TabsProvide, TabsChildrenItem } from './interface'
 
   defineOptions({ name: 'FTabs' })
 
@@ -13,13 +19,13 @@
     type: [Number, String]
   })
 
-  /** 获取当前组件实例 */
+  /** 当前选中的 name */
   const activeName = ref<string | number>(0)
 
-  const childrenMap = new Map<number, any>()
-  const children = ref()
+  const childrenMap = new Map<number, TabsOpts>()
+  const children = ref<TabsChildrenItem[]>()
 
-  const flattedChildren = (children): VNode[] => {
+  const flattedChildren = (children: VNode | VNodeNormalizedChildren): VNode[] => {
     const vNodes = isArray(children) ? children : [children]
     const result: VNode[] = []
 
@@ -51,8 +57,8 @@
   const root = getCurrentInstance() as ComponentInternalInstance
   const component = 'FTabsItem'
 
-  const registerChild = (child): void => {
-    childrenMap.set(child.uid, child)
+  const registerChild = (opts: TabsOpts): void => {
+    childrenMap.set(opts.uid, opts)
 
     const componentList: VNode[] = getChildrenComponent(root, component)
 
@@ -62,21 +68,26 @@
       })
       .filter(Boolean) as number[]
 
-    children.value = componentUid
-      .map((e: number): TabsPane | undefined => childrenMap.get(e))
-      .filter(Boolean)
-      .map((item, index) => {
-        item.paneName = item.paneName || index
-
-        return {
-          name: item.paneName || index,
-          label: item.prop.label
-        }
-      })
+    console.log(componentUid)
+
+    children.value = (
+      componentUid
+        .map((e: number): TabsOpts | undefined => {
+          return childrenMap.get(e)
+        })
+        .filter(Boolean) as TabsOpts[]
+    ).map((item: TabsOpts, index: number): TabsChildrenItem => {
+      item.activeName = item.activeName || index
+
+      return {
+        name: item.activeName || index,
+        label: item.label
+      } as const
+    })
   }
 
   /** 将信息传递给子组件 */
-  provide(TABS_PROPS_KEY, {
+  provide<TabsProvide>(TABS_PROPS_KEY, {
     activeName,
     registerChild
   })
@@ -88,7 +99,7 @@
    */
   const changeNavs = (name: TabsItemProps['name']): void => {
     activeName.value = name
-    console.log(name)
+    modelValue.value = name
   }
 </script>
 

start/src/App.vue

@@ -12,6 +12,10 @@
     <f-tabs-item label="我心中尚未崩坏的地方">
       <p>就算会有一天，没人与我合唱，至少在我的心中，还有个尚未崩坏的地方。</p>
     </f-tabs-item>
+
+    <f-tabs-item label="555">
+      <p>打扫打扫打扫</p>
+    </f-tabs-item>
   </f-tabs>
 </template>