<template>
<div v-if="isLoginPage" class="login-page datav-page">
<dv-full-screen-container>
<router-view />
</dv-full-screen-container>
</div>
<div v-else class="admin-layout datav-page">
<dv-full-screen-container>
<el-container class="main-container">
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '210px'" class="sidebar">
<dv-border-box-1 class="dv-border-box-container">
<div class="sidebar-logo">
<dv-decoration-2 style="width:100%;height:5px;" />
<transition name="sidebar-logo-fade">
<img v-if="isCollapse" src="./assets/logo-mini.svg" alt="Logo" class="sidebar-logo-img" />
<div v-else class="sidebar-logo-title">
<!-- <img src="./assets/logo.svg" alt="Logo" class="sidebar-logo-img" /> -->
<h1 class="sidebar-title">简历管理系统</h1>
</div>
</transition>
<dv-decoration-2 style="width:100%;height:5px;" />
</div>
<el-scrollbar>
<el-menu :default-active="activeMenu" class="el-menu-vertical datav-menu" :collapse="isCollapse" router
background-color="transparent" text-color="#bfcbd9" active-text-color="#00c0ff" :unique-opened="true"
:collapse-transition="false">
<el-menu-item index="/dashboard">
<el-icon>
<odometer />
</el-icon>
<template #title>仪表盘</template>
</el-menu-item>
<el-sub-menu index="1">
<template #title>
<el-icon>
<document />
</el-icon>
<span>简历管理</span>
</template>
<el-menu-item index="/resume">简历模板管理</el-menu-item>
<el-menu-item index="/industry-resume-templates">行业简历模板</el-menu-item>
<el-menu-item index="/recommend-templates">推荐模板管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><data-analysis /></el-icon>
<span>数据管理</span>
</template>
<el-menu-item index="/template">模型管理</el-menu-item>
<el-menu-item index="/industry-data">行业数据管理</el-menu-item>
<el-menu-item index="/bubble-tags">首页气泡设置</el-menu-item>
<el-menu-item index="/skills-management">技能管理</el-menu-item>
</el-sub-menu>
<el-menu-item index="/user">
<el-icon>
<user />
</el-icon>
<template #title>用户管理</template>
</el-menu-item>
<!-- <el-menu-item index="/settings">
<el-icon>
<setting />
</el-icon>
<template #title>系统设置</template>
</el-menu-item> -->
</el-menu>
</el-scrollbar>
</dv-border-box-1>
</el-aside>
<!-- 主内容区 -->
<el-container class="content-container">
<!-- 顶部导航栏 -->
<el-header class="header" height="50px">
<dv-border-box-3 class="dv-border-box-container">
<div class="header-container">
<div class="header-left">
<div class="toggle-sidebar" @click="toggleSidebar">
<el-icon>
<fold v-if="!isCollapse" />
<expand v-else />
</el-icon>
</div>
<div class="system-title">
<dv-decoration-3 style="width:200px;height:20px;" />
简历制作小程序后台管理系统
<dv-decoration-3 style="width:200px;height:20px;" />
</div>
</div>
<div class="header-right">
<dv-decoration-4 style="width:150px;height:30px;" />
<div class="header-item">
<el-tooltip content="全屏显示" effect="dark" placement="bottom">
<div class="fullscreen-btn" @click="toggleFullScreen">
<el-icon><full-screen /></el-icon>
</div>
</el-tooltip>
</div>
<div class="header-item">
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<div class="size-select">
<el-dropdown trigger="click" @command="handleSizeChange">
<div class="size-btn">
<el-icon><set-up /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="default">默认</el-dropdown-item>
<el-dropdown-item command="medium">中等</el-dropdown-item>
<el-dropdown-item command="small">小型</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-tooltip>
</div>
<div class="header-item user-info">
<el-dropdown trigger="click">
<span class="user-dropdown-link">
<el-avatar :size="30" :src="userAvatar"></el-avatar>
<span class="username">{{ username }}</span>
<el-icon><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<!-- <el-dropdown-item>
<el-icon>
<user />
</el-icon> 个人中心
</el-dropdown-item>
<el-dropdown-item>
<el-icon>
<key />
</el-icon> 修改密码
</el-dropdown-item> -->
<el-dropdown-item @click="handleLogout">
<el-icon><switch-button /></el-icon> 退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</dv-border-box-3>
</el-header>
<!-- 标签页导航 -->
<div class="tabs-view-container">
<dv-border-box-4 class="dv-border-box-container">
<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab" @tab-click="handleTabClick"
class="tabs-view datav-tabs">
<el-tab-pane v-for="item in visitedViews" :key="item.path" :label="item.title"
:name="item.path"></el-tab-pane>
</el-tabs>
</dv-border-box-4>
</div>
<el-main class="main-content">
<dv-border-box-8 class="dv-border-box-container app-main-container">
<div class="app-main">
<el-scrollbar>
<router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</el-scrollbar>
</div>
</dv-border-box-8>
</el-main>
<el-footer height="40px" class="footer">
<dv-border-box-2 class="dv-border-box-container">
<div class="footer-content">
<div class="footer-content">
<a href="https://mc.tencent.com/HRVjVcS5" target="_blank" class="footer-link">Made in CodeBuddy</a>
<span class="footer-divider">|</span>
<a href="https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/?from=csdn-hackathon-2025" target="_blank"
class="footer-link">Powered by CloudBase</a>
</div>
</div>
</dv-border-box-2>
</el-footer>
</el-container>
</el-container>
</dv-full-screen-container>
</div>
</template>
<script>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
// 路由名称映射表
const routeTitleMap = {
'/': '首页',
'/dashboard': '仪表盘',
'/resume': '简历模板管理',
'/template': '模型管理',
'/industry-resume-templates': '行业简历模板',
'/recommend-templates': '推荐模板管理',
'/industry-data': '行业数据管理',
'/bubble-tags': '首页气泡设置',
'/skills-management': '技能管理',
'/user': '用户管理',
// '/settings': '系统设置'
}
export default {
name: 'App',
setup() {
const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)
const username = ref(localStorage.getItem('username') || '管理员')
const userAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
const activeTab = ref('/')
const visitedViews = ref([{ title: '首页', path: '/' }])
const cachedViews = ref([])
const isLoginPage = computed(() => {
return route.path === '/login'
})
const activeMenu = computed(() => {
return route.path
})
const currentRoute = computed(() => {
return routeTitleMap[route.path] || route.meta?.title || '页面'
})
const toggleSidebar = () => {
isCollapse.value = !isCollapse.value
localStorage.setItem('sidebarStatus', isCollapse.value ? '1' : '0')
}
const toggleFullScreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen()
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
}
}
}
const handleSizeChange = (size) => {
document.body.className = `size-${size}`
localStorage.setItem('size', size)
ElMessage.success(`布局大小已设置为${size === 'default' ? '默认' : size === 'medium' ? '中等' : '小型'}`)
}
const handleLogout = () => {
ElMessageBox.confirm('确定要退出登录吗？', '系统提示', {
confirmButtonText: '确认退出',
cancelButtonText: '取消操作',
type: 'warning',
customClass: 'datav-message-box',
distinguishCancelAndClose: true,
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '退出中...';
setTimeout(() => {
// 清除登录信息
localStorage.removeItem('token');
localStorage.removeItem('username');
instance.confirmButtonLoading = false;
ElMessage({
type: 'success',
message: '退出登录成功',
customClass: 'datav-message'
});
router.push('/login');
done();
}, 500);
} else {
done();
}
}
}).catch(() => { })
}
// 处理界面风格切换
watch(() => route.meta.style, (newStyle) => {
if (newStyle) {
localStorage.setItem('uiStyle', newStyle)
ElMessage.success(`已切换到${newStyle === 'tech' ? 'technology格' : 'tradition风格'}界面`)
// 刷新当前页面以应用新的风格
if (route.path !== '/tech-style' && route.path !== '/traditional-style') {
router.go(0) // 刷新页面
} else {
router.push('/dashboard') // 如果在风格切换页面，则跳转到仪表盘
}
}
})
const addVisitedView = (view) => {
if (visitedViews.value.some(v => v.path === view.path)) return
// 使用路由映射表获取标题，如果没有则使用meta中的title，最后默认为"页面"
const title = routeTitleMap[view.path] || view.meta?.title || '页面'
visitedViews.value.push({
path: view.path,
title: title
})
}
const addCachedView = (view) => {
if (cachedViews.value.includes(view.name)) return
if (view.meta?.keepAlive) {
cachedViews.value.push(view.name)
}
}
const removeTab = (targetPath) => {
const index = visitedViews.value.findIndex(item => item.path === targetPath)
if (index !== -1) {
visitedViews.value.splice(index, 1)
}
if (activeTab.value === targetPath) {
const nextTab = visitedViews.value[index] || visitedViews.value[index - 1]
if (nextTab) {
activeTab.value = nextTab.path
router.push(nextTab.path)
}
}
}
const handleTabClick = (tab) => {
// 获取点击的标签页的路径
const path = tab.props.name
// 切换路由到对应的路径
router.push(path)
}
watch(() => route.path, (newPath) => {
activeTab.value = newPath
addVisitedView(route)
addCachedView(route)
})
onMounted(() => {
// 初始化侧边栏状态
const sidebarStatus = localStorage.getItem('sidebarStatus')
if (sidebarStatus) {
isCollapse.value = sidebarStatus === '1'
}
// 初始化布局大小
const size = localStorage.getItem('size') || 'default'
document.body.className = `size-${size}`
// 添加当前路由到已访问视图
if (route.path !== '/login') {
addVisitedView(route)
addCachedView(route)
}
})
return {
isCollapse,
activeMenu,
currentRoute,
username,
userAvatar,
isLoginPage,
activeTab,
visitedViews,
cachedViews,
toggleSidebar,
toggleFullScreen,
handleSizeChange,
handleLogout,
removeTab,
handleTabClick
}
}
}
</script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
background-color: #0e1c47;
color: #c0c4d3;
}
.datav-page {
width: 100%;
height: 100%;
background-color: #0e1c47;
color: #c0c4d3;
}
.dv-border-box-container {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
}
#app {
height: 100%;
}
.admin-layout {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background-color: #0e1c47;
color: #c0c4d3;
}
/* 主容器 */
.main-container {
height: 100vh;
background-color: #0e1c47;
}
/* 侧边栏 */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
background-color: transparent;
transition: width 0.28s;
overflow: hidden;
height: 90vh;
}
.sidebar-logo {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: transparent;
text-align: center;
overflow: hidden;
}
.sidebar-logo-img {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
.sidebar-logo-title {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.sidebar-title {
display: inline-block;
margin: 0;
color: #00c0ff;
font-weight: 600;
font-size: 14px;
vertical-align: middle;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
.sidebar-logo-fade-enter-active,
.sidebar-logo-fade-leave-active {
transition: opacity 0.3s;
}
.sidebar-logo-fade-enter-from,
.sidebar-logo-fade-leave-to {
opacity: 0;
}
.el-menu-vertical:not(.el-menu--collapse) {
width: 210px;
}
.el-menu {
border-right: none !important;
}
.datav-menu {
background-color: transparent !important;
}
.datav-menu .el-menu-item.is-active {
background-color: rgba(0, 192, 255, 0.2) !important;
color: #00c0ff !important;
border-right: 2px solid #00c0ff;
}
.datav-menu .el-menu-item:hover,
.datav-menu .el-sub-menu__title:hover {
background-color: rgba(0, 192, 255, 0.1) !important;
}
.el-menu-item,
.el-sub-menu__title {
height: 50px !important;
line-height: 50px !important;
}
/* 内容区域 */
.content-container {
margin-left: 210px;
transition: margin-left 0.28s;
position: relative;
overflow: hidden;
background-color: transparent;
}
.content-container.collapsed {
margin-left: 64px;
}
/* 顶部导航栏 */
.header {
background-color: transparent;
padding: 0;
height: 50px !important;
position: relative;
z-index: 1000;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.header-left {
display: flex;
align-items: center;
}
.system-title {
font-size: 18px;
font-weight: 600;
color: #00c0ff;
margin: 0 15px;
white-space: nowrap;
display: flex;
align-items: center;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
.breadcrumb {
margin-left: 15px;
}
.header-right {
display: flex;
align-items: center;
}
.header-item {
padding: 0 10px;
cursor: pointer;
height: 50px;
display: flex;
align-items: center;
}
.header-item:hover {
background-color: rgba(0, 192, 255, 0.1);
}
.user-info {
padding: 0 15px;
border-left: 1px solid #f0f0f0;
}
.fullscreen-btn,
.size-btn {
font-size: 18px;
color: #606266;
}
.user-dropdown-link {
display: flex;
align-items: center;
cursor: pointer;
}
.username {
margin: 0 8px;
color: #c0c4d3;
}
.toggle-sidebar {
font-size: 20px;
cursor: pointer;
margin-right: 15px;
color: #00c0ff;
padding: 0 10px;
height: 50px;
display: flex;
align-items: center;
}
.toggle-sidebar:hover {
background-color: rgba(0, 0, 0, 0.025);
}
/* 标签页导航 */
.tabs-view-container {
background-color: transparent;
padding: 0;
position: relative;
z-index: 999;
}
.tabs-view {
height: 40px;
line-height: 40px;
}
.main-content {
padding: 15px;
background-color: transparent;
overflow: hidden;
/* 禁止 el-main 区域滚动 */
height: calc(100vh - 140px);
}
.app-main-container {
width: 100%;
height: 100%;
position: relative;
}
.app-main {
background-color: transparent;
padding: 20px;
height: 100%;
overflow-y: auto;
/* 允许内容区域滚动 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 页脚 */
.footer {
background-color: transparent;
text-align: center;
color: #c0c4d3;
font-size: 12px;
padding: 0;
height: 40px !important;
line-height: 40px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 20px;
}
.footer-link {
color: #66d9ff;
font-size: 14px;
text-decoration: none;
text-shadow: 0 0 5px rgba(102, 217, 255, 0.5);
transition: all 0.3s ease;
}
.footer-link:hover {
color: #00c0ff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.8);
}
.footer-divider {
margin: 0 10px;
color: rgba(102, 217, 255, 0.6);
}
/* 过渡动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
transition: all 0.5s;
}
.fade-transform-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* 响应式布局 */
@media screen and (max-width: 992px) {
.sidebar {
width: 64px !important;
}
.content-container {
margin-left: 64px !important;
}
.system-title {
display: none;
}
}
/* 布局大小 */
body.size-default {
--el-font-size-base: 14px;
}
body.size-medium {
--el-font-size-base: 13px;
}
body.size-small {
--el-font-size-base: 12px;
}
/* DataV 边框盒子样式 */
.dv-border-box-8 {
position: relative;
box-sizing: border-box;
}
/* 自定义标签页样式 */
.datav-tabs .el-tabs__header {
background-color: transparent;
border-bottom: none;
}
.datav-tabs .el-tabs__item {
color: #c0c4d3 !important;
border: 1px solid rgba(0, 192, 255, 0.3) !important;
background-color: rgba(0, 192, 255, 0.1) !important;
transition: all 0.3s;
}
.datav-tabs .el-tabs__item.is-active {
color: #00c0ff !important;
border-color: #00c0ff !important;
background-color: rgba(0, 192, 255, 0.2) !important;
}
.datav-tabs .el-tabs__item:hover {
color: #00c0ff !important;
}
.el-tabs__nav-wrap {
padding-top: 5px;
}
</style>
<style lang="scss" scoped>
:deep(.el-scrollbar) {
height: 95% !important;
}
</style>
