From 5eaccf112ceb8a52ab5ecd88ae21795e7d1e695d Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Sun, 25 May 2025 08:22:50 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=91=BD=E5=90=8D=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=BB=9F=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 4 +- src/constants/cache-keys.ts | 8 -- src/constants/index.ts | 3 + src/constants/storage-keys.ts | 53 ++++++++ src/lang/package/en.ts | 6 +- src/lang/package/zh-cn.ts | 9 +- src/layouts/components/Settings/index.vue | 20 +-- src/layouts/composables/useLayout.ts | 4 +- src/settings.ts | 10 +- src/store/modules/settings.store.ts | 159 +++++++++++++++------- src/types/global.d.ts | 10 +- src/utils/auth.ts | 38 +++--- 12 files changed, 219 insertions(+), 105 deletions(-) delete mode 100644 src/constants/cache-keys.ts create mode 100644 src/constants/storage-keys.ts diff --git a/src/App.vue b/src/App.vue index 764bbf26..bb0263fd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ @@ -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(() => { diff --git a/src/constants/cache-keys.ts b/src/constants/cache-keys.ts deleted file mode 100644 index e1355933..00000000 --- a/src/constants/cache-keys.ts +++ /dev/null @@ -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"; -// 可在此处添加其他缓存键 diff --git a/src/constants/index.ts b/src/constants/index.ts index 83e52a3c..f8be9d9d 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1 +1,4 @@ export const ROLE_ROOT = "ROOT"; + +// 🔗 导出所有存储键常量 +export * from "./storage-keys"; diff --git a/src/constants/storage-keys.ts b/src/constants/storage-keys.ts new file mode 100644 index 00000000..8f2b95dc --- /dev/null +++ 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; diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 73653665..97944db1 100644 --- 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", }, diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index c97e2f0d..429cc8e6 100644 --- 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: "极简白", }, diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue index 0766d655..b5241645 100644 --- a/src/layouts/components/Settings/index.vue +++ b/src/layouts/components/Settings/index.vue @@ -32,18 +32,18 @@
- {{ t("settings.tagsView") }} - + {{ t("settings.showTagsView") }} +
- {{ t("settings.sidebarLogo") }} - + {{ t("settings.showAppLogo") }} +
- {{ t("settings.watermark") }} - + {{ t("settings.showWatermark") }} +
{{ t("settings.sidebarColorScheme") }} @@ -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) { diff --git a/src/layouts/composables/useLayout.ts b/src/layouts/composables/useLayout.ts index 07dfe373..31fec66f 100644 --- 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"); diff --git a/src/settings.ts b/src/settings.ts index dbd14afc..817a9c7b 100644 --- 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, // 侧边栏配色方案 diff --git a/src/store/modules/settings.store.ts b/src/store/modules/settings.store.ts index 30fb0808..d9628b3f 100644 --- 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; +type SettingValue = SettingsState[K]; export const useSettingsStore = defineStore("setting", () => { - // 基本设置 - const settingsVisible = ref(false); - // 标签视图 - const tagsView = useStorage("tagsView", defaultSettings.tagsView); - // 侧边栏 Logo - const sidebarLogo = useStorage("sidebarLogo", defaultSettings.sidebarLogo); - // 侧边栏配色方案 (经典蓝/极简白) + // 🎯 基础设置 - 非持久化 + const settingsVisible = ref(false); + + // 🎯 持久化设置 - 使用分组常量 + const showTagsView = useStorage( + SETTINGS_KEYS.SHOW_TAGS_VIEW, + defaultSettings.showTagsView + ); + + const showAppLogo = useStorage(SETTINGS_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo); + + const showWatermark = useStorage( + SETTINGS_KEYS.SHOW_WATERMARK, + defaultSettings.showWatermark + ); + const sidebarColorScheme = useStorage( - "sidebarColorScheme", + SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME, defaultSettings.sidebarColorScheme ); - // 布局 - const layout = useStorage("layout", defaultSettings.layout as LayoutMode); - // 水印 - const watermarkEnabled = useStorage( - "watermarkEnabled", - defaultSettings.watermarkEnabled - ); - // 主题 - const themeColor = useStorage("themeColor", defaultSettings.themeColor); - const theme = useStorage("theme", defaultSettings.theme); + const layout = useStorage(SETTINGS_KEYS.LAYOUT, defaultSettings.layout as LayoutMode); - // 监听主题变化 + const themeColor = useStorage(SETTINGS_KEYS.THEME_COLOR, defaultSettings.themeColor); + + const theme = useStorage(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> = { - tagsView, - sidebarLogo, - sidebarColorScheme, - layout, - watermarkEnabled, - }; - - function changeSetting({ key, value }: { key: string; value: SettingsValue }) { + // 🎯 统一的设置更新方法 - 类型安全 + function updateSetting(key: K, value: SettingValue): void { const setting = settingsMap[key]; - if (setting) setting.value = value; + if (setting) { + (setting as Ref).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, }; }); diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 460ba70c..25487ca1 100644 --- 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; /** 侧边栏配色方案 */ diff --git a/src/utils/auth.ts b/src/utils/auth.ts index 869ea836..db0a7403 100644 --- 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(REMEMBER_ME_KEY, false); + const isRememberMe = Storage.get(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(REMEMBER_ME_KEY, false); + const isRememberMe = Storage.get(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(REMEMBER_ME_KEY, false); + return Storage.get(AUTH_KEYS.REMEMBER_ME, false); } }