feat(sns): 支持朋友圈原图预览与媒体下载

- 预览时优先请求 CDN 原图，并兼容 150、200 和 480 尺寸地址
- 增加图片和视频下载入口、文件命名及失败回退，并补充 URL 回归测试

Author: 2977094657

frontend/pages/sns.vue

@@ -372,6 +372,18 @@
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 5.5a8 8 0 010 13" />
                         </svg>
                       </button>
+
+                      <button
+                        type="button"
+                        class="absolute bottom-2 right-2 z-20 flex h-7 w-7 items-center justify-center rounded-full bg-black/45 text-white opacity-0 transition group-hover:opacity-100 hover:bg-[#07c160]"
+                        title="下载"
+                        aria-label="下载朋友圈媒体"
+                        @click.stop="downloadSnsMedia(post, post.media[0], 0)"
+                      >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v11m0 0l4-4m-4 4l-4-4M5 21h14" />
+                        </svg>
+                      </button>
                     </div>
                     <div
                         v-else
@@ -462,6 +474,18 @@
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 5.5a8 8 0 010 13" />
                         </svg>
                       </button>
+
+                      <button
+                        type="button"
+                        class="absolute bottom-1.5 right-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-full bg-black/45 text-white opacity-0 transition group-hover:opacity-100 hover:bg-[#07c160]"
+                        title="下载"
+                        aria-label="下载朋友圈媒体"
+                        @click.stop="downloadSnsMedia(post, m, idx)"
+                      >
+                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v11m0 0l4-4m-4 4l-4-4M5 21h14" />
+                        </svg>
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -2050,10 +2074,11 @@ const mediaSizeGroupIndex = (post, m, idx) => {
   return count
 }
 
-const getSnsMediaUrl = (post, m, idx, rawUrl) => {
+const getSnsMediaUrl = (post, m, idx, rawUrl, options = {}) => {
   const raw = upgradeTencentHttps(String(rawUrl || '').trim())
   if (!raw) return ''
   const rawLower = raw.toLowerCase()
+  const preferFull = !!options?.preferFull
 
   // If backend already provides a local media endpoint, rewrite it to the effective API base
   // (so web builds with a custom API port still work).
@@ -2098,7 +2123,7 @@ const getSnsMediaUrl = (post, m, idx, rawUrl) => {
         if (mediaType) parts.set('media_type', mediaType)
 
         const thumbCandidate = String(m?.thumb || m?.thumbUrl || '').trim()
-        const isThumbRequest = !!thumbCandidate && raw === upgradeTencentHttps(thumbCandidate)
+        const isThumbRequest = (!preferFull) && !!thumbCandidate && raw === upgradeTencentHttps(thumbCandidate)
         const token = String(
           isThumbRequest
             ? (m?.thumbToken || m?.thumbUrlToken || m?.thumbAttrs?.token || m?.token || m?.urlAttrs?.token || '')
@@ -2117,8 +2142,9 @@ const getSnsMediaUrl = (post, m, idx, rawUrl) => {
         // When cache is disabled, bust browser caching so backend really downloads+decrypts each time.
         if (!snsUseCache.value) parts.set('_t', String(Date.now()))
         if (md5) parts.set('md5', md5)
+        if (preferFull) parts.set('variant', 'full')
         // 修改后端媒体匹配逻辑时递增版本号，避免浏览器复用旧的错误缓存。
-        parts.set('v', '11')
+        parts.set('v', preferFull ? '12' : '11')
         parts.set('url', raw)
         return `${apiBase}/sns/media?${parts.toString()}`
       }
@@ -2133,7 +2159,82 @@ const getMediaThumbSrc = (post, m, idx = 0) => {
 }
 
 const getMediaPreviewSrc = (post, m, idx = 0) => {
-  return getSnsMediaUrl(post, m, idx, m?.url || m?.thumb || m?.thumbUrl)
+  return getSnsMediaUrl(post, m, idx, m?.url || m?.originUrl || m?.originalUrl || m?.thumb || m?.thumbUrl, { preferFull: true })
+}
+
+const inferSnsDownloadExt = (blob, url, isVideo = false) => {
+  const type = String(blob?.type || '').toLowerCase()
+  if (type.includes('mp4')) return 'mp4'
+  if (type.includes('quicktime')) return 'mov'
+  if (type.includes('webm')) return 'webm'
+  if (type.includes('png')) return 'png'
+  if (type.includes('webp')) return 'webp'
+  if (type.includes('gif')) return 'gif'
+  if (type.includes('jpeg') || type.includes('jpg')) return 'jpg'
+  try {
+    const pathname = new URL(String(url || ''), window.location.href).pathname
+    const m = pathname.match(/\.([a-z0-9]{2,5})$/i)
+    if (m?.[1]) return m[1].toLowerCase()
+  } catch {}
+  return isVideo ? 'mp4' : 'jpg'
+}
+
+const makeSnsDownloadName = (post, m, idx, ext) => {
+  const ts = Number(post?.createTime || 0)
+  const baseTime = ts > 0 ? new Date(ts * 1000) : new Date()
+  const pad2 = (n) => String(n).padStart(2, '0')
+  const stamp = `${baseTime.getFullYear()}${pad2(baseTime.getMonth() + 1)}${pad2(baseTime.getDate())}_${pad2(baseTime.getHours())}${pad2(baseTime.getMinutes())}${pad2(baseTime.getSeconds())}`
+  const mediaId = String(m?.id || m?.mediaId || '').trim().replace(/[\\/:*?"<>|\s]+/g, '_').slice(0, 24)
+  const suffix = mediaId || String(Number(idx) || 0)
+  return `sns_${stamp}_${suffix}.${ext || 'jpg'}`
+}
+
+const triggerBrowserDownload = (blob, filename) => {
+  if (!process.client || typeof document === 'undefined') return false
+  const objectUrl = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = objectUrl
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 60000)
+  return true
+}
+
+const downloadSnsMedia = async (post, m, idx = 0) => {
+  if (!process.client) return
+  const isVideo = Number(m?.type || 0) === 6
+  const candidates = [
+    isVideo ? getSnsRemoteVideoSrc(post, m) : '',
+    getMediaPreviewSrc(post, m, idx),
+    getMediaThumbSrc(post, m, idx),
+    normalizeMediaUrl(upgradeTencentHttps(String(m?.url || m?.originUrl || m?.originalUrl || m?.thumb || '').trim()))
+  ].map((u) => String(u || '').trim()).filter(Boolean)
+
+  const seen = new Set()
+  const urls = candidates.filter((u) => {
+    if (seen.has(u)) return false
+    seen.add(u)
+    return true
+  })
+  if (!urls.length) return
+
+  for (const url of urls) {
+    try {
+      const resp = await fetch(url)
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const blob = await resp.blob()
+      if (!blob || !blob.size) throw new Error('empty media')
+      const ext = inferSnsDownloadExt(blob, url, isVideo)
+      triggerBrowserDownload(blob, makeSnsDownloadName(post, m, idx, ext))
+      return
+    } catch {}
+  }
+
+  try {
+    window.open(urls[0], '_blank', 'noopener,noreferrer')
+  } catch {}
 }
 
 const commentImageErrors = ref({})

src/wechat_decrypt_tool/routers/sns.py

@@ -2831,6 +2831,7 @@ async def get_sns_media(
         key: Optional[str] = None,
         use_cache: int = 1,
         url: Optional[str] = None,
+        variant: Optional[str] = None,
 ):
     account_dir = _resolve_account_dir(account)
     wxid_dir = _resolve_account_wxid_dir(account_dir)
@@ -2840,6 +2841,23 @@ async def get_sns_media(
     except Exception:
         use_cache_flag = True
 
+    variant_norm = str(variant or "").strip().lower()
+    prefer_remote_original = variant_norm in {"full", "origin", "original", "large"}
+
+    # 点击预览需要高清原图：本地 sns 缓存有时只命中缩略图，所以 full/original 请求先按
+    # WeFlow 的 CDN URL 修正 + token/key 解密链路取原图；失败后再回退本地缓存。
+    if prefer_remote_original and str(url or "").strip():
+        remote_resp = await _try_fetch_and_decrypt_sns_remote(
+            account_dir=account_dir,
+            url=str(url or ""),
+            key=str(key or ""),
+            token=str(token or ""),
+            use_cache=use_cache_flag,
+        )
+        if remote_resp is not None:
+            remote_resp.headers["X-SNS-Variant"] = "full"
+            return remote_resp
+
     if use_cache_flag:
         if wxid_dir and post_id and media_id and int(post_type or 1) == 7:
             try:

src/wechat_decrypt_tool/sns_media.py

@@ -50,7 +50,7 @@ def fix_sns_cdn_url(url: str, *, token: str = "", is_video: bool = False) -> str
     """WeFlow-compatible SNS CDN URL normalization.
 
     - Force https for Tencent CDNs.
-    - For images, replace `/150` with `/0` to request the original.
+    - For images, replace `/150`, `/200`, `/480` with `/0` to request the original.
     - If token is provided and url doesn't contain it, append `token=<token>&idx=1`.
     """
     u = html.unescape(str(url or "")).strip()
@@ -69,9 +69,9 @@ def fix_sns_cdn_url(url: str, *, token: str = "", is_video: bool = False) -> str
     # http -> https
     u = re.sub(r"^http://", "https://", u, flags=re.I)
 
-    # /150 -> /0 (image only)
+    # /150|/200|/480 -> /0 (image only; matches WeFlow's original-image request behavior).
     if not is_video:
-        u = re.sub(r"/150(?=($|\\?))", "/0", u)
+        u = re.sub(r"/(?:150|200|480)(?=($|\?))", "/0", u)
 
     tok = str(token or "").strip()
     if tok and ("token=" not in u):

tests/test_sns_media_url.py

@@ -0,0 +1,16 @@
+import sys
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parents[1]
+sys.path.insert(0, str(ROOT / "src"))
+
+from wechat_decrypt_tool.sns_media import fix_sns_cdn_url  # noqa: E402
+
+
+def test_fix_sns_cdn_url_requests_original_image_sizes():
+    assert fix_sns_cdn_url("http://example.qpic.cn/path/150") == "https://example.qpic.cn/path/0"
+    assert fix_sns_cdn_url("https://example.qpic.cn/path/200?x=1") == "https://example.qpic.cn/path/0?x=1"
+    assert fix_sns_cdn_url("https://example.qpic.cn/path/480", token="abc") == (
+        "https://example.qpic.cn/path/0?token=abc&idx=1"
+    )