qiuchenfan
/
origin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-26 23:01:58 +08:00
parent ae1d4df170
commit a2d196b7d7
4 changed files with 81 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,14 +26,14 @@ export const CourseDetailDescription: React.FC = () => {
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-4">
<div className="w-full px-5 my-2">
{isLoading || !course ? (
<Skeleton active paragraph={{ rows: 4 }} />
) : (
<div className="space-y-2">
{!selectedLectureId && course?.meta?.thumbnail && (
<>
<div className="relative my-4 overflow-hidden flex justify-center items-center">
<div className="relative mb-4 overflow-hidden flex justify-center items-center">
<Image
src={course?.meta?.thumbnail}
preview={false}
@ -75,43 +75,6 @@ export const CourseDetailDescription: React.FC = () => {
);
})}
</div>
<div className="text-gray-600 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>
<div className="flex gap-1">
<BookOutlined />
<div>{`学习人数${course?.studentIds?.length || 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>
</div>
<Paragraph
className="text-gray-600"

29
apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
View File

@ -9,6 +9,16 @@ import CollapsibleContent from "@web/src/components/common/container/Collapsible
import { Skeleton } from "antd";
import { CoursePreview } from "./CoursePreview/CoursePreview";
import ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
import {
BookOutlined,
CalendarOutlined,
EditTwoTone,
EyeOutlined,
ReloadOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
import CourseDetailTitle from "./CourseDetailTitle";
// interface CourseDetailDisplayAreaProps {
// // course: Course;
@ -19,8 +29,15 @@ import ResourcesShower from "@web/src/components/common/uploader/ResourceShower"
export const CourseDetailDisplayArea: React.FC = () => {
// 创建滚动动画效果
const { course, isLoading, lecture, lectureIsLoading, selectedLectureId } =
useContext(CourseDetailContext);
const {
course,
isLoading,
canEdit,
lecture,
lectureIsLoading,
selectedLectureId,
} = useContext(CourseDetailContext);
const navigate = useNavigate();
const { scrollY } = useScroll();
const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);
return (
@ -29,11 +46,7 @@ export const CourseDetailDisplayArea: React.FC = () => {
{lectureIsLoading && (
<Skeleton active paragraph={{ rows: 4 }} title={false} />
)}
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-8">
<div className="flex justify-start w-full text-2xl font-bold">
{course?.title}
</div>
</div>
<CourseDetailTitle></CourseDetailTitle>
{selectedLectureId &&
!lectureIsLoading &&
lecture?.meta?.type === LectureType.VIDEO && (
@ -67,7 +80,7 @@ export const CourseDetailDisplayArea: React.FC = () => {
</div>
</div>
)}
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 ">
<CourseDetailDescription />
</div>
{/* 课程内容区域 */}

2
apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
View File

@ -24,7 +24,7 @@ export default function CourseDetailLayout() {
{/* 添加 Header 组件 */}
{/* 主内容区域 */}
{/* 为了防止 Header 覆盖内容，添加上边距 */}
<div className="pt-16">
<div className="pt-16 px-32">
{" "}
{/* 添加这个包装 div */}
<motion.div

57
apps/web/src/components/models/course/detail/CourseDetailTitle.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useContext } from "react";
import { CourseDetailContext } from "./CourseDetailContext";
import { useNavigate } from "react-router-dom";
import { BookOutlined, CalendarOutlined, EditTwoTone, EyeOutlined, ReloadOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
export default function CourseDetailTitle() {
const {
course,
isLoading,
canEdit,
lecture,
lectureIsLoading,
selectedLectureId,
} = useContext(CourseDetailContext);
const navigate = useNavigate();
return (
<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-6">
<div className="flex justify-start w-full text-2xl font-bold">
{course?.title}
</div>
<div className="text-gray-600 flex w-full 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>
<div className="flex gap-1">
<BookOutlined />
<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
</div>
{canEdit && (
<div
className="flex gap-1 text-primary hover:cursor-pointer"
onClick={() => {
const url = course?.id
? `/course/${course?.id}/editor`
: "/course/editor";
navigate(url);
}}>
<EditTwoTone></EditTwoTone>
{"点击编辑课程"}
</div>
)}
</div>
</div>
);
}