Merge pull request 'feat: 优化记录详情对话面板布局与视觉层次' (#17 ) from feat/ecommerce-chat-polish into main

Reviewed-on: #17
Merge branch 'main' into feat/ecommerce-chat-polish
2026-06-15 10:24:35 +00:00 · 2026-06-15 10:24:30 +00:00 · 2026-06-15 18:23:36 +08:00 · 2026-06-15 08:38:41 +00:00 · 2026-06-15 16:20:55 +08:00 · 2026-06-15 05:41:17 +00:00
2 changed files with 3006 additions and 8 deletions
@@ -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;
@@ -1474,6 +1489,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);
@@ -1493,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: "",
@@ -1534,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;
@@ -1643,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;
@@ -4950,6 +5117,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>

@@ -5098,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"
@@ -5238,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">
@@ -6657,10 +6838,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" : ""}`}
+      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" : ""}`}
      data-tool={activeTool}
      aria-label={pageLabel}
    >
@@ -6698,6 +6903,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>
+                <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>
+                {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}
+              </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>
@@ -6732,7 +7039,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            onClick={refreshEcommerceHistory}
            disabled={isHistoryRefreshing}
          >
-            ↻
+            <ReloadOutlined />
          </button>
        </div>
        <div className="ecom-command-history__heading">
Author	SHA1	Message	Date
stringadmin	f929be30ed	Merge pull request 'feat: 优化记录详情对话面板布局与视觉层次' (#17 ) from feat/ecommerce-chat-polish into main Reviewed-on: #17	2026-06-15 10:24:35 +00:00
stringadmin	a2875738ce	Merge branch 'main' into feat/ecommerce-chat-polish	2026-06-15 10:24:30 +00:00
ludan	85adcdceef	feat: 优化记录详情对话面板布局与视觉层次本次修改聚焦于电商记录详情页的对话面板体验打磨：一、对话顺序优化（EcommercePage.tsx）： - 将"新需求"跟进消息从AI回复之前移至AI回复之后 - 调整后的对话时间线：用户历史需求 → AI回复 → 用户新需求，逻辑更符合真实对话流程二、对话面板视觉升级（ecommerce-standalone.css）： - 对话面板宽度采用CSS变量动态控制（408-440px），视觉更宽敞 - 消息气泡区分明确： · 用户消息：左侧缩进26-36px，蓝色调渐变背景，青色边框 · AI消息：右侧缩进26-36px，蓝调边框，中性背景 · 跟进消息：独特高亮样式，更强边框(0.24透明度)和投影 - 排版细节打磨： · 消息标签字号12px/权重820 · 正文13px/行高1.64 · 气泡内间距15px、圆角20px、投影加深 - 元信息标签(emo)精修：28px高度、圆角胶囊样式 - 素材缩略图：46x46px、圆角14px - 响应式适配：≤900px面板收窄至92vw，≤480px去除消息缩进变更文件： - src/features/ecommerce/EcommercePage.tsx (+20/-20) - src/styles/ecommerce-standalone.css (+121)	2026-06-15 18:23:36 +08:00
stringadmin	ab99e3bf2f	Merge pull request 'feat: 完善电商记录详情页，支持触摸手势交互、对话式需求面板与画布节点拖拽' (#16 ) from feat/ecommerce-record-detail-polish into main Reviewed-on: #16	2026-06-15 08:38:41 +00:00
ludan	e3b48e2614	feat: 完善电商记录详情页，支持触摸手势交互、对话式需求面板与画布节点拖拽本次修改全面打磨电商图片工作台的记录详情体验，主要包含以下变更：一、记录详情对话面板（EcommercePage.tsx）： - 将记录详情中的"需求"区域重构为聊天对话式布局： · 历史需求消息：展示原始需求文本、参数元信息（平台/语种/比例/设置）、已上传素材缩略图 · 新增跟进需求消息(is-followup)：若当前素材与历史记录不同，自动展示新上传素材及当前参数配置 · AI 回复消息保持原有状态展示 - 记录详情中素材上传数量上限从 7 张提升至 20 张(maxCloneProductImages) - 上传按钮重构：移至素材列表左侧，显示当前数量/上限，满额时禁用并提示"已满" 二、触摸与手势交互： - 新增 PreviewTouchGesture 完整手势系统： · 单指平移(pan)：支持触摸拖拽预览画布 · 双指缩放(pinch)：以双指中心为锚点进行缩放，范围 0.25x-2x · 自动排除交互元素（按钮/输入框/链接等）避免冲突 · 智能切换：单指/双指模式无缝切换 - 画布节点触摸拖拽(canvas node drag)： · 支持触摸拖拽移动生成结果节点 · 考虑当前缩放级别计算位移 · 与预览画布手势互不干扰三、记录详情页视觉升级（ecommerce-standalone.css）： - 整体背景采用径向渐变+线性渐变，营造专业 SaaS 质感 - 对话面板与历史面板统一采用毛玻璃卡片风格 - 聊天消息气泡：圆角 18px、柔和投影、用户消息左侧缩进 18px - 历史面板宽度固定 292px - CSS 自定义属性体系(record-detail-*)统一管理颜色和阴影 - 面板头部加高加粗标题，优化可读性四、其他细节优化： - 历史刷新按钮图标从文本符号改为 ReloadOutlined 组件 - 素材缩略图移除 hover 放大镜效果(.ecom-command-asset-zoom) - 刷新按钮禁用样式完善变更文件： - src/features/ecommerce/EcommercePage.tsx (+246/-11) - src/styles/ecommerce-standalone.css (+1369)	2026-06-15 16:20:55 +08:00
stringadmin	5b316a2399	Merge pull request 'feat: add generation record detail workspace with AI conversation panel and canvas reset' (#14 ) from feat/ecommerce-record-detail-conversation-panel into main Reviewed-on: #14	2026-06-15 05:41:17 +00:00
stringadmin	3f1954b38d	Merge branch 'main' into feat/ecommerce-record-detail-conversation-panel	2026-06-15 05:41:12 +00:00
ludan	96d335db8a	feat: add generation record detail workspace with AI conversation panel and canvas reset - EcommercePage.tsx: Add isCloneConversationCollapsed state for toggling conversation sidebar; introduce isMainCloneWorkspace / isRecordDetailWorkspace derived flags to scope record-detail features to main clone tool only; compute currentResultCount, activeHistoryRecord, and currentResultThumbs for display; add canvas reset button (zoom=1, offset=0) in preview toolbar when viewing a history record; build AI conversation panel (clone-ai-conversation-panel) as left sidebar with: - Header showing record title, model/platform/language metadata, and collapse button - User message bubble with requirement text and uploaded asset thumbnails (up to 4 + overflow count) - Assistant message bubble with status-aware response text (done/generating/failed/idle), EcommerceProgressBar during generation, and clickable result thumbnails that open product set preview - Collapse/expand toggle button with MenuFoldOutlined / MenuUnfoldOutlined icons - ecommerce-standalone.css (+1204 lines): Define record detail workspace layout (CSS grid: 352px chat column + fluid canvas); grid-pattern background with radial gradient accent; conversation panel styling with chat bubble cards, asset thumbnail grids, result thumbnail buttons, scrollable body; collapsed state (grid-template-columns: 0 1fr); toggle button positioning; responsive breakpoints for tablets and mobile with adjusted chat width and stacked layout	2026-06-15 13:40:14 +08:00