fix: 修改本地存储变量名

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)
 }
 

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'
+}

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,

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'

src/settings/storageConst.ts

@@ -1,4 +1,4 @@
-export const GO_LOGIN = 'GO-ACCESS-TOKEN' // 登录信息
+export const GO_LOGIN_STORE = 'GO-ACCESS-TOKEN' // 登录信息
-export const GO_LANG = 'GO-LANG' // 语言
+export const GO_LANG_STORE = 'GO-LANG' // 语言
-export const GO_Theme_SELECT = 'GO-Theme-SELECT' // 当前选择的主题
+export const GO_DESIGN_STORE = 'GO-DESIGN' // 当前选择的主题
-export const GO_Chart_Layout_Store = 'GO-Chart-Layout-Store' // 拖拽页面
+export const GO_CHART_LAYOUT_STORE = 'GO-Chart-Layout-Store' // 拖拽页面

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)
     }
   }
 })

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
 }

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 => ({
+  state: (): DesignStateType =>
+    storageDesign || {
       // 是否暗黑
-    darkTheme: storageThemeName === ThemeEnum.dark,
+      darkTheme,
       // 主题名称
-    themeName:
+      themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
-      storageThemeName || (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
       // 颜色色号
       appTheme,
       // 颜色列表
-    appThemeList
+      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)
     }
   }
 })

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: false
-      isReload: true
     },
   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()

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>

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'

src/views/project/items/components/ModalCard/index.vue

@@ -2,8 +2,8 @@
   <!-- mask-closable 暂时是失效的，不知道为啥 -->
   <n-modal
     class="go-modal-box"
-    v-model:show="show"
+    v-model:show="modalShow"
-    @on-after-leave="closeHandle"
+    @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'),