From ed31d8d00bfdd41cf45b6b2a1779e4d698e78b29 Mon Sep 17 00:00:00 2001
From: Rao <1227431568@qq.com>
Date: Fri, 7 Mar 2025 17:26:16 +0800
Subject: [PATCH] rht

---
 .../common/uploader/TusUploader.tsx           | 18 +++--
 .../CourseContentForm/SortableLecture.tsx     | 80 +++++++++++--------
 2 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/components/common/uploader/TusUploader.tsx b/apps/web/src/components/common/uploader/TusUploader.tsx
index 17e2685..2ff3fad 100755
--- a/apps/web/src/components/common/uploader/TusUploader.tsx
+++ b/apps/web/src/components/common/uploader/TusUploader.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { ReactNode, useCallback, useState } from "react";
 import {
 	UploadOutlined,
 	CheckCircleOutlined,
@@ -12,6 +12,9 @@ export interface TusUploaderProps {
 	onChange?: (value: string[]) => void;
 	multiple?: boolean;
 	allowTypes?: string[];
+	style?:string
+	icon?:ReactNode,
+	description?:string
 }
 
 interface UploadingFile {
@@ -27,6 +30,9 @@ export const TusUploader = ({
 	onChange,
 	multiple = true,
 	allowTypes = undefined,
+	style="",
+	icon = <UploadOutlined />,
+	description = "点击或拖拽文件到此区域进行上传",
 }: TusUploaderProps) => {
 	const { handleFileUpload, uploadProgress } = useTusUpload();
 	const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
@@ -137,7 +143,7 @@ export const TusUploader = ({
 	);
 
 	return (
-		<div className="space-y-1">
+		<div className={`space-y-1 ${style}`}>
 			<Upload.Dragger
 				accept={allowTypes?.join(",")}
 				name="files"
@@ -145,18 +151,18 @@ export const TusUploader = ({
 				showUploadList={false}
 				beforeUpload={handleBeforeUpload}>
 				<p className="ant-upload-drag-icon">
-					<UploadOutlined />
+					{icon}
 				</p>
 				<p className="ant-upload-text">
-					点击或拖拽文件到此区域进行上传
+					{description}
 				</p>
 				<p className="ant-upload-hint">
 					{multiple ? "支持单个或批量上传文件" : "仅支持上传单个文件"}
-					{allowTypes && (
+					{/* {allowTypes && (
 						<span className="block text-xs text-gray-500">
 							允许类型: {allowTypes.join(", ")}
 						</span>
-					)}
+					)} */}
 				</p>
 
 				<div className="px-2 py-0 rounded mt-1">
diff --git a/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx b/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
index 2d9bfd2..368f1e7 100755
--- a/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
+++ b/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
@@ -3,6 +3,8 @@ import {
 	CaretRightOutlined,
 	SaveOutlined,
 	CaretDownOutlined,
+	PaperClipOutlined,
+	PlaySquareOutlined,
 } from "@ant-design/icons";
 import { Form, Button, Input, Select, Space } from "antd";
 import React, { useState } from "react";
@@ -86,12 +88,12 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 						resources:
 							[videoUrlId, ...fileIds].filter(Boolean)?.length > 0
 								? {
-										connect: [videoUrlId, ...fileIds]
-											.filter(Boolean)
-											.map((fileId) => ({
-												fileId,
-											})),
-									}
+									connect: [videoUrlId, ...fileIds]
+										.filter(Boolean)
+										.map((fileId) => ({
+											fileId,
+										})),
+								}
 								: undefined,
 						content: values?.content,
 					},
@@ -115,12 +117,12 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 						resources:
 							[videoUrlId, ...fileIds].filter(Boolean)?.length > 0
 								? {
-										set: [videoUrlId, ...fileIds]
-											.filter(Boolean)
-											.map((fileId) => ({
-												fileId,
-											})),
-									}
+									set: [videoUrlId, ...fileIds]
+										.filter(Boolean)
+										.map((fileId) => ({
+											fileId,
+										})),
+								}
 								: undefined,
 						content: values?.content,
 					},
@@ -175,30 +177,42 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 							/>
 						</Form.Item>
 					</div>
-					<div className="mt-4 flex flex-2 flex-col gap-y-5 ">
+					<div className="mt-4 flex flex-2 flex-row gap-x-5 ">
 						{lectureType === LectureType.VIDEO ? (
 							<>
-								<Form.Item
-									name={["meta", "videoIds"]}
-									className="mb-0 flex-1"
-									rules={[
-										{
-											required: true,
-											message: "请传入视频",
-										},
-									]}>
-									<TusUploader
-										allowTypes={videoMimeTypes}
-										multiple={false}
+								<div className="mb-0 flex-1">
+									{/* <span className="inline-block w-full h-7 my-1 rounded-lg bg-slate-100 text-center leading-7">添加视频</span> */}
+									<Form.Item
+										name={["meta", "videoIds"]}
+										rules={[
+											{
+												required: true,
+												message: "请传入视频",
+											},
+										]}>
+										<TusUploader
+											allowTypes={videoMimeTypes}
+											multiple={false}
+											style={"h-64"}
+											icon={<PlaySquareOutlined />}
+											description="点击或拖拽视频到此区域进行上传"
+										/>
+									</Form.Item>
+								</div>
+								<div className="mb-0 flex-1">
+									{/* <span className="inline-block w-full h-7 my-1 rounded-lg bg-slate-100 text-center leading-7">添加附件</span> */}
+									<Form.Item
+										name={["meta", "fileIds"]}>
+										<TusUploader 
+										style={"h-64"} 
+										multiple={true} 
+										icon={<PaperClipOutlined />} 
+										description="点击或拖拽附件到此区域进行上传"
 									/>
-								</Form.Item>
-								<Form.Item
-									name={["meta", "fileIds"]}
-									className="mb-0 flex-1">
-									<TusUploader multiple={true} />
-								</Form.Item>
+									</Form.Item>
+								</div>
 							</>
-							
+
 						) : (
 							<div>
 								<Form.Item
@@ -212,7 +226,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 									]}>
 									<QuillEditor
 										style={{
-											width:"700px",
+											width: "700px",
 										}}
 									></QuillEditor>
 								</Form.Item>