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 { SidebarColor, ThemeMode } from "@/enums/settings/theme.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;
@@ -27,7 +27,7 @@ export const useSettingsStore = defineStore("setting", () => {
// 主题
const themeColor = useStorage<string>("themeColor", defaultSettings.themeColor);
const theme = useStorage<string>("theme", defaultSettings.theme);
const theme = useStorage<ThemeMode>("theme", defaultSettings.theme);
// 监听主题变化
watch(
@@ -63,7 +63,7 @@ export const useSettingsStore = defineStore("setting", () => {
if (setting) setting.value = value;
}
function changeTheme(val: string) {
function changeTheme(val: ThemeMode) {
theme.value = val;
}

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

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

17
src/utils/theme.ts
View File

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