tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 使用枚举类型替代字符串类型，增强类型安全

Browse Source 
更新相关函数和变量的类型定义
This commit is contained in:
zimo493
2025-04-03 15:00:16 +08:00
parent 8dcdecfde4
commit 6026e9cac0
3 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/store/modules/settings.store.ts
View File

@@ -1,7 +1,7 @@
import defaultSettings from "@/settings"; import defaultSettings from "@/settings";
import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum"; import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
import { LayoutMode } from "@/enums/settings/layout.enum"; import { LayoutMode } from "@/enums/settings/layout.enum";
import { generateThemeColors, applyTheme, toggleDarkMode, toggleSidebarColor } from "@/utils/theme"; import { applyTheme, generateThemeColors, toggleDarkMode, toggleSidebarColor } from "@/utils/theme";
type SettingsValue = boolean | string; type SettingsValue = boolean | string;
@@ -27,7 +27,7 @@ export const useSettingsStore = defineStore("setting", () => {
// 主题 // 主题
const themeColor = useStorage<string>("themeColor", defaultSettings.themeColor); const themeColor = useStorage<string>("themeColor", defaultSettings.themeColor);
const theme = useStorage<string>("theme", defaultSettings.theme); const theme = useStorage<ThemeMode>("theme", defaultSettings.theme);
// 监听主题变化 // 监听主题变化
watch( watch(
@@ -63,7 +63,7 @@ export const useSettingsStore = defineStore("setting", () => {
if (setting) setting.value = value; if (setting) setting.value = value;
} }
function changeTheme(val: string) { function changeTheme(val: ThemeMode) {
theme.value = val; theme.value = val;
} }

2
src/types/global.d.ts vendored
View File

@@ -67,7 +67,7 @@ declare global {
/** 主题颜色 */ /** 主题颜色 */
themeColor: string; themeColor: string;
/** 主题模式(dark|light) */ /** 主题模式(dark|light) */
theme: string; theme: import("@/enums/settings/theme.enum").ThemeMode;
/** 布局大小(default |large |small) */ /** 布局大小(default |large |small) */
size: string; size: string;
/** 语言( zh-cn| en) */ /** 语言( zh-cn| en) */

17
src/utils/theme.ts
View File

@@ -1,3 +1,5 @@
import { ThemeMode } from "@/enums";
// 辅助函数：将十六进制颜色转换为 RGB // 辅助函数：将十六进制颜色转换为 RGB
function hexToRgb(hex: string): [number, number, number] { function hexToRgb(hex: string): [number, number, number] {
const bigint = parseInt(hex.slice(1), 16); const bigint = parseInt(hex.slice(1), 16);
@@ -49,21 +51,22 @@ export const getLightColor = (color: string, level: number): string => {
* @param primary 主题色 * @param primary 主题色
* @param theme 主题类型 * @param theme 主题类型
*/ */
export function generateThemeColors(primary: string, theme: string) { export function generateThemeColors(primary: string, theme: ThemeMode) {
const colors: Record<string, string> = { const colors: Record<string, string> = {
primary, primary,
}; };
// 生成浅色变体 // 生成浅色变体
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
const primaryColor = colors[`primary-light-${i}`] =
theme === "light" ? `${getLightColor(primary, i / 10)}` : `${getDarkColor(primary, i / 10)}`; theme === ThemeMode.LIGHT
colors[`primary-light-${i}`] = primaryColor; ? `${getLightColor(primary, i / 10)}`
: `${getDarkColor(primary, i / 10)}`;
} }
// 生成深色变体 // 生成深色变体
colors["primary-dark-2"] = colors["primary-dark-2"] =
theme === "light" ? `${getLightColor(primary, 0.2)}` : `${getDarkColor(primary, 0.3)}`; theme === ThemeMode.LIGHT ? `${getLightColor(primary, 0.2)}` : `${getDarkColor(primary, 0.3)}`;
return colors; return colors;
} }
@@ -83,9 +86,9 @@ export function applyTheme(colors: Record<string, string>) {
*/ */
export function toggleDarkMode(isDark: boolean) { export function toggleDarkMode(isDark: boolean) {
if (isDark) { if (isDark) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add(ThemeMode.DARK);
} else { } else {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove(ThemeMode.DARK);
} }
} }