Skip to content

Commit 7bda1a7

Browse files
haoxianruihaoxianrui
committed
refactor: ♻️ 规范常量文件
1 parent 4972173 commit 7bda1a7

File tree

2 files changed

+95
-91
lines changed

2 files changed

+95
-91
lines changed

‎src/constants/index.ts‎

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

11-
// 🏷️ 应用前缀常量
126
export const APP_PREFIX = "vea";
137

14-
// 📦 存储键统一管理
158
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(收起)
9+
// 用户认证相关
10+
ACCESS_TOKEN: `${APP_PREFIX}:auth:access_token`, // JWT访问令牌
11+
REFRESH_TOKEN: `${APP_PREFIX}:auth:refresh_token`, // JWT刷新令牌
12+
REMEMBER_ME: `${APP_PREFIX}:auth:remember_me`, // 记住登录状态
13+
14+
// 系统核心相关
15+
DICT_CACHE: `${APP_PREFIX}:system:dict_cache`, // 字典数据缓存
16+
17+
// UI设置相关
18+
SHOW_TAGS_VIEW: `${APP_PREFIX}:ui:show_tags_view`, // 显示标签页视图
19+
SHOW_APP_LOGO: `${APP_PREFIX}:ui:show_app_logo`, // 显示应用Logo
20+
SHOW_WATERMARK: `${APP_PREFIX}:ui:show_watermark`, // 显示水印
21+
LAYOUT: `${APP_PREFIX}:ui:layout`, // 布局模式
22+
SIDEBAR_COLOR_SCHEME: `${APP_PREFIX}:ui:sidebar_color_scheme`, // 侧边栏配色方案
23+
THEME: `${APP_PREFIX}:ui:theme`, // 主题模式
24+
THEME_COLOR: `${APP_PREFIX}:ui:theme_color`, // 主题色
25+
26+
// 应用状态相关
27+
DEVICE: `${APP_PREFIX}:app:device`, // 设备类型
28+
SIZE: `${APP_PREFIX}:app:size`, // 屏幕尺寸
29+
LANGUAGE: `${APP_PREFIX}:app:language`, // 应用语言
30+
SIDEBAR_STATUS: `${APP_PREFIX}:app:sidebar_status`, // 侧边栏状态
3831
ACTIVE_TOP_MENU_PATH: `${APP_PREFIX}:app:active_top_menu_path`, // 当前激活的顶部菜单路径
3932
} as const;
4033

41-
// 🎯 功能分组的键映射对象（向后兼容）
42-
// 这些分组对象提供了按功能分类的存储键访问方式，便于在特定场景下批量操作
43-
44-
// 👤 用户角色相关
45-
export const ROLE_ROOT = "ROOT"; // 超级管理员角色标识
34+
export const ROLE_ROOT = "ROOT"; // 超级管理员角色
4635

47-
// 🔐 认证相关键集合
48-
// 包含所有与用户认证、授权相关的存储键
36+
// 分组键集合（便于批量操作）
4937
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, // 记住登录状态
38+
ACCESS_TOKEN: STORAGE_KEYS.ACCESS_TOKEN,
39+
REFRESH_TOKEN: STORAGE_KEYS.REFRESH_TOKEN,
40+
REMEMBER_ME: STORAGE_KEYS.REMEMBER_ME,
5341
} as const;
5442

55-
// 🏗️ 系统核心相关键集合
56-
// 包含系统核心功能相关的存储键
5743
export const SYSTEM_KEYS = {
58-
DICT_CACHE: STORAGE_KEYS.DICT_CACHE, // 字典数据缓存
44+
DICT_CACHE: STORAGE_KEYS.DICT_CACHE,
5945
} as const;
6046

61-
// 🎨 设置相关键集合
62-
// 包含所有用户界面设置和主题相关的存储键
6347
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, // 主题模式
48+
SHOW_TAGS_VIEW: STORAGE_KEYS.SHOW_TAGS_VIEW,
49+
SHOW_APP_LOGO: STORAGE_KEYS.SHOW_APP_LOGO,
50+
SHOW_WATERMARK: STORAGE_KEYS.SHOW_WATERMARK,
51+
SIDEBAR_COLOR_SCHEME: STORAGE_KEYS.SIDEBAR_COLOR_SCHEME,
52+
LAYOUT: STORAGE_KEYS.LAYOUT,
53+
THEME_COLOR: STORAGE_KEYS.THEME_COLOR,
54+
THEME: STORAGE_KEYS.THEME,
7155
} as const;
7256

73-
// 📱 应用状态相关键集合
74-
// 包含应用运行时状态相关的存储键
7557
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, // 当前激活的顶部菜单路径
58+
DEVICE: STORAGE_KEYS.DEVICE,
59+
SIZE: STORAGE_KEYS.SIZE,
60+
LANGUAGE: STORAGE_KEYS.LANGUAGE,
61+
SIDEBAR_STATUS: STORAGE_KEYS.SIDEBAR_STATUS,
62+
ACTIVE_TOP_MENU_PATH: STORAGE_KEYS.ACTIVE_TOP_MENU_PATH,
8163
} as const;
8264

83-
// 📦 所有存储键的统一集合
84-
// 包含所有存储键的完整映射，用于批量操作或遍历
8565
export const ALL_STORAGE_KEYS = {
86-
...AUTH_KEYS, // 认证相关键
87-
...SYSTEM_KEYS, // 系统核心键
88-
...SETTINGS_KEYS, // 设置相关键
89-
...APP_KEYS, // 应用状态键
66+
...AUTH_KEYS,
67+
...SYSTEM_KEYS,
68+
...SETTINGS_KEYS,
69+
...APP_KEYS,
9070
} as const;
9171

92-
// 🔧 类型定义
9372
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/utils/storage.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { STORAGE_KEYS, APP_PREFIX } from "@/constants";
2+
13
/**
24
* 存储工具类
35
* 提供localStorage和sessionStorage操作方法
@@ -48,4 +50,52 @@ export class Storage {
4850
static sessionRemove(key: string): void {
4951
sessionStorage.removeItem(key);
5052
}
53+
54+
/**
55+
* 存储清理工具方法
56+
*/
57+
// 清理指定键的存储（localStorage + sessionStorage）
58+
static clear(key: string): void {
59+
localStorage.removeItem(key);
60+
sessionStorage.removeItem(key);
61+
}
62+
63+
// 批量清理存储
64+
static clearMultiple(keys: string[]): void {
65+
keys.forEach((key) => {
66+
localStorage.removeItem(key);
67+
sessionStorage.removeItem(key);
68+
});
69+
}
70+
71+
// 清理指定前缀的存储
72+
static clearByPrefix(prefix: string): void {
73+
// localStorage 清理
74+
const localKeys = Object.keys(localStorage).filter((key) => key.startsWith(prefix));
75+
localKeys.forEach((key) => localStorage.removeItem(key));
76+
77+
// sessionStorage 清理
78+
const sessionKeys = Object.keys(sessionStorage).filter((key) => key.startsWith(prefix));
79+
sessionKeys.forEach((key) => sessionStorage.removeItem(key));
80+
}
81+
82+
/**
83+
* 项目特定的清理便利方法
84+
*/
85+
// 清理所有项目相关的存储
86+
static clearAllProject(): void {
87+
const keys = Object.values(STORAGE_KEYS);
88+
this.clearMultiple(keys);
89+
}
90+
91+
// 清理特定分类的存储
92+
static clearByCategory(category: "auth" | "system" | "ui" | "app"): void {
93+
const prefix = `${APP_PREFIX}:${category}:`;
94+
this.clearByPrefix(prefix);
95+
}
96+
97+
// 获取所有项目相关的存储键
98+
static getAllProjectKeys(): string[] {
99+
return Object.values(STORAGE_KEYS);
100+
}
51101
}

0 commit comments

Comments
 (0)