Skip to content

Commit 070a43d

Browse files
haoxianruihaoxianrui
committed
refactor: ♻️ 重构存储键命名规范
1 parent e84d87d commit 070a43d

File tree

5 files changed

+148
-79
lines changed

5 files changed

+148
-79
lines changed

‎src/constants/index.ts‎

Lines changed: 117 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,118 @@
1-
export const ROLE_ROOT = "ROOT";
1+
/**
2+
* 项目常量统一管理
3+
*
4+
* 存储键命名规范：
5+
* - 使用小写 + 冒号分隔 + 名称空间
6+
* - 格式：myapp:user:token
7+
* - 便于清理和避免冲突
8+
* - 当需要版本升级、兼容旧数据，可在 key 中加入版本如 myapp:v2:user:token。
9+
*/
210

3-
// 🔗 导出所有存储键常量
4-
export * from "./storage-keys";
11+
// 🏷️ 应用前缀常量
12+
export const APP_PREFIX = "vea";
13+
14+
// 📦 存储键统一管理
15+
export const STORAGE_KEYS = {
16+
// 🔐 用户认证相关
17+
ACCESS_TOKEN: `${APP_PREFIX}:auth:access_token`, // JWT 访问令牌，用于 API 请求认证
18+
REFRESH_TOKEN: `${APP_PREFIX}:auth:refresh_token`, // JWT 刷新令牌，用于获取新的访问令牌
19+
REMEMBER_ME: `${APP_PREFIX}:auth:remember_me`, // 记住登录状态，控制登录持久化
20+
21+
// 🏗️ 系统核心相关
22+
DICT_CACHE: `${APP_PREFIX}:system:dict_cache`, // 字典数据缓存，存储系统字典配置信息
23+
24+
// 🎨 系统设置相关
25+
SHOW_TAGS_VIEW: `${APP_PREFIX}:ui:show_tags_view`, // 是否显示标签页视图
26+
SHOW_APP_LOGO: `${APP_PREFIX}:ui:show_app_logo`, // 是否显示应用 Logo
27+
SHOW_WATERMARK: `${APP_PREFIX}:ui:show_watermark`, // 是否显示水印
28+
LAYOUT: `${APP_PREFIX}:ui:layout`, // 布局模式：vertical(垂直) | horizontal(水平) | mix(混合)
29+
SIDEBAR_COLOR_SCHEME: `${APP_PREFIX}:ui:sidebar_color_scheme`, // 侧边栏颜色方案：light(浅色) | dark(深色)
30+
THEME: `${APP_PREFIX}:ui:theme`, // 主题模式：light(浅色) | dark(深色) | auto(自动)
31+
THEME_COLOR: `${APP_PREFIX}:ui:theme_color`, // 主题色，用于自定义主题色彩
32+
33+
// 📱 应用状态相关
34+
DEVICE: `${APP_PREFIX}:app:device`, // 设备类型：desktop(桌面) | mobile(移动端) | tablet(平板)
35+
SIZE: `${APP_PREFIX}:app:size`, // 屏幕尺寸：large(大) | medium(中) | small(小)
36+
LANGUAGE: `${APP_PREFIX}:app:language`, // 应用语言：zh-CN(中文) | en-US(英文) 等
37+
SIDEBAR_STATUS: `${APP_PREFIX}:app:sidebar_status`, // 侧边栏状态：opened(展开) | closed(收起)
38+
ACTIVE_TOP_MENU_PATH: `${APP_PREFIX}:app:active_top_menu_path`, // 当前激活的顶部菜单路径
39+
} as const;
40+
41+
// 🎯 功能分组的键映射对象（向后兼容）
42+
// 这些分组对象提供了按功能分类的存储键访问方式，便于在特定场景下批量操作
43+
44+
// 👤 用户角色相关
45+
export const ROLE_ROOT = "ROOT"; // 超级管理员角色标识
46+
47+
// 🔐 认证相关键集合
48+
// 包含所有与用户认证、授权相关的存储键
49+
export const AUTH_KEYS = {
50+
ACCESS_TOKEN: STORAGE_KEYS.ACCESS_TOKEN, // JWT 访问令牌
51+
REFRESH_TOKEN: STORAGE_KEYS.REFRESH_TOKEN, // JWT 刷新令牌
52+
REMEMBER_ME: STORAGE_KEYS.REMEMBER_ME, // 记住登录状态
53+
} as const;
54+
55+
// 🏗️ 系统核心相关键集合
56+
// 包含系统核心功能相关的存储键
57+
export const SYSTEM_KEYS = {
58+
DICT_CACHE: STORAGE_KEYS.DICT_CACHE, // 字典数据缓存
59+
} as const;
60+
61+
// 🎨 设置相关键集合
62+
// 包含所有用户界面设置和主题相关的存储键
63+
export const SETTINGS_KEYS = {
64+
SHOW_TAGS_VIEW: STORAGE_KEYS.SHOW_TAGS_VIEW, // 是否显示标签页视图
65+
SHOW_APP_LOGO: STORAGE_KEYS.SHOW_APP_LOGO, // 是否显示应用 Logo
66+
SHOW_WATERMARK: STORAGE_KEYS.SHOW_WATERMARK, // 是否显示水印
67+
SIDEBAR_COLOR_SCHEME: STORAGE_KEYS.SIDEBAR_COLOR_SCHEME, // 侧边栏颜色方案
68+
LAYOUT: STORAGE_KEYS.LAYOUT, // 布局模式
69+
THEME_COLOR: STORAGE_KEYS.THEME_COLOR, // 主题色
70+
THEME: STORAGE_KEYS.THEME, // 主题模式
71+
} as const;
72+
73+
// 📱 应用状态相关键集合
74+
// 包含应用运行时状态相关的存储键
75+
export const APP_KEYS = {
76+
DEVICE: STORAGE_KEYS.DEVICE, // 设备类型
77+
SIZE: STORAGE_KEYS.SIZE, // 屏幕尺寸
78+
LANGUAGE: STORAGE_KEYS.LANGUAGE, // 应用语言
79+
SIDEBAR_STATUS: STORAGE_KEYS.SIDEBAR_STATUS, // 侧边栏状态
80+
ACTIVE_TOP_MENU_PATH: STORAGE_KEYS.ACTIVE_TOP_MENU_PATH, // 当前激活的顶部菜单路径
81+
} as const;
82+
83+
// 📦 所有存储键的统一集合
84+
// 包含所有存储键的完整映射，用于批量操作或遍历
85+
export const ALL_STORAGE_KEYS = {
86+
...AUTH_KEYS, // 认证相关键
87+
...SYSTEM_KEYS, // 系统核心键
88+
...SETTINGS_KEYS, // 设置相关键
89+
...APP_KEYS, // 应用状态键
90+
} as const;
91+
92+
// 🔧 类型定义
93+
export type StorageKey = (typeof STORAGE_KEYS)[keyof typeof STORAGE_KEYS];
94+
95+
// 🧹 存储清理工具
96+
export const STORAGE_UTILS = {
97+
// 清理所有项目相关的存储
98+
clearAll: () => {
99+
const keys = Object.values(STORAGE_KEYS);
100+
keys.forEach((key) => {
101+
localStorage.removeItem(key);
102+
sessionStorage.removeItem(key);
103+
});
104+
},
105+
106+
// 清理特定分类的存储
107+
clearByCategory: (category: "auth" | "system" | "ui" | "app") => {
108+
const prefix = `${APP_PREFIX}:${category}:`;
109+
const keys = Object.values(STORAGE_KEYS).filter((key) => key.startsWith(prefix));
110+
keys.forEach((key) => {
111+
localStorage.removeItem(key);
112+
sessionStorage.removeItem(key);
113+
});
114+
},
115+
116+
// 获取所有项目相关的存储键
117+
getAllKeys: () => Object.values(STORAGE_KEYS),
118+
} as const;

‎src/constants/storage-keys.ts‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎src/store/modules/app-store.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,24 @@ import en from "element-plus/es/locale/lang/en";
66
import { store } from "@/store";
77
import { DeviceEnum } from "@/enums/settings/device.enum";
88
import { SidebarStatus } from "@/enums/settings/layout.enum";
9+
import { STORAGE_KEYS } from "@/constants";
910

1011
export const useAppStore = defineStore("app", () => {
1112
// 设备类型
12-
const device = useStorage("device", DeviceEnum.DESKTOP);
13+
const device = useStorage(STORAGE_KEYS.DEVICE, DeviceEnum.DESKTOP);
1314
// 布局大小
14-
const size = useStorage("size", defaultSettings.size);
15+
const size = useStorage(STORAGE_KEYS.SIZE, defaultSettings.size);
1516
// 语言
16-
const language = useStorage("language", defaultSettings.language);
17+
const language = useStorage(STORAGE_KEYS.LANGUAGE, defaultSettings.language);
1718
// 侧边栏状态
18-
const sidebarStatus = useStorage("sidebarStatus", SidebarStatus.CLOSED);
19+
const sidebarStatus = useStorage(STORAGE_KEYS.SIDEBAR_STATUS, SidebarStatus.CLOSED);
1920
const sidebar = reactive({
2021
opened: sidebarStatus.value === SidebarStatus.OPENED,
2122
withoutAnimation: false,
2223
});
2324

2425
// 顶部菜单激活路径
25-
const activeTopMenuPath = useStorage("activeTopMenuPath", "");
26+
const activeTopMenuPath = useStorage(STORAGE_KEYS.ACTIVE_TOP_MENU_PATH, "");
2627

2728
/**
2829
* 根据语言标识读取对应的语言包

‎src/store/modules/dict-store.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { store } from "@/store";
22
import DictAPI, { type DictItemOption } from "@/api/system/dict-api";
3+
import { STORAGE_KEYS } from "@/constants";
34

45
export const useDictStore = defineStore("dict", () => {
56
// 字典数据缓存
6-
const dictCache = useStorage<Record<string, DictItemOption[]>>("dict_cache", {});
7+
const dictCache = useStorage<Record<string, DictItemOption[]>>(STORAGE_KEYS.DICT_CACHE, {});
78

89
// 请求队列（防止重复请求）
910
const requestQueue: Record<string, Promise<void>> = {};

‎src/store/modules/settings-store.ts‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defaultSettings } from "@/settings";
22
import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
33
import type { LayoutMode } from "@/enums/settings/layout.enum";
44
import { applyTheme, generateThemeColors, toggleDarkMode, toggleSidebarColor } from "@/utils/theme";
5-
import { SETTINGS_KEYS } from "@/constants";
5+
import { STORAGE_KEYS } from "@/constants";
66

77
// 🎯 设置项类型定义
88
interface SettingsState {
@@ -26,34 +26,40 @@ type MutableSetting = Exclude<keyof SettingsState, "settingsVisible">;
2626
type SettingValue<K extends MutableSetting> = SettingsState[K];
2727

2828
export const useSettingsStore = defineStore("setting", () => {
29-
// 🎯 基础设置 - 非持久化
29+
// 设置面板可见性
3030
const settingsVisible = ref<boolean>(false);
3131

32-
// 🎯 持久化设置 - 使用分组常量
32+
// 是否显示标签页视图
3333
const showTagsView = useStorage<boolean>(
34-
SETTINGS_KEYS.SHOW_TAGS_VIEW,
34+
STORAGE_KEYS.SHOW_TAGS_VIEW,
3535
defaultSettings.showTagsView
3636
);
3737

38-
const showAppLogo = useStorage<boolean>(SETTINGS_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo);
38+
// 是否显示应用Logo
39+
const showAppLogo = useStorage<boolean>(STORAGE_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo);
3940

41+
// 是否显示水印
4042
const showWatermark = useStorage<boolean>(
41-
SETTINGS_KEYS.SHOW_WATERMARK,
43+
STORAGE_KEYS.SHOW_WATERMARK,
4244
defaultSettings.showWatermark
4345
);
4446

47+
// 侧边栏配色方案
4548
const sidebarColorScheme = useStorage<string>(
46-
SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME,
49+
STORAGE_KEYS.SIDEBAR_COLOR_SCHEME,
4750
defaultSettings.sidebarColorScheme
4851
);
4952

50-
const layout = useStorage<LayoutMode>(SETTINGS_KEYS.LAYOUT, defaultSettings.layout as LayoutMode);
53+
// 布局模式
54+
const layout = useStorage<LayoutMode>(STORAGE_KEYS.LAYOUT, defaultSettings.layout as LayoutMode);
5155

52-
const themeColor = useStorage<string>(SETTINGS_KEYS.THEME_COLOR, defaultSettings.themeColor);
56+
// 主题颜色
57+
const themeColor = useStorage<string>(STORAGE_KEYS.THEME_COLOR, defaultSettings.themeColor);
5358

54-
const theme = useStorage<ThemeMode>(SETTINGS_KEYS.THEME, defaultSettings.theme);
59+
// 主题模式（亮色/暗色）
60+
const theme = useStorage<ThemeMode>(STORAGE_KEYS.THEME, defaultSettings.theme);
5561

56-
// 🎯 设置项映射
62+
// 设置项映射，用于统一管理
5763
const settingsMap = {
5864
showTagsView,
5965
showAppLogo,
@@ -62,7 +68,7 @@ export const useSettingsStore = defineStore("setting", () => {
6268
layout,
6369
} as const;
6470

65-
// 🎯 监听器 - 主题变化
71+
// 监听主题变化，自动应用样式
6672
watch(
6773
[theme, themeColor],
6874
([newTheme, newThemeColor]) => {
@@ -73,7 +79,7 @@ export const useSettingsStore = defineStore("setting", () => {
7379
{ immediate: true }
7480
);
7581

76-
// 🎯 监听器 - 侧边栏配色方案变化
82+
// 监听侧边栏配色变化
7783
watch(
7884
[sidebarColorScheme],
7985
([newSidebarColorScheme]) => {
@@ -82,15 +88,15 @@ export const useSettingsStore = defineStore("setting", () => {
8288
{ immediate: true }
8389
);
8490

85-
// 🎯 统一的设置更新方法 - 类型安全
91+
// 通用设置更新方法
8692
function updateSetting<K extends keyof typeof settingsMap>(key: K, value: SettingValue<K>): void {
8793
const setting = settingsMap[key];
8894
if (setting) {
8995
(setting as Ref<any>).value = value;
9096
}
9197
}
9298

93-
// 🎯 主题相关的专用更新方法
99+
// 主题更新方法
94100
function updateTheme(newTheme: ThemeMode): void {
95101
theme.value = newTheme;
96102
}
@@ -107,7 +113,7 @@ export const useSettingsStore = defineStore("setting", () => {
107113
layout.value = newLayout;
108114
}
109115

110-
// 🎯 设置面板显示控制
116+
// 设置面板控制
111117
function toggleSettingsPanel(): void {
112118
settingsVisible.value = !settingsVisible.value;
113119
}
@@ -120,7 +126,7 @@ export const useSettingsStore = defineStore("setting", () => {
120126
settingsVisible.value = false;
121127
}
122128

123-
// 🎯 批量重置设置
129+
// 重置所有设置
124130
function resetSettings(): void {
125131
showTagsView.value = defaultSettings.showTagsView;
126132
showAppLogo.value = defaultSettings.showAppLogo;

0 commit comments

Comments
 (0)