OnlineEducation-student-front/src/views/courseDetails/index.vue

<template>
	<div class="course-detail-page">
		<!-- 顶部课程信息卡片 -->
		<a-card class="course-info-card" bordered>
			<div class="course-info-main">
				<div class="cover-box">
					<a-avatar shape="square" :size="120" icon="play-circle" />
				</div>
				<div class="info-box">
					<div class="title">{{ course.name }}</div>
					<div class="meta">
						<p><EyeOutlined class="mr-0" /> {{ course.views }}</p>
						<p><ClockCircleOutlined class="mr-0" /> {{ course.updateTime }}</p>
					</div>
				</div>
				<div class="action-box">
					<div class="btn-group">
						<a-button @click="editVisible = true"> <EditOutlined /> 编辑课程</a-button>
						<a-button> <DownOutlined /> 下架课程</a-button>
						<a-button> <DeleteOutlined /> 删除课程</a-button>
					</div>
					<div class="extra-box">
						<div class="row"><span>当前状态</span><span class="status-normal">● 正常</span></div>
						<div class="row">
							<span>授课教师</span><span>{{ course.teacher }}</span>
						</div>
						<div class="row">
							<span>课程分类</span><span>{{ course.category }}</span>
						</div>
						<div class="row">
							<span>课时数量</span><span>{{ course.duration }}</span>
						</div>
					</div>
				</div>
			</div>
		</a-card>

		<!-- tab 导航 -->
		<a-tabs v-model:activeKey="activeTab" class="course-tabs">
			<a-tab-pane key="detail" tab="课程详情" />
			<a-tab-pane key="homework" tab="批改作业" />
			<a-tab-pane key="test" tab="批改测试" />
			<a-tab-pane key="student" tab="学员详情" />
			<a-tab-pane key="stat" tab="学习统计" />
		</a-tabs>

		<LessonDetails
			v-if="activeTab === 'detail'"
			:pagedSections="pagedSections"
			:currentPage="currentPage"
			:pageSize="pageSize"
			:sectionsLength="course.sections?.length || 0"
			@edit-lesson="onEditLesson"
			@delete-lesson="onDeleteLesson"
			@page-change="onPageChange"
			@page-size-change="onPageSizeChange"
		/>
		<StudentDetails v-if="activeTab === 'student'" />
		<LearningStatistics v-if="activeTab === 'stat'" />

		<!-- 编辑课程弹窗 -->
		<a-modal v-model:visible="editVisible" title="新建工单" :footer="null" width="700px" @cancel="editVisible = false">
			<EditCourse :course="course" @close="editVisible = false" />
		</a-modal>
		<!-- 编辑课时弹窗 -->
		<AddClassHours v-model:visible="addClassHoursVisible" @ok="onAddClassHoursOk" />
	</div>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { EyeOutlined, ClockCircleOutlined, EditOutlined, DeleteOutlined, DownOutlined } from '@ant-design/icons-vue'
	import EditCourse from './components/EditCourse.vue'
	import AddClassHours from './components/AddClassHours.vue'
	import LessonDetails from './components/tab/LessonDetails.vue'
	import StudentDetails from './components/tab/StudentDetails.vue'
	import LearningStatistics from './components/tab/LearningStatistics.vue'
	import { getCourseDetail } from '@/api/course/courseDetail.js'

	const course = ref({})
	const activeTab = ref('detail')
	const currentPage = ref(1)
	const pageSize = ref(10)
	const editVisible = ref(false)
	const addClassHoursVisible = ref(false)
	const editingLesson = ref(null)

	const pagedSections = computed(() => {
		if (!course.value.sections) return []
		const start = (currentPage.value - 1) * pageSize.value
		return course.value.sections.slice(start, start + pageSize.value)
	})

	onMounted(() => {
		getCourseDetail().then((data) => {
			course.value = data
		})
	})

	function onPageChange(page) {
		currentPage.value = page
	}
	function onPageSizeChange(size) {
		pageSize.value = size
		currentPage.value = 1
	}
	function onEditLesson(lesson) {
		editingLesson.value = lesson
		addClassHoursVisible.value = true
	}
	function onDeleteLesson(lesson) {
		// 这里只做mock删除
		course.value.sections.forEach((section) => {
			section.lessons = section.lessons.filter((l) => l.id !== lesson.id)
		})
	}
	function onAddClassHoursOk(data) {
		// 这里只做mock保存
		if (editingLesson.value) {
			Object.assign(editingLesson.value, data)
		}
		addClassHoursVisible.value = false
	}
</script>

<style lang="less" scoped>
	.course-detail-page {
		background: #f7f8fa;
		min-height: 100vh;
		padding: 32px 0 0 0;

		.course-info-card {
			width: 1200px;
			margin: 0 auto 24px auto;
			border-radius: 12px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
			border: none;
			.course-info-main {
				display: flex;
				align-items: flex-start;
				padding: 32px 32px 24px 32px;
				.cover-box {
					width: 160px;
					height: 120px;
					background: #f2f3f5;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 32px;
					.ant-avatar {
						background: #e6e9ef;
						font-size: 48px;
					}
				}
				.info-box {
					flex: 1;
					.title {
						font-size: 22px;
						font-weight: 600;
						color: #222;
						margin-bottom: 12px;
					}
					.meta {
						color: #999;
						font-size: 14px;
						span {
							margin-right: 24px;
							display: inline-flex;
							align-items: center;
							.anticon {
								margin-right: 4px;
							}
						}
					}
				}
				.action-box {
					flex: 1;
					color: #999;
					.extra-box {
						min-width: 180px;
						margin-left: 32px;
						display: flex;
						justify-content: space-evenly;
						.row {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							font-size: 14px;
							margin-bottom: 8px;
							span:last-child {
								font-weight: 500;
							}
							.status-normal {
								margin-top: 10px;
								color: #52c41a;
								font-weight: 600;
								margin-left: 8px;
							}
						}
					}
					.btn-group {
						display: flex;
						flex-direction: row;
						margin-left: 40px;
						gap: 10px;
						justify-content: flex-end;
						.ant-btn {
							margin-bottom: 12px;
							width: 120px;
							font-size: 14px;
							border-radius: 6px;
						}
						.ant-btn-primary {
							background: #347aff;
							border-color: #347aff;
						}
					}
				}
			}
		}

		.course-tabs {
			width: 1200px;
			margin: 0 auto 0 auto;
			background: #fff;
			border-radius: 12px 12px 0 0;
			padding-left: 20px;
			.ant-tabs-bar {
				border-bottom: 1px solid #f0f0f0;
				margin-bottom: 0;
			}
			.ant-tabs-nav {
				font-size: 16px;
				.ant-tabs-tab {
					padding: 18px 32px 14px 32px;
					font-weight: 500;
					color: #666;
					&.ant-tabs-tab-active {
						color: #347aff;
						font-weight: 600;
					}
				}
				.ant-tabs-ink-bar {
					background: #347aff;
					height: 3px;
					border-radius: 2px 2px 0 0;
				}
			}
		}
		.mr-0 {
			margin-right: 5px !important;
		}
	}
</style>