merge main and adjust clone mode tabs

src/features/ecommerce/EcommercePage.tsx

@@ -315,6 +315,21 @@ interface CanvasNode {
   y: number;
 }
 
+interface PreviewTouchPoint {
+  id: number;
+  x: number;
+  y: number;
+}
+
+interface PreviewTouchGesture {
+  mode: "none" | "pan" | "pinch";
+  points: PreviewTouchPoint[];
+  startOffset: { x: number; y: number };
+  startZoom: number;
+  startDistance: number;
+  startCenter: { x: number; y: number };
+}
+
 interface CloneSavedSetting {
   id: string;
   name: string;
@@ -1007,7 +1022,7 @@ const defaultCloneSetCounts: Record<CloneSetCountKey, number> = {
 };
 const minCloneSetTotal = 1;
 const maxCloneSetTotal = 16;
-const maxCloneProductImages = 7;
+const maxCloneProductImages = 20;
 const maxCloneReferenceImages = 20;
 const cloneVideoDurationMin = 5;
 const cloneVideoDurationMax = 45;
@@ -1476,6 +1491,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [cloneVideoDuration, setCloneVideoDuration] = useState(10);
   const [cloneVideoSmart, setCloneVideoSmart] = useState(true);
   const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
+  const [isCloneConversationCollapsed, setIsCloneConversationCollapsed] = useState(false);
   const [previewZoom, setPreviewZoom] = useState(1);
   const quickSetSelectTimerRef = useRef<number | null>(null);
   const openQuickSetSelectRef = useRef<CloneBasicSelectKey | null>(null);
@@ -1495,6 +1511,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     offsetX: 0,
     offsetY: 0,
   });
+  const previewTouchGestureRef = useRef<PreviewTouchGesture>({
+    mode: "none",
+    points: [],
+    startOffset: { x: 0, y: 0 },
+    startZoom: 1,
+    startDistance: 0,
+    startCenter: { x: 0, y: 0 },
+  });
   const nodeDragRef = useRef<{ active: boolean; nodeId: string; startX: number; startY: number; originX: number; originY: number }>({
     active: false,
     nodeId: "",
@@ -1536,6 +1560,114 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     [previewOffset.x, previewOffset.y, previewZoom],
   );
 
+  const updatePreviewTransform = (nextZoom: number, nextOffset: { x: number; y: number }) => {
+    previewZoomRef.current = nextZoom;
+    previewOffsetRef.current = nextOffset;
+    setPreviewZoom(nextZoom);
+    setPreviewOffset(nextOffset);
+  };
+
+  const getPreviewGestureDistance = (points: PreviewTouchPoint[]) => {
+    if (points.length < 2) return 0;
+    return Math.hypot(points[0]!.x - points[1]!.x, points[0]!.y - points[1]!.y);
+  };
+
+  const getPreviewGestureCenter = (points: PreviewTouchPoint[]) => {
+    if (points.length < 2) return points[0] ? { x: points[0].x, y: points[0].y } : { x: 0, y: 0 };
+    return {
+      x: (points[0]!.x + points[1]!.x) / 2,
+      y: (points[0]!.y + points[1]!.y) / 2,
+    };
+  };
+
+  const isPreviewTouchInteractiveTarget = (target: HTMLElement | null) =>
+    Boolean(target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header, .clone-ai-source-corner-action, input, textarea, select, a, button"));
+
+  const startPreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
+    if (event.pointerType === "mouse" || isPreviewTouchInteractiveTarget(event.target as HTMLElement | null)) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const points = [
+      ...previewTouchGestureRef.current.points.filter((point) => point.id !== event.pointerId),
+      { id: event.pointerId, x: event.clientX, y: event.clientY },
+    ].slice(-2);
+    const mode = points.length >= 2 ? "pinch" : "pan";
+    previewTouchGestureRef.current = {
+      mode,
+      points,
+      startOffset: previewOffsetRef.current,
+      startZoom: previewZoomRef.current,
+      startDistance: getPreviewGestureDistance(points),
+      startCenter: getPreviewGestureCenter(points),
+    };
+    event.currentTarget.classList.add("is-touch-panning");
+  };
+
+  const movePreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
+    const gesture = previewTouchGestureRef.current;
+    if (gesture.mode === "none" || event.pointerType === "mouse") return;
+    event.preventDefault();
+    const points = gesture.points.map((point) => point.id === event.pointerId ? { ...point, x: event.clientX, y: event.clientY } : point);
+    if (!points.some((point) => point.id === event.pointerId)) return;
+
+    if (gesture.mode === "pinch" && points.length >= 2 && gesture.startDistance > 0) {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const center = getPreviewGestureCenter(points);
+      const zoomRatio = getPreviewGestureDistance(points) / gesture.startDistance;
+      const nextZoom = Math.min(2, Math.max(0.25, gesture.startZoom * zoomRatio));
+      const startCenterX = gesture.startCenter.x - rect.left;
+      const startCenterY = gesture.startCenter.y - rect.top;
+      const currentCenterX = center.x - rect.left;
+      const currentCenterY = center.y - rect.top;
+      const contentX = (startCenterX - gesture.startOffset.x) / gesture.startZoom;
+      const contentY = (startCenterY - gesture.startOffset.y) / gesture.startZoom;
+      updatePreviewTransform(nextZoom, {
+        x: currentCenterX - contentX * nextZoom,
+        y: currentCenterY - contentY * nextZoom,
+      });
+    } else {
+      const point = points[0]!;
+      const startPoint = gesture.points[0]!;
+      updatePreviewTransform(gesture.startZoom, {
+        x: gesture.startOffset.x + point.x - startPoint.x,
+        y: gesture.startOffset.y + point.y - startPoint.y,
+      });
+    }
+
+    previewTouchGestureRef.current = { ...gesture, points };
+  };
+
+  const stopPreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
+    const gesture = previewTouchGestureRef.current;
+    if (event.pointerType === "mouse" || gesture.mode === "none") return;
+    const points = gesture.points.filter((point) => point.id !== event.pointerId);
+    if (points.length) {
+      previewTouchGestureRef.current = {
+        mode: "pan",
+        points,
+        startOffset: previewOffsetRef.current,
+        startZoom: previewZoomRef.current,
+        startDistance: 0,
+        startCenter: getPreviewGestureCenter(points),
+      };
+    } else {
+      previewTouchGestureRef.current = {
+        mode: "none",
+        points: [],
+        startOffset: previewOffsetRef.current,
+        startZoom: previewZoomRef.current,
+        startDistance: 0,
+        startCenter: { x: 0, y: 0 },
+      };
+      event.currentTarget.classList.remove("is-touch-panning");
+    }
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+      // Pointer capture can already be released by the browser after cancel.
+    }
+  };
+
   useEffect(() => {
     const container = previewSurfaceRef.current;
     if (!container) return undefined;
@@ -1645,8 +1777,43 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onAuxClick: (event: ReactMouseEvent<HTMLElement>) => {
       if (event.button === 1) event.preventDefault();
     },
+    onPointerDown: startPreviewTouchGesture,
+    onPointerMove: movePreviewTouchGesture,
+    onPointerUp: stopPreviewTouchGesture,
+    onPointerCancel: stopPreviewTouchGesture,
   });
 
+  const startCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, node: CanvasNode) => {
+    if (event.button !== 0 || event.pointerType === "mouse") return;
+    if ((event.target as HTMLElement | null)?.closest("button, a, input, textarea, select")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    nodeDragRef.current = { active: true, nodeId: node.id, startX: event.clientX, startY: event.clientY, originX: node.x, originY: node.y };
+  };
+
+  const moveCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, nodeId: string) => {
+    const drag = nodeDragRef.current;
+    if (!drag.active || drag.nodeId !== nodeId || event.pointerType === "mouse") return;
+    event.preventDefault();
+    event.stopPropagation();
+    const zoom = previewZoomRef.current;
+    const dx = (event.clientX - drag.startX) / zoom;
+    const dy = (event.clientY - drag.startY) / zoom;
+    setCanvasNodes((prev) => prev.map((node) => node.id === nodeId ? { ...node, x: drag.originX + dx, y: drag.originY + dy } : node));
+  };
+
+  const stopCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, nodeId: string) => {
+    if (nodeDragRef.current.nodeId !== nodeId || event.pointerType === "mouse") return;
+    nodeDragRef.current = { ...nodeDragRef.current, active: false };
+    event.stopPropagation();
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+      // Pointer capture can already be released by the browser after cancel.
+    }
+  };
+
   const handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
     if (!event.currentTarget) return;
     const container = event.currentTarget as HTMLElement;
@@ -5056,6 +5223,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           <button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">-</button>
           <span>{Math.round(previewZoom * 100)}%</span>
           <button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
+          {activeHistoryRecordId ? (
+            <button type="button" onClick={() => { setPreviewZoom(1); setPreviewOffset({ x: 0, y: 0 }); }} aria-label="重置画布">重置</button>
+          ) : null}
         </div>
       </header>
 
@@ -5204,6 +5374,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                   data-mode={node.mode}
                   data-node-id={node.id}
                   style={{ transform: `translate(${node.x}px, ${node.y}px)` }}
+                  onPointerDown={(event) => startCanvasNodeDrag(event, node)}
+                  onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)}
+                  onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)}
+                  onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)}
                 >
                   <div
                     className="clone-ai-node-drag-handle"
@@ -5344,19 +5518,26 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         </div>
         <div className="clone-ai-input-wrapper ecom-command-composer">
           {productImages.length ? (
-            <div className="ecom-command-asset-popover" aria-label="已上传素材">
+            <div className="ecom-command-asset-popover" aria-label={`已上传素材，${productImages.length}/${maxCloneProductImages}张`}>
+              <button
+                type="button"
+                className="ecom-command-asset-add"
+                onClick={() => productImages.length < maxCloneProductImages && productInputRef.current?.click()}
+                disabled={productImages.length >= maxCloneProductImages}
+                aria-label={productImages.length >= maxCloneProductImages ? `最多上传${maxCloneProductImages}张素材` : "继续上传素材"}
+                title={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : `继续上传素材 ${productImages.length}/${maxCloneProductImages}`}
+              >
+                <span aria-hidden="true">+</span>
+                <small>{productImages.length >= maxCloneProductImages ? "已满" : "上传"}</small>
+              </button>
               {productImages.map((image) => (
                 <figure key={image.id} className="ecom-command-asset-thumb">
                   <img src={image.src} alt={image.name || "上传图片"} />
-                  <span className="ecom-command-asset-zoom" aria-hidden="true">
-                    <img src={image.src} alt="" />
-                  </span>
                   <button type="button" onClick={() => removeProductImage(image.id)} aria-label="删除图片">
                     <DeleteOutlined />
                   </button>
                 </figure>
               ))}
-              <button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
             </div>
           ) : null}
           <div className="ecom-command-option-row ecom-command-option-row--settings">
@@ -7020,10 +7201,34 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                       )
                         : clonePreview
           : placeholderPreview;
+  const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool;
+  const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId);
+  const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0);
+  const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
+  const currentResultThumbs = canvasNodes.flatMap((node) => node.results).slice(0, 6);
+  const activeHistoryImageIds = new Set((activeHistoryRecord?.productImages ?? []).map((image) => image.id));
+  const historyConversationImages = activeHistoryRecord?.productImages?.length ? activeHistoryRecord.productImages : productImages;
+  const newConversationImages = activeHistoryRecord ? productImages.filter((image) => !activeHistoryImageIds.has(image.id)) : [];
+  const historyRequirementText = activeHistoryRecord?.requirement?.trim() || requirement.trim();
+  const newRequirementText = requirement.trim() && requirement.trim() !== historyRequirementText
+    ? requirement.trim()
+    : "继续上传素材，准备下一轮生成。";
+  const historyRequirementMeta = [
+    { label: "平台", value: activeHistoryRecord?.platform || platform },
+    { label: "语种", value: activeHistoryRecord?.language || language },
+    { label: "比例", value: formatRatioDisplayValue(activeHistoryRecord?.ratio || ratio) },
+    { label: "设置", value: composerSettingLabel },
+  ];
+  const currentRequirementMeta = [
+    { label: "平台", value: platform },
+    { label: "语种", value: language },
+    { label: "比例", value: formatRatioDisplayValue(ratio) },
+    { label: "设置", value: composerSettingLabel },
+  ];
 
   return (
     <section
-      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isCloneTool && activeHistoryRecordId ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotCloneTool ? " is-hot-clone-page" : ""}`}
+      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isRecordDetailWorkspace && isCloneConversationCollapsed ? " is-conversation-collapsed" : ""}${isRecordDetailWorkspace ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotCloneTool ? " is-hot-clone-page" : ""}`}
       data-tool={activeTool}
       aria-label={pageLabel}
     >
@@ -7061,6 +7266,108 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           </button>
         ) : null}
 
+        {isRecordDetailWorkspace ? (
+          <>
+            <aside className="clone-ai-conversation-panel" aria-label="AI 对话">
+              <header className="clone-ai-conversation-head">
+                <div>
+                  <strong>{activeHistoryRecord?.title || "生成详情"}</strong>
+                  <span>{selectedCloneOutput.label} · {platform} · {language}</span>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setIsCloneConversationCollapsed(true)}
+                  aria-label="收起对话"
+                  title="收起对话"
+                >
+                  <MenuFoldOutlined />
+                </button>
+              </header>
+              <div className="clone-ai-conversation-body">
+                <section className="clone-ai-chat-message clone-ai-chat-message--user">
+                  <span>需求</span>
+                  <p>{historyRequirementText || "上传商品素材，描述你想生成的商品图、详情图、模特图或短视频。"}</p>
+                  <div className="clone-ai-chat-meta" aria-label="需求参数">
+                    {historyRequirementMeta.map((item) => (
+                      <em key={item.label}>
+                        <span>{item.label}</span>
+                        <strong>{item.value}</strong>
+                      </em>
+                    ))}
+                  </div>
+                  {historyConversationImages.length ? (
+                    <div className="clone-ai-chat-assets" aria-label="已上传素材">
+                      {historyConversationImages.slice(0, 4).map((image) => (
+                        <img key={image.id} src={image.src} alt={image.name || "商品素材"} />
+                      ))}
+                      {historyConversationImages.length > 4 ? <em>+{historyConversationImages.length - 4}</em> : null}
+                    </div>
+                  ) : null}
+                </section>
+                {newConversationImages.length ? (
+                  <section className="clone-ai-chat-message clone-ai-chat-message--user clone-ai-chat-message--followup">
+                    <span>新需求</span>
+                    <p>{newRequirementText}</p>
+                    <div className="clone-ai-chat-meta" aria-label="新需求参数">
+                      {currentRequirementMeta.map((item) => (
+                        <em key={item.label}>
+                          <span>{item.label}</span>
+                          <strong>{item.value}</strong>
+                        </em>
+                      ))}
+                    </div>
+                    <div className="clone-ai-chat-assets" aria-label="新增素材">
+                      {newConversationImages.slice(0, 4).map((image) => (
+                        <img key={image.id} src={image.src} alt={image.name || "新增商品素材"} />
+                      ))}
+                      {newConversationImages.length > 4 ? <em>+{newConversationImages.length - 4}</em> : null}
+                    </div>
+                  </section>
+                ) : null}
+                <section className={`clone-ai-chat-message clone-ai-chat-message--assistant is-${status}`}>
+                  <span>电商图设计师</span>
+                  <p>
+                    {status === "done" || currentResultCount > 0
+                      ? `已生成 ${currentResultCount || results.length || productSetResultImages.filter(Boolean).length} 张结果，可在画布中拖拽、缩放和预览。`
+                      : status === "generating"
+                        ? `正在为 ${platform} / ${market} 生成${selectedCloneOutput.label}，结果会自动出现在中间画布。`
+                        : status === "failed"
+                          ? "生成失败，请检查网络或参数后重试。"
+                          : "我会根据商品图、平台规则和提示词整理生成任务。"}
+                  </p>
+                  {status === "generating" ? (
+                    <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
+                  ) : null}
+                  {currentResultThumbs.length ? (
+                    <div className="clone-ai-chat-results" aria-label="生成结果缩略图">
+                      {currentResultThumbs.map((item) => (
+                        <button
+                          key={item.id}
+                          type="button"
+                          onClick={() => openProductSetPreview(item)}
+                          aria-label={`预览${item.label}`}
+                        >
+                          <img src={item.src} alt={item.label} />
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                </section>
+              </div>
+            </aside>
+            <button
+              type="button"
+              className="clone-ai-conversation-toggle"
+              onClick={() => setIsCloneConversationCollapsed((current) => !current)}
+              aria-label={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
+              title={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
+              aria-expanded={!isCloneConversationCollapsed}
+            >
+              {isCloneConversationCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            </button>
+          </>
+        ) : null}
+
         {activePreview}
 
       </div>
@@ -7095,7 +7402,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             onClick={refreshEcommerceHistory}
             disabled={isHistoryRefreshing}
           >
-            ↻
+            <ReloadOutlined />
           </button>
         </div>
         <div className="ecom-command-history__heading">

src/styles/pages/ecommerce.css

@@ -2950,6 +2950,15 @@
   min-width: 0;
 }
 
+.product-clone-page[data-tool="clone"] .clone-ai-result-stack > .clone-ai-node-label {
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  z-index: 5;
+  transform: translate(-50%, -100%);
+  white-space: nowrap;
+}
+
 .product-clone-page[data-tool="clone"] .clone-ai-source-corner-action {
   position: absolute;
   top: -6px;