fix ecommerce preview and module compatibility

src/features/ecommerce/EcommercePage.js

@@ -0,0 +1,2 @@
+export { default } from "./EcommercePage.tsx";
+export * from "./EcommercePage.tsx";

src/features/ecommerce/EcommercePage.tsx

@@ -282,6 +282,12 @@ type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio";
 type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body";
 type CloneReferenceMode = "upload" | "link";
 type CloneReplicateLevelKey = "style" | "high";
+type CloneTemplateAsset = {
+  id: string;
+  title: string;
+  prompt: string;
+  mediaUrl: string;
+};
 type TryOnModelSource = "ai" | "library";
 type TryOnStatus = "idle" | "modeling" | "ready" | "generating" | "done" | "failed";
 type DetailStatus = "idle" | "ready" | "generating" | "done" | "failed";
@@ -1005,6 +1011,112 @@ const productSetOutputOptions: Array<{ key: ProductSetOutputKey; label: string;
 const cloneOutputOptions: Array<{ key: ProductSetOutputKey; label: string; desc: string; icon: ReactNode }> = [
   ...productSetOutputOptions,
 ];
+const cloneTemplateCards: Record<Exclude<CloneOutputKey, "hot">, CloneTemplateAsset[]> = {
+  set: [
+    {
+      id: "set-main",
+      title: "商品套图主图",
+      prompt: "生成一组统一风格的商品套图，包含主图、卖点图、场景图和细节图，主体清晰，色调统一，符合电商平台展示规范。",
+      mediaUrl: ossAssets.ecommerce.productSet.main,
+    },
+    {
+      id: "set-scene",
+      title: "商品套图场景",
+      prompt: "生成生活化场景商品套图，突出商品在真实环境中的使用感、氛围感和转化卖点。",
+      mediaUrl: ossAssets.ecommerce.productSet.scene,
+    },
+    {
+      id: "set-detail",
+      title: "商品套图细节",
+      prompt: "生成突出材质、工艺和边缘细节的商品套图，画面干净，信息聚焦，适合电商详情展示。",
+      mediaUrl: ossAssets.ecommerce.productSet.detail,
+    },
+    {
+      id: "set-selling",
+      title: "商品套图卖点",
+      prompt: "生成强调核心卖点和对比优势的商品套图，信息层级清晰，适合列表页和转化场景。",
+      mediaUrl: ossAssets.ecommerce.productSet.selling,
+    },
+  ],
+  detail: [
+    {
+      id: "detail-hero",
+      title: "详情图头图",
+      prompt: "生成适用于 A+ 详情页的头图模块，突出品牌感、主卖点和视觉中心，版式清晰高级。",
+      mediaUrl: ossAssets.ecommerce.detail.longPage,
+    },
+    {
+      id: "detail-grid-a",
+      title: "详情图模块 A",
+      prompt: "生成模块化详情长图，重点展示产品卖点、功能说明和适用场景，适合滚动阅读。",
+      mediaUrl: ossAssets.ecommerce.detail.gridA,
+    },
+    {
+      id: "detail-grid-b",
+      title: "详情图模块 B",
+      prompt: "生成模块化详情长图，强化材质、规格和使用说明，视觉简洁，信息明确。",
+      mediaUrl: ossAssets.ecommerce.detail.gridB,
+    },
+    {
+      id: "detail-grid-c",
+      title: "详情图模块 C",
+      prompt: "生成模块化详情页内容，突出品牌叙事、细节拆解和购买理由，保持统一排版。",
+      mediaUrl: ossAssets.ecommerce.detail.gridC,
+    },
+  ],
+  model: [
+    {
+      id: "model-dress-a",
+      title: "模特图穿搭 A",
+      prompt: "生成真人模特穿搭展示图，突出服装版型、上身效果和整体气质，姿态自然。",
+      mediaUrl: ossAssets.ecommerce.tryOn.dressA,
+    },
+    {
+      id: "model-dress-b",
+      title: "模特图穿搭 B",
+      prompt: "生成适合商品展示的模特图，强调衣型、垂感和真实穿着效果，画面干净。",
+      mediaUrl: ossAssets.ecommerce.tryOn.dressB,
+    },
+    {
+      id: "model-woman",
+      title: "模特图女模",
+      prompt: "生成自然站姿的女模特展示图，适合服饰、配件和穿搭类商品展示。",
+      mediaUrl: ossAssets.ecommerce.tryOn.modelWoman,
+    },
+    {
+      id: "model-man",
+      title: "模特图男模",
+      prompt: "生成真实感更强的男模特展示图，突出上身效果、轮廓和场景氛围。",
+      mediaUrl: ossAssets.ecommerce.tryOn.modelMan,
+    },
+  ],
+  video: [
+    {
+      id: "video-hook",
+      title: "短视频开场",
+      prompt: "生成适合电商短视频的开场镜头，节奏明确，第一秒就突出产品和核心看点。",
+      mediaUrl: ossAssets.ecommerce.inspiration.tiktokPreference,
+    },
+    {
+      id: "video-scene",
+      title: "短视频场景",
+      prompt: "生成生活化使用场景的短视频分镜，画面连贯，围绕商品使用过程展开。",
+      mediaUrl: ossAssets.ecommerce.inspiration.officeStyleSet,
+    },
+    {
+      id: "video-review",
+      title: "短视频口播",
+      prompt: "生成适合口播讲解的电商短视频结构，包含产品亮点、卖点说明和收尾引导。",
+      mediaUrl: ossAssets.ecommerce.inspiration.asinListing,
+    },
+    {
+      id: "video-conversion",
+      title: "短视频转化",
+      prompt: "生成以转化为目标的短视频分镜，强化开头钩子、卖点展示和行动引导。",
+      mediaUrl: ossAssets.ecommerce.inspiration.competitorListing,
+    },
+  ],
+};
 const cloneSetCountOptions: Array<{
   key: CloneSetCountKey;
   title: string;
@@ -1457,6 +1569,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [imageWorkbenchProgress, setImageWorkbenchProgress] = useState(0);
   const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
   const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
+  const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(false);
   const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
   const [isVideoWorkspaceVisible, setIsVideoWorkspaceVisible] = useState(false);
   const [videoPlanTrigger, setVideoPlanTrigger] = useState(0);
@@ -1959,6 +2072,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const selectedProductSetOutput =
     productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
   const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
+  const activeCloneTemplateCards = cloneTemplateCards[cloneOutput === "hot" ? "set" : cloneOutput];
   const cloneRequirementPlaceholder =
     cloneOutput === "model"
       ? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描述（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
@@ -3327,12 +3441,22 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
     setCloneOutput(nextOutput);
+    setIsCloneTemplateStripVisible(true);
     if (nextOutput !== "video") setIsVideoWorkspaceVisible(false);
     setRatio((current) =>
       normalizeRatioForPlatform(platform, current, nextOutput),
     );
   };
 
+  const handleCloneModeTabClick = (nextOutput: CloneOutputKey) => {
+    if (nextOutput === cloneOutput) {
+      setIsCloneTemplateStripVisible((visible) => !visible);
+      return;
+    }
+    handleCloneOutputChange(nextOutput);
+    setComposerMenu(null);
+  };
+
   const handleCloneMarketChange = (nextMarket: string) => {
     const normalizedMarket = normalizeMarket(nextMarket);
     setMarket(normalizedMarket);
@@ -5171,6 +5295,60 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     toast.success("提示词已填入指令栏");
   };
 
+  const applyComposerPrompt = (prompt: string) => {
+    const nextValue = prompt.slice(0, 500);
+    setActiveQuickTool(null);
+    setComposerMenu(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" });
+      }
+    });
+  };
+
+  const addTemplateImageToComposer = async (card: CloneTemplateAsset) => {
+    if (productImages.length >= maxCloneProductImages) {
+      toast.info("模板图片已达上限");
+      return;
+    }
+
+    try {
+      const stamp = Date.now();
+      const uploaded = await aiGenerationClient.uploadAssetByUrl({
+        sourceUrl: card.mediaUrl,
+        name: `${card.id}-${stamp}`,
+        scope: ecommerceOssScopes.productSource,
+      });
+      const nextImage: CloneImageItem = {
+        id: `template-${card.id}-${stamp}`,
+        src: uploaded.url || card.mediaUrl,
+        name: card.title,
+        ossKey: uploaded.ossKey,
+      };
+      setProductImages((current) => [...current, nextImage].slice(0, maxCloneProductImages));
+      void readImageDimensions(nextImage.src)
+        .then(({ width, height }) => {
+          setProductImages((current) =>
+            current.map((item) => (item.id === nextImage.id ? { ...item, width, height } : item)),
+          );
+        })
+        .catch(() => undefined);
+    } catch {
+      toast.error("模板图片导入失败");
+    }
+  };
+
+  const handleCloneTemplateCardClick = (card: CloneTemplateAsset) => {
+    void addTemplateImageToComposer(card);
+    applyComposerPrompt(card.prompt);
+  };
+
   const inspirationPreviewOverlay =
     inspirationPreview && typeof document !== "undefined"
       ? createPortal(
@@ -5509,7 +5687,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               key={option.key}
               type="button"
               className={cloneOutput === option.key ? "is-active" : ""}
-              onClick={() => handleCloneOutputChange(option.key)}
+              onClick={() => handleCloneModeTabClick(option.key)}
             >
               <span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
               <strong>{option.label}</strong>
@@ -5608,6 +5786,25 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           </div>
           {renderComposerMenu()}
         </div>
+        {(status === "idle" || status === "ready") && !showMainVideoWorkspace && isCloneTemplateStripVisible ? (
+          <section className={`ecom-command-template-strip ecom-command-template-strip--${cloneOutput}`} aria-label="模板卡片">
+            {activeCloneTemplateCards.map((card) => (
+              <button
+                key={card.id}
+                type="button"
+                className="ecom-command-template-card"
+                aria-label={card.title}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleCloneTemplateCardClick(card);
+                }}
+              >
+                <span className="ecom-command-template-card__blank" aria-hidden="true" />
+              </button>
+            ))}
+          </section>
+        ) : null}
         {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
           <section className="ecom-command-quick-board" aria-label="快捷功能">
             {[

src/features/ecommerce/ecommerceGenerationPersistence.js

@@ -0,0 +1 @@
+export * from "./ecommerceGenerationPersistence.ts";

src/features/ecommerce/ecommerceImageValidation.js

@@ -0,0 +1 @@
+export * from "./ecommerceImageValidation.ts";

src/features/ecommerce/ecommerceTemplates.js

@@ -0,0 +1 @@
+export * from "./ecommerceTemplates.ts";

src/features/workbench/workbenchDownload.js

@@ -0,0 +1 @@
+export * from "./workbenchDownload.ts";