From 8392b5d63a37fb1f79a35fc5743f8e7ceac8a062 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Thu, 21 May 2026 15:55:10 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E9=A6=96=E9=A1=B5-=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AF=BC=E8=88=AA-=E6=9B=B4=E5=A4=9A-=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=BC=B9=E6=A1=86=E6=B7=BB=E5=8A=A0=E8=BF=87=E5=BA=A6?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TabBar.vue           | 67 ++++++++++++++++++----
 src/components/dashboard/NavMenuEditor.vue |  3 +-
 src/components/dashboard/NavMenuMore.vue   |  5 +-
 src/components/dashboard/NavSection.vue    | 31 +++++++++-
 4 files changed, 88 insertions(+), 18 deletions(-)

diff --git a/src/components/common/TabBar.vue b/src/components/common/TabBar.vue
index d2d9c2c..cdf6417 100644
--- a/src/components/common/TabBar.vue
+++ b/src/components/common/TabBar.vue
@@ -1,24 +1,28 @@
 <template>
-  <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>
+  <view class="tabbar-shell" :class="{ 'is-hidden': !tabbarVisible }">
+    <up-tabbar :value="activeIndex" :activeColor="activeColor" :inactiveColor="inactiveColor" :safeAreaInsetBottom="true"
+      :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>
+          <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>
+  </view>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import useUserStore from '@/store/modules/user'
 import { storeToRefs } from 'pinia'
 import { getDynamicTabMenus } 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)
@@ -27,6 +31,7 @@ const inactiveColor = '#666666'
 const activeColor = '#1a3a5c'
 
 const activeIndex = ref(0)
+const tabbarVisible = ref(true)
 
 const homeIcon = '/static/images/tabbar/home.png'
 const homeSelectedIcon = '/static/images/tabbar/home_.png'
@@ -86,8 +91,17 @@ const tabList = computed(() => {
 
 onMounted(() => {
   activeIndex.value = getCurrentActiveIndex()
+  uni.$on(TABBAR_VISIBILITY_EVENT, handleTabbarVisibility)
+})
+
+onUnmounted(() => {
+  uni.$off(TABBAR_VISIBILITY_EVENT, handleTabbarVisibility)
 })
 
+function handleTabbarVisibility(visible = true) {
+  tabbarVisible.value = visible !== false
+}
+
 function handleChange(index) {
   if (activeIndex.value === index) return
   activeIndex.value = index
@@ -105,6 +119,35 @@ watch(() => useUserStore().menus, () => {
 </script>
 
 <style lang="scss" scoped>
+.tabbar-shell {
+  position: relative;
+
+  :deep(.u-tabbar) {
+    position: fixed !important;
+    left: 0;
+    right: 0;
+    bottom: 0 !important;
+    width: 100%;
+    z-index: 1000 !important;
+    transform: translateY(0);
+    opacity: 1;
+    will-change: transform, opacity;
+    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
+  }
+
+  :deep(.u-tabbar__content) {
+    z-index: 1000 !important;
+  }
+
+  &.is-hidden {
+    :deep(.u-tabbar) {
+      transform: translateY(calc(100% + 24rpx + env(safe-area-inset-bottom)));
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+
 .tabbar-icon {
   width: 48rpx;
   height: 48rpx;
diff --git a/src/components/dashboard/NavMenuEditor.vue b/src/components/dashboard/NavMenuEditor.vue
index 20e8f0c..c87ab11 100644
--- a/src/components/dashboard/NavMenuEditor.vue
+++ b/src/components/dashboard/NavMenuEditor.vue
@@ -209,10 +209,9 @@ watch(() => props.visible, async (val) => {
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  z-index: 1100;
   display: flex;
   align-items: flex-end;
-  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 34e46dd..e960c93 100644
--- a/src/components/dashboard/NavMenuMore.vue
+++ b/src/components/dashboard/NavMenuMore.vue
@@ -122,10 +122,9 @@ function handleClose() {
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  z-index: 1100;
   display: flex;
   align-items: flex-end;
-  padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
   transition: opacity 0.3s ease;
 
@@ -192,7 +191,7 @@ function handleClose() {
 
 .more-content {
   flex: 1;
-  padding: 24rpx;
+  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
 }
 
 .empty-state {
diff --git a/src/components/dashboard/NavSection.vue b/src/components/dashboard/NavSection.vue
index 3ff1842..62d54e2 100644
--- a/src/components/dashboard/NavSection.vue
+++ b/src/components/dashboard/NavSection.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { getUserNavMenuList } from '@/api/system/userNavMenu'
 import { getNavPermissionInfo } from '@/api/login'
@@ -41,6 +41,7 @@ import NavMenuMore from './NavMenuMore.vue'
 import NavMenuEditor from './NavMenuEditor.vue'
 
 const { t } = useI18n()
+const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change'
 
 function hexToRgba(hex, alpha) {
   const value = String(hex || '').replace('#', '')
@@ -103,6 +104,9 @@ const moreNavList = computed(() => {
   return configuredMenuList.value
 })
 
+const modalVisible = computed(() => showMoreModal.value || showEditModal.value)
+let tabbarRestoreTimer = null
+
 async function loadConfiguredMenus() {
   try {
     const menuRes = await getNavPermissionInfo()
@@ -160,6 +164,31 @@ function handleUpdate() {
 onMounted(() => {
   loadConfiguredMenus()
 })
+
+onUnmounted(() => {
+  if (tabbarRestoreTimer) {
+    clearTimeout(tabbarRestoreTimer)
+    tabbarRestoreTimer = null
+  }
+  uni.$emit(TABBAR_VISIBILITY_EVENT, true)
+})
+
+watch(modalVisible, (visible) => {
+  if (tabbarRestoreTimer) {
+    clearTimeout(tabbarRestoreTimer)
+    tabbarRestoreTimer = null
+  }
+
+  if (visible) {
+    uni.$emit(TABBAR_VISIBILITY_EVENT, false)
+    return
+  }
+
+  tabbarRestoreTimer = setTimeout(() => {
+    uni.$emit(TABBAR_VISIBILITY_EVENT, true)
+    tabbarRestoreTimer = null
+  }, 300)
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>