视图路径修改

schoolNewsWeb/src/layouts/SidebarLayout.vue

@@ -1,26 +1,31 @@
 <template>
   <div class="sidebar-layout">
-    <!-- 顶部导航栏 -->
-    <TopNavigation />
-
     <!-- 主内容区域 -->
     <div class="layout-content">
       <!-- 侧边栏和内容 -->
       <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>
+      <!-- 侧边栏 -->
+      <aside class="sidebar">
+        <!-- Logo区域 -->
+        <div class="sidebar-header">
+          <div class="logo-container">
+            <img src="@/assets/imgs/logo-icon.svg" alt="Logo" class="logo-icon" />
+            <div class="logo-text">
+              <div class="logo-title">管理后台</div>
+              <div class="logo-subtitle">红色思政平台</div>
+            </div>
           </div>
+        </div>
 
-          <nav class="sidebar-nav">
-            <MenuSidebar
-              :menus="sidebarMenus"
-              :collapsed="sidebarCollapsed"
-              @menu-click="handleMenuClick"
-            />
-          </nav>
-        </aside>
+        <!-- 导航菜单 -->
+        <nav class="sidebar-nav">
+          <MenuSidebar
+            :menus="sidebarMenus"
+            :collapsed="false"
+            @menu-click="handleMenuClick"
+          />
+        </nav>
+      </aside>
 
         <!-- 页面内容 -->
         <main class="main-content">
@@ -39,19 +44,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
-import { TopNavigation, MenuSidebar } from '@/components';
+import { MenuSidebar } from '@/components';
 
 const route = useRoute();
 const router = useRouter();
 const store = useStore();
 
-const sidebarCollapsed = ref(false);
-
 // 获取所有菜单
 const allMenus = computed(() => store.getters['auth/menuTree']);
 
@@ -68,30 +71,19 @@ const sidebarMenus = computed(() => {
 // 是否有侧边栏菜单
 const hasSidebarMenus = computed(() => sidebarMenus.value.length > 0);
 
-// 切换侧边栏
-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';
-}
 </script>
 
 <style lang="scss" scoped>
 .sidebar-layout {
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
   background: #f0f2f5;
 }
 
@@ -99,95 +91,101 @@ if (savedState !== null) {
   flex: 1;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 76px);
-  overflow-y: auto;
 }
 
 .content-wrapper {
   flex: 1;
   display: flex;
-  margin: 16px;
-  gap: 16px;
+  gap: 0;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .sidebar {
-  width: 260px;
-  background: #001529;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  transition: width 0.3s ease;
+  width: 256px;
+  background: #FFFFFF;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  position: relative;
-  max-height: calc(100vh - 108px); // 顶部导航76px + 上下边距32px
+  height: 100vh;
   overflow: hidden;
-
-  &.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;
+.sidebar-header {
+  padding: 24px 24px 1px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  height: 97px;
+}
+
+.logo-container {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 10;
-  transition: all 0.3s;
+  gap: 12px;
+}
 
-  &:hover {
-    background: #f0f2f5;
-  }
+.logo-icon {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 10px;
+}
 
-  .toggle-icon {
-    font-size: 12px;
-    color: #666;
-  }
+.logo-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.logo-title {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #C10007;
+}
+
+.logo-subtitle {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.33;
+  color: #6A7282;
 }
 
 .sidebar-nav {
   flex: 1;
   overflow-y: auto;
-  padding: 16px 0;
+  padding: 16px 16px 0;
   
-  // 美化滚动条
+  // 美化滚动条（深色，适配白色背景）
   &::-webkit-scrollbar {
     width: 6px;
   }
   
   &::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
+    background: #f1f1f1;
     border-radius: 3px;
   }
   
   &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
+    background: #c1c1c1;
     border-radius: 3px;
     
     &:hover {
-      background: rgba(255, 255, 255, 0.3);
+      background: #a8a8a8;
     }
   }
 }
 
 .main-content {
   flex: 1;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  background: #F9FAFB;
   overflow-y: auto;
   min-width: 0;
-  height: calc(100vh - 108px); // 固定高度：视口高度 - 顶部导航76px - 上下边距32px
-  max-height: calc(100vh - 108px);
+  
+  // 使用 margin 而不是 padding，避免影响滚动高度计算
+  // margin 不计入元素尺寸，所以不会导致滚动条
+  > * {
+    margin: 20px;
+  }
   
   // 美化滚动条
   &::-webkit-scrollbar {
@@ -214,12 +212,15 @@ if (savedState !== null) {
 }
 
 .main-content-full {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  height: calc(100vh - 108px);
+  background: #F9FAFB;
+  height: 100vh;
   overflow-y: auto;
   
+  // 使用 margin 而不是 padding，避免影响滚动高度计算
+  > * {
+    margin: 20px;
+  }
+  
   // 美化滚动条
   &::-webkit-scrollbar {
     width: 8px;