mayiming/hldrCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改管理界面刷新bug

Browse Source
This commit is contained in:
马懿铭
2025-10-31 16:44:48 +08:00
parent fc97cf65d5
commit 909ec1fee5
1 changed files with 226 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
management/src/App.vue
View File

@@ -1,332 +1,317 @@
<template>
<!-- 外层容器 - 固定定位占满全屏 -->
<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
<el-container style="height: 100%; min-height: 100%; overflow: hidden;">
<!-- 侧边栏区域 -->
<el-aside
:width="isCollapse ? '64px' : '200px'"
style="border-right: 1px solid #eee; transition: width 0.3s ease; background-color: #f5f7fa;"
>
<div class="layout-wrapper">
<el-container class="layout-container">
<!-- 左侧菜单 -->
<el-aside :width="isCollapse ? '64px' : '200px'" class="aside-menu">
<el-menu
:router="true"
default-active="/home"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
background-color="#f5f7fa"
text-color="#333"
active-text-color="#409eff"
:collapse-transition="false"
style="border-right: none; margin-top: 20px;"
>
<!-- 首页 - 跳转到 /home -->
<el-menu-item index="/home">
<el-icon><House /></el-icon>
<template #title>首页</template>
</el-menu-item>
:router="true"
:default-active="activeMenu"
:collapse="isCollapse"
:collapse-transition="false"
background-color="#f5f7fa"
text-color="#333"
active-text-color="#409eff"
class="menu"
@open="handleOpen"
@close="handleClose"
>
<!-- 首页 -->
<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>
<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>
<el-menu-item index="/resource">
<el-icon><Folder /></el-icon>
<template #title>资源案例</template>
</el-menu-item>
<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>
<!-- 社区服务 - 跳转到 /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-icon><CirclePlus /></el-icon>
<template #title>封面设置</template>
</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-menu-item index="/service/serviceimg">封面设置</el-menu-item>
<el-menu-item index="/service/schoolEnterprise">校企合作</el-menu-item>
<el-menu-item index="/service/internship">研究实习项目</el-menu-item>
<el-menu-item index="/service/government">乡村政府项目</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-icon><CirclePlus /></el-icon>
<template #title>封面设置</template>
</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-menu-item index="/resourcecase/setting">封面设置</el-menu-item>
<el-menu-item index="/resourcecase/onlinecourse">线上课程</el-menu-item>
<el-menu-item index="/resourcecase/teachingcase">教学案例</el-menu-item>
<el-menu-item index="/resourcecase/videoscase">视频案例</el-menu-item>
</el-sub-menu>
</el-menu>
</el-menu>
</el-aside>
<!-- 右侧主内容容器 -->
<el-container direction="vertical" style="height: 100%; overflow: hidden;">
<!-- 顶部导航栏 - 固定高度 -->
<el-header style="height: 60px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
<!-- 右侧内容 -->
<el-container direction="vertical" class="main-container">
<!-- 顶部栏 -->
<el-header class="header">
<div class="header-left">
<!-- 替换为单个切换按钮 -->
<el-button
@click="isCollapse = !isCollapse"
size="small"
style="margin-right: 20px;"
type="primary"
>
<!-- 根据折叠状态显示不同箭头 -->
<el-button @click="isCollapse = !isCollapse" size="small" type="primary" class="toggle-btn">
{{ 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">
<!-- 通知图标按钮 -->
<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>
<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;"><Message /></el-icon>
</el-button>
<!-- 用户下拉菜单 -->
<el-dropdown trigger="click" placement="bottom-end">
<div class="user-info" style="cursor: pointer; display: flex; align-items: center;">
<!-- 调整头像尺寸和样式 -->
<img
src="https://picsum.photos/id/1005/40/40"
alt="用户头像"
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 class="user-info">
<!-- 核心修改：将 size="small" 改为 size="36"，自定义头像大小为36px -->
<el-avatar :src="avatarUrl" size="25" />
<span class="username">用户名</span>
<el-icon class="arrow"><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;">
<router-view />
<!-- 主内容区（唯一可滚动区域） -->
<el-main class="main-content">
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import {
Document,
Menu as IconMenu,
Location,
Setting,
Bell,
Message
House, Document, Folder, Discount, User, Memo,
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,
(newMatched) => {
breadcrumbItems.value = newMatched
},
() => route.path,
() => updateBreadcrumb(),
{ 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>
/* 禁止水平滚动 */
::v-deep html, ::v-deep body {
/* ====================== 全局布局：0 间距 + 固定布局 ====================== */
.layout-wrapper,
.layout-container,
html,
body {
height: 100%;
overflow: hidden;
}
/* 清除所有默认边距和滚动 */
::v-deep * {
margin: 0;
padding: 0;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box;
}
/* 菜单样式 */
.el-menu-vertical-demo {
border-right: none;
.layout-wrapper {
position: fixed;
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;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.user-name {
cursor: pointer;
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%;
}
.card-header {
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;
flex: 1;
padding: 20px;
background: #f9f9fb;
overflow-y: auto; /* 关键：只在这里滚动 */
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>
</style>