fix(navbar): 🐛 fix(navbar): 调整底部导航选中框尺寸以避免与分割线重叠

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;
 }

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' },
 ]

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);

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>