add0125-0228

apps/web/src/components/common/uploader/TusUploader.tsx

@@ -1,7 +1,196 @@
-import React, { useEffect, useState } from "react";
-import { UploadOutlined } from "@ant-design/icons";
-import { Form, Upload, message } from "antd";
+import React, { useCallback, useState } from "react";
+import {
+	UploadOutlined,
+	CheckCircleOutlined,
+	DeleteOutlined,
+} from "@ant-design/icons";
+import { Upload, message, Progress, Button } from "antd";
+import type { UploadFile } from "antd";
+import { useTusUpload } from "@web/src/hooks/useTusUpload";
 
-export const TusUploader = ({ value = [], onChange }) => {
-	return <Upload.Dragger></Upload.Dragger>;
+export interface TusUploaderProps {
+	value?: string[];
+	onChange?: (value: string[]) => void;
+}
+
+interface UploadingFile {
+	name: string;
+	progress: number;
+	status: "uploading" | "done" | "error";
+	fileId?: string;
+}
+
+export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
+	const { handleFileUpload } = useTusUpload();
+	const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
+	const [completedFiles, setCompletedFiles] = useState<UploadingFile[]>(() => 
+		value?.map(fileId => ({
+			name: `File ${fileId}`, // We could fetch the actual filename if needed
+			progress: 1,
+			status: 'done' as const,
+			fileId
+		})) || []
+	);
+	const [uploadResults, setUploadResults] = useState<string[]>(value || []);
+
+	const handleRemoveFile = useCallback(
+		(fileId: string) => {
+			setCompletedFiles((prev) =>
+				prev.filter((f) => f.fileId !== fileId)
+			);
+			const newResults = uploadResults.filter(id => id !== fileId);
+			setUploadResults(newResults);
+			onChange?.(newResults);
+		},
+		[uploadResults, onChange]
+	);
+
+	const handleChange = useCallback(
+		async (fileList: UploadFile | UploadFile[]) => {
+			const files = Array.isArray(fileList) ? fileList : [fileList];
+			console.log("files", files);
+			// 验证文件对象
+			if (!files.every((f) => f instanceof File)) {
+				message.error("Invalid file format");
+				return false;
+			}
+
+			const newFiles: UploadingFile[] = files.map((f) => ({
+				name: f.name,
+				progress: 0,
+				status: "uploading" as const,
+			}));
+			setUploadingFiles((prev) => [...prev, ...newFiles]);
+			const newUploadResults: string[] = [];
+
+			try {
+				for (const [index, f] of files.entries()) {
+					if (!f) {
+						throw new Error(`File ${f.name} is invalid`);
+					}
+
+					const fileId = await new Promise<string>(
+						(resolve, reject) => {
+							handleFileUpload(
+								f as File,
+								(result) => {
+									console.log("Upload success:", result);
+									const completedFile = {
+										name: f.name,
+										progress: 1,
+										status: "done" as const,
+										fileId: result.fileId,
+									};
+									setCompletedFiles((prev) => [
+										...prev,
+										completedFile,
+									]);
+									setUploadingFiles((prev) =>
+										prev.filter((_, i) => i !== index)
+									);
+									resolve(result.fileId);
+								},
+								(error) => {
+									console.error("Upload error:", error);
+									reject(error);
+								}
+							);
+						}
+					);
+					newUploadResults.push(fileId);
+				}
+
+				// Update with all uploaded files
+				const newValue = Array.from(new Set([...uploadResults, ...newUploadResults]));
+				setUploadResults(newValue);
+				onChange?.(newValue);
+				message.success(`${files.length} files uploaded successfully`);
+			} catch (error) {
+				console.error("Upload error details:", error);
+				message.error(
+					`Upload failed: ${error instanceof Error ? error.message : "Unknown error"}`
+				);
+				setUploadingFiles((prev) =>
+					prev.map((f) => ({ ...f, status: "error" }))
+				);
+			}
+
+			return false;
+		},
+		[uploadResults, onChange, handleFileUpload]
+	);
+
+	return (
+		<div className="space-y-4">
+			<Upload.Dragger
+				name="files"
+				multiple
+				showUploadList={false}
+				beforeUpload={handleChange}
+				style={{
+					border: "2px dashed #1677ff",
+					borderRadius: "8px",
+					backgroundColor: "#f0f8ff",
+				}}>
+				<p className="ant-upload-drag-icon">
+					<UploadOutlined />
+				</p>
+				<p className="ant-upload-text">
+					Click or drag file to this area to upload
+				</p>
+				<p className="ant-upload-hint">
+					Support for a single or bulk upload of files
+				</p>
+			</Upload.Dragger>
+
+			{/* Uploading Files */}
+			{uploadingFiles.length > 0 && (
+				<div className="space-y-2 p-4 border rounded">
+					<div className="font-medium">Uploading Files</div>
+					{uploadingFiles.map((file, index) => (
+						<div key={index} className="flex flex-col gap-1">
+							<div className="flex items-center gap-2">
+								<div className="text-sm">{file.name}</div>
+							</div>
+							<Progress
+								percent={Math.round(file.progress * 100)}
+								status={
+									file.status === "error"
+										? "exception"
+										: file.status === "done"
+											? "success"
+											: "active"
+								}
+							/>
+						</div>
+					))}
+				</div>
+			)}
+
+			{/* Completed Files */}
+			{completedFiles.length > 0 && (
+				<div className="space-y-2 p-4 border rounded">
+					<div className="font-medium">Uploaded Files</div>
+					{completedFiles.map((file, index) => (
+						<div
+							key={index}
+							className="flex items-center justify-between gap-2 py-2">
+							<div className="flex items-center gap-2">
+								<CheckCircleOutlined className="text-green-500" />
+								<div className="text-sm">{file.name}</div>
+							</div>
+							<Button
+								type="text"
+								danger
+								icon={<DeleteOutlined />}
+								onClick={() =>
+									file.fileId && handleRemoveFile(file.fileId)
+								}
+							/>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
 };

apps/web/src/components/models/post/detail/PostCommentEditor.tsx

@@ -14,6 +14,7 @@ export default function PostCommentEditor() {
 	const { post } = useContext(PostDetailContext);
 	const [content, setContent] = useState("");
 	const [isPreview, setIsPreview] = useState(false);
+	const [fileIds, setFileIds] = useState<string[]>([]);
 	const { create } = usePost();
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
@@ -26,8 +27,14 @@ export default function PostCommentEditor() {
 			await create.mutateAsync({
 				data: {
 					type: PostType.POST_COMMENT,
+
 					parentId: post?.id,
 					content: content,
+					resources: {
+						connect: fileIds.filter(Boolean).map((id) => ({
+							fileId: id,
+						})),
+					},
 				},
 			});
 			toast.success("发布成功！");
@@ -83,7 +90,10 @@ export default function PostCommentEditor() {
 					)}
 				</div>
 
-				<TusUploader></TusUploader>
+				<TusUploader
+					onChange={(value) => {
+						setFileIds(value);
+					}}></TusUploader>
 
 				<div className="flex items-center justify-end">
 					<motion.div

apps/web/src/components/models/post/editor/context/LetterEditorContext.tsx

@@ -46,7 +46,12 @@ export function LetterFormProvider({
 			const result = await create.mutateAsync({
 				data: {
 					type: PostType.POST,
-					termId: termId,
+
+					terms: {
+						connect: [termId].filter(Boolean).map((id) => ({
+							id,
+						})),
+					},
 					receivers: {
 						connect: [receiverId].filter(Boolean).map((id) => ({
 							id,
@@ -57,8 +62,10 @@ export function LetterFormProvider({
 					...data,
 					resources: data.resources?.length
 						? {
-								connect: data.resources.map((id) => ({
-									id,
+								connect: (
+									data.resources?.filter(Boolean) || []
+								).map((fileId) => ({
+									fileId,
 								})),
 							}
 						: undefined,

apps/web/src/components/models/post/editor/form/LetterBasicForm.tsx

@@ -11,6 +11,7 @@ import {
 
 import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
 import { PostBadge } from "../../detail/badge/PostBadge";
+import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
 
 export function LetterBasicForm() {
 	const { onSubmit, receiverId, termId, form } = useLetterEditor();
@@ -132,8 +133,27 @@ export function LetterBasicForm() {
 						</div>
 					</Form.Item>
 				</div>
-
-			
+				{/* 内容输入框 */}
+				<div className="space-y-2">
+					<Form.Item
+						label={
+							<span className="block mb-1">
+								<FileTextOutlined className=" mr-2 text-primary" />
+								附件
+							</span>
+						}
+						name="resources"
+						labelCol={{ span: 24 }}
+						wrapperCol={{ span: 24 }}>
+						<div className="relative rounded-lg border border-slate-200 bg-white shadow-sm">
+							<TusUploader
+								onChange={(resources) =>
+									form.setFieldValue("resources", resources)
+								}
+							/>
+						</div>
+					</Form.Item>
+				</div>
 
 				<div className="flex flex-col sm:flex-row items-start sm:items-center justify-end gap-4 border-t border-secondary-100 pt-4">
 					<Form.Item

apps/web/src/hooks/useTusUpload.ts

@@ -26,10 +26,19 @@ export function useTusUpload() {
 		onSuccess: (result: UploadResult) => void,
 		onError: (error: Error) => void
 	) => {
+		if (!file || !file.name || !file.type) {
+			const error = new Error('Invalid file provided');
+			setUploadError(error.message);
+			onError(error);
+			return;
+		}
+
 		setIsUploading(true);
 		setProgress(0);
 		setUploadError(null);
-		const upload = new tus.Upload(file, {
+		
+		try {
+			const upload = new tus.Upload(file, {
 			endpoint: "http://localhost:3000/upload",
 			retryDelays: [0, 1000, 3000, 5000],
 			metadata: {
@@ -73,7 +82,14 @@ export function useTusUpload() {
 			},
 		});
 		upload.start();
+		} catch (error) {
+			const err = error instanceof Error ? error : new Error("Upload failed");
+			setIsUploading(false);
+			setUploadError(err.message);
+			onError(err);
+		}
 	};
+
 	return {
 		progress,
 		isUploading,

packages/common/prisma/schema.prisma

@@ -27,7 +27,8 @@ model Taxonomy {
 model Term {
     id          String    @id @default(cuid())
     name        String
-    posts       Post[]
+    // posts       Post[]
+    posts     Post[]   @relation("post_term")
     taxonomy    Taxonomy? @relation(fields: [taxonomyId], references: [id])
     taxonomyId  String?   @map("taxonomy_id")
     order       Float?    @map("order")
@@ -193,8 +194,10 @@ model Post {
     content String? // 帖子内容，可为空
 
     domainId  String?   @map("domain_id")
-    term      Term?     @relation(fields: [termId], references: [id])
-    termId    String?   @map("term_id")
+    // term      Term?     @relation(fields: [termId], references: [id])
+    // termId    String?   @map("term_id")
+     // 添加多对多关系
+    terms     Term[]    @relation("post_term")
     // 日期时间类型字段
     createdAt DateTime  @default(now()) @map("created_at")
     updatedAt DateTime  @map("updated_at")

packages/common/src/select.ts

@@ -12,16 +12,10 @@ export const postDetailSelect: Prisma.PostSelect = {
 	resources: true,
 	createdAt: true,
 	updatedAt: true,
-	termId: true,
-	term: {
+	
+	terms: {
 		include: {
-			taxonomy: {
-				select: {
-					id: true,
-					slug: true,
-					name: true,
-				},
-			},
+			
 		},
 	},
 	authorId: true,