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-input
              v-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-switch
              v-model="isDarkMode"
              inline-prompt
              :active-icon="Moon"
              :inactive-icon="Sunny"
              style="margin-right: 10px"
          />
          <el-dropdown>
            <el-avatar
                size="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 = true
    document.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>