add
This commit is contained in:
parent
a7bbc88e99
commit
ed85a700a4
|
@ -1,5 +1,6 @@
|
||||||
import { Card, Tag, Typography, Button } from "antd";
|
import { Card, Tag, Typography, Button } from "antd";
|
||||||
import {
|
import {
|
||||||
|
BookOutlined,
|
||||||
EyeOutlined,
|
EyeOutlined,
|
||||||
PlayCircleOutlined,
|
PlayCircleOutlined,
|
||||||
TeamOutlined,
|
TeamOutlined,
|
||||||
|
@ -73,10 +74,10 @@ export default function CourseCard({ course, edit = false }: CourseCardProps) {
|
||||||
<button> {course.title}</button>
|
<button> {course.title}</button>
|
||||||
</Title>
|
</Title>
|
||||||
|
|
||||||
<div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
|
<div className="flex items-center mb-4 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
|
||||||
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
||||||
<div className="ml-2 flex items-center flex-grow">
|
<div className="ml-2 flex items-center flex-grow">
|
||||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
<Text className="font-medium text-blue-500 transition-colors duration-300 truncate max-w-[120px]">
|
||||||
{course?.depts?.length > 1
|
{course?.depts?.length > 1
|
||||||
? `${course.depts[0].name}等`
|
? `${course.depts[0].name}等`
|
||||||
: course?.depts?.[0]?.name}
|
: course?.depts?.[0]?.name}
|
||||||
|
@ -84,10 +85,16 @@ export default function CourseCard({ course, edit = false }: CourseCardProps) {
|
||||||
{/* {course?.depts?.map((dept)=>{return dept.name})} */}
|
{/* {course?.depts?.map((dept)=>{return dept.name})} */}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-xs font-medium text-gray-500 flex items-center">
|
<span className="text-xs font-medium text-gray-500 flex items-center">
|
||||||
<EyeOutlined className="mr-1" />
|
<EyeOutlined />
|
||||||
{`观看次数 ${course?.meta?.views || 0}`}
|
{`观看次数 ${course?.meta?.views || 0}`}
|
||||||
</span>
|
</span>
|
||||||
|
<span className="text-xs font-medium text-gray-500 flex items-center">
|
||||||
|
<BookOutlined />
|
||||||
|
{`学习人数 ${course?.studentIds?.length || 0}`}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4 border-t border-gray-100 text-center">
|
<div className="pt-4 border-t border-gray-100 text-center">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -3,11 +3,13 @@ import React, { useContext, useMemo } from "react";
|
||||||
import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件
|
import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件
|
||||||
import { CourseDetailContext } from "./CourseDetailContext";
|
import { CourseDetailContext } from "./CourseDetailContext";
|
||||||
import {
|
import {
|
||||||
|
BookOutlined,
|
||||||
CalendarOutlined,
|
CalendarOutlined,
|
||||||
EditTwoTone,
|
EditTwoTone,
|
||||||
EyeOutlined,
|
EyeOutlined,
|
||||||
PlayCircleOutlined,
|
PlayCircleOutlined,
|
||||||
ReloadOutlined,
|
ReloadOutlined,
|
||||||
|
TeamOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
@ -23,7 +25,8 @@ export const CourseDetailDescription: React.FC = () => {
|
||||||
const { canEdit } = useContext(CourseDetailContext);
|
const { canEdit } = useContext(CourseDetailContext);
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
return (
|
return (
|
||||||
<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
|
// <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
|
||||||
|
<div className="w-full p-5 my-4">
|
||||||
{isLoading || !course ? (
|
{isLoading || !course ? (
|
||||||
<Skeleton active paragraph={{ rows: 4 }} />
|
<Skeleton active paragraph={{ rows: 4 }} />
|
||||||
) : (
|
) : (
|
||||||
|
@ -41,53 +44,61 @@ export const CourseDetailDescription: React.FC = () => {
|
||||||
setSelectedLectureId(firstLectureId);
|
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">
|
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 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>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="text-lg font-bold">{"课程简介:"}</div>
|
<div className="text-lg font-bold">{"课程简介:"}</div>
|
||||||
<div className="flex gap-2 flex-wrap items-center">
|
<div className="flex flex-col gap-2">
|
||||||
<div>{course?.subTitle}</div>
|
<div className="flex gap-2 flex-wrap items-center float-start">
|
||||||
{
|
{course?.subTitle && <div>{course?.subTitle}</div>}
|
||||||
course.terms.map((term) => {
|
{course.terms.map((term) => {
|
||||||
return (
|
return (
|
||||||
<Tag
|
<Tag
|
||||||
key={term.id}
|
key={term.id}
|
||||||
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
|
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
|
||||||
color={
|
color={
|
||||||
term?.taxonomy?.slug ===
|
term?.taxonomy?.slug ===
|
||||||
TaxonomySlug.CATEGORY
|
TaxonomySlug.CATEGORY
|
||||||
? "blue"
|
? "blue"
|
||||||
: term?.taxonomy?.slug ===
|
: term?.taxonomy?.slug ===
|
||||||
TaxonomySlug.LEVEL
|
TaxonomySlug.LEVEL
|
||||||
? "green"
|
? "green"
|
||||||
: "orange"
|
: "orange"
|
||||||
}
|
}
|
||||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
||||||
{term.name}
|
{term.name}
|
||||||
</Tag>
|
</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>
|
||||||
<div className="flex gap-1">
|
<div className="text-gray-600 flex justify-start gap-5">
|
||||||
<ReloadOutlined></ReloadOutlined>
|
<div className="flex gap-1">
|
||||||
{dayjs(course?.updatedAt).format("YYYY年M月D日")}
|
<CalendarOutlined></CalendarOutlined>
|
||||||
</div>
|
{"创建于:"}
|
||||||
<div className="flex gap-1">
|
{dayjs(course?.createdAt).format(
|
||||||
<EyeOutlined></EyeOutlined>
|
"YYYY年M月D日"
|
||||||
<div>{course?.meta?.views || 0}</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
{
|
<div className="flex gap-1">
|
||||||
canEdit && (
|
<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
|
<div
|
||||||
className="flex gap-1 text-primary hover:cursor-pointer"
|
className="flex gap-1 text-primary hover:cursor-pointer"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -95,13 +106,12 @@ export const CourseDetailDescription: React.FC = () => {
|
||||||
? `/course/${id}/editor`
|
? `/course/${id}/editor`
|
||||||
: "/course/editor";
|
: "/course/editor";
|
||||||
navigate(url);
|
navigate(url);
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<EditTwoTone></EditTwoTone>
|
<EditTwoTone></EditTwoTone>
|
||||||
{"点击编辑课程"}
|
{"点击编辑课程"}
|
||||||
</div>
|
</div>
|
||||||
)
|
)}
|
||||||
}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Paragraph
|
<Paragraph
|
||||||
className="text-gray-600"
|
className="text-gray-600"
|
||||||
|
|
|
@ -32,7 +32,7 @@ export function CourseBasicForm() {
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="subTitle"
|
name="subTitle"
|
||||||
label="课程副标题"
|
label="课程副标题"
|
||||||
rules={[{ max: 10, message: "副标题最多10个字符" }]}>
|
rules={[{ max: 20, message: "副标题最多20个字符" }]}>
|
||||||
<Input placeholder="请输入课程副标题" />
|
<Input placeholder="请输入课程副标题" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name={["meta", "thumbnail"]} label="课程封面">
|
<Form.Item name={["meta", "thumbnail"]} label="课程封面">
|
||||||
|
|
|
@ -83,7 +83,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
: undefined,
|
: undefined,
|
||||||
},
|
},
|
||||||
resources: {
|
resources: {
|
||||||
set: [videoUrlId, ...fileIds]
|
connect: [videoUrlId, ...fileIds]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.map((fileId) => ({
|
.map((fileId) => ({
|
||||||
fileId,
|
fileId,
|
||||||
|
@ -109,7 +109,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
: undefined,
|
: undefined,
|
||||||
},
|
},
|
||||||
resources: {
|
resources: {
|
||||||
set: [videoUrlId, ...fileIds]
|
connect: [videoUrlId, ...fileIds]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.map((fileId) => ({
|
.map((fileId) => ({
|
||||||
fileId,
|
fileId,
|
||||||
|
|
Loading…
Reference in New Issue