880 lines
33 KiB
TypeScript
880 lines
33 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import {
|
||
Archive,
|
||
CheckCircle,
|
||
CheckSquare,
|
||
DownloadCloud,
|
||
File as FileIcon,
|
||
Loader2,
|
||
RefreshCcw,
|
||
Shield,
|
||
Square,
|
||
} from 'lucide-react';
|
||
import { useSearchParams } from 'react-router-dom';
|
||
|
||
import { useAuth } from '@/src/auth/AuthProvider';
|
||
import { NetdiskPathPickerModal } from '@/src/components/ui/NetdiskPathPickerModal';
|
||
import { Button } from '@/src/components/ui/button';
|
||
import { Input } from '@/src/components/ui/input';
|
||
import { buildTransferArchiveFileName, createTransferZipArchive } from '@/src/lib/transfer-archive';
|
||
import { resolveNetdiskSaveDirectory, saveFileToNetdisk } from '@/src/lib/netdisk-upload';
|
||
import {
|
||
createTransferReceiveRequestMessage,
|
||
parseTransferControlMessage,
|
||
SIGNAL_POLL_INTERVAL_MS,
|
||
toTransferChunk,
|
||
type TransferFileDescriptor,
|
||
} from '@/src/lib/transfer-protocol';
|
||
import { flushPendingRemoteIceCandidates, handleRemoteIceCandidate } from '@/src/lib/transfer-signaling';
|
||
import { DEFAULT_TRANSFER_ICE_SERVERS, joinTransferSession, lookupTransferSession, pollTransferSignals, postTransferSignal } from '@/src/lib/transfer';
|
||
import type { TransferSessionResponse } from '@/src/lib/types';
|
||
|
||
import { canArchiveTransferSelection, formatTransferSize, sanitizeReceiveCode } from './transfer-state';
|
||
|
||
type ReceivePhase = 'idle' | 'joining' | 'waiting' | 'connecting' | 'receiving' | 'completed' | 'error';
|
||
|
||
interface DownloadableFile extends TransferFileDescriptor {
|
||
progress: number;
|
||
selected: boolean;
|
||
requested: boolean;
|
||
downloadUrl?: string;
|
||
savedToNetdisk?: boolean;
|
||
}
|
||
|
||
interface IncomingTransferFile extends TransferFileDescriptor {
|
||
chunks: Uint8Array[];
|
||
receivedBytes: number;
|
||
}
|
||
|
||
function parseJsonPayload<T>(payload: string): T | null {
|
||
try {
|
||
return JSON.parse(payload) as T;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
interface TransferReceiveProps {
|
||
embedded?: boolean;
|
||
}
|
||
|
||
export default function TransferReceive({ embedded = false }: TransferReceiveProps) {
|
||
const { session: authSession } = useAuth();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const [receiveCode, setReceiveCode] = useState(searchParams.get('code') ?? '');
|
||
const [transferSession, setTransferSession] = useState<TransferSessionResponse | null>(null);
|
||
const [files, setFiles] = useState<DownloadableFile[]>([]);
|
||
const [phase, setPhase] = useState<ReceivePhase>('idle');
|
||
const [errorMessage, setErrorMessage] = useState('');
|
||
const [overallProgress, setOverallProgress] = useState(0);
|
||
const [lookupBusy, setLookupBusy] = useState(false);
|
||
const [requestSubmitted, setRequestSubmitted] = useState(false);
|
||
const [archiveRequested, setArchiveRequested] = useState(false);
|
||
const [archiveName, setArchiveName] = useState(buildTransferArchiveFileName('快传文件'));
|
||
const [archiveUrl, setArchiveUrl] = useState<string | null>(null);
|
||
const [savingFileId, setSavingFileId] = useState<string | null>(null);
|
||
const [saveMessage, setSaveMessage] = useState('');
|
||
const [savePathPickerFileId, setSavePathPickerFileId] = useState<string | null>(null);
|
||
const [saveRootPath, setSaveRootPath] = useState('/下载');
|
||
|
||
const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
|
||
const dataChannelRef = useRef<RTCDataChannel | null>(null);
|
||
const pollTimerRef = useRef<number | null>(null);
|
||
const cursorRef = useRef(0);
|
||
const lifecycleIdRef = useRef(0);
|
||
const currentFileIdRef = useRef<string | null>(null);
|
||
const totalBytesRef = useRef(0);
|
||
const receivedBytesRef = useRef(0);
|
||
const downloadUrlsRef = useRef<string[]>([]);
|
||
const requestedFileIdsRef = useRef<string[]>([]);
|
||
const pendingRemoteCandidatesRef = useRef<RTCIceCandidateInit[]>([]);
|
||
const archiveBuiltRef = useRef(false);
|
||
const completedFilesRef = useRef(new Map<string, {
|
||
name: string;
|
||
relativePath: string;
|
||
blob: Blob;
|
||
contentType: string;
|
||
}>());
|
||
const incomingFilesRef = useRef(new Map<string, IncomingTransferFile>());
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
cleanupReceiver();
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const sessionId = searchParams.get('session');
|
||
if (!sessionId) {
|
||
setTransferSession(null);
|
||
setFiles([]);
|
||
setPhase('idle');
|
||
setOverallProgress(0);
|
||
setRequestSubmitted(false);
|
||
setArchiveRequested(false);
|
||
setArchiveUrl(null);
|
||
return;
|
||
}
|
||
|
||
void startReceivingSession(sessionId);
|
||
}, [searchParams]);
|
||
|
||
function cleanupReceiver() {
|
||
if (pollTimerRef.current) {
|
||
window.clearInterval(pollTimerRef.current);
|
||
pollTimerRef.current = null;
|
||
}
|
||
|
||
if (dataChannelRef.current) {
|
||
dataChannelRef.current.close();
|
||
dataChannelRef.current = null;
|
||
}
|
||
|
||
if (peerConnectionRef.current) {
|
||
peerConnectionRef.current.close();
|
||
peerConnectionRef.current = null;
|
||
}
|
||
|
||
for (const url of downloadUrlsRef.current) {
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
downloadUrlsRef.current = [];
|
||
completedFilesRef.current.clear();
|
||
incomingFilesRef.current.clear();
|
||
currentFileIdRef.current = null;
|
||
cursorRef.current = 0;
|
||
receivedBytesRef.current = 0;
|
||
totalBytesRef.current = 0;
|
||
requestedFileIdsRef.current = [];
|
||
pendingRemoteCandidatesRef.current = [];
|
||
archiveBuiltRef.current = false;
|
||
}
|
||
|
||
async function startReceivingSession(sessionId: string) {
|
||
const lifecycleId = lifecycleIdRef.current + 1;
|
||
lifecycleIdRef.current = lifecycleId;
|
||
|
||
cleanupReceiver();
|
||
setPhase('joining');
|
||
setErrorMessage('');
|
||
setFiles([]);
|
||
setOverallProgress(0);
|
||
setRequestSubmitted(false);
|
||
setArchiveRequested(false);
|
||
setArchiveName(buildTransferArchiveFileName('快传文件'));
|
||
setArchiveUrl(null);
|
||
setSavingFileId(null);
|
||
setSaveMessage('');
|
||
|
||
try {
|
||
const joinedSession = await joinTransferSession(sessionId);
|
||
if (lifecycleIdRef.current !== lifecycleId) {
|
||
return;
|
||
}
|
||
|
||
setTransferSession(joinedSession);
|
||
setArchiveName(buildTransferArchiveFileName(`快传-${joinedSession.pickupCode}`));
|
||
|
||
const connection = new RTCPeerConnection({
|
||
iceServers: DEFAULT_TRANSFER_ICE_SERVERS,
|
||
});
|
||
peerConnectionRef.current = connection;
|
||
|
||
connection.onicecandidate = (event) => {
|
||
if (!event.candidate) {
|
||
return;
|
||
}
|
||
|
||
void postTransferSignal(
|
||
joinedSession.sessionId,
|
||
'receiver',
|
||
'ice-candidate',
|
||
JSON.stringify(event.candidate.toJSON()),
|
||
);
|
||
};
|
||
|
||
connection.onconnectionstatechange = () => {
|
||
if (connection.connectionState === 'connected') {
|
||
setPhase((current) => (current === 'completed' ? current : 'connecting'));
|
||
}
|
||
|
||
if (connection.connectionState === 'failed' || connection.connectionState === 'disconnected') {
|
||
setPhase('error');
|
||
setErrorMessage('浏览器之间的直连失败，请重新打开分享链接。');
|
||
}
|
||
};
|
||
|
||
connection.ondatachannel = (event) => {
|
||
const channel = event.channel;
|
||
dataChannelRef.current = channel;
|
||
channel.binaryType = 'arraybuffer';
|
||
channel.onopen = () => {
|
||
setPhase((current) => (current === 'completed' ? current : 'connecting'));
|
||
};
|
||
channel.onmessage = (messageEvent) => {
|
||
void handleIncomingMessage(messageEvent.data);
|
||
};
|
||
};
|
||
|
||
startReceiverPolling(joinedSession.sessionId, connection, lifecycleId);
|
||
setPhase('waiting');
|
||
} catch (error) {
|
||
if (lifecycleIdRef.current !== lifecycleId) {
|
||
return;
|
||
}
|
||
|
||
setPhase('error');
|
||
setErrorMessage(error instanceof Error ? error.message : '快传会话打开失败');
|
||
}
|
||
}
|
||
|
||
function startReceiverPolling(sessionId: string, connection: RTCPeerConnection, lifecycleId: number) {
|
||
let polling = false;
|
||
|
||
pollTimerRef.current = window.setInterval(() => {
|
||
if (polling || lifecycleIdRef.current !== lifecycleId) {
|
||
return;
|
||
}
|
||
|
||
polling = true;
|
||
|
||
void pollTransferSignals(sessionId, 'receiver', cursorRef.current)
|
||
.then(async (response) => {
|
||
if (lifecycleIdRef.current !== lifecycleId) {
|
||
return;
|
||
}
|
||
|
||
cursorRef.current = response.nextCursor;
|
||
|
||
for (const item of response.items) {
|
||
if (item.type === 'offer') {
|
||
const offer = parseJsonPayload<RTCSessionDescriptionInit>(item.payload);
|
||
if (!offer) {
|
||
continue;
|
||
}
|
||
|
||
setPhase('connecting');
|
||
await connection.setRemoteDescription(offer);
|
||
pendingRemoteCandidatesRef.current = await flushPendingRemoteIceCandidates(
|
||
connection,
|
||
pendingRemoteCandidatesRef.current,
|
||
);
|
||
const answer = await connection.createAnswer();
|
||
await connection.setLocalDescription(answer);
|
||
await postTransferSignal(sessionId, 'receiver', 'answer', JSON.stringify(answer));
|
||
continue;
|
||
}
|
||
|
||
if (item.type === 'ice-candidate') {
|
||
const candidate = parseJsonPayload<RTCIceCandidateInit>(item.payload);
|
||
if (candidate) {
|
||
pendingRemoteCandidatesRef.current = await handleRemoteIceCandidate(
|
||
connection,
|
||
pendingRemoteCandidatesRef.current,
|
||
candidate,
|
||
);
|
||
}
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
if (lifecycleIdRef.current !== lifecycleId) {
|
||
return;
|
||
}
|
||
|
||
setPhase('error');
|
||
setErrorMessage(error instanceof Error ? error.message : '轮询传输信令失败');
|
||
})
|
||
.finally(() => {
|
||
polling = false;
|
||
});
|
||
}, SIGNAL_POLL_INTERVAL_MS);
|
||
}
|
||
|
||
async function finalizeArchiveDownload() {
|
||
if (!archiveRequested || archiveBuiltRef.current || requestedFileIdsRef.current.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const archiveEntries = requestedFileIdsRef.current.map((fileId) => completedFilesRef.current.get(fileId)).filter(Boolean);
|
||
if (archiveEntries.length !== requestedFileIdsRef.current.length) {
|
||
return;
|
||
}
|
||
|
||
const archive = await createTransferZipArchive(
|
||
archiveEntries.map((entry) => ({
|
||
name: entry.name,
|
||
relativePath: entry.relativePath,
|
||
data: entry.blob,
|
||
})),
|
||
);
|
||
|
||
const nextArchiveUrl = URL.createObjectURL(archive);
|
||
downloadUrlsRef.current.push(nextArchiveUrl);
|
||
archiveBuiltRef.current = true;
|
||
setArchiveUrl(nextArchiveUrl);
|
||
}
|
||
|
||
async function handleIncomingMessage(data: string | ArrayBuffer | Blob) {
|
||
if (typeof data === 'string') {
|
||
const message = parseTransferControlMessage(data);
|
||
|
||
if (!message) {
|
||
return;
|
||
}
|
||
|
||
if (message.type === 'manifest') {
|
||
setFiles(message.files.map((file) => ({
|
||
...file,
|
||
progress: 0,
|
||
selected: true,
|
||
requested: false,
|
||
savedToNetdisk: false,
|
||
})));
|
||
setPhase((current) => (current === 'receiving' || current === 'completed' ? current : 'waiting'));
|
||
return;
|
||
}
|
||
|
||
if (message.type === 'file-meta') {
|
||
currentFileIdRef.current = message.id;
|
||
incomingFilesRef.current.set(message.id, {
|
||
...message,
|
||
chunks: [],
|
||
receivedBytes: 0,
|
||
});
|
||
setFiles((current) =>
|
||
current.map((file) =>
|
||
file.id === message.id
|
||
? {
|
||
...file,
|
||
requested: true,
|
||
progress: 0,
|
||
}
|
||
: file,
|
||
),
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (message.type === 'file-complete' && message.id) {
|
||
finalizeDownloadableFile(message.id);
|
||
currentFileIdRef.current = null;
|
||
await finalizeArchiveDownload();
|
||
return;
|
||
}
|
||
|
||
if (message.type === 'transfer-complete') {
|
||
await finalizeArchiveDownload();
|
||
setOverallProgress(100);
|
||
setPhase('completed');
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
const activeFileId = currentFileIdRef.current;
|
||
if (!activeFileId) {
|
||
return;
|
||
}
|
||
|
||
const targetFile = incomingFilesRef.current.get(activeFileId);
|
||
if (!targetFile) {
|
||
return;
|
||
}
|
||
|
||
const chunk = await toTransferChunk(data);
|
||
targetFile.chunks.push(chunk);
|
||
targetFile.receivedBytes += chunk.byteLength;
|
||
receivedBytesRef.current += chunk.byteLength;
|
||
|
||
setPhase('receiving');
|
||
if (totalBytesRef.current > 0) {
|
||
setOverallProgress(Math.min(99, Math.round((receivedBytesRef.current / totalBytesRef.current) * 100)));
|
||
}
|
||
|
||
setFiles((current) =>
|
||
current.map((file) =>
|
||
file.id === activeFileId
|
||
? {
|
||
...file,
|
||
progress: Math.min(99, Math.round((targetFile.receivedBytes / Math.max(targetFile.size, 1)) * 100)),
|
||
}
|
||
: file,
|
||
),
|
||
);
|
||
}
|
||
|
||
function finalizeDownloadableFile(fileId: string) {
|
||
const targetFile = incomingFilesRef.current.get(fileId);
|
||
if (!targetFile) {
|
||
return;
|
||
}
|
||
|
||
const blob = new Blob(targetFile.chunks, {
|
||
type: targetFile.contentType,
|
||
});
|
||
const downloadUrl = URL.createObjectURL(blob);
|
||
downloadUrlsRef.current.push(downloadUrl);
|
||
completedFilesRef.current.set(fileId, {
|
||
name: targetFile.name,
|
||
relativePath: targetFile.relativePath,
|
||
blob,
|
||
contentType: targetFile.contentType,
|
||
});
|
||
|
||
setFiles((current) =>
|
||
current.map((file) =>
|
||
file.id === fileId
|
||
? {
|
||
...file,
|
||
progress: 100,
|
||
requested: true,
|
||
downloadUrl,
|
||
savedToNetdisk: false,
|
||
}
|
||
: file,
|
||
),
|
||
);
|
||
}
|
||
|
||
async function saveCompletedFile(fileId: string, rootPath: string) {
|
||
const completedFile = completedFilesRef.current.get(fileId);
|
||
if (!completedFile) {
|
||
return;
|
||
}
|
||
|
||
setSavingFileId(fileId);
|
||
setSaveMessage('');
|
||
|
||
try {
|
||
const netdiskFile = new File([completedFile.blob], completedFile.name, {
|
||
type: completedFile.contentType || completedFile.blob.type || 'application/octet-stream',
|
||
});
|
||
const targetPath = resolveNetdiskSaveDirectory(completedFile.relativePath, rootPath);
|
||
const savedFile = await saveFileToNetdisk(netdiskFile, targetPath);
|
||
setFiles((current) =>
|
||
current.map((file) =>
|
||
file.id === fileId
|
||
? {
|
||
...file,
|
||
savedToNetdisk: true,
|
||
}
|
||
: file,
|
||
),
|
||
);
|
||
setSaveMessage(`${savedFile.filename} 已存入网盘 ${savedFile.path}`);
|
||
} catch (requestError) {
|
||
setErrorMessage(requestError instanceof Error ? requestError.message : '存入网盘失败');
|
||
throw requestError;
|
||
} finally {
|
||
setSavingFileId(null);
|
||
}
|
||
}
|
||
|
||
function toggleFileSelection(fileId: string) {
|
||
if (requestSubmitted) {
|
||
return;
|
||
}
|
||
|
||
setFiles((current) =>
|
||
current.map((file) =>
|
||
file.id === fileId
|
||
? {
|
||
...file,
|
||
selected: !file.selected,
|
||
}
|
||
: file,
|
||
),
|
||
);
|
||
}
|
||
|
||
function toggleSelectAll(nextSelected: boolean) {
|
||
if (requestSubmitted) {
|
||
return;
|
||
}
|
||
|
||
setFiles((current) =>
|
||
current.map((file) => ({
|
||
...file,
|
||
selected: nextSelected,
|
||
})),
|
||
);
|
||
}
|
||
|
||
async function submitReceiveRequest(archive: boolean, fileIds?: string[]) {
|
||
const channel = dataChannelRef.current;
|
||
if (!channel || channel.readyState !== 'open') {
|
||
setPhase('error');
|
||
setErrorMessage('P2P 通道尚未准备好，请稍后再试。');
|
||
return;
|
||
}
|
||
|
||
const requestedIds = fileIds ?? files.filter((file) => file.selected).map((file) => file.id);
|
||
if (requestedIds.length === 0) {
|
||
setErrorMessage('请先选择至少一个文件。');
|
||
return;
|
||
}
|
||
|
||
const requestedSet = new Set(requestedIds);
|
||
const requestedBytes = files
|
||
.filter((file) => requestedSet.has(file.id))
|
||
.reduce((sum, file) => sum + file.size, 0);
|
||
|
||
requestedFileIdsRef.current = requestedIds;
|
||
totalBytesRef.current = requestedBytes;
|
||
receivedBytesRef.current = 0;
|
||
archiveBuiltRef.current = false;
|
||
setOverallProgress(0);
|
||
setArchiveRequested(archive);
|
||
setArchiveUrl(null);
|
||
setRequestSubmitted(true);
|
||
setErrorMessage('');
|
||
|
||
setFiles((current) =>
|
||
current.map((file) => ({
|
||
...file,
|
||
selected: requestedSet.has(file.id),
|
||
requested: requestedSet.has(file.id),
|
||
progress: requestedSet.has(file.id) ? 0 : file.progress,
|
||
})),
|
||
);
|
||
|
||
channel.send(createTransferReceiveRequestMessage(requestedIds, archive));
|
||
setPhase('waiting');
|
||
}
|
||
|
||
async function handleLookupByCode() {
|
||
setLookupBusy(true);
|
||
setErrorMessage('');
|
||
|
||
try {
|
||
const result = await lookupTransferSession(receiveCode);
|
||
setSearchParams({
|
||
session: result.sessionId,
|
||
});
|
||
} catch (error) {
|
||
setPhase('error');
|
||
setErrorMessage(error instanceof Error ? error.message : '取件码无效或会话已过期');
|
||
} finally {
|
||
setLookupBusy(false);
|
||
}
|
||
}
|
||
|
||
const sessionId = searchParams.get('session');
|
||
const selectedFiles = files.filter((file) => file.selected);
|
||
const requestedFiles = files.filter((file) => file.requested);
|
||
const selectedSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);
|
||
const canZipAllFiles = canArchiveTransferSelection(files);
|
||
const hasSelectableFiles = selectedFiles.length > 0;
|
||
const canSubmitSelection = Boolean(dataChannelRef.current && dataChannelRef.current.readyState === 'open' && hasSelectableFiles);
|
||
|
||
const panelContent = (
|
||
<>
|
||
{!embedded ? (
|
||
<div className="text-center mb-10">
|
||
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-400 shadow-lg shadow-emerald-500/20">
|
||
<DownloadCloud className="h-8 w-8 text-white" />
|
||
</div>
|
||
<h1 className="text-3xl font-bold mb-3">网页接收页</h1>
|
||
<p className="text-slate-400">你现在打开的是公开接收链接，先选文件，再通过浏览器 P2P 通道接收并下载。</p>
|
||
</div>
|
||
) : null}
|
||
|
||
<div className={embedded ? '' : 'glass-panel rounded-3xl border border-white/10 bg-[#0f172a]/80 shadow-2xl overflow-hidden'}>
|
||
<div className={embedded ? '' : 'p-8'}>
|
||
{!sessionId ? (
|
||
<div className="mx-auto flex max-w-sm flex-col items-center">
|
||
<div className="mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-500/10">
|
||
<DownloadCloud className="h-10 w-10 text-emerald-400" />
|
||
</div>
|
||
<h2 className="mb-6 text-xl font-medium">输入取件码打开接收页</h2>
|
||
<div className="w-full mb-6">
|
||
<Input
|
||
value={receiveCode}
|
||
onChange={(event) => setReceiveCode(sanitizeReceiveCode(event.target.value))}
|
||
placeholder="例如: 849201"
|
||
className="h-16 bg-black/20 border-white/10 text-center text-3xl tracking-[0.5em] font-mono text-white"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full h-12 text-lg bg-emerald-500 hover:bg-emerald-600 text-white"
|
||
disabled={receiveCode.length !== 6 || lookupBusy}
|
||
onClick={() => void handleLookupByCode()}
|
||
>
|
||
{lookupBusy ? '正在查找...' : '进入接收会话'}
|
||
</Button>
|
||
{errorMessage ? (
|
||
<div className="mt-4 w-full rounded-xl border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
|
||
{errorMessage}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-8 md:grid-cols-[1.08fr_0.92fr]">
|
||
<div className="rounded-2xl border border-white/5 bg-black/20 p-6">
|
||
<div className="flex items-center justify-between gap-4 mb-6">
|
||
<div>
|
||
<p className="text-xs uppercase tracking-[0.24em] text-slate-500">当前会话</p>
|
||
<h2 className="text-2xl font-semibold mt-2">{transferSession?.pickupCode ?? '连接中...'}</h2>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
className="border-white/10 text-slate-200 hover:bg-white/10"
|
||
onClick={() => {
|
||
if (sessionId) {
|
||
void startReceivingSession(sessionId);
|
||
}
|
||
}}
|
||
>
|
||
<RefreshCcw className="mr-2 h-4 w-4" />
|
||
重新连接
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
|
||
<div className="mb-4 flex items-center gap-3">
|
||
{phase === 'completed' ? (
|
||
<CheckCircle className="h-6 w-6 text-emerald-400" />
|
||
) : (
|
||
<Loader2 className="h-6 w-6 animate-spin text-emerald-400" />
|
||
)}
|
||
<div>
|
||
<p className="text-sm font-medium text-white">
|
||
{phase === 'joining' && '正在加入快传会话...'}
|
||
{phase === 'waiting' && (files.length === 0
|
||
? 'P2P 已连通，正在同步文件清单...'
|
||
: requestSubmitted
|
||
? '已提交接收请求，等待发送端开始推送...'
|
||
: '文件清单已同步，请勾选要接收的文件。')}
|
||
{phase === 'connecting' && 'P2P 通道协商中...'}
|
||
{phase === 'receiving' && '文件正在接收...'}
|
||
{phase === 'completed' && (archiveUrl ? '接收完成，ZIP 已准备好下载' : '接收完成，下面可以下载文件')}
|
||
{phase === 'error' && '接收失败'}
|
||
</p>
|
||
<p className="text-xs text-slate-400 mt-1">
|
||
{errorMessage || `总进度 ${overallProgress}%`}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="h-2.5 w-full overflow-hidden rounded-full bg-black/40">
|
||
<div className="h-full rounded-full bg-gradient-to-r from-emerald-400 to-cyan-400" style={{width: `${overallProgress}%`}} />
|
||
</div>
|
||
</div>
|
||
|
||
{archiveUrl ? (
|
||
<div className="mt-5 rounded-2xl border border-cyan-400/20 bg-cyan-500/10 p-4">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500/15">
|
||
<Archive className="h-5 w-5 text-cyan-300" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-medium text-white">全部文件 ZIP 已生成</p>
|
||
<p className="mt-1 text-xs text-slate-300">{archiveName}</p>
|
||
</div>
|
||
<a
|
||
href={archiveUrl}
|
||
download={archiveName}
|
||
className="rounded-lg border border-white/10 px-3 py-2 text-xs text-slate-100 transition-colors hover:bg-white/10"
|
||
>
|
||
下载 ZIP
|
||
</a>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{saveMessage ? (
|
||
<div className="mt-5 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100">
|
||
{saveMessage}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/5 bg-black/20 p-6">
|
||
<div className="mb-4 flex items-start justify-between gap-4">
|
||
<div>
|
||
<h3 className="text-lg font-medium">可接收文件</h3>
|
||
<p className="mt-1 text-xs text-slate-500">
|
||
{requestSubmitted
|
||
? `已请求 ${requestedFiles.length} 项`
|
||
: `已选择 ${selectedFiles.length} 项 · ${formatTransferSize(selectedSize)}`}
|
||
</p>
|
||
</div>
|
||
{!requestSubmitted && files.length > 0 ? (
|
||
<div className="flex flex-wrap items-center justify-end gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-white/10 text-slate-200 hover:bg-white/10"
|
||
onClick={() => toggleSelectAll(true)}
|
||
>
|
||
全选
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-white/10 text-slate-200 hover:bg-white/10"
|
||
onClick={() => toggleSelectAll(false)}
|
||
>
|
||
清空
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
{!requestSubmitted && files.length > 0 ? (
|
||
<div className="mb-4 flex flex-wrap gap-2">
|
||
<Button
|
||
className="bg-emerald-500 hover:bg-emerald-600 text-white"
|
||
disabled={!canSubmitSelection}
|
||
onClick={() => void submitReceiveRequest(false)}
|
||
>
|
||
接收选中项
|
||
</Button>
|
||
{canZipAllFiles ? (
|
||
<Button
|
||
variant="outline"
|
||
className="border-cyan-400/20 bg-cyan-500/10 text-cyan-100 hover:bg-cyan-500/15"
|
||
disabled={!dataChannelRef.current || dataChannelRef.current.readyState !== 'open'}
|
||
onClick={() => void submitReceiveRequest(true, files.map((file) => file.id))}
|
||
>
|
||
<Archive className="mr-2 h-4 w-4" />
|
||
全部下载 ZIP
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="space-y-3">
|
||
{files.length === 0 ? (
|
||
<div className="rounded-xl border border-dashed border-white/10 bg-white/[0.02] px-4 py-5 text-sm text-slate-500">
|
||
连接建立后会先同步文件清单，你可以在这里先勾选想接收的内容。
|
||
</div>
|
||
) : (
|
||
files.map((file) => (
|
||
<div key={file.id} className="rounded-xl border border-white/5 bg-white/[0.03] p-4">
|
||
<div className="flex items-start gap-3">
|
||
{!requestSubmitted ? (
|
||
<button
|
||
type="button"
|
||
className="mt-0.5 text-slate-300 hover:text-white"
|
||
onClick={() => toggleFileSelection(file.id)}
|
||
aria-label={file.selected ? '取消选择文件' : '选择文件'}
|
||
>
|
||
{file.selected ? <CheckSquare className="h-5 w-5 text-emerald-400" /> : <Square className="h-5 w-5" />}
|
||
</button>
|
||
) : null}
|
||
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 shrink-0">
|
||
<FileIcon className="h-5 w-5 text-emerald-400" />
|
||
</div>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate text-sm font-medium text-slate-100">{file.name}</p>
|
||
<p className="truncate text-xs text-slate-500 mt-1">
|
||
{file.relativePath !== file.name ? `${file.relativePath} · ` : ''}
|
||
{formatTransferSize(file.size)}
|
||
</p>
|
||
</div>
|
||
|
||
{requestSubmitted ? (
|
||
file.requested ? (
|
||
file.downloadUrl ? (
|
||
<div className="flex items-center gap-2">
|
||
<a
|
||
href={file.downloadUrl}
|
||
download={file.name}
|
||
className="rounded-lg border border-white/10 px-3 py-2 text-xs text-slate-200 transition-colors hover:bg-white/10"
|
||
>
|
||
下载
|
||
</a>
|
||
{authSession?.token ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-white/10 text-slate-200 hover:bg-white/10"
|
||
disabled={savingFileId === file.id || file.savedToNetdisk}
|
||
onClick={() => setSavePathPickerFileId(file.id)}
|
||
>
|
||
{file.savedToNetdisk ? '已存入网盘' : savingFileId === file.id ? '存入中...' : '存入网盘'}
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<span className="text-xs text-emerald-300">{file.progress}%</span>
|
||
)
|
||
) : (
|
||
<span className="text-xs text-slate-500">未接收</span>
|
||
)
|
||
) : null}
|
||
</div>
|
||
|
||
{requestSubmitted && file.requested ? (
|
||
<div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-black/40">
|
||
<div className="h-full rounded-full bg-emerald-400" style={{width: `${file.progress}%`}} />
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{!embedded ? (
|
||
<div className="mt-10 grid gap-6 md:grid-cols-2">
|
||
<div className="rounded-2xl border border-white/5 bg-white/[0.02] p-5">
|
||
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500/10">
|
||
<Shield className="h-5 w-5 text-emerald-400" />
|
||
</div>
|
||
<h4 className="text-sm font-medium text-slate-100 mb-1">后端只做信令</h4>
|
||
<p className="text-xs leading-6 text-slate-500">当前页面通过后端交换 offer、answer 和 ICE candidate，但文件字节不走服务器中转。</p>
|
||
</div>
|
||
<div className="rounded-2xl border border-white/5 bg-white/[0.02] p-5">
|
||
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500/10">
|
||
<Archive className="h-5 w-5 text-cyan-400" />
|
||
</div>
|
||
<h4 className="text-sm font-medium text-slate-100 mb-1">先选文件，再接收下载</h4>
|
||
<p className="text-xs leading-6 text-slate-500">文件清单会先同步到页面，多文件可以勾选接收，整包接收时会在浏览器内直接生成 ZIP。</p>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<NetdiskPathPickerModal
|
||
isOpen={Boolean(savePathPickerFileId)}
|
||
title="选择存入位置"
|
||
description="选择保存到网盘的根目录，快传里的相对目录结构会继续保留。"
|
||
initialPath={saveRootPath}
|
||
confirmLabel="存入这里"
|
||
confirmPathPreview={(path) => {
|
||
const completedFile = savePathPickerFileId ? completedFilesRef.current.get(savePathPickerFileId) : null;
|
||
return completedFile ? resolveNetdiskSaveDirectory(completedFile.relativePath, path) : path;
|
||
}}
|
||
onClose={() => setSavePathPickerFileId(null)}
|
||
onConfirm={async (path) => {
|
||
if (!savePathPickerFileId) {
|
||
return;
|
||
}
|
||
setSaveRootPath(path);
|
||
await saveCompletedFile(savePathPickerFileId, path);
|
||
setSavePathPickerFileId(null);
|
||
}}
|
||
/>
|
||
</>
|
||
);
|
||
|
||
if (embedded) {
|
||
return panelContent;
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#07101D] px-4 py-8 text-white">
|
||
<div className="mx-auto w-full max-w-4xl">
|
||
{panelContent}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|