feat: 新增布局配置项缓存功能

src/config/layout.ts

@@ -1,5 +1,7 @@
+import { getConfigLayout } from "@/utils/cache/local-storage"
+
 /** 布局配置 */
-interface LayoutSettings {
+export interface LayoutSettings {
   /** 是否显示 Settings Panel */
   showSettings: boolean
   /** 是否显示标签栏 */
@@ -22,7 +24,7 @@ interface LayoutSettings {
   showColorWeakness: boolean
 }
 
-const layoutSettings: LayoutSettings = {
+export const layoutSettings: LayoutSettings = getConfigLayout() ?? {
   showSettings: true,
   showTagsView: true,
   fixedHeader: true,
@@ -34,5 +36,3 @@ const layoutSettings: LayoutSettings = {
   showGreyMode: false,
   showColorWeakness: false
 }
-
-export default layoutSettings

src/constants/cache-key.ts

@@ -3,6 +3,7 @@ const SYSTEM_NAME = "v3-admin-vite"
 /** 缓存数据时用到的 Key */
 class CacheKey {
   static readonly TOKEN = `${SYSTEM_NAME}-token-key`
+  static readonly CONFIG_LAYOUT = `${SYSTEM_NAME}-config-layout-key`
   static readonly SIDEBAR_STATUS = `${SYSTEM_NAME}-sidebar-status-key`
   static readonly ACTIVE_THEME_NAME = `${SYSTEM_NAME}-active-theme-name-key`
   static readonly VISITED_VIEWS = `${SYSTEM_NAME}-visited-views-key`

src/store/modules/settings.ts

@@ -1,19 +1,38 @@
-import { type Ref, ref } from "vue"
+import { type Ref, ref, watch } from "vue"
 import { defineStore } from "pinia"
-import layoutSettings from "@/config/layout"
+import { type LayoutSettings, layoutSettings } from "@/config/layout"
+import { setConfigLayout } from "@/utils/cache/local-storage"
 
 type SettingsStore = {
   // 使用映射类型来遍历 layoutSettings 对象的键
-  [Key in keyof typeof layoutSettings]: Ref<(typeof layoutSettings)[Key]>
+  [Key in keyof LayoutSettings]: Ref<LayoutSettings[Key]>
 }
 
+type SettingsStoreKey = keyof SettingsStore
+
 export const useSettingsStore = defineStore("settings", () => {
   /** 状态对象 */
   const state = {} as SettingsStore
   // 遍历 layoutSettings 对象的键值对
   for (const [key, value] of Object.entries(layoutSettings)) {
     // 使用类型断言来指定 key 的类型，将 value 包装在 ref 函数中，创建一个响应式变量
-    state[key as keyof SettingsStore] = ref(value)
+    const refValue = ref(value)
+    state[key as SettingsStoreKey] = refValue
+    // 监听每个响应式变量
+    watch(refValue, () => {
+      // 缓存
+      const settings = _getCacheData()
+      setConfigLayout(settings)
+    })
+  }
+  /** 获取要缓存的数据：将 state 对象转化为 settings 对象 */
+  const _getCacheData = () => {
+    const settings = {} as LayoutSettings
+    for (const [key, value] of Object.entries(state)) {
+      // @ts-ignore
+      settings[key as SettingsStoreKey] = value.value
+    }
+    return settings
   }
 
   return state

src/utils/cache/local-storage.ts

@@ -4,6 +4,17 @@ import CacheKey from "@/constants/cache-key"
 import { type SidebarOpened, type SidebarClosed } from "@/constants/app-key"
 import { type ThemeName } from "@/hooks/useTheme"
 import { type TagView } from "@/store/modules/tags-view"
+import { type LayoutSettings } from "@/config/layout"
+
+//#region 系统布局配置
+export const getConfigLayout = () => {
+  const json = localStorage.getItem(CacheKey.CONFIG_LAYOUT)
+  return json ? (JSON.parse(json) as LayoutSettings) : null
+}
+export const setConfigLayout = (settings: LayoutSettings) => {
+  localStorage.setItem(CacheKey.CONFIG_LAYOUT, JSON.stringify(settings))
+}
+//#endregion
 
 //#region 侧边栏状态
 export const getSidebarStatus = () => {