69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
|
import { defineStore } from 'pinia'
|
||
|
|
import { getSidebarStatus, getActiveThemeName, setSidebarStatus, setActiveThemeName } from '@/utils/cookies'
|
||
|
|
import themeList from '@/config/theme'
|
||
|
|
|
||
|
|
export enum DeviceType {
|
||
|
|
Mobile,
|
||
|
|
Desktop
|
||
|
|
}
|
||
|
|
|
||
|
|
interface IAppState {
|
||
|
|
device: DeviceType
|
||
|
|
sidebar: {
|
||
|
|
opened: boolean
|
||
|
|
withoutAnimation: boolean
|
||
|
|
}
|
||
|
|
/** 主题列表 */
|
||
|
|
themeList: { title: string, name: string }[]
|
||
|
|
/** 正在应用的主题的名字 */
|
||
|
|
activeThemeName: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const useAppStore = defineStore({
|
||
|
|
id: 'app',
|
||
|
|
state: (): IAppState => {
|
||
|
|
return {
|
||
|
|
device: DeviceType.Desktop,
|
||
|
|
sidebar: {
|
||
|
|
opened: getSidebarStatus() !== 'closed',
|
||
|
|
withoutAnimation: false
|
||
|
|
},
|
||
|
|
themeList: themeList,
|
||
|
|
activeThemeName: getActiveThemeName() || 'normal'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
actions: {
|
||
|
|
toggleSidebar(withoutAnimation: boolean) {
|
||
|
|
this.sidebar.opened = !this.sidebar.opened
|
||
|
|
this.sidebar.withoutAnimation = withoutAnimation
|
||
|
|
if (this.sidebar.opened) {
|
||
|
|
setSidebarStatus('opened')
|
||
|
|
} else {
|
||
|
|
setSidebarStatus('closed')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
closeSidebar(withoutAnimation: boolean) {
|
||
|
|
this.sidebar.opened = false
|
||
|
|
this.sidebar.withoutAnimation = withoutAnimation
|
||
|
|
setSidebarStatus('closed')
|
||
|
|
},
|
||
|
|
toggleDevice(device: DeviceType) {
|
||
|
|
this.device = device
|
||
|
|
},
|
||
|
|
setTheme(activeThemeName: string) {
|
||
|
|
// 检查这个主题在主题列表里是否存在
|
||
|
|
this.activeThemeName = this.themeList.find((theme) => theme.name === activeThemeName)
|
||
|
|
? activeThemeName
|
||
|
|
: this.themeList[0].name
|
||
|
|
// 应用到 dom
|
||
|
|
document.body.className = `theme-${this.activeThemeName}`
|
||
|
|
// 持久化
|
||
|
|
setActiveThemeName(this.activeThemeName)
|
||
|
|
},
|
||
|
|
initTheme() {
|
||
|
|
// 初始化
|
||
|
|
document.body.className = `theme-${this.activeThemeName}`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|