From cc6cb76d67bc1f9cdfd673356cac5eb57b0e49bf Mon Sep 17 00:00:00 2001
From: ice-a <ice-a@users.noreply.github.com>
Date: Fri, 16 Oct 2026 19:39:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E6=B8=85=E5=8D=95?=
 =?UTF-8?q?=E4=B8=8E=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E7=9A=84=20P2P=20?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E6=8C=AA=E5=88=B0=E6=B5=8F=E8=A7=88=E5=99=A8?=
 =?UTF-8?q?=E7=AB=AF(WebRTC)=EF=BC=8C=E6=9C=8D=E5=8A=A1=E7=AB=AF=E4=BB=85?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98=E5=85=9C=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ImagePreview.vue  |  58 +++++++++++-----
 app/components/TorrentDetail.vue |  33 ++++++---
 app/utils/clientTorrent.ts       | 115 +++++++++++++++++++++++++++++++
 nuxt.config.ts                   |   8 +++
 package.json                     |   3 +-
 5 files changed, 189 insertions(+), 28 deletions(-)
 create mode 100644 app/utils/clientTorrent.ts

diff --git a/app/components/ImagePreview.vue b/app/components/ImagePreview.vue
index 03f79a5..b54bacd 100644
--- a/app/components/ImagePreview.vue
+++ b/app/components/ImagePreview.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TorrentFileEntry } from '~/types/api'
+import { readFileBytesClient } from '~/utils/clientTorrent'
 
 const props = defineProps<{
   infoHash: string
@@ -16,6 +17,20 @@ const errorText = ref('')
 const src = ref('')
 let objectUrl = ''
 
+const MIME: Record<string, string> = {
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  avif: 'image/avif'
+}
+function extOf(p: string): string {
+  const i = p.lastIndexOf('.')
+  return i >= 0 ? p.slice(i + 1).toLowerCase() : ''
+}
+
 const current = computed<TorrentFileEntry | undefined>(() => props.images[props.index])
 const requestUrl = computed(
   () =>
@@ -37,25 +52,34 @@ async function load() {
   errorText.value = ''
   status.value = 'loading'
   try {
-    const res = await fetch(requestUrl.value)
-    if (!res.ok) {
-      // 服务端用 statusMessage 带上可读原因：没有做种节点 / 图片过大 / 文件不存在
-      const text = await res.text()
-      let message = text
-      try {
-        const json = JSON.parse(text)
-        message = json.statusMessage || json.message || text
-      } catch {
-        /* 不是 JSON 就用原文 */
-      }
-      throw new Error(message || `请求失败（HTTP ${res.status}）`)
-    }
-    objectUrl = URL.createObjectURL(await res.blob())
+    // 优先在用户浏览器里用 WebRTC 从 P2P 网络直接拉取图片字节（不经过 Vercel/Serverless）
+    const bytes = await readFileBytesClient(props.magnet, current.value?.path || '', 25000)
+    const mime = MIME[extOf(current.value?.path || '')] || 'application/octet-stream'
+    objectUrl = URL.createObjectURL(new Blob([bytes], { type: mime }))
     src.value = objectUrl
     status.value = 'ok'
-  } catch (err) {
-    errorText.value = errorMessage(err)
-    status.value = 'err'
+  } catch {
+    // 回退到服务端预览（自托管环境可用；Serverless 上也会失败，此时给出可读错误）
+    try {
+      const res = await fetch(requestUrl.value)
+      if (!res.ok) {
+        const text = await res.text()
+        let message = text
+        try {
+          const json = JSON.parse(text)
+          message = json.statusMessage || json.message || text
+        } catch {
+          /* 不是 JSON 就用原文 */
+        }
+        throw new Error(message || `请求失败（HTTP ${res.status}）`)
+      }
+      objectUrl = URL.createObjectURL(await res.blob())
+      src.value = objectUrl
+      status.value = 'ok'
+    } catch (err) {
+      errorText.value = errorMessage(err)
+      status.value = 'err'
+    }
   }
 }
 
diff --git a/app/components/TorrentDetail.vue b/app/components/TorrentDetail.vue
index d5313a4..bc9b22b 100644
--- a/app/components/TorrentDetail.vue
+++ b/app/components/TorrentDetail.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TorrentFileEntry, TorrentView } from '~/types/api'
+import { resolveMetadataClient } from '~/utils/clientTorrent'
 
 const props = defineProps<{
   torrent: TorrentView
@@ -49,24 +50,36 @@ const sourceIcon: Record<string, string> = {
   database: '数据库'
 }
 
+function applyResolved(res: { files: TorrentFileEntry[]; size: number; name: string }) {
+  local.value.files = res.files
+  local.value.size = res.size
+  local.value.fileCount = res.files.length
+  local.value.resolveError = null
+  if (res.name) local.value.name = res.name
+  emit('resolved', res)
+}
+
 async function doResolve() {
   resolving.value = true
   try {
+    // 服务端先尝试（缓存服务取清单，自托管还会走 P2P），成功即返回并落库
     const res = await $fetch<{ files: TorrentFileEntry[]; size: number; name: string }>(
       `/api/torrent/${local.value.infoHash}/resolve`,
       { method: 'POST', body: { magnet: local.value.magnet } }
     )
-    local.value.files = res.files
-    local.value.size = res.size
-    local.value.fileCount = res.files.length
-    local.value.resolveError = null
-    if (res.name) local.value.name = res.name
-    emit('resolved', res)
+    applyResolved(res)
     pushToast('ok', '文件清单已解析', `共 ${res.files.length} 个文件 / ${formatBytes(res.size)}`)
-  } catch (err) {
-    const msg = errorMessage(err)
-    local.value.resolveError = msg
-    pushToast('err', '解析失败', msg)
+  } catch {
+    // 服务端无法走 P2P（如 Vercel/Serverless）→ 回退到浏览器端 WebRTC 直接解析
+    try {
+      const meta = await resolveMetadataClient(local.value.magnet, 30000)
+      applyResolved(meta)
+      pushToast('ok', '通过浏览器 P2P 解析文件清单', `共 ${meta.files.length} 个文件 / ${formatBytes(meta.size)}`)
+    } catch (err2) {
+      const msg = errorMessage(err2)
+      local.value.resolveError = msg
+      pushToast('err', '解析失败', msg)
+    }
   } finally {
     resolving.value = false
   }
diff --git a/app/utils/clientTorrent.ts b/app/utils/clientTorrent.ts
new file mode 100644
index 0000000..fc88af9
--- /dev/null
+++ b/app/utils/clientTorrent.ts
@@ -0,0 +1,115 @@
+// 浏览器端 WebTorrent（WebRTC）：把 P2P 流量放到用户自己的设备，
+// 绕开 Vercel / Cloudflare 等 Serverless 不支持 UDP/DHT 的限制。
+// 服务端仍保留非 P2P 的缓存服务兜底；这里是真正的 P2P 取数据路径。
+
+// 浏览器只支持 WebRTC 节点，需要走 wss:// 的 tracker 才能发现对端
+const WS_TRACKERS = [
+  'wss://tracker.openwebtorrent.com',
+  'wss://tracker.btorrent.xyz',
+  'wss://tracker.webtorrent.dev'
+]
+
+function normPath(p: string): string {
+  return p.replace(/\\/g, '/').replace(/^\.\//, '')
+}
+
+function withWsTrackers(magnet: string): string {
+  const existing = new Set<string>()
+  for (const m of magnet.matchAll(/[?&]tr=([^&]+)/g)) {
+    try {
+      existing.add(decodeURIComponent(m[1]))
+    } catch {
+      /* ignore */
+    }
+  }
+  const add = WS_TRACKERS.filter((t) => !existing.has(t))
+  if (!add.length) return magnet
+  const sep = magnet.includes('?') ? '&' : '?'
+  return magnet + sep + add.map((t) => `tr=${encodeURIComponent(t)}`).join('&')
+}
+
+let wtPromise: Promise<any> | null = null
+function loadWebTorrent(): Promise<any> {
+  if (!wtPromise) {
+    // 仅在浏览器运行时按需加载，Vite 会将其单独拆包；服务端不会执行到此处
+    wtPromise = import('webtorrent').then((m) => (m as any).default || m)
+  }
+  return wtPromise
+}
+
+function waitForMetadata(torrent: any, timeoutMs: number): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (torrent.metadata || torrent.ready) return resolve()
+    const timer = setTimeout(
+      () => reject(new Error('浏览器 P2P 获取元数据超时，可能该种子没有 WebRTC 节点')),
+      timeoutMs
+    )
+    const done = () => {
+      clearTimeout(timer)
+      resolve()
+    }
+    torrent.on('metadata', done)
+    torrent.on('ready', done)
+    torrent.on('error', (e: Error) => {
+      clearTimeout(timer)
+      reject(e)
+    })
+  })
+}
+
+export async function resolveMetadataClient(
+  magnet: string,
+  timeoutMs = 30000
+): Promise<{ name: string; files: { path: string; length: number }[]; size: number }> {
+  const WebTorrent = await loadWebTorrent()
+  const client = new WebTorrent()
+  try {
+    const torrent = client.add(withWsTrackers(magnet))
+    await waitForMetadata(torrent, timeoutMs)
+    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('已连上节点，但对方没有返回任何文件信息')
+    return { name: String(torrent.name || ''), files, size: files.reduce((s, f) => s + f.length, 0) }
+  } finally {
+    try {
+      client.destroy()
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+export async function readFileBytesClient(
+  magnet: string,
+  filePath: string,
+  timeoutMs = 25000
+): Promise<ArrayBuffer> {
+  const WebTorrent = await loadWebTorrent()
+  const client = new WebTorrent()
+  try {
+    const torrent = client.add(withWsTrackers(magnet))
+    await waitForMetadata(torrent, timeoutMs)
+    const target = (torrent.files || []).find(
+      (f: any) => normPath(String(f.path || f.name || '')) === normPath(filePath)
+    )
+    if (!target) throw new Error('这个种子里没有该文件，文件清单可能已过期')
+    return await target.arrayBuffer()
+  } finally {
+    try {
+      client.destroy()
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+export async function isClientWebTorrentAvailable(): Promise<boolean> {
+  try {
+    await loadWebTorrent()
+    return true
+  } catch {
+    return false
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cad4dc1..357cec8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,3 +1,5 @@
+import nodePolyfills from 'vite-plugin-node-polyfills'
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: false },
@@ -27,6 +29,12 @@ export default defineNuxtConfig({
     }
   },
   vite: {
+    plugins: [
+      nodePolyfills({
+        globals: { Buffer: true, global: true, process: true },
+        protocolImports: true
+      })
+    ],
     server: {
       fs: { strict: false }
     }
diff --git a/package.json b/package.json
index 66c2017..c38b0b7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.13.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vite-plugin-node-polyfills": "^0.23.0"
   }
 }