1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| import defaultSettings from "@/settings";
| import { ThemeMode } from "@/enums/settings/theme.enum";
| import { LayoutMode } from "@/enums/settings/layout.enum";
| import { generateThemeColors, applyTheme, toggleDarkMode } from "@/utils/theme";
|
| type SettingsValue = boolean | string;
|
| export const useSettingsStore = defineStore("setting", () => {
| // 基本设置
| const settingsVisible = ref(false);
| // 标签视图
| const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
| // 侧边栏 Logo
| const sidebarLogo = useStorage<boolean>("sidebarLogo", defaultSettings.sidebarLogo);
| // 布局
| const layout = useStorage<LayoutMode>("layout", defaultSettings.layout as LayoutMode);
| // 水印
| const watermarkEnabled = useStorage<boolean>(
| "watermarkEnabled",
| defaultSettings.watermarkEnabled
| );
|
| // 主题
| const themeColor = useStorage<string>("themeColor", defaultSettings.themeColor);
| const theme = useStorage<string>("theme", defaultSettings.theme);
|
| // 监听主题变化
| watch(
| [theme, themeColor],
| ([newTheme, newThemeColor]) => {
| toggleDarkMode(newTheme === ThemeMode.DARK);
| const colors = generateThemeColors(newThemeColor);
| applyTheme(colors);
| },
| { immediate: true }
| );
| // 设置更改函数
| const settingsMap: Record<string, Ref<SettingsValue>> = {
| tagsView,
| sidebarLogo,
| layout,
| watermarkEnabled,
| };
|
| function changeSetting({ key, value }: { key: string; value: SettingsValue }) {
| const setting = settingsMap[key];
| if (setting) setting.value = value;
| }
|
| function changeTheme(val: string) {
| theme.value = val;
| }
|
| function changeThemeColor(color: string) {
| themeColor.value = color;
| }
|
| function changeLayout(val: LayoutMode) {
| layout.value = val;
| }
|
| return {
| settingsVisible,
| tagsView,
| sidebarLogo,
| layout,
| themeColor,
| theme,
| watermarkEnabled,
| changeSetting,
| changeTheme,
| changeThemeColor,
| changeLayout,
| };
| });
|
|
