work-agent 0.1.0

package/app/my/files/page.tsx

@@ -0,0 +1,511 @@
+'use client';
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+	Upload,
+	Download,
+	Trash2,
+	FileIcon,
+	Search,
+	Share2,
+	Loader2,
+	HardDrive,
+	Image,
+	FileText,
+	FileCode,
+	FileArchive,
+	Film,
+	Music,
+	File,
+	Eye,
+	Copy,
+	Check,
+	X,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+interface FileMetadata {
+	size: number;
+	mimeType: string;
+	md5?: string;
+	storageKey: string;
+	storageType: string;
+	originalName?: string;
+}
+
+interface FileItem {
+	id: string;
+	title: string;
+	author: string;
+	createdAt: string;
+	updatedAt: string;
+	fileMetadata: FileMetadata | null;
+	isPublic: boolean;
+	content?: string;
+}
+
+function formatFileSize(bytes: number): string {
+	if (bytes === 0) return '0 B';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+function formatDate(dateStr: string): string {
+	const date = new Date(dateStr);
+	return date.toLocaleDateString('zh-CN', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit',
+	});
+}
+
+function getFileIcon(mimeType: string) {
+	if (mimeType.startsWith('image/')) return Image;
+	if (mimeType.startsWith('video/')) return Film;
+	if (mimeType.startsWith('audio/')) return Music;
+	if (mimeType.includes('pdf')) return FileText;
+	if (mimeType.includes('word') || mimeType.includes('document')) return FileText;
+	if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return FileText;
+	if (mimeType.includes('zip') || mimeType.includes('tar') || mimeType.includes('gzip')) return FileArchive;
+	if (mimeType.includes('javascript') || mimeType.includes('json') || mimeType.includes('html') || mimeType.includes('css')) return FileCode;
+	return File;
+}
+
+function getMimeTypeCategory(mimeType: string): string {
+	if (mimeType.startsWith('image/')) return '图片';
+	if (mimeType.startsWith('video/')) return '视频';
+	if (mimeType.startsWith('audio/')) return '音频';
+	if (mimeType.includes('pdf')) return 'PDF';
+	if (mimeType.includes('word') || mimeType.includes('document')) return '文档';
+	if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return '表格';
+	if (mimeType.includes('zip') || mimeType.includes('tar') || mimeType.includes('gzip')) return '压缩包';
+	if (mimeType.includes('javascript') || mimeType.includes('json') || mimeType.includes('html') || mimeType.includes('css')) return '代码';
+	if (mimeType.startsWith('text/')) return '文本';
+	return '文件';
+}
+
+function isTextFile(mimeType: string): boolean {
+	return mimeType.startsWith('text/') ||
+		mimeType === 'application/json' ||
+		mimeType === 'application/xml' ||
+		mimeType === 'application/javascript' ||
+		mimeType.includes('json') ||
+		mimeType.includes('xml') ||
+		mimeType.includes('javascript') ||
+		mimeType.includes('html') ||
+		mimeType.includes('css') ||
+		mimeType === 'application/octet-stream';
+}
+
+export default function MyFilesPage() {
+	const router = useRouter();
+	const [files, setFiles] = useState<FileItem[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [uploading, setUploading] = useState(false);
+	const [userId, setUserId] = useState<string>('');
+	const [searchQuery, setSearchQuery] = useState('');
+	const [totalSize, setTotalSize] = useState('0 B');
+	const [total, setTotal] = useState(0);
+	const [dragOver, setDragOver] = useState(false);
+	const [previewFile, setPreviewFile] = useState<FileItem | null>(null);
+	const [previewContent, setPreviewContent] = useState<string>('');
+	const [previewLoading, setPreviewLoading] = useState(false);
+	const [shareCopied, setShareCopied] = useState(false);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const uid = localStorage.getItem('userId');
+		if (!uid) {
+			router.push('/login');
+			return;
+		}
+		setUserId(uid);
+		fetchFiles(uid);
+	}, [router]);
+
+	const fetchFiles = async (uid: string, search?: string) => {
+		try {
+			setLoading(true);
+			const params = new URLSearchParams({ userId: uid });
+			if (search) params.set('search', search);
+			
+			const res = await fetch(`/api/my/files?${params}`);
+			if (res.ok) {
+				const data = await res.json();
+				setFiles(data.files || []);
+				setTotalSize(data.totalSizeFormatted || '0 B');
+				setTotal(data.total || 0);
+			}
+		} catch (error) {
+			console.error('Failed to fetch files:', error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handleSearch = useCallback((query: string) => {
+		setSearchQuery(query);
+		if (userId) {
+			fetchFiles(userId, query);
+		}
+	}, [userId]);
+
+	const handleUpload = async (file: File) => {
+		if (!userId) return;
+
+		setUploading(true);
+		try {
+			const formData = new FormData();
+			formData.append('userId', userId);
+			formData.append('file', file);
+
+			const res = await fetch('/api/my/files', {
+				method: 'POST',
+				body: formData,
+			});
+
+			if (!res.ok) {
+				const error = await res.json();
+				alert(error.error || '上传失败');
+				return;
+			}
+
+			fetchFiles(userId, searchQuery);
+		} catch (error) {
+			console.error('Upload error:', error);
+			alert('上传失败');
+		} finally {
+			setUploading(false);
+		}
+	};
+
+	const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			handleUpload(file);
+		}
+		e.target.value = '';
+	};
+
+	const handleDrop = (e: React.DragEvent) => {
+		e.preventDefault();
+		setDragOver(false);
+		const file = e.dataTransfer.files[0];
+		if (file) {
+			handleUpload(file);
+		}
+	};
+
+	const handleDragOver = (e: React.DragEvent) => {
+		e.preventDefault();
+		setDragOver(true);
+	};
+
+	const handleDragLeave = () => {
+		setDragOver(false);
+	};
+
+	const handleDownload = (file: FileItem) => {
+		const url = `/api/my/files/${file.id}?userId=${userId}&download=true`;
+		window.open(url, '_blank');
+	};
+
+	const handlePreview = async (file: FileItem) => {
+		setPreviewFile(file);
+		setPreviewContent('');
+		
+		if (file.fileMetadata && isTextFile(file.fileMetadata.mimeType)) {
+			setPreviewLoading(true);
+			try {
+				const res = await fetch(`/api/my/files/${file.id}?userId=${userId}`);
+				if (res.ok) {
+					const text = await res.text();
+					setPreviewContent(text);
+				}
+			} catch (error) {
+				console.error('Failed to fetch file content:', error);
+			} finally {
+				setPreviewLoading(false);
+			}
+		}
+	};
+
+	const handleDelete = async (file: FileItem) => {
+		if (!confirm(`确定删除文件 "${file.title}" 吗？`)) return;
+
+		try {
+			const res = await fetch(`/api/my/files?userId=${userId}&fileId=${file.id}`, {
+				method: 'DELETE',
+			});
+
+			if (!res.ok) {
+				const error = await res.json();
+				alert(error.error || '删除失败');
+				return;
+			}
+
+			setFiles(prev => prev.filter(f => f.id !== file.id));
+		} catch (error) {
+			console.error('Delete error:', error);
+			alert('删除失败');
+		}
+	};
+
+	const handleTogglePublic = async (file: FileItem) => {
+		try {
+			const res = await fetch('/api/my/files', {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					userId,
+					fileId: file.id,
+					isPublic: !file.isPublic,
+				}),
+			});
+
+			if (!res.ok) {
+				const error = await res.json();
+				alert(error.error || '更新失败');
+				return;
+			}
+
+			setFiles(prev => prev.map(f =>
+				f.id === file.id ? { ...f, isPublic: !f.isPublic } : f
+			));
+		} catch (error) {
+			console.error('Update error:', error);
+			alert('更新失败');
+		}
+	};
+
+	const handleCopyShareLink = async (file: FileItem) => {
+		const shareUrl = `${window.location.origin}/share/file/${file.id}`;
+		await navigator.clipboard.writeText(shareUrl);
+		setShareCopied(true);
+		setTimeout(() => setShareCopied(false), 2000);
+	};
+
+	return (
+		<div className="h-full overflow-auto bg-gray-50">
+			<div className="max-w-6xl mx-auto p-6">
+				<div className="flex items-center justify-between mb-6">
+					<div>
+						<h1 className="text-2xl font-bold text-gray-900">我的文件</h1>
+						<p className="text-sm text-gray-500 mt-1">
+							共 {total} 个文件，总大小 {totalSize}
+						</p>
+					</div>
+					<div className="flex items-center gap-3">
+						<div className="relative">
+							<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+							<Input
+								placeholder="搜索文件..."
+								value={searchQuery}
+								onChange={(e) => handleSearch(e.target.value)}
+								className="pl-10 w-64"
+							/>
+						</div>
+						<Button onClick={() => fileInputRef.current?.click()} disabled={uploading}>
+							{uploading ? (
+								<Loader2 className="h-4 w-4 mr-2 animate-spin" />
+							) : (
+								<Upload className="h-4 w-4 mr-2" />
+							)}
+							{uploading ? '上传中...' : '上传文件'}
+						</Button>
+						<input
+							ref={fileInputRef}
+							type="file"
+							className="hidden"
+							onChange={handleFileSelect}
+						/>
+					</div>
+				</div>
+
+				<div
+					className={cn(
+						"border-2 border-dashed rounded-lg p-8 mb-6 text-center transition-colors",
+						dragOver ? "border-primary bg-primary/5" : "border-gray-200"
+					)}
+					onDrop={handleDrop}
+					onDragOver={handleDragOver}
+					onDragLeave={handleDragLeave}
+				>
+					<HardDrive className="h-12 w-12 mx-auto text-gray-400 mb-3" />
+					<p className="text-gray-600 mb-1">拖拽文件到此处上传</p>
+					<p className="text-sm text-gray-400">支持图片、文档、代码等，最大 50MB</p>
+				</div>
+
+				{loading ? (
+					<div className="flex items-center justify-center py-12">
+						<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+					</div>
+				) : files.length === 0 ? (
+					<Card>
+						<CardContent className="py-12 text-center">
+							<FileIcon className="h-12 w-12 mx-auto text-gray-400 mb-3" />
+							<p className="text-gray-600">暂无文件</p>
+							<p className="text-sm text-gray-400 mt-1">点击上方按钮或拖拽文件上传</p>
+						</CardContent>
+					</Card>
+				) : (
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+						{files.map((file) => {
+							const Icon = file.fileMetadata ? getFileIcon(file.fileMetadata.mimeType) : File;
+							const category = file.fileMetadata ? getMimeTypeCategory(file.fileMetadata.mimeType) : '文件';
+							
+							return (
+								<Card key={file.id} className="hover:shadow-md transition-shadow">
+									<CardContent className="p-4">
+										<div className="flex items-start gap-3">
+											<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+												<Icon className="h-6 w-6 text-primary" />
+											</div>
+											<div className="flex-1 min-w-0">
+												<div className="flex items-center gap-2">
+													<p className="font-medium truncate" title={file.title}>
+														{file.title}
+													</p>
+													{file.isPublic && (
+														<Badge variant="secondary" className="text-xs">公开</Badge>
+													)}
+												</div>
+												<div className="flex items-center gap-2 mt-1 text-xs text-gray-500">
+													<Badge variant="outline" className="text-xs">{category}</Badge>
+													<span>{formatFileSize(file.fileMetadata?.size || 0)}</span>
+												</div>
+												<p className="text-xs text-gray-400 mt-1">
+													{formatDate(file.createdAt)}
+												</p>
+											</div>
+										</div>
+										
+										<div className="flex items-center gap-2 mt-4 pt-3 border-t">
+											<Button
+												variant="ghost"
+												size="sm"
+												onClick={() => handlePreview(file)}
+												className="flex-1"
+											>
+												<Eye className="h-4 w-4 mr-1" />
+												预览
+											</Button>
+											<Button
+												variant="ghost"
+												size="sm"
+												onClick={() => handleDownload(file)}
+												className="flex-1"
+											>
+												<Download className="h-4 w-4 mr-1" />
+												下载
+											</Button>
+											<Button
+												variant="ghost"
+												size="sm"
+												onClick={() => handleTogglePublic(file)}
+												title={file.isPublic ? '设为私密' : '设为公开'}
+											>
+												<Share2 className={cn("h-4 w-4", file.isPublic && "text-primary")} />
+											</Button>
+											<Button
+												variant="ghost"
+												size="sm"
+												onClick={() => handleDelete(file)}
+												className="text-destructive hover:text-destructive"
+											>
+												<Trash2 className="h-4 w-4" />
+											</Button>
+										</div>
+									</CardContent>
+								</Card>
+							);
+						})}
+					</div>
+				)}
+			</div>
+
+			<Dialog open={!!previewFile} onOpenChange={() => { setPreviewFile(null); setPreviewContent(''); }}>
+				<DialogContent className="max-w-2xl">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2">
+							{previewFile?.fileMetadata && (
+								<>
+									{(() => {
+										const Icon = getFileIcon(previewFile.fileMetadata.mimeType);
+										return <Icon className="h-5 w-5" />;
+									})()}
+								</>
+							)}
+							{previewFile?.title}
+						</DialogTitle>
+						<DialogDescription>
+							{previewFile?.fileMetadata && (
+								<span>
+									{getMimeTypeCategory(previewFile.fileMetadata.mimeType)} · {formatFileSize(previewFile.fileMetadata.size)}
+								</span>
+							)}
+						</DialogDescription>
+					</DialogHeader>
+					
+					{previewFile?.fileMetadata?.mimeType.startsWith('image/') && (
+						<div className="relative bg-gray-100 rounded-lg overflow-hidden">
+							<img
+								src={`/api/my/files/${previewFile.id}?userId=${userId}`}
+								alt={previewFile.title}
+								className="max-w-full max-h-96 mx-auto object-contain"
+							/>
+						</div>
+					)}
+
+					{previewLoading && (
+						<div className="flex items-center justify-center py-8">
+							<Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+						</div>
+					)}
+
+					{!previewLoading && previewContent && (
+						<div className="bg-gray-50 rounded-lg p-4 max-h-80 overflow-auto">
+							<pre className="text-sm whitespace-pre-wrap font-mono">{previewContent}</pre>
+						</div>
+					)}
+
+					<div className="flex items-center justify-between pt-4 border-t">
+						<div className="text-sm text-gray-500">
+							{previewFile?.isPublic ? (
+								<Badge variant="secondary">公开分享</Badge>
+							) : (
+								<Badge variant="outline">私密</Badge>
+							)}
+						</div>
+						<div className="flex items-center gap-2">
+							<Button variant="outline" size="sm" onClick={() => previewFile && handleCopyShareLink(previewFile)}>
+								{shareCopied ? <Check className="h-4 w-4 mr-1" /> : <Copy className="h-4 w-4 mr-1" />}
+								{shareCopied ? '已复制' : '复制分享链接'}
+							</Button>
+							<Button size="sm" onClick={() => previewFile && handleDownload(previewFile)}>
+								<Download className="h-4 w-4 mr-1" />
+								下载
+							</Button>
+						</div>
+					</div>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+}