Merge pull request 'feat: 完善电商记录详情页，支持触摸手势交互、对话式需求面板与画布节点拖拽' (#16) from feat/ecommerce-record-detail-polish into main

Reviewed-on: #16

src/features/ecommerce/EcommercePage.tsx

@@ -314,6 +314,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;
@@ -1494,6 +1509,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: "",
@@ -1535,6 +1558,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;
@@ -1644,8 +1775,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;
@@ -5102,6 +5268,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"
@@ -5242,19 +5412,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">
@@ -6666,6 +6843,25 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   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
@@ -6727,16 +6923,44 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               <div className="clone-ai-conversation-body">
                 <section className="clone-ai-chat-message clone-ai-chat-message--user">
                   <span>需求</span>
-                  <p>{requirement.trim() || "上传商品素材，描述你想生成的商品图、详情图、模特图或短视频。"}</p>
-                  {productImages.length ? (
+                  <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="已上传素材">
-                      {productImages.slice(0, 4).map((image) => (
+                      {historyConversationImages.slice(0, 4).map((image) => (
                         <img key={image.id} src={image.src} alt={image.name || "商品素材"} />
                       ))}
-                      {productImages.length > 4 ? <em>+{productImages.length - 4}</em> : null}
+                      {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>
@@ -6815,7 +7039,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             onClick={refreshEcommerceHistory}
             disabled={isHistoryRefreshing}
           >
-            ↻
+            <ReloadOutlined />
           </button>
         </div>
         <div className="ecom-command-history__heading">