xto-fronted 0.4.35 → 0.4.37

package/src/components/Layout/index.vue

@@ -1,255 +1,125 @@
-<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) {
-    // 如果已经有选中的一级菜单，且当前路径不在菜单中（如404页面），保持不变
-    if (appStore.activeTopMenuPath) {
-      // 检查当前路径是否在任何菜单中
-      let pathInMenu = false
-      for (const menu of menuStore.menuList) {
-        if (menu.menuUrl === path) {
-          pathInMenu = true
-          break
-        }
-        if (menu.children && menu.children.length > 0) {
-          if (checkPathInChildren(menu.children, path)) {
-            pathInMenu = true
-            break
-          }
-        }
-      }
-      // 如果路径不在菜单中，保持当前的activeTopMenuPath不变
-      if (!pathInMenu) {
-        return
-      }
-    }
-
-    // 遍历一级菜单，尝试匹配
-    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
-        }
-      }
-    }
-    // 如果没匹配到且没有activeTopMenuPath，默认选中第一个有子菜单的一级菜单，或第一个菜单
-    if (!appStore.activeTopMenuPath) {
-      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)
-    }
-  }
-)
-
-// 监听布局模式变化，切换到 mix 模式时同步一级菜单
-watch(
-  layoutMode,
-  (mode) => {
-    if (mode === 'mix' && menuStore.menuList.length > 0) {
-      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" :show-logo="false" :show-user="false" />
-        </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);
-  }
-}
+<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);
+  }
+}
 </style>

package/src/router/layoutRoute.ts

@@ -1,58 +1,45 @@
-/**
- * 布局路由工厂函数
- */
-
-import { createRouter as vueCreateRouter, createWebHistory } from 'vue-router'
-import type { RouteRecordRaw, Router } from 'vue-router'
-import Layout from '@/components/Layout/index.vue'
-import NotFound from '@/views/error/404.vue'
-
-interface LayoutRouteOptions {
-  indexPath?: string
-}
-
-/**
- * 创建布局路由
- * @param children 子路由配置
- * @param options 配置选项
- * @returns 布局路由配置
- */
-export function createLayoutRoute(
-  children: RouteRecordRaw[],
-  options: LayoutRouteOptions = {}
-): RouteRecordRaw {
-  const indexPath = options.indexPath || '/dashboard'
-
-  return {
-    path: '/',
-    name: 'Layout',
-    component: Layout,
-    redirect: indexPath,
-    children: [
-      ...children,
-      // catch-all 路由，让404在Layout内渲染
-      {
-        path: ':pathMatch(.*)*',
-        name: 'LayoutNotFound',
-        component: NotFound,
-        meta: {
-          title: '404',
-          hidden: true
-        }
-      }
-    ]
-  }
-}
-
-/**
- * 创建路由实例
- * @param routes 路由配置数组
- * @returns 路由实例
- */
-export function createRouter(routes: RouteRecordRaw[]): Router {
-  return vueCreateRouter({
-    history: createWebHistory(),
-    routes,
-    scrollBehavior: () => ({ left: 0, top: 0 })
-  })
+/**
+ * 布局路由工厂函数
+ */
+
+import { createRouter as vueCreateRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw, Router } from 'vue-router'
+import Layout from '@/components/Layout/index.vue'
+
+interface LayoutRouteOptions {
+  indexPath?: string
+}
+
+/**
+ * 创建布局路由
+ * @param children 子路由配置
+ * @param options 配置选项
+ * @returns 布局路由配置
+ */
+export function createLayoutRoute(
+  children: RouteRecordRaw[],
+  options: LayoutRouteOptions = {}
+): RouteRecordRaw {
+  const indexPath = options.indexPath || '/dashboard'
+
+  return {
+    path: '/',
+    name: 'Layout',
+    component: Layout,
+    redirect: indexPath,
+    children
+  }
+}
+
+/**
+ * 创建路由实例
+ * @param routes 路由配置数组
+ * @returns 路由实例
+ */
+export function createRouter(routes: RouteRecordRaw[]): Router {
+  return vueCreateRouter({
+    history: createWebHistory(),
+    routes,
+    scrollBehavior: () => ({ left: 0, top: 0 })
+  })
 }

package/src/stores/app.ts

@@ -22,8 +22,6 @@ 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'))
@@ -76,18 +74,6 @@ 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)
   }
 
   // 切换标签页
@@ -158,7 +144,6 @@ export const useAppStore = defineStore('app', () => {
     showBreadcrumb,
     primaryColor,
     cachedViews,
-    activeTopMenuPath,
     themeClass,
     setAppName,
     setIndexPath,
@@ -166,7 +151,6 @@ export const useAppStore = defineStore('app', () => {
     toggleCollapse,
     setTheme,
     setLayout,
-    setActiveTopMenuPath,
     toggleTabs,
     toggleFooter,
     toggleBreadcrumb,