linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-24 11:50:33 +08:00
parent 1a1a866406
commit 617c7db919
2 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
View File

@ -1,15 +1,23 @@
import { Course } from "@nice/common"; import { Course } from "@nice/common";
import React, { useContext } from "react"; import React, { useContext, useMemo } from "react";
import { Image, Typography, Skeleton } from "antd"; // 引入 antd 组件 import { Image, Typography, Skeleton } from "antd"; // 引入 antd 组件
import { CourseDetailContext } from "./CourseDetailContext"; import { CourseDetailContext } from "./CourseDetailContext";
import { CalendarOutlined, EyeOutlined } from "@ant-design/icons"; import {
CalendarOutlined,
EyeOutlined,
PlayCircleOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
export const CourseDetailDescription: React.FC = () => { export const CourseDetailDescription: React.FC = () => {
const { course, isLoading, selectedLectureId } = const { course, isLoading, selectedLectureId, setSelectedLectureId } =
useContext(CourseDetailContext); useContext(CourseDetailContext);
const { Paragraph, Title } = Typography; const { Paragraph, Title } = Typography;
const firstLectureId = useMemo(() => {
return course?.sections?.[0]?.lectures?.[0]?.id;
}, [course]);
const navigate = useNavigate();
return ( return (
<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6"> <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6">
{isLoading || !course ? ( {isLoading || !course ? (
@ -18,12 +26,19 @@ export const CourseDetailDescription: React.FC = () => {
<div className="space-y-4"> <div className="space-y-4">
{!selectedLectureId && ( {!selectedLectureId && (
<> <>
<div className="relative w-[600px] h-[340px] m-4 overflow-hidden flex justify-center items-center"> <div className="relative my-4 overflow-hidden flex justify-center items-center">
<Image <Image
src={course?.meta?.thumbnail} src={course?.meta?.thumbnail}
preview={false} preview={false}
className="w-full h-full object-cover z-0" 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>
</> </>
)} )}

42
apps/web/src/components/models/course/detail/CourseSyllabus/LectureItem.tsx
View File

@ -7,6 +7,7 @@ import {
FileTextOutlined, FileTextOutlined,
PlayCircleOutlined, PlayCircleOutlined,
} from "@ant-design/icons"; // 使用 Ant Design 图标 } from "@ant-design/icons"; // 使用 Ant Design 图标
import { useParams } from "react-router-dom";
interface LectureItemProps { interface LectureItemProps {
lecture: Lecture; lecture: Lecture;
@ -16,25 +17,30 @@ interface LectureItemProps {
export const LectureItem: React.FC<LectureItemProps> = ({ export const LectureItem: React.FC<LectureItemProps> = ({
lecture, lecture,
onClick, onClick,
}) => ( }) => {
<div const { lectureId } = useParams();
className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer" return (
onClick={() => onClick(lecture.id)}> <div
{lecture.type === LectureType.VIDEO && ( className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer"
<PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> onClick={() => onClick(lecture.id)}>
)} {lecture.type === LectureType.VIDEO && (
{lecture.type === LectureType.ARTICLE && ( <PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />
<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
)}
<div className="flex-grow">
<h4 className="font-medium text-gray-800">{lecture.title}</h4>
{lecture.subTitle && (
<p className="text-sm text-gray-500 mt-1">{lecture.subTitle}</p>
)} )}
</div> {lecture.type === LectureType.ARTICLE && (
{/* <div className="flex items-center gap-1 text-sm text-gray-500"> <FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
)}
<div className="flex-grow">
<h4 className="font-medium text-gray-800">{lecture.title}</h4>
{lecture.subTitle && (
<p className="text-sm text-gray-500 mt-1">
{lecture.subTitle}
</p>
)}
</div>
{/* <div className="flex items-center gap-1 text-sm text-gray-500">
<ClockCircleOutlined className="w-4 h-4" /> <ClockCircleOutlined className="w-4 h-4" />
<span>{lecture.duration}分钟</span> <span>{lecture.duration}分钟</span>
</div> */} </div> */}
</div> </div>
); );
};