merge main: 解决EcommercePage.tsx和ecommerce-standalone.css冲突

src/features/ecommerce/EcommercePage.tsx

@@ -65,8 +65,10 @@ import {
   getPlatformDefaultRatio,
   getPlatformLanguageOptions,
   getPlatformRatioOptions,
+  languageOptions,
   marketLanguageOptions,
   marketOptions,
+  normalizeLanguage,
   normalizeLanguageForPlatform,
   normalizeMarket,
   normalizePlatform,
@@ -167,6 +169,20 @@ type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string };
 const ecommerceInspirationTabs = ["最近打开", "一键同款", "海报模板", "热门", "商品图", "模特穿戴"];
 const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration;
 
+const getMarketsForLanguage = (languageValue: string) => {
+  const normalizedLanguage = normalizeLanguage(languageValue);
+  const matches = marketLanguageOptions
+    .filter((option) => option.languages.some((item) => normalizeLanguage(item) === normalizedLanguage))
+    .map((option) => option.country);
+  return matches.length ? matches : marketOptions;
+};
+
+const normalizeMarketForLanguage = (marketValue: string, languageValue: string) => {
+  const normalizedMarket = normalizeMarket(marketValue);
+  const languageMarkets = getMarketsForLanguage(languageValue);
+  return languageMarkets.includes(normalizedMarket) ? normalizedMarket : (languageMarkets[0] ?? marketOptions[0] ?? normalizedMarket);
+};
+
 const ecommerceInspirationRows = [
   {
     title: "作品记录",
@@ -230,6 +246,7 @@ const buildInspirationPrompt = (title: string, meta: string): string => {
 };
 
 import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { listEcommerceTemplates, type EcommerceTemplateManifestItem } from "../../api/ecommerceTemplateClient";
 import { ServerRequestError } from "../../api/serverConnection";
 import { waitForTask } from "../../api/taskSubscription";
 import { toast } from "../../components/toast/toastStore";
@@ -284,6 +301,13 @@ type CloneTemplateAsset = {
   title: string;
   prompt: string;
   mediaUrl: string;
+  mediaType?: "image" | "video";
+  sourceAssets?: Array<{
+    url: string;
+    name: string;
+    ossKey?: string;
+    mimeType?: string;
+  }>;
 };
 interface CommerceScenarioTemplate extends CloneTemplateAsset {
   scenario: Exclude<CommerceScenarioKey, "popular">;
@@ -347,9 +371,6 @@ interface EcommerceImagePromptOptions {
 }
 
 const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [
-  { key: "set", label: "商品套图", icon: <AppstoreOutlined /> },
-  { key: "detail", label: "A+详情", icon: <FileImageOutlined /> },
-  { key: "wear", label: "服饰穿搭", icon: <SkinOutlined /> },
   { key: "clone", label: "电商AI作图", icon: <AppstoreOutlined /> },
 ];
 
@@ -437,6 +458,56 @@ const commerceScenarioOutputMap: Record<Exclude<CommerceScenarioKey, "popular">,
   salesVideo: "video",
 };
 
+const ecommerceTemplateCategoryMap: Record<string, Exclude<CommerceScenarioKey, "popular">> = {
+  poster: "poster",
+  "main-image": "mainImage",
+  "scene-image": "scene",
+  "festival-image": "festival",
+  "model-image": "model",
+  "background-replace": "background",
+  retouch: "retouch",
+  "sales-video": "salesVideo",
+};
+
+const getTemplateMediaType = (template: EcommerceTemplateManifestItem): "image" | "video" => {
+  const extension = template.preview?.extension?.toLowerCase() || template.preview?.url?.split("?")[0].split(".").pop()?.toLowerCase() || "";
+  return extension.includes("mp4") || extension.includes("webm") || extension.includes("mov") ? "video" : "image";
+};
+
+const mapRemoteTemplateToScenarioTemplate = (template: EcommerceTemplateManifestItem): CommerceScenarioTemplate | null => {
+  const scenario = ecommerceTemplateCategoryMap[String(template.categorySlug || "").trim()];
+  const mediaUrl = template.preview?.url?.trim();
+  if (!scenario || !template.id || !mediaUrl) return null;
+
+  const title = template.templateName?.trim() || template.templateSlug?.trim() || template.id;
+  const prompt = template.prompt?.trim() || title;
+  const sourceAssets = (template.assets || [])
+    .filter((asset) => typeof asset.url === "string" && asset.url.trim())
+    .map((asset, index) => {
+      const url = asset.url!.trim();
+      const extension = asset.extension?.replace(/^\./, "") || url.split("?")[0].split(".").pop() || "png";
+      return {
+        url,
+        name: asset.fileName?.trim() || `${title}-素材${asset.assetIndex || index + 1}.${extension}`,
+        ossKey: asset.ossKey,
+        mimeType: extension.toLowerCase() === "jpg" || extension.toLowerCase() === "jpeg" ? "image/jpeg" : "image/png",
+      };
+    });
+
+  return {
+    id: template.id,
+    scenario,
+    output: commerceScenarioOutputMap[scenario],
+    title,
+    desc: template.category?.trim() || commerceScenarioOptions.find((option) => option.key === scenario)?.desc || "",
+    badge: template.category?.trim() || commerceScenarioOptions.find((option) => option.key === scenario)?.label || title,
+    prompt,
+    mediaUrl,
+    mediaType: getTemplateMediaType(template),
+    sourceAssets,
+  };
+};
+
 const defaultCommerceIntentFallback: CommerceDefaultIntent = { kind: "image", scenario: "mainImage" };
 
 const normalizeDefaultCommerceIntent = (value: unknown): CommerceDefaultIntent => {
@@ -816,10 +887,6 @@ const commerceScenarioTemplates: CommerceScenarioTemplate[] = [
     mediaUrl: ossAssets.ecommerce.inspiration.nightLightUnboxingDouyin,
   },
 ];
-const popularCommerceScenarioTemplates = commerceScenarioOptions
-  .filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
-  .map((option) => commerceScenarioTemplates.find((template) => template.scenario === option.key))
-  .filter((template): template is CommerceScenarioTemplate => Boolean(template));
 const cloneSetCountOptions: Array<{
   key: CloneSetCountKey;
   title: string;
@@ -1145,6 +1212,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const skipInitialCloneAutoSaveRef = useRef(true);
   const skipNextCloneAutoSaveRef = useRef(false);
   const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
+  useEffect(() => {
+    if (activeTool === "set") {
+      setActiveTool("clone");
+      setActiveQuickTool("quick-set");
+    } else if (activeTool === "detail") {
+      setActiveTool("clone");
+      setActiveQuickTool("detail");
+    } else if (activeTool === "wear") {
+      setActiveTool("clone");
+      setActiveQuickTool(null);
+    }
+  }, [activeTool]);
   useEffect(() => {
     setPreviewZoom(1);
     setIsCommandComposerCompact(false);
@@ -1203,6 +1282,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
   const [activeCommerceScenario, setActiveCommerceScenario] = useState<CommerceScenarioKey | null>(null);
   const [isCommerceScenarioMoreOpen, setIsCommerceScenarioMoreOpen] = useState(false);
+  const [remoteCommerceScenarioTemplates, setRemoteCommerceScenarioTemplates] = useState<CommerceScenarioTemplate[] | null>(null);
   const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
   const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(false);
   const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
@@ -1689,7 +1769,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [detailProgress, setDetailProgress] = useState(0);
   const [hotRequirement, setHotRequirement] = useState("");
   const [isHotMaterialDragging, setIsHotMaterialDragging] = useState(false);
-  const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "above" | "below" } | null>(null);
+  const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "right" | "left" } | null>(null);
   const [hotPlatform, setHotPlatform] = useState(platformOptions[0]);
   const [hotMarket, setHotMarket] = useState(marketOptions[0]);
   const [hotLanguage, setHotLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
@@ -1697,6 +1777,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [hotStatus, setHotStatus] = useState<DetailStatus>("idle");
   const [hotResultUrl, setHotResultUrl] = useState<string | null>(null);
   const [hotProgress, setHotProgress] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    listEcommerceTemplates()
+      .then((response) => {
+        if (cancelled) return;
+        const templates = response.templates
+          .map(mapRemoteTemplateToScenarioTemplate)
+          .filter((template): template is CommerceScenarioTemplate => Boolean(template));
+        setRemoteCommerceScenarioTemplates(templates.length ? templates : null);
+      })
+      .catch(() => {
+        if (!cancelled) setRemoteCommerceScenarioTemplates(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
   const productSetRatioOptions = useMemo(
     () => getPlatformRatioOptions(productSetPlatform, productSetOutput),
     [productSetOutput, productSetPlatform],
@@ -1734,6 +1832,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     () => getPlatformLanguageOptions(hotPlatform, hotMarket),
     [hotMarket, hotPlatform],
   );
+  const languageMarketOptions = languageOptions;
+  const cloneMarketOptions = useMemo(() => getMarketsForLanguage(language), [language]);
+  const detailMarketOptions = useMemo(() => getMarketsForLanguage(detailLanguage), [detailLanguage]);
+  const hotMarketOptions = useMemo(() => getMarketsForLanguage(hotLanguage), [hotLanguage]);
   const ecommerceMentionImages: MentionImageOption[] = [
     ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
     ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
@@ -1748,6 +1850,33 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     [productImages],
   );
 
+  const quickPageSidebarItems: Array<{ key: NonNullable<typeof activeQuickTool>; label: string; icon: ReactNode }> = [
+    { key: "quick-set", label: "商品套图", icon: <AppstoreAddOutlined /> },
+    { key: "detail", label: "A+详情", icon: <LayoutOutlined /> },
+    { key: "hot", label: "爆款复刻", icon: <FireOutlined /> },
+    { key: "oneClickVideo", label: "一键视频", icon: <PlayCircleOutlined /> },
+    { key: "image-edit", label: "图片修改", icon: <HighlightOutlined /> },
+    { key: "watermark", label: "去除水印", icon: <ClearOutlined /> },
+    { key: "copywriting", label: "一键文案", icon: <FileTextOutlined /> },
+    { key: "translate", label: "图片翻译", icon: <TranslationOutlined /> },
+  ];
+
+  const renderQuickPageSidebar = (activeKey: NonNullable<typeof activeQuickTool>) => (
+    <nav className="ecom-quick-page-sidebar" aria-label="快捷工具切换">
+      {quickPageSidebarItems.map((item) => (
+        <button
+          key={item.key}
+          type="button"
+          className={item.key === activeKey ? "is-active" : ""}
+          onClick={() => setActiveQuickTool(item.key)}
+        >
+          {item.icon}
+          <span>{item.label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+
   const selectedProductSetOutput =
     productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
   const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
@@ -1758,11 +1887,22 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         : commerceScenarioOptions.filter((option) => primaryCommerceScenarioKeys.includes(option.key)),
     [isCommerceScenarioMoreOpen],
   );
+  const effectiveCommerceScenarioTemplates = remoteCommerceScenarioTemplates?.length
+    ? remoteCommerceScenarioTemplates
+    : commerceScenarioTemplates;
+  const popularCommerceScenarioTemplates = useMemo(
+    () =>
+      commerceScenarioOptions
+        .filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
+        .map((option) => effectiveCommerceScenarioTemplates.find((template) => template.scenario === option.key))
+        .filter((template): template is CommerceScenarioTemplate => Boolean(template)),
+    [effectiveCommerceScenarioTemplates],
+  );
   const activeCommerceScenarioTemplates = activeCommerceScenario === null
     ? []
     : activeCommerceScenario === "popular"
       ? popularCommerceScenarioTemplates
-      : commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
+      : effectiveCommerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
   const shouldShowScenarioSettings = activeCommerceScenario !== null && scenarioSettingsKeys.includes(activeCommerceScenario);
   useEffect(() => {
     templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" });
@@ -2139,8 +2279,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   const openImageTranslatePage = () => {
     clearSmartCutoutTransition();
+    setActiveQuickTool("translate");
     setComposerMenu(null);
-    toast.info("功能正在优化中");
   };
 
   const closeImageTranslatePage = () => {
@@ -3185,7 +3325,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setRatio((current) =>
       normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput),
     );
-    setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
   };
 
   const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
@@ -3235,10 +3374,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setLanguage(getPlatformDefaultLanguage(platform, normalizedMarket));
   };
 
+  const handleCloneLanguageChange = (nextLanguage: string) => {
+    const normalizedLanguage = normalizeLanguage(nextLanguage);
+    setLanguage(normalizedLanguage);
+    setMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage));
+  };
+
   const handleDetailPlatformChange = (nextPlatform: string) => {
     const normalizedPlatform = normalizePlatform(nextPlatform);
     setDetailPlatform(normalizedPlatform);
-    setDetailLanguage(getPlatformDefaultLanguage(normalizedPlatform, detailMarket));
     setDetailRatio((current) => getQuickSetRatioValue(current));
   };
 
@@ -3248,6 +3392,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setDetailLanguage(getPlatformDefaultLanguage(detailPlatform, normalizedMarket));
   };
 
+  const handleDetailLanguageChange = (nextLanguage: string) => {
+    const normalizedLanguage = normalizeLanguage(nextLanguage);
+    setDetailLanguage(normalizedLanguage);
+    setDetailMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage));
+  };
+
   const createCloneSettingSnapshot = (name: string, id = `clone-setting-${Date.now()}`): CloneSavedSetting => ({
     id,
     name,
@@ -4392,7 +4542,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const handleHotPlatformChange = (nextPlatform: string) => {
     const normalizedPlatform = normalizePlatform(nextPlatform);
     setHotPlatform(normalizedPlatform);
-    setHotLanguage(getPlatformDefaultLanguage(normalizedPlatform, hotMarket));
     setHotRatio((current) => getQuickSetRatioValue(current));
   };
 
@@ -4402,6 +4551,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setHotLanguage(getPlatformDefaultLanguage(hotPlatform, normalizedMarket));
   };
 
+  const handleHotLanguageChange = (nextLanguage: string) => {
+    const normalizedLanguage = normalizeLanguage(nextLanguage);
+    setHotLanguage(normalizedLanguage);
+    setHotMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage));
+  };
+
   const handleHotAiWrite = () => {
     setHotRequirement(
       "1.产品名称：便携式咖啡保温杯\n2.核心卖点：316不锈钢内胆、12小时长效保温、防漏便携、大容量\n3.参考风格：极简日系、暖光氛围、生活场景\n4.期望场景：办公桌面、户外通勤、运动健身\n5.具体参数：容量500ml、口径4.5cm、高度22cm",
@@ -4517,20 +4672,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   const handleHotMaterialMouseEnter = (src: string, event: ReactMouseEvent<HTMLElement>) => {
     const rect = event.currentTarget.getBoundingClientRect();
-    const previewHalfWidth = 150;
-    const previewHeight = 360;
+    const previewWidth = 300;
+    const previewHeight = 190;
     const gap = 12;
     const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
     const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-    const x = Math.min(
-      Math.max(rect.left + rect.width / 2, previewHalfWidth + gap),
-      Math.max(previewHalfWidth + gap, viewportWidth - previewHalfWidth - gap),
+    const canShowRight = rect.right + gap + previewWidth <= viewportWidth - gap;
+    const placement: "right" | "left" = canShowRight ? "right" : "left";
+    const x = placement === "right" ? rect.right + gap : Math.max(gap, rect.left - gap);
+    const y = Math.min(
+      Math.max(rect.top + rect.height / 2, previewHeight / 2 + gap),
+      Math.max(previewHeight / 2 + gap, viewportHeight - previewHeight / 2 - gap),
     );
-    const showAbove = rect.top > previewHeight + gap;
-    const y = showAbove
-      ? rect.top - gap
-      : Math.min(rect.bottom + gap, viewportHeight - gap);
-    setHotMaterialHoverZoom({ src, x, y, placement: showAbove ? "above" : "below" });
+    setHotMaterialHoverZoom({ src, x, y, placement });
   };
   const handleHotMaterialMouseLeave = () => setHotMaterialHoverZoom(null);
 
@@ -4554,13 +4708,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               onRemove(item.id);
             }}
           >
-            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-              <path d="M9 6V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1" />
-              <path d="M5 6h14" />
-              <path d="M8 6l1 14h6l1-14" />
-              <path d="M10.5 10v6" />
-              <path d="M13.5 10v6" />
-            </svg>
+            脳
           </button>
         </figure>
       ))}
@@ -5246,8 +5394,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleClonePlatformChange },
-    { key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange },
-    { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
+    { key: "market", label: "国家", value: market, options: cloneMarketOptions, onChange: handleCloneMarketChange },
+    { key: "language", label: "语种", value: language, options: languageMarketOptions, onChange: handleCloneLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: ratio, options: cloneRatioOptions, onChange: setRatio },
   ];
   const quickDetailBasicSelects: Array<{
@@ -5258,8 +5406,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: detailPlatform, options: platformOptions, onChange: handleDetailPlatformChange },
-    { key: "market", label: "国家", value: detailMarket, options: marketOptions, onChange: handleDetailMarketChange },
-    { key: "language", label: "语种", value: detailLanguage, options: detailLanguageOptions, onChange: setDetailLanguage },
+    { key: "market", label: "国家", value: detailMarket, options: detailMarketOptions, onChange: handleDetailMarketChange },
+    { key: "language", label: "语种", value: detailLanguage, options: languageMarketOptions, onChange: handleDetailLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(detailRatio), options: quickSetRatioOptions, onChange: setDetailRatio },
   ];
 
@@ -5271,8 +5419,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: hotPlatform, options: platformOptions, onChange: handleHotPlatformChange },
-    { key: "market", label: "国家", value: hotMarket, options: marketOptions, onChange: handleHotMarketChange },
-    { key: "language", label: "语种", value: hotLanguage, options: hotLanguageOptions, onChange: setHotLanguage },
+    { key: "market", label: "国家", value: hotMarket, options: hotMarketOptions, onChange: handleHotMarketChange },
+    { key: "language", label: "语种", value: hotLanguage, options: languageMarketOptions, onChange: handleHotLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(hotRatio), options: quickSetRatioOptions, onChange: setHotRatio },
   ];
 
@@ -5284,8 +5432,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: setPlatform },
-    { key: "market", label: "国家", value: market, options: marketOptions, onChange: setMarket },
-    { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
+    { key: "market", label: "国家", value: market, options: cloneMarketOptions, onChange: handleCloneMarketChange },
+    { key: "language", label: "语种", value: language, options: languageMarketOptions, onChange: handleCloneLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(ratio), options: quickSetRatioOptions, onChange: setRatio },
   ];
 
@@ -5619,7 +5767,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     } else if (composerAssetTab === "recipe") {
       content = (
         <div className="ecom-command-library-list">
-          {commerceScenarioTemplates.slice(0, 4).map((template) => (
+          {effectiveCommerceScenarioTemplates.slice(0, 4).map((template) => (
             <button key={template.id} type="button" onClick={() => { handleCloneTemplateCardClick(template); setComposerMenu(null); }}>
               <strong>{template.title}</strong>
               <span>{template.badge} · {template.desc}</span>
@@ -5865,6 +6013,26 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setVideoPlanTrigger((value) => value + 1);
   }
 
+  const showDefaultRoutingGeneratingState = () => {
+    setComposerMenu(null);
+    setIsCommandComposerCompact(true);
+    imageAbortRef.current = { current: false };
+    lastFailedActionRef.current = null;
+    setGenerationProgress(2);
+    setResults([]);
+    setProductSetResultImages([]);
+    setPreviewZoom(1);
+    setPreviewOffset({ x: 0, y: 0 });
+    previewOffsetRef.current = { x: 0, y: 0 };
+    setStatus("generating");
+  };
+
+  const resetDefaultRoutingGeneratingState = () => {
+    setStatus("idle");
+    setGenerationProgress(0);
+    setIsCommandComposerCompact(false);
+  };
+
   const handleCommandGenerate = async () => {
     if (cloneOutput === "video") {
       handleStartVideoPlan();
@@ -5872,7 +6040,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     }
     if (isDefaultCommandRouting) {
       if (!canPlanVideo) return;
+      if ((appUsage?.balanceCents ?? 0) <= 0) {
+        toast.error("积分不足，请充值后继续");
+        return;
+      }
       setIsDefaultIntentRouting(true);
+      showDefaultRoutingGeneratingState();
       try {
         const intent = await classifyDefaultCommerceIntent({
           prompt: requirement,
@@ -5882,14 +6055,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           platform,
         });
         if (intent.kind === "video") {
+          resetDefaultRoutingGeneratingState();
+          handleCloneOutputChange("video");
           handleStartVideoPlan();
           return;
         }
         if (!canGenerate) {
+          resetDefaultRoutingGeneratingState();
           toast.info("请先上传商品图");
           return;
         }
         handleGenerate(intent);
+      } catch (error) {
+        resetDefaultRoutingGeneratingState();
+        toast.error(error instanceof Error ? error.message : "智能识别失败，请重试");
       } finally {
         setIsDefaultIntentRouting(false);
       }
@@ -5948,36 +6127,41 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     });
   };
 
-  const addTemplateImageToComposer = async (card: CloneTemplateAsset) => {
-    if (productImages.length >= maxCloneProductImages) {
-      toast.info("模板图片已达上限");
-      return;
-    }
+  const addTemplateAssetsToComposer = (card: CloneTemplateAsset) => {
+    const sourceAssets = card.sourceAssets?.filter((asset) => asset.url.trim()) || [];
+    if (!sourceAssets.length) 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)
+    const stamp = Date.now();
+    const nextImages: CloneImageItem[] = sourceAssets.map((asset, index) => ({
+      id: `template-${card.id}-${stamp}-${index}`,
+      src: asset.url,
+      name: asset.name || `${card.title}-素材${index + 1}`,
+      ossKey: asset.ossKey,
+      mimeType: asset.mimeType,
+      format: getRemoteImageFormat(asset.mimeType || "", asset.url),
+    }));
+
+    let insertedImages: CloneImageItem[] = [];
+    setProductImages((current) => {
+      const userImages = current.filter((image) => !image.id.startsWith("template-"));
+      const remainingSlots = maxCloneProductImages - userImages.length;
+      if (remainingSlots <= 0) {
+        toast.info("模板素材已达上限");
+        return userImages;
+      }
+      insertedImages = nextImages.slice(0, remainingSlots);
+      return [...userImages, ...insertedImages];
+    });
+
+    insertedImages.forEach((image) => {
+      void readImageDimensions(image.src)
         .then(({ width, height }) => {
           setProductImages((current) =>
-            current.map((item) => (item.id === nextImage.id ? { ...item, width, height } : item)),
+            current.map((item) => (item.id === image.id ? { ...item, width, height } : item)),
           );
         })
         .catch(() => undefined);
-    } catch {
-      toast.error("模板图片导入失败");
-    }
+    });
   };
 
   const handleCloneTemplateCardClick = (card: CommerceScenarioTemplate) => {
@@ -5985,7 +6169,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     if (card.output !== cloneOutput) handleCloneOutputChange(card.output);
     setIsCloneTemplateStripVisible(true);
     setComposerMenu(null);
-    void addTemplateImageToComposer(card);
+    addTemplateAssetsToComposer(card);
     applyComposerPrompt(card.prompt);
   };
 
@@ -6536,11 +6720,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             </button>
           </div>
         </div>
-        {shouldShowScenarioScrollHint ? (
-          <span className="ecom-command-scenario-scroll-hint" aria-hidden="true">
-            {isCommerceScenarioMoreOpen ? "左右滑动查看全部场景" : "点击更多查看全部场景"}
-          </span>
-        ) : null}
         <div className="clone-ai-input-wrapper ecom-command-composer">
           {productImages.length ? (
             <div className="ecom-command-asset-popover" aria-label={`已上传素材，${productImages.length}/${maxCloneProductImages}张`}>
@@ -6730,13 +6909,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                   }}
                 >
                   <span className="ecom-command-template-card__media" aria-hidden="true">
-                    <img src={card.mediaUrl} alt="" loading="lazy" />
+                    {card.mediaType === "video" ? (
+                      <video src={card.mediaUrl} muted playsInline loop preload="metadata" />
+                    ) : (
+                      <img src={card.mediaUrl} alt="" loading="lazy" />
+                    )}
                   </span>
                   <span className="ecom-command-template-card__body">
                     <span className="ecom-command-template-card__badge">{card.badge}</span>
                     <strong>{card.title}</strong>
                     <em>{card.desc}</em>
                   </span>
+                  <span className="ecom-command-template-card__prompt" aria-hidden="true">
+                    {card.prompt}
+                  </span>
                 </button>
               ))}
             </section>
@@ -7254,6 +7440,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </aside>
 
       <section className="ecom-image-workbench-stage">
+        <header className="ecom-visual-workspace-head ecom-copywriting-preview-head">
+          <h1>图片修改</h1>
+          <p>上传图片后涂抹需要调整的区域，<span>AI</span> 将根据提示完成局部重绘。</p>
+        </header>
         {!imageWorkbenchImage ? (
           <div
             className={`ecom-watermark-dropzone${isImageWorkbenchDragging ? " is-dragging" : ""}`}
@@ -7512,6 +7702,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </aside>
 
       <section className="ecom-watermark-workspace">
+        <header className="ecom-visual-workspace-head ecom-copywriting-preview-head">
+          <h1>图片翻译</h1>
+          <p>上传含文字的图片并选择目标语种，<span>AI</span> 将识别文字并保持原图排版。</p>
+        </header>
         {!translateImage ? (
           <div
             className={`ecom-watermark-dropzone${isTranslateDragging ? " is-dragging" : ""}`}
@@ -8488,35 +8682,63 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         ? tryOnPreview
         : isCloneTool
           ? isWatermarkTool
-            ? watermarkPreview
+            ? (
+              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                {renderQuickPageSidebar("watermark")}
+                {watermarkPreview}
+              </div>
+            )
             : isTranslateTool
-              ? translatePreview
+              ? (
+                <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                  {renderQuickPageSidebar("translate")}
+                  {translatePreview}
+                </div>
+              )
               : isImageEditTool
-                ? imageWorkbenchPreview
+                ? (
+                  <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                    {renderQuickPageSidebar("image-edit")}
+                    {imageWorkbenchPreview}
+                  </div>
+                )
                 : isSmartCutoutTool
                   ? smartCutoutPreview
                   : isQuickDetailTool
                     ? (
                       <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                        {renderQuickPageSidebar("detail")}
                         {quickDetailPreview}
                       </div>
                     )
                     : isHotCloneTool
                       ? (
                         <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                          {renderQuickPageSidebar("hot")}
                           {hotClonePreview}
                         </div>
                       )
                       : isQuickSetTool
                         ? (
                           <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                            {renderQuickPageSidebar("quick-set")}
                             {quickSetGenPreview}
                           </div>
                         )
                         : isCopywritingTool
-                          ? copywritingPreview
+                          ? (
+                            <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                              {renderQuickPageSidebar("copywriting")}
+                              {copywritingPreview}
+                            </div>
+                          )
                           : isOneClickVideoTool
-                            ? oneClickVideoPreview
+                            ? (
+                              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                                {renderQuickPageSidebar("oneClickVideo")}
+                                {oneClickVideoPreview}
+                              </div>
+                            )
                             : clonePreview
           : placeholderPreview;
   const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0);

src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx

@@ -4,7 +4,8 @@ import {
   ThunderboltOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
-import { useMemo, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type RefObject } from "react";
+import { useMemo, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
+import { createPortal } from "react-dom";
 import EcommerceVideoWorkspace from "../EcommerceVideoWorkspace";
 
 interface CloneImageItem {
@@ -97,6 +98,7 @@ export default function EcommerceOneClickVideoPanel({
 }: EcommerceOneClickVideoPanelProps) {
   const [openSelect, setOpenSelect] = useState<"platform" | "ratio" | null>(null);
   const [planTrigger, setPlanTrigger] = useState(0);
+  const [hoverZoom, setHoverZoom] = useState<{ src: string; x: number; y: number; placement: "right" | "left" } | null>(null);
   const selectAnchorRef = useRef<HTMLDivElement>(null);
 
   const productImageDataUrls = useMemo(() => productImages.map((img) => img.src), [productImages]);
@@ -126,19 +128,40 @@ export default function EcommerceOneClickVideoPanel({
     setOpenSelect((current) => (current === key ? null : key));
   };
 
+  const handleThumbMouseEnter = (src: string, event: ReactMouseEvent<HTMLElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const previewWidth = 300;
+    const previewHeight = 190;
+    const gap = 12;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const canShowRight = rect.right + gap + previewWidth <= viewportWidth - gap;
+    const placement: "right" | "left" = canShowRight ? "right" : "left";
+    const x = placement === "right" ? rect.right + gap : Math.max(gap, rect.left - gap);
+    const y = Math.min(
+      Math.max(rect.top + rect.height / 2, previewHeight / 2 + gap),
+      Math.max(previewHeight / 2 + gap, viewportHeight - previewHeight / 2 - gap),
+    );
+    setHoverZoom({ src, x, y, placement });
+  };
+
   const renderThumbs = () => (
     <div className="ecom-quick-upload-thumbs" aria-label="已上传商品原图">
       {productImages.map((item) => (
-        <figure key={item.id} className="ecom-command-asset-thumb ecom-quick-upload-thumb">
+        <figure
+          key={item.id}
+          className="ecom-command-asset-thumb ecom-quick-upload-thumb"
+          onMouseEnter={(event) => handleThumbMouseEnter(item.src, event)}
+          onMouseLeave={() => setHoverZoom(null)}
+        >
           <img src={item.src} alt={item.name} />
-          <span className="ecom-command-asset-zoom" aria-hidden="true">
-            <img src={item.src} alt="" />
-          </span>
           <button
             type="button"
+            className="ecom-hot-material-delete"
             aria-label="删除图片"
             onClick={(event) => {
               event.stopPropagation();
+              setHoverZoom(null);
               removeProductImage(item.id);
             }}
           >
@@ -386,6 +409,17 @@ export default function EcommerceOneClickVideoPanel({
             </button>
           </div>
         </aside>
+        {hoverZoom && typeof document !== "undefined"
+          ? createPortal(
+              <div
+                className={`ecom-hot-material-zoom-portal is-${hoverZoom.placement}`}
+                style={{ left: hoverZoom.x, top: hoverZoom.y }}
+              >
+                <img src={hoverZoom.src} alt="" />
+              </div>,
+              document.body,
+            )
+          : null}
 
         <section className="ecom-quick-set-stage">
           <EcommerceVideoWorkspace

src/features/ecommerce/panels/WatermarkToolPage.tsx

@@ -155,6 +155,10 @@ export default function WatermarkToolPage({
       </aside>
 
       <section className="ecom-watermark-workspace">
+        <header className="ecom-visual-workspace-head ecom-copywriting-preview-head">
+          <h1>去除水印</h1>
+          <p>上传含水印或文字遮挡的图片，<span>AI</span> 将清理画面并保留商品细节。</p>
+        </header>
         {!image ? (
           <div
             className={`ecom-watermark-dropzone${isDragging ? " is-dragging" : ""}`}