feat: 添加教师管理图片资源和更新课程组件

This commit is contained in:
Admin 2025-08-21 13:07:39 +08:00
parent 4e58477135
commit 7ab20755b4
5 changed files with 109 additions and 20 deletions

View File

@ -9,7 +9,7 @@
</div>
<div class="actions">
<button class="create-btn">创建课程</button>
<button class="create-btn" @click="navigateToCreateCourse">创建课程</button>
<div class="search-container">
<input type="text" placeholder="请输入想要搜索的内容">
<button class="search-btn">搜索</button>
@ -22,16 +22,24 @@
<!-- 主体 -->
<div class="course-container">
<div class="course-grid">
<div class="course-card" v-for="course in courseList" :key="course.id">
<div class="course-card" v-for="course in courseList" :key="course.id" @click="navigateToCourseDetail(course.id)">
<div class="course-image-container">
<div class="section-title" :class="{'offline': course.status === '下架中'}">{{ course.status }}</div>
<div class="more-options">
<span class="more-icon"></span>
<div class="options-menu">
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">编辑</a>
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">查看</a>
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">删除</a>
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">更多</a>
<template v-if="course.status === '发布中'">
<a href="#" class="option-item"><img src="/images/teacher/下架.png" alt="">下架</a>
<a href="#" class="option-item"><img src="/images/teacher/小编辑.png" alt="">编辑</a>
<a href="#" class="option-item"><img src="/images/teacher/移动.png" alt="">移动</a>
<a href="#" class="option-item"><img src="/images/teacher/删除.png" alt="">删除</a>
</template>
<template v-else-if="course.status === '下架中'">
<a href="#" class="option-item"><img src="/images/teacher/加号.png" alt="">发布</a>
<a href="#" class="option-item"><img src="/images/teacher/小编辑.png" alt="">编辑</a>
<a href="#" class="option-item"><img src="/images/teacher/移动.png" alt="">移动</a>
<a href="#" class="option-item"><img src="/images/teacher/删除.png" alt="">删除</a>
</template>
</div>
</div>
</div>
@ -68,6 +76,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
//
const router = useRouter();
const navigateToCreateCourse = () => {
router.push('/teacher/course-create');
}
//
const navigateToCourseDetail = (courseId: number) => {
router.push(`/teacher/course-detail?id=${courseId}`);
}
//
const courseList = ref([

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,35 @@
<template>
<div class="course-detail-container">
<h1>课程详情</h1>
<p>当前课程ID: {{ courseId }}</p>
</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
//
const route = useRoute()
// id
const courseId = route.query.id
//
console.log('路由参数:', route.query)
console.log('课程ID:', courseId)
//
import { watch } from 'vue'
watch(
() => route.query,
(newQuery) => {
console.log('路由参数变化:', newQuery)
}
)
</script>
<style scoped>
.course-detail-container {
padding: 20px;
}
</style>

View File

@ -36,6 +36,8 @@ 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'
import CourseCreate from '@/components/admin/CourseComponents/CourseCreate.vue'
import CourseDetails from '@/components/admin/CourseComponents/CourseDetail.vue'
const routes: RouteRecordRaw[] = [
@ -59,14 +61,14 @@ const routes: RouteRecordRaw[] = [
}
},
{
path: 'course-management',
name: 'CourseManagement',
component: CourseManagement,
meta: {
title: '课程管理'
},
redirect: '/teacher/course-management/course-category', // 添加默认重定向
children: [
path: 'course-management',
name: 'CourseManagement',
component: CourseManagement,
meta: {
title: '课程管理'
},
redirect: '/teacher/course-management/course-category', // 添加默认重定向
children: [
{
path: 'course-category',
name: 'CourseCategory',
@ -91,6 +93,7 @@ const routes: RouteRecordRaw[] = [
title: '课程分析'
}
}
]
},
{
@ -108,6 +111,22 @@ const routes: RouteRecordRaw[] = [
meta: {
title: '学员管理'
}
},
{
path: 'course-create',
name: 'CourseCreate',
component: CourseCreate,
meta: {
title: '创建课程'
}
},
{
path: 'course-detail',
name: 'TeacherCourseDetail',
component: CourseDetails,
meta: {
title: '课程详情'
}
}
]
},
@ -314,7 +333,7 @@ const routes: RouteRecordRaw[] = [
meta: {
title: '页面未找到'
},
}
]

View File

@ -20,21 +20,21 @@
<!-- 导航栏 -->
<div class="nav-container">
<router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
<img src="/images/teacher/路径1.png" alt="">
<img :src="activeNavItem === 0 ? '/images/teacher/课程管理(选中).png' : '/images/teacher/课程管理.png'" 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="">
<img :src="activeNavItem === 1 ? '/images/teacher/学院管理(选中).png' : '/images/teacher/学员管理.png'" 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="">
<img :src="activeNavItem === 2 ? '/images/teacher/我的资源(选中).png' : '/images/teacher/我的资源.png'" alt="">
<span>我的资源</span>
</router-link>
<router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }" @click="setActiveNavItem(3)">
<img src="/images/teacher/个人中心.png" alt="">
<img :src="activeNavItem === 3 ? '/images/teacher/个人中心(选中).png' : '/images/teacher/个人中心.png'" alt="">
<span>个人中心</span>
</router-link>
</div>
@ -237,8 +237,9 @@ const updateActiveNavItem = () => {
}
.breadcrumb-separator {
margin-right: 10px;
margin: 0 8px;
color: #0C99DA;
font-size: 16px;
content: '>';
}
</style>