add
This commit is contained in:
parent
10248c0e73
commit
37da7cbbf8
|
@ -1,6 +1,7 @@
|
||||||
import {
|
import {
|
||||||
db,
|
db,
|
||||||
EnrollmentStatus,
|
EnrollmentStatus,
|
||||||
|
Lecture,
|
||||||
Post,
|
Post,
|
||||||
PostType,
|
PostType,
|
||||||
SectionDto,
|
SectionDto,
|
||||||
|
@ -144,14 +145,14 @@ export async function setCourseInfo({ data }: { data: Post }) {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const descendants = ancestries.map((ancestry) => ancestry.descendant);
|
const descendants = ancestries.map((ancestry) => ancestry.descendant);
|
||||||
const sections: SectionDto[] = descendants
|
const sections: SectionDto[] = (
|
||||||
.filter((descendant) => {
|
descendants.filter((descendant) => {
|
||||||
return (
|
return (
|
||||||
descendant.type === PostType.SECTION &&
|
descendant.type === PostType.SECTION &&
|
||||||
descendant.parentId === data.id
|
descendant.parentId === data.id
|
||||||
);
|
);
|
||||||
})
|
}) as any
|
||||||
.map((section) => ({
|
).map((section) => ({
|
||||||
...section,
|
...section,
|
||||||
lectures: [],
|
lectures: [],
|
||||||
}));
|
}));
|
||||||
|
@ -161,11 +162,12 @@ export async function setCourseInfo({ data }: { data: Post }) {
|
||||||
sections.map((section) => section.id).includes(descendant.parentId)
|
sections.map((section) => section.id).includes(descendant.parentId)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const lectureCount = lectures?.length || 0;
|
const lectureCount = lectures?.length || 0;
|
||||||
sections.forEach((section) => {
|
sections.forEach((section) => {
|
||||||
section.lectures = lectures.filter(
|
section.lectures = lectures.filter(
|
||||||
(lecture) => lecture.parentId === section.id,
|
(lecture) => lecture.parentId === section.id,
|
||||||
);
|
) as any as Lecture[];
|
||||||
});
|
});
|
||||||
Object.assign(data, { sections, lectureCount });
|
Object.assign(data, { sections, lectureCount });
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,39 +6,13 @@ interface CollapsibleContentProps {
|
||||||
maxHeight?: number;
|
maxHeight?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
|
const CollapsibleContent: React.FC<CollapsibleContentProps> = ({ content }) => {
|
||||||
content,
|
|
||||||
maxHeight = 150,
|
|
||||||
}) => {
|
|
||||||
const contentWrapperRef = useRef(null);
|
const contentWrapperRef = useRef(null);
|
||||||
const [isExpanded, setIsExpanded] = useState(false);
|
|
||||||
const [shouldCollapse, setShouldCollapse] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (contentWrapperRef.current) {
|
|
||||||
const shouldCollapse =
|
|
||||||
contentWrapperRef.current.scrollHeight > maxHeight;
|
|
||||||
setShouldCollapse(shouldCollapse);
|
|
||||||
}
|
|
||||||
}, [content]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className=" text-base ">
|
<div className=" text-base ">
|
||||||
<div className=" flex flex-col gap-4 border border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out rounded-xl p-6 ">
|
<div className=" flex flex-col gap-4 border border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out rounded-xl p-6 ">
|
||||||
{/* 包装整个内容区域的容器 */}
|
{/* 包装整个内容区域的容器 */}
|
||||||
<div
|
<div ref={contentWrapperRef}>
|
||||||
ref={contentWrapperRef}
|
|
||||||
style={{
|
|
||||||
maxHeight:
|
|
||||||
shouldCollapse && !isExpanded
|
|
||||||
? maxHeight
|
|
||||||
: undefined,
|
|
||||||
}}
|
|
||||||
className={`duration-300 ${
|
|
||||||
shouldCollapse && !isExpanded
|
|
||||||
? ` overflow-hidden relative`
|
|
||||||
: ""
|
|
||||||
}`}>
|
|
||||||
{/* 内容区域 */}
|
{/* 内容区域 */}
|
||||||
<div
|
<div
|
||||||
className="ql-editor p-0 space-y-1 leading-relaxed"
|
className="ql-editor p-0 space-y-1 leading-relaxed"
|
||||||
|
@ -46,23 +20,7 @@ const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
|
||||||
__html: content || "",
|
__html: content || "",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 渐变遮罩 */}
|
|
||||||
{shouldCollapse && !isExpanded && (
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 展开/收起按钮 */}
|
|
||||||
{shouldCollapse && (
|
|
||||||
<button
|
|
||||||
onClick={() => setIsExpanded(!isExpanded)}
|
|
||||||
className="mt-2 text-blue-500 hover:text-blue-700">
|
|
||||||
{isExpanded ? "收起" : "展开"}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{/* PostResources 组件 */}
|
|
||||||
{/* <PostResources post={post} /> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
export const defaultModules = {
|
export const defaultModules = {
|
||||||
toolbar: [
|
toolbar: [
|
||||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||||
['bold', 'italic', 'underline', 'strike'],
|
["bold", "italic", "underline", "strike"],
|
||||||
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
[{ list: "ordered" }, { list: "bullet" }],
|
||||||
[{ 'color': [] }, { 'background': [] }],
|
[{ color: [] }, { background: [] }],
|
||||||
[{ 'align': [] }],
|
[{ align: [] }],
|
||||||
['link', 'image'],
|
["link"],
|
||||||
['clean']
|
["clean"],
|
||||||
]
|
],
|
||||||
};
|
};
|
|
@ -1,5 +1,4 @@
|
||||||
import { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
// import UncoverAvatarUploader from "../uploader/UncoverAvatarUploader ";
|
|
||||||
import { Upload, Progress, Button, Image, Form } from "antd";
|
import { Upload, Progress, Button, Image, Form } from "antd";
|
||||||
import { DeleteOutlined } from "@ant-design/icons";
|
import { DeleteOutlined } from "@ant-design/icons";
|
||||||
import AvatarUploader from "./AvatarUploader";
|
import AvatarUploader from "./AvatarUploader";
|
||||||
|
@ -8,11 +7,17 @@ import { isEqual } from "lodash";
|
||||||
interface MultiAvatarUploaderProps {
|
interface MultiAvatarUploaderProps {
|
||||||
value?: string[];
|
value?: string[];
|
||||||
onChange?: (value: string[]) => void;
|
onChange?: (value: string[]) => void;
|
||||||
|
className?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MultiAvatarUploader({
|
export function MultiAvatarUploader({
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
placeholder = "点击上传",
|
||||||
}: MultiAvatarUploaderProps) {
|
}: MultiAvatarUploaderProps) {
|
||||||
const [imageList, setImageList] = useState<string[]>(value || []);
|
const [imageList, setImageList] = useState<string[]>(value || []);
|
||||||
const [previewImage, setPreviewImage] = useState<string>("");
|
const [previewImage, setPreviewImage] = useState<string>("");
|
||||||
|
@ -30,12 +35,21 @@ export function MultiAvatarUploader({
|
||||||
{(imageList || [])?.map((image, index) => {
|
{(imageList || [])?.map((image, index) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="mr-2px relative"
|
className={`mr-2px relative ${className}`}
|
||||||
key={index}
|
key={index}
|
||||||
style={{ width: "200px", height: "100px" }}>
|
style={{
|
||||||
|
width: "100px",
|
||||||
|
height: "100px",
|
||||||
|
...style,
|
||||||
|
}}>
|
||||||
<Image
|
<Image
|
||||||
alt=""
|
alt=""
|
||||||
style={{ width: "200px", height: "100px" }}
|
className={className}
|
||||||
|
style={{
|
||||||
|
width: "100px",
|
||||||
|
height: "100px",
|
||||||
|
...style,
|
||||||
|
}}
|
||||||
src={image}
|
src={image}
|
||||||
preview={{
|
preview={{
|
||||||
visible: previewImage === image,
|
visible: previewImage === image,
|
||||||
|
@ -70,7 +84,10 @@ export function MultiAvatarUploader({
|
||||||
</div>
|
</div>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<AvatarUploader
|
<AvatarUploader
|
||||||
|
style={style}
|
||||||
|
className={className}
|
||||||
showCover={false}
|
showCover={false}
|
||||||
|
placeholder={placeholder}
|
||||||
successText={"轮播图上传成功"}
|
successText={"轮播图上传成功"}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
console.log(value);
|
console.log(value);
|
||||||
|
|
|
@ -0,0 +1,135 @@
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import { Image, Button, Row, Col, Tooltip } from "antd";
|
||||||
|
import { ResourceDto } from "@nice/common";
|
||||||
|
import { env } from "@web/src/env";
|
||||||
|
import { getFileIcon } from "./utils";
|
||||||
|
import { formatFileSize, getCompressedImageUrl } from "@nice/utils";
|
||||||
|
|
||||||
|
export default function ResourcesShower({
|
||||||
|
resources = [],
|
||||||
|
}: {
|
||||||
|
resources: ResourceDto[];
|
||||||
|
}) {
|
||||||
|
const { resources: dealedResources } = useMemo(() => {
|
||||||
|
if (!resources) return { resources: [] };
|
||||||
|
|
||||||
|
const isImage = (url: string) =>
|
||||||
|
/\.(png|jpg|jpeg|gif|webp)$/i.test(url);
|
||||||
|
|
||||||
|
const sortedResources = resources
|
||||||
|
.map((resource) => {
|
||||||
|
const original = `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${resource.url}`;
|
||||||
|
const isImg = isImage(resource.url);
|
||||||
|
return {
|
||||||
|
...resource,
|
||||||
|
url: isImg ? getCompressedImageUrl(original) : original,
|
||||||
|
originalUrl: original,
|
||||||
|
isImage: isImg,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.sort((a, b) => (a.isImage === b.isImage ? 0 : a.isImage ? -1 : 1));
|
||||||
|
|
||||||
|
return { resources: sortedResources };
|
||||||
|
}, [resources]);
|
||||||
|
|
||||||
|
const imageResources = dealedResources.filter((res) => res.isImage);
|
||||||
|
const fileResources = dealedResources.filter((res) => !res.isImage);
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{imageResources.length > 0 && (
|
||||||
|
<Row gutter={[16, 16]} className="mb-6">
|
||||||
|
<Image.PreviewGroup>
|
||||||
|
{imageResources.map((resource) => (
|
||||||
|
<Col
|
||||||
|
key={resource.url}
|
||||||
|
xs={12}
|
||||||
|
sm={8}
|
||||||
|
md={6}
|
||||||
|
lg={6}
|
||||||
|
xl={4}
|
||||||
|
className="relative">
|
||||||
|
<div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100">
|
||||||
|
<div className="w-full h-full">
|
||||||
|
<Image
|
||||||
|
src={resource.url}
|
||||||
|
alt={resource.title}
|
||||||
|
preview={{
|
||||||
|
src: resource.originalUrl,
|
||||||
|
mask: (
|
||||||
|
<div className="flex items-center justify-center text-white">
|
||||||
|
点击预览
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
inset: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
objectFit: "cover",
|
||||||
|
}}
|
||||||
|
rootClassName="w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{resource.title && (
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/60 to-transparent text-white text-sm truncate">
|
||||||
|
{resource.title}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
))}
|
||||||
|
</Image.PreviewGroup>
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
|
{fileResources.length > 0 && (
|
||||||
|
<div className="rounded-xl p-1 border border-gray-100 bg-white">
|
||||||
|
<div className="flex flex-nowrap overflow-x-auto scrollbar-hide gap-1.5">
|
||||||
|
{fileResources.map((resource) => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={resource.url}
|
||||||
|
className="flex-shrink-0 relative active:scale-95 transition-transform select-none "
|
||||||
|
href={resource.originalUrl}
|
||||||
|
target="_blank"
|
||||||
|
download={true}
|
||||||
|
title="点击下载文件">
|
||||||
|
{/* 超紧凑卡片容器 */}
|
||||||
|
<div className="w-[120px] h-[80px] p-2 flex flex-col items-center justify-between rounded-xl hover:bg-primary-50/40 cursor-pointer">
|
||||||
|
{/* 微型文件图标 */}
|
||||||
|
<div className="text-primary-600 text-base">
|
||||||
|
{getFileIcon(resource.url)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 压缩信息展示 */}
|
||||||
|
<div className="w-full text-center space-y-0.5">
|
||||||
|
<p className="text-xs font-medium text-gray-800 truncate">
|
||||||
|
{resource.title?.slice(0, 12) ||
|
||||||
|
"未命名"}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||||
|
<span className="bg-gray-100 px-0.5 rounded-sm">
|
||||||
|
{resource.url
|
||||||
|
.split(".")
|
||||||
|
.pop()
|
||||||
|
?.slice(0, 4)
|
||||||
|
.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{resource.meta.size &&
|
||||||
|
formatFileSize(
|
||||||
|
resource.meta.size
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,48 @@
|
||||||
|
import {
|
||||||
|
FilePdfOutlined,
|
||||||
|
FileWordOutlined,
|
||||||
|
FileExcelOutlined,
|
||||||
|
FilePptOutlined,
|
||||||
|
FileTextOutlined,
|
||||||
|
FileZipOutlined,
|
||||||
|
FileImageOutlined,
|
||||||
|
FileUnknownOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
|
||||||
|
export const isContentEmpty = (html: string) => {
|
||||||
|
// 创建一个临时 div 来解析 HTML 内容
|
||||||
|
const temp = document.createElement("div");
|
||||||
|
temp.innerHTML = html;
|
||||||
|
// 获取纯文本内容并检查是否为空
|
||||||
|
return !temp.textContent?.trim();
|
||||||
|
};
|
||||||
|
export const getFileIcon = (filename: string) => {
|
||||||
|
const extension = filename.split(".").pop()?.toLowerCase();
|
||||||
|
switch (extension) {
|
||||||
|
case "pdf":
|
||||||
|
return <FilePdfOutlined className="text-red-500" />;
|
||||||
|
case "doc":
|
||||||
|
case "docx":
|
||||||
|
return <FileWordOutlined className="text-blue-500" />;
|
||||||
|
case "xls":
|
||||||
|
case "xlsx":
|
||||||
|
return <FileExcelOutlined className="text-green-600" />;
|
||||||
|
case "ppt":
|
||||||
|
case "pptx":
|
||||||
|
return <FilePptOutlined className="text-orange-500" />;
|
||||||
|
case "txt":
|
||||||
|
return <FileTextOutlined className="text-gray-600" />;
|
||||||
|
case "zip":
|
||||||
|
case "rar":
|
||||||
|
case "7z":
|
||||||
|
return <FileZipOutlined className="text-purple-500" />;
|
||||||
|
case "png":
|
||||||
|
case "jpg":
|
||||||
|
case "jpeg":
|
||||||
|
case "gif":
|
||||||
|
case "webp":
|
||||||
|
return <FileImageOutlined className="text-pink-400" />;
|
||||||
|
default:
|
||||||
|
return <FileUnknownOutlined className="text-gray-500" />;
|
||||||
|
}
|
||||||
|
};
|
|
@ -3,6 +3,7 @@ import {
|
||||||
courseDetailSelect,
|
courseDetailSelect,
|
||||||
CourseDto,
|
CourseDto,
|
||||||
Lecture,
|
Lecture,
|
||||||
|
lectureDetailSelect,
|
||||||
RolePerms,
|
RolePerms,
|
||||||
VisitType,
|
VisitType,
|
||||||
} from "@nice/common";
|
} from "@nice/common";
|
||||||
|
@ -72,16 +73,17 @@ export function CourseDetailProvider({
|
||||||
).findFirst.useQuery(
|
).findFirst.useQuery(
|
||||||
{
|
{
|
||||||
where: { id: selectedLectureId },
|
where: { id: selectedLectureId },
|
||||||
|
select: lectureDetailSelect,
|
||||||
},
|
},
|
||||||
{ enabled: Boolean(editId) }
|
{ enabled: Boolean(editId) }
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (course) {
|
if (lecture?.id) {
|
||||||
read.mutateAsync({
|
read.mutateAsync({
|
||||||
data: {
|
data: {
|
||||||
visitorId: user?.id || null,
|
visitorId: user?.id || null,
|
||||||
postId: course.id,
|
postId: lecture?.id,
|
||||||
type: VisitType.READED,
|
type: VisitType.READED,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,67 +0,0 @@
|
||||||
// import { useContext } from "react";
|
|
||||||
// import { CourseDetailContext } from "../../CourseDetailContext";
|
|
||||||
// import { CheckCircleIcon } from "@heroicons/react/24/solid";
|
|
||||||
|
|
||||||
// export function Overview() {
|
|
||||||
// const { course } = useContext(CourseDetailContext);
|
|
||||||
// return (
|
|
||||||
// <>
|
|
||||||
// <div className="space-y-8">
|
|
||||||
// {/* 课程描述 */}
|
|
||||||
// <div className="prose max-w-none">
|
|
||||||
// <p>{course?.description}</p>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// {/* 学习目标 */}
|
|
||||||
// <div>
|
|
||||||
// <h2 className="text-xl font-semibold mb-4">学习目标</h2>
|
|
||||||
// <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
// {course?.objectives.map((objective, index) => (
|
|
||||||
// <div key={index} className="flex items-start gap-2">
|
|
||||||
// <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0 mt-1" />
|
|
||||||
// <span>{objective}</span>
|
|
||||||
// </div>
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// {/* 适合人群 */}
|
|
||||||
// <div>
|
|
||||||
// <h2 className="text-xl font-semibold mb-4">适合人群</h2>
|
|
||||||
// <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
// {course?.audiences.map((audience, index) => (
|
|
||||||
// <div key={index} className="flex items-start gap-2">
|
|
||||||
// <CheckCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
|
||||||
// <span>{audience}</span>
|
|
||||||
// </div>
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// {/* 课程要求 */}
|
|
||||||
// <div>
|
|
||||||
// <h2 className="text-xl font-semibold mb-4">课程要求</h2>
|
|
||||||
// <ul className="list-disc list-inside space-y-2 text-gray-700">
|
|
||||||
// {course?.requirements.map((requirement, index) => (
|
|
||||||
// <li key={index}>{requirement}</li>
|
|
||||||
// ))}
|
|
||||||
// </ul>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// {/* 可获得技能 */}
|
|
||||||
// <div>
|
|
||||||
// <h2 className="text-xl font-semibold mb-4">可获得技能</h2>
|
|
||||||
// <div className="flex flex-wrap gap-2">
|
|
||||||
// {course?.skills.map((skill, index) => (
|
|
||||||
// <span
|
|
||||||
// key={index}
|
|
||||||
// className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
|
|
||||||
// {skill}
|
|
||||||
// </span>
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </>
|
|
||||||
// );
|
|
||||||
// }
|
|
|
@ -8,6 +8,7 @@ import { CourseDetailContext } from "./CourseDetailContext";
|
||||||
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
|
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
|
||||||
import { Skeleton } from "antd";
|
import { Skeleton } from "antd";
|
||||||
import { CoursePreview } from "./CoursePreview/CoursePreview";
|
import { CoursePreview } from "./CoursePreview/CoursePreview";
|
||||||
|
import ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
|
||||||
|
|
||||||
// interface CourseDetailDisplayAreaProps {
|
// interface CourseDetailDisplayAreaProps {
|
||||||
// // course: Course;
|
// // course: Course;
|
||||||
|
@ -53,6 +54,12 @@ export const CourseDetailDisplayArea: React.FC = () => {
|
||||||
content={lecture?.content || ""}
|
content={lecture?.content || ""}
|
||||||
maxHeight={500} // Optional, defaults to 150
|
maxHeight={500} // Optional, defaults to 150
|
||||||
/>
|
/>
|
||||||
|
<div className="px-6">
|
||||||
|
<ResourcesShower
|
||||||
|
resources={
|
||||||
|
lecture?.resources
|
||||||
|
}></ResourcesShower>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -33,7 +33,12 @@ import {
|
||||||
useSortable,
|
useSortable,
|
||||||
verticalListSortingStrategy,
|
verticalListSortingStrategy,
|
||||||
} from "@dnd-kit/sortable";
|
} from "@dnd-kit/sortable";
|
||||||
import { Lecture, LectureType, PostType } from "@nice/common";
|
import {
|
||||||
|
Lecture,
|
||||||
|
lectureDetailSelect,
|
||||||
|
LectureType,
|
||||||
|
PostType,
|
||||||
|
} from "@nice/common";
|
||||||
import { useCourseEditor } from "../../context/CourseEditorContext";
|
import { useCourseEditor } from "../../context/CourseEditorContext";
|
||||||
import { usePost } from "@nice/client";
|
import { usePost } from "@nice/client";
|
||||||
import { LectureData, SectionData } from "./interface";
|
import { LectureData, SectionData } from "./interface";
|
||||||
|
@ -62,6 +67,7 @@ export const LectureList: React.FC<LectureListProps> = ({
|
||||||
orderBy: {
|
orderBy: {
|
||||||
order: "asc",
|
order: "asc",
|
||||||
},
|
},
|
||||||
|
select: lectureDetailSelect,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: !!sectionId,
|
enabled: !!sectionId,
|
||||||
|
|
|
@ -15,6 +15,7 @@ import {
|
||||||
LectureType,
|
LectureType,
|
||||||
LessonTypeLabel,
|
LessonTypeLabel,
|
||||||
PostType,
|
PostType,
|
||||||
|
ResourceStatus,
|
||||||
videoMimeTypes,
|
videoMimeTypes,
|
||||||
} from "@nice/common";
|
} from "@nice/common";
|
||||||
import { usePost } from "@nice/client";
|
import { usePost } from "@nice/client";
|
||||||
|
@ -23,6 +24,8 @@ import toast from "react-hot-toast";
|
||||||
import { env } from "@web/src/env";
|
import { env } from "@web/src/env";
|
||||||
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
|
import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
|
||||||
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
|
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
|
||||||
|
import MultiAvatarUploader from "@web/src/components/common/uploader/MultiAvatarUploader";
|
||||||
|
import ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
|
||||||
|
|
||||||
interface SortableLectureProps {
|
interface SortableLectureProps {
|
||||||
field: Lecture;
|
field: Lecture;
|
||||||
|
@ -58,6 +61,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const values = await form.validateFields();
|
const values = await form.validateFields();
|
||||||
let result;
|
let result;
|
||||||
|
const fileIds = values?.meta?.fileIds || [];
|
||||||
const videoUrlId = Array.isArray(values?.meta?.videoIds)
|
const videoUrlId = Array.isArray(values?.meta?.videoIds)
|
||||||
? values?.meta?.videoIds[0]
|
? values?.meta?.videoIds[0]
|
||||||
: typeof values?.meta?.videoIds === "string"
|
: typeof values?.meta?.videoIds === "string"
|
||||||
|
@ -72,13 +76,14 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
title: values?.title,
|
title: values?.title,
|
||||||
meta: {
|
meta: {
|
||||||
type: values?.meta?.type,
|
type: values?.meta?.type,
|
||||||
|
fileIds: fileIds,
|
||||||
videoIds: videoUrlId ? [videoUrlId] : [],
|
videoIds: videoUrlId ? [videoUrlId] : [],
|
||||||
videoUrl: videoUrlId
|
videoUrl: videoUrlId
|
||||||
? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
|
? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
|
||||||
: undefined,
|
: undefined,
|
||||||
},
|
},
|
||||||
resources: {
|
resources: {
|
||||||
connect: [videoUrlId]
|
connect: [videoUrlId, ...fileIds]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.map((fileId) => ({
|
.map((fileId) => ({
|
||||||
fileId,
|
fileId,
|
||||||
|
@ -97,13 +102,14 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
title: values?.title,
|
title: values?.title,
|
||||||
meta: {
|
meta: {
|
||||||
type: values?.meta?.type,
|
type: values?.meta?.type,
|
||||||
|
fileIds: fileIds,
|
||||||
videoIds: videoUrlId ? [videoUrlId] : [],
|
videoIds: videoUrlId ? [videoUrlId] : [],
|
||||||
videoUrl: videoUrlId
|
videoUrl: videoUrlId
|
||||||
? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
|
? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
|
||||||
: undefined,
|
: undefined,
|
||||||
},
|
},
|
||||||
resources: {
|
resources: {
|
||||||
connect: [videoUrlId]
|
connect: [videoUrlId, ...fileIds]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.map((fileId) => ({
|
.map((fileId) => ({
|
||||||
fileId,
|
fileId,
|
||||||
|
@ -113,6 +119,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
setIsContentVisible(false);
|
||||||
toast.success("课时已更新");
|
toast.success("课时已更新");
|
||||||
field.id = result.id;
|
field.id = result.id;
|
||||||
setEditing(false);
|
setEditing(false);
|
||||||
|
@ -178,14 +185,30 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
) : (
|
) : (
|
||||||
|
<div>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="content"
|
name="content"
|
||||||
className="mb-0 flex-1"
|
className="mb-0 flex-1"
|
||||||
rules={[
|
rules={[
|
||||||
{ required: true, message: "请输入内容" },
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入内容",
|
||||||
|
},
|
||||||
]}>
|
]}>
|
||||||
<QuillEditor />
|
<QuillEditor />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name={["meta", "fileIds"]}
|
||||||
|
className="mb-0 flex-1"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请传入文件",
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<TusUploader multiple={true} />
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -237,10 +260,16 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||||
{isContentVisible &&
|
{isContentVisible &&
|
||||||
!editing && // Conditionally render content based on type
|
!editing && // Conditionally render content based on type
|
||||||
(field?.meta?.type === LectureType.ARTICLE ? (
|
(field?.meta?.type === LectureType.ARTICLE ? (
|
||||||
|
<div>
|
||||||
<CollapsibleContent
|
<CollapsibleContent
|
||||||
maxHeight={200}
|
maxHeight={200}
|
||||||
content={field?.content}
|
content={field?.content}
|
||||||
/>
|
/>
|
||||||
|
<div className="px-6 ">
|
||||||
|
<ResourcesShower
|
||||||
|
resources={field?.resources}></ResourcesShower>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VideoPlayer src={field?.meta?.videoUrl} />
|
<VideoPlayer src={field?.meta?.videoUrl} />
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -96,7 +96,6 @@ export const Controls = () => {
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
{/* 播放/暂停按钮 */}
|
{/* 播放/暂停按钮 */}
|
||||||
<Play></Play>
|
<Play></Play>
|
||||||
|
|
||||||
{/* 时间显示 */}
|
{/* 时间显示 */}
|
||||||
{duration && (
|
{duration && (
|
||||||
<span className="text-white text-xl">
|
<span className="text-white text-xl">
|
||||||
|
@ -114,7 +113,7 @@ export const Controls = () => {
|
||||||
{/* 倍速控制 */}
|
{/* 倍速控制 */}
|
||||||
<Speed></Speed>
|
<Speed></Speed>
|
||||||
{/* 设置按钮 */}
|
{/* 设置按钮 */}
|
||||||
<Setting></Setting>
|
{/* <Setting></Setting> */}
|
||||||
|
|
||||||
{/* 全屏按钮 */}
|
{/* 全屏按钮 */}
|
||||||
<FullScreen></FullScreen>
|
<FullScreen></FullScreen>
|
||||||
|
|
|
@ -14,7 +14,6 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
onError,
|
onError,
|
||||||
videoRef,
|
videoRef,
|
||||||
setIsReady,
|
setIsReady,
|
||||||
isPlaying,
|
|
||||||
setIsPlaying,
|
setIsPlaying,
|
||||||
setError,
|
setError,
|
||||||
setBufferingState,
|
setBufferingState,
|
||||||
|
@ -26,8 +25,6 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
isDragging,
|
isDragging,
|
||||||
setIsDragging,
|
setIsDragging,
|
||||||
progressRef,
|
progressRef,
|
||||||
resolution,
|
|
||||||
setResolutions,
|
|
||||||
} = useContext(VideoPlayerContext);
|
} = useContext(VideoPlayerContext);
|
||||||
|
|
||||||
// 处理进度条拖拽
|
// 处理进度条拖拽
|
||||||
|
@ -40,7 +37,6 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
);
|
);
|
||||||
videoRef.current.currentTime = percent * videoRef.current.duration;
|
videoRef.current.currentTime = percent * videoRef.current.duration;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 添加拖拽事件监听
|
// 添加拖拽事件监听
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleMouseUp = () => setIsDragging(false);
|
const handleMouseUp = () => setIsDragging(false);
|
||||||
|
@ -66,15 +62,12 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
setError(null);
|
setError(null);
|
||||||
setLoadingProgress(0);
|
setLoadingProgress(0);
|
||||||
setBufferingState(false);
|
setBufferingState(false);
|
||||||
|
|
||||||
// Check for native HLS support (Safari)
|
// Check for native HLS support (Safari)
|
||||||
if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
|
if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
|
||||||
videoRef.current.src = src;
|
videoRef.current.src = src;
|
||||||
setIsReady(true);
|
setIsReady(true);
|
||||||
|
|
||||||
// 设置视频时长
|
// 设置视频时长
|
||||||
setDuration(videoRef.current.duration);
|
setDuration(videoRef.current.duration);
|
||||||
|
|
||||||
if (autoPlay) {
|
if (autoPlay) {
|
||||||
try {
|
try {
|
||||||
await videoRef.current.play();
|
await videoRef.current.play();
|
||||||
|
@ -85,14 +78,12 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!Hls.isSupported()) {
|
if (!Hls.isSupported()) {
|
||||||
const errorMessage = "您的浏览器不支持 HLS 视频播放";
|
const errorMessage = "您的浏览器不支持 HLS 视频播放";
|
||||||
setError(errorMessage);
|
setError(errorMessage);
|
||||||
onError?.(errorMessage);
|
onError?.(errorMessage);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
hls = new Hls({
|
hls = new Hls({
|
||||||
maxBufferLength: 30,
|
maxBufferLength: 30,
|
||||||
maxMaxBufferLength: 600,
|
maxMaxBufferLength: 600,
|
||||||
|
@ -102,13 +93,10 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
|
|
||||||
hls.loadSource(src);
|
hls.loadSource(src);
|
||||||
hls.attachMedia(videoRef.current);
|
hls.attachMedia(videoRef.current);
|
||||||
|
|
||||||
hls.on(Hls.Events.MANIFEST_PARSED, async () => {
|
hls.on(Hls.Events.MANIFEST_PARSED, async () => {
|
||||||
setIsReady(true);
|
setIsReady(true);
|
||||||
|
|
||||||
// 设置视频时长
|
// 设置视频时长
|
||||||
setDuration(videoRef.current?.duration || 0);
|
setDuration(videoRef.current?.duration || 0);
|
||||||
|
|
||||||
if (autoPlay && videoRef.current) {
|
if (autoPlay && videoRef.current) {
|
||||||
try {
|
try {
|
||||||
await videoRef.current.play();
|
await videoRef.current.play();
|
||||||
|
@ -118,7 +106,6 @@ export const VideoDisplay: React.FC<VideoDisplayProps> = ({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
hls.on(Hls.Events.BUFFER_APPENDING, () => {
|
hls.on(Hls.Events.BUFFER_APPENDING, () => {
|
||||||
setBufferingState(true);
|
setBufferingState(true);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
export * from "./department"
|
export * from "./department";
|
||||||
export * from "./message"
|
export * from "./message";
|
||||||
export * from "./staff"
|
export * from "./staff";
|
||||||
export * from "./term"
|
export * from "./term";
|
||||||
export * from "./post"
|
export * from "./post";
|
||||||
export * from "./rbac"
|
export * from "./rbac";
|
||||||
export * from "./select"
|
export * from "./select";
|
||||||
|
export * from "./resource";
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
} from "@prisma/client";
|
} from "@prisma/client";
|
||||||
import { StaffDto } from "./staff";
|
import { StaffDto } from "./staff";
|
||||||
import { TermDto } from "./term";
|
import { TermDto } from "./term";
|
||||||
|
import { ResourceDto } from "./resource";
|
||||||
|
|
||||||
export type PostComment = {
|
export type PostComment = {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -51,6 +52,7 @@ export type LectureMeta = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Lecture = Post & {
|
export type Lecture = Post & {
|
||||||
|
resources?: ResourceDto[];
|
||||||
meta?: LectureMeta;
|
meta?: LectureMeta;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -79,5 +81,5 @@ export type CourseDto = Course & {
|
||||||
sections?: SectionDto[];
|
sections?: SectionDto[];
|
||||||
terms: TermDto[];
|
terms: TermDto[];
|
||||||
lectureCount?: number;
|
lectureCount?: number;
|
||||||
depts:Department[]
|
depts: Department[];
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { Resource } from "@prisma/client";
|
||||||
|
|
||||||
|
export interface BaseMetadata {
|
||||||
|
size: number;
|
||||||
|
filetype: string;
|
||||||
|
filename: string;
|
||||||
|
extension: string;
|
||||||
|
modifiedAt: Date;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 图片特有元数据接口
|
||||||
|
*/
|
||||||
|
export interface ImageMetadata {
|
||||||
|
width: number; // 图片宽度(px)
|
||||||
|
height: number; // 图片高度(px)
|
||||||
|
compressedUrl?: string;
|
||||||
|
orientation?: number; // EXIF方向信息
|
||||||
|
space?: string; // 色彩空间 (如: RGB, CMYK)
|
||||||
|
hasAlpha?: boolean; // 是否包含透明通道
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 视频特有元数据接口
|
||||||
|
*/
|
||||||
|
export interface VideoMetadata {
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
duration?: number;
|
||||||
|
videoCodec?: string;
|
||||||
|
audioCodec?: string;
|
||||||
|
coverUrl?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 音频特有元数据接口
|
||||||
|
*/
|
||||||
|
export interface AudioMetadata {
|
||||||
|
duration: number; // 音频时长(秒)
|
||||||
|
bitrate?: number; // 比特率(bps)
|
||||||
|
sampleRate?: number; // 采样率(Hz)
|
||||||
|
channels?: number; // 声道数
|
||||||
|
codec?: string; // 音频编码格式
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FileMetadata = ImageMetadata &
|
||||||
|
VideoMetadata &
|
||||||
|
AudioMetadata &
|
||||||
|
BaseMetadata;
|
||||||
|
|
||||||
|
export type ResourceDto = Resource & {
|
||||||
|
meta: FileMetadata;
|
||||||
|
};
|
|
@ -1,5 +0,0 @@
|
||||||
import { Lecture, Section } from "@prisma/client";
|
|
||||||
|
|
||||||
export type SectionDto = Section & {
|
|
||||||
lectures: Lecture[];
|
|
||||||
};
|
|
|
@ -79,6 +79,7 @@ export const courseDetailSelect: Prisma.PostSelect = {
|
||||||
select: {
|
select: {
|
||||||
id: true,
|
id: true,
|
||||||
name: true,
|
name: true,
|
||||||
|
taxonomyId: true,
|
||||||
taxonomy: {
|
taxonomy: {
|
||||||
select: {
|
select: {
|
||||||
id: true,
|
id: true,
|
||||||
|
@ -95,3 +96,15 @@ export const courseDetailSelect: Prisma.PostSelect = {
|
||||||
meta: true,
|
meta: true,
|
||||||
rating: true,
|
rating: true,
|
||||||
};
|
};
|
||||||
|
export const lectureDetailSelect: Prisma.PostSelect = {
|
||||||
|
id: true,
|
||||||
|
title: true,
|
||||||
|
subTitle: true,
|
||||||
|
content: true,
|
||||||
|
resources: true,
|
||||||
|
createdAt: true,
|
||||||
|
updatedAt: true,
|
||||||
|
// 关联表选择
|
||||||
|
|
||||||
|
meta: true,
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue