refactor: 命名优化统一

2025-05-25 08:22:50 +08:00
parent 01d83e21d1
commit 5eaccf112c
12 changed files with 219 additions and 105 deletions
--- a/src/App.vue
+++ b/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(() => {
--- a/src/constants/cache-keys.ts
+++ b/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";
-// 可在此处添加其他缓存键
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1 +1,4 @@
 export const ROLE_ROOT = "ROOT";
+
+// 🔗 导出所有存储键常量
+export * from "./storage-keys";
--- a/src/constants/storage-keys.ts
+++ b/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;
--- a/src/lang/package/en.ts
+++ b/src/lang/package/en.ts
@@ -70,10 +70,10 @@ export default {
    interface: "Interface",
    navigation: "Navigation",
    themeColor: "Theme Color",
-    tagsView: "Tags View",
-    sidebarLogo: "Sidebar Logo",
+    showTagsView: "Show Tags View",
+    showAppLogo: "Show App Logo",
    sidebarColorScheme: "Sidebar Color Scheme",
-    watermark: "Watermark",
+    showWatermark: "Show Watermark",
    classicBlue: "Classic Blue",
    minimalWhite: "Minimal White",
  },
--- a/src/lang/package/zh-cn.ts
+++ b/src/lang/package/zh-cn.ts
@@ -70,10 +70,13 @@ export default {
    interface: "界面设置",
    navigation: "导航设置",
    themeColor: "主题颜色",
-    tagsView: "开启 Tags-View",
-    sidebarLogo: "侧边栏 Logo",
+    themeColorTip: "主题颜色",
+    darkMode: "暗黑模式",
+    layoutSetting: "布局设置",
    sidebarColorScheme: "侧边栏配色",
-    watermark: "开启水印",
+    showTagsView: "显示页签",
+    showAppLogo: "显示Logo",
+    showWatermark: "显示水印",
    classicBlue: "经典蓝",
    minimalWhite: "极简白",
  },
--- a/src/layouts/components/Settings/index.vue
+++ b/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>
-        <el-switch v-model="settingsStore.tagsView" />
+        <span class="text-xs">{{ t("settings.showTagsView") }}</span>
+        <el-switch v-model="settingsStore.showTagsView" />
      </div>

      <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.sidebarLogo") }}</span>
-        <el-switch v-model="settingsStore.sidebarLogo" />
+        <span class="text-xs">{{ t("settings.showAppLogo") }}</span>
+        <el-switch v-model="settingsStore.showAppLogo" />
      </div>

      <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.watermark") }}</span>
-        <el-switch v-model="settingsStore.watermarkEnabled" />
+        <span class="text-xs">{{ t("settings.showWatermark") }}</span>
+        <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) {
--- a/src/layouts/composables/useLayout.ts
+++ b/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");
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -13,9 +13,9 @@ const defaultSettings: AppSettings = {
  // 是否显示设置
  showSettings: true,
  // 是否显示标签视图
-  tagsView: true,
-  // 是否显示侧边栏Logo
-  sidebarLogo: true,
+  showTagsView: true,
+  // 是否显示应用Logo
+  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,
  // 侧边栏配色方案
--- a/src/store/modules/settings.store.ts
+++ b/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 tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
-  // 侧边栏 Logo
-  const sidebarLogo = useStorage<boolean>("sidebarLogo", defaultSettings.sidebarLogo);
-  // 侧边栏配色方案 (经典蓝/极简白)
+  // 🎯 基础设置 - 非持久化
+  const settingsVisible = ref<boolean>(false);
+
+  // 🎯 持久化设置 - 使用分组常量
+  const showTagsView = useStorage<boolean>(
+    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 themeColor = useStorage<string>("themeColor", defaultSettings.themeColor);
-  const theme = useStorage<ThemeMode>("theme", defaultSettings.theme);
+  const layout = useStorage<LayoutMode>(SETTINGS_KEYS.LAYOUT, defaultSettings.layout as LayoutMode);

-  //  监听主题变化
+  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>> = {
-    tagsView,
-    sidebarLogo,
-    sidebarColorScheme,
-    layout,
-    watermarkEnabled,
-  };
-
-  function changeSetting({ key, value }: { key: string; value: SettingsValue }) {
+  // 🎯 统一的设置更新方法 - 类型安全
+  function updateSetting<K extends keyof typeof settingsMap>(key: K, value: SettingValue<K>): void {
    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) {
-    sidebarColorScheme.value = val;
+  function updateThemeColor(newColor: string): void {
+    themeColor.value = newColor;
  }

-  function changeThemeColor(color: string) {
-    themeColor.value = color;
+  function updateSidebarColorScheme(newScheme: string): void {
+    sidebarColorScheme.value = newScheme;
  }

-  function changeLayout(val: LayoutMode) {
-    layout.value = val;
+  function updateLayout(newLayout: LayoutMode): void {
+    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,
-    sidebarLogo,
+    showTagsView,
+    showAppLogo,
+    showWatermark,
    sidebarColorScheme,
    layout,
    themeColor,
    theme,
-    watermarkEnabled,
-    changeSetting,
-    changeTheme,
-    changeThemeColor,
-    changeLayout,
-    changeSidebarColor,
+
+    // 更新方法
+    updateSetting,
+    updateTheme,
+    updateThemeColor,
+    updateSidebarColorScheme,
+    updateLayout,
+
+    // 面板控制
+    toggleSettingsPanel,
+    showSettingsPanel,
+    hideSettingsPanel,
+
+    // 重置功能
+    resetSettings,
  };
 });
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -59,9 +59,9 @@ declare global {
    /** 是否显示设置 */
    showSettings: boolean;
    /** 是否显示多标签导航 */
-    tagsView: boolean;
-    /** 是否显示侧边栏Logo */
-    sidebarLogo: boolean;
+    showTagsView: boolean;
+    /** 是否显示应用Logo */
+    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;
    /** 侧边栏配色方案 */
--- a/src/utils/auth.ts
+++ b/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.sessionGet(ACCESS_TOKEN_KEY, "");
+      ? Storage.get(AUTH_KEYS.ACCESS_TOKEN, "")
+      : 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.sessionGet(REFRESH_TOKEN_KEY, "");
+      ? Storage.get(AUTH_KEYS.REFRESH_TOKEN, "")
+      : 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(REFRESH_TOKEN_KEY, refreshToken);
+      Storage.set(AUTH_KEYS.ACCESS_TOKEN, accessToken);
+      Storage.set(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
    } else {
      // 使用sessionStorage临时保存
-      Storage.sessionSet(ACCESS_TOKEN_KEY, accessToken);
-      Storage.sessionSet(REFRESH_TOKEN_KEY, refreshToken);
+      Storage.sessionSet(AUTH_KEYS.ACCESS_TOKEN, accessToken);
+      Storage.sessionSet(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
      // 清除localStorage中可能存在的token
-      Storage.remove(ACCESS_TOKEN_KEY);
-      Storage.remove(REFRESH_TOKEN_KEY);
+      Storage.remove(AUTH_KEYS.ACCESS_TOKEN);
+      Storage.remove(AUTH_KEYS.REFRESH_TOKEN);
    }
  }

@@ -69,10 +69,10 @@ export class Auth {
   * 清除所有身份验证相关的数据
   */
  static clearAuth(): void {
-    Storage.remove(ACCESS_TOKEN_KEY);
-    Storage.remove(REFRESH_TOKEN_KEY);
-    Storage.sessionRemove(ACCESS_TOKEN_KEY);
-    Storage.sessionRemove(REFRESH_TOKEN_KEY);
+    Storage.remove(AUTH_KEYS.ACCESS_TOKEN);
+    Storage.remove(AUTH_KEYS.REFRESH_TOKEN);
+    Storage.sessionRemove(AUTH_KEYS.ACCESS_TOKEN);
+    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);
  }
 }