fix ecommerce preview and module compatibility

2026-06-15 22:00:00 +08:00
parent b67f2e7601
commit c1c7cb3cc7
33 changed files with 284 additions and 1 deletions
@@ -0,0 +1 @@
+export * from "./aiGenerationClient.ts";
@@ -0,0 +1 @@
+export * from "./apiErrorUtils.ts";
@@ -0,0 +1 @@
+export * from "./generationRecordClient.ts";
@@ -0,0 +1 @@
+export * from "./serverConnection.ts";
@@ -0,0 +1 @@
+export * from "./taskSubscription.ts";
@@ -0,0 +1 @@
+export * from "./webGenerationGateway.ts";
@@ -0,0 +1 @@
+export * from "./toastStore.ts";
@@ -0,0 +1 @@
+export * from "./ossAssets.ts";
@@ -0,0 +1 @@
+export * from "./workflows.ts";
@@ -0,0 +1,2 @@
+export { default } from "./EcommercePage.tsx";
+export * from "./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="快捷功能">
            {[
@@ -0,0 +1 @@
+export * from "./ecommerceGenerationPersistence.ts";
@@ -0,0 +1 @@
+export * from "./ecommerceImageValidation.ts";
@@ -0,0 +1 @@
+export * from "./ecommerceTemplates.ts";
@@ -0,0 +1 @@
+export * from "./workbenchDownload.ts";
@@ -0,0 +1 @@
+export * from "./useGenerationTasks.ts";
@@ -0,0 +1 @@
+export * from "./useTypewriter.ts";
@@ -0,0 +1 @@
+export * from "./backgroundTaskRunner.ts";
@@ -0,0 +1 @@
+export * from "./index.ts";
@@ -0,0 +1 @@
+export * from "./useAppStore.ts";
@@ -0,0 +1 @@
+export * from "./useGenerationStore.ts";
@@ -0,0 +1 @@
+export * from "./useProjectStore.ts";
@@ -0,0 +1 @@
+export * from "./useSessionStore.ts";
@@ -0,0 +1 @@
+export * from "./useTaskStore.ts";
@@ -9040,6 +9040,56 @@
  z-index: 0 !important;
 }

+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-strip {
+  display: grid !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  gap: 12px !important;
+  width: 100% !important;
+  margin: 14px 0 10px !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card {
+  position: relative !important;
+  display: block !important;
+  width: 100% !important;
+  aspect-ratio: 1.46 / 1 !important;
+  min-height: 92px !important;
+  padding: 0 !important;
+  border: 1px solid rgba(30, 189, 219, 0.18) !important;
+  border-radius: 16px !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 251, 253, 0.98)),
+    #ffffff !important;
+  box-shadow:
+    0 16px 34px rgba(16, 115, 204, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
+  overflow: hidden !important;
+  cursor: pointer !important;
+  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card:hover {
+  transform: translateY(-1px) !important;
+  border-color: rgba(30, 189, 219, 0.34) !important;
+  box-shadow:
+    0 20px 42px rgba(16, 115, 204, 0.11),
+    0 0 0 1px rgba(30, 189, 219, 0.12) inset !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card:focus-visible {
+  outline: none !important;
+  border-color: rgba(30, 189, 219, 0.48) !important;
+  box-shadow:
+    0 0 0 3px rgba(30, 189, 219, 0.15),
+    0 20px 42px rgba(16, 115, 204, 0.11) !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-card__blank {
+  display: block !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
  background: #f8f9fa !important;
  transition: padding-top 520ms cubic-bezier(0.16, 1, 0.3, 1),
@@ -9258,6 +9308,10 @@
    min-height: 224px !important;
  }

+  .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-template-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
  .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(6n + 1))::before {
    content: none !important;
  }
@@ -0,0 +1 @@
+export * from "./types.ts";
@@ -0,0 +1 @@
+export * from "./enterpriseVideoPolicy.ts";
@@ -0,0 +1 @@
+export * from "./happyHorseRouting.ts";
@@ -0,0 +1 @@
+export * from "./pixverseRouting.ts";
@@ -0,0 +1 @@
+export * from "./resolveVideoModel.ts";
@@ -0,0 +1 @@
+export * from "./taskLifecycle.ts";
@@ -0,0 +1 @@
+export * from "./translateTaskError.ts";
@@ -0,0 +1 @@
+export * from "./viduRouting.ts";
				`@@ -0,0 +1 @@`
				`export * from "./generationRecordClient.ts";`
				`@@ -0,0 +1 @@`
				`export * from "./ecommerceGenerationPersistence.ts";`
				`@@ -0,0 +1 @@`
				`export * from "./ecommerceImageValidation.ts";`
				`@@ -0,0 +1 @@`
				`export * from "./enterpriseVideoPolicy.ts";`