xto-fronted 0.4.21 → 0.4.23

package/src/components/Layout/index.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 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 route = useRoute()
 const appStore = useAppStore()
 const menuStore = useMenuStore()
 
@@ -16,45 +19,171 @@ const sidebarWidth = computed(() =>
 // 布局模式
 const layoutMode = computed(() => appStore.layout)
 
-// 是否显示左侧菜单
-const showSidebar = computed(() => layoutMode.value === 'sidebar' || layoutMode.value === 'mix')
+// 是否显示左侧菜单（sidebar模式始终显示，mix模式根据一级菜单是否有子菜单决定）
+const showSidebar = computed(() => {
+  if (layoutMode.value === 'sidebar') return true
+  if (layoutMode.value === 'mix') {
+    return mixSubMenus.value.length > 0
+  }
+  return false
+})
 
-// 是否显示顶部菜单
+// 是否显示顶部菜单（仅 top 模式）
 const showTopMenu = computed(() => layoutMode.value === 'top')
 
-// 是否显示Header（顶部菜单模式下不显示，因为功能已移到TopMenu）
-const showHeader = computed(() => layoutMode.value !== 'top')
+// 是否显示Header（顶部菜单模式和混合菜单模式下不显示）
+const showHeader = computed(() => layoutMode.value === 'sidebar')
 
-// 混合模式下只显示当前顶部菜单的子菜单
+// 混合模式下当前选中一级菜单的子菜单
 const mixSubMenus = computed(() => {
   if (layoutMode.value !== 'mix') return menuStore.menuList
-  // 混合模式需要根据顶部选中的菜单显示子菜单
-  // 这里暂时返回全部菜单，后续可根据实际需求调整
-  return menuStore.menuList
+
+  // 找到当前选中的一级菜单
+  const topMenuPath = appStore.activeTopMenuPath
+  console.log('mixSubMenus - topMenuPath:', topMenuPath, 'menuList:', menuStore.menuList)
+
+  if (!topMenuPath) {
+    // 如果没有选中一级菜单，默认返回第一个菜单的children（如果有）
+    if (menuStore.menuList.length > 0) {
+      const firstMenu = menuStore.menuList[0]
+      return firstMenu.children || []
+    }
+    return []
+  }
+
+  const topMenu = menuStore.menuList.find(m => m.menuUrl === topMenuPath)
+  console.log('mixSubMenus - topMenu:', topMenu)
+  return topMenu?.children || []
+})
+
+// 初始化一级菜单选中状态
+const initActiveTopMenu = () => {
+  if (layoutMode.value === 'mix' && menuStore.menuList.length > 0) {
+    // 如果还没有设置activeTopMenuPath，设置默认值
+    if (!appStore.activeTopMenuPath) {
+      // 找到当前路由所属的一级菜单
+      let foundTopMenu: string | null = null
+
+      for (const menu of menuStore.menuList) {
+        if (menu.menuUrl === route.path) {
+          foundTopMenu = menu.menuUrl
+          break
+        }
+        if (menu.children && menu.children.length > 0) {
+          const found = menu.children.some(child =>
+            child.menuUrl === route.path ||
+            (child.children && child.children.some(c => c.menuUrl === route.path))
+          )
+          if (found) {
+            foundTopMenu = menu.menuUrl
+            break
+          }
+        }
+      }
+
+      // 如果没找到，默认选中第一个有子菜单的一级菜单，或者第一个菜单
+      if (!foundTopMenu) {
+        const menuWithChildren = menuStore.menuList.find(m => m.children && m.children.length > 0)
+        foundTopMenu = menuWithChildren ? menuWithChildren.menuUrl : menuStore.menuList[0].menuUrl
+      }
+
+      appStore.setActiveTopMenuPath(foundTopMenu)
+    }
+  }
+}
+
+// 根据当前路由自动设置一级菜单选中状态
+watch(
+  () => route.path,
+  (path) => {
+    if (layoutMode.value === 'mix' && menuStore.menuList.length > 0) {
+      // 找到当前路由所属的一级菜单
+      for (const menu of menuStore.menuList) {
+        if (menu.menuUrl === path) {
+          if (appStore.activeTopMenuPath !== menu.menuUrl) {
+            appStore.setActiveTopMenuPath(menu.menuUrl)
+          }
+          break
+        }
+        if (menu.children && menu.children.length > 0) {
+          const found = menu.children.some(child =>
+            child.menuUrl === path ||
+            (child.children && child.children.some(c => c.menuUrl === route.path))
+          )
+          if (found) {
+            if (appStore.activeTopMenuPath !== menu.menuUrl) {
+              appStore.setActiveTopMenuPath(menu.menuUrl)
+            }
+            break
+          }
+        }
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// 监听菜单列表变化，重新初始化
+watch(
+  () => menuStore.menuList,
+  () => {
+    if (layoutMode.value === 'mix') {
+      initActiveTopMenu()
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  initActiveTopMenu()
 })
 </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>
+    <!-- 混合菜单模式 -->
+    <template v-if="layoutMode === 'mix'">
+      <!-- 混合模式顶部菜单（一级菜单） -->
+      <MixTopMenu />
+
+      <!-- 混合模式主体区域 -->
+      <div class="layout__mix-body">
+        <!-- 左侧子菜单（二级菜单） -->
+        <aside v-if="mixSubMenus.length > 0" class="layout__aside" :style="{ width: sidebarWidth }">
+          <Sidebar :menu-list="mixSubMenus" />
+        </aside>
+
+        <!-- 主内容区 -->
+        <div class="layout__main">
+          <main class="layout__content">
+            <router-view />
+          </main>
+        </div>
+      </div>
+    </template>
+
+    <!-- 其他布局模式 -->
+    <template v-else>
+      <!-- 左侧菜单布局 -->
+      <aside v-if="showSidebar" class="layout__aside" :style="{ width: sidebarWidth }">
+        <Sidebar :menu-list="menuStore.menuList" />
+      </aside>
+
+      <!-- 顶部菜单布局 -->
+      <div v-if="showTopMenu" class="layout__top-menu">
+        <TopMenu />
+      </div>
+
+      <div class="layout__main">
+        <!-- Header仅在sidebar模式下显示 -->
+        <header v-if="showHeader" class="layout__header">
+          <Header />
+        </header>
+        <main class="layout__content">
+          <router-view />
+        </main>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -84,7 +213,21 @@ const mixSubMenus = computed(() => {
 
   // 混合菜单模式
   &--mix {
-    flex-direction: row;
+    flex-direction: column;
+
+    .layout__mix-body {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .layout__aside {
+      height: 100%;
+    }
+
+    .layout__main {
+      flex: 1;
+    }
   }
 
   &__aside {
@@ -102,7 +245,6 @@ const mixSubMenus = computed(() => {
   }
 
   &__main {
-    flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;

package/src/stores/app.ts

@@ -22,6 +22,8 @@ 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 activeTopMenuPath = ref<string>(local.get<string>('activeTopMenuPath') || '')
 
   // 计算属性
   const themeClass = computed(() => (isDark.value ? 'dark' : 'light'))
@@ -74,6 +76,17 @@ export const useAppStore = defineStore('app', () => {
   const setLayout = (mode: LayoutMode) => {
     layout.value = mode
     local.set('layout', mode)
+    // 切换布局时清除一级菜单选中状态
+    if (mode !== 'mix') {
+      activeTopMenuPath.value = ''
+      local.remove('activeTopMenuPath')
+    }
+  }
+
+  // 设置混合模式选中的一级菜单
+  const setActiveTopMenuPath = (path: string) => {
+    activeTopMenuPath.value = path
+    local.set('activeTopMenuPath', path)
   }
 
   // 切换标签页
@@ -144,6 +157,7 @@ export const useAppStore = defineStore('app', () => {
     showBreadcrumb,
     primaryColor,
     cachedViews,
+    activeTopMenuPath,
     themeClass,
     setAppName,
     setIndexPath,
@@ -151,6 +165,7 @@ export const useAppStore = defineStore('app', () => {
     toggleCollapse,
     setTheme,
     setLayout,
+    setActiveTopMenuPath,
     toggleTabs,
     toggleFooter,
     toggleBreadcrumb,