add12345

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

@@ -1,19 +1,29 @@
-import { useCallback, useState } from "react";
+// TusUploader.tsx
+import {
+	useCallback,
+	useState,
+	useEffect,
+	forwardRef,
+	useImperativeHandle,
+} from "react";
 import {
 	UploadOutlined,
 	CheckCircleOutlined,
 	DeleteOutlined,
 } from "@ant-design/icons";
 import { Upload, Progress, Button } from "antd";
-import type { UploadFile } from "antd";
 import { useTusUpload } from "@web/src/hooks/useTusUpload";
 import toast from "react-hot-toast";
-import { getCompressedImageUrl } from "@nice/utils";
+
 export interface TusUploaderProps {
 	value?: string[];
 	onChange?: (value: string[]) => void;
 }
 
+export interface TusUploaderRef {
+	reset: () => void;
+}
+
 interface UploadingFile {
 	name: string;
 	progress: number;
@@ -22,35 +32,52 @@ interface UploadingFile {
 	fileKey?: string;
 }
 
-export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
+export const TusUploader = forwardRef<TusUploaderRef, TusUploaderProps>(
+	({ value = [], onChange }, ref) => {
 		const { handleFileUpload, uploadProgress } = useTusUpload();
-	const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
+		const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>(
+			[]
+		);
 		const [completedFiles, setCompletedFiles] = useState<UploadingFile[]>(
-		() =>
+			[]
-			value?.map((fileId) => ({
+		);
+
+		// 同步父组件value到completedFiles
+		useEffect(() => {
+			setCompletedFiles(
+				value.map((fileId) => ({
 					name: `文件 ${fileId}`,
 					progress: 100,
 					status: "done" as const,
 					fileId,
-			})) || []
+				}))
 			);
-	// 恢复使用 uploadResults 状态跟踪最新结果
+		}, [value]);
-	const [uploadResults, setUploadResults] = useState<string[]>(value || []);
+
+		// 暴露重置方法
+		useImperativeHandle(ref, () => ({
+			reset: () => {
+				setCompletedFiles([]);
+				setUploadingFiles([]);
+			},
+		}));
+
 		const handleRemoveFile = useCallback(
 			(fileId: string) => {
 				setCompletedFiles((prev) =>
 					prev.filter((f) => f.fileId !== fileId)
 				);
-			// 使用函数式更新保证获取最新状态
+				onChange?.(value.filter((id) => id !== fileId));
-			setUploadResults((prev) => {
-				const newValue = prev.filter((id) => id !== fileId);
-				onChange?.(newValue); // 同步更新父组件
-				return newValue;
-			});
 			},
-		[onChange]
+			[onChange, value]
 		);
 
+		const handleRemoveUploadingFile = useCallback((fileKey: string) => {
+			setUploadingFiles((prev) =>
+				prev.filter((f) => f.fileKey !== fileKey)
+			);
+		}, []);
+
 		const handleBeforeUpload = useCallback(
 			(file: File) => {
 				const fileKey = `${file.name}-${Date.now()}`;
@@ -68,33 +95,16 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 				handleFileUpload(
 					file,
 					(result) => {
-					setCompletedFiles((prev) => [
+						const newValue = [...value, result.fileId];
-						...prev,
+						onChange?.(newValue);
-						{
-							name: file.name,
-							progress: 100,
-							status: "done",
-							fileId: result.fileId,
-						},
-					]);
-
 						setUploadingFiles((prev) =>
 							prev.filter((f) => f.fileKey !== fileKey)
 						);
-
-					// 正确的状态更新方式
-					setUploadResults((prev) => {
-						const newValue = [...prev, result.fileId];
-						onChange?.(newValue); // 传递值而非函数
-						return newValue;
-					});
 					},
 					(error) => {
 						console.error("上传错误:", error);
 						toast.error(
-						`上传失败: ${
+							`上传失败: ${error instanceof Error ? error.message : "未知错误"}`
-							error instanceof Error ? error.message : "未知错误"
-						}`
 						);
 						setUploadingFiles((prev) =>
 							prev.map((f) =>
@@ -109,7 +119,7 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 
 				return false;
 			},
-		[handleFileUpload, onChange]
+			[handleFileUpload, onChange, value]
 		);
 
 		return (
@@ -128,9 +138,7 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 					</p>
 					<p className="ant-upload-hint">支持单个或批量上传文件</p>
 
-				{/* 上传状态展示 */}
 					<div className="px-2 py-0 rounded mt-1">
-					{/* 上传中的文件 */}
 						{uploadingFiles.map((file) => (
 							<div
 								key={file.fileKey}
@@ -138,6 +146,7 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 								<div className="flex items-center gap-2">
 									<span className="text-sm">{file.name}</span>
 								</div>
+								<div className="flex items-center gap-2">
 									<Progress
 										percent={
 											file.status === "done"
@@ -153,11 +162,26 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 												? "exception"
 												: "active"
 										}
+										className="flex-1"
 									/>
+									{file.status === "error" && (
+										<Button
+											type="text"
+											danger
+											icon={<DeleteOutlined />}
+											onClick={(e) => {
+												e.stopPropagation();
+												if (file.fileKey)
+													handleRemoveUploadingFile(
+														file.fileKey
+													);
+											}}
+										/>
+									)}
+								</div>
 							</div>
 						))}
 
-					{/* 已完成的文件 */}
 						{completedFiles.map((file) => (
 							<div
 								key={file.fileId}
@@ -182,4 +206,5 @@ export const TusUploader = ({ value = [], onChange }: TusUploaderProps) => {
 				</Upload.Dragger>
 			</div>
 		);
-};
+	}
+);

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { Button, Input, Tabs } from "antd";
 import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
@@ -19,6 +19,7 @@ export default function PostCommentEditor() {
 	const [signature, setSignature] = useState<string | undefined>(undefined);
 	const [fileIds, setFileIds] = useState<string[]>([]);
 	const { create } = usePost();
+	const uploaderRef = useRef<{ reset: () => void }>(null);
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
@@ -46,7 +47,10 @@ export default function PostCommentEditor() {
 			});
 			toast.success("发布成功！");
 			setContent("");
-			setFileIds([]);
+			setFileIds([]); // 重置上传组件状态
+			// if (uploaderRef.current) {
+			// 	uploaderRef.current.reset();
+			// }
 		} catch (error) {
 			toast.error("发布失败，请稍后重试");
 			console.error("Error posting comment:", error);
@@ -86,6 +90,8 @@ export default function PostCommentEditor() {
 					<TabPane tab="附件" key="2">
 						<div className="relative rounded-xl border  border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out bg-slate-100">
 							<TusUploader
+								ref={uploaderRef}
+								value={fileIds}
 								onChange={(value) => {
 									console.log("ids", value);
 									setFileIds(value);

apps/web/src/hooks/useTusUpload.ts

@@ -45,12 +45,12 @@ export function useTusUpload() {
 		onError: (error: Error) => void,
 		fileKey: string // 添加文件唯一标识
 	) => {
-		if (!file || !file.name || !file.type) {
+		// if (!file || !file.name || !file.type) {
-			const error = new Error("不可上传该类型文件");
+		// 	const error = new Error("不可上传该类型文件");
-			setUploadError(error.message);
+		// 	setUploadError(error.message);
-			onError(error);
+		// 	onError(error);
-			return;
+		// 	return;
-		}
+		// }
 
 		setIsUploading(true);
 		setUploadProgress((prev) => ({ ...prev, [fileKey]: 0 }));