634 lines
30 KiB
TypeScript
634 lines
30 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import { AnimatePresence, motion } from 'motion/react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import {
|
||
ChevronRight,
|
||
Folder,
|
||
Download,
|
||
Upload,
|
||
Plus,
|
||
MoreVertical,
|
||
Copy,
|
||
Share2,
|
||
X,
|
||
Edit2,
|
||
Trash2,
|
||
FolderPlus,
|
||
ChevronLeft,
|
||
RotateCcw,
|
||
} from 'lucide-react';
|
||
|
||
import { NetdiskPathPickerModal } from '@/src/components/ui/NetdiskPathPickerModal';
|
||
import { Button } from '@/src/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/card';
|
||
import { FileTypeIcon, getFileTypeTheme } from '@/src/components/ui/FileTypeIcon';
|
||
import { Input } from '@/src/components/ui/input';
|
||
import { ApiError, apiBinaryUploadRequest, apiDownload, apiRequest, apiUploadRequest } from '@/src/lib/api';
|
||
import { copyFileToNetdiskPath } from '@/src/lib/file-copy';
|
||
import { moveFileToNetdiskPath } from '@/src/lib/file-move';
|
||
import { resolveStoredFileType, type FileTypeKind } from '@/src/lib/file-type';
|
||
import { readCachedValue, writeCachedValue } from '@/src/lib/cache';
|
||
import { createFileShareLink, getCurrentFileShareUrl } from '@/src/lib/file-share';
|
||
import { ellipsizeFileName } from '@/src/lib/file-name';
|
||
import { getFilesLastPathCacheKey, getFilesListCacheKey } from '@/src/lib/page-cache';
|
||
import type { DownloadUrlResponse, FileMetadata, InitiateUploadResponse, PageResponse } from '@/src/lib/types';
|
||
import { cn } from '@/src/lib/utils';
|
||
|
||
// Imports directly from the original pages directories
|
||
import {
|
||
buildUploadProgressSnapshot,
|
||
cancelUploadTask,
|
||
createUploadMeasurement,
|
||
createUploadTasks,
|
||
completeUploadTask,
|
||
failUploadTask,
|
||
prepareUploadTaskForCompletion,
|
||
prepareFolderUploadEntries,
|
||
prepareUploadFile,
|
||
shouldUploadEntriesSequentially,
|
||
type PendingUploadEntry,
|
||
type UploadMeasurement,
|
||
type UploadTask,
|
||
} from '@/src/pages/files-upload';
|
||
import {
|
||
registerFilesUploadTaskCanceler,
|
||
replaceFilesUploads,
|
||
setFilesUploadPanelOpen,
|
||
unregisterFilesUploadTaskCanceler,
|
||
updateFilesUploadTask,
|
||
} from '@/src/pages/files-upload-store';
|
||
import {
|
||
clearSelectionIfDeleted,
|
||
getNextAvailableName,
|
||
getActionErrorMessage,
|
||
removeUiFile,
|
||
replaceUiFile,
|
||
syncSelectedFile,
|
||
} from '@/src/pages/files-state';
|
||
import {
|
||
toDirectoryPath,
|
||
} from '@/src/pages/files-tree';
|
||
import { RECYCLE_BIN_RETENTION_DAYS, RECYCLE_BIN_ROUTE } from '@/src/pages/recycle-bin-state';
|
||
|
||
function sleep(ms: number) {
|
||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||
}
|
||
|
||
function toBackendPath(pathParts: string[]) {
|
||
return toDirectoryPath(pathParts);
|
||
}
|
||
|
||
function formatFileSize(size: number) {
|
||
if (size <= 0) return '—';
|
||
const units = ['B', 'KB', 'MB', 'GB'];
|
||
const index = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1);
|
||
const value = size / 1024 ** index;
|
||
return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
|
||
}
|
||
|
||
function formatDateTime(value: string) {
|
||
const date = new Date(value);
|
||
return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
function toUiFile(file: FileMetadata) {
|
||
const resolvedType = resolveStoredFileType({
|
||
filename: file.filename,
|
||
contentType: file.contentType,
|
||
directory: file.directory,
|
||
});
|
||
|
||
return {
|
||
id: file.id,
|
||
name: file.filename,
|
||
type: resolvedType.kind,
|
||
typeLabel: resolvedType.label,
|
||
size: file.directory ? '—' : formatFileSize(file.size),
|
||
originalSize: file.directory ? 0 : file.size,
|
||
modified: formatDateTime(file.createdAt),
|
||
};
|
||
}
|
||
|
||
interface UiFile {
|
||
id: FileMetadata['id'];
|
||
modified: string;
|
||
name: string;
|
||
size: string;
|
||
originalSize: number;
|
||
type: FileTypeKind;
|
||
typeLabel: string;
|
||
}
|
||
|
||
type NetdiskTargetAction = 'move' | 'copy';
|
||
|
||
export function getMobileFilesLayoutClassNames() {
|
||
return {
|
||
root: 'relative flex min-h-full flex-col text-white bg-transparent',
|
||
toolbar: 'sticky top-0 z-30 flex-none px-4 py-2',
|
||
toolbarInner: 'glass-panel flex items-center gap-3 rounded-[22px] border border-white/10 bg-[#0f172a]/72 px-3.5 py-2.5 shadow-md backdrop-blur-2xl',
|
||
list: 'relative z-10 flex-1 px-3 pt-2 pb-4 space-y-1.5',
|
||
};
|
||
}
|
||
|
||
export default function MobileFiles() {
|
||
const navigate = useNavigate();
|
||
const initialPath = readCachedValue<string[]>(getFilesLastPathCacheKey()) ?? [];
|
||
const initialCachedFiles = readCachedValue<FileMetadata[]>(getFilesListCacheKey(toBackendPath(initialPath))) ?? [];
|
||
|
||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||
const directoryInputRef = useRef<HTMLInputElement | null>(null);
|
||
const uploadMeasurementsRef = useRef(new Map<string, UploadMeasurement>());
|
||
|
||
const [currentPath, setCurrentPath] = useState<string[]>(initialPath);
|
||
const currentPathRef = useRef(currentPath);
|
||
|
||
const [currentFiles, setCurrentFiles] = useState<UiFile[]>(initialCachedFiles.map(toUiFile));
|
||
const [selectedFile, setSelectedFile] = useState<UiFile | null>(null);
|
||
|
||
// Modals inside mobile action sheet
|
||
const [actionSheetOpen, setActionSheetOpen] = useState(false);
|
||
const [renameModalOpen, setRenameModalOpen] = useState(false);
|
||
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||
const [fileToRename, setFileToRename] = useState<UiFile | null>(null);
|
||
const [fileToDelete, setFileToDelete] = useState<UiFile | null>(null);
|
||
const [targetActionFile, setTargetActionFile] = useState<UiFile | null>(null);
|
||
const [targetAction, setTargetAction] = useState<NetdiskTargetAction | null>(null);
|
||
const [newFileName, setNewFileName] = useState('');
|
||
|
||
const [renameError, setRenameError] = useState('');
|
||
const [isRenaming, setIsRenaming] = useState(false);
|
||
const [shareStatus, setShareStatus] = useState('');
|
||
|
||
// Floating Action Button
|
||
const [fabOpen, setFabOpen] = useState(false);
|
||
const layoutClassNames = getMobileFilesLayoutClassNames();
|
||
|
||
const loadCurrentPath = async (pathParts: string[]) => {
|
||
const response = await apiRequest<PageResponse<FileMetadata>>(
|
||
`/files/list?path=${encodeURIComponent(toBackendPath(pathParts))}&page=0&size=100`
|
||
);
|
||
writeCachedValue(getFilesListCacheKey(toBackendPath(pathParts)), response.items);
|
||
writeCachedValue(getFilesLastPathCacheKey(), pathParts);
|
||
setCurrentFiles(response.items.map(toUiFile));
|
||
};
|
||
|
||
useEffect(() => {
|
||
currentPathRef.current = currentPath;
|
||
const cachedFiles = readCachedValue<FileMetadata[]>(getFilesListCacheKey(toBackendPath(currentPath)));
|
||
writeCachedValue(getFilesLastPathCacheKey(), currentPath);
|
||
|
||
if (cachedFiles) {
|
||
setCurrentFiles(cachedFiles.map(toUiFile));
|
||
}
|
||
loadCurrentPath(currentPath).catch(() => {
|
||
if (!cachedFiles) setCurrentFiles([]);
|
||
});
|
||
}, [currentPath]);
|
||
|
||
useEffect(() => {
|
||
if (directoryInputRef.current) {
|
||
directoryInputRef.current.setAttribute('webkitdirectory', '');
|
||
directoryInputRef.current.setAttribute('directory', '');
|
||
}
|
||
}, []);
|
||
|
||
const handleBreadcrumbClick = (index: number) => {
|
||
setCurrentPath(currentPath.slice(0, index + 1));
|
||
};
|
||
|
||
const handleBackClick = () => {
|
||
if (currentPath.length > 0) {
|
||
setCurrentPath(currentPath.slice(0, -1));
|
||
}
|
||
};
|
||
|
||
const handleFolderClick = (file: UiFile) => {
|
||
if (file.type === 'folder') {
|
||
setCurrentPath([...currentPath, file.name]);
|
||
} else {
|
||
openActionSheet(file);
|
||
}
|
||
};
|
||
|
||
const openActionSheet = (file: UiFile) => {
|
||
setSelectedFile(file);
|
||
setActionSheetOpen(true);
|
||
setShareStatus('');
|
||
};
|
||
|
||
const closeActionSheet = () => {
|
||
setActionSheetOpen(false);
|
||
};
|
||
|
||
const openRenameModal = (file: UiFile) => {
|
||
setFileToRename(file);
|
||
setNewFileName(file.name);
|
||
setRenameError('');
|
||
setRenameModalOpen(true);
|
||
closeActionSheet();
|
||
};
|
||
|
||
const openDeleteModal = (file: UiFile) => {
|
||
setFileToDelete(file);
|
||
setDeleteModalOpen(true);
|
||
closeActionSheet();
|
||
};
|
||
|
||
const openTargetActionModal = (file: UiFile, action: NetdiskTargetAction) => {
|
||
setTargetAction(action);
|
||
setTargetActionFile(file);
|
||
closeActionSheet();
|
||
};
|
||
|
||
// Upload Logic (Identical to reference)
|
||
const runUploadEntries = async (entries: PendingUploadEntry[]) => {
|
||
if (entries.length === 0) return;
|
||
setFilesUploadPanelOpen(true);
|
||
uploadMeasurementsRef.current.clear();
|
||
|
||
const batchTasks = createUploadTasks(entries);
|
||
replaceFilesUploads(batchTasks);
|
||
|
||
const runSingleUpload = async ({file: uploadFile, pathParts: uploadPathParts}: PendingUploadEntry, uploadTask: UploadTask) => {
|
||
const uploadPath = toBackendPath(uploadPathParts);
|
||
const uploadAbortController = new AbortController();
|
||
registerFilesUploadTaskCanceler(uploadTask.id, () => uploadAbortController.abort());
|
||
uploadMeasurementsRef.current.set(uploadTask.id, createUploadMeasurement(Date.now()));
|
||
|
||
try {
|
||
const updateProgress = ({loaded, total}: {loaded: number; total: number}) => {
|
||
const snapshot = buildUploadProgressSnapshot({
|
||
loaded, total, now: Date.now(), previous: uploadMeasurementsRef.current.get(uploadTask.id),
|
||
});
|
||
uploadMeasurementsRef.current.set(uploadTask.id, snapshot.measurement);
|
||
updateFilesUploadTask(uploadTask.id, (task) => ({ ...task, progress: snapshot.progress, speed: snapshot.speed }));
|
||
};
|
||
|
||
let initiated: InitiateUploadResponse | null = null;
|
||
try {
|
||
initiated = await apiRequest<InitiateUploadResponse>('/files/upload/initiate', {
|
||
method: 'POST', body: { path: uploadPath, filename: uploadFile.name, contentType: uploadFile.type || null, size: uploadFile.size },
|
||
});
|
||
} catch (e) { if (!(e instanceof ApiError && e.status === 404)) throw e; }
|
||
|
||
let uploadedFile: FileMetadata;
|
||
if (initiated?.direct) {
|
||
try {
|
||
await apiBinaryUploadRequest(initiated.uploadUrl, { method: initiated.method, headers: initiated.headers, body: uploadFile, onProgress: updateProgress, signal: uploadAbortController.signal });
|
||
uploadedFile = await apiRequest<FileMetadata>('/files/upload/complete', { method: 'POST', signal: uploadAbortController.signal, body: { path: uploadPath, filename: uploadFile.name, storageName: initiated.storageName, contentType: uploadFile.type || null, size: uploadFile.size } });
|
||
} catch (error) {
|
||
if (!(error instanceof ApiError && error.isNetworkError)) throw error;
|
||
const formData = new FormData(); formData.append('file', uploadFile);
|
||
uploadedFile = await apiUploadRequest<FileMetadata>(`/files/upload?path=${encodeURIComponent(uploadPath)}`, { body: formData, onProgress: updateProgress, signal: uploadAbortController.signal });
|
||
}
|
||
} else if (initiated) {
|
||
const formData = new FormData(); formData.append('file', uploadFile);
|
||
uploadedFile = await apiUploadRequest<FileMetadata>(initiated.uploadUrl, { body: formData, method: initiated.method, headers: initiated.headers, onProgress: updateProgress, signal: uploadAbortController.signal });
|
||
} else {
|
||
const formData = new FormData(); formData.append('file', uploadFile);
|
||
uploadedFile = await apiUploadRequest<FileMetadata>(`/files/upload?path=${encodeURIComponent(uploadPath)}`, { body: formData, onProgress: updateProgress, signal: uploadAbortController.signal });
|
||
}
|
||
|
||
updateFilesUploadTask(uploadTask.id, (task) => prepareUploadTaskForCompletion(task));
|
||
await sleep(120);
|
||
updateFilesUploadTask(uploadTask.id, (task) => completeUploadTask(task));
|
||
return uploadedFile;
|
||
} catch (error) {
|
||
if (uploadAbortController.signal.aborted) { updateFilesUploadTask(uploadTask.id, (task) => cancelUploadTask(task)); return null; }
|
||
updateFilesUploadTask(uploadTask.id, (task) => failUploadTask(task, error instanceof Error && error.message ? error.message : '上传失败'));
|
||
return null;
|
||
} finally {
|
||
uploadMeasurementsRef.current.delete(uploadTask.id);
|
||
unregisterFilesUploadTaskCanceler(uploadTask.id);
|
||
}
|
||
};
|
||
|
||
if (shouldUploadEntriesSequentially(entries)) {
|
||
let previousPromise = Promise.resolve<Array<FileMetadata | null>>([]);
|
||
for (let i = 0; i < entries.length; i++) {
|
||
previousPromise = previousPromise.then(async (prev) => {
|
||
const current = await runSingleUpload(entries[i], batchTasks[i]);
|
||
return [...prev, current];
|
||
});
|
||
}
|
||
const results = await previousPromise;
|
||
if (results.some(Boolean)) await loadCurrentPath(currentPathRef.current).catch(() => {});
|
||
} else {
|
||
const results = await Promise.all(entries.map((entry, index) => runSingleUpload(entry, batchTasks[index])));
|
||
if (results.some(Boolean)) await loadCurrentPath(currentPathRef.current).catch(() => {});
|
||
}
|
||
};
|
||
|
||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setFabOpen(false);
|
||
const files = event.target.files ? (Array.from(event.target.files) as File[]) : [];
|
||
event.target.value = '';
|
||
if (files.length === 0) return;
|
||
|
||
const reservedNames = new Set<string>(currentFiles.map((file) => file.name));
|
||
const entries: PendingUploadEntry[] = files.map((file) => {
|
||
const preparedUpload = prepareUploadFile(file, reservedNames);
|
||
reservedNames.add(preparedUpload.file.name);
|
||
return { file: preparedUpload.file, pathParts: [...currentPath], source: 'file', noticeMessage: preparedUpload.noticeMessage };
|
||
});
|
||
await runUploadEntries(entries);
|
||
};
|
||
|
||
const handleFolderChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setFabOpen(false);
|
||
const files = event.target.files ? (Array.from(event.target.files) as File[]) : [];
|
||
event.target.value = '';
|
||
if (files.length === 0) return;
|
||
|
||
const entries = prepareFolderUploadEntries(files, [...currentPath], currentFiles.map((file) => file.name));
|
||
await runUploadEntries(entries);
|
||
};
|
||
|
||
const handleCreateFolder = async () => {
|
||
setFabOpen(false);
|
||
const folderName = window.prompt('请输入新文件夹名称');
|
||
if (!folderName?.trim()) return;
|
||
|
||
const normalizedFolderName = folderName.trim();
|
||
const nextFolderName = getNextAvailableName(normalizedFolderName, new Set(currentFiles.filter(f => f.type === 'folder').map(f => f.name)));
|
||
if (nextFolderName !== normalizedFolderName) window.alert(`名称冲突，重命名为 ${nextFolderName}`);
|
||
|
||
const basePath = toBackendPath(currentPath).replace(/\/$/, '');
|
||
const fullPath = `${basePath}/${nextFolderName}` || '/';
|
||
|
||
await apiRequest('/files/mkdir', {
|
||
method: 'POST',
|
||
body: new URLSearchParams({ path: fullPath.startsWith('/') ? fullPath : `/${fullPath}` }),
|
||
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
|
||
});
|
||
await loadCurrentPath(currentPath);
|
||
};
|
||
|
||
const handleRename = async () => {
|
||
if (!fileToRename || !newFileName.trim() || isRenaming) return;
|
||
setIsRenaming(true); setRenameError('');
|
||
try {
|
||
const renamedFile = await apiRequest<FileMetadata>(`/files/${fileToRename.id}/rename`, {
|
||
method: 'PATCH', body: { filename: newFileName.trim() },
|
||
});
|
||
const nextUiFile = toUiFile(renamedFile);
|
||
setCurrentFiles((prev) => replaceUiFile(prev, nextUiFile));
|
||
setSelectedFile((prev) => syncSelectedFile(prev, nextUiFile));
|
||
setRenameModalOpen(false); setFileToRename(null); setNewFileName('');
|
||
await loadCurrentPath(currentPath).catch(() => {});
|
||
} catch (error) {
|
||
setRenameError(getActionErrorMessage(error, '重命名失败'));
|
||
} finally { setIsRenaming(false); }
|
||
};
|
||
|
||
const handleDelete = async () => {
|
||
if (!fileToDelete) return;
|
||
await apiRequest(`/files/${fileToDelete.id}`, { method: 'DELETE' });
|
||
setCurrentFiles((prev) => removeUiFile(prev, fileToDelete.id));
|
||
setSelectedFile((prev) => clearSelectionIfDeleted(prev, fileToDelete.id));
|
||
setDeleteModalOpen(false); setFileToDelete(null);
|
||
await loadCurrentPath(currentPath).catch(() => {});
|
||
};
|
||
|
||
const handleMoveToPath = async (path: string) => {
|
||
if (!targetActionFile || !targetAction) return;
|
||
if (targetAction === 'move') {
|
||
await moveFileToNetdiskPath(targetActionFile.id, path);
|
||
setSelectedFile((prev) => clearSelectionIfDeleted(prev, targetActionFile.id));
|
||
} else {
|
||
await copyFileToNetdiskPath(targetActionFile.id, path);
|
||
}
|
||
setTargetAction(null); setTargetActionFile(null);
|
||
await loadCurrentPath(currentPath).catch(() => {});
|
||
};
|
||
|
||
const handleDownload = async (targetFile: UiFile | null = selectedFile) => {
|
||
const actFile = targetFile || selectedFile;
|
||
if (!actFile) return;
|
||
|
||
if (actFile.type === 'folder') {
|
||
const response = await apiDownload(`/files/download/${actFile.id}`);
|
||
const blob = await response.blob();
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url; link.download = `${actFile.name}.zip`; link.click();
|
||
window.URL.revokeObjectURL(url);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await apiRequest<DownloadUrlResponse>(`/files/download/${actFile.id}/url`);
|
||
const link = document.createElement('a'); link.href = response.url; link.download = actFile.name; link.rel = 'noreferrer'; link.target = '_blank';
|
||
link.click(); return;
|
||
} catch (error) {
|
||
if (!(error instanceof ApiError && error.status === 404)) throw error;
|
||
}
|
||
|
||
const response = await apiDownload(`/files/download/${actFile.id}`);
|
||
const blob = await response.blob();
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a'); link.href = url; link.download = actFile.name; link.click();
|
||
window.URL.revokeObjectURL(url);
|
||
};
|
||
|
||
const handleShare = async (targetFile: UiFile) => {
|
||
try {
|
||
const response = await createFileShareLink(targetFile.id);
|
||
const shareUrl = getCurrentFileShareUrl(response.token);
|
||
try {
|
||
await navigator.clipboard.writeText(shareUrl);
|
||
setShareStatus('链接已复制到剪贴板，快发送给朋友吧');
|
||
} catch {
|
||
setShareStatus(`可全选复制链接：${shareUrl}`);
|
||
}
|
||
} catch (error) {
|
||
setShareStatus(error instanceof Error ? error.message : '分享失败');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={layoutClassNames.root}>
|
||
<div className="pointer-events-none absolute inset-0 z-0">
|
||
<div className="absolute top-[-12%] left-[-24%] h-72 w-72 rounded-full bg-[#336EFF] opacity-20 mix-blend-screen blur-[100px] animate-blob" />
|
||
<div className="absolute top-[22%] right-[-20%] h-80 w-80 rounded-full bg-purple-600 opacity-20 mix-blend-screen blur-[100px] animate-blob animation-delay-2000" />
|
||
<div className="absolute bottom-[-18%] left-[8%] h-80 w-80 rounded-full bg-indigo-600 opacity-20 mix-blend-screen blur-[100px] animate-blob animation-delay-4000" />
|
||
</div>
|
||
|
||
<input type="file" multiple ref={fileInputRef} className="hidden" onChange={handleFileChange} />
|
||
<input type="file" ref={directoryInputRef} className="hidden" onChange={handleFolderChange} />
|
||
|
||
{/* Top Header - Path navigation */}
|
||
<div className={layoutClassNames.toolbar}>
|
||
<div className={layoutClassNames.toolbarInner}>
|
||
<div className="flex min-w-0 flex-1 flex-nowrap items-center text-sm overflow-x-auto custom-scrollbar whitespace-nowrap">
|
||
{currentPath.length > 0 && (
|
||
<button className="mr-3 p-1.5 rounded-full bg-white/5 text-slate-300 active:bg-white/10" onClick={handleBackClick}>
|
||
<ChevronLeft className="w-4 h-4" />
|
||
</button>
|
||
)}
|
||
<button className="text-slate-400 hover:text-white" onClick={() => handleBreadcrumbClick(-1)}>根目录</button>
|
||
{currentPath.map((pathItem, index) => (
|
||
<React.Fragment key={index}>
|
||
<ChevronRight className="w-3 h-3 mx-1 text-slate-600 shrink-0" />
|
||
<button onClick={() => handleBreadcrumbClick(index)} className={cn(index === currentPath.length - 1 ? 'text-white font-medium' : 'text-slate-400', 'shrink-0')}>{pathItem}</button>
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => navigate(RECYCLE_BIN_ROUTE)}
|
||
className="flex shrink-0 items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-200"
|
||
>
|
||
<RotateCcw className="h-3.5 w-3.5" />
|
||
回收站
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* File List */}
|
||
<div className={layoutClassNames.list}>
|
||
{currentFiles.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center h-48 text-slate-500">
|
||
<FolderPlus className="w-10 h-10 mb-3 opacity-20" />
|
||
<p className="text-sm">文件夹是空的</p>
|
||
</div>
|
||
) : (
|
||
currentFiles.map((file) => (
|
||
<div key={file.id} className="glass-panel w-full rounded-xl p-3 flex flex-row items-center gap-3 active:bg-white/5 select-none" onClick={() => handleFolderClick(file)}>
|
||
<div className="shrink-0 p-1.5 rounded-xl bg-black/20 border border-white/5">
|
||
<FileTypeIcon type={file.type} size="md" />
|
||
</div>
|
||
<div className="flex-1 min-w-0 flex flex-col justify-center">
|
||
<span className="text-sm text-white truncate w-full block">{file.name}</span>
|
||
<div className="flex items-center text-[10px] text-slate-400 mt-0.5 gap-2">
|
||
<span className={cn('px-1.5 py-0.5 rounded text-[9px] font-medium', getFileTypeTheme(file.type).badgeClassName)}>{file.typeLabel}</span>
|
||
<span>{file.modified}</span>
|
||
{file.type !== 'folder' && <span>{file.size}</span>}
|
||
</div>
|
||
</div>
|
||
{file.type !== 'folder' && (
|
||
<button className="p-2 shrink-0 text-slate-400 hover:text-white" onClick={(e) => { e.stopPropagation(); openActionSheet(file); }}>
|
||
<MoreVertical className="w-5 h-5" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* Floating Action Button (FAB) + Menu */}
|
||
<div className="fixed bottom-20 right-6 z-30 flex flex-col items-end gap-3 pointer-events-none">
|
||
<AnimatePresence>
|
||
{fabOpen && (
|
||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 20 }} className="flex flex-col gap-3 pointer-events-auto items-end mr-1">
|
||
<button onClick={() => { fileInputRef.current?.click(); setFabOpen(false); }} className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-blue-500 text-white shadow-lg active:scale-95 text-sm font-medium">
|
||
<Upload className="w-4 h-4"/> 上传文件
|
||
</button>
|
||
<button onClick={() => { directoryInputRef.current?.click(); setFabOpen(false); }} className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-emerald-500 text-white shadow-lg active:scale-95 text-sm font-medium">
|
||
<FolderPlus className="w-4 h-4"/> 上传文件夹
|
||
</button>
|
||
<button onClick={handleCreateFolder} className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-purple-500 text-white shadow-lg active:scale-95 text-sm font-medium">
|
||
<Plus className="w-4 h-4"/> 新建文件夹
|
||
</button>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
<button onClick={() => setFabOpen(!fabOpen)} className={cn("pointer-events-auto flex items-center justify-center w-14 h-14 rounded-full shadow-2xl transition-transform active:scale-95", fabOpen ? "bg-[#0f172a] border border-white/10 rotate-45" : "bg-[#336EFF]")}>
|
||
<Plus className="w-6 h-6 text-white" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* FAB Backdrop */}
|
||
<AnimatePresence>
|
||
{fabOpen && <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-20 bg-black/40 backdrop-blur-sm" onClick={() => setFabOpen(false)} />}
|
||
</AnimatePresence>
|
||
|
||
{/* Action Sheet */}
|
||
<AnimatePresence>
|
||
{actionSheetOpen && selectedFile && (
|
||
<div className="fixed inset-0 z-50 flex items-end">
|
||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={closeActionSheet} />
|
||
<motion.div initial={{ y: '100%' }} animate={{ y: 0 }} exit={{ y: '100%' }} transition={{ type: "spring", damping: 25, stiffness: 200 }} className="relative w-full bg-[#0f172a] rounded-t-3xl border-t border-white/10 pt-4 pb-8 px-4 flex flex-col z-10 glass-panel">
|
||
<div className="w-12 h-1 bg-white/20 rounded-full mx-auto mb-4" />
|
||
<div className="flex border-b border-white/10 pb-4 mb-4 gap-4 items-center px-2">
|
||
<FileTypeIcon type={selectedFile.type} size="md" />
|
||
<div className="min-w-0">
|
||
<p className="text-sm font-semibold truncate text-white">{selectedFile.name}</p>
|
||
<p className="text-xs text-slate-400 mt-1">{selectedFile.size} • {selectedFile.modified}</p>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-2 mb-4 px-2">
|
||
<ActionButton icon={Download} label="下载" onClick={() => { handleDownload(); closeActionSheet(); }} color="text-amber-400" />
|
||
<ActionButton icon={Share2} label="分享" onClick={() => handleShare(selectedFile)} color="text-emerald-400" />
|
||
<ActionButton icon={Copy} label="复制" onClick={() => openTargetActionModal(selectedFile, 'copy')} color="text-blue-400" />
|
||
<ActionButton icon={Folder} label="移动" onClick={() => openTargetActionModal(selectedFile, 'move')} color="text-indigo-400" />
|
||
<ActionButton icon={Edit2} label="重命名" onClick={() => openRenameModal(selectedFile)} color="text-slate-300" />
|
||
<ActionButton icon={Trash2} label="删除" onClick={() => openDeleteModal(selectedFile)} color="text-red-400" />
|
||
</div>
|
||
{shareStatus && <div className="mx-2 mt-2 p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-[10px] text-emerald-400 break-all">{shareStatus}</div>}
|
||
<Button variant="ghost" onClick={closeActionSheet} className="mt-4 text-slate-400 py-6 text-sm">取消</Button>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* Target Action Modal */}
|
||
{targetAction && (
|
||
<NetdiskPathPickerModal
|
||
isOpen
|
||
title={targetAction === 'move' ? '移动到' : '复制到'}
|
||
confirmLabel={targetAction === 'move' ? '移动至此' : '复制至此'}
|
||
onClose={() => setTargetAction(null)}
|
||
onConfirm={(path) => void handleMoveToPath(path)}
|
||
/>
|
||
)}
|
||
|
||
{/* Rename Modal */}
|
||
<AnimatePresence>
|
||
{renameModalOpen && (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setRenameModalOpen(false)} />
|
||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="relative w-full max-w-sm glass-panel bg-[#0f172a] border border-white/10 rounded-2xl p-5 z-10 shadow-2xl">
|
||
<h3 className="text-lg font-bold text-white mb-4">重命名文件</h3>
|
||
<Input value={newFileName} onChange={(e) => setNewFileName(e.target.value)} className="bg-black/20 text-white mb-2 h-12" placeholder="请输入新名称" />
|
||
{renameError && <p className="text-xs text-red-400 mb-4">{renameError}</p>}
|
||
<div className="flex gap-3 mt-6">
|
||
<Button variant="outline" className="flex-1 bg-white/5 border-white/10 text-white" onClick={() => setRenameModalOpen(false)}>取消</Button>
|
||
<Button className="flex-1 bg-[#336EFF] hover:bg-[#2958cc] text-white" onClick={handleRename} disabled={isRenaming}>{isRenaming ? '保存中' : '保存'}</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* Delete Modal */}
|
||
<AnimatePresence>
|
||
{deleteModalOpen && (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setDeleteModalOpen(false)} />
|
||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="relative w-full max-w-sm glass-panel bg-[#0f172a] border border-white/10 rounded-2xl p-5 z-10 shadow-2xl">
|
||
<h3 className="text-lg font-bold text-white mb-2 flex items-center gap-2"><Trash2 className="text-red-400 w-5 h-5"/>确认删除</h3>
|
||
<p className="text-sm text-slate-300 mb-6 mt-3">确定要将 <span className="text-white font-medium break-all">{fileToDelete?.name}</span> 移入回收站吗？文件会保留 {RECYCLE_BIN_RETENTION_DAYS} 天，期间可以恢复。</p>
|
||
<div className="flex gap-3">
|
||
<Button variant="outline" className="flex-1 bg-white/5 border-white/10 text-white" onClick={() => setDeleteModalOpen(false)}>取消</Button>
|
||
<Button className="flex-1 bg-red-500 text-white hover:bg-red-600" onClick={handleDelete}>移入回收站</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ActionButton({ icon: Icon, label, color, onClick }: any) {
|
||
return (
|
||
<div className="flex flex-col items-center gap-2 p-2 hover:bg-white/5 rounded-xl transition-colors active:bg-white/10" onClick={onClick}>
|
||
<div className={cn("p-3 rounded-full bg-black/20 border border-white/5 shadow-inner", color)}>
|
||
<Icon className="w-5 h-5" />
|
||
</div>
|
||
<span className="text-xs text-slate-300">{label}</span>
|
||
</div>
|
||
);
|
||
}
|