app.ts
2.91 KB
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import type {
ProjectConfig,
HeaderSetting,
MenuSetting,
TransitionSetting,
MultiTabsSetting,
} from '/#/config';
import type { BeforeMiniState } from '/#/store';
import { defineStore } from 'pinia';
import { store } from '/@/store';
import { ThemeEnum } from '/@/enums/appEnum';
import { APP_DARK_MODE_KEY_, PROJ_CFG_KEY } from '/@/enums/cacheEnum';
import { Persistent } from '/@/utils/cache/persistent';
import { darkMode } from '/@/settings/designSetting';
import { resetRouter } from '/@/router';
import { deepMerge } from '/@/utils';
interface AppState {
darkMode?: ThemeEnum;
// Page loading status
pageLoading: boolean;
// project config
projectConfig: ProjectConfig | null;
// When the window shrinks, remember some states, and restore these states when the window is restored
beforeMiniInfo: BeforeMiniState;
}
let timeId: TimeoutHandle;
export const useAppStore = defineStore({
id: 'app',
state: (): AppState => ({
darkMode: undefined,
pageLoading: false,
projectConfig: Persistent.getLocal(PROJ_CFG_KEY),
beforeMiniInfo: {},
}),
getters: {
getPageLoading(): boolean {
return this.pageLoading;
},
getDarkMode(): 'light' | 'dark' | string {
return this.darkMode || localStorage.getItem(APP_DARK_MODE_KEY_) || darkMode;
},
getBeforeMiniInfo(): BeforeMiniState {
return this.beforeMiniInfo;
},
getProjectConfig(): ProjectConfig {
return this.projectConfig || ({} as ProjectConfig);
},
getHeaderSetting(): HeaderSetting {
return this.getProjectConfig.headerSetting;
},
getMenuSetting(): MenuSetting {
return this.getProjectConfig.menuSetting;
},
getTransitionSetting(): TransitionSetting {
return this.getProjectConfig.transitionSetting;
},
getMultiTabsSetting(): MultiTabsSetting {
return this.getProjectConfig.multiTabsSetting;
},
},
actions: {
setPageLoading(loading: boolean): void {
this.pageLoading = loading;
},
setDarkMode(mode: ThemeEnum): void {
this.darkMode = mode;
localStorage.setItem(APP_DARK_MODE_KEY_, mode);
},
setBeforeMiniInfo(state: BeforeMiniState): void {
this.beforeMiniInfo = state;
},
setProjectConfig(config: DeepPartial<ProjectConfig>): void {
this.projectConfig = deepMerge(this.projectConfig || {}, config);
Persistent.setLocal(PROJ_CFG_KEY, this.projectConfig);
},
async resetAllState() {
resetRouter();
Persistent.clearAll();
},
async setPageLoadingAction(loading: boolean): Promise<void> {
if (loading) {
clearTimeout(timeId);
// Prevent flicker
timeId = setTimeout(() => {
this.setPageLoading(loading);
}, 50);
} else {
this.setPageLoading(loading);
clearTimeout(timeId);
}
},
},
});
// Need to be used outside the setup
export function useAppStoreWithOut() {
return useAppStore(store);
}