From c54b4aebe08666a7d384f8df1bb072e5a33e890a Mon Sep 17 00:00:00 2001
From: Utopia <greatauk11@gmail.com>
Date: Wed, 29 Oct 2025 14:45:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=20tabbar=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=88=B0=E7=9A=84=20ts=20=E7=B1=BB=E5=9E=8B=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E6=8F=90=E5=8F=96=E5=88=B0=20types.ts=20=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=AD=EF=BC=8C=E5=87=8F=E5=B0=91=E9=98=85=E8=AF=BB=E5=B9=B2?=
 =?UTF-8?q?=E6=89=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tabbar/config.ts | 18 +-----------------
 src/tabbar/index.vue |  2 +-
 src/tabbar/store.ts  |  2 +-
 src/tabbar/types.ts  | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 37 insertions(+), 19 deletions(-)
 create mode 100644 src/tabbar/types.ts

diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index 4345586..141c07a 100644
--- a/src/tabbar/config.ts
+++ b/src/tabbar/config.ts
@@ -1,5 +1,5 @@
 import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
-import type { RemoveLeadingSlashFromUnion } from '@/typings'
+import type { CustomTabBarItem, NativeTabBarItem } from './types'
 
 /**
  * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
@@ -23,10 +23,6 @@ export const TABBAR_STRATEGY_MAP = {
 // 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 customTabbarList，nativeTabbarList 不生效
 export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
 
-type NativeTabBarItem = TabBar['list'][number] & {
-  pagePath: RemoveLeadingSlashFromUnion<_LocationUrl>
-}
-
 // TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
 export const nativeTabbarList: NativeTabBarItem[] = [
   {
@@ -43,18 +39,6 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
-// badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
-export type CustomTabBarItemBadge = number | 'dot'
-
-export interface CustomTabBarItem {
-  text: string
-  pagePath: RemoveLeadingSlashFromUnion<_LocationUrl>
-  iconType: 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
-  icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
-  iconActive?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
-  badge?: CustomTabBarItemBadge
-  isBulge?: boolean // 是否是中间的鼓包tabbarItem
-}
 // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
 // 如果需要配置鼓包，需要在 'tabbar/store.ts' 里面设置，最后在 `tabbar/index.vue` 里面更改鼓包的图片
 export const customTabbarList: CustomTabBarItem[] = [
diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index 6e1f982..a18816f 100644
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // i-carbon-code
-import type { CustomTabBarItem } from './config'
+import type { CustomTabBarItem } from './types'
 import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
 import { tabbarList, tabbarStore } from './store'
 
diff --git a/src/tabbar/store.ts b/src/tabbar/store.ts
index 623883f..5b07cbd 100644
--- a/src/tabbar/store.ts
+++ b/src/tabbar/store.ts
@@ -1,4 +1,4 @@
-import type { CustomTabBarItem, CustomTabBarItemBadge } from './config'
+import type { CustomTabBarItem, CustomTabBarItemBadge } from './types'
 import { reactive } from 'vue'
 
 import { isNeedLoginMode } from '@/router/config'
diff --git a/src/tabbar/types.ts b/src/tabbar/types.ts
new file mode 100644
index 0000000..d5b64ad
--- /dev/null
+++ b/src/tabbar/types.ts
@@ -0,0 +1,34 @@
+import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
+import type { RemoveLeadingSlashFromUnion } from '@/typings'
+
+/**
+ * 原生 tabbar 的单个选项配置
+ */
+export type NativeTabBarItem = TabBar['list'][number] & {
+  pagePath: RemoveLeadingSlashFromUnion<_LocationUrl>
+}
+
+/** badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改） */
+export type CustomTabBarItemBadge = number | 'dot'
+
+/** 自定义 tabbar 的单个选项配置 */
+export interface CustomTabBarItem {
+  text: string
+  pagePath: RemoveLeadingSlashFromUnion<_LocationUrl>
+  /** 图标类型，不建议用 image 模式，因为需要配置 2 张图，更麻烦 */
+  iconType: 'uiLib' | 'unocss' | 'iconfont' | 'image'
+  /**
+   * icon 的路径
+   * - uiLib: wot-design-uni 图标的 icon prop
+   * - unocss: unocss 图标的类名
+   * - iconfont: iconfont 图标的类名
+   * - image: 图片的路径
+   */
+  icon: string
+  /** 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式） */
+  iconActive?: string
+  /** badge 显示一个数字或 小红点 */
+  badge?: CustomTabBarItemBadge
+  /** 是否是中间的鼓包tabbarItem */
+  isBulge?: boolean
+}