rht

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">

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";
@@ -175,12 +177,13 @@ 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 ? (
 							<>
+								<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"]}
-									className="mb-0 flex-1"
 										rules={[
 											{
 												required: true,
@@ -190,13 +193,24 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 										<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"]}
-									className="mb-0 flex-1">
-									<TusUploader multiple={true} />
+										name={["meta", "fileIds"]}>
+										<TusUploader 
+										style={"h-64"} 
+										multiple={true} 
+										icon={<PaperClipOutlined />} 
+										description="点击或拖拽附件到此区域进行上传"
+									/>
 									</Form.Item>
+								</div>
 							</>
 
 						) : (
@@ -212,7 +226,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 									]}>
 									<QuillEditor
 										style={{
-											width:"700px",
+											width: "700px",
 										}}
 									></QuillEditor>
 								</Form.Item>