xto-fronted 0.4.18 → 0.4.20

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' }
 ]
 
 // 主题色选项
@@ -96,6 +97,7 @@ const openSettingsDrawer = () => {
 // 切换布局模式
 const handleLayoutChange = (mode: LayoutMode) => {
   appStore.setLayout(mode)
+  drawerVisible.value = false
 }
 
 // 切换灰色模式
@@ -109,6 +111,18 @@ const handleGreyModeChange = (value: boolean) => {
   }
 }
 
+// 抽屉内灰色模式开关
+const handleGreyModeToggle = () => {
+  handleGreyModeChange(!greyMode.value)
+  drawerVisible.value = false
+}
+
+// 抽屉内暗黑模式开关
+const handleDarkModeToggle = () => {
+  appStore.toggleTheme()
+  drawerVisible.value = false
+}
+
 // 切换全屏
 const toggleFullscreen = () => {
   if (!document.fullscreenElement) {
@@ -153,6 +167,7 @@ const handleSearchItemClick = (path: string) => {
 // 设置主题色
 const handleColorChange = (color: string) => {
   appStore.setPrimaryColor(color)
+  drawerVisible.value = false
 }
 
 // 个人信息
@@ -363,10 +378,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>
@@ -396,13 +420,13 @@ onUnmounted(() => {
           <div class="settings-switch-list">
             <div class="settings-switch-item">
               <span>灰色模式</span>
-              <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeChange(!greyMode)">
+              <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
                 <span class="switch-core"></span>
               </div>
             </div>
             <div class="settings-switch-item">
               <span>暗黑模式</span>
-              <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="toggleTheme">
+              <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
                 <span class="switch-core"></span>
               </div>
             </div>
@@ -821,6 +845,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>