From 9c74c2621937a5f7534a511aee33ae6b0176041e Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 8 Jan 2022 14:27:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E5=8F=98=E9=87=8F=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserInfo/components/SystemSet/index.vue   |  4 +-
 src/enums/storageEnum.ts                      | 10 +++++
 src/i18n/index.ts                             |  6 +--
 src/settings/designSetting.ts                 |  3 ++
 src/settings/storageConst.ts                  |  8 ++--
 .../chartLayoutStore/chartLayoutStore.ts      | 10 +++--
 .../modules/designStore/designStore.d.ts      | 10 +++--
 src/store/modules/designStore/designStore.ts  | 39 ++++++++++++-------
 src/store/modules/langStore/langStore.ts      | 13 ++++---
 .../chart/components/HeaderLeftBtn/index.vue  | 27 +++++--------
 .../project/items/components/List/index.vue   |  3 +-
 .../items/components/ModalCard/index.vue      | 17 ++------
 12 files changed, 79 insertions(+), 71 deletions(-)
 create mode 100644 src/enums/storageEnum.ts

diff --git a/src/components/UserInfo/components/SystemSet/index.vue b/src/components/UserInfo/components/SystemSet/index.vue
index ce0230a6..3367618d 100644
--- a/src/components/UserInfo/components/SystemSet/index.vue
+++ b/src/components/UserInfo/components/SystemSet/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeModal">
+  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
     <n-list bordered class="go-system-setting">
       <template #header> 系统设置 </template>
 
@@ -62,7 +62,7 @@ const list = reactive<ListType[]>([
   }
 ])
 
-const closeModal = () => {
+const closeHandle = () => {
   emit('update:modelShow', false)
 }
 
diff --git a/src/enums/storageEnum.ts b/src/enums/storageEnum.ts
new file mode 100644
index 00000000..4d9f6f52
--- /dev/null
+++ b/src/enums/storageEnum.ts
@@ -0,0 +1,10 @@
+export enum StorageEnum {
+  // 登录信息
+  GO_LOGIN_STORE = 'GO-ACCESS-TOKEN',
+  // 语言
+  GO_LANG_STORE = 'GO-LANG',
+  // 当前选择的主题
+  GO_DESIGN_STORE = 'GO-DESIGN',
+  // 拖拽页面
+  GO_CHART_LAYOUT_STORE = 'GO-Chart-Layout-Store'
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 1a8a1d5e..152d88c8 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -2,15 +2,15 @@
 import { lang } from '@/settings/designSetting'
 import { createI18n } from 'vue-i18n' //引入vue-i18n组件
 import { getLocalStorage } from '@/utils'
-import { GO_LANG } from '@/settings/storageConst'
+import { StorageEnum }from '@/enums/storageEnum'
 import { LangStateType } from '@/store/modules/langStore/langStore.d'
 import zh from './zh/index'
 import en from './en/index'
 
-const langStorage: LangStateType = getLocalStorage(GO_LANG)
+const langStorage: LangStateType = getLocalStorage(StorageEnum.GO_LANG_STORE)
 
 const i18n = createI18n({
-  locale: lang,
+  locale: langStorage.lang || lang,
   globalInjection: true,
   messages: {
     zh: zh,
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
index fcdf3880..117d7792 100644
--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@@ -55,6 +55,9 @@ export const maskClosable = false
 // 侧边栏宽度
 export const asideWidth = '270'
 
+// 侧边栏是否支持全持全部收缩
+export const asideAllShrink = true
+
 // 侧边栏缩小后的宽度
 // 建议 0 或者 60，已经适配好了
 export const asideCollapsedWidth = '0'
diff --git a/src/settings/storageConst.ts b/src/settings/storageConst.ts
index 5de411a2..520465de 100644
--- a/src/settings/storageConst.ts
+++ b/src/settings/storageConst.ts
@@ -1,4 +1,4 @@
-export const GO_LOGIN = 'GO-ACCESS-TOKEN' // 登录信息
-export const GO_LANG = 'GO-LANG' // 语言
-export const GO_Theme_SELECT = 'GO-Theme-SELECT' // 当前选择的主题
-export const GO_Chart_Layout_Store = 'GO-Chart-Layout-Store' // 拖拽页面
\ No newline at end of file
+export const GO_LOGIN_STORE = 'GO-ACCESS-TOKEN' // 登录信息
+export const GO_LANG_STORE = 'GO-LANG' // 语言
+export const GO_DESIGN_STORE = 'GO-DESIGN' // 当前选择的主题
+export const GO_CHART_LAYOUT_STORE = 'GO-Chart-Layout-Store' // 拖拽页面
\ No newline at end of file
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index f49ac4e0..f2ca7829 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -2,10 +2,12 @@ import { defineStore } from 'pinia'
 import { store } from '@/store'
 import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
-import { GO_Chart_Layout_Store } from '@/settings/storageConst'
+import { StorageEnum } from '@/enums/storageEnum'
+
+const { GO_CHART_LAYOUT_STORE } = StorageEnum
 
 const storageChartLayout: ChartLayoutType = getLocalStorage(
-  GO_Chart_Layout_Store
+  GO_CHART_LAYOUT_STORE
 )
 
 export const useChartLayoutStore = defineStore({
@@ -54,11 +56,11 @@ export const useChartLayoutStore = defineStore({
   actions: {
     setItem(key: string, value: boolean): void {
       ;(this as any)[key] = value
-      setLocalStorage(GO_Chart_Layout_Store, this.$state)
+      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
     },
     setFilter<T extends keyof ChartLayoutType>(key: T, value: boolean): void {
       ;(this.filter as any)[key] = value
-      setLocalStorage(GO_Chart_Layout_Store, this.$state)
+      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
     }
   }
 })
diff --git a/src/store/modules/designStore/designStore.d.ts b/src/store/modules/designStore/designStore.d.ts
index 0164b970..6e04a2c9 100644
--- a/src/store/modules/designStore/designStore.d.ts
+++ b/src/store/modules/designStore/designStore.d.ts
@@ -2,11 +2,13 @@ import { ThemeEnum } from '@/enums/styleEnum'
 
 export interface DesignStateType {
   // 是否是深色主题
-  darkTheme: boolean;
+  darkTheme: boolean
   // 主题名称
-  themeName: ThemeEnum;
+  themeName: ThemeEnum
   //系统风格
-  appTheme: string;
+  appTheme: string
   //系统内置风格
-  appThemeList: string[];
+  appThemeList: string[]
+  // 侧边栏是否全收缩
+  asideAllShrink: boolean
 }
diff --git a/src/store/modules/designStore/designStore.ts b/src/store/modules/designStore/designStore.ts
index 89a0b90b..0ebe5627 100644
--- a/src/store/modules/designStore/designStore.ts
+++ b/src/store/modules/designStore/designStore.ts
@@ -1,27 +1,32 @@
 import { defineStore } from 'pinia'
 import { store } from '@/store'
-import { theme } from '@/settings/designSetting'
+import { theme, asideAllShrink } from '@/settings/designSetting'
 import { DesignStateType } from './designStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
-import { GO_Theme_SELECT } from '@/settings/storageConst'
+import { StorageEnum } from '@/enums/storageEnum'
 import { ThemeEnum } from '@/enums/styleEnum'
 
+const { GO_DESIGN_STORE } = StorageEnum
+
 const { darkTheme, appTheme, appThemeList } = theme
-const storageThemeName = getLocalStorage(GO_Theme_SELECT)
+
+const storageDesign = getLocalStorage(GO_DESIGN_STORE)
 
 export const useDesignStore = defineStore({
   id: 'useDesignStore',
-  state: (): DesignStateType => ({
-    // 是否暗黑
-    darkTheme: storageThemeName === ThemeEnum.dark,
-    // 主题名称
-    themeName:
-      storageThemeName || (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
-    // 颜色色号
-    appTheme,
-    // 颜色列表
-    appThemeList
-  }),
+  state: (): DesignStateType =>
+    storageDesign || {
+      // 是否暗黑
+      darkTheme,
+      // 主题名称
+      themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
+      // 颜色色号
+      appTheme,
+      // 颜色列表
+      appThemeList,
+      // 侧边栏
+      asideAllShrink
+    },
   getters: {
     getDarkTheme(e): boolean {
       return this.darkTheme
@@ -37,7 +42,11 @@ export const useDesignStore = defineStore({
     changeTheme(): void {
       this.darkTheme = !this.darkTheme
       this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
-      setLocalStorage(GO_Theme_SELECT, this.themeName)
+      setLocalStorage(GO_DESIGN_STORE, this.$state)
+    },
+    changeAsideAllShrink(): void {
+      this.asideAllShrink = !this.asideAllShrink
+      setLocalStorage(GO_DESIGN_STORE, this.$state)
     }
   }
 })
diff --git a/src/store/modules/langStore/langStore.ts b/src/store/modules/langStore/langStore.ts
index a9a9c708..7dbe843c 100644
--- a/src/store/modules/langStore/langStore.ts
+++ b/src/store/modules/langStore/langStore.ts
@@ -4,17 +4,18 @@ import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
 import i18n from '@/i18n/index'
 import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
-import { GO_LANG } from '@/settings/storageConst'
+import { StorageEnum } from '@/enums/storageEnum'
 
-const storageLang: LangStateType = getLocalStorage(GO_LANG)
+const { GO_LANG_STORE } = StorageEnum
+
+const storageLang: LangStateType = getLocalStorage(GO_LANG_STORE)
 
 export const useLangStore = defineStore({
   id: 'useLangStore',
   state: (): LangStateType =>
     storageLang || {
       lang,
-      // 默认刷新页面
-      isReload: true
+      isReload: false
     },
   getters: {
     getLang(): LangEnum {
@@ -27,14 +28,14 @@ export const useLangStore = defineStore({
   actions: {
     changeReload(value: boolean): void {
       this.isReload = value
-      setLocalStorage(GO_LANG, this.$state)
+      setLocalStorage(GO_LANG_STORE, this.$state)
     },
     changeLang(lang: LangEnum): void {
       if (this.lang === lang) return
       this.lang = lang
       i18n.global.locale = lang
 
-      setLocalStorage(GO_LANG, this.$state)
+      setLocalStorage(GO_LANG_STORE, this.$state)
 
       if (this.getReload) {
         reloadRoutePage()
diff --git a/src/views/chart/components/HeaderLeftBtn/index.vue b/src/views/chart/components/HeaderLeftBtn/index.vue
index 3e6163ad..49baaee9 100644
--- a/src/views/chart/components/HeaderLeftBtn/index.vue
+++ b/src/views/chart/components/HeaderLeftBtn/index.vue
@@ -24,47 +24,38 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watchEffect, ref } from 'vue'
+import { toRefs, reactive } from 'vue'
 import { renderIcon } from '@/utils'
 import { icon } from '@/plugins'
 const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 
-const chartLayoutStore = useChartLayoutStore()
+const { setItem } = useChartLayoutStore()
+const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 
-const init = (layers: boolean, charts: boolean, details: boolean) => [
+const btnList = reactive([
   {
     key: 'layers',
-    select: chartLayoutStore.getLayers,
+    select: getLayers,
     title: '图层控制',
     icon: renderIcon(LayersIcon)
   },
   {
     key: 'charts',
-    select: chartLayoutStore.getCharts,
+    select: getCharts,
     title: '图表组件',
     icon: renderIcon(BarChartIcon)
   },
   {
     key: 'details',
-    select: chartLayoutStore.getDetails,
+    select: getDetails,
     title: '详情设置',
     icon: renderIcon(PrismIcon)
   }
-]
-
-const btnList = ref()
-
-watchEffect(() => {
-  btnList.value = init(
-    chartLayoutStore.getLayers,
-    chartLayoutStore.getCharts,
-    chartLayoutStore.getDetails
-  )
-})
+])
 
 const clickHandle = (item: { [T: string]: string }) => {
-  chartLayoutStore.setItem(item.key, !item.select)
+  setItem(item.key, !item.select)
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/project/items/components/List/index.vue b/src/views/project/items/components/List/index.vue
index c2425bd4..cc13e758 100644
--- a/src/views/project/items/components/List/index.vue
+++ b/src/views/project/items/components/List/index.vue
@@ -17,7 +17,7 @@
     </n-grid>
   </div>
   <ModalCard
-    v-model:show="modalShow"
+    v-model:modalShow="modalShow"
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
@@ -25,7 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Card } from '../Card/index'
 import { ModalCard } from '../ModalCard/index'
 import { icon } from '@/plugins'
diff --git a/src/views/project/items/components/ModalCard/index.vue b/src/views/project/items/components/ModalCard/index.vue
index 2559eb9e..a9aeadae 100644
--- a/src/views/project/items/components/ModalCard/index.vue
+++ b/src/views/project/items/components/ModalCard/index.vue
@@ -2,8 +2,8 @@
   <!-- mask-closable 暂时是失效的，不知道为啥 -->
   <n-modal
     class="go-modal-box"
-    v-model:show="show"
-    @on-after-leave="closeHandle"
+    v-model:show="modalShow"
+    @afterLeave="closeHandle"
   >
     <n-card hoverable size="small">
       <div class="list-content">
@@ -75,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { watchEffect, reactive } from 'vue'
+import { reactive } from 'vue'
 import { renderIcon, renderLang, requireUrl } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
@@ -84,20 +84,11 @@ const { HammerIcon } = icon.ionicons5
 
 const emit = defineEmits(['close', 'edit'])
 
-const t = window['$t']
-
 const props = defineProps({
-  show: Boolean,
+  modalShow: Boolean,
   cardData: Object
 })
 
-// 解决点击模态层不会触发 @on-after-leave 的问题
-watchEffect(() => {
-  if (!props.show && props.cardData) {
-    closeHandle()
-  }
-})
-
 const fnBtnList = reactive([
   {
     label: renderLang('global.r_edit'),