121 lines
3.6 KiB
TypeScript
Executable File
121 lines
3.6 KiB
TypeScript
Executable File
import { Course, TaxonomySlug } from "@nice/common";
|
|
import React, { useContext, useMemo } from "react";
|
|
import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
|
import {
|
|
CalendarOutlined,
|
|
EditTwoTone,
|
|
EyeOutlined,
|
|
PlayCircleOutlined,
|
|
ReloadOutlined,
|
|
} from "@ant-design/icons";
|
|
import dayjs from "dayjs";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
export const CourseDetailDescription: React.FC = () => {
|
|
const { course, isLoading, selectedLectureId, setSelectedLectureId } =
|
|
useContext(CourseDetailContext);
|
|
const { Paragraph, Title } = Typography;
|
|
const firstLectureId = useMemo(() => {
|
|
return course?.sections?.[0]?.lectures?.[0]?.id;
|
|
}, [course]);
|
|
const navigate = useNavigate();
|
|
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">
|
|
{isLoading || !course ? (
|
|
<Skeleton active paragraph={{ rows: 4 }} />
|
|
) : (
|
|
<div className="space-y-2">
|
|
{!selectedLectureId && (
|
|
<>
|
|
<div className="relative my-4 overflow-hidden flex justify-center items-center">
|
|
<Image
|
|
src={course?.meta?.thumbnail}
|
|
preview={false}
|
|
className="w-full h-full object-cover z-0"
|
|
/>
|
|
<div
|
|
onClick={() => {
|
|
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>
|
|
</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) => {
|
|
return (
|
|
<Tag
|
|
key={term.id}
|
|
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
|
|
color={
|
|
term?.taxonomy?.slug ===
|
|
TaxonomySlug.CATEGORY
|
|
? "blue"
|
|
: term?.taxonomy?.slug ===
|
|
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="flex gap-1 text-primary hover:cursor-pointer"
|
|
onClick={() => {
|
|
const url = id
|
|
? `/course/${id}/editor`
|
|
: "/course/editor";
|
|
navigate(url);
|
|
}}
|
|
>
|
|
<EditTwoTone></EditTwoTone>
|
|
{"点击编辑课程"}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<Paragraph
|
|
className="text-gray-600"
|
|
ellipsis={{
|
|
rows: 3,
|
|
expandable: true,
|
|
symbol: "展开",
|
|
onExpand: () => console.log("展开"),
|
|
}}>
|
|
{course?.content}
|
|
</Paragraph>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|