feat: 优化tabbar，精简tabbar

pages.config.ts

@@ -35,7 +35,7 @@ export default defineUniPages({
         iconType: 'wot',
       },
       {
-        pagePath: 'pages/index/about',
+        pagePath: 'pages/about/about',
         text: '关于',
         icon: 'i-carbon-code',
         iconType: 'unocss',

src/components/fg-tabbar/fg-tabbar.vue

@@ -40,7 +40,7 @@
 import { tabBar } from '@/pages.json'
 import { tabbarStore } from './tabbar'
 
-/** tabbarList 里面的 path 必须和 pages.config.ts 的页面路径一致 */
+/** tabbarList 里面的 path 从 pages.config.ts 得到 */
 const tabbarList = tabBar.list.map((item) => ({ ...item, path: `/${item.pagePath}` }))
 
 function selectTabBar({ value: index }: { value: number }) {

src/components/fg-tabbar/tabbar.ts

@@ -1,20 +1,6 @@
-export const tabbarList = [
-  {
-    path: '/pages/index/about',
-    icon: 'home',
-    isWotIcon: true,
-    title: '首页',
-  },
-  {
-    path: '/pages/index/index',
-    icon: 'i-carbon-user-avatar',
-    isWotIcon: false,
-    title: '我的',
-  },
-]
-
 /**
  * tabbar 状态，增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
+ * 使用reactive简单状态，而不是 pinia 全局状态
  */
 export const tabbarStore = reactive({
   curIdx: uni.getStorageSync('app-tabbar-index') || 0,

src/layouts/tabbar.vue

@@ -1,4 +1,19 @@
 <template>
-  <slot />
+  <wd-config-provider :themeVars="themeVars">
-  <fg-tabbar />
+    <slot />
+    <!-- 注意下面，多了一个自定义tabbar -->
+    <fg-tabbar />
+    <wd-toast />
+    <wd-message-box />
+  </wd-config-provider>
 </template>
+
+<script lang="ts" setup>
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+const themeVars: ConfigProviderThemeVars = {
+  // colorTheme: 'red',
+  // buttonPrimaryBgColor: '#07c160',
+  // buttonPrimaryColor: '#07c160',
+}
+</script>

src/pages.json

@@ -31,7 +31,7 @@
         "iconType": "wot"
       },
       {
-        "pagePath": "pages/index/about",
+        "pagePath": "pages/about/about",
         "text": "关于",
         "icon": "i-carbon-code",
         "iconType": "unocss"
@@ -57,13 +57,7 @@
     {
       "path": "pages/about/about",
       "type": "page",
-      "style": {
+      "layout": "tabbar",
-        "navigationBarTitleText": "关于"
-      }
-    },
-    {
-      "path": "pages/index/about",
-      "type": "page",
       "style": {
         "navigationBarTitleText": "关于"
       }

src/pages/about/about.vue

@@ -1,5 +1,6 @@
 <route lang="json5">
 {
+  layout: 'tabbar',
   style: {
     navigationBarTitleText: '关于',
   },

src/pages/index/about.vue

@@ -1,60 +0,0 @@
-<route lang="json5">
-{
-  style: {
-    navigationBarTitleText: '关于',
-  },
-}
-</route>
-
-<template>
-  <view
-    class="bg-white overflow-hidden pt-2 px-4"
-    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
-  >
-    <view class="text-center text-3xl mt-4 test-css">关于页面</view>
-    <view class="text-center text-3xl mt-8">
-      鸽友们好，我是
-      <text class="text-red-500">菲鸽</text>
-    </view>
-    <view class="text-center mt-8 text-#fff">
-      <wd-button type="primary" @click="gotoPage('request')">去请求页</wd-button>
-      <wd-button type="primary" @click="gotoPage('request2')" custom-class="ml-2">
-        去请求页2 (状态一体)
-      </wd-button>
-    </view>
-
-    <view class="text-center mt-8 text-#fff">
-      <wd-button type="primary" @click="gotoPage('upload')">上传demo</wd-button>
-      <wd-button type="primary" @click="gotoPage('upload2')" custom-class="ml-2">
-        上传demo2(状态一体)
-      </wd-button>
-    </view>
-    <view class="text-center mt-8">
-      <text class="mr-2">iconfont:</text>
-      <view class="inline-flex gap-2 text-red">
-        <view class="iconfont icon-my" />
-        <view class="iconfont icon-chat" />
-        <view class="iconfont icon-package" />
-      </view>
-    </view>
-  </view>
-  <fg-tabbar />
-</template>
-
-<script lang="ts" setup>
-// 获取屏幕边界到安全区域距离
-const { safeAreaInsets } = uni.getSystemInfoSync()
-
-const gotoPage = (page: string) => {
-  uni.navigateTo({
-    url: `/pages/index/${page}`,
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-.test-css {
-  // mt-4=>1rem=>16px;
-  margin-top: 16px;
-}
-</style>

src/types/uni-pages.d.ts

@@ -6,13 +6,12 @@
 interface NavigateToOptions {
   url: "/pages/index/index" |
        "/pages/about/about" |
-       "/pages/index/about" |
        "/pages/my/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 
 interface SwitchTabOptions {
-  url: "/pages/index/index" | "/pages/index/about" | "/pages/my/index"
+  url: "/pages/index/index" | "/pages/about/about" | "/pages/my/index"
 }
 
 type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;