From a5f75f9d72d74e26dddc985888ee87269d1fc59f Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Mon, 24 Jun 2024 17:16:12 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=20`menu.menuMode`?=
 =?UTF-8?q?=20=E5=8F=98=E6=9B=B4=E4=B8=BA=20`menu.mode`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                     |  2 +-
 src/layouts/components/AppSetting/index.vue     | 14 +++++++-------
 src/layouts/components/Header/index.vue         |  2 +-
 src/layouts/components/HotkeysIntro/index.vue   |  2 +-
 src/layouts/components/MainSidebar/index.vue    |  2 +-
 src/layouts/components/SubSidebar/index.vue     |  4 ++--
 src/layouts/components/Topbar/Toolbar/index.vue |  2 +-
 src/layouts/components/Topbar/index.vue         |  2 +-
 src/router/index.ts                             |  2 +-
 src/settings.default.ts                         |  2 +-
 src/store/modules/menu.ts                       |  2 +-
 src/store/modules/settings.ts                   |  2 +-
 src/types/global.d.ts                           |  2 +-
 src/views/feature_example/menuswitch.vue        |  2 +-
 14 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 01efc353..054a1123 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@ const isAuth = computed(() => {
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
   let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (settingsStore.settings.menu.menuMode === 'single' || (settingsStore.settings.menu.menuMode === 'head' && settingsStore.mode !== 'mobile')) {
+  if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
     actualWidth = 0
   }
   return `${actualWidth}px`
diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index 761122bf..7eee5bb5 100755
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -17,7 +17,7 @@ const menuStore = useMenuStore()
 
 const isShow = ref(false)
 
-watch(() => settingsStore.settings.menu.menuMode, (value) => {
+watch(() => settingsStore.settings.menu.mode, (value) => {
   if (value === 'single') {
     menuStore.setActived(0)
   }
@@ -103,17 +103,17 @@ function handleCopy() {
     </div>
     <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
       <HTooltip text="侧边栏模式 (含主导航)" placement="bottom" :delay="500">
-        <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
+        <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.mode === 'side' }" @click="settingsStore.settings.menu.mode = 'side'">
           <div class="mode-container" />
         </div>
       </HTooltip>
       <HTooltip text="顶部模式" placement="bottom" :delay="500">
-        <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
+        <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.mode === 'head' }" @click="settingsStore.settings.menu.mode = 'head'">
           <div class="mode-container" />
         </div>
       </HTooltip>
       <HTooltip text="侧边栏模式 (不含主导航)" placement="bottom" :delay="500">
-        <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
+        <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.mode === 'single' }" @click="settingsStore.settings.menu.mode = 'single'">
           <div class="mode-container" />
         </div>
       </HTooltip>
@@ -128,7 +128,7 @@ function handleCopy() {
           <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
-      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
     </div>
     <div class="setting-item">
       <div class="label">
@@ -155,7 +155,7 @@ function handleCopy() {
       <div class="label">
         是否启用快捷键
       </div>
-      <HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+      <HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
     </div>
     <div class="divider">
       顶栏
@@ -380,7 +380,7 @@ function handleCopy() {
     }
 
     .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+      --at-apply: bg-ui-primary/20 border-width-1.5 border-dashed border-ui-primary;
 
       &::before {
         --at-apply: content-empty absolute w-full h-full;
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 2bda9898..0f636bd5 100755
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -27,7 +27,7 @@ function handlerMouserScroll(event: WheelEvent) {
 
 <template>
   <Transition name="header">
-    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
+    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
       <div class="header-container">
         <Logo class="title" />
         <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
diff --git a/src/layouts/components/HotkeysIntro/index.vue b/src/layouts/components/HotkeysIntro/index.vue
index e2e2243b..5a48a2e0 100755
--- a/src/layouts/components/HotkeysIntro/index.vue
+++ b/src/layouts/components/HotkeysIntro/index.vue
@@ -38,7 +38,7 @@ onMounted(() => {
             </li>
           </ul>
         </div>
-        <div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)">
+        <div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)">
           <h2 class="m-0 text-lg font-bold">
             主导航
           </h2>
diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue
index 90c6c9b1..e4a9e5ce 100755
--- a/src/layouts/components/MainSidebar/index.vue
+++ b/src/layouts/components/MainSidebar/index.vue
@@ -15,7 +15,7 @@ const { switchTo } = useMenu()
 
 <template>
   <Transition name="main-sidebar">
-    <div v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
+    <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">
diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index e5978bae..09657a91 100755
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -47,8 +47,8 @@ onMounted(() => {
     }"
   >
     <Logo
-      :show-logo="settingsStore.settings.menu.menuMode === 'single'" class="sidebar-logo" :class="{
-        'sidebar-logo-bg': settingsStore.settings.menu.menuMode === 'single',
+      :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
+        'sidebar-logo-bg': settingsStore.settings.menu.mode === 'single',
       }"
     />
     <div
diff --git a/src/layouts/components/Topbar/Toolbar/index.vue b/src/layouts/components/Topbar/Toolbar/index.vue
index ba2a55ae..1214de5a 100755
--- a/src/layouts/components/Topbar/Toolbar/index.vue
+++ b/src/layouts/components/Topbar/Toolbar/index.vue
@@ -15,7 +15,7 @@ const settingsStore = useSettingsStore()
     <div class="h-full flex items-center of-hidden pl-2 pr-16" style="mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);">
       <LeftSide />
     </div>
-    <div v-show="['side', 'single'].includes(settingsStore.settings.menu.menuMode)" class="h-full flex items-center px-2">
+    <div v-show="['side', 'single'].includes(settingsStore.settings.menu.mode)" class="h-full flex items-center px-2">
       <RightSide />
     </div>
   </div>
diff --git a/src/layouts/components/Topbar/index.vue b/src/layouts/components/Topbar/index.vue
index cbb17f17..352c6b05 100755
--- a/src/layouts/components/Topbar/index.vue
+++ b/src/layouts/components/Topbar/index.vue
@@ -11,7 +11,7 @@ const settingsStore = useSettingsStore()
 
 const enableToolbar = computed(() => {
   return !(
-    settingsStore.settings.menu.menuMode === 'head' && (
+    settingsStore.settings.menu.mode === 'head' && (
       !settingsStore.settings.toolbar.breadcrumb || settingsStore.settings.app.routeBaseOn === 'filesystem'
     )
   )
diff --git a/src/router/index.ts b/src/router/index.ts
index 65d6306b..7b9522ab 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -30,7 +30,7 @@ router.beforeEach(async (to, from, next) => {
     // 是否已根据权限动态生成并注册路由
     if (routeStore.isGenerate) {
       // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
-      settingsStore.settings.menu.menuMode !== 'single' && menuStore.setActived(to.path)
+      settingsStore.settings.menu.mode !== 'single' && menuStore.setActived(to.path)
       // 如果已登录状态下，进入登录页会强制跳转到主页
       if (to.name === 'login') {
         next({
diff --git a/src/settings.default.ts b/src/settings.default.ts
index 53410600..6596971b 100755
--- a/src/settings.default.ts
+++ b/src/settings.default.ts
@@ -20,7 +20,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   },
   menu: {
     baseOn: 'frontend',
-    menuMode: 'side',
+    mode: 'side',
     switchMainMenuAndPageJump: false,
     subMenuUniqueOpened: true,
     subMenuCollapse: false,
diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts
index 448f9426..0132c752 100755
--- a/src/store/modules/menu.ts
+++ b/src/store/modules/menu.ts
@@ -23,7 +23,7 @@ const useMenuStore = defineStore(
     function convertRouteToMenu(routes: Route.recordMainRaw[]): Menu.recordMainRaw[] {
       const returnMenus: Menu.recordMainRaw[] = []
       routes.forEach((item) => {
-        if (settingsStore.settings.menu.menuMode === 'single') {
+        if (settingsStore.settings.menu.mode === 'single') {
           returnMenus.length === 0 && returnMenus.push({
             meta: {},
             children: [],
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 62370b11..d1b7c04e 100755
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -40,7 +40,7 @@ const useSettingsStore = defineStore(
       }
     }
 
-    watch(() => settings.value.menu.menuMode, (val) => {
+    watch(() => settings.value.menu.mode, (val) => {
       document.body.setAttribute('data-menu-mode', val)
     }, {
       immediate: true,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index fb0314a7..1f334bbb 100755
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -76,7 +76,7 @@ declare namespace Settings {
      * @可选值 `'head'` 顶部模式
      * @可选值 `'single'` 侧边栏模式（无主导航）
      */
-    menuMode?: 'side' | 'head' | 'single'
+    mode?: 'side' | 'head' | 'single'
     /**
      * 切换主导航是否跳转页面
      * @默认值 `false`
diff --git a/src/views/feature_example/menuswitch.vue b/src/views/feature_example/menuswitch.vue
index 1edadba6..4f4f786a 100755
--- a/src/views/feature_example/menuswitch.vue
+++ b/src/views/feature_example/menuswitch.vue
@@ -22,7 +22,7 @@ function switchTo() {
     <PageHeader title="主导航切换" content="可切换并激活指定的主导航" />
     <PageMain>
       <p>该特性只有在导航模式为 side 和 head 时生效。</p>
-      <ElButton :disabled="!['side', 'head'].includes(settingsStore.settings.menu.menuMode)" @click="switchTo">
+      <ElButton :disabled="!['side', 'head'].includes(settingsStore.settings.menu.mode)" @click="switchTo">
         切换下一个
       </ElButton>
     </PageMain>