559 lines
20 KiB
TypeScript
559 lines
20 KiB
TypeScript
'use client';
|
||
|
||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||
import {
|
||
Trash2,
|
||
Download,
|
||
Loader2,
|
||
FolderOpen,
|
||
Folder,
|
||
FileText,
|
||
Upload,
|
||
FolderPlus,
|
||
ChevronRight,
|
||
Home,
|
||
RefreshCw,
|
||
FileImage,
|
||
FileCode,
|
||
FileArchive,
|
||
FileSpreadsheet,
|
||
} from 'lucide-react';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import remarkGfm from 'remark-gfm';
|
||
import {
|
||
browseUserFiles,
|
||
getUserFile,
|
||
getUserFileDownloadUrl,
|
||
uploadUserFile,
|
||
deleteUserFile,
|
||
createUserFileDir,
|
||
getAccessToken,
|
||
} from '@/lib/api';
|
||
import type { UserFileContent, UserFileItem } from '@/lib/api';
|
||
import { Button } from '@/components/ui/button';
|
||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||
import { type AppLocale, pickAppText } from '@/lib/i18n/core';
|
||
import { useAppI18n } from '@/lib/i18n/provider';
|
||
|
||
const LOAD_RETRY_DELAYS_MS = [0, 600, 1200];
|
||
|
||
function sleep(ms: number): Promise<void> {
|
||
return new Promise((resolve) => {
|
||
window.setTimeout(resolve, ms);
|
||
});
|
||
}
|
||
|
||
export default function FilesPage() {
|
||
const { locale } = useAppI18n();
|
||
const [items, setItems] = useState<UserFileItem[]>([]);
|
||
const [currentPath, setCurrentPath] = useState('');
|
||
const [loading, setLoading] = useState(true);
|
||
const [loadError, setLoadError] = useState<string | null>(null);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [uploadProgress, setUploadProgress] = useState(0);
|
||
const [showMkdir, setShowMkdir] = useState(false);
|
||
const [newDirName, setNewDirName] = useState('');
|
||
const [selectedFile, setSelectedFile] = useState<UserFileContent | null>(null);
|
||
const [previewLoading, setPreviewLoading] = useState(false);
|
||
const [previewError, setPreviewError] = useState<string | null>(null);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const mkdirInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const load = useCallback(async (path: string = currentPath) => {
|
||
let lastError: unknown = null;
|
||
try {
|
||
setLoading(true);
|
||
setLoadError(null);
|
||
for (const delay of LOAD_RETRY_DELAYS_MS) {
|
||
if (delay > 0) {
|
||
await sleep(delay);
|
||
}
|
||
try {
|
||
const data = await browseUserFiles(path);
|
||
setItems(data.items);
|
||
setCurrentPath(data.path);
|
||
setSelectedFile(null);
|
||
setPreviewError(null);
|
||
return;
|
||
} catch (err) {
|
||
lastError = err;
|
||
}
|
||
}
|
||
const message = lastError instanceof Error ? lastError.message : pickAppText(locale, '加载文件失败', 'Failed to load files');
|
||
setLoadError(message);
|
||
setItems([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [currentPath, locale]);
|
||
|
||
useEffect(() => {
|
||
load('');
|
||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
const navigateTo = (path: string) => {
|
||
load(path);
|
||
};
|
||
|
||
const openFile = async (item: UserFileItem) => {
|
||
if (item.type !== 'file') return;
|
||
setPreviewLoading(true);
|
||
setPreviewError(null);
|
||
try {
|
||
setSelectedFile(await getUserFile(item.path));
|
||
} catch (err: any) {
|
||
setPreviewError(err.message || pickAppText(locale, '加载文件失败', 'Failed to load file'));
|
||
setSelectedFile(null);
|
||
} finally {
|
||
setPreviewLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (item: UserFileItem) => {
|
||
const label = item.type === 'directory'
|
||
? pickAppText(locale, '文件夹', 'folder')
|
||
: pickAppText(locale, '文件', 'file');
|
||
if (!confirm(pickAppText(
|
||
locale,
|
||
`确定删除${label} "${item.name}"？${item.type === 'directory' ? '（包含所有子文件）' : ''}`,
|
||
`Delete ${label} "${item.name}"?${item.type === 'directory' ? ' (including all nested files)' : ''}`
|
||
))) {
|
||
return;
|
||
}
|
||
try {
|
||
await deleteUserFile(item.path);
|
||
setItems((prev) => prev.filter((i) => i.path !== item.path));
|
||
if (selectedFile?.path === item.path) {
|
||
setSelectedFile(null);
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleDownload = async (item: UserFileItem) => {
|
||
const url = getUserFileDownloadUrl(item.path);
|
||
const token = getAccessToken();
|
||
const headers: Record<string, string> = {};
|
||
if (token) headers['Authorization'] = `Bearer ${token}`;
|
||
|
||
try {
|
||
const res = await fetch(url, { headers });
|
||
const blob = await res.blob();
|
||
const a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = item.name;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
URL.revokeObjectURL(a.href);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = e.target.files;
|
||
if (!files || files.length === 0) return;
|
||
|
||
setUploading(true);
|
||
setUploadProgress(0);
|
||
try {
|
||
for (let i = 0; i < files.length; i++) {
|
||
await uploadUserFile(files[i], currentPath || 'uploads', (pct) => {
|
||
setUploadProgress(Math.round((i / files.length) * 100 + pct / files.length));
|
||
});
|
||
}
|
||
await load();
|
||
} catch {
|
||
// ignore
|
||
} finally {
|
||
setUploading(false);
|
||
setUploadProgress(0);
|
||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||
}
|
||
};
|
||
|
||
const handleCreateDir = async () => {
|
||
const name = newDirName.trim();
|
||
if (!name) return;
|
||
try {
|
||
const dirPath = currentPath ? `${currentPath}/${name}` : name;
|
||
await createUserFileDir(dirPath);
|
||
setShowMkdir(false);
|
||
setNewDirName('');
|
||
await load();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
// Build breadcrumbs
|
||
const breadcrumbs = currentPath ? currentPath.split('/') : [];
|
||
|
||
const formatSize = (bytes: number | null) => {
|
||
if (bytes === null || bytes === undefined) return '';
|
||
if (bytes > 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||
if (bytes > 1024) return `${(bytes / 1024).toFixed(0)} KB`;
|
||
return `${bytes} B`;
|
||
};
|
||
|
||
const formatDate = (iso: string | null | undefined) => {
|
||
if (!iso) return '';
|
||
try {
|
||
return new Date(iso).toLocaleString(locale, {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
} catch {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="mx-auto max-w-7xl p-6">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h1 className="text-2xl font-bold">{pickAppText(locale, '文件管理', 'Files')}</h1>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowMkdir(true)}
|
||
disabled={loading || !currentPath}
|
||
>
|
||
<FolderPlus className="w-4 h-4 mr-1" />
|
||
{pickAppText(locale, '新建文件夹', 'New folder')}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={uploading || !currentPath}
|
||
>
|
||
{uploading ? (
|
||
<>
|
||
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
|
||
{uploadProgress}%
|
||
</>
|
||
) : (
|
||
<>
|
||
<Upload className="w-4 h-4 mr-1" />
|
||
{pickAppText(locale, '上传', 'Upload')}
|
||
</>
|
||
)}
|
||
</Button>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
multiple
|
||
className="hidden"
|
||
onChange={handleUpload}
|
||
/>
|
||
<Button variant="outline" size="sm" onClick={() => load()} disabled={loading}>
|
||
{loading ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<RefreshCw className="w-4 h-4" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Breadcrumbs */}
|
||
<div className="flex items-center gap-1 mb-4 text-sm text-muted-foreground flex-wrap">
|
||
<button
|
||
onClick={() => navigateTo('')}
|
||
className="flex items-center gap-1 hover:text-foreground transition-colors px-1.5 py-0.5 rounded hover:bg-accent"
|
||
>
|
||
<Home className="w-3.5 h-3.5" />
|
||
{pickAppText(locale, '文件', 'Files')}
|
||
</button>
|
||
{breadcrumbs.map((segment, idx) => {
|
||
const path = breadcrumbs.slice(0, idx + 1).join('/');
|
||
const isLast = idx === breadcrumbs.length - 1;
|
||
return (
|
||
<React.Fragment key={path}>
|
||
<ChevronRight className="w-3 h-3 flex-shrink-0" />
|
||
<button
|
||
onClick={() => navigateTo(path)}
|
||
className={`px-1.5 py-0.5 rounded transition-colors ${
|
||
isLast
|
||
? 'text-foreground font-medium'
|
||
: 'hover:text-foreground hover:bg-accent'
|
||
}`}
|
||
>
|
||
{segment}
|
||
</button>
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* New directory input */}
|
||
{showMkdir && (
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Folder className="w-4 h-4 text-muted-foreground" />
|
||
<input
|
||
ref={mkdirInputRef}
|
||
type="text"
|
||
value={newDirName}
|
||
onChange={(e) => setNewDirName(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') handleCreateDir();
|
||
if (e.key === 'Escape') {
|
||
setShowMkdir(false);
|
||
setNewDirName('');
|
||
}
|
||
}}
|
||
placeholder={pickAppText(locale, '文件夹名称', 'Folder name')}
|
||
className="flex-1 px-3 py-1.5 text-sm border border-border rounded-md bg-background focus:outline-none focus:ring-1 focus:ring-ring"
|
||
autoFocus
|
||
/>
|
||
<Button size="sm" onClick={handleCreateDir}>
|
||
{pickAppText(locale, '创建', 'Create')}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
onClick={() => {
|
||
setShowMkdir(false);
|
||
setNewDirName('');
|
||
}}
|
||
>
|
||
{pickAppText(locale, '取消', 'Cancel')}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid gap-4 lg:grid-cols-[minmax(360px,440px)_minmax(0,1fr)]">
|
||
{/* File list */}
|
||
<div className="min-h-[520px] rounded-lg border border-border bg-card">
|
||
{loading && items.length === 0 ? (
|
||
<div className="flex items-center justify-center py-20 text-muted-foreground">
|
||
<Loader2 className="w-6 h-6 animate-spin" />
|
||
</div>
|
||
) : loadError ? (
|
||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||
<FolderOpen className="w-12 h-12 mb-4 opacity-50" />
|
||
<p className="text-lg font-medium">{pickAppText(locale, '加载失败', 'Failed to load')}</p>
|
||
<p className="max-w-sm text-center text-sm">{loadError}</p>
|
||
<Button className="mt-4" variant="outline" size="sm" onClick={() => load()}>
|
||
<RefreshCw className="mr-1 h-4 w-4" />
|
||
{pickAppText(locale, '重试', 'Retry')}
|
||
</Button>
|
||
</div>
|
||
) : items.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||
<FolderOpen className="w-12 h-12 mb-4 opacity-50" />
|
||
<p className="text-lg font-medium">{pickAppText(locale, '空文件夹', 'Empty folder')}</p>
|
||
<p className="text-sm">{pickAppText(locale, '点击上方"上传"或"新建文件夹"按钮开始使用', 'Use "Upload" or "New folder" above to get started')}</p>
|
||
</div>
|
||
) : (
|
||
<ScrollArea className="h-[calc(100vh-15rem)] min-h-[520px]">
|
||
<div className="space-y-1 p-2">
|
||
{items.map((item) => (
|
||
<button
|
||
key={item.path}
|
||
type="button"
|
||
className={`group flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors hover:bg-accent/30 ${
|
||
selectedFile?.path === item.path ? 'border-primary bg-accent/40' : 'border-border bg-card'
|
||
}`}
|
||
onClick={() => {
|
||
if (item.type === 'directory') {
|
||
navigateTo(item.path);
|
||
} else {
|
||
void openFile(item);
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex-shrink-0">
|
||
{item.type === 'directory' ? (
|
||
<Folder className="w-5 h-5 text-blue-500" />
|
||
) : (
|
||
<FileIcon name={item.name} contentType={item.content_type || undefined} />
|
||
)}
|
||
</div>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<div className="truncate text-sm font-medium">{item.name}</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
{item.type === 'file' && formatSize(item.size)}
|
||
{item.modified && (
|
||
<>
|
||
{item.type === 'file' && ' · '}
|
||
{formatDate(item.modified)}
|
||
</>
|
||
)}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||
{item.type === 'file' && (
|
||
<span
|
||
role="button"
|
||
tabIndex={0}
|
||
className="inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-accent"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
void handleDownload(item);
|
||
}}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
void handleDownload(item);
|
||
}
|
||
}}
|
||
title={pickAppText(locale, '下载', 'Download')}
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
</span>
|
||
)}
|
||
<span
|
||
role="button"
|
||
tabIndex={0}
|
||
className="inline-flex h-7 w-7 items-center justify-center rounded-md text-destructive hover:bg-accent hover:text-destructive"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
void handleDelete(item);
|
||
}}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
void handleDelete(item);
|
||
}
|
||
}}
|
||
title={pickAppText(locale, '删除', 'Delete')}
|
||
>
|
||
<Trash2 className="w-4 h-4" />
|
||
</span>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</ScrollArea>
|
||
)}
|
||
</div>
|
||
|
||
<FilePreviewPanel
|
||
file={selectedFile}
|
||
loading={previewLoading}
|
||
error={previewError}
|
||
formatSize={formatSize}
|
||
formatDate={formatDate}
|
||
downloadUrl={selectedFile ? getUserFileDownloadUrl(selectedFile.path) : null}
|
||
locale={locale}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FilePreviewPanel({
|
||
file,
|
||
loading,
|
||
error,
|
||
formatSize,
|
||
formatDate,
|
||
downloadUrl,
|
||
locale,
|
||
}: {
|
||
file: UserFileContent | null;
|
||
loading: boolean;
|
||
error: string | null;
|
||
formatSize: (bytes: number | null) => string;
|
||
formatDate: (iso: string | null | undefined) => string;
|
||
downloadUrl: string | null;
|
||
locale: AppLocale;
|
||
}) {
|
||
return (
|
||
<div className="min-h-[520px] rounded-lg border border-border bg-card p-4">
|
||
{loading ? (
|
||
<div className="flex h-[420px] items-center justify-center text-muted-foreground">
|
||
<Loader2 className="h-6 w-6 animate-spin" />
|
||
</div>
|
||
) : error ? (
|
||
<div className="flex h-[420px] items-center justify-center text-center text-sm text-destructive">{error}</div>
|
||
) : !file ? (
|
||
<div className="flex h-[420px] flex-col items-center justify-center text-center text-muted-foreground">
|
||
<FileText className="mb-3 h-10 w-10 opacity-50" />
|
||
<p className="text-sm font-medium">{pickAppText(locale, '点击左侧文件查看内容', 'Click a file to preview its contents')}</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
<div className="flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3">
|
||
<div className="min-w-0">
|
||
<h2 className="break-all text-base font-semibold">{file.name}</h2>
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
{formatSize(file.size)} · {formatDate(file.modified)} · {file.content_type}
|
||
{file.is_truncated ? ` · ${pickAppText(locale, '仅预览前 1MB', 'Showing first 1MB')}` : ''}
|
||
</p>
|
||
</div>
|
||
{downloadUrl && (
|
||
<Button variant="outline" size="sm" asChild>
|
||
<a href={downloadUrl}>
|
||
<Download className="mr-2 h-4 w-4" />
|
||
{pickAppText(locale, '下载', 'Download')}
|
||
</a>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{isImage(file) && downloadUrl ? (
|
||
<div className="flex max-h-[620px] items-start justify-center overflow-auto rounded-md border border-border bg-muted/20 p-3">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img src={downloadUrl} alt={file.name} className="max-h-[580px] max-w-full object-contain" />
|
||
</div>
|
||
) : file.is_binary ? (
|
||
<div className="flex h-[360px] flex-col items-center justify-center text-center text-muted-foreground">
|
||
<FileArchive className="mb-3 h-10 w-10 opacity-50" />
|
||
<p className="text-sm font-medium">{pickAppText(locale, '该文件不能直接预览', 'This file cannot be previewed')}</p>
|
||
</div>
|
||
) : isMarkdown(file) ? (
|
||
<div className="prose prose-sm max-h-[620px] max-w-none overflow-auto text-black prose-a:text-black prose-code:text-black prose-headings:text-black prose-li:text-black prose-p:text-black prose-pre:bg-muted prose-pre:text-black prose-strong:text-black [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
|
||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{file.content || ''}</ReactMarkdown>
|
||
</div>
|
||
) : (
|
||
<pre className="max-h-[620px] overflow-auto whitespace-pre-wrap rounded-md border border-border bg-background p-4 text-xs leading-5 text-black">
|
||
{file.content || ''}
|
||
</pre>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FileIcon({ name, contentType }: { name: string; contentType?: string }) {
|
||
const ext = name.split('.').pop()?.toLowerCase() || '';
|
||
const ct = contentType || '';
|
||
|
||
if (ct.startsWith('image/') || ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext)) {
|
||
return <FileImage className="w-5 h-5 text-green-500" />;
|
||
}
|
||
if (
|
||
['js', 'ts', 'tsx', 'jsx', 'py', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'css', 'html', 'json', 'yaml', 'yml', 'toml', 'md', 'sh'].includes(ext)
|
||
) {
|
||
return <FileCode className="w-5 h-5 text-orange-500" />;
|
||
}
|
||
if (['zip', 'tar', 'gz', 'bz2', 'rar', '7z', 'xz'].includes(ext)) {
|
||
return <FileArchive className="w-5 h-5 text-yellow-500" />;
|
||
}
|
||
if (['csv', 'xls', 'xlsx', 'tsv'].includes(ext)) {
|
||
return <FileSpreadsheet className="w-5 h-5 text-emerald-500" />;
|
||
}
|
||
return <FileText className="w-5 h-5 text-muted-foreground" />;
|
||
}
|
||
|
||
function isImage(file: UserFileContent): boolean {
|
||
return file.content_type.startsWith('image/');
|
||
}
|
||
|
||
function isMarkdown(file: UserFileContent): boolean {
|
||
return file.path.toLowerCase().endsWith('.md') || file.content_type.includes('markdown');
|
||
}
|