v3-admin-vite/src/store/modules/app.ts

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.documentElement.className = `theme-${this.activeThemeName}`
      document.documentElement.className = this.activeThemeName
      // 持久化
      setActiveThemeName(this.activeThemeName)
    },
    initTheme() {
      // 初始化
      // document.documentElement.className = `theme-${this.activeThemeName}`
      document.documentElement.className = this.activeThemeName
    }
  }
})