Files
assist/frontend/src/stores/useAppStore.ts

61 lines
1.4 KiB
TypeScript

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useAppStore = defineStore('app', () => {
// 状态
const loading = ref(false)
const theme = ref<'light' | 'dark'>('light')
const language = ref<'zh' | 'en'>('zh')
const sidebarCollapsed = ref(false)
// 计算属性
const isDark = computed(() => theme.value === 'dark')
// 动作
const setLoading = (value: boolean) => {
loading.value = value
}
const setTheme = (value: 'light' | 'dark') => {
theme.value = value
document.documentElement.classList.toggle('dark', value === 'dark')
localStorage.setItem('theme', value)
}
const setLanguage = (value: 'zh' | 'en') => {
language.value = value
localStorage.setItem('language', value)
}
const toggleSidebar = () => {
sidebarCollapsed.value = !sidebarCollapsed.value
}
const init = () => {
// 恢复主题设置
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark'
if (savedTheme) {
setTheme(savedTheme)
}
// 恢复语言设置
const savedLanguage = localStorage.getItem('language') as 'zh' | 'en'
if (savedLanguage) {
setLanguage(savedLanguage)
}
}
return {
loading,
theme,
language,
sidebarCollapsed,
isDark,
setLoading,
setTheme,
setLanguage,
toggleSidebar,
init
}
})