xto-fronted 0.4.18 → 0.4.20

package/src/stores/app.ts

@@ -1,181 +1,163 @@
-/**
- * 应用状态
- */
-
-import { defineStore } from 'pinia'
-import { ref, computed, watch } from 'vue'
-import { local } from '@/utils/storage'
-
-export type ThemeMode = 'light' | 'dark'
-export type LayoutMode = 'sidebar' | 'top'
-
-// 支持的布局模式列表
-const SUPPORTED_LAYOUTS: LayoutMode[] = ['sidebar', 'top']
-
-export const useAppStore = defineStore('app', () => {
-  // 状态
-  const appName = ref<string>(local.get<string>('appName') || 'XTO App')
-  const indexPath = ref<string>(local.get<string>('indexPath') || '/dashboard')
-  const isDark = ref<boolean>(local.get<boolean>('isDark') || false)
-  const theme = ref<ThemeMode>(local.get<ThemeMode>('theme') || 'light')
-
-  // 布局模式：读取localStorage，如果是不支持的值则默认sidebar
-  const savedLayout = local.get<string>('layout')
-  const layout = ref<LayoutMode>(
-    SUPPORTED_LAYOUTS.includes(savedLayout as LayoutMode)
-      ? (savedLayout as LayoutMode)
-      : 'sidebar'
-  )
-  const isCollapsed = ref<boolean>(local.get<boolean>('isCollapsed') || false)
-  const showTabs = ref<boolean>(local.get<boolean>('showTabs') ?? true)
-  const showFooter = ref<boolean>(local.get<boolean>('showFooter') ?? true)
-  const showBreadcrumb = ref<boolean>(local.get<boolean>('showBreadcrumb') ?? true)
-  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#409eff')
-  const cachedViews = ref<string[]>([])
-
-  // 计算属性
-  const themeClass = computed(() => (isDark.value ? 'dark' : 'light'))
-
-  // 设置应用名称
-  const setAppName = (name: string) => {
-    appName.value = name
-    local.set('appName', name)
-  }
-
-  // 设置默认首页路径
-  const setIndexPath = (path: string) => {
-    indexPath.value = path
-    local.set('indexPath', path)
-  }
-
-  // 切换主题
-  const toggleTheme = () => {
-    isDark.value = !isDark.value
-    theme.value = isDark.value ? 'dark' : 'light'
-    updateTheme()
-  }
-
-  // 设置主题
-  const setTheme = (mode: ThemeMode) => {
-    theme.value = mode
-    isDark.value = mode === 'dark'
-    updateTheme()
-  }
-
-  // 更新主题
-  const updateTheme = () => {
-    const html = document.documentElement
-    if (isDark.value) {
-      html.classList.add('dark')
-    } else {
-      html.classList.remove('dark')
-    }
-    local.set('isDark', isDark.value)
-    local.set('theme', theme.value)
-  }
-
-  // 切换菜单折叠
-  const toggleCollapse = () => {
-    isCollapsed.value = !isCollapsed.value
-    local.set('isCollapsed', isCollapsed.value)
-  }
-
-  // 设置布局
-  const setLayout = (mode: LayoutMode) => {
-    if (!SUPPORTED_LAYOUTS.includes(mode)) {
-      mode = 'sidebar'
-    }
-    layout.value = mode
-    local.set('layout', mode)
-  }
-
-  // 切换标签页
-  const toggleTabs = () => {
-    showTabs.value = !showTabs.value
-    local.set('showTabs', showTabs.value)
-  }
-
-  // 切换底部
-  const toggleFooter = () => {
-    showFooter.value = !showFooter.value
-    local.set('showFooter', showFooter.value)
-  }
-
-  // 切换面包屑
-  const toggleBreadcrumb = () => {
-    showBreadcrumb.value = !showBreadcrumb.value
-    local.set('showBreadcrumb', showBreadcrumb.value)
-  }
-
-  // 设置主题色
-  const setPrimaryColor = (color: string) => {
-    primaryColor.value = color
-    document.documentElement.style.setProperty('--color-primary', color)
-    local.set('primaryColor', color)
-  }
-
-  // 添加缓存页面
-  const addCachedView = (name: string) => {
-    if (!cachedViews.value.includes(name)) {
-      cachedViews.value.push(name)
-    }
-  }
-
-  // 移除缓存页面
-  const removeCachedView = (name: string) => {
-    const index = cachedViews.value.indexOf(name)
-    if (index > -1) {
-      cachedViews.value.splice(index, 1)
-    }
-  }
-
-  // 清除缓存页面
-  const clearCachedViews = () => {
-    cachedViews.value = []
-  }
-
-  // 初始化主题
-  const initTheme = () => {
-    updateTheme()
-    if (primaryColor.value !== '#409eff') {
-      document.documentElement.style.setProperty('--color-primary', primaryColor.value)
-    }
-    // 清除无效的layout设置，确保使用支持的布局模式
-    if (!SUPPORTED_LAYOUTS.includes(layout.value)) {
-      layout.value = 'sidebar'
-      local.set('layout', 'sidebar')
-    }
-  }
-
-  // 监听主题变化
-  watch(isDark, updateTheme)
-
-  return {
-    appName,
-    indexPath,
-    isDark,
-    theme,
-    layout,
-    isCollapsed,
-    showTabs,
-    showFooter,
-    showBreadcrumb,
-    primaryColor,
-    cachedViews,
-    themeClass,
-    setAppName,
-    setIndexPath,
-    toggleTheme,
-    toggleCollapse,
-    setTheme,
-    setLayout,
-    toggleTabs,
-    toggleFooter,
-    toggleBreadcrumb,
-    setPrimaryColor,
-    addCachedView,
-    removeCachedView,
-    clearCachedViews,
-    initTheme
-  }
+/**
+ * 应用状态
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed, watch } from 'vue'
+import { local } from '@/utils/storage'
+
+export type ThemeMode = 'light' | 'dark'
+export type LayoutMode = 'sidebar' | 'top' | 'mix'
+
+export const useAppStore = defineStore('app', () => {
+  // 状态
+  const appName = ref<string>(local.get<string>('appName') || 'XTO App')
+  const indexPath = ref<string>(local.get<string>('indexPath') || '/dashboard')
+  const isDark = ref<boolean>(local.get<boolean>('isDark') || false)
+  const theme = ref<ThemeMode>(local.get<ThemeMode>('theme') || 'light')
+  const layout = ref<LayoutMode>(local.get<LayoutMode>('layout') || 'sidebar')
+  const isCollapsed = ref<boolean>(local.get<boolean>('isCollapsed') || false)
+  const showTabs = ref<boolean>(local.get<boolean>('showTabs') ?? true)
+  const showFooter = ref<boolean>(local.get<boolean>('showFooter') ?? true)
+  const showBreadcrumb = ref<boolean>(local.get<boolean>('showBreadcrumb') ?? true)
+  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#409eff')
+  const cachedViews = ref<string[]>([])
+
+  // 计算属性
+  const themeClass = computed(() => (isDark.value ? 'dark' : 'light'))
+
+  // 设置应用名称
+  const setAppName = (name: string) => {
+    appName.value = name
+    local.set('appName', name)
+  }
+
+  // 设置默认首页路径
+  const setIndexPath = (path: string) => {
+    indexPath.value = path
+    local.set('indexPath', path)
+  }
+
+  // 切换主题
+  const toggleTheme = () => {
+    isDark.value = !isDark.value
+    theme.value = isDark.value ? 'dark' : 'light'
+    updateTheme()
+  }
+
+  // 设置主题
+  const setTheme = (mode: ThemeMode) => {
+    theme.value = mode
+    isDark.value = mode === 'dark'
+    updateTheme()
+  }
+
+  // 更新主题
+  const updateTheme = () => {
+    const html = document.documentElement
+    if (isDark.value) {
+      html.classList.add('dark')
+    } else {
+      html.classList.remove('dark')
+    }
+    local.set('isDark', isDark.value)
+    local.set('theme', theme.value)
+  }
+
+  // 切换菜单折叠
+  const toggleCollapse = () => {
+    isCollapsed.value = !isCollapsed.value
+    local.set('isCollapsed', isCollapsed.value)
+  }
+
+  // 设置布局
+  const setLayout = (mode: LayoutMode) => {
+    layout.value = mode
+    local.set('layout', mode)
+  }
+
+  // 切换标签页
+  const toggleTabs = () => {
+    showTabs.value = !showTabs.value
+    local.set('showTabs', showTabs.value)
+  }
+
+  // 切换底部
+  const toggleFooter = () => {
+    showFooter.value = !showFooter.value
+    local.set('showFooter', showFooter.value)
+  }
+
+  // 切换面包屑
+  const toggleBreadcrumb = () => {
+    showBreadcrumb.value = !showBreadcrumb.value
+    local.set('showBreadcrumb', showBreadcrumb.value)
+  }
+
+  // 设置主题色
+  const setPrimaryColor = (color: string) => {
+    primaryColor.value = color
+    document.documentElement.style.setProperty('--color-primary', color)
+    local.set('primaryColor', color)
+  }
+
+  // 添加缓存页面
+  const addCachedView = (name: string) => {
+    if (!cachedViews.value.includes(name)) {
+      cachedViews.value.push(name)
+    }
+  }
+
+  // 移除缓存页面
+  const removeCachedView = (name: string) => {
+    const index = cachedViews.value.indexOf(name)
+    if (index > -1) {
+      cachedViews.value.splice(index, 1)
+    }
+  }
+
+  // 清除缓存页面
+  const clearCachedViews = () => {
+    cachedViews.value = []
+  }
+
+  // 初始化主题
+  const initTheme = () => {
+    updateTheme()
+    if (primaryColor.value !== '#409eff') {
+      document.documentElement.style.setProperty('--color-primary', primaryColor.value)
+    }
+  }
+
+  // 监听主题变化
+  watch(isDark, updateTheme)
+
+  return {
+    appName,
+    indexPath,
+    isDark,
+    theme,
+    layout,
+    isCollapsed,
+    showTabs,
+    showFooter,
+    showBreadcrumb,
+    primaryColor,
+    cachedViews,
+    themeClass,
+    setAppName,
+    setIndexPath,
+    toggleTheme,
+    toggleCollapse,
+    setTheme,
+    setLayout,
+    toggleTabs,
+    toggleFooter,
+    toggleBreadcrumb,
+    setPrimaryColor,
+    addCachedView,
+    removeCachedView,
+    clearCachedViews,
+    initTheme
+  }
 })