Auto merge base into spa

更新manifest.json和.env文件中的应用ID为'__UNI__D1E5001'以匹配新配置
注释掉vite.config.ts中app平台的copyNativeRes插件调用以优化构建流程

pages.config.ts

@@ -17,29 +17,5 @@ export default defineUniPages({
         'z-paging/components/z-paging$1/z-paging$1.vue',
     },
   },
-  // 如果不需要tabBar，推荐使用 spa 模板。（pnpm create xxx -t spa）
+  // 如果不需要tabBar，可以注释掉这个配置，或者直接删除
-  tabBar: {
-    color: '#999999',
-    selectedColor: '#018d71',
-    backgroundColor: '#F8F8F8',
-    borderStyle: 'black',
-    height: '50px',
-    fontSize: '10px',
-    iconWidth: '24px',
-    spacing: '3px',
-    list: [
-      {
-        iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
-        pagePath: 'pages/index/index',
-        text: '首页',
-      },
-      {
-        iconPath: 'static/tabbar/example.png',
-        selectedIconPath: 'static/tabbar/exampleHL.png',
-        pagePath: 'pages/about/about',
-        text: '关于',
-      },
-    ],
-  },
 })

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>

src/pages.json

@@ -14,35 +14,11 @@
       "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
     }
   },
-  "tabBar": {
-    "color": "#999999",
-    "selectedColor": "#018d71",
-    "backgroundColor": "#F8F8F8",
-    "borderStyle": "black",
-    "height": "50px",
-    "fontSize": "10px",
-    "iconWidth": "24px",
-    "spacing": "3px",
-    "list": [
-      {
-        "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
-        "pagePath": "pages/index/index",
-        "text": "首页"
-      },
-      {
-        "iconPath": "static/tabbar/example.png",
-        "selectedIconPath": "static/tabbar/exampleHL.png",
-        "pagePath": "pages/about/about",
-        "text": "关于"
-      }
-    ]
-  },
-  "__esModule": true,
   "pages": [
     {
       "path": "pages/index/index",
       "type": "home",
+      "layout": "tabbar",
       "style": {
         "navigationStyle": "custom",
         "navigationBarTitleText": "首页"
@@ -51,9 +27,9 @@
     {
       "path": "pages/about/about",
       "type": "page",
+      "layout": "tabbar",
       "style": {
-        "navigationBarTitleText": "关于",
+        "navigationBarTitleText": "关于"
-        "navigationStyle": "custom"
       }
     }
   ],

src/pages/about/about.vue

@@ -1,15 +1,16 @@
 <route lang="json5">
 {
+  layout: 'tabbar',
   style: {
     navigationBarTitleText: '关于',
-    navigationStyle: 'custom', // 开启自定义导航栏
+    // navigationStyle: 'custom', // 开启自定义导航栏
   },
 }
 </route>
 
 <template>
   <view>
-    <fg-navbar>关于</fg-navbar>
+    <!-- <fg-navbar>关于</fg-navbar> -->
     <view
       class="bg-white overflow-hidden pt-2 px-4"
       :style="{ marginTop: safeAreaInsets?.top + 'px' }"

src/pages/index/index.vue

@@ -1,6 +1,7 @@
 <!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
 <route lang="json5" type="home">
 {
+  layout: 'tabbar',
   style: {
     navigationStyle: 'custom',
     navigationBarTitleText: '首页',
@@ -25,7 +26,7 @@
     </view>
     <view class="text-center mt-4">
       模板分支是：
-      <text class="text-green-500">base</text>
+      <text class="text-green-500">spa</text>
     </view>
   </view>
 </template>

src/store/index.ts

@@ -15,3 +15,4 @@ export default store
 
 // 模块统一导出
 export * from './user'
+export * from './tabbar'

src/store/tabbar.ts

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+
+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,
+        route: '/pages/index/index',
+        title: '首页',
+        icon: 'home',
+      },
+      {
+        name: 'about',
+        value: null,
+        active: false,
+        route: '/pages/about/about',
+        title: '关于',
+        icon: 'user',
+      },
+    ],
+  }),
+  getters: {
+    getTabbarItems: (state) => {
+      return state.tabbarItems
+    },
+    getActive: (state) => {
+      const item = state.tabbarItems.find((item) => item.active)
+      return item || state.tabbarItems[0]
+    },
+    getTabbarItemValue: (state) => {
+      return (name: string) => {
+        const item = state.tabbarItems.find((item) => item.name === name)
+        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) {
+      const tabbarItem = this.tabbarItems.find((item) => item.name === name)
+      if (tabbarItem) {
+        tabbarItem.value = value
+      }
+    },
+    setTabbarItemActive(name: string) {
+      this.tabbarItems.forEach((item) => {
+        if (item.name === name) {
+          item.active = true
+        } else {
+          item.active = false
+        }
+      })
+    },
+  },
+})