xto-fronted 0.4.16 → 0.4.17

package/src/components/Layout/Header.vue

@@ -8,7 +8,7 @@ import { useMenuStore } from '@/stores/menu'
 import { Icon } from '@xto/base'
 import { Drawer } from '@xto/feedback'
 
-type LayoutMode = 'sidebar' | 'top' | 'mix'
+type LayoutMode = 'sidebar' | 'top'
 
 const route = useRoute()
 const router = useRouter()
@@ -31,8 +31,7 @@ const greyMode = ref(false)
 // 布局模式选项
 const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
   { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
-  { value: 'top', label: '顶部菜单', icon: 'menu' },
-  { value: 'mix', label: '混合菜单', icon: 'grid' }
+  { value: 'top', label: '顶部菜单', icon: 'menu' }
 ]
 
 // 主题色选项
@@ -364,19 +363,10 @@ onUnmounted(() => {
                     <div class="preview-content"></div>
                   </div>
                 </div>
-                <div v-else-if="option.value === 'top'" class="layout-preview-top">
+                <div v-else class="layout-preview-top">
                   <div class="preview-header-full"></div>
                   <div class="preview-content-full"></div>
                 </div>
-                <div v-else class="layout-preview-mix">
-                  <div class="preview-header-mix">
-                    <div class="preview-mix-left"></div>
-                  </div>
-                  <div class="preview-mix-body">
-                    <div class="preview-mix-aside"></div>
-                    <div class="preview-mix-content"></div>
-                  </div>
-                </div>
               </div>
               <span class="layout-option__label">{{ option.label }}</span>
             </div>
@@ -831,38 +821,6 @@ onUnmounted(() => {
     }
   }
 
-  .layout-preview-mix {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .preview-header-mix {
-      height: 25%;
-      background-color: var(--color-primary-light-7);
-      display: flex;
-
-      .preview-mix-left {
-        width: 30%;
-        background-color: var(--color-primary);
-      }
-    }
-
-    .preview-mix-body {
-      flex: 1;
-      display: flex;
-
-      .preview-mix-aside {
-        width: 25%;
-        background-color: var(--color-primary-light-8);
-      }
-
-      .preview-mix-content {
-        flex: 1;
-        background-color: var(--bg-color-page);
-      }
-    }
-  }
-
   .settings-color-options {
     display: flex;
     gap: 12px;

package/src/stores/app.ts

@@ -7,7 +7,10 @@ import { ref, computed, watch } from 'vue'
 import { local } from '@/utils/storage'
 
 export type ThemeMode = 'light' | 'dark'
-export type LayoutMode = 'sidebar' | 'top' | 'mix'
+export type LayoutMode = 'sidebar' | 'top'
+
+// 支持的布局模式列表
+const SUPPORTED_LAYOUTS: LayoutMode[] = ['sidebar', 'top']
 
 export const useAppStore = defineStore('app', () => {
   // 状态
@@ -15,7 +18,14 @@ export const useAppStore = defineStore('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')
+
+  // 布局模式：读取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)
@@ -72,6 +82,9 @@ export const useAppStore = defineStore('app', () => {
 
   // 设置布局
   const setLayout = (mode: LayoutMode) => {
+    if (!SUPPORTED_LAYOUTS.includes(mode)) {
+      mode = 'sidebar'
+    }
     layout.value = mode
     local.set('layout', mode)
   }
@@ -127,6 +140,11 @@ export const useAppStore = defineStore('app', () => {
     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')
+    }
   }
 
   // 监听主题变化