教师端页面

This commit is contained in:
yangdongbit 2025-08-20 14:10:48 +08:00
parent a4832dc8fc
commit 34738a29e1
9 changed files with 533 additions and 78 deletions

View File

@ -0,0 +1,14 @@
<template>
<div>
<h1>课程分析</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

View File

@ -0,0 +1,19 @@
<template>
<div>
<h1>课程分类</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
body{
background-color: #ffffff;
width: 1920px;
height: 1793px;
}
</style>

View File

@ -0,0 +1,14 @@
<template>
<div>
<h1>资料分类</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

View File

@ -0,0 +1,116 @@
<template>
<div class="course-management-container">
<!-- 左侧导航栏 -->
<div class="nav-container">
<router-link to="/teacher/course-management" class="nav-item">
<span>全部课程</span><i>(10)</i>
<div class="icon-container">
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
</div>
</router-link>
<div class="sub-nav-container">
<router-link to="/teacher/course-management/course-category" class="nav-item">
<span>课程分类</span>
<div class="icon-container">
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
</div>
</router-link>
<router-link to="/teacher/course-management/material-category" class="nav-item">
<span>资料分类</span>
<div class="icon-container">
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
</div>
</router-link>
<router-link to="/teacher/course-management/course-analysis" class="nav-item">
<span>课程分析</span>
<div class="icon-container">
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
<span class="icon icon-status"></span>
</div>
</router-link>
</div>
</div>
<!-- 右侧内容区域 -->
<div class="content-container">
<router-view></router-view>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.course-management-container{
display: flex;
}
.nav-container{
margin-top: 30px;
width: 266px;
}
.sub-nav-container{
margin-left: 20px;
}
.nav-container .nav-item{
width: 240px;
height: 54px;
margin-left: 13px;
margin-top: 15px;
margin-bottom: 13px;
display: flex;
align-items: center;
padding: 0 15px;
border-radius: 8px;
background-color: #f5f7fa;
color: #333;
text-decoration: none;
}
.nav-container .nav-item:hover{
background-color: #e6f7ff;
}
.nav-container .nav-item span{
margin-right: 8px;
}
.nav-container .nav-item i{
font-style: normal;
color: #66b7e3;
margin-right: 10px;
}
.icon-container{
display: flex;
margin-left: auto;
}
.icon.icon-status{
width: 16px;
height: 16px;
background-image: url('../../../public/images/icon/top.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
margin-left: 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-item:hover .icon.icon-status{
opacity: 1;
}
.content-container{
flex: 1;
padding: 20px;
min-height: 100vh;
box-sizing: border-box;
}
</style>

View File

@ -0,0 +1,14 @@
<template>
<div>
<h1>我的资源</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

View File

@ -0,0 +1,14 @@
<template>
<div>
<h1>个人中心</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

View File

@ -0,0 +1,14 @@
<template>
<div>
<h1>学员管理</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

View File

@ -6,7 +6,6 @@ import Home from '@/views/Home.vue'
import Courses from '@/views/Courses.vue' import Courses from '@/views/Courses.vue'
import CourseDetail from '@/views/CourseDetail.vue' import CourseDetail from '@/views/CourseDetail.vue'
import CourseDetailEnrolled from '@/views/CourseDetailEnrolled.vue' import CourseDetailEnrolled from '@/views/CourseDetailEnrolled.vue'
import CourseExchanged from '@/views/CourseExchanged.vue'
import CourseStudy from '@/views/CourseStudy.vue' import CourseStudy from '@/views/CourseStudy.vue'
import Learning from '@/views/Learning.vue' import Learning from '@/views/Learning.vue'
import Profile from '@/views/Profile.vue' import Profile from '@/views/Profile.vue'
@ -23,14 +22,93 @@ import ExamNotice from '@/views/ExamNotice.vue'
import ExamSubmitted from '@/views/ExamSubmitted.vue' import ExamSubmitted from '@/views/ExamSubmitted.vue'
import TestSections from '@/views/TestSections.vue' import TestSections from '@/views/TestSections.vue'
import LocalVideoDemo from '@/views/LocalVideoDemo.vue' import LocalVideoDemo from '@/views/LocalVideoDemo.vue'
import DPlayerTest from '@/views/DPlayerTest.vue'
import SpecialTraining from '@/views/SpecialTraining.vue' import SpecialTraining from '@/views/SpecialTraining.vue'
import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue' import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue'
import HelpCenter from '@/views/HelpCenter.vue' import HelpCenter from '@/views/HelpCenter.vue'
import Practice from '@/views/Practice.vue'
import LearningCenter from '@/views/LearningCenter.vue' // 管理员路由
import AdminDashboard from '@/views/teacher/AdminDashboard.vue'
import PersonalCenter from '@/components/admin/PersonalCenter.vue'
import CourseManagement from '@/components/admin/CourseManagement.vue'
import MyResources from '@/components/admin/MyResources.vue'
import StudentManagement from '@/components/admin/StudentManagement.vue'
// 课程管理子路由组件
import CourseCategory from '@/components/admin/CourseComponents/CourseCategory.vue'
import MaterialCategory from '@/components/admin/CourseComponents/MaterialCategory.vue'
import CourseAnalysis from '@/components/admin/CourseComponents/CourseAnalysis.vue'
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
{
path: '/teacher',
name: 'AdminDashboard',
component: AdminDashboard,
meta: {
title: '管理后台',
requiresAuth: true
},
children: [
{
path: 'personal-center',
name: 'PersonalCenter',
component: PersonalCenter,
meta: {
title: '个人中心'
}
},
{
path: 'course-management',
name: 'CourseManagement',
component: CourseManagement,
meta: {
title: '课程管理'
},
children: [
{
path: 'course-category',
name: 'CourseCategory',
component: CourseCategory,
meta: {
title: '课程分类'
}
},
{
path: 'material-category',
name: 'MaterialCategory',
component: MaterialCategory,
meta: {
title: '资料分类'
}
},
{
path: 'course-analysis',
name: 'CourseAnalysis',
component: CourseAnalysis,
meta: {
title: '课程分析'
}
}
]
},
{
path: 'my-resources',
name: 'MyResources',
component: MyResources,
meta: {
title: '我的资源'
}
},
{
path: 'student-management',
name: 'StudentManagement',
component: StudentManagement,
meta: {
title: '学员管理'
}
}
]
},
{ {
path: '/help-center', path: '/help-center',
name: 'HelpCenter', name: 'HelpCenter',
@ -71,14 +149,6 @@ const routes: RouteRecordRaw[] = [
title: '课程详情 - 已报名' title: '课程详情 - 已报名'
} }
}, },
{
path: '/course/:id/exchanged',
name: 'CourseExchanged',
component: CourseExchanged,
meta: {
title: '课程兑换成功'
}
},
{ {
path: '/course/study/:id', path: '/course/study/:id',
name: 'CourseStudy', name: 'CourseStudy',
@ -106,14 +176,6 @@ const routes: RouteRecordRaw[] = [
requiresAuth: true requiresAuth: true
} }
}, },
{
path: '/learning-center',
name: 'LearningCenter',
component: LearningCenter,
meta: {
title: '学习中心'
}
},
{ {
path: '/learning-paths', path: '/learning-paths',
@ -219,14 +281,6 @@ const routes: RouteRecordRaw[] = [
title: 'AI' title: 'AI'
} }
}, },
{
path: '/ai-companion/:id?',
name: 'AICompanion',
component: () => import('@/views/AICompanion.vue'),
meta: {
title: 'AI伴学'
}
},
{ {
path: '/ai-demo', path: '/ai-demo',
name: 'AIDemo', name: 'AIDemo',
@ -251,29 +305,14 @@ const routes: RouteRecordRaw[] = [
title: '本地视频播放演示' title: '本地视频播放演示'
} }
}, },
{
path: '/dplayer-test',
name: 'DPlayerTest',
component: DPlayerTest,
meta: {
title: 'DPlayer 测试页面'
}
},
{
path: '/course/:courseId/practice/:sectionId',
name: 'Practice',
component: Practice,
meta: {
title: '练习页面'
}
},
{ {
path: '/:pathMatch(.*)*', path: '/:pathMatch(.*)*',
name: 'NotFound', name: 'NotFound',
component: () => import('@/views/NotFound.vue'), component: () => import('@/views/NotFound.vue'),
meta: { meta: {
title: '页面未找到' title: '页面未找到'
} },
} }
] ]
@ -290,7 +329,7 @@ const router = createRouter({
}) })
// 路由守卫 // 路由守卫
router.beforeEach((to, from, next) => { router.beforeEach((to, _from, next) => {
// 设置页面标题 // 设置页面标题
if (to.meta.title) { if (to.meta.title) {
document.title = `${to.meta.title} - 在线学习平台` document.title = `${to.meta.title} - 在线学习平台`
@ -307,38 +346,6 @@ router.beforeEach((to, from, next) => {
} }
} }
// 特殊处理:检测从其他页面进入积分中心
if (to.name === 'LearningCenter') {
// 如果是从其他页面进入积分中心,设置自动刷新标记
if (from.name && from.name !== 'LearningCenter') {
sessionStorage.setItem('learningCenterNeedsRefresh', 'true');
}
}
// 特殊处理:检测从其他页面进入帮助中心
if (to.name === 'HelpCenter') {
// 如果是从其他页面进入帮助中心,设置自动刷新标记
if (from.name && from.name !== 'HelpCenter') {
sessionStorage.setItem('helpCenterNeedsRefresh', 'true');
}
}
// 特殊处理:检测从其他页面进入已兑换页面
if (to.name === 'CourseExchanged') {
// 如果是从其他页面进入已兑换页面,设置自动刷新标记
if (from.name && from.name !== 'CourseExchanged') {
sessionStorage.setItem('refreshCourseExchanged', 'true');
}
}
// 特殊处理:检测从其他页面进入个人中心
if (to.name === 'Profile') {
// 如果是从其他页面进入个人中心,设置自动刷新标记
if (from.name && from.name !== 'Profile') {
sessionStorage.setItem('refreshProfile', 'true');
}
}
next() next()
}) })

View File

@ -0,0 +1,243 @@
<template>
<div class="admin-dashboard">
<!-- 顶部图片 -->
<div class="top-image-container">
<img src="https://picsum.photos/500/200" alt="顶部图片" class="top-image">
</div>
<div class="main-content">
<!-- 侧边栏 -->
<div class="sidebar-container">
<!-- 头像 -->
<div class="avatar-container">
<img src="https://picsum.photos/200/200" alt="头像" class="avatar">
<div class="avatar-text">
用户昵称~
</div>
</div>
<!-- 导航栏 -->
<div class="nav-container">
<router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
<img src="https://picsum.photos/200/200" alt="">
<span>课程管理</span>
</router-link>
<router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">
<img src="https://picsum.photos/200/200" alt="">
<span>学员管理</span>
</router-link>
<router-link to="/teacher/my-resources" class="nav-item" :class="{ active: activeNavItem === 2 }" @click="setActiveNavItem(2)">
<img src="https://picsum.photos/200/200" alt="">
<span>我的资源</span>
</router-link>
<router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }" @click="setActiveNavItem(3)">
<img src="https://picsum.photos/200/200" alt="">
<span>个人中心</span>
</router-link>
</div>
</div>
<!-- 右侧路由视图 -->
<div class="router-view-container">
<!-- 面包屑 -->
<div class="breadcrumb">
<span class="breadcrumb-separator">|</span>
<n-breadcrumb>
<n-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
{{ item.title }}
</n-breadcrumb-item>
</n-breadcrumb>
</div>
<router-view></router-view>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
const width = window.innerWidth;
const height = window.innerHeight;
console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
//
const activeNavItem = ref(0);
const route = useRoute();
const setActiveNavItem = (index: number) => {
activeNavItem.value = index;
}
//
const breadcrumbItems = computed(() => {
// matched
const matchedRoutes = route.matched;
// matchedRoutes''
return matchedRoutes
.filter(item => item.meta.title !== '管理后台')
.map(item => ({
title: item.meta.title || '未知页面',
path: item.path
}));
});
//
onMounted(() => {
//
updateActiveNavItem();
});
// 使watch
watch(route, (newRoute) => {
updateActiveNavItem();
});
//
const updateActiveNavItem = () => {
const path = route.path;
if (path.includes('course-management')) {
activeNavItem.value = 0;
} else if (path.includes('student-management')) {
activeNavItem.value = 1;
} else if (path.includes('my-resources')) {
activeNavItem.value = 2;
} else if (path.includes('personal-center')) {
activeNavItem.value = 3;
}
}
</script>
<style scoped>
.top-image-container {
position: relative;
width: 100%;
height: 130px;
overflow: hidden;
}
.top-image {
width: 1920px;
height: 130px;
position: absolute;
left: 0px;
top: 70px;
opacity: 100%;
object-fit: cover;
}
.main-content {
display: flex;
}
.sidebar-container{
width: 294px;
height: calc(100vh - 130px);
background: #FFFFFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.avatar-container{
height: 230px;
position: relative;
/* 移除原来的边框 */
}
/* 添加带间距的横线 */
.avatar-container::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background-color: #E6E6E6;
}
.avatar-container img{
width: 95px;
height: 95px;
/* 圆角 */
border-radius: 50%;
margin-top: 55px;
margin-left: 100px;
margin-right: 99;
}
.avatar-text{
margin-left: 98px;
height: 31px;
font-family: AppleSystemUIFont;
font-size: 22px;
color: #000000;
line-height: 26px;
text-align: left;
font-style: normal;
text-transform: none;
}
.nav-container{
margin-top: 30px;
/* 鼠标变小手 */
cursor: pointer;
}
.nav-container .nav-item{
margin-left: 20px;
width: 254px;
height: 54px;
margin-bottom: 20px;
/* 圆角 */
border-radius: 10px;
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.nav-container .nav-item:hover {
background: rgba(102,183,227,0.05);
}
/* 添加激活状态样式 */
.nav-container .nav-item.active{
background: rgba(102,183,227,0.1);
}
.nav-container .nav-item img{
width: 17px;
height: 20px;
margin-left: 50px;
margin-top: 0;
margin-right: 5px;
}
.nav-container .nav-item span{
width: 80px;
height: 28px;
font-family: AppleSystemUIFont;
font-size: 20px;
color: #0C99DA;
line-height: 23px;
text-align: left;
font-style: normal;
text-transform: none;
}
.router-view-container {
flex: 1;
padding: 20px;
background: #F5F7FA;
height: calc(100vh - 130px);
overflow-y: auto;
}
.breadcrumb {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.breadcrumb-separator {
margin-right: 10px;
color: #0C99DA;
font-size: 16px;
}
</style>