91 lines
2.9 KiB
TypeScript
Executable File
91 lines
2.9 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 { useNavigate, useParams } from "react-router-dom";
|
|
import { useStaff } from "@nice/client";
|
|
import { useAuth } from "@web/src/providers/auth-provider";
|
|
import TermInfo from "@web/src/app/main/path/components/TermInfo";
|
|
import { PictureOutlined } from "@ant-design/icons";
|
|
|
|
export const CourseDetailDescription: React.FC = () => {
|
|
const {
|
|
course,
|
|
canEdit,
|
|
isLoading,
|
|
selectedLectureId,
|
|
setSelectedLectureId,
|
|
userIsLearning,
|
|
lecture = null,
|
|
} = useContext(CourseDetailContext);
|
|
const { Paragraph } = Typography;
|
|
const { user } = useAuth();
|
|
const { update } = useStaff();
|
|
const firstLectureId = useMemo(() => {
|
|
return course?.sections?.[0]?.lectures?.[0]?.id;
|
|
}, [course]);
|
|
const navigate = useNavigate();
|
|
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 px-5 my-2">
|
|
{isLoading || !course ? (
|
|
<Skeleton active paragraph={{ rows: 4 }} />
|
|
) : (
|
|
<div className="space-y-2">
|
|
{!selectedLectureId && (
|
|
<div className="relative mb-4 overflow-hidden flex justify-center items-center">
|
|
{
|
|
<div
|
|
className="w-full rounded-xl aspect-video bg-cover bg-center z-0"
|
|
style={{
|
|
backgroundImage: `url(${course?.meta?.thumbnail || "/placeholder.webp"})`,
|
|
}}
|
|
/>
|
|
}
|
|
<div
|
|
onClick={async () => {
|
|
setSelectedLectureId(firstLectureId);
|
|
if (!userIsLearning) {
|
|
await update.mutateAsync({
|
|
where: { id: user?.id },
|
|
data: {
|
|
learningPosts: {
|
|
connect: {
|
|
id: course.id,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}}
|
|
className="absolute rounded-xl top-0 left-0 right-0 bottom-0 z-10 bg-[rgba(0,0,0,0.3)] transition-all duration-300 ease-in-out hover:bg-[rgba(0,0,0,0.7)] cursor-pointer group">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
点击进入学习
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="text-lg font-bold">{"课程简介:"}</div>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex gap-2 flex-wrap items-center float-start">
|
|
{course?.subTitle && <div>{course?.subTitle}</div>}
|
|
<TermInfo terms={course.terms}></TermInfo>
|
|
</div>
|
|
</div>
|
|
<Paragraph
|
|
className="text-gray-600"
|
|
ellipsis={{
|
|
rows: 3,
|
|
expandable: true,
|
|
symbol: "展开",
|
|
onExpand: () => console.log("展开"),
|
|
}}>
|
|
{course?.content}
|
|
</Paragraph>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|