From 207d04920584382331c8f6b3044cc6f5c8239797 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 26 May 2026 09:45:03 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9Atabbar=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TabBar.vue | 100 +++++++++----------------------
 1 file changed, 29 insertions(+), 71 deletions(-)

diff --git a/src/components/common/TabBar.vue b/src/components/common/TabBar.vue
index 24cb2bd..802b947 100644
--- a/src/components/common/TabBar.vue
+++ b/src/components/common/TabBar.vue
@@ -4,11 +4,13 @@
       :fixed="true" :placeholder="true" :border="false" @change="handleChange" zIndex="1000">
       <up-tabbar-item v-for="(item, index) in tabList" :key="index" :text="item.text" :name="index">
         <template #active-icon>
-          <uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="24" :color="activeColor" />
+          <uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="activeColor" />
+          <u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="activeColor"></u-icon>
           <image v-else :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
         </template>
         <template #inactive-icon>
-          <uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="24" :color="inactiveColor" />
+          <uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="inactiveColor" />
+          <u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="inactiveColor"></u-icon>
           <image v-else :src="item.icon" class="tabbar-icon" mode="widthFix" />
         </template>
       </up-tabbar-item>
@@ -21,44 +23,18 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import useUserStore from '@/store/modules/user'
 import { storeToRefs } from 'pinia'
 import { getTabBarMenus } from '@/utils/permissionMenu'
-import { useI18n } from 'vue-i18n'
 
 const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change'
 
-const { t } = useI18n()
 const userStore = useUserStore()
 const { menus } = storeToRefs(userStore)
 
 const inactiveColor = '#666666'
-const activeColor = '#1a3a5c'
+const activeColor = '#409eff'
 
 const activeIndex = ref(0)
 const tabbarVisible = ref(true)
 
-const homeIcon = '/static/images/tabbar/home.png'
-const homeSelectedIcon = '/static/images/tabbar/home_.png'
-const reportIcon = '/static/images/tabbar/report.png'
-const reportSelectedIcon = '/static/images/tabbar/report_.png'
-const workIcon = '/static/images/tabbar/work.png'
-const workSelectedIcon = '/static/images/tabbar/work_.png'
-const mineIcon = '/static/images/tabbar/mine.png'
-const mineSelectedIcon = '/static/images/tabbar/mine_.png'
-
-const dynamicTabIconList = [
-  {
-    icon: homeIcon,
-    selectedIcon: homeSelectedIcon
-  },
-  {
-    icon: reportIcon,
-    selectedIcon: reportSelectedIcon
-  },
-  {
-    icon: workIcon,
-    selectedIcon: workSelectedIcon
-  }
-]
-
 function normalizeRoute(path = '') {
   return String(path || '').trim().replace(/^\/+/, '')
 }
@@ -67,34 +43,19 @@ function isUniIcon(icon) {
   return String(icon || '').startsWith('uni-icons:')
 }
 
+function isUviewIcon(icon) {
+  return String(icon || '').startsWith('uview-plus:')
+}
+
 function getUniIconName(icon) {
   return String(icon || '').replace(/^uni-icons:/, '').trim()
 }
 
-function resolveTabIcons(path, index) {
-  const route = normalizeRoute(path)
-  if (route === 'pages/index') {
-    return {
-      icon: homeIcon,
-      selectedIcon: homeSelectedIcon
-    }
-  }
-  if (route === 'pages/report') {
-    return {
-      icon: reportIcon,
-      selectedIcon: reportSelectedIcon
-    }
-  }
-  if (route === 'pages/work') {
-    return {
-      icon: workIcon,
-      selectedIcon: workSelectedIcon
-    }
-  }
-  return dynamicTabIconList[index % dynamicTabIconList.length]
+function getUviewIconName(icon) {
+  return String(icon || '').replace(/^uview-plus:/, '').trim()
 }
 
-function resolveTabIconMeta(menu, index) {
+function resolveTabIconMeta(menu) {
   if (isUniIcon(menu?.icon)) {
     return {
       iconType: 'uni-icons',
@@ -102,12 +63,18 @@ function resolveTabIconMeta(menu, index) {
     }
   }
 
-  const icons = resolveTabIcons(menu?.path, index)
+  if (isUviewIcon(menu?.icon)) {
+    return {
+      iconType: 'uview-plus',
+      iconName: getUviewIconName(menu.icon)
+    }
+  }
+
   return {
-    iconType: 'image',
+    iconType: '',
     iconName: '',
-    icon: icons.icon,
-    selectedIcon: icons.selectedIcon
+    icon: '',
+    selectedIcon: ''
   }
 }
 
@@ -122,11 +89,11 @@ function getCurrentActiveIndex() {
 }
 
 const tabList = computed(() => {
-  const dynamicTabList = getTabBarMenus(menus.value)
-    .map((menu, index) => {
-      const iconMeta = resolveTabIconMeta(menu, index)
+  return getTabBarMenus(menus.value)
+    .map((menu) => {
+      const iconMeta = resolveTabIconMeta(menu)
       return {
-        text: String(menu.name || menu.enName || '').trim() || `菜单${index + 1}`,
+        text: String(menu.name || menu.enName || '').trim(),
         icon: iconMeta.icon,
         selectedIcon: iconMeta.selectedIcon,
         iconType: iconMeta.iconType,
@@ -134,18 +101,6 @@ const tabList = computed(() => {
         path: menu.path
       }
     })
-
-  return [
-    ...dynamicTabList,
-    {
-      text: t('nav.mine'),
-      icon: mineIcon,
-      selectedIcon: mineSelectedIcon,
-      iconType: 'image',
-      iconName: '',
-      path: '/pages/mine'
-    }
-  ]
 })
 
 onMounted(() => {
@@ -217,4 +172,7 @@ watch(() => useUserStore().menus, () => {
 .u-tabbar {
   flex: none !important;
 }
+.u-tabbar-item__text{
+  margin-top: 0 !important;
+}
 </style>