133 lines
3.6 KiB
TypeScript
133 lines
3.6 KiB
TypeScript
import type { GlobalThemeOverrides } from 'naive-ui'
|
|
import { local, setLocale } from '@/utils'
|
|
import { colord } from 'colord'
|
|
import { set } from 'radash'
|
|
import themeConfig from './theme.json'
|
|
|
|
export type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
|
|
export type LayoutMode = 'leftMenu' | 'topMenu' | 'mixMenu'
|
|
|
|
const { VITE_DEFAULT_LANG, VITE_COPYRIGHT_INFO } = import.meta.env
|
|
|
|
const docEle = ref(document.documentElement)
|
|
|
|
const { isFullscreen, toggle } = useFullscreen(docEle)
|
|
|
|
const { system, store } = useColorMode({
|
|
emitAuto: true,
|
|
})
|
|
|
|
export const useAppStore = defineStore('app-store', {
|
|
state: () => {
|
|
return {
|
|
footerText: VITE_COPYRIGHT_INFO,
|
|
lang: VITE_DEFAULT_LANG,
|
|
theme: themeConfig as GlobalThemeOverrides,
|
|
primaryColor: themeConfig.common.primaryColor,
|
|
collapsed: false,
|
|
grayMode: false,
|
|
colorWeak: false,
|
|
loadFlag: true,
|
|
showLogo: true,
|
|
showTabs: true,
|
|
showFooter: true,
|
|
showProgress: true,
|
|
showBreadcrumb: true,
|
|
showBreadcrumbIcon: true,
|
|
showSetting: false,
|
|
transitionAnimation: 'zoom-out' as TransitionAnimation,
|
|
layoutMode: 'leftMenu' as LayoutMode,
|
|
contentFullScreen: false,
|
|
}
|
|
},
|
|
getters: {
|
|
storeColorMode() {
|
|
return store.value
|
|
},
|
|
colorMode() {
|
|
return store.value === 'auto' ? system.value : store.value
|
|
},
|
|
fullScreen() {
|
|
return isFullscreen.value
|
|
},
|
|
},
|
|
actions: {
|
|
// 重置所有设置
|
|
resetAlltheme() {
|
|
this.theme = themeConfig
|
|
this.primaryColor = '#4834D4'
|
|
this.collapsed = false
|
|
this.grayMode = false
|
|
this.colorWeak = false
|
|
this.loadFlag = true
|
|
this.showLogo = true
|
|
this.showTabs = true
|
|
this.showFooter = true
|
|
this.showBreadcrumb = true
|
|
this.showBreadcrumbIcon = true
|
|
this.showWatermark = false
|
|
this.transitionAnimation = 'zoom-out'
|
|
this.layoutMode = 'leftMenu'
|
|
this.contentFullScreen = false
|
|
|
|
// 重置所有配色
|
|
this.setPrimaryColor(this.primaryColor)
|
|
},
|
|
setAppLang(lang: App.lang) {
|
|
setLocale(lang)
|
|
local.set('lang', lang)
|
|
this.lang = lang
|
|
},
|
|
/* 设置主题色 */
|
|
setPrimaryColor(color: string) {
|
|
const brightenColor = colord(color).lighten(0.05).toHex()
|
|
const darkenColor = colord(color).darken(0.05).toHex()
|
|
set(this.theme, 'common.primaryColor', color)
|
|
set(this.theme, 'common.primaryColorHover', brightenColor)
|
|
set(this.theme, 'common.primaryColorPressed', darkenColor)
|
|
set(this.theme, 'common.primaryColorSuppl', brightenColor)
|
|
},
|
|
setColorMode(mode: 'light' | 'dark' | 'auto') {
|
|
store.value = mode
|
|
},
|
|
/* 切换侧边栏收缩 */
|
|
toggleCollapse() {
|
|
this.collapsed = !this.collapsed
|
|
},
|
|
/* 切换全屏 */
|
|
toggleFullScreen() {
|
|
toggle()
|
|
},
|
|
/**
|
|
* @description: 页面内容重载
|
|
* @param {number} delay - 延迟毫秒数
|
|
* @return {*}
|
|
*/
|
|
async reloadPage(delay = 600) {
|
|
this.loadFlag = false
|
|
await nextTick()
|
|
if (delay) {
|
|
setTimeout(() => {
|
|
this.loadFlag = true
|
|
}, delay)
|
|
}
|
|
else {
|
|
this.loadFlag = true
|
|
}
|
|
},
|
|
/* 切换色弱模式 */
|
|
toggleColorWeak() {
|
|
docEle.value.classList.toggle('color-weak')
|
|
this.colorWeak = docEle.value.classList.contains('color-weak')
|
|
},
|
|
/* 切换灰色模式 */
|
|
toggleGrayMode() {
|
|
docEle.value.classList.toggle('gray-mode')
|
|
this.grayMode = docEle.value.classList.contains('gray-mode')
|
|
},
|
|
},
|
|
persist: {
|
|
storage: localStorage,
|
|
},
|
|
})
|