From 7e65ae975fda32b6588fc2ef9e7bdcc096b48a06 Mon Sep 17 00:00:00 2001
From: ice-a <ice-a@users.noreply.github.com>
Date: Fri, 16 Oct 2026 19:43:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8F=E8=A7=88=E5=99=A8=E7=AB=AF=20?=
 =?UTF-8?q?P2P=20=E5=8F=96=E6=B8=85=E5=8D=95/=E9=A2=84=E8=A7=88=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=BF=9B=E5=BA=A6=E4=B8=8E=E8=B6=85=E6=97=B6=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/css/main.css          |  3 ++
 app/components/ImagePreview.vue  | 20 ++++++++---
 app/components/TorrentDetail.vue | 13 +++++--
 app/utils/clientTorrent.ts       | 62 ++++++++++++++++++++++++++++++--
 4 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index c62d863..2360345 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -365,6 +365,9 @@ h3 { font-family: var(--display); font-size: 15px; margin: 0; font-weight: 600;
 .spin { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--line-2); border-top-color: var(--acc); border-radius: 50%; animation: spin 0.7s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
+.bar { width: min(360px, 80%); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
+.bar > i { display: block; height: 100%; background: var(--acc); transition: width 0.25s ease; }
+
 .footer { border-top: 1px solid var(--line); padding: 16px 0 26px; color: var(--fg-mute); font-family: var(--mono); font-size: 11px; }
 
 /* 图片预览弹层 */
diff --git a/app/components/ImagePreview.vue b/app/components/ImagePreview.vue
index b54bacd..3a5af8c 100644
--- a/app/components/ImagePreview.vue
+++ b/app/components/ImagePreview.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TorrentFileEntry } from '~/types/api'
-import { readFileBytesClient } from '~/utils/clientTorrent'
+import { formatBytes } from '~/utils/format'
+import { readFileBytesClient, type FileProgress } from '~/utils/clientTorrent'
 
 const props = defineProps<{
   infoHash: string
@@ -15,6 +16,8 @@ const emit = defineEmits<{ close: []; 'update:index': [value: number] }>()
 const status = ref<'loading' | 'ok' | 'err'>('loading')
 const errorText = ref('')
 const src = ref('')
+const progress = ref(0)
+const progressText = ref('')
 let objectUrl = ''
 
 const MIME: Record<string, string> = {
@@ -50,10 +53,18 @@ async function load() {
   revoke()
   src.value = ''
   errorText.value = ''
+  progress.value = 0
+  progressText.value = ''
   status.value = 'loading'
   try {
     // 优先在用户浏览器里用 WebRTC 从 P2P 网络直接拉取图片字节（不经过 Vercel/Serverless）
-    const bytes = await readFileBytesClient(props.magnet, current.value?.path || '', 25000)
+    const bytes = await readFileBytesClient(props.magnet, current.value?.path || '', {
+      timeoutMs: 25000,
+      onProgress: (p: FileProgress) => {
+        progress.value = p.progress
+        progressText.value = p.message
+      }
+    })
     const mime = MIME[extOf(current.value?.path || '')] || 'application/octet-stream'
     objectUrl = URL.createObjectURL(new Blob([bytes], { type: mime }))
     src.value = objectUrl
@@ -119,8 +130,9 @@ onBeforeUnmount(() => {
       </div>
 
       <div class="lightbox-bd">
-        <div v-if="status === 'loading'" class="empty">
-          <span class="spin" /> 正在从做种节点拉取这张图片，取决于对方的上传速度…
+        <div v-if="status === 'loading'" class="empty stack sm">
+          <span class="spin" /> {{ progressText || '正在通过 WebRTC 从做种节点拉取图片…' }}
+          <div v-if="progress > 0" class="bar"><i :style="{ width: (progress * 100).toFixed(0) + '%' }" /></div>
         </div>
         <div v-else-if="status === 'err'" class="stack sm" style="padding: 22px">
           <div class="note err">{{ errorText }}</div>
diff --git a/app/components/TorrentDetail.vue b/app/components/TorrentDetail.vue
index bc9b22b..a3ef9de 100644
--- a/app/components/TorrentDetail.vue
+++ b/app/components/TorrentDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TorrentFileEntry, TorrentView } from '~/types/api'
-import { resolveMetadataClient } from '~/utils/clientTorrent'
+import { resolveMetadataClient, type ResolveProgress } from '~/utils/clientTorrent'
 
 const props = defineProps<{
   torrent: TorrentView
@@ -12,6 +12,7 @@ const emit = defineEmits<{ resolved: [payload: { files: TorrentFileEntry[]; size
 
 const local = ref<TorrentView>({ ...props.torrent })
 const resolving = ref(false)
+const resolveStatus = ref('')
 const showTrackers = ref(false)
 
 watch(
@@ -61,6 +62,7 @@ function applyResolved(res: { files: TorrentFileEntry[]; size: number; name: str
 
 async function doResolve() {
   resolving.value = true
+  resolveStatus.value = ''
   try {
     // 服务端先尝试（缓存服务取清单，自托管还会走 P2P），成功即返回并落库
     const res = await $fetch<{ files: TorrentFileEntry[]; size: number; name: string }>(
@@ -72,7 +74,12 @@ async function doResolve() {
   } catch {
     // 服务端无法走 P2P（如 Vercel/Serverless）→ 回退到浏览器端 WebRTC 直接解析
     try {
-      const meta = await resolveMetadataClient(local.value.magnet, 30000)
+      const meta = await resolveMetadataClient(local.value.magnet, {
+      timeoutMs: 30000,
+      onProgress: (p: ResolveProgress) => {
+        resolveStatus.value = p.message
+      }
+    })
       applyResolved(meta)
       pushToast('ok', '通过浏览器 P2P 解析文件清单', `共 ${meta.files.length} 个文件 / ${formatBytes(meta.size)}`)
     } catch (err2) {
@@ -165,6 +172,8 @@ onMounted(() => {
       文件清单里有 {{ previewImages.length }} 张图片可以点「预览」直接看：只会按需拉取这几张图所在的分片，不会下载整个种子。
     </div>
 
+    <div v-if="resolving && resolveStatus" class="note warn">{{ resolveStatus }}</div>
+
     <div class="panel">
       <div class="panel-bd tight">
         <FileTable
diff --git a/app/utils/clientTorrent.ts b/app/utils/clientTorrent.ts
index fc88af9..2e89f36 100644
--- a/app/utils/clientTorrent.ts
+++ b/app/utils/clientTorrent.ts
@@ -57,20 +57,50 @@ function waitForMetadata(torrent: any, timeoutMs: number): Promise<void> {
   })
 }
 
+export interface ResolveProgress {
+  phase: 'connecting' | 'metadata' | 'done'
+  peers: number
+  message: string
+}
+
+export interface FileProgress {
+  progress: number
+  peers: number
+  downloaded: number
+  length: number
+  message: string
+}
+
 export async function resolveMetadataClient(
   magnet: string,
-  timeoutMs = 30000
+  opts: { timeoutMs?: number; onProgress?: (p: ResolveProgress) => void } = {}
 ): Promise<{ name: string; files: { path: string; length: number }[]; size: number }> {
+  const onProgress = opts.onProgress
+  const timeoutMs = opts.timeoutMs ?? 30000
   const WebTorrent = await loadWebTorrent()
   const client = new WebTorrent()
   try {
     const torrent = client.add(withWsTrackers(magnet))
+    const report = (phase: ResolveProgress['phase'], message?: string) => {
+      const peers = torrent.numPeers ?? 0
+      onProgress?.({
+        phase,
+        peers,
+        message:
+          message ??
+          (peers > 0 ? `已连接 ${peers} 个节点，正在获取元数据…` : '正在通过 WebRTC 寻找 P2P 节点…')
+      })
+    }
+    torrent.on('wire', () => report('connecting'))
+    torrent.on('metadata', () => report('metadata', '已拿到元数据，正在整理文件清单…'))
     await waitForMetadata(torrent, timeoutMs)
+    report('metadata', '已拿到元数据，正在整理文件清单…')
     const files = (torrent.files || []).map((f: any) => ({
       path: normPath(String(f.path || f.name || '')),
       length: Number(f.length) || 0
     }))
     if (!files.length) throw new Error('已连上节点，但对方没有返回任何文件信息')
+    onProgress?.({ phase: 'done', peers: torrent.numPeers ?? 0, message: `共 ${files.length} 个文件` })
     return { name: String(torrent.name || ''), files, size: files.reduce((s, f) => s + f.length, 0) }
   } finally {
     try {
@@ -84,8 +114,10 @@ export async function resolveMetadataClient(
 export async function readFileBytesClient(
   magnet: string,
   filePath: string,
-  timeoutMs = 25000
+  opts: { timeoutMs?: number; onProgress?: (p: FileProgress) => void } = {}
 ): Promise<ArrayBuffer> {
+  const onProgress = opts.onProgress
+  const timeoutMs = opts.timeoutMs ?? 25000
   const WebTorrent = await loadWebTorrent()
   const client = new WebTorrent()
   try {
@@ -95,7 +127,31 @@ export async function readFileBytesClient(
       (f: any) => normPath(String(f.path || f.name || '')) === normPath(filePath)
     )
     if (!target) throw new Error('这个种子里没有该文件，文件清单可能已过期')
-    return await target.arrayBuffer()
+
+    const report = () => {
+      const peers = torrent.numPeers ?? 0
+      const progress = Number(target.progress) || 0
+      onProgress?.({
+        progress,
+        peers,
+        downloaded: Number(target.downloaded) || 0,
+        length: Number(target.length) || 0,
+        message:
+          peers > 0 ? `下载中 ${Math.round(progress * 100)}% · ${peers} 个节点` : '正在连接 P2P 节点…'
+      })
+    }
+    torrent.on('wire', report)
+    if (typeof target.on === 'function') target.on('download', report)
+    report()
+    const ab = await target.arrayBuffer()
+    onProgress?.({
+      progress: 1,
+      peers: torrent.numPeers ?? 0,
+      downloaded: Number(target.length) || 0,
+      length: Number(target.length) || 0,
+      message: '完成'
+    })
+    return ab
   } finally {
     try {
       client.destroy()