From ed85a700a4d5213c040dec39116b1d418c2a98b6 Mon Sep 17 00:00:00 2001
From: ditiqi <ditiqi@163.com>
Date: Wed, 26 Feb 2025 22:38:28 +0800
Subject: [PATCH] add

---
 .../main/courses/components/CourseCard.tsx    | 13 +++-
 .../course/detail/CourseDetailDescription.tsx | 74 +++++++++++--------
 .../course/editor/form/CourseBasicForm.tsx    |  2 +-
 .../CourseContentForm/SortableLecture.tsx     |  4 +-
 4 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/apps/web/src/app/main/courses/components/CourseCard.tsx b/apps/web/src/app/main/courses/components/CourseCard.tsx
index 3dd5032..acb4e9d 100755
--- a/apps/web/src/app/main/courses/components/CourseCard.tsx
+++ b/apps/web/src/app/main/courses/components/CourseCard.tsx
@@ -1,5 +1,6 @@
 import { Card, Tag, Typography, Button } from "antd";
 import {
+	BookOutlined,
 	EyeOutlined,
 	PlayCircleOutlined,
 	TeamOutlined,
@@ -73,10 +74,10 @@ export default function CourseCard({ course, edit = false }: CourseCardProps) {
 					<button> {course.title}</button>
 				</Title>
 
-				<div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
+				<div className="flex items-center mb-4  rounded-lg transition-all duration-300 hover:bg-blue-50 group">
 					<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
 					<div className="ml-2 flex items-center flex-grow">
-						<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
+						<Text className="font-medium text-blue-500  transition-colors duration-300 truncate max-w-[120px]">
 							{course?.depts?.length > 1
 								? `${course.depts[0].name}等`
 								: course?.depts?.[0]?.name}
@@ -84,10 +85,16 @@ export default function CourseCard({ course, edit = false }: CourseCardProps) {
 							{/* {course?.depts?.map((dept)=>{return dept.name})} */}
 						</Text>
 					</div>
+				</div>
+				<div className="flex items-center gap-2">
 					<span className="text-xs font-medium text-gray-500 flex items-center">
-						<EyeOutlined className="mr-1" />
+						<EyeOutlined />
 						{`观看次数 ${course?.meta?.views || 0}`}
 					</span>
+					<span className="text-xs font-medium text-gray-500 flex items-center">
+						<BookOutlined />
+						{`学习人数 ${course?.studentIds?.length || 0}`}
+					</span>
 				</div>
 				<div className="pt-4 border-t border-gray-100 text-center">
 					<Button
diff --git a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
index 39204fb..0c72322 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
@@ -3,11 +3,13 @@ import React, { useContext, useMemo } from "react";
 import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件
 import { CourseDetailContext } from "./CourseDetailContext";
 import {
+	BookOutlined,
 	CalendarOutlined,
 	EditTwoTone,
 	EyeOutlined,
 	PlayCircleOutlined,
 	ReloadOutlined,
+	TeamOutlined,
 } from "@ant-design/icons";
 import dayjs from "dayjs";
 import { useNavigate, useParams } from "react-router-dom";
@@ -23,7 +25,8 @@ export const CourseDetailDescription: React.FC = () => {
 	const { canEdit } = useContext(CourseDetailContext);
 	const { id } = useParams();
 	return (
-		<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
+		// <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
+		<div className="w-full   p-5 my-4">
 			{isLoading || !course ? (
 				<Skeleton active paragraph={{ rows: 4 }} />
 			) : (
@@ -41,53 +44,61 @@ export const CourseDetailDescription: React.FC = () => {
 										setSelectedLectureId(firstLectureId);
 									}}
 									className="w-full h-full  absolute top-0 z-10 bg-black opacity-30 transition-opacity duration-300 ease-in-out hover:opacity-70 cursor-pointer">
-									<PlayCircleOutlined className="absolute top-1/2  left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10" />
+									<div className="absolute top-1/2  left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10">
+										点击进入学习
+									</div>
 								</div>
 							</div>
 						</>
 					)}
 					<div className="text-lg font-bold">{"课程简介:"}</div>
-					<div className="flex gap-2 flex-wrap items-center">
-						<div>{course?.subTitle}</div>
-						{
-							course.terms.map((term) => {
+					<div className="flex flex-col gap-2">
+						<div className="flex gap-2 flex-wrap items-center float-start">
+							{course?.subTitle && <div>{course?.subTitle}</div>}
+							{course.terms.map((term) => {
 								return (
 									<Tag
 										key={term.id}
 										// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
 										color={
 											term?.taxonomy?.slug ===
-												TaxonomySlug.CATEGORY
+											TaxonomySlug.CATEGORY
 												? "blue"
 												: term?.taxonomy?.slug ===
-													TaxonomySlug.LEVEL
+													  TaxonomySlug.LEVEL
 													? "green"
 													: "orange"
 										}
 										className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
 										{term.name}
 									</Tag>
-								)
-							})
-						}
-					</div>
-					<div className="text-gray-800 flex justify-start gap-5">
-						
-
-						<div className="flex gap-1">
-							<CalendarOutlined></CalendarOutlined>
-							{dayjs(course?.createdAt).format("YYYY年M月D日")}
+								);
+							})}
 						</div>
-						<div className="flex gap-1">
-							<ReloadOutlined></ReloadOutlined>
-							{dayjs(course?.updatedAt).format("YYYY年M月D日")}
-						</div>
-						<div className="flex gap-1">
-							<EyeOutlined></EyeOutlined>
-							<div>{course?.meta?.views || 0}</div>
-						</div>
-						{
-							canEdit && (
+						<div className="text-gray-600 flex justify-start gap-5">
+							<div className="flex gap-1">
+								<CalendarOutlined></CalendarOutlined>
+								{"创建于:"}
+								{dayjs(course?.createdAt).format(
+									"YYYY年M月D日"
+								)}
+							</div>
+							<div className="flex gap-1">
+								<ReloadOutlined></ReloadOutlined>
+								{"更新于:"}
+								{dayjs(course?.updatedAt).format(
+									"YYYY年M月D日"
+								)}
+							</div>
+							<div className="flex gap-1">
+								<EyeOutlined></EyeOutlined>
+								<div>{`观看次数${course?.meta?.views || 0}`}</div>
+							</div>
+							<div className="flex gap-1">
+								<BookOutlined />
+								<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
+							</div>
+							{canEdit && (
 								<div
 									className="flex gap-1 text-primary hover:cursor-pointer"
 									onClick={() => {
@@ -95,13 +106,12 @@ export const CourseDetailDescription: React.FC = () => {
 											? `/course/${id}/editor`
 											: "/course/editor";
 										navigate(url);
-									}}
-								>
+									}}>
 									<EditTwoTone></EditTwoTone>
 									{"点击编辑课程"}
 								</div>
-							)
-						}
+							)}
+						</div>
 					</div>
 					<Paragraph
 						className="text-gray-600"
diff --git a/apps/web/src/components/models/course/editor/form/CourseBasicForm.tsx b/apps/web/src/components/models/course/editor/form/CourseBasicForm.tsx
index cf683f1..4e41477 100755
--- a/apps/web/src/components/models/course/editor/form/CourseBasicForm.tsx
+++ b/apps/web/src/components/models/course/editor/form/CourseBasicForm.tsx
@@ -32,7 +32,7 @@ export function CourseBasicForm() {
 			<Form.Item
 				name="subTitle"
 				label="课程副标题"
-				rules={[{ max: 10, message: "副标题最多10个字符" }]}>
+				rules={[{ max: 20, message: "副标题最多20个字符" }]}>
 				<Input placeholder="请输入课程副标题" />
 			</Form.Item>
 			<Form.Item name={["meta", "thumbnail"]} label="课程封面">
diff --git a/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx b/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
index a153137..26282d2 100755
--- a/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
+++ b/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
@@ -83,7 +83,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 								: undefined,
 						},
 						resources: {
-							set: [videoUrlId, ...fileIds]
+							connect: [videoUrlId, ...fileIds]
 								.filter(Boolean)
 								.map((fileId) => ({
 									fileId,
@@ -109,7 +109,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 								: undefined,
 						},
 						resources: {
-							set: [videoUrlId, ...fileIds]
+							connect: [videoUrlId, ...fileIds]
 								.filter(Boolean)
 								.map((fileId) => ({
 									fileId,