xto-fronted 0.4.18 → 0.4.19

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'
+type LayoutMode = 'sidebar' | 'top' | 'mix'
 
 const route = useRoute()
 const router = useRouter()
@@ -31,7 +31,8 @@ const greyMode = ref(false)
 // 布局模式选项
 const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
   { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
-  { value: 'top', label: '顶部菜单', icon: 'menu' }
+  { value: 'top', label: '顶部菜单', icon: 'menu' },
+  { value: 'mix', label: '混合菜单', icon: 'grid' }
 ]
 
 // 主题色选项
@@ -363,10 +364,19 @@ onUnmounted(() => {
                     <div class="preview-content"></div>
                   </div>
                 </div>
-                <div v-else class="layout-preview-top">
+                <div v-else-if="option.value === 'top'" 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>
@@ -821,6 +831,38 @@ 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/components/Layout/index.vue

@@ -1,105 +1,121 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useAppStore } from '@/stores/app'
-import { useMenuStore } from '@/stores/menu'
-import Sidebar from './Sidebar.vue'
-import Header from './Header.vue'
-import TopMenu from './TopMenu.vue'
-
-const appStore = useAppStore()
-const menuStore = useMenuStore()
-
-const sidebarWidth = computed(() =>
-  appStore.isCollapsed ? '64px' : '210px'
-)
-
-// 布局模式
-const layoutMode = computed(() => appStore.layout)
-
-// 是否显示左侧菜单
-const showSidebar = computed(() => layoutMode.value === 'sidebar')
-
-// 是否显示顶部菜单（仅 top 模式）
-const showTopMenu = computed(() => layoutMode.value === 'top')
-</script>
-
-<template>
-  <div class="layout" :class="`layout--${layoutMode}`">
-    <!-- 左侧菜单布局 -->
-    <aside v-if="showSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar :menu-list="menuStore.menuList" />
-    </aside>
-
-    <!-- 顶部菜单布局（top 模式） -->
-    <TopMenu v-if="showTopMenu" />
-
-    <div class="layout__main">
-      <header class="layout__header">
-        <Header />
-      </header>
-      <main class="layout__content">
-        <router-view />
-      </main>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.layout {
-  display: flex;
-  width: 100%;
-  height: 100%;
-
-  // 左侧菜单模式
-  &--sidebar {
-    flex-direction: row;
-  }
-
-  // 顶部菜单模式
-  &--top {
-    flex-direction: column;
-
-    .layout__aside {
-      display: none;
-    }
-
-    .layout__main {
-      flex: 1;
-    }
-  }
-
-  &__aside {
-    transition: width 0.3s;
-    overflow: hidden;
-    flex-shrink: 0;
-    height: 100%;
-  }
-
-  &__top-menu {
-    width: 100%;
-    height: 50px;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-  }
-
-  &__main {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  &__header {
-    height: 50px;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex: 1;
-    overflow: auto;
-    background-color: var(--bg-color-page);
-  }
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { useMenuStore } from '@/stores/menu'
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+import TopMenu from './TopMenu.vue'
+
+const appStore = useAppStore()
+const menuStore = useMenuStore()
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+
+// 布局模式
+const layoutMode = computed(() => appStore.layout)
+
+// 是否显示左侧菜单
+const showSidebar = computed(() => layoutMode.value === 'sidebar' || layoutMode.value === 'mix')
+
+// 是否显示顶部菜单
+const showTopMenu = computed(() => layoutMode.value === 'top')
+
+// 混合模式下只显示当前顶部菜单的子菜单
+const mixSubMenus = computed(() => {
+  if (layoutMode.value !== 'mix') return menuStore.menuList
+  // 混合模式需要根据顶部选中的菜单显示子菜单
+  // 这里暂时返回全部菜单，后续可根据实际需求调整
+  return menuStore.menuList
+})
+</script>
+
+<template>
+  <div class="layout" :class="`layout--${layoutMode}`">
+    <!-- 左侧菜单布局 -->
+    <aside v-if="showSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar :menu-list="layoutMode === 'mix' ? mixSubMenus : menuStore.menuList" />
+    </aside>
+
+    <!-- 顶部菜单布局 -->
+    <div v-if="showTopMenu" class="layout__top-menu">
+      <TopMenu />
+    </div>
+
+    <div class="layout__main">
+      <header class="layout__header">
+        <Header />
+      </header>
+      <main class="layout__content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  // 左侧菜单模式
+  &--sidebar {
+    flex-direction: row;
+  }
+
+  // 顶部菜单模式
+  &--top {
+    flex-direction: column;
+
+    .layout__aside {
+      display: none;
+    }
+
+    .layout__main {
+      flex: 1;
+    }
+  }
+
+  // 混合菜单模式
+  &--mix {
+    flex-direction: row;
+  }
+
+  &__aside {
+    transition: width 0.3s;
+    overflow: hidden;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  &__top-menu {
+    width: 100%;
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &__header {
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    background-color: var(--bg-color-page);
+  }
+}
 </style>

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
+  }
 })