xto-fronted 0.4.38 → 0.4.40

package/src/components/Layout/Sidebar.vue

@@ -11,8 +11,12 @@ import { Button, Icon } from '@xto/base'
 // Props
 const props = withDefaults(defineProps<{
   menuList?: any[]
+  showLogo?: boolean
+  showUser?: boolean
 }>(), {
-  menuList: () => []
+  menuList: () => [],
+  showLogo: true,
+  showUser: true
 })
 
 const route = useRoute()
@@ -133,7 +137,7 @@ const iconExists = (iconName: string): boolean => {
 <template>
   <div class="sidebar" :class="{ 'sidebar--collapsed': isCollapsed }">
     <!-- Logo -->
-    <div class="sidebar__logo">
+    <div v-if="props.showLogo" class="sidebar__logo">
       <img src="/vite.svg" alt="Logo" class="sidebar__logo-img" />
       <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
     </div>
@@ -190,7 +194,7 @@ const iconExists = (iconName: string): boolean => {
     </Menu>
 
     <!-- 用户信息 -->
-    <div v-if="!isCollapsed" class="sidebar__user">
+    <div v-if="props.showUser && !isCollapsed" class="sidebar__user">
       <div class="sidebar__user-info">
         <span class="sidebar__user-name">{{ userStore.userName }}</span>
         <span class="sidebar__user-role">{{ userStore.departmentName }}</span>

package/src/components/Layout/index.vue

@@ -1,125 +1,164 @@
-<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')
-
-// 是否显示Header（顶部菜单模式下不显示，因为功能已移到TopMenu）
-const showHeader = 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仅在sidebar和mix模式下显示 -->
-      <header v-if="showHeader" 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);
-  }
-}
+<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'
+import MixTopMenu from './MixTopMenu.vue'
+
+const appStore = useAppStore()
+const menuStore = useMenuStore()
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+
+// 布局模式
+const layoutMode = computed(() => appStore.layout)
+
+// 是否显示左侧菜单（sidebar模式和mix模式都显示）
+const showSidebar = computed(() => layoutMode.value === 'sidebar' || layoutMode.value === 'mix')
+
+// 是否显示顶部菜单（top模式）
+const showTopMenu = computed(() => layoutMode.value === 'top')
+
+// 是否显示混合顶部菜单（mix模式）
+const showMixTopMenu = computed(() => layoutMode.value === 'mix')
+
+// 是否显示Header（仅在sidebar模式下显示）
+const showHeader = computed(() => layoutMode.value === 'sidebar')
+
+// 左侧菜单数据
+const sidebarMenuList = computed(() => {
+  if (layoutMode.value === 'sidebar') {
+    return menuStore.menuList
+  } else if (layoutMode.value === 'mix') {
+    // mix模式下显示当前选中一级菜单的子菜单
+    return appStore.mixSubMenus
+  }
+  return []
+})
+
+// 是否显示左侧菜单（mix模式下只有在有子菜单时才显示）
+const showMixSidebar = computed(() => {
+  if (layoutMode.value !== 'mix') return showSidebar.value
+  return appStore.mixSubMenus.length > 0
+})
+</script>
+
+<template>
+  <div class="layout" :class="`layout--${layoutMode}`">
+    <!-- 左侧菜单布局 -->
+    <aside v-if="showMixSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+      <Sidebar :menu-list="sidebarMenuList" :show-logo="layoutMode !== 'mix'" :show-user="layoutMode !== 'mix'" />
+    </aside>
+
+    <!-- 顶部菜单布局（top模式） -->
+    <div v-if="showTopMenu" class="layout__top-menu">
+      <TopMenu />
+    </div>
+
+    <!-- 混合顶部菜单布局（mix模式） -->
+    <div v-if="showMixTopMenu" class="layout__mix-top-menu">
+      <MixTopMenu />
+    </div>
+
+    <div class="layout__main">
+      <!-- Header仅在sidebar模式下显示 -->
+      <header v-if="showHeader" 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: column;
+
+    .layout__main {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+    }
+
+    .layout__content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &__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);
+    flex-shrink: 0;
+  }
+
+  &__mix-top-menu {
+    width: 100%;
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+    flex-shrink: 0;
+  }
+
+  &__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

@@ -22,6 +22,7 @@ export const useAppStore = defineStore('app', () => {
   const showBreadcrumb = ref<boolean>(local.get<boolean>('showBreadcrumb') ?? true)
   const primaryColor = ref<string>(local.get<string>('primaryColor') || '#409eff')
   const cachedViews = ref<string[]>([])
+  const mixSubMenus = ref<any[]>([])
 
   // 计算属性
   const themeClass = computed(() => (isDark.value ? 'dark' : 'light'))
@@ -121,6 +122,11 @@ export const useAppStore = defineStore('app', () => {
     cachedViews.value = []
   }
 
+  // 设置混合模式子菜单
+  const setMixSubMenus = (menus: any[]) => {
+    mixSubMenus.value = menus
+  }
+
   // 初始化主题
   const initTheme = () => {
     updateTheme()
@@ -144,6 +150,7 @@ export const useAppStore = defineStore('app', () => {
     showBreadcrumb,
     primaryColor,
     cachedViews,
+    mixSubMenus,
     themeClass,
     setAppName,
     setIndexPath,
@@ -158,6 +165,7 @@ export const useAppStore = defineStore('app', () => {
     addCachedView,
     removeCachedView,
     clearCachedViews,
+    setMixSubMenus,
     initTheme
   }
 })