From cc65b1d6c70fdc2f72682a1bf5e67aeef642c646 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 26 Nov 2024 18:13:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=B0=86=20layouts=20=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6=E8=BF=81=E7=A7=BB=E5=88=B0=20layout?=
 =?UTF-8?q?s=20=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Settings/index.vue    |  8 ++++----
 src/{config/layouts.ts => layouts/config.ts} | 12 ++++++------
 src/pinia/stores/settings.ts                 | 18 +++++++++---------
 src/utils/cache/local-storage.ts             | 10 +++++-----
 4 files changed, 24 insertions(+), 24 deletions(-)
 rename src/{config/layouts.ts => layouts/config.ts} (79%)

diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index 1dfbe398..ab4cf2b9 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useSettingsStore } from "@/pinia/stores/settings"
-import { removeConfigLayout } from "@/utils/cache/local-storage"
+import { removeLayoutsConfig } from "@/utils/cache/local-storage"
 import { Refresh } from "@element-plus/icons-vue"
 import { storeToRefs } from "pinia"
 import { watchEffect } from "vue"
@@ -49,8 +49,8 @@ watchEffect(() => {
 })
 
 /** 重置项目配置 */
-function resetConfigLayout() {
-  removeConfigLayout()
+function resetLayoutsConfig() {
+  removeLayoutsConfig()
   location.reload()
 }
 </script>
@@ -65,7 +65,7 @@ function resetConfigLayout() {
       <span class="setting-name">{{ settingName }}</span>
       <el-switch v-model="settingValue.value" :disabled="!isLeft && settingName === '固定 Header'" />
     </div>
-    <el-button type="danger" :icon="Refresh" @click="resetConfigLayout">
+    <el-button type="danger" :icon="Refresh" @click="resetLayoutsConfig">
       重 置
     </el-button>
   </div>
diff --git a/src/config/layouts.ts b/src/layouts/config.ts
similarity index 79%
rename from src/config/layouts.ts
rename to src/layouts/config.ts
index 097c5b7c..b3b255cb 100644
--- a/src/config/layouts.ts
+++ b/src/layouts/config.ts
@@ -1,9 +1,9 @@
 import { LayoutModeEnum } from "@/constants/app-key"
-import { getConfigLayout } from "@/utils/cache/local-storage"
+import { getLayoutsConfig } from "@/utils/cache/local-storage"
 
 /** 项目配置类型 */
-export interface LayoutSettings {
-  /** 是否显示 Settings Panel */
+export interface LayoutsConfig {
+  /** 是否显示设置按钮和面板 */
   showSettings: boolean
   /** 布局模式 */
   layoutMode: LayoutModeEnum
@@ -13,7 +13,7 @@ export interface LayoutSettings {
   showLogo: boolean
   /** 是否固定 Header */
   fixedHeader: boolean
-  /** 是否显示页脚 Footer */
+  /** 是否显示页脚 */
   showFooter: boolean
   /** 是否显示消息通知 */
   showNotify: boolean
@@ -34,7 +34,7 @@ export interface LayoutSettings {
 }
 
 /** 默认配置 */
-const defaultSettings: LayoutSettings = {
+const DEFAULT_CONFIG: LayoutsConfig = {
   layoutMode: LayoutModeEnum.Left,
   showSettings: true,
   showTagsView: true,
@@ -52,4 +52,4 @@ const defaultSettings: LayoutSettings = {
 }
 
 /** 项目配置 */
-export const layoutSettings: LayoutSettings = { ...defaultSettings, ...getConfigLayout() }
+export const layoutsConfig: LayoutsConfig = { ...DEFAULT_CONFIG, ...getLayoutsConfig() }
diff --git a/src/pinia/stores/settings.ts b/src/pinia/stores/settings.ts
index 814f641a..b9af8b10 100644
--- a/src/pinia/stores/settings.ts
+++ b/src/pinia/stores/settings.ts
@@ -1,14 +1,14 @@
-import type { LayoutSettings } from "@/config/layouts"
+import type { LayoutsConfig } from "@/layouts/config"
 import type { Ref } from "vue"
-import { layoutSettings } from "@/config/layouts"
+import { layoutsConfig } from "@/layouts/config"
 import { pinia } from "@/pinia"
-import { setConfigLayout } from "@/utils/cache/local-storage"
+import { setLayoutsConfig } from "@/utils/cache/local-storage"
 import { defineStore } from "pinia"
 import { ref, watch } from "vue"
 
 type SettingsStore = {
-  // 使用映射类型来遍历 layoutSettings 对象的键
-  [Key in keyof LayoutSettings]: Ref<LayoutSettings[Key]>
+  // 使用映射类型来遍历 LayoutsConfig 对象的键
+  [Key in keyof LayoutsConfig]: Ref<LayoutsConfig[Key]>
 }
 
 type SettingsStoreKey = keyof SettingsStore
@@ -16,8 +16,8 @@ type SettingsStoreKey = keyof SettingsStore
 export const useSettingsStore = defineStore("settings", () => {
   // 状态对象
   const state = {} as SettingsStore
-  // 遍历 layoutSettings 对象的键值对
-  for (const [key, value] of Object.entries(layoutSettings)) {
+  // 遍历 LayoutsConfig 对象的键值对
+  for (const [key, value] of Object.entries(layoutsConfig)) {
     // 使用类型断言来指定 key 的类型，将 value 包装在 ref 函数中，创建一个响应式变量
     const refValue = ref(value)
     // @ts-expect-error ignore
@@ -26,12 +26,12 @@ export const useSettingsStore = defineStore("settings", () => {
     watch(refValue, () => {
       // 缓存
       const settings = getCacheData()
-      setConfigLayout(settings)
+      setLayoutsConfig(settings)
     })
   }
   // 获取要缓存的数据：将 state 对象转化为 settings 对象
   const getCacheData = () => {
-    const settings = {} as LayoutSettings
+    const settings = {} as LayoutsConfig
     for (const [key, value] of Object.entries(state)) {
       // @ts-expect-error ignore
       settings[key as SettingsStoreKey] = value.value
diff --git a/src/utils/cache/local-storage.ts b/src/utils/cache/local-storage.ts
index bc6b52e7..31310148 100644
--- a/src/utils/cache/local-storage.ts
+++ b/src/utils/cache/local-storage.ts
@@ -1,20 +1,20 @@
 // 统一处理 localStorage
 
 import type { ThemeName } from "@/composables/useTheme"
-import type { LayoutSettings } from "@/config/layouts"
 import type { SidebarClosed, SidebarOpened } from "@/constants/app-key"
+import type { LayoutsConfig } from "@/layouts/config"
 import type { TagView } from "@/pinia/stores/tags-view"
 import { CacheKey } from "@/constants/cache-key"
 
 // #region 系统布局配置
-export function getConfigLayout() {
+export function getLayoutsConfig() {
   const json = localStorage.getItem(CacheKey.CONFIG_LAYOUT)
-  return json ? (JSON.parse(json) as LayoutSettings) : null
+  return json ? (JSON.parse(json) as LayoutsConfig) : null
 }
-export function setConfigLayout(settings: LayoutSettings) {
+export function setLayoutsConfig(settings: LayoutsConfig) {
   localStorage.setItem(CacheKey.CONFIG_LAYOUT, JSON.stringify(settings))
 }
-export function removeConfigLayout() {
+export function removeLayoutsConfig() {
   localStorage.removeItem(CacheKey.CONFIG_LAYOUT)
 }
 // #endregion