feat: 更新底部导航栏配置和样式

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/tabbar/config.ts

@@ -42,75 +42,12 @@ export const nativeTabbarList: NativeTabBarItem[] = [
 // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
 // 如果需要配置鼓包，需要在 'tabbar/store.ts' 里面设置，最后在 `tabbar/index.vue` 里面更改鼓包的图片
 export const customTabbarList: CustomTabBarItem[] = [
-  // {
-  //   text: '首页',
-  //   pagePath: 'pages/index/index',
-  //   // 注意 unocss 图标需要如下处理：（二选一）
-  //   // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
-  //   // 2）配置到 unocss.config.ts 的 safelist 中
-  //   iconType: 'unocss',
-  //   icon: 'i-carbon-home',
-  //   // badge: 'dot',
-  // },
-  // {
-  //   pagePath: 'pages/me/me',
-  //   text: '我的',
-  //   // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
-  //   // 2）配置到 unocss.config.ts 的 safelist 中
-  //   iconType: 'unocss',
-  //   icon: 'i-carbon-user',
-  //   // badge: 10,
-  // },
-  // 其他类型演示
-  // 1、uiLib
-  // {
-  //   pagePath: 'pages/index/index',
-  //   text: '首页',
-  //   iconType: 'uiLib',
-  //   icon: 'home',
-  // },
-  // 2、iconfont
-  // {
-  //   pagePath: 'pages/index/index',
-  //   text: '首页',
-  //   // 注意 iconfont 图标需要额外加上 'iconfont'，如下
-  //   iconType: 'iconfont',
-  //   icon: 'iconfont icon-my',
-  // },
-  // 3、image
-  // {
-  //   pagePath: 'pages/index/index',
-  //   text: '首页',
-  //   // 使用 ‘image’时，需要配置 icon + iconActive 2张图片
-  //   iconType: 'image',
-  //   icon: '/static/tabbar/home.png',
-  //   iconActive: '/static/tabbar/homeHL.png',
-  // },
-  // add by 芋艿：图标可到 https://icon-sets.iconify.design/carbon/ 选择。另外，需要在 uno.config.ts 的 safelist 中添加图标类名
   {
     text: '工作台',
     pagePath: 'pages/index/index',
     iconType: 'unocss',
     icon: 'i-carbon-home',
   },
-  {
-    text: '审批',
-    pagePath: 'pages/bpm/index',
-    iconType: 'unocss',
-    icon: 'i-carbon-document',
-  },
-  {
-    text: '通讯录',
-    pagePath: 'pages/contact/index',
-    iconType: 'unocss',
-    icon: 'i-carbon-user-avatar',
-  },
-  {
-    text: '消息',
-    pagePath: 'pages/message/index',
-    iconType: 'unocss',
-    icon: 'i-carbon-chat',
-  },
   {
     text: '我的',
     pagePath: 'pages/user/index',
@@ -156,7 +93,7 @@ const _tabbar: TabBar = {
   // 只有微信小程序支持 custom。App 和 H5 不生效
   custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE,
   color: '#999999',
-  selectedColor: '#018d71',
+  selectedColor: '#f97316',
   backgroundColor: '#F8F8F8',
   borderStyle: 'black',
   height: '50px',

src/tabbar/index.vue

@@ -16,10 +16,7 @@ defineOptions({
  * 中间的鼓包tabbarItem的点击事件
  */
 function handleClickBulge() {
-  uni.showToast({
-    title: '点击了中间的鼓包tabbarItem',
-    icon: 'none',
-  })
+  uni.navigateTo({ url: '/pages/scan/index' })
 }
 
 function handleClick(index: number) {
@@ -70,8 +67,8 @@ onMounted(() => {
   })
 })
 // #endif
-const activeColor = 'var(--wot-color-theme, #1890ff)'
-const inactiveColor = '#666'
+const activeColor = 'var(--wot-color-theme, #f97316)'
+const inactiveColor = '#9CA3AF'
 function getColorByIndex(index: number) {
   return tabbarStore.curIdx === index ? activeColor : inactiveColor
 }
@@ -86,21 +83,24 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
 </script>
 
 <template>
-  <view v-if="customTabbarEnable" class="h-50px pb-safe">
+  <view v-if="customTabbarEnable" class="h-60px pb-safe">
     <view class="border-and-fixed bg-white" @touchmove.stop.prevent>
-      <view class="h-50px flex items-center">
+      <view class="h-60px flex items-center pt-4px">
         <view
           v-for="(item, index) in tabbarList" :key="index"
           class="flex flex-1 flex-col items-center justify-center"
           :style="{ color: getColorByIndex(index) }"
           @click="handleClick(index)"
         >
-          <view v-if="item.isBulge" class="relative">
-            <!-- 中间一个鼓包tabbarItem的处理 -->
+          <view v-if="item.isBulge" class="bulge-wrap">
+            <!-- 中间扫码巡检鼓包按钮 -->
             <view class="bulge">
-              <!-- TODO 2/2: 中间鼓包tabbarItem配置：通常是一个图片，或者icon，点击触发业务逻辑 -->
-              <!-- 常见的是：扫描按钮、发布按钮、更多按钮等 -->
-              <image class="mt-6rpx h-200rpx w-200rpx" src="/static/tabbar/scan.png" />
+              <view class="bulge-inner">
+                <view class="i-carbon-scan text-22px text-white" />
+              </view>
+            </view>
+            <view class="bulge-label">
+              扫码巡检
             </view>
           </view>
           <view v-else class="relative px-3 text-center">
@@ -117,7 +117,7 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
             <template v-if="item.iconType === 'image'">
               <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
             </template>
-            <view class="mt-2px text-12px">
+            <view class="mt-2px text-22rpx font-600">
               {{ item.text }}
             </view>
             <!-- 角标显示 -->
@@ -146,29 +146,48 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
+  z-index: 100;
 
-  border-top: 1px solid #eee;
+  border-top: 2rpx solid #fff7ed;
   box-sizing: border-box;
 }
 // 中间鼓包的样式
+.bulge-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
 .bulge {
   position: absolute;
   top: -20px;
   left: 50%;
-  transform-origin: top center;
-  transform: translateX(-50%) scale(0.5) translateY(-33%);
+  transform: translateX(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 250rpx;
-  height: 250rpx;
+  width: 56px;
+  height: 56px;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #fefefe;
+  background: linear-gradient(135deg, #fb923c, #f97316);
+  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 
   &:active {
-    // opacity: 0.8;
+    transform: translateX(-50%) scale(1.06);
+    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
   }
 }
+
+.bulge-label {
+  margin-top: 38px;
+  text-align: center;
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #9ca3af;
+}
 </style>

src/tabbar/store.ts

@@ -8,7 +8,7 @@ import { useTokenStore } from '@/store/token'
 import { tabbarList as _tabbarList, customTabbarEnable, selectedTabbarStrategy, TABBAR_STRATEGY_MAP } from './config'
 
 // TODO 1/2: 中间的鼓包tabbarItem的开关
-const BULGE_ENABLE = false
+const BULGE_ENABLE = true
 
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
 const tabbarList = reactive<CustomTabBarItem[]>(_tabbarList.map(item => ({