From 072b8668fd5e578a8fc4a3d6b27084ff97cfe73b Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 8 Jan 2022 15:00:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BE=E7=BD=AE=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components => }/SystemSet/index.d.ts        |  4 ++--
 .../components => }/SystemSet/index.ts          |  0
 .../components => }/SystemSet/index.vue         | 17 +++++++++++++----
 src/components/UserInfo/index.vue               |  2 +-
 src/i18n/index.ts                               |  2 +-
 src/settings/designSetting.ts                   |  9 ++++-----
 src/store/modules/designStore/designStore.d.ts  |  2 +-
 src/store/modules/designStore/designStore.ts    | 11 +++++++----
 .../project/layout/components/Sider/index.vue   | 10 ++++++----
 9 files changed, 35 insertions(+), 22 deletions(-)
 rename src/components/{UserInfo/components => }/SystemSet/index.d.ts (73%)
 rename src/components/{UserInfo/components => }/SystemSet/index.ts (100%)
 rename src/components/{UserInfo/components => }/SystemSet/index.vue (81%)

diff --git a/src/components/UserInfo/components/SystemSet/index.d.ts b/src/components/SystemSet/index.d.ts
similarity index 73%
rename from src/components/UserInfo/components/SystemSet/index.d.ts
rename to src/components/SystemSet/index.d.ts
index 9069bedf..c8d41989 100644
--- a/src/components/UserInfo/components/SystemSet/index.d.ts
+++ b/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
 }
diff --git a/src/components/UserInfo/components/SystemSet/index.ts b/src/components/SystemSet/index.ts
similarity index 100%
rename from src/components/UserInfo/components/SystemSet/index.ts
rename to src/components/SystemSet/index.ts
diff --git a/src/components/UserInfo/components/SystemSet/index.vue b/src/components/SystemSet/index.vue
similarity index 81%
rename from src/components/UserInfo/components/SystemSet/index.vue
rename to src/components/SystemSet/index.vue
index 3367618d..a66945c8 100644
--- a/src/components/UserInfo/components/SystemSet/index.vue
+++ b/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
   }
 }
diff --git a/src/components/UserInfo/index.vue b/src/components/UserInfo/index.vue
index 81f5b682..ba4647ce 100644
--- a/src/components/UserInfo/index.vue
+++ b/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 {
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 152d88c8..972e0c70 100644
--- a/src/i18n/index.ts
+++ b/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,
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
index 117d7792..8c8f8c62 100644
--- a/src/settings/designSetting.ts
+++ b/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'
diff --git a/src/store/modules/designStore/designStore.d.ts b/src/store/modules/designStore/designStore.d.ts
index 6e04a2c9..9f47719a 100644
--- a/src/store/modules/designStore/designStore.d.ts
+++ b/src/store/modules/designStore/designStore.d.ts
@@ -10,5 +10,5 @@ export interface DesignStateType {
   //系统内置风格
   appThemeList: string[]
   // 侧边栏是否全收缩
-  asideAllShrink: boolean
+  asideAllCollapsed: boolean
 }
diff --git a/src/store/modules/designStore/designStore.ts b/src/store/modules/designStore/designStore.ts
index 0ebe5627..c3c00520 100644
--- a/src/store/modules/designStore/designStore.ts
+++ b/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)
     }
   }
diff --git a/src/views/project/layout/components/Sider/index.vue b/src/views/project/layout/components/Sider/index.vue
index 7592c033..cbe62069 100644
--- a/src/views/project/layout/components/Sider/index.vue
+++ b/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)