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

fantastic-admin · Jun 24, 2024 · 57fcd27 · 57fcd27
1 parent 3c8b488
commit 57fcd27
Show file tree

Hide file tree

Showing 13 changed files with 20 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -76,7 +76,7 @@ declare namespace Settings {
      * @可选值 `'head'` 顶部模式
      * @可选值 `'single'` 侧边栏模式（无主导航）
      */
-    menuMode?: 'side' | 'head' | 'single'
+    mode?: 'side' | 'head' | 'single'
     /**
      * 切换主导航是否跳转页面
      * @默认值 `false`