2022-01-15 14:56:48 +08:00

61 lines
1.7 KiB
TypeScript

import { defineStore } from 'pinia'
import { store } from '@/store'
import { theme, asideCollapsedWidth } from '@/settings/designSetting'
import { asideAllCollapsed } from '@/settings/systemSetting'
import { DesignStateType } from './designStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
import { ThemeEnum } from '@/enums/styleEnum'
const { GO_DESIGN_STORE } = StorageEnum
const { darkTheme, appTheme, appThemeList } = theme
const storageDesign = getLocalStorage(GO_DESIGN_STORE)
export const useDesignStore = defineStore({
id: 'useDesignStore',
state: (): DesignStateType =>
storageDesign || {
// 是否暗黑
darkTheme,
// 主题名称
themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
// 颜色色号
appTheme,
// 颜色列表
appThemeList,
// 侧边栏
asideAllCollapsed
},
getters: {
getDarkTheme(e): boolean {
return this.darkTheme
},
getAppTheme(): string {
return this.appTheme
},
getAppThemeList(): string[] {
return this.appThemeList
},
getAsideCollapsedWidth(): string {
return this.asideAllCollapsed ? '0' : asideCollapsedWidth
}
},
actions: {
changeTheme(): void {
this.darkTheme = !this.darkTheme
this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
setLocalStorage(GO_DESIGN_STORE, this.$state)
},
changeAsideAllCollapsed(): void {
this.asideAllCollapsed = !this.asideAllCollapsed
setLocalStorage(GO_DESIGN_STORE, this.$state)
}
}
})
export function useDesignSettingWithOut() {
return useDesignStore(store)
}