feat: implement custom mini-program tab bar

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;
+}