教师端
This commit is contained in:
yangdongbit
parent
e6cb5e84aa
commit
1d7079e779
14
src/components/admin/CourseComponents/CourseAnalysis.vue
Normal file
14
src/components/admin/CourseComponents/CourseAnalysis.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>课程分析</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
19
src/components/admin/CourseComponents/CourseCategory.vue
Normal file
19
src/components/admin/CourseComponents/CourseCategory.vue
Normal 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>
|
||||||
14
src/components/admin/CourseComponents/MaterialCategory.vue
Normal file
14
src/components/admin/CourseComponents/MaterialCategory.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>资料分类</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
114
src/components/admin/CourseManagement.vue
Normal file
114
src/components/admin/CourseManagement.vue
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<div class="course-management-container">
|
||||||
|
<!-- 左侧导航栏 -->
|
||||||
|
<div class="nav-container">
|
||||||
|
<router-link to="/admin/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="/admin/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="/admin/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="/admin/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.png');
|
||||||
|
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>
|
||||||
14
src/components/admin/MyResources.vue
Normal file
14
src/components/admin/MyResources.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>我的资源</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
14
src/components/admin/PersonalCenter.vue
Normal file
14
src/components/admin/PersonalCenter.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>个人中心</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
14
src/components/admin/StudentManagement.vue
Normal file
14
src/components/admin/StudentManagement.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>学员管理</h1>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -26,7 +26,88 @@ 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 AdminDashboard from '@/views/admin/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: '/admin',
|
||||||
|
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',
|
||||||
@ -229,7 +310,8 @@ const routes: RouteRecordRaw[] = [
|
|||||||
component: () => import('@/views/NotFound.vue'),
|
component: () => import('@/views/NotFound.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '页面未找到'
|
title: '页面未找到'
|
||||||
}
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
241
src/views/admin/AdminDashboard.vue
Normal file
241
src/views/admin/AdminDashboard.vue
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
<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="/admin/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="/admin/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="/admin/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="/admin/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>
|
||||||
Loading…
x
Reference in New Issue
Block a user