From b47617226e758f3948d21b7881092376fef7cf45 Mon Sep 17 00:00:00 2001
From: xiangshu233 <xiangshu233@outlook.com>
Date: Tue, 24 Mar 2026 22:12:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(navbar):=20:bug:=20fix(navbar):=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=A1=86=E5=B0=BA=E5=AF=B8=E4=BB=A5=E9=81=BF=E5=85=8D=E4=B8=8E?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=E7=BA=BF=E9=87=8D=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/FloatingNavBar.vue | 11 ++++++-----
 src/layout/index.vue                     |  1 +
 src/styles/common.less                   |  1 -
 src/views/example/index.vue              |  2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/FloatingNavBar.vue b/src/layout/components/FloatingNavBar.vue
index 28328fb..2f036ec 100644
--- a/src/layout/components/FloatingNavBar.vue
+++ b/src/layout/components/FloatingNavBar.vue
@@ -127,6 +127,7 @@ const toolbarColumns = computed(() => Math.max(1, navItems.value.length + (props
 const toolbarCssVars = computed(() => ({
   '--accent-color': designStore.appTheme,
   '--accent-soft-color': `${designStore.appTheme}33`,
+  '--toolbar-max-width': toolbarColumns.value >= 5 ? '430px' : '340px',
   'gridTemplateColumns': `repeat(${toolbarColumns.value}, 1fr)`,
 }))
 
@@ -291,7 +292,7 @@ onBeforeUnmount(() => {
 .floating-toolbar {
   pointer-events: auto;
   position: relative;
-  width: min(92vw, 340px);
+  width: min(94vw, var(--toolbar-max-width));
   height: 62px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -352,9 +353,9 @@ onBeforeUnmount(() => {
   position: absolute;
   left: 0;
   top: 50%;
-  width: 70px;
-  height: 44px;
-  margin-top: -22px;
+  width: 62px;
+  height: 38px;
+  margin-top: -19px;
   transition: transform 0.28s ease;
   pointer-events: none;
 }
@@ -411,7 +412,7 @@ onBeforeUnmount(() => {
   display: grid;
   place-items: center;
   color: rgba(255, 255, 255, 0.45);
-  font-size: 22px;
+  font-size: 20px;
   cursor: pointer;
   transition: color 0.25s ease;
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index d8d690d..29e7c1d 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -42,6 +42,7 @@ const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
 
 const tabbarItems = [
   { label: 'Home', path: '/dashboard/index', icon: 'i-ph:house-line' },
+  { label: 'Example', path: '/example/index', icon: 'i-ph:flask' },
   { label: 'Search', path: '/message/index', icon: 'i-ph:magnifying-glass' },
   { label: 'User', path: '/my/index', icon: 'i-ph:user-circle' },
 ]
diff --git a/src/styles/common.less b/src/styles/common.less
index fcdbd22..7f00fd9 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -114,7 +114,6 @@ html.dark {
   }
 
   .van-cell-group--inset {
-    margin: 16px;
     border-radius: 14px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.08);
diff --git a/src/views/example/index.vue b/src/views/example/index.vue
index 27de71f..0b14a7d 100644
--- a/src/views/example/index.vue
+++ b/src/views/example/index.vue
@@ -4,7 +4,7 @@
       <van-cell center title="🌓 暗黑模式">
         <template #right-icon>
           <i inline-block align-middle i="dark:carbon-moon carbon-sun" />
-          <span class="ml-2">{{ isDark ? 'Dark' : 'Light' }}</span>
+          <span class="mx-2">{{ isDark ? 'Dark' : 'Light' }}</span>
           <van-switch v-model="darkSwitch" size="22" />
         </template>
       </van-cell>