feat: 电商工作台进度与生成记录健壮性优化

2026-06-15 10:24:31 +08:00
parent e1fdbe5f9b
commit 0b2d6b901f
10 changed files with 533 additions and 102 deletions
@@ -156,6 +156,16 @@ const ecommerceInspirationRows = [
  },
 ] as const;

+// 把灵感卡片的标题 + 卖点要点合成一段可直接填入指令栏的提示词。
+const buildInspirationPrompt = (title: string, meta: string): string => {
+  const points = meta
+    .split(/[·、,，]/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+  const base = title.trim();
+  return points.length ? `${base}。风格要点：${points.join("、")}。` : `${base}。`;
+};
+
 const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

 const normalizeHexColor = (value: string) => {
@@ -1385,6 +1395,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [productSetRequirement, setProductSetRequirement] = useState("");
  const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>(defaultProductSetOutput);
  const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
+  // 套图/图像生成的真实进度（0-100）：多张串行生成时按"已完成张数 + 当前张子进度"推进，
+  // 替代进度条原先写死 50 导致卡在 75% 的假进度。
+  const [generationProgress, setGenerationProgress] = useState(0);
  const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
  const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
@@ -1411,9 +1424,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [watermarkResultUrl, setWatermarkResultUrl] = useState<string | null>(null);
  const [watermarkProgress, setWatermarkProgress] = useState(0);
  const [translateImage, setTranslateImage] = useState<{ src: string; name: string; format: string } | null>(null);
-  const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done">("idle");
+  const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done" | "failed">("idle");
  const [isTranslateDragging, setIsTranslateDragging] = useState(false);
  const [translateLanguage, setTranslateLanguage] = useState("zh");
+  const [translateResultUrl, setTranslateResultUrl] = useState<string | null>(null);
  const [imageWorkbenchImage, setImageWorkbenchImage] = useState<{ src: string; name: string; format: string } | null>(null);
  const [imageWorkbenchPrompt, setImageWorkbenchPrompt] = useState("");
  const [imageWorkbenchBrushSize, setImageWorkbenchBrushSize] = useState(50);
@@ -1437,8 +1451,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [visibleComposerMenu, setVisibleComposerMenu] = useState<ComposerMenuKey | null>(null);
  const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
  const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
+  const [composerPopoverTop, setComposerPopoverTop] = useState(0);
  const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(true);
-  const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video" } | null>(null);
+  const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video"; prompt: string } | null>(null);
  const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
  const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
  const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
@@ -2082,6 +2097,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        stopWatermarkProgress();
        setWatermarkProgress(100);
        toast.success("去水印处理完成");
+        void saveUnifiedEcommerceGenerationRecord({
+          clientRecordId: crypto.randomUUID(),
+          title: `去水印 ${watermarkImage.name || ""}`.trim(),
+          mode: "watermark",
+          taskIds: [taskId],
+          sourceImages: [{ url: imageUrl, label: watermarkImage.name || "watermark-source" }],
+          results: [{ url: persistedUrl, label: "去水印结果", mediaType: "image", taskId }],
+          createdAt: new Date().toISOString(),
+        });
      } else {
        setWatermarkStatus("failed");
        stopWatermarkProgress();
@@ -2128,6 +2152,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    }
    setActiveQuickTool(null);
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
@@ -2145,6 +2170,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      return nextImage;
    });
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    setActiveQuickTool("translate");
  };

@@ -2154,6 +2180,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      translateProcessTimeoutRef.current = null;
    }
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
@@ -2182,28 +2209,76 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      return nextImage;
    });
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    toast.success("图片已导入");
  };

-  const handleTranslateGenerate = () => {
+  const handleTranslateGenerate = async () => {
    if (!translateImage || translateStatus === "processing") return;
-    if (translateProcessTimeoutRef.current !== null) window.clearTimeout(translateProcessTimeoutRef.current);
+    const targetLabel = translateLanguageOptions.find((option) => option.value === translateLanguage)?.label || "中文";
    setTranslateStatus("processing");
-    translateProcessTimeoutRef.current = window.setTimeout(() => {
-      translateProcessTimeoutRef.current = null;
-      setTranslateStatus("done");
-      toast.success("图片翻译完成");
-    }, 900);
+    setTranslateResultUrl(null);
+
+    try {
+      const sourceBlob = await fetch(translateImage.src).then((res) => res.blob());
+      const sourceMime = normalizeEcommerceImageMime(sourceBlob.type || "image/png");
+      const { url: imageUrl } = await aiGenerationClient.uploadAssetBinary(sourceBlob, {
+        name: `translate-source-${Date.now()}.png`,
+        mimeType: sourceMime,
+        scope: ecommerceOssScopes.productSource,
+      });
+
+      const prompt = `将图片中的所有文字翻译成${targetLabel}，保持原有的排版、字体风格、位置和整体设计不变，只替换文字内容。`;
+      const { taskId } = await aiGenerationClient.createImageEditTask({
+        imageUrl,
+        function: "description_edit",
+        prompt,
+      });
+
+      const resultUrl = await waitForTask(taskId, {
+        kind: "image",
+        abortRef: { current: false },
+        onProgress: () => {},
+      });
+
+      if (resultUrl) {
+        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("translate"), "ecommerce-translate");
+        setTranslateResultUrl(persistedUrl);
+        setTranslateStatus("done");
+        toast.success("图片翻译完成");
+        void saveUnifiedEcommerceGenerationRecord({
+          clientRecordId: crypto.randomUUID(),
+          title: `图片翻译（${targetLabel}） ${translateImage.name || ""}`.trim(),
+          mode: "translate",
+          prompt,
+          taskIds: [taskId],
+          sourceImages: [{ url: imageUrl, label: translateImage.name || "translate-source" }],
+          results: [{ url: persistedUrl, label: "翻译结果", mediaType: "image", taskId }],
+          config: { targetLanguage: translateLanguage },
+          createdAt: new Date().toISOString(),
+        });
+      } else {
+        setTranslateStatus("failed");
+        toast.error("翻译未返回结果");
+      }
+    } catch (err) {
+      setTranslateStatus("failed");
+      if (err instanceof ServerRequestError && err.status === 402) {
+        toast.error("余额不足，请充值后继续");
+      } else {
+        toast.error(err instanceof Error ? err.message : "图片翻译失败");
+      }
+    }
  };

  const handleTranslateDownload = () => {
-    if (!translateImage || translateStatus !== "done") {
+    if (!translateResultUrl || translateStatus !== "done") {
      toast.info("请先完成图片翻译");
      return;
    }
    const link = document.createElement("a");
-    const safeName = (translateImage.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
-    link.href = translateImage.src;
+    const safeName = (translateImage?.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
+    link.href = translateResultUrl;
    link.download = `${safeName || "translate-result"}-翻译.png`;
    document.body.appendChild(link);
    link.click();
@@ -2402,6 +2477,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        stopWorkbenchProgress();
        setImageWorkbenchProgress(100);
        toast.success("局部重绘已完成");
+        void saveUnifiedEcommerceGenerationRecord({
+          clientRecordId: crypto.randomUUID(),
+          title: imageWorkbenchPrompt.trim() || `图片修改 ${imageWorkbenchImage.name || ""}`.trim(),
+          mode: "inpaint",
+          prompt: imageWorkbenchPrompt || undefined,
+          taskIds: [taskId],
+          sourceImages: [{ url: imageUrl, label: imageWorkbenchImage.name || "inpaint-source" }],
+          results: [{ url: persistedUrl, label: "局部重绘结果", mediaType: "image", taskId }],
+          config: { ratio: imageWorkbenchRatio },
+          createdAt: new Date().toISOString(),
+        });
      } else {
        setImageWorkbenchStatus("failed");
        stopWorkbenchProgress();
@@ -3557,6 +3643,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {

      const generatedUrls: string[] = [];
      const stamp = Date.now();
+      const totalCount = Math.max(1, cloneSetCountKeys.reduce((sum, key) => sum + counts[key], 0));
+      let completedCount = 0;
+      setGenerationProgress(0);

      for (const countKey of cloneSetCountKeys) {
        if (imageAbortRef.current.current) break;
@@ -3580,8 +3669,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          let resultUrl: string | null = null;
          try {
            resultUrl = await waitForTask(taskId, {
+              kind: "image",
              abortRef: imageAbortRef.current,
-              onProgress: () => {},
+              onProgress: (event) => {
+                // 整体进度 = (已完成张数 + 当前张子进度) / 总张数。
+                const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
+                const overall = ((completedCount + sub / 100) / totalCount) * 100;
+                setGenerationProgress(Math.round(Math.min(99, overall)));
+              },
            });
          } finally {
            untrackEcommerceTask(taskId);
@@ -3597,6 +3692,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            generatedUrls.push("");
            imageGen.updateTask(storeId, { status: "failed", error: "生成未返回结果" });
          }
+          completedCount += 1;
+          setGenerationProgress(Math.round(Math.min(99, (completedCount / totalCount) * 100)));
        }
      }

@@ -3648,6 +3745,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {

      const prompt = buildEcommerceImagePrompt(outputKey, userText, pPlatform, pRatio, pLanguage, pMarket, tryOnOptions);
      const stamp = Date.now();
+      setGenerationProgress(0);

      const { taskId } = await aiGenerationClient.createImageTask({
        prompt,
@@ -3663,8 +3761,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      let resultUrl: string | null = null;
      try {
        resultUrl = await waitForTask(taskId, {
+          kind: "image",
          abortRef: imageAbortRef.current,
-          onProgress: () => {},
+          onProgress: (event) => {
+            const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
+            setGenerationProgress(Math.round(Math.min(99, sub)));
+          },
        });
      } finally {
        untrackEcommerceTask(taskId);
@@ -4501,7 +4603,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        <section className="product-set-empty-preview" aria-live="polite">
          {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
          <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
-          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label="商品套图" /> : null}
+          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label="商品套图" /> : null}
          <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图。"}</span>
        </section>
      )}
@@ -4554,7 +4656,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      language: item,
      countries: marketLanguageOptions.filter((option) => option.languages.includes(item)).map((option) => option.country),
    }));
-    const composerPopoverStyle: CSSProperties = { left: composerPopoverLeft };
+    const composerPopoverStyle = {
+      "--composer-popover-left": `${composerPopoverLeft}px`,
+      "--composer-popover-top": `${composerPopoverTop}px`,
+    } as CSSProperties;
    const menuToRender = composerMenu ?? visibleComposerMenu;
    if (!menuToRender) return null;
    const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
@@ -4735,7 +4840,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const toggleComposerMenu = (menuKey: ComposerMenuKey, event: ReactMouseEvent<HTMLButtonElement>) => {
    const composerRect = event.currentTarget.closest(".clone-ai-input-wrapper.ecom-command-composer")?.getBoundingClientRect();
    const buttonRect = event.currentTarget.getBoundingClientRect();
-    setComposerPopoverLeft(Math.max(0, buttonRect.left - (composerRect?.left ?? 0)));
+    const composerLeft = composerRect?.left ?? buttonRect.left;
+    const composerTop = composerRect?.top ?? buttonRect.top;
+    setComposerPopoverLeft(Math.max(0, buttonRect.left - composerLeft));
+    setComposerPopoverTop(Math.max(0, buttonRect.bottom - composerTop + 8));
    setComposerMenu((menu) => (menu === menuKey ? null : menuKey));
  };

@@ -4772,6 +4880,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    strip.scrollBy({ left: direction * Math.max(280, strip.clientWidth * 0.78), behavior: "smooth" });
  };

+  const applyInspirationPrompt = (prompt: string) => {
+    const nextValue = prompt.slice(0, 500);
+    // 回到主指令栏（关闭可能打开的快捷工具页），把提示词填入并聚焦。
+    setActiveQuickTool(null);
+    setRequirement(nextValue);
+    syncRequirementMentionQuery(nextValue, nextValue.length);
+    setInspirationPreview(null);
+    requestAnimationFrame(() => {
+      const textarea = requirementTextareaRef.current;
+      if (textarea) {
+        textarea.focus();
+        textarea.setSelectionRange(nextValue.length, nextValue.length);
+        textarea.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    });
+    toast.success("提示词已填入指令栏");
+  };
+
  const inspirationPreviewOverlay =
    inspirationPreview && typeof document !== "undefined"
      ? createPortal(
@@ -4790,6 +4916,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
              ) : (
                <img src={inspirationPreview.mediaUrl} alt="" className="ecom-inspiration-preview__media" />
              )}
+              {inspirationPreview.prompt ? (
+                <div className="ecom-inspiration-preview__actions">
+                  <button
+                    type="button"
+                    className="ecom-inspiration-preview__use-prompt"
+                    onClick={() => applyInspirationPrompt(inspirationPreview.prompt)}
+                  >
+                    <EditOutlined />
+                    <span>使用此提示词</span>
+                  </button>
+                </div>
+              ) : null}
            </div>
          </div>,
          document.body,
@@ -4929,7 +5067,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                <>
                  <LoadingOutlined style={{ fontSize: 28 }} />
                  <strong>正在生成</strong>
-                  <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
+                  <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
                  <span>AI 正在为 {platform} / {market} 整理{selectedCloneOutput.label}。</span>
                </>
              ) : status === "failed" ? (
@@ -5028,7 +5166,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            <section className="clone-ai-empty-state" aria-live="polite">
              {status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
              <strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
-              {status === "generating" ? <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
+              {status === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
              <span>
                {status === "generating"
                  ? "AI 正在为 " + platform + " / " + market + " 整理" + selectedCloneOutput.label + "。"
@@ -5223,7 +5361,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                  </div>
                  <div className="ecom-inspiration-strip" tabIndex={0}>
                    {row.cards.map((card, index) => (
-                      <article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType })}>
+                      <article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType, prompt: buildInspirationPrompt(card.title, card.meta) })}>
                        <div className="ecom-inspiration-card__visual" aria-hidden="true">
                          {card.mediaType === "video" ? (
                            <video src={card.mediaUrl} muted playsInline loop autoPlay preload="metadata" />
@@ -6135,13 +6273,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                  <strong>正在翻译</strong>
                  <em>AI 正在识别并翻译图片中的文字</em>
                </div>
-              ) : translateStatus === "done" ? (
+              ) : translateStatus === "done" && translateResultUrl ? (
                <>
-                  <img src={translateImage.src} alt="翻译结果" />
+                  <img src={translateResultUrl} alt="翻译结果" />
                  <button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
                    <QuestionCircleOutlined />
                  </button>
                </>
+              ) : translateStatus === "failed" ? (
+                <div className="ecom-watermark-empty">
+                  <GlobalOutlined />
+                  <strong>翻译失败</strong>
+                  <em>请重试或更换图片</em>
+                </div>
              ) : (
                <div className="ecom-watermark-empty">
                  <GlobalOutlined />
@@ -1,10 +1,11 @@
 import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
-import type { ReactNode } from "react";

 interface EcommerceProgressBarProps {
  status: "idle" | "generating" | "done" | "failed" | string;
  label?: string;
  onCancel?: () => void;
+  /** 0-100 真实进度。传入时进度条按真实值推进；省略时按状态做平滑蠕动。 */
+  progress?: number;
 }

 function mapStatus(status: string): "running" | "completed" | "failed" {
@@ -14,9 +15,13 @@ function mapStatus(status: string): "running" | "completed" | "failed" {
  return "running";
 }

-export function EcommerceProgressBar({ status, label, onCancel }: EcommerceProgressBarProps) {
-  const progress = mapStatus(status) === "running" ? 50 : 100;
-  const smoothed = useSmoothedProgress(progress, mapStatus(status));
+export function EcommerceProgressBar({ status, label, onCancel, progress }: EcommerceProgressBarProps) {
+  const mapped = mapStatus(status);
+  // running 时目标取「真实进度」与兜底值 88 的较大者：有真实进度则跟随推进，
+  // 后端不推中间进度时也由平滑器持续蠕动到高位，不再卡死在 75%。
+  const realProgress = typeof progress === "number" ? Math.max(0, Math.min(100, progress)) : 0;
+  const target = mapped === "running" ? Math.max(realProgress, 88) : 100;
+  const smoothed = useSmoothedProgress(target, mapped);

  if (status === "idle") return null;