Merge pull request '失效图片保持容器宽度和下载入口' (#34) from codex/image-preview-error-width-20261104 into main

app/(chat)/featured/page.tsx

@@ -8,6 +8,8 @@ import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsR
 import { Input } from "@/components/ui/input";
 import Image from "next/image";
 import { formatBeijingTime } from "@/lib/utils";
+import { toast } from "sonner";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 type FeaturedImage = {
   id: string;
@@ -74,18 +76,11 @@ export default function FeaturedPage() {
 
   const handleDownload = async (url: string, prompt: string) => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      const blobUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = `featured-${Date.now()}.png`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(blobUrl);
+      await downloadOriginalImage({ url, name: "featured-image" });
+      toast.success("原图已开始下载");
     } catch (error) {
       console.error("Download failed:", error);
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   };
 

app/(chat)/gallery/page.tsx

@@ -13,6 +13,7 @@ import { requestLongTaskResult } from "@/lib/client/long-task";
 import { buildImageProxyUrl, getImageDownloadExtension } from "@/lib/image-delivery";
 import { inferOriginalImageUrl } from "@/lib/image-url";
 import { formatBeijingTime } from "@/lib/utils";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 type GalleryImage = {
   id: string;
@@ -59,7 +60,7 @@ function buildGalleryDownloadFilename(url: string, alt: string, contentType: str
     }
   }
 
-  return `${safeBase}-${Date.now()}.${getImageDownloadExtension(contentType) || extension}`;
+  return `${safeBase}.${getImageDownloadExtension(contentType) || extension}`;
 }
 
 export default function GalleryPage() {
@@ -119,25 +120,11 @@ export default function GalleryPage() {
       const parsed = new URL(originalUrl, window.location.origin);
       const source = parsed.pathname === "/api/image-proxy" ? originalUrl : inferOriginalImageUrl(originalUrl);
 
-      const response = await fetch(
-        buildImageProxyUrl(source, { delivery: "original" })
-      );
-      if (!response.ok) {
-        throw new Error(`download failed: ${response.status}`);
-      }
-      const blob = await response.blob();
-      const blobUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = buildGalleryDownloadFilename(originalUrl, alt, blob.type);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.setTimeout(() => window.URL.revokeObjectURL(blobUrl), 1000);
+      await downloadOriginalImage({ url: source, name: buildGalleryDownloadFilename(originalUrl, alt, "") });
       toast.success("图片已开始下载");
     } catch (error) {
       console.error("Download failed:", error);
-      toast.error(error instanceof Error && error.message.includes("无法确认原图") ? error.message : "原图下载失败，请重试");
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   };
 

app/api/image-proxy/route.ts

@@ -1,8 +1,11 @@
 import crypto from "node:crypto";
 import { isRetiredStorageUrl, RETIRED_STORAGE_MESSAGE } from "@/lib/storage/retired-storage";
 import { NextRequest, NextResponse } from "next/server";
+import { formatDownloadFailure, getDownloadFailure } from "@/lib/canvas/download-error";
+import { createLogger } from "@/lib/observability/logger";
 
 export const runtime = "nodejs";
+const logger = createLogger("image.download");
 
 const DEFAULT_QUALITY = 82;
 const MAX_WIDTH = 4096;
@@ -267,8 +270,17 @@ function redirectToDirectImage(target: URL): NextResponse {
 
 export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl;
+  const requestId = crypto.randomUUID();
+  const downloadFailure = (error: unknown) => {
+    const failure = getDownloadFailure(error);
+    logger.warn("original_download_failed", error, { requestId, code: failure.code, status: failure.status });
+    return NextResponse.json({ error: formatDownloadFailure(failure, requestId), failure, requestId }, {
+      status: failure.status, headers: { "Cache-Control": "no-store" },
+    });
+  };
   const rawUrl = (searchParams.get("url") || "").trim();
   if (isRetiredStorageUrl(rawUrl)) {
+    if (searchParams.get("original") === "1") return downloadFailure(RETIRED_STORAGE_MESSAGE);
     return NextResponse.json({ error: RETIRED_STORAGE_MESSAGE, code: "storage_retired" }, { status: 410 });
   }
   if (!rawUrl) {
@@ -306,6 +318,18 @@ export async function GET(request: NextRequest) {
     );
   }
 
+  if (original && searchParams.get("download") === "resolve") {
+    try {
+      const { buildImageProxyUrl } = await import("@/lib/image-delivery");
+      buildImageProxyUrl(target.toString(), { delivery: "original" });
+      const { resolveOriginalCdnDownload } = await import("@/lib/storage/original-image-download");
+      const direct = await resolveOriginalCdnDownload(target.toString(), searchParams.get("name") || "", request.signal);
+      return NextResponse.json(direct || { delivery: "proxy" }, { headers: { "Cache-Control": "no-store" } });
+    } catch (error) {
+      return downloadFailure(error);
+    }
+  }
+
   if (!forceProxy && !original) {
     const directImageTarget = resolveDirectImageTarget(
       request,
@@ -346,10 +370,11 @@ export async function GET(request: NextRequest) {
 
   const fetchSignal = AbortSignal.any([
     request.signal,
-    AbortSignal.timeout(width && width <= 256 ? SMALL_PREVIEW_FETCH_TIMEOUT_MS : FETCH_TIMEOUT_MS),
+    AbortSignal.timeout(original ? 60_000 : width && width <= 256 ? SMALL_PREVIEW_FETCH_TIMEOUT_MS : FETCH_TIMEOUT_MS),
   ]);
   const upstreamFailure = (error: unknown) => {
     if (request.signal.aborted) return new NextResponse(null, { status: 499 });
+    if (original) return downloadFailure(error);
     const timedOut = (error instanceof Error && error.name === "TimeoutError") || fetchSignal.reason?.name === "TimeoutError";
     return NextResponse.json(
       { error: timedOut ? "读取源图片超时，请重试" : "源图片传输中断，请重试" },
@@ -369,6 +394,7 @@ export async function GET(request: NextRequest) {
   }
 
   if (!upstreamResponse.ok) {
+    if (original) return downloadFailure(`HTTP ${upstreamResponse.status}`);
     return NextResponse.json(
       { error: `Upstream responded with ${upstreamResponse.status}` },
       { status: 502 }
@@ -377,6 +403,7 @@ export async function GET(request: NextRequest) {
 
   const contentType = upstreamResponse.headers.get("content-type") || "application/octet-stream";
   if (!contentType.toLowerCase().startsWith("image/")) {
+    if (original) return downloadFailure("Source is not an image");
     return NextResponse.json({ error: "Upstream is not an image" }, { status: 400 });
   }
 

components/agents/AgentGenerationWorkspace.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
@@ -575,31 +576,11 @@ export function AgentGenerationWorkspace({
       toast.error("图片地址无效");
       return;
     }
-
-    const filename = buildDownloadFilename(raw);
     try {
-      const response = await fetch(raw);
-      if (!response.ok) {
-        throw new Error(`download failed: ${response.status}`);
-      }
-      const blob = await response.blob();
-      const blobUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(blobUrl);
-    } catch {
-      const link = document.createElement("a");
-      link.href = raw;
-      link.target = "_blank";
-      link.rel = "noopener noreferrer";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      toast.message("已打开原图，可右键另存为");
+      await downloadOriginalImage({ url: raw, name: buildDownloadFilename(raw) });
+      toast.success("原图已开始下载");
+    } catch (error) {
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   }, []);
 

components/agents/AgentGenerationWorkspaceDarkV2.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 import { useChat } from "@ai-sdk/react";
 import { appendGenerationMessage, mergeGenerationHistory, parseAppendedGenerationMessage, recoverReplacementRun } from "@/lib/agents/replacement-run-recovery";
@@ -6793,31 +6794,11 @@ export function AgentGenerationWorkspaceDarkV2({
       toast.error("图片地址无效");
       return;
     }
-
-    const filename = buildDownloadFilename(raw);
     try {
-      const response = await fetch(raw);
-      if (!response.ok) {
-        throw new Error(`download failed: ${response.status}`);
-      }
-      const blob = await response.blob();
-      const blobUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(blobUrl);
-    } catch {
-      const link = document.createElement("a");
-      link.href = raw;
-      link.target = "_blank";
-      link.rel = "noopener noreferrer";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      toast.message("已打开原图，可右键另存为");
+      await downloadOriginalImage({ url: raw, name: buildDownloadFilename(raw) });
+      toast.success("原图已开始下载");
+    } catch (error) {
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   }, []);
   const uploadBase64ResultToStorage = useCallback(async (base64Url: string) => {

components/agents/AgentGenerationWorkspaceNew.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
@@ -725,30 +726,11 @@ export function AgentGenerationWorkspaceNew({
       toast.error("图片地址无效");
       return;
     }
-    const filename = buildDownloadFilename(raw);
     try {
-      const response = await fetch(raw);
-      if (!response.ok) {
-        throw new Error(`download failed: ${response.status}`);
-      }
-      const blob = await response.blob();
-      const blobUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(blobUrl);
-    } catch {
-      const link = document.createElement("a");
-      link.href = raw;
-      link.target = "_blank";
-      link.rel = "noopener noreferrer";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      toast.message("已打开原图，可右键另存为");
+      await downloadOriginalImage({ url: raw, name: buildDownloadFilename(raw) });
+      toast.success("原图已开始下载");
+    } catch (error) {
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   }, []);
 

components/image-preview.tsx

@@ -5,7 +5,8 @@ import dynamic from "next/dynamic";
 import React, { useState, useEffect } from "react";
 import { X, Download, Edit, Target, Paintbrush, Sparkles, Scissors, Expand, Maximize2, Move3D, Droplet } from "lucide-react";
 import { toast } from "sonner";
-import { buildImageProxyUrl, getImageDownloadExtension } from "@/lib/image-delivery";
+import { buildImageProxyUrl } from "@/lib/image-delivery";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 const ImageAnnotator = dynamic(
   () => import("./image-annotator").then((module) => module.ImageAnnotator),
@@ -23,25 +24,6 @@ const AngleEditDialog = dynamic(
   }
 );
 
-function triggerBrowserDownload(
-  url: string,
-  filename?: string,
-  options?: { openInNewTab?: boolean }
-) {
-  const link = document.createElement("a");
-  link.href = url;
-  if (filename) {
-    link.download = filename;
-  }
-  if (options?.openInNewTab) {
-    link.target = "_blank";
-  }
-  link.rel = "noopener noreferrer";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-
 export function ImagePreview({ 
   src, 
   alt,
@@ -238,24 +220,12 @@ export function ImagePreview({
       toast.error("下载失败，请重试");
       return;
     }
-    const filenameBase = `generated-image-${Date.now()}`;
     try {
-      const response = await fetch(
-        buildImageProxyUrl(safeOriginalUrl, { delivery: "original" })
-      );
-      if (!response.ok) {
-        throw new Error(`下载失败（${response.status}）`);
-      }
-      const blob = await response.blob();
-      const extension = getImageDownloadExtension(blob.type);
-      const filename = extension ? `${filenameBase}.${extension}` : filenameBase;
-      const url = window.URL.createObjectURL(blob);
-      triggerBrowserDownload(url, filename);
-      window.URL.revokeObjectURL(url);
-      toast.success("下载成功");
+      await downloadOriginalImage({ url: safeOriginalUrl });
+      toast.success("原图已开始下载");
     } catch (error) {
       console.error("下载失败:", error);
-      toast.error(error instanceof Error && error.message.includes("无法确认原图") ? error.message : "原图下载失败，请重试");
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   };
 
@@ -337,9 +307,18 @@ export function ImagePreview({
           }}
           loading="lazy"
           decoding="async"
+          onLoad={(event) => {
+            event.currentTarget.style.aspectRatio = "";
+            event.currentTarget.parentElement?.style.removeProperty("width");
+            event.currentTarget.alt = "Generated Image";
+          }}
           onError={(event) => {
             if (event.currentTarget.src !== (thumbnail || original)) {
               event.currentTarget.src = thumbnail || original;
+            } else if (!compactGrid) {
+              event.currentTarget.style.aspectRatio = "1";
+              event.currentTarget.parentElement?.style.setProperty("width", "100%");
+              event.currentTarget.alt = "预览暂不可用，可尝试下载原图";
             }
           }}
           onClick={() => setIsOpen(true)}

components/preview-attachment.tsx

@@ -9,6 +9,7 @@ import { Button } from "./ui/button";
 import { X, Download, Target, Paintbrush } from "lucide-react";
 import { toast } from "sonner";
 import { ImageAnnotator } from "./image-annotator";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 export const PreviewAttachment = ({
   attachment,
@@ -73,18 +74,11 @@ export const PreviewAttachment = ({
   // 下载图片函数
   const handleDownload = async () => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      const downloadUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = downloadUrl;
-      link.download = name ?? `image-${Date.now()}.jpg`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(downloadUrl);
+      await downloadOriginalImage({ url, name: name ?? "image" });
+      toast.success("原图已开始下载");
     } catch (error) {
       console.error("下载失败:", error);
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   };
 

components/scene-fusion-view.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { downloadOriginalImage, getCanvasImageDownloadErrorMessage } from "@/lib/client/canvas-image-download";
 
 import {
   ArrowLeft,
@@ -2073,18 +2074,9 @@ export function SceneFusionView({
 
   const downloadImage = async (url: string, filename: string) => {
     try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      const blobUrl = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
-    } catch {
-      window.open(url, "_blank");
+      await downloadOriginalImage({ url, name: filename });
+    } catch (error) {
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     }
   };
 

lib/canvas/download-error.ts

@@ -21,6 +21,7 @@ export function getDownloadFailure(error: unknown): DownloadFailure {
   if (/sharp|pngload|jpegload|unsupported image|无法解析图片|convert|转换/i.test(text)) return failure("IMAGE_CONVERSION_FAILED", "原图无法转换为下载所需的 PNG 文件。", "请保留原图并联系管理员提供下载编号，或重新上传 PNG/JPEG 图片。", 422);
   if (/upload|存储桶|保存下载|STORAGE_WRITE_FAILED/i.test(text)) return failure("DOWNLOAD_STORAGE_FAILED", "下载文件保存失败，已归档的原图仍然保留。", "请稍后重试；持续失败时联系管理员检查存储，并提供下载编号。", 503, true);
   if (/未登录/.test(text)) return failure("LOGIN_REQUIRED", "登录状态已失效。", "请重新登录后下载，当前图片不会因此删除。", 401);
+  if (/无法确认原图/.test(text)) return failure("ORIGINAL_IMAGE_UNCONFIRMED", "图片链接包含处理参数，无法确认原图。", "请选择未裁剪、未缩放的原图链接，或重新上传原图。", 400);
   if (/图片地址无效/.test(text)) return failure("INVALID_IMAGE_URL", "图片地址无效。", "请刷新画布后重新选择图片；仍然失败时请重新上传原图。", 400);
   return failure("DOWNLOAD_FAILED", "下载准备未能完成。", "请联系管理员并提供下载编号，以便核对原图、转换和存储的具体错误；无需重新生成。", 500, true);
 }

lib/client/canvas-image-download.ts

@@ -1,4 +1,4 @@
-import { buildImageProxyUrl } from "@/lib/image-delivery";
+import { buildImageProxyUrl, getImageDownloadExtension } from "@/lib/image-delivery";
 import { inferOriginalImageUrl } from "@/lib/image-url";
 import { formatDownloadFailure, getDownloadFailure, type DownloadFailure } from "@/lib/canvas/download-error";
 
@@ -176,6 +176,63 @@ function triggerBlobDownload(blob: Blob, filename: string) {
   window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
 }
 
+function triggerCdnDownload(result: { downloadUrl: string; filename: string; bytes?: number }, signal?: AbortSignal) {
+  if (typeof result.downloadUrl !== "string" || new URL(result.downloadUrl).protocol !== "https:") {
+    throw new Error("下载链接无效");
+  }
+  signal?.throwIfAborted();
+  const frame = document.createElement("iframe");
+  frame.hidden = true;
+  frame.src = result.downloadUrl;
+  document.body.appendChild(frame);
+  window.setTimeout(() => frame.remove(), 10 * 60_000);
+  return { filename: result.filename, bytes: result.bytes || 0 };
+}
+
+/** Keep the source format and bytes for chat, gallery and reference downloads. */
+export async function downloadOriginalImage({ url, name, signal, onProgress }: DownloadCanvasImageParams): Promise<CanvasImageDownloadResult> {
+  const source = String(url || "").trim();
+  if (!source) throw new Error("图片地址无效");
+  const proxy = buildImageProxyUrl(source, { delivery: "original" });
+  const filenameBase = sanitizeDownloadName(name || inferDownloadNameFromUrl(source), "image");
+  const target = new URL(proxy, window.location.origin);
+  onProgress?.({ phase: "preparing", message: "正在准备原图..." });
+  const checkedFetch = async (input: string) => {
+    let response: Response;
+    try { response = await fetch(input, { signal }); }
+    catch (error) {
+      if (signal?.aborted) throw error;
+      const failure = getDownloadFailure(error);
+      throw new CanvasImageDownloadError(failure.message, { code: "request_failed", failure });
+    }
+    if (!response.ok) {
+      const payload = await response.json().catch(() => null) as DownloadErrorPayload | null;
+      throw new CanvasImageDownloadError(payload?.error || "原图下载失败", { code: "request_failed",
+        status: response.status, failure: payload?.failure || getDownloadFailure(`HTTP ${response.status}`), requestId: payload?.requestId });
+    }
+    return response;
+  };
+  if (target.origin === window.location.origin && target.pathname === "/api/image-proxy") {
+    target.searchParams.set("download", "resolve");
+    target.searchParams.set("name", filenameBase);
+    const metadata = await checkedFetch(target.pathname + target.search);
+    const delivery = await metadata.json();
+    if (delivery.delivery === "cdn") {
+      const result = triggerCdnDownload(delivery, signal);
+      onProgress?.({ phase: "downloading", message: "已开始下载，可在浏览器下载列表查看进度" });
+      return result;
+    }
+    if (delivery.delivery !== "proxy") throw new Error("下载链接无效");
+  }
+  const response = await checkedFetch(proxy);
+  const blob = await readResponseBlobWithProgress(response, onProgress);
+  if (!blob.type.toLowerCase().startsWith("image/")) throw new Error("Source is not an image");
+  const extension = getImageDownloadExtension(blob.type);
+  const filename = extension ? `${filenameBase}.${extension}` : filenameBase;
+  triggerBlobDownload(blob, filename);
+  return { filename, bytes: blob.size };
+}
+
 function toDownloadCandidates(url: string, candidates: string[] = []) {
   const raw = String(url || "").trim();
   const originalUrl = String(inferOriginalImageUrl(raw) || raw).trim();
@@ -347,16 +404,10 @@ export async function downloadCanvasImageAsPng({
 
   if (response.headers.get("content-type")?.includes("application/json")) {
     const result = await response.json();
-    if (result.delivery !== "cdn" || typeof result.downloadUrl !== "string"
-        || new URL(result.downloadUrl).protocol !== "https:") throw new Error("下载链接无效");
-    if (signal?.aborted) throw signal.reason || new DOMException("已取消下载", "AbortError");
-    const frame = document.createElement("iframe");
-    frame.hidden = true;
-    frame.src = result.downloadUrl;
-    document.body.appendChild(frame);
-    window.setTimeout(() => frame.remove(), 10 * 60_000);
+    if (result.delivery !== "cdn") throw new Error("下载链接无效");
+    const downloaded = triggerCdnDownload(result, signal);
     onProgress?.({ phase: "downloading", message: "已开始下载，可在浏览器下载列表查看进度" });
-    return { filename: result.filename, bytes: result.bytes || 0 };
+    return downloaded;
   }
 
   const filename =

lib/image-delivery.ts

@@ -20,6 +20,8 @@ export function getImageDownloadExtension(contentType: string) {
     "image/avif": "avif",
     "image/gif": "gif",
     "image/svg+xml": "svg",
+    "image/bmp": "bmp",
+    "image/tiff": "tiff",
   };
   return extensions[mime] || "";
 }
@@ -183,8 +185,8 @@ export function buildImageProxyUrl(url: string, options: ImageProxyOptions = {})
     return source;
   }
 
-  // An original download must go through the same-origin byte-preserving
-  // proxy even for trusted storage hosts: a direct fetch may fail CORS.
+  // The same-origin endpoint can resolve a native CDN download without relying
+  // on cross-origin fetch, while retaining a byte-preserving proxy fallback.
   if (options.delivery === "original") {
     const params = new URLSearchParams({ url: source, original: "1" });
     return `${IMAGE_PROXY_PATH}?${params.toString()}`;

lib/storage/image-download-preparation.ts

@@ -89,6 +89,6 @@ export function scheduleImageDownloadPreparation(id?: string) {
           worker.scanPending = false;
         }
       }
-    }, { durable: true });
+    });
   });
 }

lib/storage/original-image-download.ts

@@ -0,0 +1,45 @@
+import "server-only";
+import { getDefaultStorageConfig } from "@/lib/db/queries";
+import { findImageArchiveDownloadTask } from "./image-archive-db";
+import { inferOriginalImageUrl } from "@/lib/image-url";
+import { getImageDownloadExtension } from "@/lib/image-delivery";
+import { sanitizeCanvasDownloadFileName } from "@/lib/canvas/photoshop-safe-download";
+
+/** Resolve the archived original without waiting for a separate PNG conversion. */
+export async function resolveOriginalCdnDownload(source: string, name: string, signal: AbortSignal) {
+  const config = await getDefaultStorageConfig();
+  if (config?.type !== "qiniu-kodo" || !config.isEnabled || !config.publicUrl) return null;
+  const base = new URL(config.publicUrl);
+  const origin = process.env.CANVAS_QINIU_ORIGIN_URL;
+  let target = new URL(source);
+  if (target.origin !== base.origin && (!origin || target.origin !== new URL(origin).origin)) {
+    const task = await findImageArchiveDownloadTask([...new Set([source, inferOriginalImageUrl(source)])]);
+    target = new URL(task?.targetUrl || source);
+  }
+  if (origin && target.origin === new URL(origin).origin && !target.searchParams.has("token")) {
+    target.host = base.host;
+    target.protocol = base.protocol;
+  }
+  if (base.protocol !== "https:" || target.origin !== base.origin ||
+      !target.pathname.startsWith(base.pathname.replace(/\/$/, "") + "/")) return null;
+  // A Kodo download token signs the complete URL; adding attname would invalidate it.
+  if (target.searchParams.has("token")) return null;
+
+  // Only metadata crosses the application server. The browser receives the file
+  // from the CDN, including when cross-origin fetch is disabled by storage CORS.
+  const response = await fetch(target, {
+    method: "HEAD", cache: "no-store",
+    signal: AbortSignal.any([signal, AbortSignal.timeout(10_000)]),
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const contentType = response.headers.get("content-type") || "";
+  if (!contentType.toLowerCase().startsWith("image/")) throw new Error("Source is not an image");
+  const extension = getImageDownloadExtension(contentType);
+  if (!extension) return null;
+  const basename = sanitizeCanvasDownloadFileName(name || target.pathname.split("/").pop() || "image", "image")
+    .replace(/\.(?:png|jpe?g|webp|avif|gif|svg|bmp|tiff?)$/i, "");
+  const filename = `${basename}.${extension}`;
+  target.searchParams.set("attname", filename);
+  return { delivery: "cdn" as const, downloadUrl: target.toString(), filename,
+    bytes: Number(response.headers.get("content-length")) || 0 };
+}

playwright.helpers.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "@playwright/test";
 export default defineConfig({
   testDir: "./tests",
   testMatch: [
+    /routes\/original-image-download\.test\.ts/,
     /routes\/canvas-download-speed\.test\.ts/,
     /routes\/canvas-download-recovery\.test\.ts/,
     /routes\/canvas-download-rate-limit\.test\.ts/,

tests/routes/canvas-download-recovery.test.ts

@@ -112,10 +112,11 @@ test("the preparation deadline cancels the source body as well as its headers",
 test("requested downloads are prioritized with two workers before scanning background assets", async () => {
   let active = 0; let maximum = 0; let scans = 0;
   const releases: Array<() => void> = [];
+  const workRecords: Array<{ active: number; durable: number }> = [];
   const claimed: string[] = []; const saved: string[] = [];
   const bytes = Buffer.from("compatible PNG fixture");
   const worker = serverLoader({
-    "@/lib/observability/active-work": { trackRuntimeWork: (execute: () => Promise<void>) => execute() },
+    "node:fs": { writeFileSync: (_path: string, value: string) => workRecords.push(JSON.parse(value)), unlinkSync() {} },
     "./image-archive-db": {
       claimImageDownloadTask: async (id: string) => { claimed.push(id); return { id, targetUrl: `https://cdn.example/${id}.png`, metadata: {} }; },
       saveImageDownloadAsset: async (id: string) => saved.push(id),
@@ -127,6 +128,7 @@ test("requested downloads are prioritized with two workers before scanning backg
   })("lib/storage/image-download-preparation.ts");
   worker.scheduleImageDownloadPreparation("one"); worker.scheduleImageDownloadPreparation("two"); worker.scheduleImageDownloadPreparation("three");
   await expect.poll(() => active).toBe(2);
+  expect(workRecords.at(-1)).toMatchObject({ active: 1, durable: 0 });
   expect(scans).toBe(0);
   releases.splice(0).forEach(release => release());
   await expect.poll(() => claimed.length).toBe(3);

tests/routes/image-delivery-qiniu.test.ts

@@ -154,7 +154,7 @@ test.describe("Qiniu image delivery", () => {
       expect((await GET(new NextRequest("http://localhost/api/image-proxy?url=http%3A%2F%2F192.168.1.1%2Fsecret&original=1"))).status).toBe(403);
       expect((await GET(new NextRequest("http://localhost/api/image-proxy?url=https%3A%2F%2Fpublic.example%2Fa.jpg&original=1&w=200"))).status).toBe(400);
       expect(fetchCount).toBe(0);
-      expect((await GET(new NextRequest("http://localhost/api/image-proxy?url=https%3A%2F%2Fpublic.example%2Fa.jpg&original=1"))).status).toBe(400);
+      expect((await GET(new NextRequest("http://localhost/api/image-proxy?url=https%3A%2F%2Fpublic.example%2Fa.jpg&original=1"))).status).toBe(422);
     } finally {
       globalThis.fetch = previousFetch;
     }

tests/routes/original-image-download.test.ts

@@ -0,0 +1,114 @@
+import { test, expect } from "@playwright/test";
+import { serverLoader } from "../helpers/canvas-download-server-loader";
+
+const config = { type: "qiniu-kodo", isEnabled: true, publicUrl: "https://cdn.example" };
+
+test("original downloads use the archived JPEG rather than the prepared PNG and transfer only HEAD metadata", async () => {
+  const calls: Array<{ url: string; method: string }> = [];
+  const loader = serverLoader({
+    "@/lib/db/queries": { getDefaultStorageConfig: async () => config },
+    "./image-archive-db": { findImageArchiveDownloadTask: async () => ({ targetUrl: "https://cdn.example/original.jpg", metadata: {
+      downloadAsset: { status: "ready", url: "https://cdn.example/converted.png", contentType: "image/png" },
+    } }) },
+    fetch: async (url: URL, options: { method: string }) => {
+      calls.push({ url: url.toString(), method: options.method });
+      return { ok: true, headers: new Headers({ "content-type": "image/jpeg", "content-length": "12345" }),
+        arrayBuffer() { throw new Error("Image bytes must bypass the application"); } };
+    },
+  });
+  const result = await loader("lib/storage/original-image-download.ts").resolveOriginalCdnDownload("https://upstream.example/temporary.png", "产品.png", new AbortController().signal);
+  expect(calls).toEqual([{ url: "https://cdn.example/original.jpg", method: "HEAD" }]);
+  expect(result).toMatchObject({ delivery: "cdn", filename: "产品.jpg", bytes: 12345 });
+  expect(new URL(result.downloadUrl).pathname).toBe("/original.jpg");
+});
+
+test("signed original URLs retain the byte-preserving proxy without changing their signature", async () => {
+  const module = serverLoader({
+    "@/lib/db/queries": { getDefaultStorageConfig: async () => config },
+    "./image-archive-db": { findImageArchiveDownloadTask: async () => null },
+    fetch() { throw new Error("Do not add filename parameters to a signed URL"); },
+  })("lib/storage/original-image-download.ts");
+  const result = await module.resolveOriginalCdnDownload("https://cdn.example/source.jpg?token=signature%2Fvalue&e=123", "image.jpg", new AbortController().signal);
+  expect(result).toBeNull();
+});
+
+test("existing CDN objects bypass the archive scan and retain the MIME-derived format", async () => {
+  const module = serverLoader({
+    "@/lib/db/queries": { getDefaultStorageConfig: async () => config },
+    "./image-archive-db": { findImageArchiveDownloadTask() { throw new Error("An existing CDN object needs no archive scan"); } },
+    fetch: async () => ({ ok: true, headers: new Headers({ "content-type": "image/webp" }) }),
+  })("lib/storage/original-image-download.ts");
+  const result = await module.resolveOriginalCdnDownload("https://cdn.example/source.png", "source.png", new AbortController().signal);
+  expect(result.filename).toBe("source.webp");
+  expect(new URL(result.downloadUrl).pathname).toBe("/source.png");
+});
+
+test("temporary third-party URLs are never checked with HEAD when no archive is ready", async () => {
+  const module = serverLoader({
+    "@/lib/db/queries": { getDefaultStorageConfig: async () => config },
+    "./image-archive-db": { findImageArchiveDownloadTask: async () => null },
+    fetch() { throw new Error("The upstream file service does not support HEAD"); },
+  })("lib/storage/original-image-download.ts");
+  expect(await module.resolveOriginalCdnDownload("https://upstream.example/image.png", "image", new AbortController().signal)).toBeNull();
+});
+
+test("original download metadata reports missing sources with cause, advice and a feedback ID", async () => {
+  const route = serverLoader({
+    "next/server": { NextResponse: Response },
+    "@/lib/storage/original-image-download": { resolveOriginalCdnDownload: async () => { throw new Error("HTTP 404"); } },
+  })("app/api/image-proxy/route.ts");
+  const request = { nextUrl: new URL("https://app.example/api/image-proxy?url=https%3A%2F%2Fcdn.example%2Fmissing.jpg&original=1&download=resolve"), signal: new AbortController().signal, headers: new Headers() };
+  const response = await route.GET(request);
+  const data = await response.json();
+  expect(response.status).toBe(404);
+  expect(data.failure).toMatchObject({ code: "SOURCE_NOT_FOUND", retryable: false });
+  expect(data.failure.recommendation).toBeTruthy();
+  expect(data.error).toContain(data.requestId);
+});
+
+function browserMocks() {
+  const frames: any[] = []; const links: any[] = [];
+  return { frames, links,
+    window: { location: { origin: "https://app.example" }, setTimeout() {} },
+    document: { createElement: (tag: string) => ({ tag, click() { links.push(this); }, remove() {} }),
+      body: { appendChild: (el: any) => { if (el.tag === "iframe") frames.push(el); }, removeChild() {} } },
+  };
+}
+
+test("chat original downloads use a native CDN download without fetching the image through CORS", async () => {
+  const dom = browserMocks(); const calls: string[] = [];
+  const client = serverLoader({ ...dom, fetch: async (url: string) => {
+    calls.push(url);
+    return Response.json({ delivery: "cdn", downloadUrl: "https://cdn.example/image.jpg?attname=original.jpg", filename: "original.jpg", bytes: 5000000 });
+  } })("lib/client/canvas-image-download.ts");
+  const result = await client.downloadOriginalImage({ url: "https://cdn.example/image.jpg" });
+  expect(result).toEqual({ filename: "original.jpg", bytes: 5000000 });
+  expect(calls).toHaveLength(1);
+  expect(new URL(calls[0], "https://app.example").searchParams.get("download")).toBe("resolve");
+  expect(dom.frames[0].src).toBe("https://cdn.example/image.jpg?attname=original.jpg");
+  expect(dom.links).toHaveLength(0);
+});
+
+test("original fallback preserves JPEG bytes and the MIME-derived filename", async () => {
+  const dom = browserMocks(); const bytes = Buffer.from([255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 255, 217]); let calls = 0;
+  const client = serverLoader({ ...dom, fetch: async () => ++calls === 1 ? Response.json({ delivery: "proxy" }) : new Response(bytes, { headers: { "content-type": "image/jpeg" } }) })("lib/client/canvas-image-download.ts");
+  expect(await client.downloadOriginalImage({ url: "https://external.example/image.png", name: "original.png" })).toEqual({ filename: "original.jpg", bytes: bytes.length });
+  expect(calls).toBe(2);
+  const actual = await fetch(dom.links[0].href).then(r=>r.arrayBuffer());
+  expect(Buffer.from(actual).equals(bytes)).toBe(true);
+  URL.revokeObjectURL(dom.links[0].href);
+});
+
+test("original downloads reject processed references before network access", async () => {
+  const client = serverLoader({ ...browserMocks(), fetch() { throw new Error("Must not fetch a processed image as an original"); } })("lib/client/canvas-image-download.ts");
+  await expect(client.downloadOriginalImage({ url: "https://cdn.example/image.jpg?imageView2/2/w/320&token=signed" })).rejects.toThrow("无法确认原图");
+});
+
+test("chat downloads display the server cause and advice without losing its feedback ID", async () => {
+  const failure = { code: "SOURCE_FORBIDDEN", message: "图片源站拒绝访问原图。", recommendation: "请联系管理员检查访问权限。", status: 403, retryable: false };
+  const client = serverLoader({ ...browserMocks(), fetch: async () => Response.json({ failure, requestId: "original-feedback" }, { status: 403 }) })("lib/client/canvas-image-download.ts");
+  let error: unknown;
+  try { await client.downloadOriginalImage({ url: "https://cdn.example/image.jpg" }); } catch(e) { error=e; }
+  expect(client.getCanvasImageDownloadErrorMessage(error)).toContain("下载编号：original-feedback");
+  expect(client.getCanvasImageDownloadErrorMessage(error)).toContain(failure.recommendation);
+});