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 React, { useContext } from "react";
import React, { useContext, useMemo } from "react";
import { Image, Typography, Skeleton } from "antd"; // 引入 antd 组件
import { CourseDetailContext } from "./CourseDetailContext";
import { CalendarOutlined, EyeOutlined } from "@ant-design/icons";
import {
CalendarOutlined,
EyeOutlined,
PlayCircleOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
export const CourseDetailDescription: React.FC = () => {
const { course, isLoading, selectedLectureId } =
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();
return (
<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6">
{isLoading || !course ? (
@ -18,12 +26,19 @@ export const CourseDetailDescription: React.FC = () => {
<div className="space-y-4">
{!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
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>
</>
)}

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

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