refactor!: 配置项 menu.menuMode 变更为 menu.mode

Author: hooray

src/App.vue

@@ -11,7 +11,7 @@ const settingsStore = useSettingsStore()
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
   let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (['head', 'single'].includes(settingsStore.settings.menu.menuMode)) {
+  if (['head', 'single'].includes(settingsStore.settings.menu.mode)) {
     actualWidth = 0
   }
   return `${actualWidth}px`

src/settings.default.ts

@@ -6,7 +6,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   },
   menu: {
     baseOn: 'frontend',
-    menuMode: 'side',
+    mode: 'side',
     switchMainMenuAndOpenWindow: false,
     subMenuUniqueOpened: true,
     subMenuCollapse: false,

src/store/modules/menu.ts

@@ -73,7 +73,7 @@ const useMenuStore = defineStore(
     const allMenus = computed(() => {
       let returnMenus: Menu.recordMainRaw[]
       const settingsStore = useSettingsStore()
-      if (settingsStore.settings.menu.menuMode === 'single') {
+      if (settingsStore.settings.menu.mode === 'single') {
         returnMenus = [{ children: [] }]
         menus.value.forEach((item) => {
           returnMenus[0].children.push(...item.children)

src/store/modules/settings.ts

@@ -38,7 +38,7 @@ export const useSettingsStore = defineStore(
       }
     }
 
-    watch(() => settings.value.menu.menuMode, (val) => {
+    watch(() => settings.value.menu.mode, (val) => {
       document.body.setAttribute('data-menu-mode', val)
     }, {
       immediate: true,

src/types/global.d.ts

@@ -33,7 +33,7 @@ declare namespace Settings {
      * @可选值 `'head'` 顶部模式
      * @可选值 `'single'` 侧边栏模式（无主导航）
      */
-    menuMode?: 'side' | 'head' | 'single'
+    mode?: 'side' | 'head' | 'single'
     /**
      * 切换主导航同时打开窗口
      * @默认值 `false`

src/views/components/AppSetting/index.vue

@@ -15,7 +15,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)
   }
@@ -97,17 +97,17 @@ function handleCopy() {
     </div>
     <div 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>
@@ -122,7 +122,7 @@ function handleCopy() {
           <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
-      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndOpenWindow" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndOpenWindow" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
     </div>
     <div class="setting-item">
       <div class="label">
@@ -149,7 +149,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">
       工具栏

src/views/components/Header/index.vue

@@ -27,7 +27,7 @@ function handlerMouserScroll(event: WheelEvent) {
 
 <template>
   <Transition name="header">
-    <header v-if="['head'].includes(settingsStore.settings.menu.menuMode)">
+    <header v-if="['head'].includes(settingsStore.settings.menu.mode)">
       <div class="header-container">
         <Logo class="title" />
         <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">

src/views/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>

src/views/components/MainSidebar/index.vue

@@ -15,7 +15,7 @@ const { switchTo } = useMenu()
 
 <template>
   <Transition name="main-sidebar">
-    <div v-if="['side'].includes(settingsStore.settings.menu.menuMode)" class="main-sidebar-container">
+    <div v-if="['side'].includes(settingsStore.settings.menu.mode)" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
       <!-- 侧边栏模式（含主导航） -->
       <div class="menu w-full flex flex-col of-hidden transition-all">

src/views/components/SubSidebar/index.vue

@@ -40,13 +40,13 @@ onMounted(() => {
 
 <template>
   <div
-    v-if="['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)" class="sub-sidebar-container" :class="{
+    v-if="['side', 'head', 'single'].includes(settingsStore.settings.menu.mode)" class="sub-sidebar-container" :class="{
       'is-collapse': settingsStore.settings.menu.subMenuCollapse,
     }"
   >
     <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