修改管理界面刷新bug

management/src/App.vue

@@ -1,332 +1,317 @@
 <template>
-  <!-- 外层容器 - 固定定位占满全屏 -->
+  <div class="layout-wrapper">
-  <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
+    <el-container class="layout-container">
-    <el-container style="height: 100%; min-height: 100%; overflow: hidden;">
+      <!-- 左侧菜单 -->
-      <!-- 侧边栏区域 -->
+      <el-aside :width="isCollapse ? '64px' : '200px'" class="aside-menu">
-      <el-aside
-          :width="isCollapse ? '64px' : '200px'"
-          style="border-right: 1px solid #eee; transition: width 0.3s ease; background-color: #f5f7fa;"
-      >
         <el-menu
             :router="true"
-    default-active="/home"
+            :default-active="activeMenu"
-    class="el-menu-vertical-demo"
             :collapse="isCollapse"
-    @open="handleOpen"
+            :collapse-transition="false"
-    @close="handleClose"
             background-color="#f5f7fa"
             text-color="#333"
             active-text-color="#409eff"
-    :collapse-transition="false"
+            class="menu"
-    style="border-right: none; margin-top: 20px;"
+            @open="handleOpen"
->
+            @close="handleClose"
-    <!-- 首页 - 跳转到 /home -->
+        >
+          <!-- 首页 -->
           <el-menu-item index="/home">
             <el-icon><House /></el-icon>
             <template #title>首页</template>
           </el-menu-item>
 
-    <!-- 新闻动态 - 跳转到 /news -->
           <el-menu-item index="/news">
             <el-icon><Document /></el-icon>
             <template #title>新闻动态</template>
           </el-menu-item>
 
-    <!-- 资源案例 - 跳转到 /resource -->
           <el-menu-item index="/resource">
             <el-icon><Folder /></el-icon>
             <template #title>资源案例</template>
           </el-menu-item>
 
-    <!-- 社区服务 - 跳转到 /community -->
           <el-menu-item index="/community">
             <el-icon><Discount /></el-icon>
             <template #title>社区服务</template>
           </el-menu-item>
+
           <el-menu-item index="/person">
             <el-icon><User /></el-icon>
             <template #title>个人信息</template>
           </el-menu-item>
+
           <el-menu-item index="/publish">
             <el-icon><Memo /></el-icon>
             <template #title>发布文章</template>
           </el-menu-item>
+
           <el-menu-item index="/baseoverview">
             <el-icon><Memo /></el-icon>
             <template #title>编辑基地概况</template>
           </el-menu-item>
+
           <el-menu-item index="/devproject">
             <el-icon><Memo /></el-icon>
             <template #title>编辑科学研究</template>
           </el-menu-item>
+
           <el-menu-item index="/meeting">
             <el-icon><Memo /></el-icon>
             <template #title>编辑会议</template>
           </el-menu-item>
 
+          <!-- 社会服务 -->
           <el-sub-menu index="/service">
-            <!-- 父菜单标题（含图标） -->
             <template #title>
               <el-icon><Memo /></el-icon>
-              <span>社会服务</span> <!-- 父菜单名称，原“编辑会议”改为更通用的父标题 -->
+              <span>社会服务</span>
             </template>
-
+            <el-menu-item index="/service/serviceimg">封面设置</el-menu-item>
-            <el-menu-item index="/service/serviceimg">
+            <el-menu-item index="/service/schoolEnterprise">校企合作</el-menu-item>
-              <el-icon><CirclePlus /></el-icon>
+            <el-menu-item index="/service/internship">研究实习项目</el-menu-item>
-              <template #title>封面设置</template>
+            <el-menu-item index="/service/government">乡村政府项目</el-menu-item>
-            </el-menu-item>
-
-            <!-- 子菜单项 1 -->
-            <el-menu-item index="/service/schoolEnterprise">
-              <el-icon><CirclePlus /></el-icon>
-              <template #title>校企合作</template>
-            </el-menu-item>
-
-            <!-- 子菜单项 2（原“编辑会议”保留为子项） -->
-            <el-menu-item index="/service/internship">
-              <el-icon><Edit /></el-icon>
-              <template #title>研究实习项目</template>
-            </el-menu-item>
-
-            <!-- 子菜单项 3（可按需添加更多） -->
-            <el-menu-item index="/service/government">
-              <el-icon><List /></el-icon>
-              <template #title>乡村政府项目</template>
-            </el-menu-item>
-
-
-
-            <!-- 支持嵌套子菜单（可选，如需三级菜单） -->
-
           </el-sub-menu>
 
+          <!-- 案例资源 -->
           <el-sub-menu index="/resourcecase">
-            <!-- 父菜单标题（含图标） -->
             <template #title>
               <el-icon><Memo /></el-icon>
-              <span>案例资源</span> <!-- 父菜单名称，原“编辑会议”改为更通用的父标题 -->
+              <span>案例资源</span>
             </template>
-
+            <el-menu-item index="/resourcecase/setting">封面设置</el-menu-item>
-            <el-menu-item index="/resourcecase/setting">
+            <el-menu-item index="/resourcecase/onlinecourse">线上课程</el-menu-item>
-              <el-icon><CirclePlus /></el-icon>
+            <el-menu-item index="/resourcecase/teachingcase">教学案例</el-menu-item>
-              <template #title>封面设置</template>
+            <el-menu-item index="/resourcecase/videoscase">视频案例</el-menu-item>
-            </el-menu-item>
-
-            <!-- 子菜单项 1 -->
-            <el-menu-item index="/resourcecase/onlinecourse">
-              <el-icon><CirclePlus /></el-icon>
-              <template #title>线上课程</template>
-            </el-menu-item>
-
-            <!-- 子菜单项 2（原“编辑会议”保留为子项） -->
-            <el-menu-item index="/resourcecase/teachingcase">
-              <el-icon><Edit /></el-icon>
-              <template #title>教学案例</template>
-            </el-menu-item>
-
-            <!-- 子菜单项 3（可按需添加更多） -->
-            <el-menu-item index="/resourcecase/videoscase">
-              <el-icon><List /></el-icon>
-              <template #title>视频案例</template>
-            </el-menu-item>
-
-
-
-            <!-- 支持嵌套子菜单（可选，如需三级菜单） -->
-
           </el-sub-menu>
-
         </el-menu>
-
       </el-aside>
 
-      <!-- 右侧主内容容器 -->
+      <!-- 右侧内容 -->
-      <el-container direction="vertical" style="height: 100%; overflow: hidden;">
+      <el-container direction="vertical" class="main-container">
-        <!-- 顶部导航栏 - 固定高度 -->
+        <!-- 顶部栏 -->
-        <el-header style="height: 60px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
+        <el-header class="header">
           <div class="header-left">
-            <!-- 替换为单个切换按钮 -->
+            <el-button @click="isCollapse = !isCollapse" size="small" type="primary" class="toggle-btn">
-            <el-button
-                @click="isCollapse = !isCollapse"
-                size="small"
-                style="margin-right: 20px;"
-                type="primary"
-            >
-              <!-- 根据折叠状态显示不同箭头 -->
               {{ isCollapse ? '->' : '<-' }}
             </el-button>
-            <el-breadcrumb separator="/" style="line-height: 60px;">
+            <el-breadcrumb separator="/" class="breadcrumb">
               <el-breadcrumb-item
-                  v-for="(item, index) in breadcrumbItems"
+                  v-for="(item, index) in breadcrumbList"
                   :key="index"
                   :to="item.path"
               >
-                {{ item.meta.title }}
+                {{ item.meta?.title || '首页' }}
               </el-breadcrumb-item>
             </el-breadcrumb>
           </div>
 
-          <div class="header-user-area">
+          <div class="header-right">
-            <!-- 通知图标按钮 -->
-            <el-button
-                size="small"
-                circle
-                style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
-            >
-              <el-icon style="font-size: 18px;"><Bell /></el-icon>
-            </el-button>
 
-            <!-- 消息图标按钮 -->
-            <el-button
-                size="small"
-                circle
-                style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
-            >
-              <el-icon style="font-size: 18px;"><Message /></el-icon>
-            </el-button>
 
-            <!-- 用户下拉菜单 -->
             <el-dropdown trigger="click" placement="bottom-end">
-              <div class="user-info" style="cursor: pointer; display: flex; align-items: center;">
+              <div class="user-info">
-                <!-- 调整头像尺寸和样式 -->
+                <!-- 核心修改：将 size="small" 改为 size="36"，自定义头像大小为36px -->
-                <img
+                <el-avatar :src="avatarUrl" size="25" />
-                    src="https://picsum.photos/id/1005/40/40"
+                <span class="username">用户名</span>
-                    alt="用户头像"
+                <el-icon class="arrow"><ChevronDown /></el-icon>
-                    class="user-avatar"
-                    style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover;"
-                >
-                <span class="user-name" style="margin-left: 8px; font-size: 14px;">用户名</span>
-                <el-icon style="margin-left: 6px; font-size: 16px;"><ChevronDown /></el-icon>
               </div>
-
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item>个人中心</el-dropdown-item>
+                  <el-dropdown-item @click="goTo('/person')">个人中心</el-dropdown-item>
                   <el-dropdown-item>设置</el-dropdown-item>
-                  <el-dropdown-item>退出登录</el-dropdown-item>
+                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
           </div>
         </el-header>
 
-        <!-- 主显示区域 -->
+        <!-- 主内容区（唯一可滚动区域） -->
-        <el-main style="transition: all 0.3s ease; padding: 20px; margin: 0; overflow-y: auto; flex: 1; box-sizing: border-box;">
+        <el-main class="main-content">
-          <router-view />
+          <router-view v-slot="{ Component }">
+            <component :is="Component" />
+          </router-view>
         </el-main>
       </el-container>
     </el-container>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
 import {
-  Document,
+  House, Document, Folder, Discount, User, Memo,
-  Menu as IconMenu,
+  Bell, Message
-  Location,
-  Setting,
-  Bell,
-  Message
 } from '@element-plus/icons-vue'
-import { useRoute } from 'vue-router'
 
+// 正确使用 useRoute / useRouter（必须在 setup 顶层）
+const route = useRoute()
+const router = useRouter()
+
+// 菜单折叠
 const isCollapse = ref(true)
 
-const handleOpen = (key: string, keyPath: string[]) => {
+// 动态高亮菜单
-  console.log(key, keyPath)
+const activeMenu = computed(() => {
+  const matched = route.matched
+  for (let i = matched.length - 1; i >= 0; i--) {
+    if (matched[i].meta?.menuKey) return matched[i].meta.menuKey as string
+  }
+  return route.path
+})
+
+// 面包屑
+const breadcrumbList = ref<any[]>([])
+
+const updateBreadcrumb = () => {
+  breadcrumbList.value = route.matched.filter(m => m.meta?.title)
 }
 
-const handleClose = (key: string, keyPath: string[]) => {
+// 监听路由变化
-  console.log(key, keyPath)
-}
-const route = useRoute()
-const breadcrumbItems = ref(route.matched)
-
-// 监听路由变化，更新面包屑
 watch(
-    () => route.matched,
+    () => route.path,
-    (newMatched) => {
+    () => updateBreadcrumb(),
-      breadcrumbItems.value = newMatched
-    },
     { immediate: true }
 )
+
+// 页面加载时强制更新
+onMounted(() => {
+  updateBreadcrumb()
+})
+
+// 菜单事件
+const handleOpen = () => {}
+const handleClose = () => {}
+
+// 用户相关
+const avatarUrl = 'https://picsum.photos/id/1005/40/40'
+
+const goTo = (path: string) => router.push(path)
+
+const logout = () => {
+  ElMessageBox.confirm('确定退出登录？', '提示', { type: 'warning' })
+      .then(() => router.push('/login'))
+      .catch(() => {})
+}
 </script>
 
 <style scoped>
-/* 禁止水平滚动 */
+/* ====================== 全局布局：0 间距 + 固定布局 ====================== */
-::v-deep html, ::v-deep body {
+.layout-wrapper,
+.layout-container,
+html,
+body {
   height: 100%;
-  overflow: hidden;
+  margin: 0 !important;
-}
+  padding: 0 !important;
-
+  overflow: hidden !important;
-/* 清除所有默认边距和滚动 */
-::v-deep * {
-  margin: 0;
-  padding: 0;
   box-sizing: border-box;
 }
 
-/* 菜单样式 */
+.layout-wrapper {
-.el-menu-vertical-demo {
+  position: fixed;
-  border-right: none;
+  top: 0; left: 0; right: 0; bottom: 0;
+  display: flex;
+}
+
+/* ====================== 左侧菜单 ====================== */
+.aside-menu {
+  background: #f5f7fa;
+  border-right: 1px solid #eee;
+  transition: width 0.3s ease;
+  overflow: hidden;
+}
+
+.menu {
+  height: 100%;
+  border-right: none;
+  margin-top: 20px;
+}
+
+/* ====================== 右侧主容器 ====================== */
+.main-container {
+  height: 100%;
+  flex-direction: column;
+}
+
+/* ====================== 顶部栏 ====================== */
+.header {
+  height: 60px !important;
+  padding: 0 20px;
+  border-bottom: 1px solid #eee;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0; /* 禁止收缩 */
+  box-shadow: 0 1px 4px rgba(0,0,0,.04);
 }
 
-/* 顶部栏样式 */
 .header-left {
   display: flex;
   align-items: center;
+  gap: 16px;
+}
+
+.toggle-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.breadcrumb {
+  font-size: 14px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  width: 36px;
+  height: 36px;
 }
 
 .user-info {
   display: flex;
   align-items: center;
   gap: 8px;
-}
+  cursor: pointer;
-
-.user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.user-name {
   font-size: 14px;
 }
 
-/* 主内容样式 */
+.username {
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arrow {
+  font-size: 16px;
+  transition: transform 0.2s;
+}
+
+.user-info:hover .arrow {
+  transform: rotate(180deg);
+}
+
+/* ====================== 内容区（唯一可滚动） ====================== */
 .main-content {
-  width: 100%;
+  flex: 1;
-}
+  padding: 20px;
-
+  background: #f9f9fb;
-.card-header {
+  overflow-y: auto;     /* 关键：只在这里滚动 */
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* 组件样式穿透 */
-::v-deep .el-container,
-::v-deep .el-aside,
-::v-deep .el-header,
-::v-deep .el-main {
-  padding: 0;
-  margin: 0;
-  border: none;
   overflow-x: hidden;
-}
+  margin: 0;
-
-::v-deep .el-header {
-  background-color: #fff;
-}
-
-::v-deep .el-main {
-  background-color: #fff;
-}
-
-::v-deep .el-menu--horizontal {
-  border-bottom: none;
 }
 </style>
-