feat: implement custom mini-program tab bar

README.md

@@ -36,6 +36,7 @@ pnpm lint
 ## 目录结构
 - `src/pages`：按页面域拆分，每个页面保持 `index.vue + composables + styles`
 - `src/components`：复用组件目录，统一使用 `src/components/<kebab-name>/index.vue`
+- `mini/custom-tab-bar`：微信小程序原生 `custom-tab-bar` 源文件，会在构建时复制到 `dist/custom-tab-bar`
 - `src/stores`：`app`、`cart`
 - `src/services`：请求封装与 Mini API 领域接口
 - `src/shared`：类型、常量、mock 数据、格式化函数

config/index.ts

@@ -35,7 +35,12 @@ export default defineConfig<'vite'>(async (merge) => {
       __TENANT_CODE__: JSON.stringify(tenantCode)
     },
     copy: {
-      patterns: [],
+      patterns: [
+        {
+          from: 'mini/custom-tab-bar',
+          to: 'dist/custom-tab-bar'
+        }
+      ],
       options: {}
     },
     framework: 'vue3',

mini/custom-tab-bar/index.js

@@ -0,0 +1,49 @@
+Component({
+  data: {
+    selected: 0,
+    list: [
+      {
+        pagePath: 'pages/home/index',
+        text: '首页',
+        iconPath: '../assets/tabbar/home.png',
+        selectedIconPath: '../assets/tabbar/home-active.png'
+      },
+      {
+        pagePath: 'pages/menu/index',
+        text: '点餐',
+        iconPath: '../assets/tabbar/menu.png',
+        selectedIconPath: '../assets/tabbar/menu-active.png'
+      },
+      {
+        pagePath: 'pages/orders/index',
+        text: '订单',
+        iconPath: '../assets/tabbar/orders.png',
+        selectedIconPath: '../assets/tabbar/orders-active.png'
+      },
+      {
+        pagePath: 'pages/profile/index',
+        text: '我的',
+        iconPath: '../assets/tabbar/profile.png',
+        selectedIconPath: '../assets/tabbar/profile-active.png'
+      }
+    ]
+  },
+  methods: {
+    setCurrent(index) {
+      this.setData({ selected: index })
+    },
+    switchTab(event) {
+      const index = Number(event.currentTarget.dataset.index)
+      const currentItem = this.data.list[this.data.selected]
+      const targetItem = this.data.list[index]
+      const currentPath = currentItem ? currentItem.pagePath : ''
+
+      if (!targetItem || currentPath === targetItem.pagePath) {
+        return
+      }
+
+      this.setData({ selected: index })
+      wx.switchTab({ url: `/${targetItem.pagePath}` })
+    }
+  }
+})

mini/custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

mini/custom-tab-bar/index.wxml

@@ -0,0 +1,20 @@
+<view class="custom-tab-bar">
+  <view
+    wx:for="{{list}}"
+    wx:key="pagePath"
+    class="custom-tab-bar__item"
+    data-index="{{index}}"
+    bindtap="switchTab"
+  >
+    <image
+      class="custom-tab-bar__icon"
+      src="{{selected === index ? item.selectedIconPath : item.iconPath}}"
+      mode="aspectFit"
+    />
+    <text
+      class="custom-tab-bar__label {{selected === index ? 'custom-tab-bar__label--active' : ''}}"
+    >
+      {{item.text}}
+    </text>
+  </view>
+</view>

mini/custom-tab-bar/index.wxss

@@ -0,0 +1,42 @@
+.custom-tab-bar {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 14px;
+  padding-bottom: calc(6px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(6px + env(safe-area-inset-bottom));
+  min-height: 72px;
+  background: #ffffff;
+  border-top: 1rpx solid #e5e7eb;
+  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.custom-tab-bar__item {
+  flex: 1;
+  min-height: 44px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.custom-tab-bar__icon {
+  width: 26px;
+  height: 26px;
+  display: block;
+  flex-shrink: 0;
+  margin-bottom: -3px;
+}
+
+.custom-tab-bar__label {
+  display: block;
+  margin-top: 0;
+  font-size: 12px;
+  line-height: 1;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.custom-tab-bar__label--active {
+  color: #16a34a;
+  font-weight: 600;
+}

src/components/tab-bar/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <view class="tab-bar">
-    <view
-      v-for="(item, idx) in tabs"
-      :key="item.pagePath"
-      class="tab-bar__item"
-      @tap="onSwitch(idx)"
-    >
-      <view class="tab-bar__icon">
-        <image
-          class="tab-bar__icon-img"
-          :src="current === idx ? item.activeIcon : item.icon"
-          mode="aspectFit"
-        />
-      </view>
-      <text
-        class="tab-bar__label"
-        :class="{ 'tab-bar__label--active': current === idx }"
-      >
-        {{ item.text }}
-      </text>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import Taro from '@tarojs/taro'
-
-import homeIcon from '@/assets/tabbar/home.png'
-import homeActiveIcon from '@/assets/tabbar/home-active.png'
-import menuIcon from '@/assets/tabbar/menu.png'
-import menuActiveIcon from '@/assets/tabbar/menu-active.png'
-import ordersIcon from '@/assets/tabbar/orders.png'
-import ordersActiveIcon from '@/assets/tabbar/orders-active.png'
-import profileIcon from '@/assets/tabbar/profile.png'
-import profileActiveIcon from '@/assets/tabbar/profile-active.png'
-
-defineProps<{ current: number }>()
-
-const tabs = [
-  { pagePath: '/pages/home/index', text: '首页', icon: homeIcon, activeIcon: homeActiveIcon },
-  { pagePath: '/pages/menu/index', text: '点餐', icon: menuIcon, activeIcon: menuActiveIcon },
-  { pagePath: '/pages/orders/index', text: '订单', icon: ordersIcon, activeIcon: ordersActiveIcon },
-  { pagePath: '/pages/profile/index', text: '我的', icon: profileIcon, activeIcon: profileActiveIcon }
-]
-
-function onSwitch(idx: number) {
-  Taro.switchTab({ url: tabs[idx].pagePath })
-}
-</script>
-
-<style lang="scss">
-.tab-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100px;
-  padding-bottom: env(safe-area-inset-bottom);
-  background-color: #fff;
-  border-top: 1rpx solid #e5e7eb;
-  z-index: 999;
-
-  &__item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    padding: 8px 0;
-  }
-
-  &__icon {
-    width: 44px;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-  }
-
-  &__icon-img {
-    width: 44px;
-    height: 44px;
-  }
-
-  &__label {
-    font-size: 20px;
-    color: #64748b;
-    margin-top: 2px;
-    line-height: 1.2;
-
-    &--active {
-      color: #16a34a;
-    }
-  }
-}
-</style>

src/pages/home/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '首页',
+  usingComponents: {}
 })

src/pages/home/index.vue

@@ -134,12 +134,6 @@
       </view>
     </view>
 
-    <!-- Bottom Spacer (TabBar safe area) -->
-    <view class="hp__spacer" />
-
-    <!-- Custom TabBar -->
-    <TabBar :current="0" />
-
     <!-- Floating Cart FAB -->
     <view v-if="cartCount > 0" class="hp__fab" @click="goMenu">
       <view class="hp__fab-ico">
@@ -154,9 +148,11 @@
 
 <script setup lang="ts">
 import { Search as IconSearch, Cart2 as IconCart, Scan2 as IconScan } from '@nutui/icons-vue-taro'
-import TabBar from '@/components/tab-bar/index.vue'
+import { useTabBarSelection } from '@/utils/useTabBarSelection'
 import { useHomePage } from './composables/useHomePage'
 
+useTabBarSelection(0)
+
 const {
   cartCount,
   categoryCards,

src/pages/home/styles/base.scss

@@ -226,8 +226,3 @@
   flex-shrink: 0;
 }
 
-// ─── Bottom Spacer ───
-.hp__spacer {
-  height: 80px;
-  flex-shrink: 0;
-}

src/pages/menu/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '点餐'
+  navigationBarTitleText: '点餐',
+  usingComponents: {}
 })

src/pages/menu/index.vue

@@ -102,9 +102,6 @@
       @change-qty="(key, delta) => cartStore.changeQuantity(key, delta)"
     />
 
-    <!-- Custom TabBar -->
-    <TabBar :current="1" />
-
     <!-- Spec Popup -->
     <SpecPopup
       v-if="detailVisible && activeDetail"
@@ -129,9 +126,11 @@
 import ProductCard from '@/components/product-card/index.vue'
 import CartDrawer from '@/components/cart-drawer/index.vue'
 import SpecPopup from '@/components/spec-popup/index.vue'
-import TabBar from '@/components/tab-bar/index.vue'
+import { useTabBarSelection } from '@/utils/useTabBarSelection'
 import { useMenuPage } from './composables/useMenuPage'
 
+useTabBarSelection(1)
+
 const {
   activeDetail,
   appStore,

src/pages/orders/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '订单'
+  navigationBarTitleText: '订单',
+  usingComponents: {}
 })

src/pages/orders/index.vue

@@ -62,17 +62,17 @@
       </view>
     </view>
 
-    <!-- Custom TabBar -->
-    <TabBar :current="2" />
   </view>
 </template>
 
 <script setup lang="ts">
 import { Button as NutButton, Empty, Price, Tag } from '@nutui/nutui-taro'
 import PageHero from '@/components/page-hero/index.vue'
-import TabBar from '@/components/tab-bar/index.vue'
+import { useTabBarSelection } from '@/utils/useTabBarSelection'
 import { useOrdersPage } from './composables/useOrdersPage'
 
+useTabBarSelection(2)
+
 const {
   activeTab,
   goMenu,

src/pages/profile/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '我的'
+  navigationBarTitleText: '我的',
+  usingComponents: {}
 })

src/pages/profile/index.vue

@@ -45,17 +45,17 @@
       </view>
     </view>
 
-    <!-- Custom TabBar -->
-    <TabBar :current="3" />
   </view>
 </template>
 
 <script setup lang="ts">
 import { Button as NutButton } from '@nutui/nutui-taro'
 import PageHero from '@/components/page-hero/index.vue'
-import TabBar from '@/components/tab-bar/index.vue'
+import { useTabBarSelection } from '@/utils/useTabBarSelection'
 import { useProfilePage } from './composables/useProfilePage'
 
+useTabBarSelection(3)
+
 const {
   customerStore,
   draftName,

src/utils/useTabBarSelection.ts

@@ -0,0 +1,35 @@
+import Taro, { useDidShow } from '@tarojs/taro'
+import { onMounted } from 'vue'
+
+type CustomTabBarInstance = {
+  setCurrent: (index: number) => void
+}
+
+function syncTabBarSelection(index: number, retries = 6) {
+  const page = Taro.getCurrentInstance().page
+
+  if (!page) {
+    return
+  }
+
+  const tabBar = Taro.getTabBar<CustomTabBarInstance>(page)
+
+  if (tabBar?.setCurrent) {
+    tabBar.setCurrent(index)
+    return
+  }
+
+  if (retries > 0) {
+    setTimeout(() => syncTabBarSelection(index, retries - 1), 16)
+  }
+}
+
+export function useTabBarSelection(index: number) {
+  onMounted(() => {
+    syncTabBarSelection(index)
+  })
+
+  useDidShow(() => {
+    syncTabBarSelection(index)
+  })
+}