fix: 处理界面展示相关联的问题

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.23.0",
+    "crypto-ts": "^1.0.2",
     "mockjs": "^1.1.0",
     "naive-ui": "^2.23.2",
     "pinia": "^2.0.6",

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   '@vue/compiler-sfc': ^3.2.20
   '@vueuse/core': ^7.3.0
   axios: ^0.23.0
+  crypto-ts: ^1.0.2
   default-passive-events: ^2.0.0
   eslint: ^8.4.1
   eslint-config-prettier: ^8.3.0
@@ -36,6 +37,7 @@ specifiers:
 
 dependencies:
   axios: rg.cnpmjs.org/axios/0.23.0
+  crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
   mockjs: rg.cnpmjs.org/mockjs/1.1.0
   naive-ui: r2.cnpmjs.org/naive-ui/2.23.2_vue@3.2.24
   pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
@@ -214,6 +216,17 @@ packages:
     version: 1.1.4
     dev: false
 
+  r2.cnpmjs.org/crypto-ts/1.0.2:
+    resolution: {integrity: sha512-TcBWwF8ghYhVd/qPSwvY4nsbDZRN/PVxQ1Uc8ryRLiX4M4C5XSPyIhVgR4M5mIhrQEnWIktLcrv+FIqhKk2t3g==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/crypto-ts/-/crypto-ts-1.0.2.tgz}
+    name: crypto-ts
+    version: 1.0.2
+    peerDependencies:
+      '@angular/common': '>= 5.0.0'
+      '@angular/core': '>= 5.0.0'
+    dependencies:
+      tslib: r2.cnpmjs.org/tslib/1.14.1
+    dev: false
+
   r2.cnpmjs.org/css-render/0.15.8:
     resolution: {integrity: sha512-k1gp1MgYDPrFZhzheQkSwm6dmP6nPe2XE6WYpJBPwEc3GbMANPJZfxl7ofZlTl8/+tpMRiGTTgUkTlXaVbLxog==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/css-render/-/css-render-0.15.8.tgz}
     name: css-render
@@ -348,6 +361,18 @@ packages:
       has-flag: r2.cnpmjs.org/has-flag/4.0.0
     dev: false
 
+  r2.cnpmjs.org/tslib/1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/tslib/-/tslib-1.14.1.tgz}
+    name: tslib
+    version: 1.14.1
+    dev: false
+
+  r2.cnpmjs.org/tslib/2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/tslib/-/tslib-2.3.1.tgz}
+    name: tslib
+    version: 2.3.1
+    dev: true
+
   r2.cnpmjs.org/vdirs/0.1.7_vue@3.2.24:
     resolution: {integrity: sha512-MEUaLhV1jJyUqA2Ar4DfvlQx8jWs+PpCZ2dbM0ILelpMWGOybzt8ddL456VxeIbY/tkuDGT/Wzb8GG4LCuLuHw==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/vdirs/-/vdirs-0.1.7.tgz}
     id: r2.cnpmjs.org/vdirs/0.1.7
@@ -1597,7 +1622,7 @@ packages:
     version: 4.1.2
     dependencies:
       pascal-case: rg.cnpmjs.org/pascal-case/3.1.2
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/camelcase/6.2.1:
@@ -1619,7 +1644,7 @@ packages:
     version: 1.0.4
     dependencies:
       no-case: rg.cnpmjs.org/no-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
       upper-case-first: rg.cnpmjs.org/upper-case-first/2.0.2
     dev: true
 
@@ -1723,7 +1748,7 @@ packages:
     version: 3.0.4
     dependencies:
       no-case: rg.cnpmjs.org/no-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
       upper-case: rg.cnpmjs.org/upper-case/2.0.2
     dev: true
 
@@ -1911,7 +1936,7 @@ packages:
     version: 3.0.4
     dependencies:
       no-case: rg.cnpmjs.org/no-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/ee-first/1.1.1:
@@ -2796,7 +2821,7 @@ packages:
     version: 2.0.4
     dependencies:
       capital-case: rg.cnpmjs.org/capital-case/1.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/highlight.js/11.3.1:
@@ -3186,7 +3211,7 @@ packages:
     name: lower-case
     version: 2.0.2
     dependencies:
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/lru-cache/6.0.0:
@@ -3282,7 +3307,7 @@ packages:
     version: 3.0.4
     dependencies:
       lower-case: rg.cnpmjs.org/lower-case/2.0.2
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/node-releases/2.0.1:
@@ -3403,7 +3428,7 @@ packages:
     version: 3.0.4
     dependencies:
       dot-case: rg.cnpmjs.org/dot-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/parent-module/1.0.1:
@@ -3428,7 +3453,7 @@ packages:
     version: 3.1.2
     dependencies:
       no-case: rg.cnpmjs.org/no-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/path-case/3.0.4:
@@ -3437,7 +3462,7 @@ packages:
     version: 3.0.4
     dependencies:
       dot-case: rg.cnpmjs.org/dot-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/path-exists/3.0.0:
@@ -3856,7 +3881,7 @@ packages:
     version: 3.0.4
     dependencies:
       no-case: rg.cnpmjs.org/no-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
       upper-case-first: rg.cnpmjs.org/upper-case-first/2.0.2
     dev: true
 
@@ -3899,7 +3924,7 @@ packages:
     version: 3.0.4
     dependencies:
       dot-case: rg.cnpmjs.org/dot-case/3.0.4
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/source-map-js/1.0.1:
@@ -4120,7 +4145,7 @@ packages:
     name: upper-case-first
     version: 2.0.2
     dependencies:
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/upper-case/2.0.2:
@@ -4128,7 +4153,7 @@ packages:
     name: upper-case
     version: 2.0.2
     dependencies:
-      tslib: rg.cnpmjs.org/tslib/2.3.1
+      tslib: r2.cnpmjs.org/tslib/2.3.1
     dev: true
 
   rg.cnpmjs.org/uri-js/4.4.1:

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

@@ -0,0 +1,8 @@
+export type ListType = {
+  key: string
+  type: string
+  name: string
+  desc: string
+  value: boolean
+  tip: string
+}

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

@@ -0,0 +1,3 @@
+import SystemSet from './index.vue';
+
+export { SystemSet };

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

@@ -0,0 +1,90 @@
+<template>
+  <n-modal v-model:show="modelShow" @afterLeave="closeModal">
+    <n-list bordered class="go-system-setting">
+      <template #header> 系统设置 </template>
+
+      <n-list-item v-for="item in list" :key="item.name">
+        <n-space :size="40">
+          <n-space>
+            <n-text class="item-left">{{ item.name }}</n-text>
+            <template v-if="item.type === 'switch'">
+              <n-switch
+                v-model:value="item.value"
+                size="small"
+                @update:value="handleChange($event, item)"
+              />
+            </template>
+          </n-space>
+          <n-space>
+            <n-text class="item-right">{{ item.desc }}</n-text>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon size="21">
+                  <HelpOutlineIcon />
+                </n-icon>
+              </template>
+              <span>
+                {{ item.tip }}
+              </span>
+            </n-tooltip>
+          </n-space>
+        </n-space>
+      </n-list-item>
+      <n-list-item></n-list-item>
+    </n-list>
+  </n-modal>
+</template>
+
+<script script lang="ts" setup>
+import { reactive, h } from 'vue'
+import { ListType } from './index.d'
+import { useLangStore } from '@/store/modules/langStore/langStore'
+import { icon } from '@/plugins'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const emit = defineEmits(['update:modelShow'])
+
+defineProps({
+  modelShow: Boolean
+})
+
+const langStore = useLangStore()
+
+const list = reactive<ListType[]>([
+  {
+    key: 'lang',
+    value: false,
+    type: 'switch',
+    name: '切换语言',
+    desc: '切换语言是否重新加载页面',
+    tip: '不重载可能会导致部分区域语言切换失败'
+  }
+])
+
+const closeModal = () => {
+  emit('update:modelShow', false)
+}
+
+const handleChange = (e: Event, item: ListType) => {
+  switch (item.key) {
+    case 'lang':
+      langStore.changeReload(item.value)
+      break
+
+    default:
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('system-setting') {
+  @extend .go-background-filter;
+  min-width: 100px;
+  max-width: 60vw;
+  .item-left {
+    width: 200px;
+  }
+}
+</style>

src/components/UserInfo/index.vue

@@ -17,19 +17,31 @@
       />
     </div>
   </n-dropdown>
+
+  <!-- 系统设置 model -->
+  <SystemSet v-model:modelShow="modelShow"/>
 </template>
 
 <script lang="ts" setup>
-import { h, ref, reactive } from 'vue';
+import { h, ref, reactive } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout } from '@/utils'
+import { SystemSet } from './components/SystemSet/index'
 
 import { icon } from '@/plugins'
-const { DocumentTextIcon, ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon } = icon.ionicons5
+const {
+  DocumentTextIcon,
+  ChatboxEllipsesIcon,
+  PersonIcon,
+  LogOutOutlineIcon,
+  SettingsSharpIcon
+} = icon.ionicons5
 
 const t = window['$t']
 
+const modelShow = ref(false)
+
 const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
 
 // 是否失败
@@ -78,9 +90,14 @@ const options = reactive([
     key: 'contact',
     icon: renderIcon(ChatboxEllipsesIcon)
   },
+  {
+    label: t('global.sys_set'),
+    key: 'sysSet',
+    icon: renderIcon(SettingsSharpIcon)
+  },
   {
     type: 'divider',
-    key: 'd2'
+    key: 'd3'
   },
   {
     label: t('global.logout'),
@@ -94,6 +111,11 @@ const errorHandle = (e: Event) => {
   fallback.value = true
 }
 
+// 系统设置
+const sysSetHandle = () => {
+  modelShow.value = true
+}
+
 const handleSelect = (key: string) => {
   switch (key) {
     case 'doc':
@@ -102,6 +124,9 @@ const handleSelect = (key: string) => {
     case 'contact':
       openDoc()
       break
+    case 'sysSet':
+      sysSetHandle()
+      break
     case 'logout':
       logout()
       break
@@ -112,6 +137,6 @@ const handleSelect = (key: string) => {
 <style lang="scss" scoped>
 .user-info-box {
   cursor: pointer;
-  transform: scale(.7);
+  transform: scale(0.7);
 }
 </style>

src/i18n/en/index.ts

@@ -9,8 +9,11 @@ const global = {
   // header
   doc: 'Document',
   help: 'Help',
-  contact: 'Contact us',
+  contact: 'Contact Us',
   logout: 'Logout',
+  // system setting
+  sys_set: 'System Setting',
+  lang_set: 'Language Setting',
   // right key
   r_edit: 'Edit',
   r_preview: 'Preview',

src/i18n/index.ts

@@ -2,14 +2,15 @@
 import { lang } from '@/settings/designSetting'
 import { createI18n } from 'vue-i18n' //引入vue-i18n组件
 import { getLocalStorage } from '@/utils'
-import { GO_LANG_SELECT } from '@/settings/storageConst'
+import { GO_LANG } from '@/settings/storageConst'
+import { LangStateType } from '@/store/modules/langStore/langStore.d'
 import zh from './zh/index'
 import en from './en/index'
 
-const lang_storage = getLocalStorage(GO_LANG_SELECT)
+const langStorage: LangStateType = getLocalStorage(GO_LANG)
 
 const i18n = createI18n({
-  locale: lang_storage || lang,
+  locale: lang,
   globalInjection: true,
   messages: {
     zh: zh,

src/i18n/zh/index.ts

@@ -11,6 +11,9 @@ const global = {
   help: '帮助中心',
   contact: '联系我们',
   logout: '退出登录',
+  // 系统设置
+  sys_set: '系统设置',
+  lang_set: '语言设置',
   // 功能键
   r_edit: '编辑',
   r_preview: '预览',

src/plugins/icon.ts

@@ -35,7 +35,8 @@ import {
   Prism as PrismIcon,
   Cube as CubeIcon,
   ChevronBackOutline as ChevronBackOutlineIcon,
-  Flash as FlashIcon
+  Flash as FlashIcon,
+  SettingsSharp as SettingsSharpIcon
 } from '@vicons/ionicons5'
 
 // ionicons5 在这里
@@ -113,7 +114,9 @@ const ionicons5 = {
   // 折叠/回退
   ChevronBackOutlineIcon,
   // 后端数据（闪电）
-  FlashIcon
+  FlashIcon,
+  // 设置（齿轮）
+  SettingsSharpIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/settings/storageConst.ts

@@ -1,4 +1,4 @@
-export const GO_ACCESS_TOKEN = 'GO-ACCESS-TOKEN' // 用户token
-export const GO_CURRENT_USER = 'GO-CURRENT-USER' // 当前用户信息
-export const GO_LANG_SELECT = 'GO-LANG-SELECT' // 当前选择的语言类型
-export const GO_Theme_SELECT = 'GO-Theme-SELECT' // 当前选择的主题
+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' // 拖拽页面

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,25 +1,27 @@
 import { ThemeEnum } from '@/enums/styleEnum'
 
+export interface ChartLayoutFilterType {
+  // 色相
+  hueRotate: number
+  // 饱和度
+  saturate: number
+  // 亮度
+  brightness: number
+  // 对比度
+  contrast: number
+  // 不透明度
+  unOpacity: number
+}
+
 export interface ChartLayoutType {
   // 图层控制
-  layers: boolean,
+  layers: boolean
   // 图表组件
-  charts: boolean,
+  charts: boolean
   // 详情设置
-  details: boolean,
+  details: boolean
   // 对齐线
-  alignLine: boolean,
+  alignLine: boolean
   // 滤镜
-  filter: {
-    // 色相
-    hueRotate: number,
-    // 饱和度
-    saturate: number,
-    // 亮度
-    brightness: number,
-    // 对比度
-    contrast: number,
-    // 不透明度
-    unOpacity: number
-  }
+  filter: ChartLayoutFilterType
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -1,34 +1,41 @@
 import { defineStore } from 'pinia'
 import { store } from '@/store'
-import { ChartLayoutType } from './chartLayoutStore.d'
+import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { GO_Chart_Layout_Store } from '@/settings/storageConst'
+
+const storageChartLayout: ChartLayoutType = getLocalStorage(
+  GO_Chart_Layout_Store
+)
 
 export const useChartLayoutStore = defineStore({
   id: 'useChartLayoutStore',
-  state: (): ChartLayoutType => ({
-    // 图层控制
-    layers: true,
-    // 图表组件
-    charts: true,
-    // 详情设置
-    details: true,
-    // 对齐线
-    alignLine: true,
-    // 滤镜
-    filter: {
-      // 色相
-      hueRotate: 0,
-      // 饱和度
-      saturate: 0,
-      // 亮度
-      brightness: 100,
-      // 对比度
-      contrast: 100,
-      // 不透明度
-      unOpacity: 100
-    }
-  }),
+  state: (): ChartLayoutType =>
+    storageChartLayout || {
+      // 图层控制
+      layers: true,
+      // 图表组件
+      charts: true,
+      // 详情设置
+      details: true,
+      // 对齐线
+      alignLine: true,
+      // 滤镜
+      filter: {
+        // 色相
+        hueRotate: 0,
+        // 饱和度
+        saturate: 0,
+        // 亮度
+        brightness: 100,
+        // 对比度
+        contrast: 100,
+        // 不透明度
+        unOpacity: 100
+      }
+    },
   getters: {
-    getLayers(e): boolean {
+    getLayers(): boolean {
       return this.layers
     },
     getCharts(): boolean {
@@ -40,13 +47,22 @@ export const useChartLayoutStore = defineStore({
     getAlignLine(): boolean {
       return this.alignLine
     },
-    getFilter(): object {
+    getFilter(): ChartLayoutFilterType {
       return this.filter
     }
+  },
+  actions: {
+    setItem(key: string, value: boolean): void {
+      ;(this as any)[key] = value
+      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)
+    }
   }
 })
 
-
 export function useChartLayoutSettingWithOut() {
   return useChartLayoutStore(store)
-}
+}

src/store/modules/langStore/langStore.d.ts

@@ -1,5 +1,7 @@
 import { LangEnum } from '@/enums/styleEnum'
 export interface LangStateType {
   // 当前语言
-  lang: LangEnum
+  lang: LangEnum,
+  // 是否刷新
+  isReload: boolean
 }

src/store/modules/langStore/langStore.ts

@@ -3,25 +3,42 @@ import { lang } from '@/settings/designSetting'
 import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
 import i18n from '@/i18n/index'
-import { setLocalStorage, reloadRoutePage } from '@/utils'
-import { GO_LANG_SELECT } from '@/settings/storageConst'
+import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
+import { GO_LANG } from '@/settings/storageConst'
+
+const storageLang: LangStateType = getLocalStorage(GO_LANG)
 
 export const useLangStore = defineStore({
   id: 'useLangStore',
-  state: (): LangStateType => ({
-    lang
-  }),
+  state: (): LangStateType =>
+    storageLang || {
+      lang,
+      // 默认刷新页面
+      isReload: true
+    },
   getters: {
     getLang(): LangEnum {
       return this.lang
+    },
+    getReload(): boolean {
+      return this.isReload
     }
   },
   actions: {
+    changeReload(value: boolean): void {
+      this.isReload = value
+      setLocalStorage(GO_LANG, this.$state)
+    },
     changeLang(lang: LangEnum): void {
+      if (this.lang === lang) return
       this.lang = lang
       i18n.global.locale = lang
-      setLocalStorage(GO_LANG_SELECT, lang)
-      reloadRoutePage()
+
+      setLocalStorage(GO_LANG, this.$state)
+
+      if (this.getReload) {
+        reloadRoutePage()
+      }
     }
   }
 })

src/styles/common/_dark.scss

@@ -10,6 +10,8 @@ $dark: (
     background-color3: $--color-dark-bg-3,
     background-color4: $--color-dark-bg-4,
     background-color5: $--color-dark-bg-5,
+  // 毛玻璃背景
+    filter-color: $--filter-color-login-dark,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),
@@ -19,8 +21,6 @@ $dark: (
       linear-gradient($--color-dark-bg-1 14px, transparent 0),
       linear-gradient(90deg, transparent 14px, $--color-text-2 0)
     ),
-  //毛玻璃
-    filter-color: $--filter-color-login-dark,
   // 物料市场背景
     items-top-bg:
     linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0)),

src/styles/common/_light.scss

@@ -12,6 +12,8 @@ $light: (
     background-color3: $--color-light-bg-3,
     background-color4: $--color-light-bg-4,
     background-color5: $--color-light-bg-5,
+  // 毛玻璃背景
+    filter-color: $--filter-color-login-light,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-light-bg 0%, $--color-light-bg 100%),
@@ -21,8 +23,6 @@ $light: (
       linear-gradient($--color-light-bg-1 14px, transparent 0),
       linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
     ),
-  //毛玻璃
-    filter-color: $--filter-color-login-light,
   // hover 边框颜色
     hover-border-color: $--color-light-bg-1
 );

src/styles/common/style.scss

@@ -35,7 +35,7 @@
 // 毛玻璃
 .go-background-filter {
   backdrop-filter: $--filter-blur-base;
-  background-color: $--filter-color-base-1;
+  @include filter-bg-color('filter-color');
   box-shadow: $--border-shadow;
 }
 

src/styles/common/var.scss

@@ -37,11 +37,8 @@ $--footer-height: 50px;
 // 模糊
 $--filter-blur-base: blur(20px);
 // 毛玻璃
-$--filter-color-base-1: rgba(0, 0, 0, 0.1);
-$--filter-color-base-2: rgba(0, 0, 0, 0.2);
-$--filter-color-base-3: rgba(23, 23, 26, 0.3);
-$--filter-color-login-dark: rgba(89, 95, 103, 0.45);
-$--filter-color-login-light: rgba(187, 202, 217, 0.7);
+$--filter-color-login-dark: rgba(35,35,36, 0.8);
+$--filter-color-login-light: rgba(240, 240, 240, 0.8);
 
 // 边框
 $--border-radius-base: 8px;

src/utils/crypto.ts

@@ -0,0 +1,30 @@
+import * as CryptoJS from 'crypto-ts'
+
+export default {
+  AES_KEY: 'mt',
+  encode(data: string): string {
+    if (typeof data !== 'string') return ''
+    // 加密
+    const key = CryptoJS.enc.Utf8.parse(this.AES_KEY)
+    const str = JSON.stringify(data)
+    const encryptedData = CryptoJS.AES.encrypt(str, key, {
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.PKCS7,
+      iv: CryptoJS.enc.Utf8.parse(this.AES_KEY)
+    })
+    return encryptedData.toString()
+  },
+  // 解密
+  decode(data: string): string {
+    if (typeof data !== 'string') return ''
+    const encryptedHexStr = CryptoJS.enc.Utf8.parse(data)
+    const encryptedBase64Str = CryptoJS.enc.Utf8.stringify(encryptedHexStr)
+    const key = CryptoJS.enc.Utf8.parse(this.AES_KEY)
+    const decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.PKCS7,
+      iv: CryptoJS.enc.Utf8.parse(this.AES_KEY)
+    })
+    return decryptedData.toString(CryptoJS.enc.Utf8)
+  }
+}

src/views/chart/components/HeaderLeftBtn/index.vue

@@ -2,12 +2,17 @@
   <n-space class="header-left-btn">
     <n-tooltip
       v-for="item in btnList"
-      :key="item.title"
+      :key="item.key"
       placement="bottom"
       trigger="hover"
     >
       <template #trigger>
-        <n-button type="info" size="small" ghost @click="item.fn">
+        <n-button
+          :type="item.select ? 'info' : ''"
+          size="small"
+          ghost
+          @click="clickHandle(item)"
+        >
           <component :is="item.icon"></component>
         </n-button>
       </template>
@@ -19,43 +24,48 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, watchEffect, ref } from 'vue'
 import { renderIcon } from '@/utils'
 import { icon } from '@/plugins'
 const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 
-const layers = () => {
-  console.log('选择了图层控制')
-}
-
-const charts = () => {
-  console.log('选择了图表组件')
-}
-
-const details = () => {
-  console.log('选择了详情')
-}
+const chartLayoutStore = useChartLayoutStore()
 
-const btnList = reactive([
+const init = (layers: boolean, charts: boolean, details: boolean) => [
   {
-    fn: layers,
-    select: true,
+    key: 'layers',
+    select: chartLayoutStore.getLayers,
     title: '图层控制',
     icon: renderIcon(LayersIcon)
   },
   {
-    fn: charts,
-    select: true,
+    key: 'charts',
+    select: chartLayoutStore.getCharts,
     title: '图表组件',
     icon: renderIcon(BarChartIcon)
   },
   {
-    fn: details,
-    select: true,
+    key: 'details',
+    select: chartLayoutStore.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)
+}
 </script>
 <style lang="scss" scoped>
 .header-left-btn {