From 2f06a3ac2ab13505210b5f98ec65a080c876a360 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Sat, 29 Mar 2025 13:20:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Menu/index.vue       |  7 +++--
 src/layouts/components/Menu/item.vue        | 32 ++++++++++-----------
 src/layouts/components/Menu/sub.vue         |  6 ++--
 src/layouts/components/SubSidebar/index.vue |  2 +-
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/layouts/components/Menu/index.vue b/src/layouts/components/Menu/index.vue
index 974600f6..615cc863 100644
--- a/src/layouts/components/Menu/index.vue
+++ b/src/layouts/components/Menu/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { MenuInjection, MenuProps } from './types'
+import { cn } from '@/utils'
 import Item from './item.vue'
 import SubMenu from './sub.vue'
 import { rootMenuInjectionKey } from './types'
@@ -158,10 +159,10 @@ provide(rootMenuInjectionKey, reactive({
 
 <template>
   <div
-    class="h-full w-full flex flex-col of-hidden transition-all-300" :class="{
-      'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
+    :class="cn('h-full w-full flex flex-col of-hidden transition-all-300', {
+      '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)">
       <template v-if="item.meta?.menu !== false">
diff --git a/src/layouts/components/Menu/item.vue b/src/layouts/components/Menu/item.vue
index b83bbeec..de89d9e4 100644
--- a/src/layouts/components/Menu/item.vue
+++ b/src/layouts/components/Menu/item.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SubMenuItemProps } from './types'
+import { cn } from '@/utils'
 import { rootMenuInjectionKey } from './types'
 
 defineOptions({
@@ -36,11 +37,11 @@ defineExpose({
 
 <template>
   <div
-    ref="itemRef" class="menu-item relative transition-all" :class="{
+    ref="itemRef" :class="cn('menu-item relative transition-all', {
       '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) ?? ''">
       <FaTooltip :disabled="!rootMenu.isMenuPopup || level !== 0 || subMenu" :text="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" :side="rootMenu.props.mode === 'vertical' ? 'right' : 'bottom'" class="h-full w-full">
@@ -51,41 +52,40 @@ defineExpose({
               target: item.meta?.link ? '_blank' : '_self',
               class: 'no-underline',
             }),
-          }" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg 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="{
+          }" :class="cn('group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg 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)])', {
             '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="{
+            'px-3': rootMenu.isMenuPopup && level === 0,
+          })" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
             ...(!subMenu && {
               click: navigate,
             }),
           }"
         >
           <div
-            class="inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]" :class="{
+            :class="cn('inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]', {
               'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
-              'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+              'gap-1': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
               'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-            }" :style="{
+            })" :style="{
               '--indent-level': !rootMenu.isMenuPopup ? props.level ?? 0 : 0,
             }"
           >
             <FaIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" class="menu-item-container-icon size-5 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="{
+              v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" :class="cn('w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width', {
                 'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
                 'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-              }"
+              })"
             >
               {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
             </span>
           </div>
           <i
-            v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]" :class="[
-              expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]',
-              rootMenu.isMenuPopup && level === 0 && 'opacity-0',
-              rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
-            ]"
+            v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" :class="cn('relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]', {
+              [expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]']: true,
+              'opacity-0': rootMenu.isMenuPopup && level === 0,
+              '-rotate-90 -top-[1.5px]': rootMenu.isMenuPopup && level !== 0,
+            })"
           />
         </component>
       </FaTooltip>
diff --git a/src/layouts/components/Menu/sub.vue b/src/layouts/components/Menu/sub.vue
index c87d0164..d29be37b 100644
--- a/src/layouts/components/Menu/sub.vue
+++ b/src/layouts/components/Menu/sub.vue
@@ -191,12 +191,12 @@ function handleMouseleave() {
   <Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
     <Transition v-bind="transitionClass" v-on="transitionEvent">
       <FaScrollArea
-        v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" class="sub-menu static h-[calc-size(auto,size)] rounded-lg" :class="{
+        v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg', {
           'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
-          'border shadow-xl fixed! z-3000 w-[200px]': rootMenu.isMenuPopup,
+          'border shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
           '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)">
           <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index 94881494..55ac3be9 100755
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -62,7 +62,7 @@ watch(() => menuStore.actived, (val, oldVal) => {
             <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" :class="{
-                  '-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
+                  '-mt-2': !((settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse) || ['head', 'single'].includes(settingsStore.settings.menu.mode)),
                 }"
               />
             </div>