This commit is contained in:
ditiqi 2025-02-26 22:38:28 +08:00
parent a7bbc88e99
commit ed85a700a4
4 changed files with 55 additions and 38 deletions

View File

@ -1,5 +1,6 @@
import { Card, Tag, Typography, Button } from "antd"; import { Card, Tag, Typography, Button } from "antd";
import { import {
BookOutlined,
EyeOutlined, EyeOutlined,
PlayCircleOutlined, PlayCircleOutlined,
TeamOutlined, TeamOutlined,
@ -73,10 +74,10 @@ export default function CourseCard({ course, edit = false }: CourseCardProps) {
<button> {course.title}</button> <button> {course.title}</button>
</Title> </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" /> <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"> <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?.length > 1
? `${course.depts[0].name}` ? `${course.depts[0].name}`
: 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})} */} {/* {course?.depts?.map((dept)=>{return dept.name})} */}
</Text> </Text>
</div> </div>
</div>
<div className="flex items-center gap-2">
<span className="text-xs font-medium text-gray-500 flex items-center"> <span className="text-xs font-medium text-gray-500 flex items-center">
<EyeOutlined className="mr-1" /> <EyeOutlined />
{`观看次数 ${course?.meta?.views || 0}`} {`观看次数 ${course?.meta?.views || 0}`}
</span> </span>
<span className="text-xs font-medium text-gray-500 flex items-center">
<BookOutlined />
{`学习人数 ${course?.studentIds?.length || 0}`}
</span>
</div> </div>
<div className="pt-4 border-t border-gray-100 text-center"> <div className="pt-4 border-t border-gray-100 text-center">
<Button <Button

View File

@ -3,11 +3,13 @@ import React, { useContext, useMemo } from "react";
import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件 import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件
import { CourseDetailContext } from "./CourseDetailContext"; import { CourseDetailContext } from "./CourseDetailContext";
import { import {
BookOutlined,
CalendarOutlined, CalendarOutlined,
EditTwoTone, EditTwoTone,
EyeOutlined, EyeOutlined,
PlayCircleOutlined, PlayCircleOutlined,
ReloadOutlined, ReloadOutlined,
TeamOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
@ -23,7 +25,8 @@ export const CourseDetailDescription: React.FC = () => {
const { canEdit } = useContext(CourseDetailContext); const { canEdit } = useContext(CourseDetailContext);
const { id } = useParams(); const { id } = useParams();
return ( 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 ? ( {isLoading || !course ? (
<Skeleton active paragraph={{ rows: 4 }} /> <Skeleton active paragraph={{ rows: 4 }} />
) : ( ) : (
@ -41,53 +44,61 @@ export const CourseDetailDescription: React.FC = () => {
setSelectedLectureId(firstLectureId); 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"> 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> </div>
</> </>
)} )}
<div className="text-lg font-bold">{"课程简介:"}</div> <div className="text-lg font-bold">{"课程简介:"}</div>
<div className="flex gap-2 flex-wrap items-center"> <div className="flex flex-col gap-2">
<div>{course?.subTitle}</div> <div className="flex gap-2 flex-wrap items-center float-start">
{ {course?.subTitle && <div>{course?.subTitle}</div>}
course.terms.map((term) => { {course.terms.map((term) => {
return ( return (
<Tag <Tag
key={term.id} key={term.id}
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"} // color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
color={ color={
term?.taxonomy?.slug === term?.taxonomy?.slug ===
TaxonomySlug.CATEGORY TaxonomySlug.CATEGORY
? "blue" ? "blue"
: term?.taxonomy?.slug === : term?.taxonomy?.slug ===
TaxonomySlug.LEVEL TaxonomySlug.LEVEL
? "green" ? "green"
: "orange" : "orange"
} }
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"> className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
{term.name} {term.name}
</Tag> </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>
<div className="flex gap-1"> <div className="text-gray-600 flex justify-start gap-5">
<ReloadOutlined></ReloadOutlined> <div className="flex gap-1">
{dayjs(course?.updatedAt).format("YYYY年M月D日")} <CalendarOutlined></CalendarOutlined>
</div> {"创建于:"}
<div className="flex gap-1"> {dayjs(course?.createdAt).format(
<EyeOutlined></EyeOutlined> "YYYY年M月D日"
<div>{course?.meta?.views || 0}</div> )}
</div> </div>
{ <div className="flex gap-1">
canEdit && ( <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 <div
className="flex gap-1 text-primary hover:cursor-pointer" className="flex gap-1 text-primary hover:cursor-pointer"
onClick={() => { onClick={() => {
@ -95,13 +106,12 @@ export const CourseDetailDescription: React.FC = () => {
? `/course/${id}/editor` ? `/course/${id}/editor`
: "/course/editor"; : "/course/editor";
navigate(url); navigate(url);
}} }}>
>
<EditTwoTone></EditTwoTone> <EditTwoTone></EditTwoTone>
{"点击编辑课程"} {"点击编辑课程"}
</div> </div>
) )}
} </div>
</div> </div>
<Paragraph <Paragraph
className="text-gray-600" className="text-gray-600"

View File

@ -32,7 +32,7 @@ export function CourseBasicForm() {
<Form.Item <Form.Item
name="subTitle" name="subTitle"
label="课程副标题" label="课程副标题"
rules={[{ max: 10, message: "副标题最多10个字符" }]}> rules={[{ max: 20, message: "副标题最多20个字符" }]}>
<Input placeholder="请输入课程副标题" /> <Input placeholder="请输入课程副标题" />
</Form.Item> </Form.Item>
<Form.Item name={["meta", "thumbnail"]} label="课程封面"> <Form.Item name={["meta", "thumbnail"]} label="课程封面">

View File

@ -83,7 +83,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
: undefined, : undefined,
}, },
resources: { resources: {
set: [videoUrlId, ...fileIds] connect: [videoUrlId, ...fileIds]
.filter(Boolean) .filter(Boolean)
.map((fileId) => ({ .map((fileId) => ({
fileId, fileId,
@ -109,7 +109,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
: undefined, : undefined,
}, },
resources: { resources: {
set: [videoUrlId, ...fileIds] connect: [videoUrlId, ...fileIds]
.filter(Boolean) .filter(Boolean)
.map((fileId) => ({ .map((fileId) => ({
fileId, fileId,