xto-fronted 0.4.24 → 0.4.25

package/src/components/Layout/index.vue

@@ -1,125 +1,221 @@
-<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, watch } 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()
+
+const sidebarWidth = computed(() =>
+  appStore.isCollapsed ? '64px' : '210px'
+)
+
+// 布局模式
+const layoutMode = computed(() => appStore.layout)
+
+// 混合模式下当前选中一级菜单的子菜单（二级及以下）
+const mixSubMenus = computed(() => {
+  if (layoutMode.value !== 'mix') return []
+
+  const topMenuPath = appStore.activeTopMenuPath
+  if (!topMenuPath) return []
+
+  // 找到当前选中的一级菜单
+  const topMenu = menuStore.menuList.find(m => m.menuUrl === topMenuPath)
+  // 返回其children（二级菜单），如果没有children则返回空数组
+  return topMenu?.children || []
+})
+
+// 混合模式下是否显示左侧菜单（有二级菜单才显示）
+const showMixSidebar = computed(() => {
+  return layoutMode.value === 'mix' && mixSubMenus.value.length > 0
+})
+
+// 根据当前路由自动匹配一级菜单
+const syncTopMenuByRoute = (path: string) => {
+  if (layoutMode.value === 'mix' && menuStore.menuList.length > 0) {
+    // 遍历一级菜单
+    for (const menu of menuStore.menuList) {
+      // 检查是否直接是一级菜单路径
+      if (menu.menuUrl === path) {
+        appStore.setActiveTopMenuPath(menu.menuUrl)
+        return
+      }
+      // 检查是否是该一级菜单的子菜单（包括多级子菜单）
+      if (menu.children && menu.children.length > 0) {
+        const isInChildren = checkPathInChildren(menu.children, path)
+        if (isInChildren) {
+          appStore.setActiveTopMenuPath(menu.menuUrl)
+          return
+        }
+      }
+    }
+    // 如果没匹配到，默认选中第一个有子菜单的一级菜单，或第一个菜单
+    const firstMenuWithChildren = menuStore.menuList.find(m => m.children && m.children.length > 0)
+    const defaultMenu = firstMenuWithChildren || menuStore.menuList[0]
+    if (defaultMenu) {
+      appStore.setActiveTopMenuPath(defaultMenu.menuUrl)
+    }
+  }
+}
+
+// 递归检查路径是否在子菜单中
+const checkPathInChildren = (children: any[], path: string): boolean => {
+  for (const child of children) {
+    if (child.menuUrl === path) {
+      return true
+    }
+    if (child.children && child.children.length > 0) {
+      if (checkPathInChildren(child.children, path)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+// 监听路由变化，同步一级菜单选中状态
+watch(
+  () => route.path,
+  (path) => {
+    syncTopMenuByRoute(path)
+  },
+  { immediate: true }
+)
+
+// 监听菜单列表变化，重新同步
+watch(
+  () => menuStore.menuList,
+  () => {
+    if (layoutMode.value === 'mix') {
+      syncTopMenuByRoute(route.path)
+    }
+  }
+)
+</script>
+
+<template>
+  <div class="layout" :class="`layout--${layoutMode}`">
+    <!-- sidebar模式：左侧菜单 + Header + 内容 -->
+    <template v-if="layoutMode === 'sidebar'">
+      <aside class="layout__aside" :style="{ width: sidebarWidth }">
+        <Sidebar :menu-list="menuStore.menuList" />
+      </aside>
+      <div class="layout__main">
+        <header class="layout__header">
+          <Header />
+        </header>
+        <main class="layout__content">
+          <router-view />
+        </main>
+      </div>
+    </template>
+
+    <!-- top模式：顶部菜单 + 内容 -->
+    <template v-if="layoutMode === 'top'">
+      <div class="layout__top-menu">
+        <TopMenu />
+      </div>
+      <div class="layout__main">
+        <main class="layout__content">
+          <router-view />
+        </main>
+      </div>
+    </template>
+
+    <!-- mix模式：顶部一级菜单 + 左侧二级菜单 + 内容 -->
+    <template v-if="layoutMode === 'mix'">
+      <div class="layout__mix-top">
+        <MixTopMenu />
+      </div>
+      <div class="layout__mix-body">
+        <!-- 只有当一级菜单有子菜单时才显示左侧菜单 -->
+        <aside v-if="showMixSidebar" 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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  // 左侧菜单模式
+  &--sidebar {
+    flex-direction: row;
+  }
+
+  // 顶部菜单模式
+  &--top {
+    flex-direction: column;
+  }
+
+  // 混合菜单模式
+  &--mix {
+    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);
+  }
+
+  &__mix-top {
+    width: 100%;
+    height: 50px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  &__mix-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__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,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,