diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index 7e02a369c..6c47ad86d 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type PointerEvent as ReactPointerEvent } from "react";
-import useSWR from "swr";
-import { toast } from "sonner";
 import {
-  Download,
   Image as ImageIcon,
   Loader2,
   Move,
@@ -15,12 +11,20 @@ import {
   ZoomIn,
   ZoomOut,
 } from "lucide-react";
-import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
 import {
-  Dialog,
-  DialogContent,
-} from "@/components/ui/dialog";
+  type ChangeEvent,
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { toast } from "sonner";
+import useSWR from "swr";
+import { AgentPsdTemplateExportPreview } from "@/components/agents/agent-psd-template-export-preview";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -36,55 +40,69 @@ import {
 import { Slider } from "@/components/ui/slider";
 import { Textarea } from "@/components/ui/textarea";
 import {
+  type AgentPsdImagePlacement,
+  type AgentPsdImageSize,
   getDefaultAgentPsdImagePlacement,
   normalizeAgentPsdImagePlacement,
   resolveAgentPsdImageBaseFrame,
-  type AgentPsdImagePlacement,
-  type AgentPsdImageSize,
 } from "@/lib/agents/psd-image-placement";
 import {
-  defaultAgentPsdTextColorConfig,
-  normalizeAgentPsdTextColorConfig,
-} from "@/lib/agents/psd-text-color-config";
-import {
-  isAgentPsdImageLayerSlot,
-  isAgentPsdTextLayerSlot,
-  parseAgentPsdTemplates,
-  type AgentPsdTemplateMode,
   type AgentPsdTemplate,
   type AgentPsdTemplateImageLayerSlot,
   type AgentPsdTemplateLayerSlot,
   type AgentPsdTemplateListResponse,
+  type AgentPsdTemplateMode,
   type AgentPsdTemplateRenderResponse,
   type AgentPsdTemplateTextLayerSlot,
+  isAgentPsdImageLayerSlot,
+  isAgentPsdTextLayerSlot,
+  parseAgentPsdTemplates,
 } from "@/lib/agents/psd-template-config";
 import {
   defaultAgentPsdTemplateSecondaryCategoryConfig,
   normalizeAgentPsdTemplateSecondaryCategoryConfig,
 } from "@/lib/agents/psd-template-secondary-category-config";
-import { normalizeHexColor, resolveTextLayout } from "@/lib/agents/psd-text-layout";
+import {
+  defaultAgentPsdTextColorConfig,
+  normalizeAgentPsdTextColorConfig,
+} from "@/lib/agents/psd-text-color-config";
+import {
+  normalizeHexColor,
+  resolveTextLayout,
+} from "@/lib/agents/psd-text-layout";
+import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
 
 const fetcher = async (url: string): Promise<AgentPsdTemplateListResponse> => {
   try {
     const response = await fetch(url, { cache: "no-store" });
-    const payload = (await response.json().catch(() => null)) as
-      | Partial<AgentPsdTemplateListResponse>
-      | null;
+    const payload = (await response
+      .json()
+      .catch(() => null)) as Partial<AgentPsdTemplateListResponse> | null;
 
-    if (!response.ok || !payload || payload.success !== true || !Array.isArray(payload.templates)) {
+    if (
+      !response.ok ||
+      !payload ||
+      payload.success !== true ||
+      !Array.isArray(payload.templates)
+    ) {
       return {
         success: false,
         templates: [],
         textColorConfig: defaultAgentPsdTextColorConfig,
         secondaryCategoryConfig: defaultAgentPsdTemplateSecondaryCategoryConfig,
-        error: typeof payload?.error === "string" ? payload.error : "PSD 模板加载失败",
+        error:
+          typeof payload?.error === "string"
+            ? payload.error
+            : "PSD 模板加载失败",
       };
     }
 
     return {
       success: true,
       templates: parseAgentPsdTemplates(payload.templates),
-      textColorConfig: normalizeAgentPsdTextColorConfig(payload.textColorConfig),
+      textColorConfig: normalizeAgentPsdTextColorConfig(
+        payload.textColorConfig
+      ),
       secondaryCategoryConfig: normalizeAgentPsdTemplateSecondaryCategoryConfig(
         payload.secondaryCategoryConfig
       ),
@@ -112,7 +130,9 @@ function getTemplateMetaLabel(
 ) {
   const metaParts = [
     `${template.width} x ${template.height}`,
-    showSecondaryCategory ? String(template.secondaryCategory || "").trim() : "",
+    showSecondaryCategory
+      ? String(template.secondaryCategory || "").trim()
+      : "",
   ].filter(Boolean);
   return metaParts.join(" · ");
 }
@@ -144,17 +164,29 @@ function renderTemplateSelectContent(
         }
       >
         <img
-          src={template.previewUrl}
           alt={template.name}
           className="h-full w-full object-cover"
+          src={template.previewUrl}
         />
       </div>
       <div className="min-w-0 text-left">
-        <div className={compact ? "truncate text-sm font-medium leading-tight" : "truncate text-[15px] font-semibold leading-tight"}>
+        <div
+          className={
+            compact
+              ? "truncate font-medium text-sm leading-tight"
+              : "truncate font-semibold text-[15px] leading-tight"
+          }
+        >
           {template.name}
         </div>
         {metaLabel ? (
-          <div className={compact ? "mt-1 truncate text-[11px] text-white/45" : "mt-0.5 truncate text-[11px] text-white/45"}>
+          <div
+            className={
+              compact
+                ? "mt-1 truncate text-[11px] text-white/45"
+                : "mt-0.5 truncate text-[11px] text-white/45"
+            }
+          >
             {metaLabel}
           </div>
         ) : null}
@@ -178,23 +210,25 @@ function renderTemplatePickerCardContent(
     <div className="flex min-w-0 items-center gap-3">
       <div className="flex h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-white/5">
         <img
-          src={template.previewUrl}
           alt={template.name}
           className="h-full w-full object-cover"
+          src={template.previewUrl}
         />
       </div>
       <div className="min-w-0">
         <div
           className={
             emphasize
-              ? "truncate text-sm font-semibold text-white"
-              : "truncate text-sm font-medium text-white"
+              ? "truncate font-semibold text-sm text-white"
+              : "truncate font-medium text-sm text-white"
           }
         >
           {template.name}
         </div>
         {metaLabel ? (
-          <div className="mt-1 truncate text-[11px] text-white/45">{metaLabel}</div>
+          <div className="mt-1 truncate text-[11px] text-white/45">
+            {metaLabel}
+          </div>
         ) : null}
       </div>
     </div>
@@ -208,7 +242,10 @@ function clampImageScale(value: number) {
   return Math.max(MIN_IMAGE_SCALE, Math.min(MAX_IMAGE_SCALE, value));
 }
 
-function createInitialState(template: AgentPsdTemplate | null, sourceImageUrl: string) {
+function createInitialState(
+  template: AgentPsdTemplate | null,
+  sourceImageUrl: string
+) {
   const imageAssignments: Record<string, string> = {};
   const imagePlacements: Record<string, AgentPsdImagePlacement> = {};
   const textAssignments: Record<string, string> = {};
@@ -218,7 +255,11 @@ function createInitialState(template: AgentPsdTemplate | null, sourceImageUrl: s
   }
 
   for (const layer of template.layers) {
-    if (isAgentPsdImageLayerSlot(layer) && layer.isDefaultResultSource && sourceImageUrl) {
+    if (
+      isAgentPsdImageLayerSlot(layer) &&
+      layer.isDefaultResultSource &&
+      sourceImageUrl
+    ) {
       imageAssignments[layer.id] = sourceImageUrl;
       imagePlacements[layer.id] = getDefaultAgentPsdImagePlacement();
     }
@@ -245,7 +286,11 @@ function buildPreviewFontFaces(template: AgentPsdTemplate | null) {
 
   const rules = new Map<string, string>();
   for (const layer of template.layers) {
-    if (!isAgentPsdTextLayerSlot(layer) || !layer.fontFamily || !layer.fontFileUrl) {
+    if (
+      !isAgentPsdTextLayerSlot(layer) ||
+      !layer.fontFamily ||
+      !layer.fontFileUrl
+    ) {
       continue;
     }
     const familyAliases = Array.from(
@@ -320,7 +365,9 @@ function getPreferredSelectedLayerId(template: AgentPsdTemplate | null) {
   return editableLayers[0]?.id || "";
 }
 
-function getImageFit(replaceMode: AgentPsdTemplateImageLayerSlot["replaceMode"]): CSSProperties["objectFit"] {
+function getImageFit(
+  replaceMode: AgentPsdTemplateImageLayerSlot["replaceMode"]
+): CSSProperties["objectFit"] {
   if (replaceMode === "contain") return "contain";
   if (replaceMode === "stretch") return "fill";
   return "cover";
@@ -342,7 +389,10 @@ function getLayerFrameStyle(
   };
 }
 
-function getResolvedTextPreview(layer: AgentPsdTemplateTextLayerSlot, value: string) {
+function getResolvedTextPreview(
+  layer: AgentPsdTemplateTextLayerSlot,
+  value: string
+) {
   return value || layer.placeholder || layer.layerName;
 }
 
@@ -415,7 +465,9 @@ function getTextLayerContentStyle(
   };
 }
 
-function getAssignedImageMaskStyle(layer: AgentPsdTemplateImageLayerSlot): CSSProperties {
+function getAssignedImageMaskStyle(
+  layer: AgentPsdTemplateImageLayerSlot
+): CSSProperties {
   const hasMask = Boolean(layer.maskUrl);
   return {
     WebkitMaskImage: hasMask ? `url(${layer.maskUrl})` : undefined,
@@ -454,12 +506,20 @@ function getPlacedAssignedImageStyle(params: {
     transform: `translate(-50%, -50%) scale(${normalizedPlacement.scale})`,
     transformOrigin: "center center",
     objectFit: getImageFit(layer.replaceMode),
+    maxWidth: "none",
+    maxHeight: "none",
     willChange: "transform",
   };
 }
 
-function hasEditedTextValue(layer: AgentPsdTemplateTextLayerSlot, value: string) {
-  return String(value || "").replace(/\r\n/g, "\n") !== String(layer.defaultText || "").replace(/\r\n/g, "\n");
+function hasEditedTextValue(
+  layer: AgentPsdTemplateTextLayerSlot,
+  value: string
+) {
+  return (
+    String(value || "").replace(/\r\n/g, "\n") !==
+    String(layer.defaultText || "").replace(/\r\n/g, "\n")
+  );
 }
 
 function hasCustomizedTextLayerAppearance(
@@ -513,7 +573,8 @@ export function AgentPsdTemplateEditorDialog({
   templateMode?: AgentPsdTemplateMode | null;
 }) {
   const normalizedBrandName = String(brandName || "").trim();
-  const normalizedTemplateMode = templateMode === "sku" ? "sku" : templateMode === "main" ? "main" : "";
+  const normalizedTemplateMode =
+    templateMode === "sku" ? "sku" : templateMode === "main" ? "main" : "";
   const templateListRequestUrl = useMemo(() => {
     if (!open || !normalizedBrandName) {
       return null;
@@ -527,27 +588,45 @@ export function AgentPsdTemplateEditorDialog({
     templateListRequestUrl,
     fetcher
   );
-  const templates = useMemo(() => (data?.success ? data.templates : []), [data]);
+  const templates = useMemo(
+    () => (data?.success ? data.templates : []),
+    [data]
+  );
   const textColorConfig = useMemo(
     () => normalizeAgentPsdTextColorConfig(data?.textColorConfig),
     [data?.textColorConfig]
   );
   const secondaryCategoryConfig = useMemo(
-    () => normalizeAgentPsdTemplateSecondaryCategoryConfig(data?.secondaryCategoryConfig),
+    () =>
+      normalizeAgentPsdTemplateSecondaryCategoryConfig(
+        data?.secondaryCategoryConfig
+      ),
     [data?.secondaryCategoryConfig]
   );
 
   const [selectedTemplateId, setSelectedTemplateId] = useState<string>("");
   const [selectedLayerId, setSelectedLayerId] = useState<string>("");
-  const [imageAssignments, setImageAssignments] = useState<Record<string, string>>({});
-  const [imagePlacements, setImagePlacements] = useState<Record<string, AgentPsdImagePlacement>>({});
-  const [imageSizes, setImageSizes] = useState<Record<string, AgentPsdImageSize>>({});
-  const [textAssignments, setTextAssignments] = useState<Record<string, string>>({});
-  const [textColorAssignments, setTextColorAssignments] = useState<Record<string, string>>({});
+  const [imageAssignments, setImageAssignments] = useState<
+    Record<string, string>
+  >({});
+  const [imagePlacements, setImagePlacements] = useState<
+    Record<string, AgentPsdImagePlacement>
+  >({});
+  const [imageSizes, setImageSizes] = useState<
+    Record<string, AgentPsdImageSize>
+  >({});
+  const [textAssignments, setTextAssignments] = useState<
+    Record<string, string>
+  >({});
+  const [textColorAssignments, setTextColorAssignments] = useState<
+    Record<string, string>
+  >({});
   const [uploadingSlotId, setUploadingSlotId] = useState<string | null>(null);
   const [isRendering, setIsRendering] = useState(false);
   const [renderedResultUrl, setRenderedResultUrl] = useState<string>("");
-  const [rightPanelView, setRightPanelView] = useState<"editor" | "export">("editor");
+  const [rightPanelView, setRightPanelView] = useState<"editor" | "export">(
+    "editor"
+  );
   const [stageScale, setStageScale] = useState(1);
 
   const previewViewportRef = useRef<HTMLDivElement | null>(null);
@@ -562,33 +641,18 @@ export function AgentPsdTemplateEditorDialog({
   } | null>(null);
 
   const selectedTemplate = useMemo(
-    () => templates.find((template) => template.id === selectedTemplateId) || null,
+    () =>
+      templates.find((template) => template.id === selectedTemplateId) || null,
     [selectedTemplateId, templates]
   );
   const shouldGroupTemplatesBySecondaryCategory = useMemo(
     () =>
       secondaryCategoryConfig.enabled &&
-      templates.some((template) => Boolean(String(template.secondaryCategory || "").trim())),
+      templates.some((template) =>
+        Boolean(String(template.secondaryCategory || "").trim())
+      ),
     [secondaryCategoryConfig.enabled, templates]
   );
-  const groupedTemplates = useMemo(() => {
-    if (!shouldGroupTemplatesBySecondaryCategory) {
-      return [] as Array<{ label: string; templates: AgentPsdTemplate[] }>;
-    }
-
-    const groups = new Map<string, AgentPsdTemplate[]>();
-    for (const template of templates) {
-      const groupLabel = String(template.secondaryCategory || "").trim() || "未分组";
-      const currentGroup = groups.get(groupLabel) || [];
-      currentGroup.push(template);
-      groups.set(groupLabel, currentGroup);
-    }
-
-    return Array.from(groups.entries()).map(([label, grouped]) => ({
-      label,
-      templates: grouped,
-    }));
-  }, [shouldGroupTemplatesBySecondaryCategory, templates]);
   const mainModeTemplates = useMemo(
     () => templates.filter((template) => template.mode === "main"),
     [templates]
@@ -603,6 +667,32 @@ export function AgentPsdTemplateEditorDialog({
     }
     return selectedTemplate.layers;
   }, [selectedTemplate]);
+  const selectedTemplateMode: AgentPsdTemplateMode =
+    selectedTemplate?.mode === "sku" ? "sku" : "main";
+  const selectedModeTemplates = useMemo(
+    () =>
+      selectedTemplateMode === "sku" ? skuModeTemplates : mainModeTemplates,
+    [mainModeTemplates, selectedTemplateMode, skuModeTemplates]
+  );
+  const groupedSelectedModeTemplates = useMemo(() => {
+    if (!shouldGroupTemplatesBySecondaryCategory) {
+      return [] as Array<{ label: string; templates: AgentPsdTemplate[] }>;
+    }
+
+    const groups = new Map<string, AgentPsdTemplate[]>();
+    for (const template of selectedModeTemplates) {
+      const groupLabel =
+        String(template.secondaryCategory || "").trim() || "未分组";
+      const currentGroup = groups.get(groupLabel) || [];
+      currentGroup.push(template);
+      groups.set(groupLabel, currentGroup);
+    }
+
+    return Array.from(groups.entries()).map(([label, grouped]) => ({
+      label,
+      templates: grouped,
+    }));
+  }, [selectedModeTemplates, shouldGroupTemplatesBySecondaryCategory]);
 
   const editableImageLayers = useMemo(
     () =>
@@ -631,19 +721,24 @@ export function AgentPsdTemplateEditorDialog({
   const orderedEditableImageLayers = useMemo(
     () =>
       orderedEditableLayers.filter(
-        (layer): layer is AgentPsdTemplateImageLayerSlot => isAgentPsdImageLayerSlot(layer)
+        (layer): layer is AgentPsdTemplateImageLayerSlot =>
+          isAgentPsdImageLayerSlot(layer)
       ),
     [orderedEditableLayers]
   );
   const orderedEditableTextLayers = useMemo(
     () =>
       orderedEditableLayers.filter(
-        (layer): layer is AgentPsdTemplateTextLayerSlot => isAgentPsdTextLayerSlot(layer)
+        (layer): layer is AgentPsdTemplateTextLayerSlot =>
+          isAgentPsdTextLayerSlot(layer)
       ),
     [orderedEditableLayers]
   );
   const shouldShowCompositeFallback = useMemo(
-    () => orderedPreviewLayers.some((layer) => !String(layer.sourceUrl || "").trim()),
+    () =>
+      orderedPreviewLayers.some(
+        (layer) => !String(layer.sourceUrl || "").trim()
+      ),
     [orderedPreviewLayers]
   );
 
@@ -677,7 +772,9 @@ export function AgentPsdTemplateEditorDialog({
     for (const layer of editableTextLayers) {
       const explicit = textAssignments[layer.id];
       nextAssignments[layer.id] =
-        typeof explicit === "string" ? explicit : String(layer.defaultText || "");
+        typeof explicit === "string"
+          ? explicit
+          : String(layer.defaultText || "");
     }
 
     return nextAssignments;
@@ -708,177 +805,197 @@ export function AgentPsdTemplateEditorDialog({
       if (!String(effectiveImageAssignments[layer.id] || "").trim()) {
         continue;
       }
-      nextPlacements[layer.id] = normalizeAgentPsdImagePlacement(imagePlacements[layer.id]);
+      nextPlacements[layer.id] = normalizeAgentPsdImagePlacement(
+        imagePlacements[layer.id]
+      );
     }
 
     return nextPlacements;
-  }, [editableImageLayers, effectiveImageAssignments, imagePlacements, selectedTemplate]);
+  }, [
+    editableImageLayers,
+    effectiveImageAssignments,
+    imagePlacements,
+    selectedTemplate,
+  ]);
 
   const selectedLayer = useMemo(
-    () => selectedTemplateLayers.find((layer) => layer.id === selectedLayerId) || null,
+    () =>
+      selectedTemplateLayers.find((layer) => layer.id === selectedLayerId) ||
+      null,
     [selectedLayerId, selectedTemplateLayers]
   );
-  const selectedImageLayer = selectedLayer && isAgentPsdImageLayerSlot(selectedLayer) ? selectedLayer : null;
-  const selectedTextLayer = selectedLayer && isAgentPsdTextLayerSlot(selectedLayer) ? selectedLayer : null;
+  const selectedImageLayer =
+    selectedLayer && isAgentPsdImageLayerSlot(selectedLayer)
+      ? selectedLayer
+      : null;
+  const selectedTextLayer =
+    selectedLayer && isAgentPsdTextLayerSlot(selectedLayer)
+      ? selectedLayer
+      : null;
   const selectedImageAssignmentUrl = selectedImageLayer
     ? String(effectiveImageAssignments[selectedImageLayer.id] || "").trim()
     : "";
   const selectedImagePlacement = selectedImageLayer
-    ? normalizeAgentPsdImagePlacement(effectiveImagePlacements[selectedImageLayer.id])
+    ? normalizeAgentPsdImagePlacement(
+        effectiveImagePlacements[selectedImageLayer.id]
+      )
     : getDefaultAgentPsdImagePlacement();
   const selectedTextColor = selectedTextLayer
-    ? effectiveTextColorAssignments[selectedTextLayer.id] || selectedTextLayer.textColor
+    ? effectiveTextColorAssignments[selectedTextLayer.id] ||
+      selectedTextLayer.textColor
     : "#111111";
-  const selectedImageAdjustmentPanel =
-    selectedImageLayer ? (
-      <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-3.5">
-        <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2">
-          {sourceImageUrl ? (
+  const selectedImageAdjustmentPanel = selectedImageLayer ? (
+    <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-3.5">
+      <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2">
+        {sourceImageUrl ? (
+          <Button
+            className="h-11 w-full min-w-0 justify-center gap-1.5 px-3 text-[13px]"
+            onClick={() => {
+              setImageAssignments((current) => ({
+                ...current,
+                [selectedImageLayer.id]: sourceImageUrl,
+              }));
+              setImagePlacements((current) => ({
+                ...current,
+                [selectedImageLayer.id]: getDefaultAgentPsdImagePlacement(),
+              }));
+              setImageSizes((current) => {
+                const next = { ...current };
+                delete next[selectedImageLayer.id];
+                return next;
+              });
+            }}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            <span className="min-w-0 truncate">使用当前图片</span>
+          </Button>
+        ) : null}
+        <Button
+          className="h-11 w-full min-w-0 justify-center gap-1.5 px-3 text-[13px]"
+          disabled={uploadingSlotId === selectedImageLayer.id}
+          onClick={() => openImageUpload(selectedImageLayer.id)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {uploadingSlotId === selectedImageLayer.id ? (
+            <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
+          ) : (
+            <Upload className="h-4 w-4 shrink-0" />
+          )}
+          <span className="min-w-0 truncate">上传替换图片</span>
+        </Button>
+      </div>
+
+      {selectedImageAssignmentUrl ? (
+        <>
+          <div className="flex justify-end">
             <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-11 w-full min-w-0 justify-center gap-1.5 px-3 text-[13px]"
+              className="px-2 text-white/70 hover:text-white"
               onClick={() => {
-                setImageAssignments((current) => ({
-                  ...current,
-                  [selectedImageLayer.id]: sourceImageUrl,
-                }));
-                setImagePlacements((current) => ({
-                  ...current,
-                  [selectedImageLayer.id]: getDefaultAgentPsdImagePlacement(),
-                }));
+                setImageAssignments((current) => {
+                  const nextAssignments = { ...current };
+                  delete nextAssignments[selectedImageLayer.id];
+                  return nextAssignments;
+                });
+                setImagePlacements((current) => {
+                  const next = { ...current };
+                  delete next[selectedImageLayer.id];
+                  return next;
+                });
                 setImageSizes((current) => {
                   const next = { ...current };
                   delete next[selectedImageLayer.id];
                   return next;
                 });
               }}
+              size="sm"
+              type="button"
+              variant="ghost"
             >
-              <span className="min-w-0 truncate">使用当前图片</span>
+              清空当前替换图
             </Button>
-          ) : null}
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="h-11 w-full min-w-0 justify-center gap-1.5 px-3 text-[13px]"
-            disabled={uploadingSlotId === selectedImageLayer.id}
-            onClick={() => openImageUpload(selectedImageLayer.id)}
-          >
-            {uploadingSlotId === selectedImageLayer.id ? (
-              <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
-            ) : (
-              <Upload className="h-4 w-4 shrink-0" />
-            )}
-            <span className="min-w-0 truncate">上传替换图片</span>
-          </Button>
-        </div>
+          </div>
 
-        {selectedImageAssignmentUrl ? (
-          <>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="px-2 text-white/70 hover:text-white"
-                onClick={() => {
-                  setImageAssignments((current) => {
-                    const nextAssignments = { ...current };
-                    delete nextAssignments[selectedImageLayer.id];
-                    return nextAssignments;
-                  });
-                  setImagePlacements((current) => {
-                    const next = { ...current };
-                    delete next[selectedImageLayer.id];
-                    return next;
-                  });
-                  setImageSizes((current) => {
-                    const next = { ...current };
-                    delete next[selectedImageLayer.id];
-                    return next;
-                  });
-                }}
-              >
-                清空当前替换图
-              </Button>
-            </div>
+          <div className="h-px bg-white/10" />
 
-            <div className="h-px bg-white/10" />
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <div className="flex items-center gap-2">
-                  <ZoomIn className="h-3.5 w-3.5" />
-                  缩放
-                </div>
-                <span className="rounded-full border border-emerald-300/35 bg-emerald-500/15 px-2 py-0.5 font-medium text-emerald-100">
-                  {Math.round(selectedImagePlacement.scale * 100)}%
-                </span>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-muted-foreground text-xs">
+              <div className="flex items-center gap-2">
+                <ZoomIn className="h-3.5 w-3.5" />
+                缩放
               </div>
-              <div className="rounded-xl border border-white/12 bg-black/45 p-2.5">
-                <div className="grid grid-cols-[34px_minmax(0,1fr)_34px] items-center gap-2">
-                  <button
-                    type="button"
-                    className="flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/[0.04] text-white transition-colors hover:bg-white/[0.12]"
-                    onClick={() => nudgeImageScale(selectedImageLayer.id, -0.05)}
-                    aria-label="缩小图片"
-                    title="缩小"
-                  >
-                    <ZoomOut className="h-4 w-4" />
-                  </button>
-                  <Slider
-                    min={MIN_IMAGE_SCALE}
-                    max={MAX_IMAGE_SCALE}
-                    step={0.01}
-                    value={[selectedImagePlacement.scale]}
-                    className="py-1"
-                    trackClassName="h-2.5 rounded-full border border-white/20 bg-[#0f1014]"
-                    rangeClassName="bg-gradient-to-r from-emerald-300 via-green-400 to-teal-400 shadow-[0_0_12px_rgba(16,185,129,0.38)]"
-                    thumbClassName="h-5 w-5 border-2 border-emerald-100 bg-[#0a0a0d] shadow-[0_0_0_5px_rgba(16,185,129,0.2)]"
-                    onValueChange={(value) => {
-                      const newScale = clampImageScale(value[0] || 1);
-                      updateImagePlacement(selectedImageLayer.id, (current) => ({
-                        ...current,
-                        scale: newScale,
-                      }));
-                    }}
-                  />
-                  <button
-                    type="button"
-                    className="flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/[0.04] text-white transition-colors hover:bg-white/[0.12]"
-                    onClick={() => nudgeImageScale(selectedImageLayer.id, 0.05)}
-                    aria-label="放大图片"
-                    title="放大"
-                  >
-                    <ZoomIn className="h-4 w-4" />
-                  </button>
-                </div>
-                <div className="mt-2 flex items-center justify-between px-0.5 text-[10px] text-white/45">
-                  <span>40%</span>
-                  <span className="text-emerald-200">100%</span>
-                  <span>300%</span>
-                </div>
+              <span className="rounded-full border border-emerald-300/35 bg-emerald-500/15 px-2 py-0.5 font-medium text-emerald-100">
+                {Math.round(selectedImagePlacement.scale * 100)}%
+              </span>
+            </div>
+            <div className="rounded-xl border border-white/12 bg-black/45 p-2.5">
+              <div className="grid grid-cols-[34px_minmax(0,1fr)_34px] items-center gap-2">
+                <button
+                  aria-label="缩小图片"
+                  className="flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/[0.04] text-white transition-colors hover:bg-white/[0.12]"
+                  onClick={() => nudgeImageScale(selectedImageLayer.id, -0.05)}
+                  title="缩小"
+                  type="button"
+                >
+                  <ZoomOut className="h-4 w-4" />
+                </button>
+                <Slider
+                  className="py-1"
+                  max={MAX_IMAGE_SCALE}
+                  min={MIN_IMAGE_SCALE}
+                  onValueChange={(value) => {
+                    const newScale = clampImageScale(value[0] || 1);
+                    updateImagePlacement(selectedImageLayer.id, (current) => ({
+                      ...current,
+                      scale: newScale,
+                    }));
+                  }}
+                  rangeClassName="bg-gradient-to-r from-emerald-300 via-green-400 to-teal-400 shadow-[0_0_12px_rgba(16,185,129,0.38)]"
+                  step={0.01}
+                  thumbClassName="h-5 w-5 border-2 border-emerald-100 bg-[#0a0a0d] shadow-[0_0_0_5px_rgba(16,185,129,0.2)]"
+                  trackClassName="h-2.5 rounded-full border border-white/20 bg-[#0f1014]"
+                  value={[selectedImagePlacement.scale]}
+                />
+                <button
+                  aria-label="放大图片"
+                  className="flex h-8 w-8 items-center justify-center rounded-full border border-white/18 bg-white/[0.04] text-white transition-colors hover:bg-white/[0.12]"
+                  onClick={() => nudgeImageScale(selectedImageLayer.id, 0.05)}
+                  title="放大"
+                  type="button"
+                >
+                  <ZoomIn className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="mt-2 flex items-center justify-between px-0.5 text-[10px] text-white/45">
+                <span>40%</span>
+                <span className="text-emerald-200">100%</span>
+                <span>300%</span>
               </div>
             </div>
+          </div>
 
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="px-2 text-white/70 hover:text-white"
-                onClick={() => resetImagePlacement(selectedImageLayer.id)}
-              >
-                重置位置与缩放
-              </Button>
-            </div>
-          </>
-        ) : null}
-      </div>
-    ) : null;
-  const fontFaceCss = useMemo(() => buildPreviewFontFaces(selectedTemplate), [selectedTemplate]);
+          <div className="flex justify-end">
+            <Button
+              className="px-2 text-white/70 hover:text-white"
+              onClick={() => resetImagePlacement(selectedImageLayer.id)}
+              size="sm"
+              type="button"
+              variant="ghost"
+            >
+              重置位置与缩放
+            </Button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  ) : null;
+  const fontFaceCss = useMemo(
+    () => buildPreviewFontFaces(selectedTemplate),
+    [selectedTemplate]
+  );
   const selectedTemplateSelectValue = selectedTemplate?.id;
   const hasTemplateOptions = templates.length > 0;
 
@@ -911,7 +1028,10 @@ export function AgentPsdTemplateEditorDialog({
     if (!open) return;
     setRenderedResultUrl("");
     setRightPanelView("editor");
-    const initialState = createInitialState(selectedTemplate, sourceImageUrl || "");
+    const initialState = createInitialState(
+      selectedTemplate,
+      sourceImageUrl || ""
+    );
     setImageAssignments(initialState.imageAssignments);
     setImagePlacements(initialState.imagePlacements);
     setTextAssignments(initialState.textAssignments);
@@ -942,7 +1062,7 @@ export function AgentPsdTemplateEditorDialog({
     return () => {
       window.clearTimeout(timeoutId);
     };
-  }, [open, selectedTemplate, sourceImageUrl]);
+  }, [open, selectedTemplate?.id]);
 
   useEffect(() => {
     if (!selectedTemplate) {
@@ -960,7 +1080,9 @@ export function AgentPsdTemplateEditorDialog({
 
     let cancelled = false;
     for (const layer of editableImageLayers) {
-      const assignedUrl = String(effectiveImageAssignments[layer.id] || "").trim();
+      const assignedUrl = String(
+        effectiveImageAssignments[layer.id] || ""
+      ).trim();
       if (!assignedUrl) {
         continue;
       }
@@ -998,7 +1120,12 @@ export function AgentPsdTemplateEditorDialog({
     return () => {
       cancelled = true;
     };
-  }, [editableImageLayers, effectiveImageAssignments, imageSizes, selectedTemplate]);
+  }, [
+    editableImageLayers,
+    effectiveImageAssignments,
+    imageSizes,
+    selectedTemplate,
+  ]);
 
   useEffect(() => {
     if (!selectedTemplate) {
@@ -1013,24 +1140,35 @@ export function AgentPsdTemplateEditorDialog({
       const rect = element.getBoundingClientRect();
       const availableWidth = Math.max(
         240,
-        Math.min(PREVIEW_STAGE_TARGET_WIDTH, rect.width - PREVIEW_VIEWPORT_PADDING)
+        Math.min(
+          PREVIEW_STAGE_TARGET_WIDTH,
+          rect.width - PREVIEW_VIEWPORT_PADDING
+        )
       );
       const availableHeight = Math.max(
         240,
-        Math.min(PREVIEW_STAGE_TARGET_HEIGHT, rect.height - PREVIEW_VIEWPORT_PADDING)
+        Math.min(
+          PREVIEW_STAGE_TARGET_HEIGHT,
+          rect.height - PREVIEW_VIEWPORT_PADDING
+        )
       );
       const nextScale = Math.min(
         availableWidth / Math.max(1, selectedTemplate.width),
         availableHeight / Math.max(1, selectedTemplate.height),
         PREVIEW_STAGE_MAX_SCALE
       );
-      setStageScale(Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1);
+      setStageScale(
+        Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1
+      );
     };
 
     updateScale();
     let animationFrameId: number | null = null;
     const scheduleScaleUpdate = () => {
-      if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+      if (
+        typeof window !== "undefined" &&
+        typeof window.requestAnimationFrame === "function"
+      ) {
         if (animationFrameId !== null) {
           window.cancelAnimationFrame(animationFrameId);
         }
@@ -1085,11 +1223,17 @@ export function AgentPsdTemplateEditorDialog({
       try {
         textarea.setSelectionRange(valueLength, valueLength);
       } catch (error) {
-        console.warn("[AgentPsdTemplateEditorDialog] setSelectionRange failed:", error);
+        console.warn(
+          "[AgentPsdTemplateEditorDialog] setSelectionRange failed:",
+          error
+        );
       }
     };
 
-    if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+    if (
+      typeof window !== "undefined" &&
+      typeof window.requestAnimationFrame === "function"
+    ) {
       const frameId = window.requestAnimationFrame(focusTextarea);
       return () => {
         window.cancelAnimationFrame(frameId);
@@ -1102,7 +1246,10 @@ export function AgentPsdTemplateEditorDialog({
     };
   }, [selectedTextLayer?.id]);
 
-  async function handleSlotUpload(slotId: string, event: ChangeEvent<HTMLInputElement>) {
+  async function handleSlotUpload(
+    slotId: string,
+    event: ChangeEvent<HTMLInputElement>
+  ) {
     const file = event.target.files?.[0];
     if (!file) return;
 
@@ -1153,7 +1300,9 @@ export function AgentPsdTemplateEditorDialog({
   ) {
     setImagePlacements((current) => ({
       ...current,
-      [layerId]: normalizeAgentPsdImagePlacement(updater(normalizeAgentPsdImagePlacement(current[layerId]))),
+      [layerId]: normalizeAgentPsdImagePlacement(
+        updater(normalizeAgentPsdImagePlacement(current[layerId]))
+      ),
     }));
   }
 
@@ -1184,14 +1333,19 @@ export function AgentPsdTemplateEditorDialog({
       pointerId: event.pointerId,
       startClientX: event.clientX,
       startClientY: event.clientY,
-      startPlacement: normalizeAgentPsdImagePlacement(effectiveImagePlacements[layer.id]),
+      startPlacement: normalizeAgentPsdImagePlacement(
+        effectiveImagePlacements[layer.id]
+      ),
     };
 
     const nextTarget = event.currentTarget;
     try {
       nextTarget.setPointerCapture?.(event.pointerId);
     } catch (error) {
-      console.warn("[AgentPsdTemplateEditorDialog] setPointerCapture failed:", error);
+      console.warn(
+        "[AgentPsdTemplateEditorDialog] setPointerCapture failed:",
+        error
+      );
     }
 
     const handlePointerMove = (moveEvent: PointerEvent) => {
@@ -1202,8 +1356,12 @@ export function AgentPsdTemplateEditorDialog({
 
       updateImagePlacement(layer.id, () => ({
         ...dragState.startPlacement,
-        offsetX: dragState.startPlacement.offsetX + (moveEvent.clientX - dragState.startClientX) / stageScale,
-        offsetY: dragState.startPlacement.offsetY + (moveEvent.clientY - dragState.startClientY) / stageScale,
+        offsetX:
+          dragState.startPlacement.offsetX +
+          (moveEvent.clientX - dragState.startClientX) / stageScale,
+        offsetY:
+          dragState.startPlacement.offsetY +
+          (moveEvent.clientY - dragState.startClientY) / stageScale,
       }));
     };
 
@@ -1259,14 +1417,30 @@ export function AgentPsdTemplateEditorDialog({
     }
   }
 
-  function handleDownload() {
-    if (!renderedResultUrl) return;
-    window.open(renderedResultUrl, "_blank", "noopener,noreferrer");
+  function handleSwitchSelectedTemplateMode(nextMode: AgentPsdTemplateMode) {
+    if (selectedTemplateMode === nextMode) {
+      return;
+    }
+
+    const nextTemplates =
+      nextMode === "sku" ? skuModeTemplates : mainModeTemplates;
+    if (nextTemplates.length === 0) {
+      toast.error(
+        nextMode === "sku"
+          ? "当前品牌下暂无 SKU 图模式模板"
+          : "当前品牌下暂无主图模式模板"
+      );
+      return;
+    }
+
+    setSelectedTemplateId(nextTemplates[0].id);
   }
 
   return (
     <>
-      <style dangerouslySetInnerHTML={{__html: `
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
         .psd-preview-viewport::-webkit-scrollbar {
           width: 8px;
           height: 8px;
@@ -1281,717 +1455,817 @@ export function AgentPsdTemplateEditorDialog({
         .psd-preview-viewport::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.3);
         }
-      `}} />
-      <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        overlayClassName="bg-black/85 backdrop-blur-sm"
-        className="flex h-[96vh] w-[96vw] max-w-[1700px] flex-col overflow-hidden border border-white/10 bg-[#09090b] p-0 text-white shadow-[0_30px_120px_rgba(0,0,0,0.65)]"
-      >
-        {fontFaceCss ? <style>{fontFaceCss}</style> : null}
+      `,
+        }}
+      />
+      <Dialog onOpenChange={onOpenChange} open={open}>
+        <DialogContent
+          className="flex h-[96vh] w-[96vw] max-w-[1700px] flex-col overflow-hidden border border-white/10 bg-[#09090b] p-0 text-white shadow-[0_30px_120px_rgba(0,0,0,0.65)]"
+          overlayClassName="bg-black/85 backdrop-blur-sm"
+        >
+          {fontFaceCss ? <style>{fontFaceCss}</style> : null}
 
-        <div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden xl:grid-cols-[300px_minmax(0,1fr)_380px]">
-          <div className="min-h-0 border-b border-white/10 bg-[#09090b] p-5 xl:border-b-0 xl:border-r">
-            <ScrollArea className="h-full pr-4">
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <Label>{selectedTemplate ? "选择模板" : "主图模式模板"}</Label>
-                  {selectedTemplate && hasTemplateOptions ? (
-                    <Select value={selectedTemplateSelectValue} onValueChange={setSelectedTemplateId}>
-                      <SelectTrigger className="h-auto min-h-[58px] items-center px-2.5 py-2 [&>span]:contents">
-                        {selectedTemplate ? (
-                          <div className="min-w-0 flex-1 pr-3">
-                            {renderTemplateSelectContent(selectedTemplate, {
-                              showSecondaryCategory: shouldGroupTemplatesBySecondaryCategory,
-                            })}
-                          </div>
-                        ) : (
-                          <SelectValue placeholder={isLoading ? "加载模板中..." : "请选择模板"} />
-                        )}
-                      </SelectTrigger>
-                      <SelectContent
-                        className="border-white/10 bg-[#101114] text-white shadow-2xl"
-                        style={{ backgroundColor: "#101114", color: "#ffffff" }}
-                      >
-                        {shouldGroupTemplatesBySecondaryCategory
-                          ? groupedTemplates.map((group) => (
-                              <SelectGroup key={`psd-template-group-${group.label}`}>
-                                <SelectLabel className="text-white/50">{group.label}</SelectLabel>
-                                {group.templates.map((template) => (
+          <div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden xl:grid-cols-[300px_minmax(0,1fr)_380px]">
+            <div className="min-h-0 border-white/10 border-b bg-[#09090b] p-5 xl:border-r xl:border-b-0">
+              <ScrollArea className="h-full pr-4">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>
+                      {selectedTemplate ? "选择模板" : "主图模式模板"}
+                    </Label>
+                    {selectedTemplate && hasTemplateOptions ? (
+                      <div className="space-y-2.5">
+                        <div className="inline-flex rounded-full border border-white/10 bg-white/[0.03] p-1">
+                          <button
+                            className={`rounded-full px-3 py-1.5 font-medium text-xs transition ${
+                              selectedTemplateMode === "main"
+                                ? "bg-emerald-500/[0.16] text-emerald-100"
+                                : "text-white/60 hover:text-white"
+                            }`}
+                            onClick={() =>
+                              handleSwitchSelectedTemplateMode("main")
+                            }
+                            type="button"
+                          >
+                            主图模式
+                          </button>
+                          <button
+                            className={`rounded-full px-3 py-1.5 font-medium text-xs transition ${
+                              selectedTemplateMode === "sku"
+                                ? "bg-emerald-500/[0.16] text-emerald-100"
+                                : "text-white/60 hover:text-white"
+                            }`}
+                            onClick={() =>
+                              handleSwitchSelectedTemplateMode("sku")
+                            }
+                            type="button"
+                          >
+                            SKU图模式
+                          </button>
+                        </div>
+
+                        <Select
+                          onValueChange={setSelectedTemplateId}
+                          value={selectedTemplateSelectValue}
+                        >
+                          <SelectTrigger className="h-auto min-h-[58px] items-center px-2.5 py-2 [&>span]:contents">
+                            {selectedTemplate ? (
+                              <div className="min-w-0 flex-1 pr-3">
+                                {renderTemplateSelectContent(selectedTemplate, {
+                                  showSecondaryCategory:
+                                    shouldGroupTemplatesBySecondaryCategory,
+                                })}
+                              </div>
+                            ) : (
+                              <SelectValue
+                                placeholder={
+                                  isLoading ? "加载模板中..." : "请选择模板"
+                                }
+                              />
+                            )}
+                          </SelectTrigger>
+                          <SelectContent
+                            className="border-white/10 bg-[#101114] text-white shadow-2xl"
+                            style={{
+                              backgroundColor: "#101114",
+                              color: "#ffffff",
+                            }}
+                          >
+                            {shouldGroupTemplatesBySecondaryCategory
+                              ? groupedSelectedModeTemplates.map((group) => (
+                                  <SelectGroup
+                                    key={`psd-template-group-${group.label}`}
+                                  >
+                                    <SelectLabel className="text-white/50">
+                                      {group.label}
+                                    </SelectLabel>
+                                    {group.templates.map((template) => (
+                                      <SelectItem
+                                        className="py-2.5 pr-3 text-white focus:bg-white/10 focus:text-white data-[state=checked]:bg-white/10 data-[state=checked]:text-white"
+                                        key={template.id}
+                                        value={template.id}
+                                      >
+                                        {renderTemplateSelectContent(template, {
+                                          showSecondaryCategory:
+                                            shouldGroupTemplatesBySecondaryCategory,
+                                          compact: true,
+                                        })}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectGroup>
+                                ))
+                              : selectedModeTemplates.map((template) => (
                                   <SelectItem
+                                    className="py-2.5 pr-3 text-white focus:bg-white/10 focus:text-white data-[state=checked]:bg-white/10 data-[state=checked]:text-white"
                                     key={template.id}
                                     value={template.id}
-                                    className="py-2.5 pr-3 text-white focus:bg-white/10 focus:text-white data-[state=checked]:bg-white/10 data-[state=checked]:text-white"
                                   >
                                     {renderTemplateSelectContent(template, {
-                                      showSecondaryCategory: shouldGroupTemplatesBySecondaryCategory,
                                       compact: true,
                                     })}
                                   </SelectItem>
                                 ))}
-                              </SelectGroup>
-                            ))
-                          : templates.map((template) => (
-                              <SelectItem
-                                key={template.id}
-                                value={template.id}
-                                className="py-2.5 pr-3 text-white focus:bg-white/10 focus:text-white data-[state=checked]:bg-white/10 data-[state=checked]:text-white"
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {isLoading ? (
+                          <>
+                            {Array.from({ length: 2 }).map((_, index) => (
+                              <div
+                                className="rounded-2xl border border-white/15 border-dashed bg-white/[0.02] px-4 py-4 text-muted-foreground text-sm"
+                                key={`main-template-loading-${index}`}
                               >
-                                {renderTemplateSelectContent(template, { compact: true })}
-                              </SelectItem>
+                                正在加载主图模式模板...
+                              </div>
                             ))}
-                      </SelectContent>
-                    </Select>
-                  ) : (
-                    <div className="space-y-2">
-                      {isLoading ? (
-                        <>
-                          {Array.from({ length: 2 }).map((_, index) => (
-                            <div
-                              key={`main-template-loading-${index}`}
-                              className="rounded-2xl border border-dashed border-white/15 bg-white/[0.02] px-4 py-4 text-sm text-muted-foreground"
+                          </>
+                        ) : mainModeTemplates.length > 0 ? (
+                          mainModeTemplates.map((template) => (
+                            <button
+                              className={`w-full rounded-2xl border p-3 text-left transition ${
+                                selectedTemplateId === template.id
+                                  ? "border-emerald-400/45 bg-emerald-500/10"
+                                  : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]"
+                              }`}
+                              key={template.id}
+                              onClick={() => setSelectedTemplateId(template.id)}
+                              type="button"
                             >
-                              正在加载主图模式模板...
-                            </div>
-                          ))}
-                        </>
-                      ) : mainModeTemplates.length > 0 ? (
-                        mainModeTemplates.map((template) => (
-                          <button
-                            key={template.id}
-                            type="button"
-                            onClick={() => setSelectedTemplateId(template.id)}
-                            className={`w-full rounded-2xl border p-3 text-left transition ${
-                              selectedTemplateId === template.id
-                                ? "border-emerald-400/45 bg-emerald-500/10"
-                                : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]"
-                            }`}
-                          >
-                            {renderTemplatePickerCardContent(template, {
-                              showSecondaryCategory: shouldGroupTemplatesBySecondaryCategory,
-                              emphasize: true,
-                            })}
-                          </button>
-                        ))
-                      ) : (
-                        <div className="rounded-xl border border-dashed border-white/15 bg-white/[0.02] px-3 py-3 text-sm text-muted-foreground">
-                          {normalizedBrandName
-                            ? `当前品牌“${normalizedBrandName}”下暂无主图模式模板`
-                            : "请先在工作流中选择品牌后再打开 PSD 模板。"}
+                              {renderTemplatePickerCardContent(template, {
+                                showSecondaryCategory:
+                                  shouldGroupTemplatesBySecondaryCategory,
+                                emphasize: true,
+                              })}
+                            </button>
+                          ))
+                        ) : (
+                          <div className="rounded-xl border border-white/15 border-dashed bg-white/[0.02] px-3 py-3 text-muted-foreground text-sm">
+                            {normalizedBrandName
+                              ? `当前品牌“${normalizedBrandName}”下暂无主图模式模板`
+                              : "请先在工作流中选择品牌后再打开 PSD 模板。"}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {selectedTemplate ? (
+                    <>
+                      <div className="mx-auto w-full max-w-[220px] overflow-hidden rounded-2xl border border-white/10 bg-white/5">
+                        <div
+                          style={{
+                            aspectRatio: `${Math.max(1, selectedTemplate.width)} / ${Math.max(1, selectedTemplate.height)}`,
+                          }}
+                        >
+                          <img
+                            alt={selectedTemplate.name}
+                            className="h-full w-full object-contain"
+                            src={selectedTemplate.previewUrl}
+                          />
                         </div>
-                      )}
+                      </div>
+
+                      <Button
+                        className="w-full bg-gradient-to-r from-orange-600 to-rose-600 hover:from-orange-500 hover:to-rose-500"
+                        disabled={isRendering}
+                        onClick={handleRender}
+                      >
+                        {isRendering ? (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <Sparkles className="mr-2 h-4 w-4" />
+                        )}
+                        应用模板并导出
+                      </Button>
+
+                      {selectedImageAdjustmentPanel}
+                    </>
+                  ) : (
+                    <div className="rounded-2xl border border-white/15 border-dashed p-5 text-muted-foreground text-sm">
+                      {isLoading
+                        ? "正在加载可用模板..."
+                        : hasTemplateOptions
+                          ? "请从左侧主图模式模板或右侧 SKU 图模式模板中选择一个模板开始编辑。"
+                          : normalizedBrandName
+                            ? `当前品牌“${normalizedBrandName}”下还没有可用 PSD 模板，请先去后台配置。`
+                            : "当前还没有启用的 PSD 模板，请先去后台配置。"}
                     </div>
                   )}
                 </div>
+              </ScrollArea>
+            </div>
 
+            <div className="flex min-h-0 flex-col border-white/10 border-b bg-[#09090b] p-5 xl:border-r xl:border-b-0">
+              <div
+                className="psd-preview-viewport relative flex min-h-0 flex-1 items-center justify-center overflow-auto rounded-2xl border border-white/10 bg-[#111114] p-4"
+                ref={previewViewportRef}
+              >
                 {selectedTemplate ? (
-                  <>
-                    <div className="mx-auto w-full max-w-[220px] overflow-hidden rounded-2xl border border-white/10 bg-white/5">
-                      <div
-                        style={{
-                          aspectRatio: `${Math.max(1, selectedTemplate.width)} / ${Math.max(1, selectedTemplate.height)}`,
-                        }}
-                      >
-                        <img
-                          src={selectedTemplate.previewUrl}
-                          alt={selectedTemplate.name}
-                          className="h-full w-full object-contain"
-                        />
-                      </div>
-                    </div>
-
-                    <Button
-                      onClick={handleRender}
-                      disabled={isRendering}
-                      className="w-full bg-gradient-to-r from-orange-600 to-rose-600 hover:from-orange-500 hover:to-rose-500"
-                    >
-                      {isRendering ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      ) : (
-                        <Sparkles className="mr-2 h-4 w-4" />
-                      )}
-                      应用模板并导出
-                    </Button>
-
-                    {selectedImageAdjustmentPanel}
-                  </>
-                ) : (
-                  <div className="rounded-2xl border border-dashed border-white/15 p-5 text-sm text-muted-foreground">
-                    {isLoading
-                      ? "正在加载可用模板..."
-                      : normalizedBrandName
-                        ? `当前品牌“${normalizedBrandName}”下还没有可用 PSD 模板，请先去后台配置。`
-                        : "当前还没有启用的 PSD 模板，请先去后台配置。"}
-                  </div>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-
-          <div className="flex min-h-0 flex-col border-b border-white/10 bg-[#09090b] p-5 xl:border-b-0 xl:border-r">
-            <div
-              ref={previewViewportRef}
-              className="psd-preview-viewport relative flex min-h-0 flex-1 items-center justify-center overflow-auto rounded-2xl border border-white/10 bg-[#111114] p-4"
-            >
-              {selectedTemplate ? (
-                <div
-                  className="relative shrink-0"
-                  style={{
-                    width: selectedTemplate.width * stageScale,
-                    height: selectedTemplate.height * stageScale,
-                  }}
-                >
                   <div
-                    className="absolute left-0 top-0 overflow-hidden rounded-[20px] shadow-2xl"
+                    className="relative shrink-0"
                     style={{
-                      width: selectedTemplate.width,
-                      height: selectedTemplate.height,
-                      transform: `scale(${stageScale})`,
-                      transformOrigin: "top left",
+                      width: selectedTemplate.width * stageScale,
+                      height: selectedTemplate.height * stageScale,
                     }}
                   >
-                    {shouldShowCompositeFallback ? (
-                      <img
-                        src={selectedTemplate.renderBaseUrl || selectedTemplate.previewUrl}
-                        alt={`${selectedTemplate.name} 编辑底图`}
-                        className="absolute inset-0 h-full w-full object-cover"
-                      />
-                    ) : null}
+                    <div
+                      className="absolute top-0 left-0 overflow-hidden rounded-[20px] shadow-2xl"
+                      style={{
+                        width: selectedTemplate.width,
+                        height: selectedTemplate.height,
+                        transform: `scale(${stageScale})`,
+                        transformOrigin: "top left",
+                      }}
+                    >
+                      {shouldShowCompositeFallback ? (
+                        <img
+                          alt={`${selectedTemplate.name} 编辑底图`}
+                          className="absolute inset-0 h-full w-full object-cover"
+                          src={
+                            selectedTemplate.renderBaseUrl ||
+                            selectedTemplate.previewUrl
+                          }
+                        />
+                      ) : null}
 
-                    <div className="pointer-events-none absolute inset-0">
-                      {orderedPreviewLayers.map((layer) => {
-                        const layerBoxStyle = {
-                          left: layer.x,
-                          top: layer.y,
-                          width: layer.width,
-                          height: layer.height,
-                        } satisfies CSSProperties;
+                      <div className="pointer-events-none absolute inset-0">
+                        {orderedPreviewLayers.map((layer) => {
+                          const layerBoxStyle = {
+                            left: layer.x,
+                            top: layer.y,
+                            width: layer.width,
+                            height: layer.height,
+                          } satisfies CSSProperties;
 
-                        if (isAgentPsdImageLayerSlot(layer)) {
-                          const assignedUrl = effectiveImageAssignments[layer.id];
-                          const layerImageUrl = assignedUrl || layer.sourceUrl;
-                          if (!layerImageUrl) {
+                          if (isAgentPsdImageLayerSlot(layer)) {
+                            const assignedUrl =
+                              effectiveImageAssignments[layer.id];
+                            const layerImageUrl =
+                              assignedUrl || layer.sourceUrl;
+                            if (!layerImageUrl) {
+                              return null;
+                            }
+                            const assignedImageContainerStyle = assignedUrl
+                              ? {
+                                  ...layerBoxStyle,
+                                  ...getAssignedImageMaskStyle(layer),
+                                }
+                              : layerBoxStyle;
+
+                            return (
+                              <div
+                                className="absolute overflow-hidden"
+                                key={layer.id}
+                                style={assignedImageContainerStyle}
+                              >
+                                <img
+                                  alt={layer.layerName}
+                                  className={assignedUrl ? "" : "h-full w-full"}
+                                  src={layerImageUrl}
+                                  style={
+                                    assignedUrl && imageSizes[layer.id]
+                                      ? getPlacedAssignedImageStyle({
+                                          layer,
+                                          imageSize: imageSizes[layer.id],
+                                          placement:
+                                            effectiveImagePlacements[layer.id],
+                                        })
+                                      : assignedUrl
+                                        ? {
+                                            width: "100%",
+                                            height: "100%",
+                                            objectFit: getImageFit(
+                                              layer.replaceMode
+                                            ),
+                                          }
+                                        : {
+                                            width: "100%",
+                                            height: "100%",
+                                            objectFit: "fill",
+                                          }
+                                  }
+                                />
+                              </div>
+                            );
+                          }
+
+                          const isSelected = selectedLayerId === layer.id;
+                          if (isSelected) {
                             return null;
                           }
-                          const assignedImageContainerStyle = assignedUrl
-                            ? {
-                                ...layerBoxStyle,
-                                ...getAssignedImageMaskStyle(layer),
-                              }
-                            : layerBoxStyle;
 
-                          return (
-                            <div
-                              key={layer.id}
-                              className="absolute overflow-hidden"
-                              style={assignedImageContainerStyle}
-                            >
-                              <img
-                                src={layerImageUrl}
-                                alt={layer.layerName}
-                                className={assignedUrl ? "" : "h-full w-full"}
-                                style={
-                                  assignedUrl && imageSizes[layer.id]
-                                    ? getPlacedAssignedImageStyle({
-                                        layer,
-                                        imageSize: imageSizes[layer.id],
-                                        placement: effectiveImagePlacements[layer.id],
-                                      })
-                                    : assignedUrl
-                                      ? {
-                                          width: "100%",
-                                          height: "100%",
-                                          objectFit: getImageFit(layer.replaceMode),
-                                        }
-                                      : {
-                                          width: "100%",
-                                          height: "100%",
-                                          objectFit: "fill",
-                                        }
-                                }
-                              />
-                            </div>
-                          );
-                        }
+                          const value =
+                            effectiveTextAssignments[layer.id] || "";
+                          const resolvedTextColor =
+                            effectiveTextColorAssignments[layer.id] ||
+                            layer.textColor;
+                          const shouldUseEditedPreview =
+                            hasCustomizedTextLayerAppearance(
+                              layer,
+                              value,
+                              resolvedTextColor
+                            );
 
-                        const isSelected = selectedLayerId === layer.id;
-                        if (isSelected) {
-                          return null;
-                        }
-
-                        const value = effectiveTextAssignments[layer.id] || "";
-                        const resolvedTextColor = effectiveTextColorAssignments[layer.id] || layer.textColor;
-                        const shouldUseEditedPreview = hasCustomizedTextLayerAppearance(
-                          layer,
-                          value,
-                          resolvedTextColor
-                        );
-
-                        if (!shouldUseEditedPreview && layer.sourceUrl) {
-                          return (
-                            <div
-                              key={layer.id}
-                              className="absolute overflow-hidden"
-                              style={layerBoxStyle}
-                            >
-                              <img
-                                src={layer.sourceUrl}
-                                alt={layer.layerName}
-                                className="h-full w-full object-fill"
-                              />
-                            </div>
-                          );
-                        }
-
-                        if (!value && !layer.placeholder) {
-                          return null;
-                        }
-
-                        const textFrame = getTextLayerRenderFrame(
-                          layer,
-                          value || layer.placeholder || layer.layerName
-                        );
-
-                        return (
-                          <div
-                            key={layer.id}
-                            className="absolute overflow-visible"
-                            style={{
-                              left: layer.x + textFrame.offsetX,
-                              top: layer.y + textFrame.offsetY,
-                              width: textFrame.width,
-                              height: textFrame.height,
-                            }}
-                          >
-                            <div
-                              className="whitespace-pre"
-                              style={getTextLayerContentStyle(
-                                layer,
-                                value || layer.placeholder || layer.layerName,
-                                resolvedTextColor
-                              )}
-                            >
-                              {value || layer.placeholder || layer.layerName}
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-
-                    <div className="absolute inset-0">
-                      {orderedEditableImageLayers.map((layer) => {
-                        const isSelected = selectedLayerId === layer.id;
-                        const frameStyle = getLayerFrameStyle(layer, isSelected);
-                        const hasAssignedImage = Boolean(
-                          String(effectiveImageAssignments[layer.id] || "").trim()
-                        );
-
-                        return isSelected && hasAssignedImage ? (
-                          <div
-                            key={layer.id}
-                            role="button"
-                            tabIndex={0}
-                            onClick={() => setSelectedLayerId(layer.id)}
-                            onPointerDown={(event) => handleImageDragStart(layer, event)}
-                            className="absolute overflow-hidden rounded-lg transition-all"
-                            style={{
-                              ...frameStyle,
-                              zIndex: 20,
-                              background: "rgba(249,115,22,0.08)",
-                              cursor: imageDragStateRef.current?.layerId === layer.id ? "grabbing" : "grab",
-                              touchAction: "none",
-                            }}
-                            aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
-                            title={`${getLayerLabel(layer)}：${layer.layerName}`}
-                          >
-                            <div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
-                              {layer.layerName}
-                            </div>
-                            <div className="pointer-events-none absolute bottom-2 right-2 flex items-center gap-1 rounded-full bg-orange-500/85 px-2 py-1 text-[11px] text-white">
-                              <Move className="h-3 w-3" />
-                              拖动调整
-                            </div>
-                          </div>
-                        ) : (
-                          <button
-                            key={layer.id}
-                            type="button"
-                            onClick={() => setSelectedLayerId(layer.id)}
-                            className="absolute overflow-hidden rounded-lg transition-all"
-                            style={{
-                              ...frameStyle,
-                              zIndex: isSelected ? 20 : 10,
-                              background: isSelected ? "rgba(249,115,22,0.08)" : "transparent",
-                            }}
-                            aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
-                            title={`${getLayerLabel(layer)}：${layer.layerName}`}
-                          >
-                            <div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
-                              {layer.layerName}
-                            </div>
-
-                            {!hasAssignedImage ? (
-                              <div className="pointer-events-none absolute bottom-2 right-2 rounded-full bg-orange-500/85 px-2 py-1 text-[11px] text-white">
-                                点击替换图片
+                          if (!shouldUseEditedPreview && layer.sourceUrl) {
+                            return (
+                              <div
+                                className="absolute overflow-hidden"
+                                key={layer.id}
+                                style={layerBoxStyle}
+                              >
+                                <img
+                                  alt={layer.layerName}
+                                  className="h-full w-full object-fill"
+                                  src={layer.sourceUrl}
+                                />
                               </div>
-                            ) : null}
-                          </button>
-                        );
-                      })}
+                            );
+                          }
 
-                      {orderedEditableImageLayers.map((layer) => {
-                        const isSelected = selectedLayerId === layer.id;
-                        const hasAssignedImage = Boolean(
-                          String(effectiveImageAssignments[layer.id] || "").trim()
-                        );
-                        if (!isSelected || !hasAssignedImage) {
-                          return null;
-                        }
+                          if (!value && !layer.placeholder) {
+                            return null;
+                          }
 
-                        return (
-                          <div
-                            key={`${layer.id}-controls`}
-                            className="absolute flex items-center gap-1 rounded-full bg-black/72 p-1 text-white shadow-lg"
-                            style={{
-                              left: layer.x + layer.width - 112,
-                              top: Math.max(8, layer.y - 40),
-                              zIndex: 25,
-                            }}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-full p-1.5 transition hover:bg-white/10"
-                              onClick={() => nudgeImageScale(layer.id, -0.1)}
-                              aria-label="缩小图片"
-                              title="缩小"
-                            >
-                              <ZoomOut className="h-3.5 w-3.5" />
-                            </button>
-                            <button
-                              type="button"
-                              className="rounded-full p-1.5 transition hover:bg-white/10"
-                              onClick={() => nudgeImageScale(layer.id, 0.1)}
-                              aria-label="放大图片"
-                              title="放大"
-                            >
-                              <ZoomIn className="h-3.5 w-3.5" />
-                            </button>
-                            <button
-                              type="button"
-                              className="rounded-full p-1.5 transition hover:bg-white/10"
-                              onClick={() => resetImagePlacement(layer.id)}
-                              aria-label="重置图片位置和缩放"
-                              title="重置"
-                            >
-                              <RefreshCcw className="h-3.5 w-3.5" />
-                            </button>
-                          </div>
-                        );
-                      })}
+                          const textFrame = getTextLayerRenderFrame(
+                            layer,
+                            value || layer.placeholder || layer.layerName
+                          );
 
-                      {orderedEditableTextLayers.map((layer) => {
-                        const isSelected = selectedLayerId === layer.id;
-                        const frameStyle = getLayerFrameStyle(layer, isSelected);
-                        const currentValue = effectiveTextAssignments[layer.id] || "";
-                        const resolvedTextColor =
-                          effectiveTextColorAssignments[layer.id] || layer.textColor;
-                        const preserveSourceAppearance =
-                          !!layer.sourceUrl &&
-                          !hasCustomizedTextLayerAppearance(layer, currentValue, resolvedTextColor);
-                        const editedTextFrame = getTextLayerRenderFrame(layer, currentValue);
-
-                        if (isSelected) {
                           return (
                             <div
+                              className="absolute overflow-visible"
                               key={layer.id}
-                              className="absolute overflow-visible rounded-lg"
                               style={{
-                                ...frameStyle,
-                                zIndex: 40,
-                                background: preserveSourceAppearance
-                                  ? "transparent"
-                                  : "rgba(56,189,248,0.08)",
+                                left: layer.x + textFrame.offsetX,
+                                top: layer.y + textFrame.offsetY,
+                                width: textFrame.width,
+                                height: textFrame.height,
                               }}
                             >
-                              {preserveSourceAppearance && layer.sourceUrl ? (
-                                <img
-                                  src={layer.sourceUrl}
-                                  alt={layer.layerName}
-                                  className="pointer-events-none absolute inset-0 h-full w-full object-fill"
-                                />
-                              ) : null}
                               <div
-                                className="absolute"
-                                style={
-                                  preserveSourceAppearance
-                                    ? { inset: 0 }
-                                    : {
-                                        left: editedTextFrame.offsetX,
-                                        top: editedTextFrame.offsetY,
-                                        width: editedTextFrame.width,
-                                        height: editedTextFrame.height,
-                                      }
-                                }
+                                className="whitespace-pre"
+                                style={getTextLayerContentStyle(
+                                  layer,
+                                  value || layer.placeholder || layer.layerName,
+                                  resolvedTextColor
+                                )}
                               >
-                                <textarea
-                                  ref={inlineTextEditorRef}
-                                  wrap="off"
-                                  value={currentValue}
-                                  onChange={(event) =>
-                                    setTextAssignments((current) => ({
-                                      ...current,
-                                      [layer.id]: event.target.value,
-                                    }))
-                                  }
-                                  className="resize-none border-none bg-transparent outline-none"
-                                  style={getInlineTextEditorStyle(
-                                    layer,
-                                    preserveSourceAppearance,
-                                    currentValue,
-                                    resolvedTextColor
-                                  )}
-                                />
+                                {value || layer.placeholder || layer.layerName}
                               </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      <div className="absolute inset-0">
+                        {orderedEditableImageLayers.map((layer) => {
+                          const isSelected = selectedLayerId === layer.id;
+                          const frameStyle = getLayerFrameStyle(
+                            layer,
+                            isSelected
+                          );
+                          const hasAssignedImage = Boolean(
+                            String(
+                              effectiveImageAssignments[layer.id] || ""
+                            ).trim()
+                          );
+
+                          return isSelected && hasAssignedImage ? (
+                            <div
+                              aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
+                              className="absolute overflow-hidden rounded-lg transition-all"
+                              key={layer.id}
+                              onClick={() => setSelectedLayerId(layer.id)}
+                              onPointerDown={(event) =>
+                                handleImageDragStart(layer, event)
+                              }
+                              role="button"
+                              style={{
+                                ...frameStyle,
+                                zIndex: 20,
+                                background: "rgba(249,115,22,0.08)",
+                                cursor:
+                                  imageDragStateRef.current?.layerId ===
+                                  layer.id
+                                    ? "grabbing"
+                                    : "grab",
+                                touchAction: "none",
+                              }}
+                              tabIndex={0}
+                              title={`${getLayerLabel(layer)}：${layer.layerName}`}
+                            >
+                              <div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
+                                {layer.layerName}
+                              </div>
+                              <div className="pointer-events-none absolute right-2 bottom-2 flex items-center gap-1 rounded-full bg-orange-500/85 px-2 py-1 text-[11px] text-white">
+                                <Move className="h-3 w-3" />
+                                拖动调整
+                              </div>
+                            </div>
+                          ) : (
+                            <button
+                              aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
+                              className="absolute overflow-hidden rounded-lg transition-all"
+                              key={layer.id}
+                              onClick={() => setSelectedLayerId(layer.id)}
+                              style={{
+                                ...frameStyle,
+                                zIndex: isSelected ? 20 : 10,
+                                background: isSelected
+                                  ? "rgba(249,115,22,0.08)"
+                                  : "transparent",
+                              }}
+                              title={`${getLayerLabel(layer)}：${layer.layerName}`}
+                              type="button"
+                            >
+                              <div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
+                                {layer.layerName}
+                              </div>
+
+                              {hasAssignedImage ? null : (
+                                <div className="pointer-events-none absolute right-2 bottom-2 rounded-full bg-orange-500/85 px-2 py-1 text-[11px] text-white">
+                                  点击替换图片
+                                </div>
+                              )}
+                            </button>
+                          );
+                        })}
+
+                        {orderedEditableImageLayers.map((layer) => {
+                          const isSelected = selectedLayerId === layer.id;
+                          const hasAssignedImage = Boolean(
+                            String(
+                              effectiveImageAssignments[layer.id] || ""
+                            ).trim()
+                          );
+                          if (!isSelected || !hasAssignedImage) {
+                            return null;
+                          }
+
+                          return (
+                            <div
+                              className="absolute flex items-center gap-1 rounded-full bg-black/72 p-1 text-white shadow-lg"
+                              key={`${layer.id}-controls`}
+                              style={{
+                                left: layer.x + layer.width - 112,
+                                top: Math.max(8, layer.y - 40),
+                                zIndex: 25,
+                              }}
+                            >
+                              <button
+                                aria-label="缩小图片"
+                                className="rounded-full p-1.5 transition hover:bg-white/10"
+                                onClick={() => nudgeImageScale(layer.id, -0.1)}
+                                title="缩小"
+                                type="button"
+                              >
+                                <ZoomOut className="h-3.5 w-3.5" />
+                              </button>
+                              <button
+                                aria-label="放大图片"
+                                className="rounded-full p-1.5 transition hover:bg-white/10"
+                                onClick={() => nudgeImageScale(layer.id, 0.1)}
+                                title="放大"
+                                type="button"
+                              >
+                                <ZoomIn className="h-3.5 w-3.5" />
+                              </button>
+                              <button
+                                aria-label="重置图片位置和缩放"
+                                className="rounded-full p-1.5 transition hover:bg-white/10"
+                                onClick={() => resetImagePlacement(layer.id)}
+                                title="重置"
+                                type="button"
+                              >
+                                <RefreshCcw className="h-3.5 w-3.5" />
+                              </button>
+                            </div>
+                          );
+                        })}
+
+                        {orderedEditableTextLayers.map((layer) => {
+                          const isSelected = selectedLayerId === layer.id;
+                          const frameStyle = getLayerFrameStyle(
+                            layer,
+                            isSelected
+                          );
+                          const currentValue =
+                            effectiveTextAssignments[layer.id] || "";
+                          const resolvedTextColor =
+                            effectiveTextColorAssignments[layer.id] ||
+                            layer.textColor;
+                          const preserveSourceAppearance =
+                            !!layer.sourceUrl &&
+                            !hasCustomizedTextLayerAppearance(
+                              layer,
+                              currentValue,
+                              resolvedTextColor
+                            );
+                          const editedTextFrame = getTextLayerRenderFrame(
+                            layer,
+                            currentValue
+                          );
+
+                          if (isSelected) {
+                            return (
+                              <div
+                                className="absolute overflow-visible rounded-lg"
+                                key={layer.id}
+                                style={{
+                                  ...frameStyle,
+                                  zIndex: 40,
+                                  background: preserveSourceAppearance
+                                    ? "transparent"
+                                    : "rgba(56,189,248,0.08)",
+                                }}
+                              >
+                                {preserveSourceAppearance && layer.sourceUrl ? (
+                                  <img
+                                    alt={layer.layerName}
+                                    className="pointer-events-none absolute inset-0 h-full w-full object-fill"
+                                    src={layer.sourceUrl}
+                                  />
+                                ) : null}
+                                <div
+                                  className="absolute"
+                                  style={
+                                    preserveSourceAppearance
+                                      ? { inset: 0 }
+                                      : {
+                                          left: editedTextFrame.offsetX,
+                                          top: editedTextFrame.offsetY,
+                                          width: editedTextFrame.width,
+                                          height: editedTextFrame.height,
+                                        }
+                                  }
+                                >
+                                  <textarea
+                                    className="resize-none border-none bg-transparent outline-none"
+                                    onChange={(event) =>
+                                      setTextAssignments((current) => ({
+                                        ...current,
+                                        [layer.id]: event.target.value,
+                                      }))
+                                    }
+                                    ref={inlineTextEditorRef}
+                                    style={getInlineTextEditorStyle(
+                                      layer,
+                                      preserveSourceAppearance,
+                                      currentValue,
+                                      resolvedTextColor
+                                    )}
+                                    value={currentValue}
+                                    wrap="off"
+                                  />
+                                </div>
+                                <div
+                                  className={getTextLayerNameBadgeClassName()}
+                                >
+                                  {layer.layerName}
+                                </div>
+                              </div>
+                            );
+                          }
+
+                          return (
+                            <button
+                              aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
+                              className="absolute overflow-visible rounded-lg transition-all"
+                              key={layer.id}
+                              onClick={() => setSelectedLayerId(layer.id)}
+                              onDoubleClick={() => setSelectedLayerId(layer.id)}
+                              style={{
+                                ...frameStyle,
+                                zIndex: isSelected ? 40 : 30,
+                                background: isSelected
+                                  ? "rgba(56,189,248,0.05)"
+                                  : "transparent",
+                              }}
+                              title={`${getLayerLabel(layer)}：${layer.layerName}`}
+                              type="button"
+                            >
                               <div className={getTextLayerNameBadgeClassName()}>
                                 {layer.layerName}
                               </div>
-                            </div>
-                          );
-                        }
 
-                        return (
-                          <button
-                            key={layer.id}
-                            type="button"
-                            onClick={() => setSelectedLayerId(layer.id)}
-                            onDoubleClick={() => setSelectedLayerId(layer.id)}
-                            className="absolute overflow-visible rounded-lg transition-all"
-                            style={{
-                              ...frameStyle,
-                              zIndex: isSelected ? 40 : 30,
-                              background: isSelected ? "rgba(56,189,248,0.05)" : "transparent",
-                            }}
-                            aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
-                            title={`${getLayerLabel(layer)}：${layer.layerName}`}
-                          >
-                            <div className={getTextLayerNameBadgeClassName()}>
-                              {layer.layerName}
-                            </div>
-
-                            <div className={getTextLayerHintBadgeClassName()}>
-                              点击编辑文字
-                            </div>
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <div className="flex h-full w-full flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-5">
-                  <div className="mb-4 flex items-center justify-between gap-3">
-                    <div>
-                      <div className="text-sm font-semibold text-white">SKU图模式模板</div>
-                      <div className="mt-1 text-xs text-white/45">
-                        {normalizedTemplateMode === "sku"
-                          ? "当前结果属于 SKU 图模式，可直接从这里选择并进入编辑。"
-                          : "这里集中展示当前品牌下的 SKU 图模式模板。"}
-                      </div>
-                    </div>
-                    <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs text-white/65">
-                      {skuModeTemplates.length} 个模板
-                    </div>
-                  </div>
-
-                  {isLoading ? (
-                    <div className="grid gap-3 md:grid-cols-2">
-                      {Array.from({ length: 4 }).map((_, index) => (
-                        <div
-                          key={`sku-template-loading-${index}`}
-                          className="rounded-2xl border border-dashed border-white/15 bg-white/[0.02] px-4 py-5 text-sm text-muted-foreground"
-                        >
-                          正在加载 SKU 图模式模板...
-                        </div>
-                      ))}
-                    </div>
-                  ) : skuModeTemplates.length > 0 ? (
-                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-                      {skuModeTemplates.map((template) => (
-                        <button
-                          key={template.id}
-                          type="button"
-                          onClick={() => setSelectedTemplateId(template.id)}
-                          className={`rounded-2xl border p-3 text-left transition ${
-                            selectedTemplateId === template.id
-                              ? "border-emerald-400/45 bg-emerald-500/10"
-                              : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]"
-                          }`}
-                        >
-                          {renderTemplatePickerCardContent(template, {
-                            showSecondaryCategory: shouldGroupTemplatesBySecondaryCategory,
-                            emphasize: true,
-                          })}
-                        </button>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="flex h-full w-full items-center justify-center px-6 text-center text-sm text-muted-foreground">
-                      {normalizedBrandName
-                        ? `当前品牌“${normalizedBrandName}”下暂无 SKU 图模式模板`
-                        : "请先返回工作流区域选择品牌，再打开 PSD 模板。"}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="flex min-h-0 flex-col bg-[#09090b] p-4 xl:p-5">
-            {renderedResultUrl ? (
-              <div className="mb-3 flex items-center justify-end gap-3">
-                <div className="inline-flex rounded-full border border-white/10 bg-white/[0.03] p-1">
-                  <button
-                    type="button"
-                    onClick={() => setRightPanelView("editor")}
-                    className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${
-                      rightPanelView === "editor"
-                        ? "bg-emerald-500/[0.16] text-emerald-100"
-                        : "text-white/60 hover:text-white"
-                    }`}
-                  >
-                    编辑面板
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setRightPanelView("export")}
-                    className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${
-                      rightPanelView === "export"
-                        ? "bg-emerald-500/[0.16] text-emerald-100"
-                        : "text-white/60 hover:text-white"
-                    }`}
-                  >
-                    导出结果
-                  </button>
-                </div>
-              </div>
-            ) : null}
-
-            <Input
-              ref={uploadInputRef}
-              type="file"
-              accept="image/png,image/jpeg,image/webp"
-              className="hidden"
-              onChange={(event) => {
-                if (!selectedImageLayer) return;
-                void handleSlotUpload(selectedImageLayer.id, event);
-              }}
-            />
-
-            {renderedResultUrl && rightPanelView === "export" ? (
-              <div className="flex min-h-0 flex-1 flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-3.5 xl:p-4">
-                <div className="flex h-full min-h-0 flex-col justify-between gap-4">
-                  <div className="mx-auto w-full max-w-[230px] overflow-hidden rounded-2xl border border-white/10 bg-white/5">
-                    <div
-                      style={{
-                        aspectRatio: selectedTemplate
-                          ? `${Math.max(1, selectedTemplate.width)} / ${Math.max(1, selectedTemplate.height)}`
-                          : "1 / 1",
-                      }}
-                    >
-                      <img
-                        src={renderedResultUrl}
-                        alt="PSD 模板导出结果"
-                        className="h-full w-full object-contain"
-                      />
-                    </div>
-                  </div>
-
-                  <Button onClick={handleDownload} className="w-full">
-                    <Download className="mr-2 h-4 w-4" />
-                    下载结果图
-                  </Button>
-                </div>
-              </div>
-            ) : selectedTextLayer ? (
-              <div className="flex min-h-0 flex-1 flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-3.5 xl:p-4">
-                <div className="flex h-full flex-col gap-3">
-                  <Textarea
-                    rows={4}
-                    value={effectiveTextAssignments[selectedTextLayer.id] || ""}
-                    placeholder={selectedTextLayer.placeholder || "请输入文字"}
-                    className="min-h-[180px] flex-1 resize-none xl:min-h-[200px]"
-                    onChange={(event) =>
-                      setTextAssignments((current) => ({
-                        ...current,
-                        [selectedTextLayer.id]: event.target.value,
-                      }))
-                    }
-                  />
-                  <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
-                    <span>字体：{selectedTextLayer.fontLabel || selectedTextLayer.fontFamily || "系统字体"}</span>
-                    <span>字号：{selectedTextLayer.fontSize}px</span>
-                    <span>行高：{selectedTextLayer.lineHeight}</span>
-                    <span>字距：{selectedTextLayer.letterSpacing}px</span>
-                  </div>
-                  {textColorConfig.enabled ? (
-                    <div className="space-y-3 rounded-xl border border-white/10 bg-white/[0.03] p-3">
-                      <div className="flex items-center justify-between gap-3">
-                        <div>
-                          <div className="text-sm font-medium">文字颜色</div>
-                          <div className="text-xs text-muted-foreground">
-                            当前模板允许在两种系统预设颜色之间切换。
-                          </div>
-                        </div>
-                        <div
-                          className="h-8 w-8 rounded-full border border-white/15"
-                          style={{ backgroundColor: selectedTextColor }}
-                        />
-                      </div>
-                      <div className="grid grid-cols-2 gap-2">
-                        {textColorConfig.colors.map((color, index) => {
-                          const isActive =
-                            getResolvedTextLayerColor(selectedTextLayer, color) ===
-                            getResolvedTextLayerColor(selectedTextLayer, selectedTextColor);
-                          return (
-                            <button
-                              key={`text-color-option-${index + 1}`}
-                              type="button"
-                              onClick={() =>
-                                setTextColorAssignments((current) => ({
-                                  ...current,
-                                  [selectedTextLayer.id]: color,
-                                }))
-                              }
-                              className={`flex items-center gap-3 rounded-xl border px-3 py-3 text-left transition ${
-                                isActive
-                                  ? "border-emerald-400/55 bg-emerald-500/[0.12] text-white"
-                                  : "border-white/10 bg-white/[0.02] text-white/80 hover:bg-white/[0.06]"
-                              }`}
-                            >
-                              <span
-                                className="h-6 w-6 rounded-full border border-white/20"
-                                style={{ backgroundColor: color }}
-                              />
-                              <span className="flex min-w-0 flex-col">
-                                <span className="text-xs font-medium">{`颜色 ${index + 1}`}</span>
-                                <span className="font-mono text-[11px] uppercase text-white/55">
-                                  {color}
-                                </span>
-                              </span>
+                              <div className={getTextLayerHintBadgeClassName()}>
+                                点击编辑文字
+                              </div>
                             </button>
                           );
                         })}
                       </div>
                     </div>
-                  ) : null}
-                </div>
+                  </div>
+                ) : (
+                  <div className="flex h-full w-full flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-5">
+                    <div className="mb-4 flex items-center justify-between gap-3">
+                      <div>
+                        <div className="font-semibold text-sm text-white">
+                          SKU图模式模板
+                        </div>
+                        <div className="mt-1 text-white/45 text-xs">
+                          {normalizedTemplateMode === "sku"
+                            ? "当前结果属于 SKU 图模式，可直接从这里选择并进入编辑。"
+                            : "这里集中展示当前品牌下的 SKU 图模式模板。"}
+                        </div>
+                      </div>
+                      <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-white/65 text-xs">
+                        {skuModeTemplates.length} 个模板
+                      </div>
+                    </div>
+
+                    {isLoading ? (
+                      <div className="grid gap-3 md:grid-cols-2">
+                        {Array.from({ length: 4 }).map((_, index) => (
+                          <div
+                            className="rounded-2xl border border-white/15 border-dashed bg-white/[0.02] px-4 py-5 text-muted-foreground text-sm"
+                            key={`sku-template-loading-${index}`}
+                          >
+                            正在加载 SKU 图模式模板...
+                          </div>
+                        ))}
+                      </div>
+                    ) : skuModeTemplates.length > 0 ? (
+                      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                        {skuModeTemplates.map((template) => (
+                          <button
+                            className={`rounded-2xl border p-3 text-left transition ${
+                              selectedTemplateId === template.id
+                                ? "border-emerald-400/45 bg-emerald-500/10"
+                                : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]"
+                            }`}
+                            key={template.id}
+                            onClick={() => setSelectedTemplateId(template.id)}
+                            type="button"
+                          >
+                            {renderTemplatePickerCardContent(template, {
+                              showSecondaryCategory:
+                                shouldGroupTemplatesBySecondaryCategory,
+                              emphasize: true,
+                            })}
+                          </button>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center px-6 text-center text-muted-foreground text-sm">
+                        {normalizedBrandName
+                          ? `当前品牌“${normalizedBrandName}”下暂无 SKU 图模式模板`
+                          : "请先返回工作流区域选择品牌，再打开 PSD 模板。"}
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
-            ) : (
-              <div className="flex-1" />
-            )}
+            </div>
+
+            <div className="flex min-h-0 flex-col bg-[#09090b] p-4 xl:p-5">
+              {renderedResultUrl ? (
+                <div className="mb-3 flex items-center justify-end gap-3">
+                  <div className="inline-flex rounded-full border border-white/10 bg-white/[0.03] p-1">
+                    <button
+                      className={`rounded-full px-3 py-1.5 font-medium text-xs transition ${
+                        rightPanelView === "editor"
+                          ? "bg-emerald-500/[0.16] text-emerald-100"
+                          : "text-white/60 hover:text-white"
+                      }`}
+                      onClick={() => setRightPanelView("editor")}
+                      type="button"
+                    >
+                      编辑面板
+                    </button>
+                    <button
+                      className={`rounded-full px-3 py-1.5 font-medium text-xs transition ${
+                        rightPanelView === "export"
+                          ? "bg-emerald-500/[0.16] text-emerald-100"
+                          : "text-white/60 hover:text-white"
+                      }`}
+                      onClick={() => setRightPanelView("export")}
+                      type="button"
+                    >
+                      导出结果
+                    </button>
+                  </div>
+                </div>
+              ) : null}
+
+              <Input
+                accept="image/png,image/jpeg,image/webp"
+                className="hidden"
+                onChange={(event) => {
+                  if (!selectedImageLayer) return;
+                  void handleSlotUpload(selectedImageLayer.id, event);
+                }}
+                ref={uploadInputRef}
+                type="file"
+              />
+
+              {renderedResultUrl && rightPanelView === "export" ? (
+                <AgentPsdTemplateExportPreview
+                  downloadName={`${selectedTemplate?.name || "PSD模板"}-${selectedTemplateMode === "sku" ? "SKU图" : "主图"}.png`}
+                  enableDimensionAnnotations={selectedTemplateMode === "sku"}
+                  imageAlt="PSD 模板导出结果"
+                  imageUrl={renderedResultUrl}
+                  key={`${selectedTemplate?.id || "template"}-${renderedResultUrl}`}
+                />
+              ) : selectedTextLayer ? (
+                <div className="flex min-h-0 flex-1 flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-3.5 xl:p-4">
+                  <div className="flex h-full flex-col gap-3">
+                    <Textarea
+                      className="min-h-[180px] flex-1 resize-none xl:min-h-[200px]"
+                      onChange={(event) =>
+                        setTextAssignments((current) => ({
+                          ...current,
+                          [selectedTextLayer.id]: event.target.value,
+                        }))
+                      }
+                      placeholder={
+                        selectedTextLayer.placeholder || "请输入文字"
+                      }
+                      rows={4}
+                      value={
+                        effectiveTextAssignments[selectedTextLayer.id] || ""
+                      }
+                    />
+                    <div className="flex flex-wrap gap-2 text-muted-foreground text-xs">
+                      <span>
+                        字体：
+                        {selectedTextLayer.fontLabel ||
+                          selectedTextLayer.fontFamily ||
+                          "系统字体"}
+                      </span>
+                      <span>字号：{selectedTextLayer.fontSize}px</span>
+                      <span>行高：{selectedTextLayer.lineHeight}</span>
+                      <span>字距：{selectedTextLayer.letterSpacing}px</span>
+                    </div>
+                    {textColorConfig.enabled ? (
+                      <div className="space-y-3 rounded-xl border border-white/10 bg-white/[0.03] p-3">
+                        <div className="flex items-center justify-between gap-3">
+                          <div>
+                            <div className="font-medium text-sm">文字颜色</div>
+                            <div className="text-muted-foreground text-xs">
+                              当前模板允许在两种系统预设颜色之间切换。
+                            </div>
+                          </div>
+                          <div
+                            className="h-8 w-8 rounded-full border border-white/15"
+                            style={{ backgroundColor: selectedTextColor }}
+                          />
+                        </div>
+                        <div className="grid grid-cols-2 gap-2">
+                          {textColorConfig.colors.map((color, index) => {
+                            const isActive =
+                              getResolvedTextLayerColor(
+                                selectedTextLayer,
+                                color
+                              ) ===
+                              getResolvedTextLayerColor(
+                                selectedTextLayer,
+                                selectedTextColor
+                              );
+                            return (
+                              <button
+                                className={`flex items-center gap-3 rounded-xl border px-3 py-3 text-left transition ${
+                                  isActive
+                                    ? "border-emerald-400/55 bg-emerald-500/[0.12] text-white"
+                                    : "border-white/10 bg-white/[0.02] text-white/80 hover:bg-white/[0.06]"
+                                }`}
+                                key={`text-color-option-${index + 1}`}
+                                onClick={() =>
+                                  setTextColorAssignments((current) => ({
+                                    ...current,
+                                    [selectedTextLayer.id]: color,
+                                  }))
+                                }
+                                type="button"
+                              >
+                                <span
+                                  className="h-6 w-6 rounded-full border border-white/20"
+                                  style={{ backgroundColor: color }}
+                                />
+                                <span className="flex min-w-0 flex-col">
+                                  <span className="font-medium text-xs">{`颜色 ${index + 1}`}</span>
+                                  <span className="font-mono text-[11px] text-white/55 uppercase">
+                                    {color}
+                                  </span>
+                                </span>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              ) : (
+                <div className="flex-1" />
+              )}
+            </div>
           </div>
-        </div>
-      </DialogContent>
-    </Dialog>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/components/agents/agent-psd-template-export-preview.tsx b/components/agents/agent-psd-template-export-preview.tsx
new file mode 100644
index 000000000..6151556bf
--- /dev/null
+++ b/components/agents/agent-psd-template-export-preview.tsx
@@ -0,0 +1,1216 @@
+"use client";
+
+import { Download, Loader2, Ruler, Trash2 } from "lucide-react";
+import Image from "next/image";
+import {
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { buildImageProxyUrl } from "@/lib/image-delivery";
+import { cn } from "@/lib/utils";
+
+type AgentPsdTemplateExportPreviewProps = {
+  imageUrl: string;
+  imageAlt?: string;
+  enableDimensionAnnotations?: boolean;
+  downloadName?: string;
+};
+
+type ImageSize = {
+  width: number;
+  height: number;
+};
+
+type PreviewRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+type DimensionAnnotation = {
+  id: string;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  label: string;
+};
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+type CoordinateSpace = {
+  containerLeft: number;
+  containerTop: number;
+  previewRect: PreviewRect;
+  imageSize: ImageSize;
+};
+
+type DragState =
+  | {
+      kind: "drawing";
+      pointerId: number;
+      annotationId: string;
+      coordinateSpace: CoordinateSpace;
+    }
+  | {
+      kind: "move-start" | "move-end";
+      pointerId: number;
+      annotationId: string;
+      coordinateSpace: CoordinateSpace;
+    }
+  | {
+      kind: "move-line";
+      pointerId: number;
+      annotationId: string;
+      coordinateSpace: CoordinateSpace;
+      startClientX: number;
+      startClientY: number;
+      startAnnotation: DimensionAnnotation;
+    };
+
+const PREVIEW_MIN_HEIGHT = 340;
+const LABEL_PLACEHOLDER = "例如：120cm / 50cm";
+const IMAGE_EXTENSION_REGEX = /\.(png|jpg|jpeg|webp)$/i;
+const DIMENSION_SUFFIX_REGEX = /-尺寸标注(?=\.)/;
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function createAnnotationId() {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    return crypto.randomUUID();
+  }
+
+  return `psd-dimension-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function getContainPreviewRect(
+  container: ImageSize,
+  image: ImageSize
+): PreviewRect {
+  const safeContainerWidth = Math.max(1, container.width);
+  const safeContainerHeight = Math.max(1, container.height);
+  const safeImageWidth = Math.max(1, image.width);
+  const safeImageHeight = Math.max(1, image.height);
+  const scale = Math.min(
+    safeContainerWidth / safeImageWidth,
+    safeContainerHeight / safeImageHeight
+  );
+  const width = safeImageWidth * scale;
+  const height = safeImageHeight * scale;
+
+  return {
+    left: (safeContainerWidth - width) / 2,
+    top: (safeContainerHeight - height) / 2,
+    width,
+    height,
+  };
+}
+
+function getDimensionLength(annotation: DimensionAnnotation) {
+  return Math.hypot(
+    annotation.x2 - annotation.x1,
+    annotation.y2 - annotation.y1
+  );
+}
+
+function getDimensionLabel(annotation: DimensionAnnotation) {
+  const customLabel = String(annotation.label || "").trim();
+  if (customLabel) {
+    return customLabel;
+  }
+
+  return `${Math.max(1, Math.round(getDimensionLength(annotation)))} px`;
+}
+
+function mapImagePointToPreviewPoint(
+  point: Point,
+  previewRect: PreviewRect,
+  imageSize: ImageSize
+) {
+  return {
+    x:
+      previewRect.left +
+      (point.x / Math.max(1, imageSize.width)) * previewRect.width,
+    y:
+      previewRect.top +
+      (point.y / Math.max(1, imageSize.height)) * previewRect.height,
+  };
+}
+
+function mapClientPointToImagePoint(
+  clientX: number,
+  clientY: number,
+  coordinateSpace: CoordinateSpace,
+  options?: { requireInside?: boolean }
+) {
+  const localX = clientX - coordinateSpace.containerLeft;
+  const localY = clientY - coordinateSpace.containerTop;
+  const { left, top, width, height } = coordinateSpace.previewRect;
+  const isInside =
+    localX >= left &&
+    localX <= left + width &&
+    localY >= top &&
+    localY <= top + height;
+
+  if (options?.requireInside && !isInside) {
+    return null;
+  }
+
+  return {
+    x: clamp(
+      ((localX - left) / Math.max(1, width)) * coordinateSpace.imageSize.width,
+      0,
+      coordinateSpace.imageSize.width
+    ),
+    y: clamp(
+      ((localY - top) / Math.max(1, height)) * coordinateSpace.imageSize.height,
+      0,
+      coordinateSpace.imageSize.height
+    ),
+  };
+}
+
+function getAnnotationVector(x1: number, y1: number, x2: number, y2: number) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const length = Math.max(1, Math.hypot(dx, dy));
+
+  return {
+    dx,
+    dy,
+    length,
+    ux: dx / length,
+    uy: dy / length,
+    nx: -dy / length,
+    ny: dx / length,
+  };
+}
+
+function getPreviewAnnotationGeometry(
+  annotation: DimensionAnnotation,
+  previewRect: PreviewRect,
+  imageSize: ImageSize
+) {
+  const start = mapImagePointToPreviewPoint(
+    { x: annotation.x1, y: annotation.y1 },
+    previewRect,
+    imageSize
+  );
+  const end = mapImagePointToPreviewPoint(
+    { x: annotation.x2, y: annotation.y2 },
+    previewRect,
+    imageSize
+  );
+  const vector = getAnnotationVector(start.x, start.y, end.x, end.y);
+  const label = getDimensionLabel(annotation);
+  const labelWidth = clamp(label.length * 11 + 26, 76, 240);
+  const labelHeight = 30;
+  const labelOffset = 22;
+
+  return {
+    start,
+    end,
+    vector,
+    label,
+    labelWidth,
+    labelHeight,
+    labelCenterX: (start.x + end.x) / 2 + vector.nx * labelOffset,
+    labelCenterY: (start.y + end.y) / 2 + vector.ny * labelOffset,
+  };
+}
+
+function buildDownloadName(downloadName: string | undefined, imageUrl: string) {
+  const explicitName = String(downloadName || "").trim();
+  if (explicitName) {
+    return explicitName;
+  }
+
+  try {
+    const pathname = new URL(imageUrl).pathname;
+    const rawName = pathname.split("/").pop() || "";
+    const decoded = decodeURIComponent(rawName).trim();
+    if (!decoded) {
+      return `psd-template-${Date.now()}.png`;
+    }
+
+    if (IMAGE_EXTENSION_REGEX.test(decoded)) {
+      return decoded.replace(IMAGE_EXTENSION_REGEX, "-尺寸标注.png");
+    }
+
+    return `${decoded}-尺寸标注.png`;
+  } catch {
+    return `psd-template-${Date.now()}.png`;
+  }
+}
+
+async function loadImageFromCandidates(candidates: string[]) {
+  const uniqueCandidates = Array.from(
+    new Set(candidates.map((item) => String(item || "").trim()).filter(Boolean))
+  );
+
+  for (const candidate of uniqueCandidates) {
+    try {
+      const response = await fetch(candidate);
+      if (!response.ok) {
+        continue;
+      }
+
+      const blob = await response.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+        const nextImage = new window.Image();
+        nextImage.onload = () => resolve(nextImage);
+        nextImage.onerror = () => reject(new Error("图片加载失败"));
+        nextImage.src = objectUrl;
+      });
+
+      return {
+        image,
+        dispose: () => URL.revokeObjectURL(objectUrl),
+      };
+    } catch {
+      // continue to next candidate
+    }
+  }
+
+  throw new Error("结果图加载失败");
+}
+
+function downloadBlob(blob: Blob, fileName: string) {
+  const objectUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = objectUrl;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(objectUrl);
+}
+
+function drawArrowHead(params: {
+  context: CanvasRenderingContext2D;
+  point: Point;
+  direction: Point;
+  size: number;
+  color: string;
+}) {
+  const { context, point, direction, size, color } = params;
+  const directionLength = Math.max(1, Math.hypot(direction.x, direction.y));
+  const ux = direction.x / directionLength;
+  const uy = direction.y / directionLength;
+  const angle = Math.PI / 7;
+  const leftAngleX = ux * Math.cos(angle) - uy * Math.sin(angle);
+  const leftAngleY = ux * Math.sin(angle) + uy * Math.cos(angle);
+  const rightAngleX = ux * Math.cos(-angle) - uy * Math.sin(-angle);
+  const rightAngleY = ux * Math.sin(-angle) + uy * Math.cos(-angle);
+
+  context.beginPath();
+  context.moveTo(point.x, point.y);
+  context.lineTo(point.x - leftAngleX * size, point.y - leftAngleY * size);
+  context.moveTo(point.x, point.y);
+  context.lineTo(point.x - rightAngleX * size, point.y - rightAngleY * size);
+  context.strokeStyle = color;
+  context.lineCap = "round";
+  context.stroke();
+}
+
+function fillRoundedRect(params: {
+  context: CanvasRenderingContext2D;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+}) {
+  const { context, x, y, width, height, radius } = params;
+  const clampedRadius = Math.min(radius, width / 2, height / 2);
+  context.beginPath();
+  context.moveTo(x + clampedRadius, y);
+  context.lineTo(x + width - clampedRadius, y);
+  context.quadraticCurveTo(x + width, y, x + width, y + clampedRadius);
+  context.lineTo(x + width, y + height - clampedRadius);
+  context.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - clampedRadius,
+    y + height
+  );
+  context.lineTo(x + clampedRadius, y + height);
+  context.quadraticCurveTo(x, y + height, x, y + height - clampedRadius);
+  context.lineTo(x, y + clampedRadius);
+  context.quadraticCurveTo(x, y, x + clampedRadius, y);
+  context.closePath();
+  context.fill();
+}
+
+function drawAnnotationToCanvas(
+  context: CanvasRenderingContext2D,
+  annotation: DimensionAnnotation,
+  imageSize: ImageSize
+) {
+  const label = getDimensionLabel(annotation);
+  const vector = getAnnotationVector(
+    annotation.x1,
+    annotation.y1,
+    annotation.x2,
+    annotation.y2
+  );
+  const strokeWidth = clamp(
+    Math.round(Math.min(imageSize.width, imageSize.height) * 0.004),
+    2,
+    8
+  );
+  const tickLength = strokeWidth * 2.5;
+  const arrowSize = strokeWidth * 3.5;
+  const fontSize = clamp(
+    Math.round(Math.min(imageSize.width, imageSize.height) * 0.028),
+    16,
+    42
+  );
+  const labelPaddingX = fontSize * 0.7;
+  const labelPaddingY = fontSize * 0.45;
+  const labelOffset = fontSize * 1.4;
+  const centerX = (annotation.x1 + annotation.x2) / 2 + vector.nx * labelOffset;
+  const centerY = (annotation.y1 + annotation.y2) / 2 + vector.ny * labelOffset;
+
+  context.save();
+  context.strokeStyle = "#fb923c";
+  context.lineWidth = strokeWidth;
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  context.shadowColor = "rgba(249, 115, 22, 0.22)";
+  context.shadowBlur = strokeWidth * 2;
+
+  context.beginPath();
+  context.moveTo(annotation.x1, annotation.y1);
+  context.lineTo(annotation.x2, annotation.y2);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(
+    annotation.x1 + vector.nx * tickLength,
+    annotation.y1 + vector.ny * tickLength
+  );
+  context.lineTo(
+    annotation.x1 - vector.nx * tickLength,
+    annotation.y1 - vector.ny * tickLength
+  );
+  context.moveTo(
+    annotation.x2 + vector.nx * tickLength,
+    annotation.y2 + vector.ny * tickLength
+  );
+  context.lineTo(
+    annotation.x2 - vector.nx * tickLength,
+    annotation.y2 - vector.ny * tickLength
+  );
+  context.stroke();
+
+  drawArrowHead({
+    context,
+    point: { x: annotation.x1, y: annotation.y1 },
+    direction: {
+      x: annotation.x1 - annotation.x2,
+      y: annotation.y1 - annotation.y2,
+    },
+    size: arrowSize,
+    color: "#fb923c",
+  });
+  drawArrowHead({
+    context,
+    point: { x: annotation.x2, y: annotation.y2 },
+    direction: {
+      x: annotation.x2 - annotation.x1,
+      y: annotation.y2 - annotation.y1,
+    },
+    size: arrowSize,
+    color: "#fb923c",
+  });
+
+  context.shadowBlur = 0;
+  context.font = `600 ${fontSize}px "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif`;
+  const textMetrics = context.measureText(label);
+  const labelWidth = textMetrics.width + labelPaddingX * 2;
+  const labelHeight = fontSize + labelPaddingY * 2;
+  const labelX = centerX - labelWidth / 2;
+  const labelY = centerY - labelHeight / 2;
+
+  context.fillStyle = "rgba(9, 9, 11, 0.88)";
+  fillRoundedRect({
+    context,
+    x: labelX,
+    y: labelY,
+    width: labelWidth,
+    height: labelHeight,
+    radius: fontSize * 0.55,
+  });
+
+  context.fillStyle = "#ffffff";
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText(label, centerX, centerY + 1);
+  context.restore();
+}
+
+export function AgentPsdTemplateExportPreview({
+  imageUrl,
+  imageAlt = "PSD 模板导出结果",
+  enableDimensionAnnotations = false,
+  downloadName,
+}: AgentPsdTemplateExportPreviewProps) {
+  const previewViewportRef = useRef<HTMLDivElement | null>(null);
+  const dragStateRef = useRef<DragState | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+  const [viewportSize, setViewportSize] = useState<ImageSize>({
+    width: 0,
+    height: 0,
+  });
+  const [imageSize, setImageSize] = useState<ImageSize | null>(null);
+  const [annotations, setAnnotations] = useState<DimensionAnnotation[]>([]);
+  const [selectedAnnotationId, setSelectedAnnotationId] = useState<string>("");
+  const [isDrawMode, setIsDrawMode] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const previewImageUrl = useMemo(
+    () => buildImageProxyUrl(imageUrl),
+    [imageUrl]
+  );
+  const selectedAnnotation = useMemo(
+    () =>
+      annotations.find(
+        (annotation) => annotation.id === selectedAnnotationId
+      ) || null,
+    [annotations, selectedAnnotationId]
+  );
+  const previewRect = useMemo(() => {
+    if (!imageSize || viewportSize.width <= 0 || viewportSize.height <= 0) {
+      return null;
+    }
+
+    return getContainPreviewRect(viewportSize, imageSize);
+  }, [imageSize, viewportSize]);
+
+  const clearPointerSession = useCallback(() => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    dragStateRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    const element = previewViewportRef.current;
+    if (!element) {
+      return;
+    }
+
+    const updateViewportSize = () => {
+      setViewportSize({
+        width: element.clientWidth,
+        height: element.clientHeight,
+      });
+    };
+
+    updateViewportSize();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(updateViewportSize);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }
+
+    window.addEventListener("resize", updateViewportSize);
+    return () => window.removeEventListener("resize", updateViewportSize);
+  }, []);
+
+  useEffect(() => clearPointerSession, [clearPointerSession]);
+
+  const getCoordinateSpace = useCallback(() => {
+    const element = previewViewportRef.current;
+    if (!element || !previewRect || !imageSize) {
+      return null;
+    }
+
+    const bounds = element.getBoundingClientRect();
+    return {
+      containerLeft: bounds.left,
+      containerTop: bounds.top,
+      previewRect,
+      imageSize,
+    } satisfies CoordinateSpace;
+  }, [imageSize, previewRect]);
+
+  const attachPointerSession = useCallback(
+    (
+      state: DragState,
+      event: ReactPointerEvent<SVGElement>,
+      onMove: (dragState: DragState, moveEvent: PointerEvent) => void,
+      onEnd?: (dragState: DragState) => void
+    ) => {
+      clearPointerSession();
+      dragStateRef.current = state;
+
+      try {
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+      } catch {
+        // ignore capture failures in unsupported environments
+      }
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        const activeState = dragStateRef.current;
+        if (!activeState || activeState.pointerId !== moveEvent.pointerId) {
+          return;
+        }
+
+        onMove(activeState, moveEvent);
+      };
+
+      const handlePointerUp = (upEvent: PointerEvent) => {
+        const activeState = dragStateRef.current;
+        if (!activeState || activeState.pointerId !== upEvent.pointerId) {
+          return;
+        }
+
+        onEnd?.(activeState);
+        clearPointerSession();
+      };
+
+      cleanupRef.current = () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+        window.removeEventListener("pointercancel", handlePointerUp);
+      };
+
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerUp);
+    },
+    [clearPointerSession]
+  );
+
+  const handleOverlayPointerDown = useCallback(
+    (event: ReactPointerEvent<SVGSVGElement>) => {
+      if (!enableDimensionAnnotations) {
+        return;
+      }
+
+      if (!isDrawMode) {
+        setSelectedAnnotationId("");
+        return;
+      }
+
+      const coordinateSpace = getCoordinateSpace();
+      if (!coordinateSpace) {
+        return;
+      }
+
+      const startPoint = mapClientPointToImagePoint(
+        event.clientX,
+        event.clientY,
+        coordinateSpace,
+        { requireInside: true }
+      );
+      if (!startPoint) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      const annotationId = createAnnotationId();
+      setAnnotations((current) => [
+        ...current,
+        {
+          id: annotationId,
+          x1: startPoint.x,
+          y1: startPoint.y,
+          x2: startPoint.x,
+          y2: startPoint.y,
+          label: "",
+        },
+      ]);
+      setSelectedAnnotationId(annotationId);
+
+      attachPointerSession(
+        {
+          kind: "drawing",
+          pointerId: event.pointerId,
+          annotationId,
+          coordinateSpace,
+        },
+        event,
+        (dragState, moveEvent) => {
+          const nextPoint = mapClientPointToImagePoint(
+            moveEvent.clientX,
+            moveEvent.clientY,
+            dragState.coordinateSpace
+          );
+          if (!nextPoint) {
+            return;
+          }
+
+          setAnnotations((current) =>
+            current.map((annotation) =>
+              annotation.id === dragState.annotationId
+                ? {
+                    ...annotation,
+                    x2: nextPoint.x,
+                    y2: nextPoint.y,
+                  }
+                : annotation
+            )
+          );
+        },
+        (dragState) => {
+          setAnnotations((current) =>
+            current.filter((annotation) => {
+              if (annotation.id !== dragState.annotationId) {
+                return true;
+              }
+
+              return getDimensionLength(annotation) >= 12;
+            })
+          );
+          setIsDrawMode(false);
+        }
+      );
+    },
+    [
+      attachPointerSession,
+      enableDimensionAnnotations,
+      getCoordinateSpace,
+      isDrawMode,
+    ]
+  );
+
+  const handleAnnotationHandlePointerDown = useCallback(
+    (
+      annotationId: string,
+      handle: "move-start" | "move-end",
+      event: ReactPointerEvent<SVGCircleElement>
+    ) => {
+      const coordinateSpace = getCoordinateSpace();
+      if (!coordinateSpace) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      setSelectedAnnotationId(annotationId);
+
+      attachPointerSession(
+        {
+          kind: handle,
+          pointerId: event.pointerId,
+          annotationId,
+          coordinateSpace,
+        },
+        event,
+        (dragState, moveEvent) => {
+          const nextPoint = mapClientPointToImagePoint(
+            moveEvent.clientX,
+            moveEvent.clientY,
+            dragState.coordinateSpace
+          );
+          if (!nextPoint) {
+            return;
+          }
+
+          setAnnotations((current) =>
+            current.map((annotation) => {
+              if (annotation.id !== dragState.annotationId) {
+                return annotation;
+              }
+
+              return dragState.kind === "move-start"
+                ? { ...annotation, x1: nextPoint.x, y1: nextPoint.y }
+                : { ...annotation, x2: nextPoint.x, y2: nextPoint.y };
+            })
+          );
+        }
+      );
+    },
+    [attachPointerSession, getCoordinateSpace]
+  );
+
+  const handleAnnotationBodyPointerDown = useCallback(
+    (
+      annotation: DimensionAnnotation,
+      event: ReactPointerEvent<SVGLineElement | SVGGElement>
+    ) => {
+      const coordinateSpace = getCoordinateSpace();
+      if (!coordinateSpace) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      setSelectedAnnotationId(annotation.id);
+
+      attachPointerSession(
+        {
+          kind: "move-line",
+          pointerId: event.pointerId,
+          annotationId: annotation.id,
+          coordinateSpace,
+          startClientX: event.clientX,
+          startClientY: event.clientY,
+          startAnnotation: annotation,
+        },
+        event,
+        (dragState, moveEvent) => {
+          if (dragState.kind !== "move-line") {
+            return;
+          }
+
+          const deltaImageX =
+            ((moveEvent.clientX - dragState.startClientX) /
+              Math.max(1, dragState.coordinateSpace.previewRect.width)) *
+            dragState.coordinateSpace.imageSize.width;
+          const deltaImageY =
+            ((moveEvent.clientY - dragState.startClientY) /
+              Math.max(1, dragState.coordinateSpace.previewRect.height)) *
+            dragState.coordinateSpace.imageSize.height;
+          const minDeltaX = -Math.min(
+            dragState.startAnnotation.x1,
+            dragState.startAnnotation.x2
+          );
+          const maxDeltaX =
+            dragState.coordinateSpace.imageSize.width -
+            Math.max(
+              dragState.startAnnotation.x1,
+              dragState.startAnnotation.x2
+            );
+          const minDeltaY = -Math.min(
+            dragState.startAnnotation.y1,
+            dragState.startAnnotation.y2
+          );
+          const maxDeltaY =
+            dragState.coordinateSpace.imageSize.height -
+            Math.max(
+              dragState.startAnnotation.y1,
+              dragState.startAnnotation.y2
+            );
+          const safeDeltaX = clamp(deltaImageX, minDeltaX, maxDeltaX);
+          const safeDeltaY = clamp(deltaImageY, minDeltaY, maxDeltaY);
+
+          setAnnotations((current) =>
+            current.map((item) =>
+              item.id === dragState.annotationId
+                ? {
+                    ...item,
+                    x1: dragState.startAnnotation.x1 + safeDeltaX,
+                    y1: dragState.startAnnotation.y1 + safeDeltaY,
+                    x2: dragState.startAnnotation.x2 + safeDeltaX,
+                    y2: dragState.startAnnotation.y2 + safeDeltaY,
+                  }
+                : item
+            )
+          );
+        }
+      );
+    },
+    [attachPointerSession, getCoordinateSpace]
+  );
+
+  const handleDeleteSelected = useCallback(() => {
+    if (!selectedAnnotation) {
+      return;
+    }
+
+    setAnnotations((current) =>
+      current.filter((annotation) => annotation.id !== selectedAnnotation.id)
+    );
+    setSelectedAnnotationId("");
+  }, [selectedAnnotation]);
+
+  const handleDownload = useCallback(async () => {
+    const fileName = buildDownloadName(downloadName, imageUrl);
+    const shouldCompose = enableDimensionAnnotations && annotations.length > 0;
+
+    try {
+      setIsDownloading(true);
+      if (!shouldCompose) {
+        const response = await fetch(buildImageProxyUrl(imageUrl));
+        if (!response.ok) {
+          throw new Error(`下载失败（${response.status}）`);
+        }
+
+        const blob = await response.blob();
+        downloadBlob(blob, fileName.replace(DIMENSION_SUFFIX_REGEX, ""));
+        return;
+      }
+
+      const { image, dispose } = await loadImageFromCandidates([
+        buildImageProxyUrl(imageUrl),
+        imageUrl,
+      ]);
+
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, image.naturalWidth || image.width);
+        canvas.height = Math.max(1, image.naturalHeight || image.height);
+        const context = canvas.getContext("2d");
+        if (!context) {
+          throw new Error("无法创建导出画布");
+        }
+
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        for (const annotation of annotations) {
+          drawAnnotationToCanvas(context, annotation, {
+            width: canvas.width,
+            height: canvas.height,
+          });
+        }
+
+        const blob = await new Promise<Blob>((resolve, reject) => {
+          canvas.toBlob(
+            (nextBlob) => {
+              if (nextBlob) {
+                resolve(nextBlob);
+                return;
+              }
+
+              reject(new Error("导出结果生成失败"));
+            },
+            "image/png",
+            1
+          );
+        });
+
+        downloadBlob(blob, fileName);
+      } finally {
+        dispose();
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "下载结果图失败");
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [annotations, downloadName, enableDimensionAnnotations, imageUrl]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 rounded-2xl border border-white/10 bg-white/[0.02] p-3.5 xl:p-4">
+      {enableDimensionAnnotations ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            className={cn(
+              "h-9 px-3",
+              isDrawMode
+                ? "bg-orange-500 text-white hover:bg-orange-400"
+                : "border-white/10 bg-white/[0.03] text-white hover:bg-white/[0.08]"
+            )}
+            onClick={() => {
+              setIsDrawMode((current) => !current);
+              setSelectedAnnotationId("");
+            }}
+            type="button"
+            variant={isDrawMode ? "default" : "outline"}
+          >
+            <Ruler className="mr-1.5 h-4 w-4" />
+            {isDrawMode ? "取消拉线" : "新增尺寸线"}
+          </Button>
+          <Button
+            className="h-9 border-white/10 bg-white/[0.03] text-white hover:bg-white/[0.08]"
+            disabled={!selectedAnnotation}
+            onClick={handleDeleteSelected}
+            type="button"
+            variant="outline"
+          >
+            <Trash2 className="mr-1.5 h-4 w-4" />
+            删除当前
+          </Button>
+          <Button
+            className="h-9 px-3 text-white/72 hover:text-white"
+            disabled={annotations.length === 0}
+            onClick={() => {
+              setAnnotations([]);
+              setSelectedAnnotationId("");
+            }}
+            type="button"
+            variant="ghost"
+          >
+            清空标注
+          </Button>
+          <div className="text-white/45 text-xs">
+            {isDrawMode
+              ? "在预览图上按住拖动即可拉出一条尺寸线"
+              : "支持拖动整条线、拖动两端端点，并可手动改尺寸文字"}
+          </div>
+        </div>
+      ) : null}
+
+      <div
+        className={cn(
+          "relative flex-1 overflow-hidden rounded-2xl border border-white/10 bg-[#111114]",
+          enableDimensionAnnotations && isDrawMode
+            ? "cursor-crosshair"
+            : "cursor-default"
+        )}
+        ref={previewViewportRef}
+        style={{ minHeight: PREVIEW_MIN_HEIGHT }}
+      >
+        {previewRect && imageSize ? (
+          <>
+            <div
+              className="absolute select-none overflow-hidden"
+              style={{
+                left: previewRect.left,
+                top: previewRect.top,
+                width: previewRect.width,
+                height: previewRect.height,
+              }}
+            >
+              <Image
+                alt={imageAlt}
+                draggable={false}
+                fill
+                sizes={`${Math.max(320, Math.round(previewRect.width))}px`}
+                src={previewImageUrl}
+                style={{ objectFit: "fill" }}
+                unoptimized
+              />
+            </div>
+
+            <svg
+              className="absolute inset-0 h-full w-full"
+              onPointerDown={handleOverlayPointerDown}
+            >
+              <defs>
+                <marker
+                  id="psd-dimension-arrow"
+                  markerHeight="8"
+                  markerWidth="8"
+                  orient="auto-start-reverse"
+                  refX="4"
+                  refY="4"
+                >
+                  <path d="M0,0 L8,4 L0,8 z" fill="#fb923c" />
+                </marker>
+              </defs>
+
+              {annotations.map((annotation) => {
+                const isSelected = annotation.id === selectedAnnotationId;
+                const geometry = getPreviewAnnotationGeometry(
+                  annotation,
+                  previewRect,
+                  imageSize
+                );
+                const tickLength = isSelected ? 10 : 8;
+
+                return (
+                  <g key={annotation.id}>
+                    <line
+                      onPointerDown={(event) =>
+                        handleAnnotationBodyPointerDown(annotation, event)
+                      }
+                      stroke="transparent"
+                      strokeWidth={24}
+                      x1={geometry.start.x}
+                      x2={geometry.end.x}
+                      y1={geometry.start.y}
+                      y2={geometry.end.y}
+                    />
+                    <line
+                      markerEnd="url(#psd-dimension-arrow)"
+                      markerStart="url(#psd-dimension-arrow)"
+                      opacity={isSelected ? 1 : 0.92}
+                      pointerEvents="none"
+                      stroke="#fb923c"
+                      strokeLinecap="round"
+                      strokeWidth={isSelected ? 3 : 2.5}
+                      x1={geometry.start.x}
+                      x2={geometry.end.x}
+                      y1={geometry.start.y}
+                      y2={geometry.end.y}
+                    />
+                    <line
+                      pointerEvents="none"
+                      stroke="#fdba74"
+                      strokeLinecap="round"
+                      strokeWidth={isSelected ? 2.5 : 2}
+                      x1={geometry.start.x + geometry.vector.nx * tickLength}
+                      x2={geometry.start.x - geometry.vector.nx * tickLength}
+                      y1={geometry.start.y + geometry.vector.ny * tickLength}
+                      y2={geometry.start.y - geometry.vector.ny * tickLength}
+                    />
+                    <line
+                      pointerEvents="none"
+                      stroke="#fdba74"
+                      strokeLinecap="round"
+                      strokeWidth={isSelected ? 2.5 : 2}
+                      x1={geometry.end.x + geometry.vector.nx * tickLength}
+                      x2={geometry.end.x - geometry.vector.nx * tickLength}
+                      y1={geometry.end.y + geometry.vector.ny * tickLength}
+                      y2={geometry.end.y - geometry.vector.ny * tickLength}
+                    />
+                    <g
+                      onPointerDown={(event) =>
+                        handleAnnotationBodyPointerDown(annotation, event)
+                      }
+                    >
+                      <rect
+                        fill="rgba(9,9,11,0.88)"
+                        height={geometry.labelHeight}
+                        rx={15}
+                        stroke={
+                          isSelected
+                            ? "rgba(251,146,60,0.7)"
+                            : "rgba(255,255,255,0.14)"
+                        }
+                        strokeWidth={isSelected ? 1.5 : 1}
+                        width={geometry.labelWidth}
+                        x={geometry.labelCenterX - geometry.labelWidth / 2}
+                        y={geometry.labelCenterY - geometry.labelHeight / 2}
+                      />
+                      <text
+                        dominantBaseline="middle"
+                        fill="#ffffff"
+                        fontSize={13}
+                        fontWeight={600}
+                        pointerEvents="none"
+                        textAnchor="middle"
+                        x={geometry.labelCenterX}
+                        y={geometry.labelCenterY + 0.5}
+                      >
+                        {geometry.label}
+                      </text>
+                    </g>
+                    {isSelected ? (
+                      <>
+                        <circle
+                          cx={geometry.start.x}
+                          cy={geometry.start.y}
+                          fill="#ffffff"
+                          onPointerDown={(event) =>
+                            handleAnnotationHandlePointerDown(
+                              annotation.id,
+                              "move-start",
+                              event
+                            )
+                          }
+                          r={6}
+                          stroke="#fb923c"
+                          strokeWidth={2}
+                        />
+                        <circle
+                          cx={geometry.end.x}
+                          cy={geometry.end.y}
+                          fill="#ffffff"
+                          onPointerDown={(event) =>
+                            handleAnnotationHandlePointerDown(
+                              annotation.id,
+                              "move-end",
+                              event
+                            )
+                          }
+                          r={6}
+                          stroke="#fb923c"
+                          strokeWidth={2}
+                        />
+                      </>
+                    ) : null}
+                  </g>
+                );
+              })}
+            </svg>
+
+            {enableDimensionAnnotations && isDrawMode ? (
+              <div className="-translate-x-1/2 pointer-events-none absolute top-3 left-1/2 rounded-full border border-orange-300/25 bg-black/70 px-3 py-1.5 text-orange-100 text-xs shadow-lg backdrop-blur">
+                按住并拖动，拉出尺寸线
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <Image
+            alt={imageAlt}
+            fill
+            onLoad={(event) => {
+              const nextWidth = Math.max(
+                1,
+                event.currentTarget.naturalWidth || 0
+              );
+              const nextHeight = Math.max(
+                1,
+                event.currentTarget.naturalHeight || 0
+              );
+              if (nextWidth > 0 && nextHeight > 0) {
+                setImageSize({ width: nextWidth, height: nextHeight });
+              }
+            }}
+            sizes="100vw"
+            src={previewImageUrl}
+            style={{ objectFit: "contain" }}
+            unoptimized
+          />
+        )}
+      </div>
+
+      {enableDimensionAnnotations ? (
+        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
+          {selectedAnnotation ? (
+            <div className="space-y-2.5">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <div className="font-medium text-sm text-white">尺寸文字</div>
+                  <div className="text-white/45 text-xs">
+                    留空时会自动显示像素长度，可手动改成真实尺寸。
+                  </div>
+                </div>
+                <div className="rounded-full border border-white/10 bg-black/40 px-2.5 py-1 text-[11px] text-white/65">
+                  长度{" "}
+                  {Math.max(
+                    1,
+                    Math.round(getDimensionLength(selectedAnnotation))
+                  )}{" "}
+                  px
+                </div>
+              </div>
+              <Input
+                className="border-white/10 bg-black/35 text-white placeholder:text-white/28"
+                onChange={(event) =>
+                  setAnnotations((current) =>
+                    current.map((annotation) =>
+                      annotation.id === selectedAnnotation.id
+                        ? { ...annotation, label: event.target.value }
+                        : annotation
+                    )
+                  )
+                }
+                placeholder={LABEL_PLACEHOLDER}
+                value={selectedAnnotation.label}
+              />
+            </div>
+          ) : (
+            <div className="text-sm text-white/55">
+              选中一条尺寸线后，可以在这里输入真实尺寸文案。
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      <Button
+        className="w-full"
+        disabled={isDownloading}
+        onClick={handleDownload}
+      >
+        {isDownloading ? (
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <Download className="mr-2 h-4 w-4" />
+        )}
+        下载结果图
+      </Button>
+    </div>
+  );
+}