fenghuo/apps/web/components/FileUpload.tsx

'use client';
import React, { useCallback, useState } from 'react';
import { useTusUpload } from '../hooks/useTusUpload';

interface UploadedFile {
	fileId: string;
	fileName: string;
	url: string;
}

export function FileUpload() {
	const { uploadProgress, isUploading, uploadError, handleFileUpload, getFileUrlByFileId, serverUrl } = useTusUpload();

	const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
	const [dragOver, setDragOver] = useState(false);

	// 处理文件选择
	const handleFileSelect = useCallback(
		async (files: FileList | null) => {
			if (!files || files.length === 0) return;

			for (let i = 0; i < files.length; i++) {
				const file = files[i];
				if (!file) continue;
				try {
					const result = await handleFileUpload(
						file,
						(result) => {
							console.log('Upload success:', result);
							setUploadedFiles((prev) => [
								...prev,
								{
									fileId: result.fileId,
									fileName: result.fileName,
									url: result.url,
								},
							]);
						},
						(error) => {
							console.error('Upload error:', error);
						},
					);
				} catch (error) {
					console.error('Upload failed:', error);
				}
			}
		},
		[handleFileUpload],
	);

	// 处理拖拽上传
	const handleDrop = useCallback(
		(e: React.DragEvent) => {
			e.preventDefault();
			setDragOver(false);
			handleFileSelect(e.dataTransfer.files);
		},
		[handleFileSelect],
	);

	const handleDragOver = useCallback((e: React.DragEvent) => {
		e.preventDefault();
		setDragOver(true);
	}, []);

	const handleDragLeave = useCallback((e: React.DragEvent) => {
		e.preventDefault();
		setDragOver(false);
	}, []);

	// 处理文件输入
	const handleInputChange = useCallback(
		(e: React.ChangeEvent<HTMLInputElement>) => {
			handleFileSelect(e.target.files);
		},
		[handleFileSelect],
	);

	// 复制链接到剪贴板
	const copyToClipboard = useCallback(async (url: string) => {
		try {
			await navigator.clipboard.writeText(url);
			alert('链接已复制到剪贴板！');
		} catch (error) {
			console.error('Failed to copy:', error);
		}
	}, []);

	return (
		<div className="max-w-2xl mx-auto p-6">
			<h2 className="text-2xl font-bold mb-6">文件上传</h2>
			{/* 服务器信息 */}
			<div className="mb-4 p-3 bg-gray-100 rounded-lg">
				<p className="text-sm text-gray-600">
					服务器地址: <span className="font-mono">{serverUrl}</span>
				</p>
			</div>

			{/* 拖拽上传区域 */}
			<div
				className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
					dragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
				}`}
				onDrop={handleDrop}
				onDragOver={handleDragOver}
				onDragLeave={handleDragLeave}
			>
				<div className="space-y-4">
					<div className="text-gray-500">
						<svg className="mx-auto h-12 w-12" stroke="currentColor" fill="none" viewBox="0 0 48 48">
							<path
								d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
								strokeWidth="2"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
						</svg>
					</div>
					<div>
						<p className="text-lg font-medium text-gray-900">拖拽文件到这里，或者</p>
						<label className="cursor-pointer">
							<span className="mt-2 block text-sm font-medium text-blue-600 hover:text-blue-500">点击选择文件</span>
							<input type="file" multiple className="hidden" onChange={handleInputChange} disabled={isUploading} />
						</label>
					</div>
					<p className="text-xs text-gray-500">支持多文件上传，TUS 协议支持断点续传</p>
				</div>
			</div>

			{/* 上传进度 */}
			{isUploading && (
				<div className="mt-4 p-4 bg-blue-50 rounded-lg">
					<div className="flex items-center justify-between mb-2">
						<span className="text-sm font-medium text-blue-900">上传中...</span>
						<span className="text-sm text-blue-600">{uploadProgress}%</span>
					</div>
					<div className="w-full bg-blue-200 rounded-full h-2">
						<div
							className="bg-blue-600 h-2 rounded-full transition-all duration-300"
							style={{ width: `${uploadProgress}%` }}
						/>
					</div>
				</div>
			)}

			{/* 错误信息 */}
			{uploadError && (
				<div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
					<p className="text-sm text-red-600">
						<span className="font-medium">上传失败：</span>
						{uploadError}
					</p>
				</div>
			)}

			{/* 已上传文件列表 */}
			{uploadedFiles.length > 0 && (
				<div className="mt-6">
					<h3 className="text-lg font-medium mb-4">已上传文件</h3>
					<div className="space-y-3">
						{uploadedFiles.map((file, index) => (
							<div
								key={index}
								className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-lg"
							>
								<div className="flex items-center space-x-3">
									<div className="flex-shrink-0">
										<svg className="h-8 w-8 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
											<path
												strokeLinecap="round"
												strokeLinejoin="round"
												strokeWidth="2"
												d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
											/>
										</svg>
									</div>
									<div>
										<p className="text-sm font-medium text-gray-900">{file.fileName}</p>
										<p className="text-xs text-gray-500">文件ID: {file.fileId}</p>
									</div>
								</div>
								<div className="flex items-center space-x-2">
									<a
										href={file.url}
										target="_blank"
										rel="noopener noreferrer"
										className="text-blue-600 hover:text-blue-800 text-sm font-medium"
									>
										查看
									</a>
									<button
										onClick={() => copyToClipboard(file.url)}
										className="text-gray-600 hover:text-gray-800 text-sm font-medium"
									>
										复制链接
									</button>
								</div>
							</div>
						))}
					</div>
				</div>
			)}

			{/* 使用说明 */}
			<div className="mt-8 p-4 bg-gray-50 rounded-lg">
				<h4 className="text-sm font-medium text-gray-900 mb-2">使用说明：</h4>
				<ul className="text-xs text-gray-600 space-y-1">
					<li>• 支持拖拽和点击上传</li>
					<li>• 使用 TUS 协议，支持大文件和断点续传</li>
					<li>• 上传完成后可以通过链接直接访问文件</li>
					<li>• 图片和 PDF 会在浏览器中直接显示</li>
					<li>• 其他文件类型会触发下载</li>
				</ul>
			</div>
		</div>
	);
}