From 27f23173fd98755b67a467353a2333aca314455d Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Tue, 27 May 2025 00:21:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabbar):=20=E5=AE=9E=E7=8E=B0=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将原有tabbar组件重构为layout布局方式
- 新增tabbar store管理导航项状态和路由
- 为首页和关于页添加tabbar布局配置
- 移除旧的tabbar组件实现
- 添加tabbar路由跳转功能
- 更新类型定义以支持新组件
```

这个提交消息：
1. 使用feat类型，因为这是新增功能
2. 添加了scope(tabbar)明确修改范围
3. 简明描述了主要变更内容
4. 使用中文符合要求
5. 保持了50字符以内的描述行
6. 在正文中列出了主要变更点而不重复描述
---
 src/components/tabbar/tabbar.vue | 56 -----------------------------
 src/layouts/tabbar.vue           | 60 ++++++++++++++++++++++++++++++++
 src/pages.json                   |  2 ++
 src/pages/about/about.vue        |  1 +
 src/pages/index/index.vue        |  1 +
 src/store/tabbar.ts              | 27 ++++++++++++--
 src/types/components.d.ts        |  1 +
 7 files changed, 90 insertions(+), 58 deletions(-)
 delete mode 100644 src/components/tabbar/tabbar.vue
 create mode 100644 src/layouts/tabbar.vue

diff --git a/src/components/tabbar/tabbar.vue b/src/components/tabbar/tabbar.vue
deleted file mode 100644
index 7159e8f..0000000
--- a/src/components/tabbar/tabbar.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <view class="tabbar-box">
-    <view class="items" v-for="(item, index) in tabItems" :key="index" @click="toPage(item.url)">
-      <wd-icon :name="item.icon" size="22px"></wd-icon>
-      <text>{{ item.title }}</text>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  tabItems: {
-    type: Array,
-    required: true,
-    validator(value) {
-      return value.every(
-        (item) =>
-          Object.prototype.hasOwnProperty.call(item, 'url') &&
-          Object.prototype.hasOwnProperty.call(item, 'icon') &&
-          Object.prototype.hasOwnProperty.call(item, 'title'),
-      )
-    },
-  },
-})
-
-const toPage = (url: string) => {
-  uni.switchTab({ url }) // 确保传入的是tabBar页面的URL
-}
-
-onLoad(() => {
-  uni.hideTabBar()
-})
-</script>
-
-<style lang="scss" scoped>
-.tabbar-box {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 996;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100rpx;
-  border-top: 1rpx solid #f2f2f2;
-}
-.items {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-</style>
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
new file mode 100644
index 0000000..11d1703
--- /dev/null
+++ b/src/layouts/tabbar.vue
@@ -0,0 +1,60 @@
+<template>
+  <wd-config-provider :themeVars="themeVars">
+    <wd-notify />
+    <wd-toast />
+    <wd-message-box />
+    <!-- <privacy-popup></privacy-popup> -->
+    <slot></slot>
+    <wd-tabbar
+      fixed
+      :model-value="tabbarStore.getActive.name"
+      @change="handleChange"
+      bordered
+      safeAreaInsetBottom
+      placeholder
+    >
+      <wd-tabbar-item
+        v-for="(item, index) in tabbarStore.getTabbarItems"
+        :key="index"
+        :name="item.name"
+        :value="tabbarStore.getTabbarItemValue(item.name)"
+        :title="item.title"
+        :icon="item.icon"
+      ></wd-tabbar-item>
+    </wd-tabbar>
+  </wd-config-provider>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { useTabbarStore } from '@/store/tabbar'
+import { ConfigProviderThemeVars } from 'wot-design-uni'
+
+const tabbarStore = useTabbarStore()
+
+const themeVars = reactive<ConfigProviderThemeVars>({
+  colorTheme: '#fa4126',
+  tabsNavLineBgColor: 'red',
+})
+
+function handleChange({ value }) {
+  tabbarStore.setTabbarItemActive(value)
+  uni.navigateTo({
+    url: tabbarStore.getTabbarItemRoute(value),
+  })
+}
+
+onShow(() => {
+  // #ifdef APP-PLUS
+  uni.hideTabBar()
+  // #endif
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/pages.json b/src/pages.json
index e4efccd..2718209 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -18,6 +18,7 @@
     {
       "path": "pages/index/index",
       "type": "home",
+      "layout": "tabbar",
       "style": {
         "navigationStyle": "custom",
         "navigationBarTitleText": "首页"
@@ -26,6 +27,7 @@
     {
       "path": "pages/about/about",
       "type": "page",
+      "layout": "tabbar",
       "style": {
         "navigationBarTitleText": "关于",
         "navigationStyle": "custom"
diff --git a/src/pages/about/about.vue b/src/pages/about/about.vue
index d234b89..619d6e9 100644
--- a/src/pages/about/about.vue
+++ b/src/pages/about/about.vue
@@ -1,5 +1,6 @@
 <route lang="json5">
 {
+  layout: 'tabbar',
   style: {
     navigationBarTitleText: '关于',
     navigationStyle: 'custom', // 开启自定义导航栏
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index ab50218..88c4188 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,6 +1,7 @@
 <!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
 <route lang="json5" type="home">
 {
+  layout: 'tabbar',
   style: {
     navigationStyle: 'custom',
     navigationBarTitleText: '首页',
diff --git a/src/store/tabbar.ts b/src/store/tabbar.ts
index 4216cc5..ba858ae 100644
--- a/src/store/tabbar.ts
+++ b/src/store/tabbar.ts
@@ -4,13 +4,30 @@ export interface TabbarItem {
   name: string
   value: number | null
   active: boolean
+  route: string
+  title: string
+  icon: string
 }
 
 export const useTabbarStore = defineStore('tabbar', {
   state: (): { tabbarItems: TabbarItem[] } => ({
     tabbarItems: [
-      { name: 'index', value: null, active: true },
-      { name: 'about', value: null, active: false },
+      {
+        name: 'index',
+        value: null,
+        active: true,
+        route: '/pages/index/index',
+        title: '首页',
+        icon: 'home',
+      },
+      {
+        name: 'about',
+        value: null,
+        active: false,
+        route: '/pages/about/about',
+        title: '关于',
+        icon: 'user',
+      },
     ],
   }),
   getters: {
@@ -27,6 +44,12 @@ export const useTabbarStore = defineStore('tabbar', {
         return item && item.value ? item.value : null
       }
     },
+    getTabbarItemRoute: (state) => {
+      return (name: string) => {
+        const item = state.tabbarItems.find((item) => item.name === name)
+        return (item && item.route) ?? null
+      }
+    },
   },
   actions: {
     setTabbarItem(name: string, value: number) {
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index f30fc70..65bb6be 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     FgNavbar: typeof import('./../components/fg-navbar/fg-navbar.vue')['default']
+    FgTabbar: typeof import('./../components/fg-tabbar/fg-tabbar.vue')['default']
     Tabbar: typeof import('./../components/tabbar/tabbar.vue')['default']
   }
 }