refactor: 命名优化统一

src/App.vue

@@ -3,7 +3,7 @@
     <!-- 开启水印 -->
     <el-watermark
       :font="{ color: fontColor }"
-      :content="watermarkEnabled ? defaultSettings.watermarkContent : ''"
+      :content="showWatermark ? defaultSettings.watermarkContent : ''"
       :z-index="9999"
       class="wh-full"
     >
@@ -23,7 +23,7 @@ const settingsStore = useSettingsStore();
 
 const locale = computed(() => appStore.locale);
 const size = computed(() => appStore.size as ComponentSize);
-const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);
+const showWatermark = computed(() => settingsStore.showWatermark);
 
 // 明亮/暗黑主题水印字体颜色适配
 const fontColor = computed(() => {

src/constants/cache-keys.ts

@@ -1,8 +0,0 @@
-/**
- * 缓存键常量
- */
-export const ACCESS_TOKEN_KEY = "access_token";
-export const REFRESH_TOKEN_KEY = "refresh_token";
-export const DICT_CACHE_KEY = "dict_cache";
-export const REMEMBER_ME_KEY = "remember_me";
-// 可在此处添加其他缓存键

src/constants/index.ts

@@ -1 +1,4 @@
 export const ROLE_ROOT = "ROOT";
+
+// 🔗 导出所有存储键常量
+export * from "./storage-keys";

src/constants/storage-keys.ts

@@ -0,0 +1,53 @@
+/**
+ * 存储键常量统一管理
+ * 包括 localStorage、sessionStorage 等各种存储的键名
+ */
+
+// 🔐 用户认证相关
+export const ACCESS_TOKEN_KEY = "access_token";
+export const REFRESH_TOKEN_KEY = "refresh_token";
+export const REMEMBER_ME_KEY = "remember_me";
+
+// 📊 数据缓存相关
+export const DICT_CACHE_KEY = "dict_cache";
+
+// 🎨 系统设置相关
+export const SHOW_TAGS_VIEW_KEY = "showTagsView";
+export const SHOW_APP_LOGO_KEY = "showAppLogo";
+export const SHOW_WATERMARK_KEY = "showWatermark";
+export const LAYOUT_KEY = "layout";
+export const SIDEBAR_COLOR_SCHEME_KEY = "sidebarColorScheme";
+export const THEME_KEY = "theme";
+export const THEME_COLOR_KEY = "themeColor";
+
+// 🎯 功能分组的键映射对象
+
+// 认证相关键集合
+export const AUTH_KEYS = {
+  ACCESS_TOKEN: ACCESS_TOKEN_KEY,
+  REFRESH_TOKEN: REFRESH_TOKEN_KEY,
+  REMEMBER_ME: REMEMBER_ME_KEY,
+} as const;
+
+// 缓存相关键集合
+export const CACHE_KEYS = {
+  DICT_CACHE: DICT_CACHE_KEY,
+} as const;
+
+// 设置相关键集合
+export const SETTINGS_KEYS = {
+  SHOW_TAGS_VIEW: SHOW_TAGS_VIEW_KEY,
+  SHOW_APP_LOGO: SHOW_APP_LOGO_KEY,
+  SHOW_WATERMARK: SHOW_WATERMARK_KEY,
+  SIDEBAR_COLOR_SCHEME: SIDEBAR_COLOR_SCHEME_KEY,
+  LAYOUT: LAYOUT_KEY,
+  THEME_COLOR: THEME_COLOR_KEY,
+  THEME: THEME_KEY,
+} as const;
+
+// 📦 所有存储键的统一集合
+export const ALL_STORAGE_KEYS = {
+  ...AUTH_KEYS,
+  ...CACHE_KEYS,
+  ...SETTINGS_KEYS,
+} as const;

src/lang/package/en.ts

@@ -70,10 +70,10 @@ export default {
     interface: "Interface",
     navigation: "Navigation",
     themeColor: "Theme Color",
-    tagsView: "Tags View",
+    showTagsView: "Show Tags View",
-    sidebarLogo: "Sidebar Logo",
+    showAppLogo: "Show App Logo",
     sidebarColorScheme: "Sidebar Color Scheme",
-    watermark: "Watermark",
+    showWatermark: "Show Watermark",
     classicBlue: "Classic Blue",
     minimalWhite: "Minimal White",
   },

src/lang/package/zh-cn.ts

@@ -70,10 +70,13 @@ export default {
     interface: "界面设置",
     navigation: "导航设置",
     themeColor: "主题颜色",
-    tagsView: "开启 Tags-View",
+    themeColorTip: "主题颜色",
-    sidebarLogo: "侧边栏 Logo",
+    darkMode: "暗黑模式",
+    layoutSetting: "布局设置",
     sidebarColorScheme: "侧边栏配色",
-    watermark: "开启水印",
+    showTagsView: "显示页签",
+    showAppLogo: "显示Logo",
+    showWatermark: "显示水印",
     classicBlue: "经典蓝",
     minimalWhite: "极简白",
   },

src/layouts/components/Settings/index.vue

@@ -32,18 +32,18 @@
       </div>
 
       <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.tagsView") }}</span>
+        <span class="text-xs">{{ t("settings.showTagsView") }}</span>
-        <el-switch v-model="settingsStore.tagsView" />
+        <el-switch v-model="settingsStore.showTagsView" />
       </div>
 
       <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.sidebarLogo") }}</span>
+        <span class="text-xs">{{ t("settings.showAppLogo") }}</span>
-        <el-switch v-model="settingsStore.sidebarLogo" />
+        <el-switch v-model="settingsStore.showAppLogo" />
       </div>
 
       <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.watermark") }}</span>
+        <span class="text-xs">{{ t("settings.showWatermark") }}</span>
-        <el-switch v-model="settingsStore.watermarkEnabled" />
+        <el-switch v-model="settingsStore.showWatermark" />
       </div>
       <div v-if="!isDark" class="config-item flex-x-between">
         <span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
@@ -133,7 +133,7 @@ const sidebarColor = ref(settingsStore.sidebarColorScheme);
 
 const selectedThemeColor = computed({
   get: () => settingsStore.themeColor,
-  set: (value) => settingsStore.changeThemeColor(value),
+  set: (value) => settingsStore.updateThemeColor(value),
 });
 
 const drawerVisible = computed({
@@ -147,7 +147,7 @@ const drawerVisible = computed({
  * @param isDark 是否启用暗黑模式
  */
 const handleThemeChange = (isDark: string | number | boolean) => {
-  settingsStore.changeTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
+  settingsStore.updateTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
 };
 
 /**
@@ -156,7 +156,7 @@ const handleThemeChange = (isDark: string | number | boolean) => {
  * @param val 颜色方案名称
  */
 const changeSidebarColor = (val: any) => {
-  settingsStore.changeSidebarColor(val);
+  settingsStore.updateSidebarColorScheme(val);
 };
 
 /**
@@ -165,7 +165,7 @@ const changeSidebarColor = (val: any) => {
  * @param layout - 布局模式
  */
 const handleLayoutChange = (layout: LayoutMode) => {
-  settingsStore.changeLayout(layout);
+  settingsStore.updateLayout(layout);
   if (layout === LayoutMode.MIX && route.name) {
     const topLevelRoute = findTopLevelRoute(permissionStore.routes, route.name as string);
     if (appStore.activeTopMenuPath !== topLevelRoute.path) {

src/layouts/composables/useLayout.ts

@@ -16,13 +16,13 @@ export function useLayout() {
   const isSidebarOpen = computed(() => appStore.sidebar.opened);
 
   // 是否显示标签视图
-  const isShowTagsView = computed(() => settingsStore.tagsView);
+  const isShowTagsView = computed(() => settingsStore.showTagsView);
 
   // 是否显示设置面板
   const isShowSettings = computed(() => defaultSettings.showSettings);
 
   // 是否显示Logo
-  const isShowLogo = computed(() => settingsStore.sidebarLogo);
+  const isShowLogo = computed(() => settingsStore.showAppLogo);
 
   // 是否移动设备
   const isMobile = computed(() => appStore.device === "mobile");

src/settings.ts

@@ -13,9 +13,9 @@ const defaultSettings: AppSettings = {
   // 是否显示设置
   showSettings: true,
   // 是否显示标签视图
-  tagsView: true,
+  showTagsView: true,
-  // 是否显示侧边栏Logo
+  // 是否显示应用Logo
-  sidebarLogo: true,
+  showAppLogo: true,
   // 布局方式，默认为左侧布局
   layout: LayoutMode.LEFT,
   // 主题，根据操作系统的色彩方案自动选择
@@ -26,8 +26,8 @@ const defaultSettings: AppSettings = {
   language: LanguageEnum.ZH_CN,
   // 主题颜色
   themeColor: "#4080FF",
-  // 是否开启水印
+  // 是否显示水印
-  watermarkEnabled: false,
+  showWatermark: false,
   // 水印内容
   watermarkContent: pkg.name,
   // 侧边栏配色方案

src/store/modules/settings.store.ts

@@ -2,34 +2,67 @@ import defaultSettings from "@/settings";
 import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
 import type { LayoutMode } from "@/enums/settings/layout.enum";
 import { applyTheme, generateThemeColors, toggleDarkMode, toggleSidebarColor } from "@/utils/theme";
+import { SETTINGS_KEYS } from "@/constants";
 
-type SettingsValue = boolean | string;
+// 🎯 设置项类型定义
+interface SettingsState {
+  // 界面显示设置
+  settingsVisible: boolean;
+  showTagsView: boolean;
+  showAppLogo: boolean;
+  showWatermark: boolean;
+
+  // 布局设置
+  layout: LayoutMode;
+  sidebarColorScheme: string;
+
+  // 主题设置
+  theme: ThemeMode;
+  themeColor: string;
+}
+
+// 🎯 可变更的设置项类型
+type MutableSetting = Exclude<keyof SettingsState, "settingsVisible">;
+type SettingValue<K extends MutableSetting> = SettingsState[K];
 
 export const useSettingsStore = defineStore("setting", () => {
-  // 基本设置
+  // 🎯 基础设置 - 非持久化
-  const settingsVisible = ref(false);
+  const settingsVisible = ref<boolean>(false);
-  // 标签视图
+
-  const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
+  // 🎯 持久化设置 - 使用分组常量
-  // 侧边栏 Logo
+  const showTagsView = useStorage<boolean>(
-  const sidebarLogo = useStorage<boolean>("sidebarLogo", defaultSettings.sidebarLogo);
+    SETTINGS_KEYS.SHOW_TAGS_VIEW,
-  // 侧边栏配色方案 (经典蓝/极简白)
+    defaultSettings.showTagsView
+  );
+
+  const showAppLogo = useStorage<boolean>(SETTINGS_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo);
+
+  const showWatermark = useStorage<boolean>(
+    SETTINGS_KEYS.SHOW_WATERMARK,
+    defaultSettings.showWatermark
+  );
+
   const sidebarColorScheme = useStorage<string>(
-    "sidebarColorScheme",
+    SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME,
     defaultSettings.sidebarColorScheme
   );
-  // 布局
-  const layout = useStorage<LayoutMode>("layout", defaultSettings.layout as LayoutMode);
-  // 水印
-  const watermarkEnabled = useStorage<boolean>(
-    "watermarkEnabled",
-    defaultSettings.watermarkEnabled
-  );
 
-  // 主题
+  const layout = useStorage<LayoutMode>(SETTINGS_KEYS.LAYOUT, defaultSettings.layout as LayoutMode);
-  const themeColor = useStorage<string>("themeColor", defaultSettings.themeColor);
-  const theme = useStorage<ThemeMode>("theme", defaultSettings.theme);
 
-  //  监听主题变化
+  const themeColor = useStorage<string>(SETTINGS_KEYS.THEME_COLOR, defaultSettings.themeColor);
+
+  const theme = useStorage<ThemeMode>(SETTINGS_KEYS.THEME, defaultSettings.theme);
+
+  // 🎯 设置项映射
+  const settingsMap = {
+    showTagsView,
+    showAppLogo,
+    showWatermark,
+    sidebarColorScheme,
+    layout,
+  } as const;
+
+  // 🎯 监听器 - 主题变化
   watch(
     [theme, themeColor],
     ([newTheme, newThemeColor]) => {
@@ -40,7 +73,7 @@ export const useSettingsStore = defineStore("setting", () => {
     { immediate: true }
   );
 
-  //  监听浅色侧边栏配色方案变化
+  // 🎯 监听器 - 侧边栏配色方案变化
   watch(
     [sidebarColorScheme],
     ([newSidebarColorScheme]) => {
@@ -49,49 +82,79 @@ export const useSettingsStore = defineStore("setting", () => {
     { immediate: true }
   );
 
-  // 设置映射
+  // 🎯 统一的设置更新方法 - 类型安全
-  const settingsMap: Record<string, Ref<SettingsValue>> = {
+  function updateSetting<K extends keyof typeof settingsMap>(key: K, value: SettingValue<K>): void {
-    tagsView,
-    sidebarLogo,
-    sidebarColorScheme,
-    layout,
-    watermarkEnabled,
-  };
-
-  function changeSetting({ key, value }: { key: string; value: SettingsValue }) {
     const setting = settingsMap[key];
-    if (setting) setting.value = value;
+    if (setting) {
+      (setting as Ref<any>).value = value;
+    }
   }
 
-  function changeTheme(val: ThemeMode) {
+  // 🎯 主题相关的专用更新方法
-    theme.value = val;
+  function updateTheme(newTheme: ThemeMode): void {
+    theme.value = newTheme;
   }
 
-  function changeSidebarColor(val: string) {
+  function updateThemeColor(newColor: string): void {
-    sidebarColorScheme.value = val;
+    themeColor.value = newColor;
   }
 
-  function changeThemeColor(color: string) {
+  function updateSidebarColorScheme(newScheme: string): void {
-    themeColor.value = color;
+    sidebarColorScheme.value = newScheme;
   }
 
-  function changeLayout(val: LayoutMode) {
+  function updateLayout(newLayout: LayoutMode): void {
-    layout.value = val;
+    layout.value = newLayout;
+  }
+
+  // 🎯 设置面板显示控制
+  function toggleSettingsPanel(): void {
+    settingsVisible.value = !settingsVisible.value;
+  }
+
+  function showSettingsPanel(): void {
+    settingsVisible.value = true;
+  }
+
+  function hideSettingsPanel(): void {
+    settingsVisible.value = false;
+  }
+
+  // 🎯 批量重置设置
+  function resetSettings(): void {
+    showTagsView.value = defaultSettings.showTagsView;
+    showAppLogo.value = defaultSettings.showAppLogo;
+    showWatermark.value = defaultSettings.showWatermark;
+    sidebarColorScheme.value = defaultSettings.sidebarColorScheme;
+    layout.value = defaultSettings.layout as LayoutMode;
+    themeColor.value = defaultSettings.themeColor;
+    theme.value = defaultSettings.theme;
   }
 
   return {
+    // 状态
     settingsVisible,
-    tagsView,
+    showTagsView,
-    sidebarLogo,
+    showAppLogo,
+    showWatermark,
     sidebarColorScheme,
     layout,
     themeColor,
     theme,
-    watermarkEnabled,
+
-    changeSetting,
+    // 更新方法
-    changeTheme,
+    updateSetting,
-    changeThemeColor,
+    updateTheme,
-    changeLayout,
+    updateThemeColor,
-    changeSidebarColor,
+    updateSidebarColorScheme,
+    updateLayout,
+
+    // 面板控制
+    toggleSettingsPanel,
+    showSettingsPanel,
+    hideSettingsPanel,
+
+    // 重置功能
+    resetSettings,
   };
 });

src/types/global.d.ts

@@ -59,9 +59,9 @@ declare global {
     /** 是否显示设置 */
     showSettings: boolean;
     /** 是否显示多标签导航 */
-    tagsView: boolean;
+    showTagsView: boolean;
-    /** 是否显示侧边栏Logo */
+    /** 是否显示应用Logo */
-    sidebarLogo: boolean;
+    showAppLogo: boolean;
     /** 导航栏布局(left|top|mix) */
     layout: "left" | "top" | "mix";
     /** 主题颜色 */
@@ -72,8 +72,8 @@ declare global {
     size: string;
     /** 语言( zh-cn| en) */
     language: string;
-    /** 是否开启水印 */
+    /** 是否显示水印 */
-    watermarkEnabled: boolean;
+    showWatermark: boolean;
     /** 水印内容 */
     watermarkContent: string;
     /** 侧边栏配色方案 */

src/utils/auth.ts

@@ -1,5 +1,5 @@
 import { Storage } from "./storage";
-import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, REMEMBER_ME_KEY } from "@/constants/cache-keys";
+import { AUTH_KEYS } from "@/constants";
 
 /**
  * 身份验证工具类
@@ -23,11 +23,11 @@ export class Auth {
    * @returns 当前有效的访问令牌
    */
   static getAccessToken(): string {
-    const isRememberMe = Storage.get<boolean>(REMEMBER_ME_KEY, false);
+    const isRememberMe = Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
     // 根据"记住我"状态决定从哪个存储位置获取token
     return isRememberMe
-      ? Storage.get(ACCESS_TOKEN_KEY, "")
+      ? Storage.get(AUTH_KEYS.ACCESS_TOKEN, "")
-      : Storage.sessionGet(ACCESS_TOKEN_KEY, "");
+      : Storage.sessionGet(AUTH_KEYS.ACCESS_TOKEN, "");
   }
 
   /**
@@ -35,10 +35,10 @@ export class Auth {
    * @returns 当前有效的刷新令牌
    */
   static getRefreshToken(): string {
-    const isRememberMe = Storage.get<boolean>(REMEMBER_ME_KEY, false);
+    const isRememberMe = Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
     return isRememberMe
-      ? Storage.get(REFRESH_TOKEN_KEY, "")
+      ? Storage.get(AUTH_KEYS.REFRESH_TOKEN, "")
-      : Storage.sessionGet(REFRESH_TOKEN_KEY, "");
+      : Storage.sessionGet(AUTH_KEYS.REFRESH_TOKEN, "");
   }
 
   /**
@@ -49,19 +49,19 @@ export class Auth {
    */
   static setTokens(accessToken: string, refreshToken: string, rememberMe: boolean): void {
     // 保存"记住我"状态
-    Storage.set(REMEMBER_ME_KEY, rememberMe);
+    Storage.set(AUTH_KEYS.REMEMBER_ME, rememberMe);
 
     if (rememberMe) {
       // 使用localStorage长期保存
-      Storage.set(ACCESS_TOKEN_KEY, accessToken);
+      Storage.set(AUTH_KEYS.ACCESS_TOKEN, accessToken);
-      Storage.set(REFRESH_TOKEN_KEY, refreshToken);
+      Storage.set(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
     } else {
       // 使用sessionStorage临时保存
-      Storage.sessionSet(ACCESS_TOKEN_KEY, accessToken);
+      Storage.sessionSet(AUTH_KEYS.ACCESS_TOKEN, accessToken);
-      Storage.sessionSet(REFRESH_TOKEN_KEY, refreshToken);
+      Storage.sessionSet(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
       // 清除localStorage中可能存在的token
-      Storage.remove(ACCESS_TOKEN_KEY);
+      Storage.remove(AUTH_KEYS.ACCESS_TOKEN);
-      Storage.remove(REFRESH_TOKEN_KEY);
+      Storage.remove(AUTH_KEYS.REFRESH_TOKEN);
     }
   }
 
@@ -69,10 +69,10 @@ export class Auth {
    * 清除所有身份验证相关的数据
    */
   static clearAuth(): void {
-    Storage.remove(ACCESS_TOKEN_KEY);
+    Storage.remove(AUTH_KEYS.ACCESS_TOKEN);
-    Storage.remove(REFRESH_TOKEN_KEY);
+    Storage.remove(AUTH_KEYS.REFRESH_TOKEN);
-    Storage.sessionRemove(ACCESS_TOKEN_KEY);
+    Storage.sessionRemove(AUTH_KEYS.ACCESS_TOKEN);
-    Storage.sessionRemove(REFRESH_TOKEN_KEY);
+    Storage.sessionRemove(AUTH_KEYS.REFRESH_TOKEN);
     // 不清除记住我设置，保留用户偏好
   }
 
@@ -81,6 +81,6 @@ export class Auth {
    * @returns 是否记住我
    */
   static getRememberMe(): boolean {
-    return Storage.get<boolean>(REMEMBER_ME_KEY, false);
+    return Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
   }
 }