菜单布局等初步完成

schoolNewsWeb/src/layouts/BasicLayout.vue

@@ -1,54 +1,46 @@
 <template>
   <div class="basic-layout">
-    <!-- 侧边栏 -->
-    <aside class="sidebar" :class="{ 'collapsed': sidebarCollapsed }">
-      <div class="sidebar-header">
-        <div class="logo">
-          <img src="@/assets/logo.png" alt="Logo" v-if="!sidebarCollapsed">
-          <span class="logo-text" v-if="!sidebarCollapsed">校园新闻</span>
-        </div>
+    <!-- 顶部导航栏 -->
+    <header class="header">
+      <div class="header-left">
+        <button class="sidebar-toggle" @click="toggleSidebar">
+          <i class="icon-menu"></i>
+        </button>
+
+        <!-- 面包屑导航 -->
+        <Breadcrumb :items="breadcrumbItems" />
       </div>
-      
-      <!-- 菜单导航 -->
-      <nav class="sidebar-nav">
-        <MenuNav 
-          :menus="menuTree" 
-          :collapsed="sidebarCollapsed"
-          @menu-click="handleMenuClick"
-        />
-      </nav>
-    </aside>
-    
+
+      <div class="header-right">
+        <!-- 用户信息 -->
+        <UserDropdown :user="userInfo" @logout="handleLogout" />
+      </div>
+    </header>
     <!-- 主内容区域 -->
     <div class="main-wrapper">
-      <!-- 顶部导航栏 -->
-      <header class="header">
-        <div class="header-left">
-          <button 
-            class="sidebar-toggle" 
-            @click="toggleSidebar"
-          >
-            <i class="icon-menu"></i>
-          </button>
-          
-          <!-- 面包屑导航 -->
-          <Breadcrumb :items="breadcrumbItems" />
+      <!-- 侧边栏 -->
+      <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+        <div class="sidebar-header">
+          <div class="logo">
+            <img src="@/assets/logo.png" alt="Logo" v-if="!sidebarCollapsed" />
+            <span class="logo-text" v-if="!sidebarCollapsed">校园新闻</span>
+          </div>
         </div>
-        
-        <div class="header-right">
-          <!-- 用户信息 -->
-          <UserDropdown 
-            :user="userInfo"
-            @logout="handleLogout"
+
+        <!-- 菜单导航 -->
+        <nav class="sidebar-nav">
+          <MenuNav
+            :menus="menuTree"
+            :collapsed="sidebarCollapsed"
+            @menu-click="handleMenuClick"
           />
-        </div>
-      </header>
-      
+        </nav>
+      </aside>
       <!-- 页面内容 -->
       <main class="content">
         <router-view />
       </main>
-      
+
       <!-- 页脚 -->
       <footer class="footer">
         <div class="footer-content">
@@ -60,17 +52,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'vuex';
-import type { SysMenu } from '@/types';
-import { getMenuPath } from '@/utils/route-generator';
+import { ref, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useStore } from "vuex";
+import type { SysMenu } from "@/types";
+import { getMenuPath } from "@/utils/route-generator";
 // @ts-ignore - Vue 3.5 defineOptions支持
-import MenuNav from '@/components/MenuNav.vue';
+import MenuNav from "@/components/MenuNav.vue";
 // @ts-ignore - Vue 3.5 组件导入兼容性
-import Breadcrumb from '@/components/Breadcrumb.vue';
+import Breadcrumb from "@/components/Breadcrumb.vue";
 // @ts-ignore - Vue 3.5 组件导入兼容性
-import UserDropdown from '@/components/UserDropdown.vue';
+import UserDropdown from "@/components/UserDropdown.vue";
 
 // 响应式状态
 const sidebarCollapsed = ref(false);
@@ -81,16 +73,16 @@ const router = useRouter();
 const store = useStore();
 
 // 计算属性
-const menuTree = computed(() => store.getters['auth/menuTree']);
-const userInfo = computed(() => store.getters['auth/userInfo']);
+const menuTree = computed(() => store.getters["auth/menuTree"]);
+const userInfo = computed(() => store.getters["auth/userInfo"]);
 
 const breadcrumbItems = computed(() => {
   if (!route.meta?.menuId) return [];
-  
+
   const menuPath = getMenuPath(menuTree.value, route.meta.menuId as string);
-  return menuPath.map(menu => ({
-    title: menu.name || '',
-    path: menu.url || ''
+  return menuPath.map((menu) => ({
+    title: menu.name || "",
+    path: menu.url || "",
   }));
 });
 
@@ -98,7 +90,7 @@ const breadcrumbItems = computed(() => {
 function toggleSidebar() {
   sidebarCollapsed.value = !sidebarCollapsed.value;
   // 保存到本地存储
-  localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed.value));
+  localStorage.setItem("sidebarCollapsed", String(sidebarCollapsed.value));
 }
 
 function handleMenuClick(menu: SysMenu) {
@@ -108,19 +100,22 @@ function handleMenuClick(menu: SysMenu) {
 }
 
 function handleLogout() {
-  store.dispatch('auth/logout');
+  store.dispatch("auth/logout");
 }
 
 // 监听路由变化，自动展开对应菜单
-watch(() => route.path, () => {
-  // 可以在这里实现菜单自动展开逻辑
-});
+watch(
+  () => route.path,
+  () => {
+    // 可以在这里实现菜单自动展开逻辑
+  }
+);
 
 // 组件挂载时恢复侧边栏状态
 onMounted(() => {
-  const savedState = localStorage.getItem('sidebarCollapsed');
+  const savedState = localStorage.getItem("sidebarCollapsed");
   if (savedState !== null) {
-    sidebarCollapsed.value = savedState === 'true';
+    sidebarCollapsed.value = savedState === "true";
   }
 });
 </script>
@@ -137,7 +132,7 @@ onMounted(() => {
   background: #001529;
   transition: width 0.3s ease;
   flex-shrink: 0;
-  
+
   &.collapsed {
     width: 80px;
   }
@@ -150,18 +145,18 @@ onMounted(() => {
   justify-content: center;
   padding: 0 16px;
   background: #002140;
-  
+
   .logo {
     display: flex;
     align-items: center;
     color: white;
-    
+
     img {
       width: 32px;
       height: 32px;
       margin-right: 12px;
     }
-    
+
     .logo-text {
       font-size: 18px;
       font-weight: 600;
@@ -195,7 +190,7 @@ onMounted(() => {
 .header-left {
   display: flex;
   align-items: center;
-  
+
   .sidebar-toggle {
     width: 40px;
     height: 40px;
@@ -207,11 +202,11 @@ onMounted(() => {
     justify-content: center;
     border-radius: 4px;
     margin-right: 16px;
-    
+
     &:hover {
       background: #f5f5f5;
     }
-    
+
     .icon-menu {
       font-size: 18px;
       color: #666;
@@ -243,7 +238,7 @@ onMounted(() => {
   border-top: 1px solid #e8e8e8;
   margin: 0 16px 16px 16px;
   border-radius: 0 0 4px 4px;
-  
+
   .footer-content {
     color: #666;
     font-size: 14px;

schoolNewsWeb/src/layouts/NavigationLayout.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="navigation-layout">
+    <!-- 顶部导航栏 -->
+    <TopNavigation />
+
+    <!-- 主内容区域 -->
+    <div class="layout-content">
+      <!-- 面包屑 -->
+      <div class="breadcrumb-wrapper" v-if="breadcrumbItems.length > 0">
+        <Breadcrumb :items="breadcrumbItems" />
+      </div>
+
+      <!-- 侧边栏和内容 -->
+      <div class="content-wrapper" v-if="hasSidebarMenus">
+        <!-- 侧边栏 -->
+        <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+          <div class="sidebar-toggle-btn" @click="toggleSidebar">
+            <i class="toggle-icon">{{ sidebarCollapsed ? '▶' : '◀' }}</i>
+          </div>
+
+          <nav class="sidebar-nav">
+            <MenuNav
+              :menus="sidebarMenus"
+              :collapsed="sidebarCollapsed"
+              @menu-click="handleMenuClick"
+            />
+          </nav>
+        </aside>
+
+        <!-- 页面内容 -->
+        <main class="main-content">
+          <router-view />
+        </main>
+      </div>
+
+      <!-- 没有侧边栏时直接显示内容 -->
+      <div class="content-wrapper-full" v-else>
+        <main class="main-content-full">
+          <router-view />
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import type { SysMenu } from '@/types';
+import { MenuType } from '@/types/enums';
+import { getMenuPath } from '@/utils/route-generator';
+// @ts-ignore - Vue 3.5 组件导入兼容性
+import TopNavigation from '@/components/TopNavigation.vue';
+// @ts-ignore - Vue 3.5 组件导入兼容性
+import MenuNav from '@/components/MenuNav.vue';
+// @ts-ignore - Vue 3.5 组件导入兼容性
+import Breadcrumb from '@/components/Breadcrumb.vue';
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const sidebarCollapsed = ref(false);
+
+// 获取所有菜单
+const allMenus = computed(() => store.getters['auth/menuTree']);
+
+// 获取当前激活的顶层导航菜单
+const activeTopMenu = computed(() => {
+  const path = route.path;
+  
+  // 找到匹配的顶层菜单
+  for (const menu of allMenus.value) {
+    if (menu.type === MenuType.NAVIGATION) {
+      if (isPathUnderMenu(path, menu)) {
+        return menu;
+      }
+    }
+  }
+  
+  return null;
+});
+
+// 获取当前页面的侧边栏菜单（SIDEBAR类型的子菜单）
+const sidebarMenus = computed(() => {
+  if (!activeTopMenu.value || !activeTopMenu.value.children) {
+    return [];
+  }
+  
+  // 返回SIDEBAR类型的子菜单
+  return activeTopMenu.value.children.filter((child: SysMenu) => child.type === MenuType.SIDEBAR);
+});
+
+// 是否有侧边栏菜单
+const hasSidebarMenus = computed(() => sidebarMenus.value.length > 0);
+
+// 面包屑数据
+const breadcrumbItems = computed(() => {
+  if (!route.meta?.menuId) return [];
+  
+  const menuPath = getMenuPath(allMenus.value, route.meta.menuId as string);
+  return menuPath.map((menu) => ({
+    title: menu.name || '',
+    path: menu.url || '',
+  }));
+});
+
+// 判断路径是否在菜单下
+function isPathUnderMenu(path: string, menu: SysMenu): boolean {
+  if (menu.url === path) return true;
+  
+  if (menu.children) {
+    for (const child of menu.children) {
+      if (isPathUnderMenu(path, child)) {
+        return true;
+      }
+    }
+  }
+  
+  return false;
+}
+
+// 切换侧边栏
+function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+  localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed.value));
+}
+
+// 处理菜单点击
+function handleMenuClick(menu: SysMenu) {
+  if (menu.url && menu.url !== route.path) {
+    router.push(menu.url);
+  }
+}
+
+// 恢复侧边栏状态
+const savedState = localStorage.getItem('sidebarCollapsed');
+if (savedState !== null) {
+  sidebarCollapsed.value = savedState === 'true';
+}
+
+// 监听路由变化
+watch(
+  () => route.path,
+  () => {
+    // 路由变化时可以做一些处理
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.navigation-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f0f2f5;
+}
+
+.layout-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.breadcrumb-wrapper {
+  background: white;
+  padding: 16px 24px;
+  margin: 16px 16px 0 16px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+}
+
+.content-wrapper {
+  flex: 1;
+  display: flex;
+  margin: 16px;
+  gap: 16px;
+}
+
+.sidebar {
+  width: 260px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  transition: width 0.3s ease;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &.collapsed {
+    width: 80px;
+  }
+}
+
+.sidebar-toggle-btn {
+  position: absolute;
+  top: 50%;
+  right: -12px;
+  width: 24px;
+  height: 48px;
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 0 12px 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #f0f2f5;
+  }
+
+  .toggle-icon {
+    font-size: 12px;
+    color: #666;
+  }
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 0;
+}
+
+.main-content {
+  flex: 1;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  padding: 24px;
+  overflow-y: auto;
+  min-width: 0;
+}
+
+.content-wrapper-full {
+  flex: 1;
+  margin: 16px;
+}
+
+.main-content-full {
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  padding: 24px;
+  min-height: calc(100vh - 64px - 48px);
+}
+</style>
+