refactor: 导航菜单尺寸调整

src/assets/styles/globals.scss

@@ -17,6 +17,8 @@
 // 明暗模式 CSS 变量
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
+  --g-box-shadow-color: rgb(0 0 0 / 12%);
+
   &::view-transition-old(root),
   &::view-transition-new(root) {
     mix-blend-mode: normal;
@@ -31,9 +33,9 @@
     z-index: 9999;
   }
 
-  --g-box-shadow-color: rgb(0 0 0 / 12%);
-
   &.dark {
+    --g-box-shadow-color: rgb(0 0 0 / 72%);
+
     &::view-transition-old(root) {
       z-index: 9999;
     }
@@ -41,8 +43,6 @@
     &::view-transition-new(root) {
       z-index: 1;
     }
-
-    --g-box-shadow-color: rgb(0 0 0 / 72%);
   }
 }
 

src/layouts/components/Header/index.vue

@@ -35,7 +35,7 @@ function handlerMouserScroll(event: WheelEvent) {
           <div class="menu h-full flex of-hidden transition-all">
             <template v-for="(item, index) in menuStore.allMenus" :key="index">
               <div
-                class="menu-item relative transition-all" :class="{
+                class="menu-item relative mx-1 py-2 transition-all" :class="{
                   active: index === menuStore.actived,
                 }"
               >
@@ -45,7 +45,7 @@ function handlerMouserScroll(event: WheelEvent) {
                   }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                 >
                   <div class="inline-flex flex-1 items-center justify-center gap-1">
-                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
+                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
                     <span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
                       {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
                     </span>
@@ -137,7 +137,7 @@ header {
             }
 
             .menu-item-container-icon {
-              font-size: 24px !important;
+              font-size: 20px !important;
             }
           }
 

src/layouts/components/MainSidebar/index.vue

@@ -17,28 +17,30 @@ const { switchTo } = useMenu()
   <Transition name="main-sidebar">
     <div v-if="settingsStore.settings.menu.mode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.mode !== 'single')" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
-      <!-- 侧边栏模式（含主导航） -->
-      <div class="menu w-full flex flex-col of-hidden transition-all">
-        <template v-for="(item, index) in menuStore.allMenus" :key="index">
-          <div
-            class="menu-item relative transition-all" :class="{
-              active: index === menuStore.actived,
-            }"
-          >
+      <div class="menu">
+        <!-- 侧边栏模式（含主导航） -->
+        <div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
+          <template v-for="(item, index) in menuStore.allMenus" :key="index">
             <div
-              v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
-                'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
-              }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
+              class="menu-item relative px-2 py-1 transition-all" :class="{
+                active: index === menuStore.actived,
+              }"
             >
-              <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
-                <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
-                <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
-                  {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
-                </span>
+              <div
+                v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
+                  'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
+                }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
+              >
+                <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
+                  <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
+                  <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
+                    {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
     </div>
   </Transition>
@@ -86,7 +88,7 @@ const { switchTo } = useMenu()
         }
 
         .menu-item-container-icon {
-          font-size: 24px !important;
+          font-size: 20px !important;
         }
       }
 

src/layouts/components/Menu/index.vue

@@ -164,6 +164,7 @@ provide(rootMenuInjectionKey, reactive({
   <div
     class="h-full w-full flex flex-col of-hidden transition-all" :class="{
       'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
+      'py-1': props.mode === 'vertical',
     }"
   >
     <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">

src/layouts/components/Menu/item.vue

@@ -44,7 +44,9 @@ defineExpose({
 <template>
   <div
     ref="itemRef" class="menu-item relative transition-all" :class="{
-      active: isItemActive,
+      'active': isItemActive,
+      'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
+      'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
     }"
   >
     <router-link v-slot="{ href, navigate }" custom :to="uniqueKey.at(-1) ?? ''">
@@ -56,7 +58,7 @@ defineExpose({
               target: item.meta?.link ? '_blank' : '_self',
               class: 'no-underline',
             }),
-          }" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
+          }" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
             'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
             'px-3!': rootMenu.isMenuPopup && level === 0,
           }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
@@ -72,7 +74,7 @@ defineExpose({
               'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
             }" :style="indentStyle"
           >
-            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
+            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="18" class="menu-item-container-icon transition-transform group-hover-scale-120" />
             <span
               v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
               :class="{

src/layouts/components/Menu/sub.vue

@@ -188,7 +188,8 @@ function handleMouseleave() {
         v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu" :class="{
           'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
           'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
-          'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
+          'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
+          'py-1': rootMenu.isMenuPopup,
         }"
       >
         <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">

src/layouts/components/SubSidebar/index.vue

@@ -79,7 +79,11 @@ onMounted(() => {
         <TransitionGroup name="sub-sidebar">
           <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
             <div v-show="mainIndex === menuStore.actived">
-              <Menu :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" />
+              <Menu
+                :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
+                  '-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
+                }"
+              />
             </div>
           </template>
         </TransitionGroup>