yoyuz/my_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Android WebView API access and mobile shell layout

Browse Source
This commit is contained in:
yoyuzh
2026-04-03 14:37:21 +08:00
parent f02ff9342f
commit 56f2a9fe0d
121 changed files with 4751 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/pages/Files.tsx
View File

@@ -68,6 +68,7 @@ import {
buildDirectoryTree,
createExpandedDirectorySet,
getMissingDirectoryListingPaths,
hasLoadedDirectoryListing,
mergeDirectoryChildren,
toDirectoryPath,
type DirectoryChildrenMap,
@@ -349,7 +350,7 @@ export default function Files() {
}
next.add(path);
shouldLoadChildren = !(path in directoryChildren);
shouldLoadChildren = !hasLoadedDirectoryListing(pathParts, loadedDirectoryPaths);
return next;
});

233
front/src/pages/Transfer.tsx
View File

@@ -25,6 +25,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '@/src/auth/AuthProvider';
import { Button } from '@/src/components/ui/button';
import { appendTransferRelayHint } from '@/src/lib/transfer-ice';
import { buildTransferShareUrl, getTransferRouterMode } from '@/src/lib/transfer-links';
import {
createTransferFileManifest,
@@ -35,12 +36,15 @@ import {
createTransferFileMetaMessage,
type TransferFileDescriptor,
SIGNAL_POLL_INTERVAL_MS,
TRANSFER_CHUNK_SIZE,
} from '@/src/lib/transfer-protocol';
import { waitForTransferChannelDrain } from '@/src/lib/transfer-runtime';
import { flushPendingRemoteIceCandidates, handleRemoteIceCandidate } from '@/src/lib/transfer-signaling';
import {
shouldPublishTransferProgress,
resolveTransferChunkSize,
} from '@/src/lib/transfer-runtime';
import { createTransferPeer, type TransferPeerAdapter } from '@/src/lib/transfer-peer';
import {
DEFAULT_TRANSFER_ICE_SERVERS,
TRANSFER_HAS_RELAY_SUPPORT,
createTransferSession,
listMyOfflineTransferSessions,
pollTransferSignals,
@@ -108,7 +112,7 @@ function getPhaseMessage(mode: TransferMode, phase: SendPhase, errorMessage: str
export default function Transfer() {
const navigate = useNavigate();
const { session: authSession } = useAuth();
const { ready: authReady, session: authSession } = useAuth();
const [searchParams] = useSearchParams();
const sessionId = searchParams.get('session');
const isAuthenticated = Boolean(authSession?.token);
@@ -134,14 +138,14 @@ export default function Transfer() {
const copiedTimerRef = useRef<number | null>(null);
const historyCopiedTimerRef = useRef<number | null>(null);
const pollTimerRef = useRef<number | null>(null);
const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
const dataChannelRef = useRef<RTCDataChannel | null>(null);
const peerRef = useRef<TransferPeerAdapter | null>(null);
const cursorRef = useRef(0);
const bootstrapIdRef = useRef(0);
const totalBytesRef = useRef(0);
const sentBytesRef = useRef(0);
const lastSendProgressPublishAtRef = useRef(0);
const lastPublishedSendProgressRef = useRef(0);
const sendingStartedRef = useRef(false);
const pendingRemoteCandidatesRef = useRef<RTCIceCandidateInit[]>([]);
const manifestRef = useRef<TransferFileDescriptor[]>([]);
useEffect(() => {
@@ -252,19 +256,31 @@ export default function Transfer() {
pollTimerRef.current = null;
}
if (dataChannelRef.current) {
dataChannelRef.current.close();
dataChannelRef.current = null;
}
if (peerConnectionRef.current) {
peerConnectionRef.current.close();
peerConnectionRef.current = null;
}
const peer = peerRef.current;
peerRef.current = null;
peer?.destroy();
cursorRef.current = 0;
lastSendProgressPublishAtRef.current = 0;
lastPublishedSendProgressRef.current = 0;
sendingStartedRef.current = false;
pendingRemoteCandidatesRef.current = [];
}
function publishSendProgress(nextProgress: number, options?: {force?: boolean}) {
const normalizedProgress = Math.max(0, Math.min(100, nextProgress));
const now = globalThis.performance?.now?.() ?? Date.now();
if (!options?.force && !shouldPublishTransferProgress({
nextProgress: normalizedProgress,
previousProgress: lastPublishedSendProgressRef.current,
now,
lastPublishedAt: lastSendProgressPublishAtRef.current,
})) {
return;
}
lastSendProgressPublishAtRef.current = now;
lastPublishedSendProgressRef.current = normalizedProgress;
setSendProgress(normalizedProgress);
}
function resetSenderState() {
@@ -272,7 +288,7 @@ export default function Transfer() {
setSession(null);
setSelectedFiles([]);
setSendPhase('idle');
setSendProgress(0);
publishSendProgress(0, {force: true});
setSendError('');
}
@@ -334,7 +350,7 @@ export default function Transfer() {
cleanupCurrentTransfer();
setSendError('');
setSendPhase('creating');
setSendProgress(0);
publishSendProgress(0, {force: true});
manifestRef.current = createTransferFileManifest(files);
totalBytesRef.current = 0;
sentBytesRef.current = 0;
@@ -367,7 +383,7 @@ export default function Transfer() {
setSendPhase('uploading');
totalBytesRef.current = files.reduce((sum, file) => sum + file.size, 0);
sentBytesRef.current = 0;
setSendProgress(0);
publishSendProgress(0, {force: true});
for (const [index, file] of files.entries()) {
if (bootstrapIdRef.current !== bootstrapId) {
@@ -390,95 +406,71 @@ export default function Transfer() {
}
if (totalBytesRef.current > 0) {
setSendProgress(Math.min(99, Math.round((sentBytesRef.current / totalBytesRef.current) * 100)));
publishSendProgress(Math.min(99, Math.round((sentBytesRef.current / totalBytesRef.current) * 100)));
}
});
}
setSendProgress(100);
publishSendProgress(100, {force: true});
setSendPhase('completed');
void loadOfflineHistory({silent: true});
}
async function setupSenderPeer(createdSession: TransferSessionResponse, files: File[], bootstrapId: number) {
const connection = new RTCPeerConnection({
iceServers: DEFAULT_TRANSFER_ICE_SERVERS,
});
const channel = connection.createDataChannel('portal-transfer', {
ordered: true,
});
peerConnectionRef.current = connection;
dataChannelRef.current = channel;
channel.binaryType = 'arraybuffer';
connection.onicecandidate = (event) => {
if (!event.candidate) {
return;
}
void postTransferSignal(
createdSession.sessionId,
'sender',
'ice-candidate',
JSON.stringify(event.candidate.toJSON()),
);
};
connection.onconnectionstatechange = () => {
if (connection.connectionState === 'connected') {
const peer = createTransferPeer({
initiator: true,
peerOptions: {
config: {
iceServers: DEFAULT_TRANSFER_ICE_SERVERS,
},
},
onSignal: (payload) => {
void postTransferSignal(createdSession.sessionId, 'sender', 'signal', payload);
},
onConnect: () => {
if (bootstrapIdRef.current !== bootstrapId) {
return;
}
setSendPhase((current) => (current === 'transferring' || current === 'completed' ? current : 'connecting'));
}
peer.send(createTransferFileManifestMessage(manifestRef.current));
},
onData: (payload) => {
if (typeof payload !== 'string') {
return;
}
if (connection.connectionState === 'failed' || connection.connectionState === 'disconnected') {
const message = parseJsonPayload<{type?: string; fileIds?: string[]}>(payload);
if (!message || message.type !== 'receive-request' || !Array.isArray(message.fileIds) || sendingStartedRef.current) {
return;
}
const requestedFiles = manifestRef.current.filter((item) => message.fileIds?.includes(item.id));
if (requestedFiles.length === 0) {
return;
}
sendingStartedRef.current = true;
totalBytesRef.current = requestedFiles.reduce((sum, file) => sum + file.size, 0);
sentBytesRef.current = 0;
publishSendProgress(0, {force: true});
void sendSelectedFiles(peer, files, requestedFiles, bootstrapId);
},
onError: (error) => {
if (bootstrapIdRef.current !== bootstrapId) {
return;
}
setSendPhase('error');
setSendError('浏览器直连失败，请重新生成分享链接再试一次。');
}
};
channel.onopen = () => {
channel.send(createTransferFileManifestMessage(manifestRef.current));
};
channel.onmessage = (event) => {
if (typeof event.data !== 'string') {
return;
}
const message = parseJsonPayload<{type?: string; fileIds?: string[];}>(event.data);
if (!message || message.type !== 'receive-request' || !Array.isArray(message.fileIds)) {
return;
}
if (sendingStartedRef.current) {
return;
}
const requestedFiles = manifestRef.current.filter((item) => message.fileIds?.includes(item.id));
if (requestedFiles.length === 0) {
return;
}
sendingStartedRef.current = true;
totalBytesRef.current = requestedFiles.reduce((sum, file) => sum + file.size, 0);
sentBytesRef.current = 0;
setSendProgress(0);
void sendSelectedFiles(channel, files, requestedFiles, bootstrapId);
};
channel.onerror = () => {
setSendPhase('error');
setSendError('数据通道建立失败，请重新开始本次快传。');
};
startSenderPolling(createdSession.sessionId, connection, bootstrapId);
const offer = await connection.createOffer();
await connection.setLocalDescription(offer);
await postTransferSignal(createdSession.sessionId, 'sender', 'offer', JSON.stringify(offer));
setSendError(appendTransferRelayHint(
error.message || '数据通道建立失败，请重新开始本次快传。',
TRANSFER_HAS_RELAY_SUPPORT,
));
},
});
peerRef.current = peer;
startSenderPolling(createdSession.sessionId, bootstrapId);
}
function startSenderPolling(sessionId: string, connection: RTCPeerConnection, bootstrapId: number) {
function startSenderPolling(sessionId: string, bootstrapId: number) {
let polling = false;
pollTimerRef.current = window.setInterval(() => {
@@ -502,27 +494,8 @@ export default function Transfer() {
continue;
}
if (item.type === 'answer' && !connection.currentRemoteDescription) {
const answer = parseJsonPayload<RTCSessionDescriptionInit>(item.payload);
if (answer) {
await connection.setRemoteDescription(answer);
pendingRemoteCandidatesRef.current = await flushPendingRemoteIceCandidates(
connection,
pendingRemoteCandidatesRef.current,
);
}
continue;
}
if (item.type === 'ice-candidate') {
const candidate = parseJsonPayload<RTCIceCandidateInit>(item.payload);
if (candidate) {
pendingRemoteCandidatesRef.current = await handleRemoteIceCandidate(
connection,
pendingRemoteCandidatesRef.current,
candidate,
);
}
if (item.type === 'signal') {
peerRef.current?.applyRemoteSignal(item.payload);
}
}
})
@@ -540,16 +513,17 @@ export default function Transfer() {
}
async function sendSelectedFiles(
channel: RTCDataChannel,
peer: TransferPeerAdapter,
files: File[],
requestedFiles: TransferFileDescriptor[],
bootstrapId: number,
) {
setSendPhase('transferring');
const filesById = new Map(files.map((file) => [createTransferFileId(file), file]));
const chunkSize = resolveTransferChunkSize();
for (const descriptor of requestedFiles) {
if (bootstrapIdRef.current !== bootstrapId || channel.readyState !== 'open') {
if (bootstrapIdRef.current !== bootstrapId || !peer.connected) {
return;
}
@@ -558,31 +532,30 @@ export default function Transfer() {
continue;
}
channel.send(createTransferFileMetaMessage(descriptor));
peer.send(createTransferFileMetaMessage(descriptor));
for (let offset = 0; offset < file.size; offset += TRANSFER_CHUNK_SIZE) {
if (bootstrapIdRef.current !== bootstrapId || channel.readyState !== 'open') {
for (let offset = 0; offset < file.size; offset += chunkSize) {
if (bootstrapIdRef.current !== bootstrapId || !peer.connected) {
return;
}
const chunk = await file.slice(offset, offset + TRANSFER_CHUNK_SIZE).arrayBuffer();
await waitForTransferChannelDrain(channel);
channel.send(chunk);
const chunk = await file.slice(offset, offset + chunkSize).arrayBuffer();
await peer.write(chunk);
sentBytesRef.current += chunk.byteLength;
if (totalBytesRef.current > 0) {
setSendProgress(Math.min(
publishSendProgress(Math.min(
99,
Math.round((sentBytesRef.current / totalBytesRef.current) * 100),
));
}
}
channel.send(createTransferFileCompleteMessage(descriptor.id));
peer.send(createTransferFileCompleteMessage(descriptor.id));
}
channel.send(createTransferCompleteMessage());
setSendProgress(100);
peer.send(createTransferCompleteMessage());
publishSendProgress(100, {force: true});
setSendPhase('completed');
}
@@ -650,10 +623,10 @@ export default function Transfer() {
) : null}
<div className="p-8 min-h-[420px] flex flex-col relative min-w-0">
{!isAuthenticated ? (
{authReady && !isAuthenticated ? (
<div className="mb-6 flex flex-col gap-3 rounded-2xl border border-blue-400/15 bg-blue-500/10 px-4 py-4 text-sm text-blue-100 md:flex-row md:items-center md:justify-between">
<p className="leading-6">
当前无需登录即可使用快传，但仅支持在线发送和在线接收。离线快传仍需登录后使用。
当前无需登录即可在线发送、在线接收和离线接收。只有发离线和把离线文件存入网盘时才需要登录。
</p>
<Button
type="button"

299
front/src/pages/TransferReceive.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from 'react';
import {
Archive,
ArrowLeft,
CheckCircle,
CheckSquare,
DownloadCloud,
@@ -17,6 +18,7 @@ import { NetdiskPathPickerModal } from '@/src/components/ui/NetdiskPathPickerMod
import { Button } from '@/src/components/ui/button';
import { Input } from '@/src/components/ui/input';
import { buildTransferArchiveFileName, createTransferZipArchive } from '@/src/lib/transfer-archive';
import { appendTransferRelayHint } from '@/src/lib/transfer-ice';
import { resolveNetdiskSaveDirectory, saveFileToNetdisk } from '@/src/lib/netdisk-upload';
import {
createTransferReceiveRequestMessage,
@@ -25,10 +27,12 @@ import {
toTransferChunk,
type TransferFileDescriptor,
} from '@/src/lib/transfer-protocol';
import { flushPendingRemoteIceCandidates, handleRemoteIceCandidate } from '@/src/lib/transfer-signaling';
import { shouldPublishTransferProgress } from '@/src/lib/transfer-runtime';
import { createTransferPeer, type TransferPeerAdapter } from '@/src/lib/transfer-peer';
import {
buildOfflineTransferDownloadUrl,
DEFAULT_TRANSFER_ICE_SERVERS,
TRANSFER_HAS_RELAY_SUPPORT,
importOfflineTransferFile,
joinTransferSession,
lookupTransferSession,
@@ -37,7 +41,13 @@ import {
} from '@/src/lib/transfer';
import type { TransferSessionResponse } from '@/src/lib/types';
import { canArchiveTransferSelection, formatTransferSize, sanitizeReceiveCode } from './transfer-state';
import {
buildTransferReceiveSearchParams,
canSubmitReceiveCodeLookupOnEnter,
canArchiveTransferSelection,
formatTransferSize,
sanitizeReceiveCode,
} from './transfer-state';
type ReceivePhase = 'idle' | 'joining' | 'waiting' | 'connecting' | 'receiving' | 'completed' | 'error';
@@ -54,14 +64,6 @@ interface IncomingTransferFile extends TransferFileDescriptor {
receivedBytes: number;
}
function parseJsonPayload<T>(payload: string): T | null {
try {
return JSON.parse(payload) as T;
} catch {
return null;
}
}
interface TransferReceiveProps {
embedded?: boolean;
}
@@ -85,17 +87,19 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
const [savePathPickerFileId, setSavePathPickerFileId] = useState<string | null>(null);
const [saveRootPath, setSaveRootPath] = useState('/下载');
const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
const dataChannelRef = useRef<RTCDataChannel | null>(null);
const peerRef = useRef<TransferPeerAdapter | 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 lastOverallProgressPublishAtRef = useRef(0);
const lastPublishedOverallProgressRef = useRef(0);
const lastFileProgressPublishAtRef = useRef(new Map<string, number>());
const lastPublishedFileProgressRef = useRef(new Map<string, number>());
const downloadUrlsRef = useRef<string[]>([]);
const requestedFileIdsRef = useRef<string[]>([]);
const pendingRemoteCandidatesRef = useRef<RTCIceCandidateInit[]>([]);
const archiveBuiltRef = useRef(false);
const completedFilesRef = useRef(new Map<string, {
name: string;
@@ -117,7 +121,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
setTransferSession(null);
setFiles([]);
setPhase('idle');
setOverallProgress(0);
publishOverallProgress(0, {force: true});
setRequestSubmitted(false);
setArchiveRequested(false);
setArchiveUrl(null);
@@ -133,15 +137,9 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
pollTimerRef.current = null;
}
if (dataChannelRef.current) {
dataChannelRef.current.close();
dataChannelRef.current = null;
}
if (peerConnectionRef.current) {
peerConnectionRef.current.close();
peerConnectionRef.current = null;
}
const peer = peerRef.current;
peerRef.current = null;
peer?.destroy();
for (const url of downloadUrlsRef.current) {
URL.revokeObjectURL(url);
@@ -153,11 +151,50 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
cursorRef.current = 0;
receivedBytesRef.current = 0;
totalBytesRef.current = 0;
lastOverallProgressPublishAtRef.current = 0;
lastPublishedOverallProgressRef.current = 0;
lastFileProgressPublishAtRef.current.clear();
lastPublishedFileProgressRef.current.clear();
requestedFileIdsRef.current = [];
pendingRemoteCandidatesRef.current = [];
archiveBuiltRef.current = false;
}
function publishOverallProgress(nextProgress: number, options?: {force?: boolean}) {
const normalizedProgress = Math.max(0, Math.min(100, nextProgress));
const now = globalThis.performance?.now?.() ?? Date.now();
if (!options?.force && !shouldPublishTransferProgress({
nextProgress: normalizedProgress,
previousProgress: lastPublishedOverallProgressRef.current,
now,
lastPublishedAt: lastOverallProgressPublishAtRef.current,
})) {
return;
}
lastOverallProgressPublishAtRef.current = now;
lastPublishedOverallProgressRef.current = normalizedProgress;
setOverallProgress(normalizedProgress);
}
function shouldPublishFileProgress(fileId: string, nextProgress: number, options?: {force?: boolean}) {
const normalizedProgress = Math.max(0, Math.min(100, nextProgress));
const now = globalThis.performance?.now?.() ?? Date.now();
const previousProgress = lastPublishedFileProgressRef.current.get(fileId) ?? 0;
const lastPublishedAt = lastFileProgressPublishAtRef.current.get(fileId) ?? 0;
if (!options?.force && !shouldPublishTransferProgress({
nextProgress: normalizedProgress,
previousProgress,
now,
lastPublishedAt,
})) {
return false;
}
lastFileProgressPublishAtRef.current.set(fileId, now);
lastPublishedFileProgressRef.current.set(fileId, normalizedProgress);
return true;
}
async function startReceivingSession(sessionId: string) {
const lifecycleId = lifecycleIdRef.current + 1;
lifecycleIdRef.current = lifecycleId;
@@ -166,7 +203,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
setPhase('joining');
setErrorMessage('');
setFiles([]);
setOverallProgress(0);
publishOverallProgress(0, {force: true});
setRequestSubmitted(false);
setArchiveRequested(false);
setArchiveName(buildTransferArchiveFileName('快传文件'));
@@ -199,53 +236,43 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
setFiles(offlineFiles);
setRequestSubmitted(true);
setOverallProgress(offlineFiles.length > 0 ? 100 : 0);
publishOverallProgress(offlineFiles.length > 0 ? 100 : 0, {force: true});
setPhase('completed');
return;
}
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') {
const peer = createTransferPeer({
initiator: false,
peerOptions: {
config: {
iceServers: DEFAULT_TRANSFER_ICE_SERVERS,
},
},
onSignal: (payload) => {
void postTransferSignal(joinedSession.sessionId, 'receiver', 'signal', payload);
},
onConnect: () => {
if (lifecycleIdRef.current !== lifecycleId) {
return;
}
setPhase((current) => (current === 'completed' ? current : 'connecting'));
}
if (connection.connectionState === 'failed' || connection.connectionState === 'disconnected') {
},
onData: (payload) => {
void handleIncomingMessage(payload);
},
onError: (error) => {
if (lifecycleIdRef.current !== lifecycleId) {
return;
}
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);
setErrorMessage(appendTransferRelayHint(
error.message || '浏览器之间的直连失败，请重新打开分享链接。',
TRANSFER_HAS_RELAY_SUPPORT,
));
},
});
peerRef.current = peer;
startReceiverPolling(joinedSession.sessionId, lifecycleId);
setPhase('waiting');
} catch (error) {
if (lifecycleIdRef.current !== lifecycleId) {
@@ -257,7 +284,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
}
}
function startReceiverPolling(sessionId: string, connection: RTCPeerConnection, lifecycleId: number) {
function startReceiverPolling(sessionId: string, lifecycleId: number) {
let polling = false;
pollTimerRef.current = window.setInterval(() => {
@@ -276,33 +303,9 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
cursorRef.current = response.nextCursor;
for (const item of response.items) {
if (item.type === 'offer') {
const offer = parseJsonPayload<RTCSessionDescriptionInit>(item.payload);
if (!offer) {
continue;
}
if (item.type === 'signal') {
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,
);
}
peerRef.current?.applyRemoteSignal(item.payload);
}
}
})
@@ -344,7 +347,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
setArchiveUrl(nextArchiveUrl);
}
async function handleIncomingMessage(data: string | ArrayBuffer | Blob) {
async function handleIncomingMessage(data: string | Uint8Array | ArrayBuffer | Blob) {
if (typeof data === 'string') {
const message = parseTransferControlMessage(data);
@@ -394,7 +397,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
if (message.type === 'transfer-complete') {
await finalizeArchiveDownload();
setOverallProgress(100);
publishOverallProgress(100, {force: true});
setPhase('completed');
}
@@ -418,19 +421,22 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
setPhase('receiving');
if (totalBytesRef.current > 0) {
setOverallProgress(Math.min(99, Math.round((receivedBytesRef.current / totalBytesRef.current) * 100)));
publishOverallProgress(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,
),
);
const nextFileProgress = Math.min(99, Math.round((targetFile.receivedBytes / Math.max(targetFile.size, 1)) * 100));
if (shouldPublishFileProgress(activeFileId, nextFileProgress)) {
setFiles((current) =>
current.map((file) =>
file.id === activeFileId
? {
...file,
progress: nextFileProgress,
}
: file,
),
);
}
}
function finalizeDownloadableFile(fileId: string) {
@@ -531,8 +537,8 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
}
async function submitReceiveRequest(archive: boolean, fileIds?: string[]) {
const channel = dataChannelRef.current;
if (!channel || channel.readyState !== 'open') {
const peer = peerRef.current;
if (!peer || !peer.connected) {
setPhase('error');
setErrorMessage('P2P 通道尚未准备好，请稍后再试。');
return;
@@ -553,7 +559,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
totalBytesRef.current = requestedBytes;
receivedBytesRef.current = 0;
archiveBuiltRef.current = false;
setOverallProgress(0);
publishOverallProgress(0, {force: true});
setArchiveRequested(archive);
setArchiveUrl(null);
setRequestSubmitted(true);
@@ -568,7 +574,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
})),
);
channel.send(createTransferReceiveRequestMessage(requestedIds, archive));
peer.send(createTransferReceiveRequestMessage(requestedIds, archive));
setPhase('waiting');
}
@@ -578,9 +584,10 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
try {
const result = await lookupTransferSession(receiveCode);
setSearchParams({
session: result.sessionId,
});
setSearchParams(buildTransferReceiveSearchParams({
sessionId: result.sessionId,
receiveCode,
}));
} catch (error) {
setPhase('error');
setErrorMessage(error instanceof Error ? error.message : '取件码无效或会话已过期');
@@ -589,13 +596,30 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
}
}
function returnToCodeEntry() {
const nextCode = transferSession?.pickupCode ?? receiveCode;
cleanupReceiver();
setTransferSession(null);
setFiles([]);
setPhase('idle');
setErrorMessage('');
publishOverallProgress(0, {force: true});
setRequestSubmitted(false);
setArchiveRequested(false);
setArchiveUrl(null);
setReceiveCode(sanitizeReceiveCode(nextCode));
setSearchParams(buildTransferReceiveSearchParams({
receiveCode: nextCode,
}));
}
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 canSubmitSelection = Boolean(peerRef.current?.connected && hasSelectableFiles);
const isOfflineSession = transferSession?.mode === 'OFFLINE';
const panelContent = (
@@ -622,6 +646,17 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
<Input
value={receiveCode}
onChange={(event) => setReceiveCode(sanitizeReceiveCode(event.target.value))}
onKeyDown={(event) => {
if (!canSubmitReceiveCodeLookupOnEnter({
key: event.key,
receiveCode,
lookupBusy,
})) {
return;
}
event.preventDefault();
void handleLookupByCode();
}}
inputMode="numeric"
aria-label="六位取件码"
placeholder="请输入 6 位取件码"
@@ -649,18 +684,28 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
<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 className="flex flex-wrap justify-end gap-2">
<Button
variant="outline"
className="border-white/10 text-slate-200 hover:bg-white/10"
onClick={returnToCodeEntry}
>
<ArrowLeft className="mr-2 h-4 w-4" />
返回输入取件码
</Button>
<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>
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
@@ -774,7 +819,7 @@ export default function TransferReceive({ embedded = false }: TransferReceivePro
<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'}
disabled={!peerRef.current?.connected}
onClick={() => void submitReceiveRequest(true, files.map((file) => file.id))}
>
<Archive className="mr-2 h-4 w-4" />

34
front/src/pages/files-tree.test.ts
View File

@@ -5,6 +5,7 @@ import {
buildDirectoryTree,
createExpandedDirectorySet,
getMissingDirectoryListingPaths,
hasLoadedDirectoryListing,
mergeDirectoryChildren,
} from './files-tree';
@@ -83,6 +84,27 @@ test('buildDirectoryTree marks the active branch and nested folders correctly',
]);
});
test('buildDirectoryTree does not leak the active branch child into sibling folders', () => {
const tree = buildDirectoryTree(
{
'/': ['文件夹1', '文件夹2'],
'/文件夹1': ['子文件夹1'],
},
['文件夹1', '子文件夹1'],
new Set(['/', '/文件夹1', '/文件夹2']),
);
assert.deepEqual(tree[1], {
id: '/文件夹2',
name: '文件夹2',
path: ['文件夹2'],
depth: 0,
active: false,
expanded: true,
children: [],
});
});
test('getMissingDirectoryListingPaths requests any unloaded ancestors for a deep current path', () => {
assert.deepEqual(
getMissingDirectoryListingPaths(
@@ -102,3 +124,15 @@ test('getMissingDirectoryListingPaths ignores ancestors that were only inferred
[[], ['文档']],
);
});
test('hasLoadedDirectoryListing only trusts the loaded listing set instead of inferred tree nodes', () => {
assert.equal(
hasLoadedDirectoryListing(['文档'], new Set(['/文档'])),
true,
);
assert.equal(
hasLoadedDirectoryListing(['文档'], new Set(['/文档/课程资料'])),
false,
);
});

10
front/src/pages/files-tree.ts
View File

@@ -61,6 +61,13 @@ export function getMissingDirectoryListingPaths(
return missingPaths;
}
export function hasLoadedDirectoryListing(
pathParts: string[],
loadedDirectoryPaths: Set<string>,
) {
return loadedDirectoryPaths.has(toDirectoryPath(pathParts));
}
export function buildDirectoryTree(
directoryChildren: DirectoryChildrenMap,
currentPath: string[],
@@ -68,7 +75,8 @@ export function buildDirectoryTree(
): DirectoryTreeNode[] {
function getChildNames(parentPath: string, parentParts: string[]) {
const nextNames = new Set(directoryChildren[parentPath] ?? []);
const currentChild = currentPath[parentParts.length];
const isCurrentBranch = parentParts.every((part, index) => currentPath[index] === part);
const currentChild = isCurrentBranch ? currentPath[parentParts.length] : null;
if (currentChild) {
nextNames.add(currentChild);
}

40
front/src/pages/transfer-state.test.ts
View File

@@ -3,6 +3,8 @@ import test from 'node:test';
import { buildTransferShareUrl } from '../lib/transfer-links';
import {
buildTransferReceiveSearchParams,
canSubmitReceiveCodeLookupOnEnter,
getAvailableTransferModes,
getOfflineTransferSessionLabel,
getOfflineTransferSessionSize,
@@ -26,6 +28,44 @@ test('sanitizeReceiveCode keeps only the first six digits', () => {
assert.equal(sanitizeReceiveCode(' 98a76-54321 '), '987654');
});
test('buildTransferReceiveSearchParams toggles between session and code entry states', () => {
assert.equal(
buildTransferReceiveSearchParams({ sessionId: 'session-1', receiveCode: ' 98a76-54321 ' }).toString(),
'session=session-1&code=987654',
);
assert.equal(
buildTransferReceiveSearchParams({ receiveCode: '723325' }).toString(),
'code=723325',
);
assert.equal(
buildTransferReceiveSearchParams({ receiveCode: '' }).toString(),
'',
);
});
test('canSubmitReceiveCodeLookupOnEnter only allows Enter when the lookup is ready', () => {
assert.equal(canSubmitReceiveCodeLookupOnEnter({
key: 'Enter',
receiveCode: '723325',
lookupBusy: false,
}), true);
assert.equal(canSubmitReceiveCodeLookupOnEnter({
key: 'Enter',
receiveCode: '72332',
lookupBusy: false,
}), false);
assert.equal(canSubmitReceiveCodeLookupOnEnter({
key: 'Enter',
receiveCode: '723325',
lookupBusy: true,
}), false);
assert.equal(canSubmitReceiveCodeLookupOnEnter({
key: 'Tab',
receiveCode: '723325',
lookupBusy: false,
}), false);
});
test('formatTransferSize uses readable units', () => {
assert.equal(formatTransferSize(0), '0 B');
assert.equal(formatTransferSize(2048), '2 KB');

25
front/src/pages/transfer-state.ts
View File

@@ -11,6 +11,31 @@ export function sanitizeReceiveCode(value: string) {
return value.replace(/\D/g, '').slice(0, 6);
}
export function buildTransferReceiveSearchParams(params: {
sessionId?: string | null;
receiveCode?: string | null;
}) {
const nextParams = new URLSearchParams();
if (params.sessionId) {
nextParams.set('session', params.sessionId);
}
const normalizedCode = sanitizeReceiveCode(params.receiveCode ?? '');
if (normalizedCode) {
nextParams.set('code', normalizedCode);
}
return nextParams;
}
export function canSubmitReceiveCodeLookupOnEnter(params: {
key: string;
receiveCode: string;
lookupBusy: boolean;
}) {
return params.key === 'Enter' && params.receiveCode.length === 6 && !params.lookupBusy;
}
export function formatTransferSize(bytes: number) {
if (bytes <= 0) {
return '0 B';