From 1846e783a3704f47eaeedf9f402e7bd2e85ca94b Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 19 May 2026 11:34:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=E6=9B=B4=E6=8D=A2uview-plus?=
 =?UTF-8?q?=20tabbar=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/BottomActionBar.vue  |   2 +-
 src/components/common/TabBar.vue           | 107 +++++++--------------
 src/components/dashboard/BannerSection.vue |   2 +-
 src/components/dashboard/NavMenuEditor.vue |  14 ++-
 src/components/dashboard/NavMenuMore.vue   |   2 +-
 src/pages/index.vue                        |   4 +-
 6 files changed, 48 insertions(+), 83 deletions(-)

diff --git a/src/components/common/BottomActionBar.vue b/src/components/common/BottomActionBar.vue
index fc1d48c..e1df4fd 100644
--- a/src/components/common/BottomActionBar.vue
+++ b/src/components/common/BottomActionBar.vue
@@ -51,7 +51,7 @@ function handleClick(btn, index) {
   background: #ffffff;
   box-shadow: 0 -6rpx 24rpx rgba(0, 0, 0, 0.08);
   padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
-  z-index: 99;
+  z-index: 90;
 }
 
 .action-row {
diff --git a/src/components/common/TabBar.vue b/src/components/common/TabBar.vue
index 03fd01c..f289771 100644
--- a/src/components/common/TabBar.vue
+++ b/src/components/common/TabBar.vue
@@ -1,24 +1,29 @@
 <template>
-  <view class="custom-tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
-    <view class="tabbar-inner">
-      <view
-        v-for="(item, index) in tabList"
-        :key="index"
-        class="tabbar-item"
-        :class="{ active: activeIndex === index }"
-        @click="handleTabClick(item, index)"
-      >
-        <image
-          :src="activeIndex === index ? item.selectedIcon : item.icon"
-          class="tabbar-icon"
-          mode="widthFix"
-        />
-        <text class="tabbar-text" :style="{ color: activeIndex === index ? activeColor : color }">
-          {{ item.text }}
-        </text>
-      </view>
-    </view>
-  </view>
+  <up-tabbar
+    :value="activeIndex"
+    :activeColor="activeColor"
+    :inactiveColor="inactiveColor"
+    :safeAreaInsetBottom="true"
+    :fixed="true"
+    :placeholder="true"
+    :border="false"
+    @change="handleChange"
+    zIndex="100"
+  >
+    <up-tabbar-item
+      v-for="(item, index) in tabList"
+      :key="index"
+      :text="item.text"
+      :name="index"
+    >
+      <template #active-icon>
+        <image :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
+      </template>
+      <template #inactive-icon>
+        <image :src="item.icon" class="tabbar-icon" mode="widthFix" />
+      </template>
+    </up-tabbar-item>
+  </up-tabbar>
 </template>
 
 <script setup>
@@ -32,7 +37,7 @@ const { t } = useI18n()
 const userStore = useUserStore()
 const { menus } = storeToRefs(userStore)
 
-const color = '#666666'
+const inactiveColor = '#666666'
 const activeColor = '#1a3a5c'
 
 const activeIndex = ref(0)
@@ -93,28 +98,19 @@ const tabList = computed(() => {
   ]
 })
 
-const systemInfo = uni.getSystemInfoSync()
-const safeAreaBottom = computed(() => {
-  const model = (systemInfo.model || '').toLowerCase()
-  const hasNotch = model.includes('iphone x') || model.includes('iphone 1') || (systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.bottom > 20)
-  return hasNotch ? 0 : 0
-})
-const safeAreaInsetBottom = ref(0)
-
 onMounted(() => {
   activeIndex.value = getCurrentActiveIndex()
-  const insets = systemInfo.safeAreaInsets
-  if (insets && insets.bottom > 0) {
-    safeAreaInsetBottom.value = insets.bottom
-  }
 })
 
-function handleTabClick(item, index) {
+function handleChange(index) {
   if (activeIndex.value === index) return
   activeIndex.value = index
-  uni.reLaunch({
-    url: item.path
-  })
+  const item = tabList.value[index]
+  if (item) {
+    uni.reLaunch({
+      url: item.path
+    })
+  }
 }
 
 watch(() => useUserStore().menus, () => {
@@ -123,43 +119,8 @@ watch(() => useUserStore().menus, () => {
 </script>
 
 <style lang="scss" scoped>
-.custom-tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  background-color: #ffffff;
-  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
-}
-
-.tabbar-inner {
-  display: flex;
-  align-items: center;
-  height: 100rpx;
-}
-
-.tabbar-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &:active {
-    opacity: 0.7;
-  }
-}
-
 .tabbar-icon {
   width: 48rpx;
   height: 48rpx;
-  margin-bottom: 4rpx;
-}
-
-.tabbar-text {
-  font-size: 20rpx;
-  line-height: 1.2;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/dashboard/BannerSection.vue b/src/components/dashboard/BannerSection.vue
index 3e5dd8e..769dab4 100644
--- a/src/components/dashboard/BannerSection.vue
+++ b/src/components/dashboard/BannerSection.vue
@@ -188,7 +188,7 @@ defineExpose({ loadTodoList })
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 100;
+  z-index: 10;
 }
 
 .bell-icon {
diff --git a/src/components/dashboard/NavMenuEditor.vue b/src/components/dashboard/NavMenuEditor.vue
index e250c81..20e8f0c 100644
--- a/src/components/dashboard/NavMenuEditor.vue
+++ b/src/components/dashboard/NavMenuEditor.vue
@@ -14,8 +14,10 @@
           <view class="nav-grid">
             <view v-for="item in configuredMenuList" :key="item.id" class="nav-item is-selected">
               <view class="nav-icon" :style="{ background: '#e1e6eb' }">
-                <uni-icons v-if="isUniIcon(item.icon)" :type="getUniIconName(item.icon)" size="28" :color="item.accentColor" />
-                <u-icon v-else-if="isUviewIcon(item.icon)" :name="getUviewIconName(item.icon)" size="28" :color="item.accentColor"></u-icon>
+                <uni-icons v-if="isUniIcon(item.icon)" :type="getUniIconName(item.icon)" size="28"
+                  :color="item.accentColor" />
+                <u-icon v-else-if="isUviewIcon(item.icon)" :name="getUviewIconName(item.icon)" size="28"
+                  :color="item.accentColor"></u-icon>
                 <text v-else class="nav-icon-text">{{ item.symbol }}</text>
               </view>
               <text class="nav-text">{{ item.displayName }}</text>
@@ -34,8 +36,10 @@
             <view v-for="item in unconfiguredMenuList" :key="item.id" class="nav-item"
               @click="handleUnconfiguredClick(item)">
               <view class="nav-icon nav-icon-disabled" :style="{ background: '#e1e6eb' }">
-                <uni-icons v-if="isUniIcon(item.icon)" :type="getUniIconName(item.icon)" size="28" :color="item.accentColor" />
-                <u-icon v-else-if="isUviewIcon(item.icon)" :name="getUviewIconName(item.icon)" size="28" :color="item.accentColor"></u-icon>
+                <uni-icons v-if="isUniIcon(item.icon)" :type="getUniIconName(item.icon)" size="28"
+                  :color="item.accentColor" />
+                <u-icon v-else-if="isUviewIcon(item.icon)" :name="getUviewIconName(item.icon)" size="28"
+                  :color="item.accentColor"></u-icon>
                 <text v-else class="nav-icon-text">{{ item.symbol }}</text>
               </view>
               <text class="nav-text nav-text-disabled">{{ item.displayName }}</text>
@@ -208,7 +212,7 @@ watch(() => props.visible, async (val) => {
   z-index: 1000;
   display: flex;
   align-items: flex-end;
-  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
   transition: opacity 0.3s ease;
 
diff --git a/src/components/dashboard/NavMenuMore.vue b/src/components/dashboard/NavMenuMore.vue
index 3551348..34e46dd 100644
--- a/src/components/dashboard/NavMenuMore.vue
+++ b/src/components/dashboard/NavMenuMore.vue
@@ -125,7 +125,7 @@ function handleClose() {
   z-index: 1000;
   display: flex;
   align-items: flex-end;
-  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
   transition: opacity 0.3s ease;
 
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c739a8e..3c3847d 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -73,7 +73,7 @@ function goTop() {
   padding: 0 24rpx 24rpx;
   margin-top: -40rpx;
   position: relative;
-  z-index: 5;
+  z-index: 1;
 }
 
 .go-top-btn {
@@ -88,7 +88,7 @@ function goTop() {
   align-items: center;
   justify-content: center;
   box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
-  z-index: 10;
+  z-index: 50;
 
   &:active {
     transform: scale(0.95);