Vue3+ElementPlus后台管理系统，支持白天黑夜主题切换，专为教育管理场景设计。主要功能包括用户管理（管理员、教师、学生）、课件资源管理（课件列表、下载中心）和数据统计（使用情况、教学效率等）。系统采用响应式布局，内置智能主题切换功能，可自动保存用户偏好。基于Vue3组合式API开发，TypeScript支持，组件化架构易于扩展，适合各类教育管理平台快速搭建。
拿走请记得给我点赞加关注！！！
<template><el-container class="root-container" :class="{ 'dark-mode': isDarkMode }"><!-- 侧边栏 --><el-aside width="250px" class="sidebar"><div class="logo-container"><img:src="logoImage"alt="Logo"class="logo-img"/></div><el-menu:default-active="$route.path"class="el-menu-vertical-demo":active-text-color="isDarkMode ? '#409EFF' : '#2a3643'":background-color="isDarkMode ? '#2a3643' : '#ffffff'":text-color="isDarkMode ? '#ffffff' : '#2a3643'"router><!-- 用户管理菜单 --><el-sub-menu index="1"><template #title><el-icon><User /></el-icon><span>用户管理</span></template><el-menu-item index="/user/admin"><el-icon><User /></el-icon><span>管理员</span></el-menu-item><el-menu-item index="/user/teacher"><el-icon><Avatar /></el-icon><span>教师</span></el-menu-item><el-menu-item index="/user/student"><el-icon><School /></el-icon><span>学生</span></el-menu-item></el-sub-menu><!-- 课件资源管理菜单 --><el-sub-menu index="2"><template #title><el-icon><Folder /></el-icon><span>课件资源管理</span></template><el-menu-item index="/resource/list"><el-icon><List /></el-icon><span>课件列表</span></el-menu-item><el-menu-item index="/resource/download"><el-icon><Download /></el-icon><span>课件下载中心</span></el-menu-item></el-sub-menu><!-- 数据统计菜单 --><el-sub-menu index="3"><template #title><el-icon><DataAnalysis /></el-icon><span>数据统计</span></template><el-menu-item index="/dashboard/overview"><el-icon><Monitor /></el-icon><span>大屏概览</span></el-menu-item><el-menu-item index="/stats/teacher-usage"><el-icon><User /></el-icon><span>教师使用次数统计</span></el-menu-item><el-menu-item index="/stats/student-usage"><el-icon><School /></el-icon><span>学生使用次数统计</span></el-menu-item><el-menu-item index="/stats/teaching-efficiency"><el-icon><PieChart /></el-icon><span>教学效率指数</span></el-menu-item><el-menu-item index="/stats/learning-effect"><el-icon><TrendCharts /></el-icon><span>学生学习效果</span></el-menu-item></el-sub-menu></el-menu></el-aside><!-- 主体区域 --><el-container><!-- 顶部导航 --><el-header class="header"><h1 class="header-title"></h1><div class="header-right"><el-inputv-model="searchText"placeholder="Search for something..."prefix-icon="Search"class="search-input"/><el-icon class="header-icon"><Search /></el-icon><el-icon class="header-icon"><Bell /></el-icon><el-switchv-model="isDarkMode"inline-prompt:active-icon="Moon":inactive-icon="Sunny"style="margin-right: 10px"/><el-dropdown><el-avatarsize="small":src="'https://ai-public.mastergo.com/ai/img_res/de3f08ed1935c2e296ca6111c0906527.jpg'"/><template #dropdown><el-dropdown-menu><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 class="main-content"><router-view></router-view></el-main></el-container></el-container>
</template><script setup lang="ts">
import {Document,Search,Bell,Sunny,Moon, User, Avatar, UserFilled, DataAnalysis, School, Folder, List, Download, Monitor, TrendCharts, PieChart
} from '@element-plus/icons-vue'
import { ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
// 导入两种主题的logo图片const route = useRoute()
const searchText = ref('')
const isDarkMode = ref(false)import logoDark from '@/assets/慧教引擎.png'
import logoLight from '@/assets/慧教引擎(白天版).png'const logoImage = computed(() => {return isDarkMode.value ? logoDark : logoLight
})
// 监听模式变化
watch(isDarkMode, (newVal) => {if (newVal) {document.documentElement.classList.add('dark')} else {document.documentElement.classList.remove('dark')}// 保存到本地存储localStorage.setItem('darkMode', String(newVal))
})// 初始化时检查本地存储
const initDarkMode = () => {const savedMode = localStorage.getItem('darkMode')if (savedMode === 'true') {isDarkMode.value = truedocument.documentElement.classList.add('dark')}
}
initDarkMode()const logout = () => {console.log('退出登录')
}
</script><style scoped>/* 侧边栏样式调整 */
.sidebar {background: v-bind('isDarkMode ? "#283042" : "#3f9dfd"');transition: background-color 0.3s;
}.el-menu {border-right: none;
}/* 子菜单样式 */
.el-sub-menu .el-menu-item {padding-left: 50px !important;background-color: v-bind('isDarkMode ? "#1e2430" : "#3688e8"');
}.el-sub-menu .el-menu-item:hover {background-color: v-bind('isDarkMode ? "#2d3648" : "#4aa0ff"') !important;
}.el-sub-menu .el-menu-item.is-active {background-color: v-bind('isDarkMode ? "#409EFF" : "#2a7de9"');color: white;
}/* 菜单图标样式 */
.el-menu-item [class^="el-icon"],
.el-sub-menu [class^="el-icon"] {font-size: 18px;margin-right: 10px;
}
.root-container {height: 100vh;width: 100%;margin: 0;padding: 0;transition: background-color 0.3s, color 0.3s;}.sidebar {background: v-bind('isDarkMode ? "#283042" : "#3f9dfd"');margin: 0;padding: 0;transition: background-color 0.3s;color: #3f9dfd;
}.logo-container {display: flex;align-items: center;padding: 20px;height: 60px;
}.logo-img {width: 150px;height: 110px;transition: opacity 0.3s ease;
}.el-menu {background: v-bind('isDarkMode ? "#283042" : "#3f9dfd"');border-right: none;transition: background-color 0.3s;color: #9dd5d8;
}.el-menu-item {color: v-bind('isDarkMode ? "#ffffff" : "#2a3643"');display: flex;padding: 0 36px !important;transition: background-color 0.3s, color 0.3s;
}.el-menu-item .el-icon {margin-right: 8px;
}.el-menu-item:hover {background-color: v-bind('isDarkMode ? "#3a495a" : "#f5f7fa"');
}.header {display: flex;justify-content: space-between;align-items: center;padding: 0 20px;height: 60px;border-bottom: 1px solid v-bind('isDarkMode ? "#3a495a" : "#e6e6e6"');background-color: v-bind('isDarkMode ? "#2a3643" : "#ffffff"');transition: background-color 0.3s, border-color 0.3s;
}.header-title {font-size: 18px;margin: 0;color: v-bind('isDarkMode ? "#ffffff" : "#2a3643"');
}.header-right {display: flex;align-items: center;gap: 20px;
}.search-input {width: 200px;
}.header-icon {font-size: 18px;cursor: pointer;color: v-bind('isDarkMode ? "#ffffff" : "#606266"');
}/*内容区样式*/
.main-content {padding: 20px;background-color: v-bind('isDarkMode ? "#1a2029" : "#f5f7fa"');color: v-bind('isDarkMode ? "#ffffff" : "#2a3643"');transition: background-color 0.3s, color 0.3s;
}/* 搜索框容器样式 */
.search-container {position: relative;display: flex;align-items: center;
}/* 搜索输入框基础样式 */
.search-input {width: 180px;transition: width 0.3s;
}/* 搜索框悬停状态 */
.search-input:hover {width: 220px;
}/* 深度选择器修改Element Plus输入框内部样式 */
.search-input :deep(.el-input__wrapper) {padding-right: 30px;background-color: v-bind('isDarkMode ? "#3a495a" : "#f5f7fa"');border-radius: 20px;transition: background-color 0.3s;
}.search-input :deep(.el-input__inner) {color: v-bind('isDarkMode ? "#ffffff" : "#2a3643"');
}/* 搜索图标样式 */
.search-icon {position: absolute;color: v-bind('isDarkMode ? "#ffffff" : "#909399"');cursor: pointer;
}/* 顶部导航图标基础样式 */
.header-icon {font-size: 28px;color: v-bind('isDarkMode ? "#ffffff" : "#606266"');padding: 5px;border-radius: 50%;transition: background-color 0.3s;
}/* 顶部导航图标悬停状态 */
.header-icon:hover {background-color: v-bind('isDarkMode ? "#3a495a" : "#f0f2f5"');
}/* 全局暗色模式样式 */
:root.dark {--el-color-primary: #409EFF;--el-color-primary-light-3: #3375b9;--el-color-primary-light-5: #2a598a;--el-color-primary-light-7: #213d5b;--el-color-primary-light-8: #1d3043;--el-color-primary-light-9: #18222c;--el-color-primary-dark-2: #66b1ff;
}
</style>
