55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref, watch } from 'vue'
|
|
|
|
const DARK_KEY = 'oci-portal:dark'
|
|
const LOGO_KEY = 'oci-portal:logo'
|
|
|
|
/** logo 款式:burst 星爆(现款)/ seal 波浪封印 */
|
|
export type LogoVariant = 'burst' | 'seal'
|
|
|
|
function initialDark(): boolean {
|
|
const saved = localStorage.getItem(DARK_KEY)
|
|
if (saved !== null) return saved === '1'
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
}
|
|
|
|
function initialLogo(): LogoVariant {
|
|
return localStorage.getItem(LOGO_KEY) === 'seal' ? 'seal' : 'burst'
|
|
}
|
|
|
|
/** 跨页面共享的界面状态：侧栏收缩、明暗主题 */
|
|
export const useAppStore = defineStore('app', () => {
|
|
const sidebarCollapsed = ref(false)
|
|
/** 暗色主题：默认跟随系统，手动切换后按选择记忆 */
|
|
const dark = ref(initialDark())
|
|
|
|
// html.dark 驱动 main.css 的变量覆盖，Naive 主题在 App.vue 跟随
|
|
watch(
|
|
dark,
|
|
(v) => {
|
|
document.documentElement.classList.toggle('dark', v)
|
|
localStorage.setItem(DARK_KEY, v ? '1' : '0')
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
/** logo 款式:默认星爆,设置 · 关于点击 logo 切换后按选择记忆 */
|
|
const logoVariant = ref<LogoVariant>(initialLogo())
|
|
|
|
watch(logoVariant, (v) => localStorage.setItem(LOGO_KEY, v))
|
|
|
|
function toggleSidebar() {
|
|
sidebarCollapsed.value = !sidebarCollapsed.value
|
|
}
|
|
|
|
function toggleDark() {
|
|
dark.value = !dark.value
|
|
}
|
|
|
|
function toggleLogoVariant() {
|
|
logoVariant.value = logoVariant.value === 'burst' ? 'seal' : 'burst'
|
|
}
|
|
|
|
return { sidebarCollapsed, toggleSidebar, dark, toggleDark, logoVariant, toggleLogoVariant }
|
|
})
|