fix: 设置菜单折叠宽度

src/components/UserInfo/components/SystemSet/index.d.ts → src/components/SystemSet/index.d.ts

@@ -3,6 +3,6 @@ export type ListType = {
   type: string
   name: string
   desc: string
-  value: boolean
-  tip: string
+  value: any
+  tip?: string
 }

src/components/UserInfo/components/SystemSet/index.vue → src/components/SystemSet/index.vue

@@ -17,7 +17,7 @@
           </n-space>
           <n-space>
             <n-text class="item-right">{{ item.desc }}</n-text>
-            <n-tooltip trigger="hover">
+            <n-tooltip v-if="item.tip" trigger="hover">
               <template #trigger>
                 <n-icon size="21">
                   <HelpOutlineIcon />
@@ -39,6 +39,7 @@
 import { reactive } from 'vue'
 import { ListType } from './index.d'
 import { useLangStore } from '@/store/modules/langStore/langStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { icon } from '@/plugins'
 
 const { HelpOutlineIcon } = icon.ionicons5
@@ -50,6 +51,7 @@ defineProps({
 })
 
 const langStore = useLangStore()
+const designStore = useDesignStore()
 
 const list = reactive<ListType[]>([
   {
@@ -58,7 +60,14 @@ const list = reactive<ListType[]>([
     type: 'switch',
     name: '切换语言',
     desc: '切换语言是否重新加载页面',
-    tip: '不重载可能会导致部分区域语言切换失败'
+    tip: '不重载有较低可能性导致部分区域语言切换失败'
+  },
+  {
+    key: 'aollapsed',
+    value: designStore.asideAllCollapsed,
+    type: 'switch',
+    name: '菜单折叠',
+    desc: '左侧菜单是否全部折叠',
   }
 ])
 
@@ -71,8 +80,8 @@ const handleChange = (e: Event, item: ListType) => {
     case 'lang':
       langStore.changeReload(item.value)
       break
-
-    default:
+    case 'aollapsed':
+      designStore.changeAsideAllCollapsed()
       break
   }
 }

src/components/UserInfo/index.vue

@@ -27,7 +27,7 @@ import { h, ref } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout, renderLang } from '@/utils'
-import { SystemSet } from './components/SystemSet/index'
+import { SystemSet } from '@/components/SystemSet/index'
 
 import { icon } from '@/plugins'
 const {

src/i18n/index.ts

@@ -10,7 +10,7 @@ import en from './en/index'
 const langStorage: LangStateType = getLocalStorage(StorageEnum.GO_LANG_STORE)
 
 const i18n = createI18n({
-  locale: langStorage.lang || lang,
+  locale: langStorage?.lang || lang,
   globalInjection: true,
   messages: {
     zh: zh,

src/settings/designSetting.ts

@@ -55,12 +55,11 @@ export const maskClosable = false
 // 侧边栏宽度
 export const asideWidth = '270'
 
-// 侧边栏是否支持全持全部收缩
-export const asideAllShrink = true
+// 侧边栏折叠后的宽度，支持全部折叠会覆盖为 0
+export const asideCollapsedWidth = '60'
 
-// 侧边栏缩小后的宽度
-// 建议 0 或者 60，已经适配好了
-export const asideCollapsedWidth = '0'
+// 侧边栏是否支持全持全部折叠
+export const asideAllCollapsed = true
 
 // 修改边框圆角
 export const borderRadius = '6px'

src/store/modules/designStore/designStore.d.ts

@@ -10,5 +10,5 @@ export interface DesignStateType {
   //系统内置风格
   appThemeList: string[]
   // 侧边栏是否全收缩
-  asideAllShrink: boolean
+  asideAllCollapsed: boolean
 }

src/store/modules/designStore/designStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { store } from '@/store'
-import { theme, asideAllShrink } from '@/settings/designSetting'
+import { theme, asideAllCollapsed, asideCollapsedWidth } from '@/settings/designSetting'
 import { DesignStateType } from './designStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -25,7 +25,7 @@ export const useDesignStore = defineStore({
       // 颜色列表
       appThemeList,
       // 侧边栏
-      asideAllShrink
+      asideAllCollapsed
     },
   getters: {
     getDarkTheme(e): boolean {
@@ -36,6 +36,9 @@ export const useDesignStore = defineStore({
     },
     getAppThemeList(): string[] {
       return this.appThemeList
+    },
+    getAsideCollapsedWidth(): string {
+      return this.asideAllCollapsed ? '0' : asideCollapsedWidth
     }
   },
   actions: {
@@ -44,8 +47,8 @@ export const useDesignStore = defineStore({
       this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
       setLocalStorage(GO_DESIGN_STORE, this.$state)
     },
-    changeAsideAllShrink(): void {
-      this.asideAllShrink = !this.asideAllShrink
+    changeAsideAllCollapsed(): void {
+      this.asideAllCollapsed = !this.asideAllCollapsed
       setLocalStorage(GO_DESIGN_STORE, this.$state)
     }
   }

src/views/project/layout/components/Sider/index.vue

@@ -6,7 +6,7 @@
     show-trigger="bar"
     :collapsed="collapsed"
     :native-scrollbar="false"
-    :collapsed-width="asideCollapsedWidth"
+    :collapsed-width="getAsideCollapsedWidth"
     :width="asideWidth"
     @collapse="collapsed = true"
     @expand="collapsed = false"
@@ -19,7 +19,7 @@
         <n-menu
           :value="menuValue"
           :options="menuOptions"
-          :collapsed-width="asideCollapsedWidth"
+          :collapsed-width="getAsideCollapsedWidth"
           :collapsed-icon-size="22"
           :default-expanded-keys="defaultExpandedKeys"
           @update:value="handleUpdateValue"
@@ -34,14 +34,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, toRefs } from 'vue'
 import { Create } from '../Create/index'
 import { AsideFooter } from '../AsideFooter/index'
 import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting'
-import { menuOptionsInit, expandedKeys } from './menu'
 import { useRoute } from 'vue-router'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { menuOptionsInit, expandedKeys } from './menu'
 
 const collapsed = ref<boolean>(false)
+const { getAsideCollapsedWidth } = toRefs(useDesignStore())
 
 const route = useRoute()
 const routeRame = computed(() => route.name)