feat: ecommerce quick tool UI responsive polish

Merge pull request 'feat: 记录详情页Canvas按轮次分组展示，对话面板UI重构与视觉升级' (#33 ) from feat/ecommerce-record-detail-canvas-groups into main
Reviewed-on: #33
2026-06-18 18:35:48 +08:00 · 2026-06-18 10:31:57 +00:00 · 2026-06-18 18:31:10 +08:00 · 2026-06-18 18:28:57 +08:00 · 2026-06-18 08:33:06 +00:00
3 changed files with 2886 additions and 146 deletions
@@ -329,6 +329,20 @@ interface CanvasNode {
  y: number;
 }

+interface RecordCanvasGroup {
+  id: string;
+  mode: string;
+  outputLabel: string;
+  settingLabel: string;
+  sourceImages: CloneImageItem[];
+  results: CloneResult[];
+  createdAt: number;
+  turnIndex: number;
+  status: EcommerceHistoryStatus;
+  x: number;
+  y: number;
+}
+
 interface PreviewTouchPoint {
  id: number;
  x: number;
@@ -1847,9 +1861,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    { key: "translate", label: "图片翻译", icon: <TranslationOutlined /> },
  ];

-  const renderQuickPageSidebar = (activeKey: NonNullable<typeof activeQuickTool>) => (
+  const commerceQuickPageSidebarItems = quickPageSidebarItems.filter((item) =>
+    ["quick-set", "detail", "hot", "oneClickVideo"].includes(item.key),
+  );
+  const visualQuickPageSidebarItems = quickPageSidebarItems.filter((item) =>
+    ["image-edit", "watermark", "copywriting", "translate"].includes(item.key),
+  );
+
+  const renderQuickPageSidebar = (
+    activeKey: NonNullable<typeof activeQuickTool>,
+    group: "commerce" | "visual" = "commerce",
+  ) => (
    <nav className="ecom-quick-page-sidebar" aria-label="快捷工具切换">
-      {quickPageSidebarItems.map((item) => (
+      {(group === "visual" ? visualQuickPageSidebarItems : commerceQuickPageSidebarItems).map((item) => (
        <button
          key={item.key}
          type="button"
@@ -4843,6 +4867,65 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    isOneClickVideoTool ||
    isVideoWorkspaceVisible ||
    Boolean(activeHistoryRecordId);
+  const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool;
+  const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId);
+  const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
+  const activeConversationTurns = activeHistoryRecord
+    ? activeHistoryRecord.turns?.length
+      ? activeHistoryRecord.turns
+      : [buildHistoryTurnFromRecord(activeHistoryRecord)]
+    : [];
+  const activeRecallTurn = activeConversationTurns[activeConversationTurns.length - 1];
+  const commandRecallPrompt =
+    requirement.trim() ||
+    activeRecallTurn?.requirement?.trim() ||
+    activeHistoryRecord?.requirement?.trim() ||
+    "展开完整对话，继续补充生成需求。";
+  const commandRecallAsset = productImages[0] || activeRecallTurn?.productImages?.[0] || activeHistoryRecord?.productImages?.[0];
+  const commandRecallStatus =
+    status === "generating"
+      ? "生成中"
+      : activeRecallTurn?.status === "failed" || status === "failed"
+        ? "可恢复"
+        : "继续生成";
+  const hasGeneratedCloneWork = status === "done" || canvasNodes.length > 0;
+  const shouldUseCompactComposer = isCommandComposerCompact && hasGeneratedCloneWork && !(isRecordDetailWorkspace && !isCloneConversationCollapsed);
+  const shouldShowScenarioScrollHint = !isRecordDetailWorkspace;
+  const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => {
+    if (turn.settingLabel) return turn.settingLabel;
+    if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) {
+      return `单图 ${turn.results.length}张`;
+    }
+    if (turn.output === "set") {
+      const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0);
+      return `套图 ${total || 1}张`;
+    }
+    if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`;
+    if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`;
+    return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
+  };
+  const recordCanvasGroups: RecordCanvasGroup[] = isRecordDetailWorkspace
+    ? activeConversationTurns.reduce<RecordCanvasGroup[]>((groups, turn, index) => {
+        const turnResults = getTurnResults(turn);
+        if (!turnResults.length && turn.status !== "generating") return groups;
+        const canvasNode = canvasNodes.find((node) => node.id === turn.id);
+        const outputLabel = turn.modeLabel || cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
+        groups.push({
+          id: turn.id,
+          mode: turn.output,
+          outputLabel,
+          settingLabel: getHistoryTurnSettingLabel(turn),
+          sourceImages: turn.productImages,
+          results: turnResults,
+          createdAt: turn.createdAt,
+          turnIndex: index + 1,
+          status: turn.status,
+          x: canvasNode?.x ?? groups.length * 420,
+          y: canvasNode?.y ?? (groups.length % 2 === 0 ? 0 : 160),
+        });
+        return groups;
+      }, [])
+    : [];

  useEffect(() => {
    onWorkspaceChromeChange?.({ isToolPage: isWorkspaceToolPage });
@@ -6293,8 +6376,125 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        )
      ) : (
        <>
-          {status === "done" || canvasNodes.length > 0 ? (
+          {status === "done" || canvasNodes.length > 0 || (isRecordDetailWorkspace && recordCanvasGroups.length > 0) ? (
            <div className="clone-ai-preview-zoom-wrap" style={previewTransformStyle}>
+              {isRecordDetailWorkspace ? (
+                <section className="clone-ai-turn-groups" aria-label="按轮次生成结果">
+                  {recordCanvasGroups.map((group) => {
+                    const primarySource = group.sourceImages[0];
+                    const dragNode: CanvasNode = {
+                      id: group.id,
+                      mode: group.mode,
+                      sourceImage: primarySource?.src,
+                      results: group.results,
+                      createdAt: group.createdAt,
+                      x: group.x,
+                      y: group.y,
+                    };
+                    return (
+                      <article
+                        key={group.id}
+                        className={`clone-ai-canvas-node clone-ai-turn-group is-${group.status}`}
+                        data-mode={group.mode}
+                        data-turn-id={group.id}
+                        data-node-id={group.id}
+                        style={{ transform: `translate(${group.x}px, ${group.y}px)` }}
+                        onPointerDown={(event) => startCanvasNodeDrag(event, dragNode)}
+                        onPointerMove={(event) => moveCanvasNodeDrag(event, group.id)}
+                        onPointerUp={(event) => stopCanvasNodeDrag(event, group.id)}
+                        onPointerCancel={(event) => stopCanvasNodeDrag(event, group.id)}
+                      >
+                        <div
+                          className="clone-ai-node-drag-handle"
+                          onPointerDown={(e) => {
+                            if (e.button !== 0) return;
+                            e.stopPropagation();
+                            e.currentTarget.setPointerCapture(e.pointerId);
+                            nodeDragRef.current = { active: true, nodeId: group.id, startX: e.clientX, startY: e.clientY, originX: group.x, originY: group.y };
+                          }}
+                          onPointerMove={(e) => {
+                            const drag = nodeDragRef.current;
+                            if (!drag.active || drag.nodeId !== group.id) return;
+                            const zoom = previewZoomRef.current;
+                            const dx = (e.clientX - drag.startX) / zoom;
+                            const dy = (e.clientY - drag.startY) / zoom;
+                            setCanvasNodes((prev) => prev.map((n) => n.id === group.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
+                          }}
+                          onPointerUp={(e) => {
+                            if (nodeDragRef.current.nodeId === group.id) {
+                              nodeDragRef.current = { ...nodeDragRef.current, active: false };
+                              e.currentTarget.releasePointerCapture(e.pointerId);
+                            }
+                          }}
+                        />
+                        <div className={`clone-ai-turn-group__body${primarySource?.src ? "" : " is-without-source"}`}>
+                          {primarySource?.src ? (
+                            <>
+                              <div className="clone-ai-source-stack">
+                                <button
+                                  type="button"
+                                  className="clone-ai-source-corner-action"
+                                  onClick={() => openProductSetPreview({ src: primarySource.src, label: "原图素材" })}
+                                >
+                                  原图素材
+                                </button>
+                                <button
+                                  type="button"
+                                  className="clone-ai-main-result"
+                                  aria-label="预览原图素材"
+                                  onClick={() => openProductSetPreview({ src: primarySource.src, label: "原图素材" })}
+                                >
+                                  <img
+                                    src={primarySource.src}
+                                    alt={primarySource.name || "原图素材"}
+                                    onError={(event) => {
+                                      event.currentTarget.style.display = "none";
+                                      event.currentTarget.parentElement?.classList.add("is-missing-source");
+                                    }}
+                                  />
+                                  <span className="clone-ai-source-missing">素材不可用</span>
+                                </button>
+                              </div>
+                              <div className="clone-ai-flow-arrow" aria-hidden="true" />
+                            </>
+                          ) : null}
+                          <div className="clone-ai-result-stack">
+                            <span className="clone-ai-node-label">{group.outputLabel}</span>
+                            <div className="clone-ai-result-grid result-reveal">
+                              {group.results.map((card) => (
+                                <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: group.id, removable: true })}>
+                                  <img src={card.src} alt={card.label} />
+                                </button>
+                              ))}
+                              {group.status === "generating" && !group.results.length ? (
+                                <div className="clone-ai-turn-group__pending" aria-live="polite">
+                                  <LoadingOutlined />
+                                  <span>正在生成{group.outputLabel}...</span>
+                                </div>
+                              ) : null}
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                    );
+                  })}
+                  {status === "generating" && !recordCanvasGroups.some((group) => group.status === "generating") ? (
+                    <article className="clone-ai-turn-group is-generating">
+                      <header className="clone-ai-turn-group__head">
+                        <div>
+                          <span>继续生成</span>
+                          <strong>{selectedCloneOutput.label}</strong>
+                        </div>
+                        <small>AI 正在整理新一轮结果</small>
+                      </header>
+                      <div className="clone-ai-turn-group__pending" aria-live="polite">
+                        <LoadingOutlined />
+                        <span>正在生成{selectedCloneOutput.label}...</span>
+                      </div>
+                    </article>
+                  ) : null}
+                </section>
+              ) : (
                <section className="clone-ai-canvas-nodes" aria-label="生成结果">
                  {canvasNodes.map((node) => (
                    <article
@@ -6380,6 +6580,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                    </article>
                  ) : null}
                </section>
+              )}
            </div>
          ) : status === "idle" || status === "ready" ? null : (
            <section className="clone-ai-empty-state" aria-live="polite">
@@ -6405,13 +6606,71 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {

      <section
        ref={commandComposerWrapRef}
-        className={`clone-ai-bottom-input ecom-command-composer-wrap${status === "done" || canvasNodes.length > 0 ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && (status === "done" || canvasNodes.length > 0) ? " is-compact" : ""}`}
-        aria-label="生成指令"
+        className={`clone-ai-bottom-input ecom-command-composer-wrap${hasGeneratedCloneWork ? " has-generated" : " is-before-generate"}${shouldUseCompactComposer ? " is-compact" : ""}${isRecordDetailWorkspace && isCloneConversationCollapsed ? " is-recall-entry" : ""}`}
+        aria-label={isRecordDetailWorkspace && isCloneConversationCollapsed ? "展开完整生成指令" : "生成指令"}
+        role={isRecordDetailWorkspace && isCloneConversationCollapsed ? "button" : undefined}
+        tabIndex={isRecordDetailWorkspace && isCloneConversationCollapsed ? 0 : undefined}
+        onClickCapture={(event) => {
+          if (isRecordDetailWorkspace && isCloneConversationCollapsed) {
+            if ((event.target as HTMLElement).closest(".ecom-command-recall__home")) return;
+            event.preventDefault();
+            event.stopPropagation();
+            setIsCloneConversationCollapsed(false);
+            window.setTimeout(() => requirementTextareaRef.current?.focus(), 180);
+          }
+        }}
        onClick={() => {
+          if (isRecordDetailWorkspace && isCloneConversationCollapsed) {
+            setIsCloneConversationCollapsed(false);
+            window.setTimeout(() => requirementTextareaRef.current?.focus(), 180);
+            return;
+          }
          if (isCommandComposerCompact) setIsCommandComposerCompact(false);
        }}
+        onKeyDown={(event) => {
+          if (!isRecordDetailWorkspace || !isCloneConversationCollapsed) return;
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          setIsCloneConversationCollapsed(false);
+          window.setTimeout(() => requirementTextareaRef.current?.focus(), 180);
+        }}
      >
-        <h1 className={`ecom-command-title${status === "done" || canvasNodes.length > 0 ? " is-after-generate" : ""}`}>
+        {isRecordDetailWorkspace && isCloneConversationCollapsed ? (
+          <div className="ecom-command-recall">
+            <span className="ecom-command-recall__media" aria-hidden="true">
+              {commandRecallAsset ? (
+                <img src={commandRecallAsset.src} alt="" />
+              ) : (
+                <PaperClipOutlined />
+              )}
+            </span>
+            <span className="ecom-command-recall__content">
+              <span className="ecom-command-recall__eyebrow">
+                <em>{commandRecallStatus}</em>
+              </span>
+              <span className="ecom-command-recall__text">{commandRecallPrompt}</span>
+            </span>
+            <button
+              type="button"
+              className="ecom-command-recall__home"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleNewEcommerceConversation();
+              }}
+              aria-label="返回首页"
+              title="返回首页"
+            >
+              <AppstoreOutlined />
+              <span>首页</span>
+            </button>
+            <span className="ecom-command-recall__action" aria-hidden="true">
+              <span>继续</span>
+              <MenuUnfoldOutlined />
+            </span>
+          </div>
+        ) : null}
+        <h1 className={`ecom-command-title${hasGeneratedCloneWork ? " is-after-generate" : ""}`}>
          {typewriterText}
          <span className="typewriter-cursor" aria-hidden="true">|</span>
        </h1>
@@ -7586,7 +7845,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            <div
              role="button"
              tabIndex={0}
-              className={`ecom-quick-set-upload${detailProductImages.length ? " has-images" : ""}`}
+              className={`ecom-quick-set-upload ecom-quick-hot-material${detailProductImages.length ? " has-images" : ""}`}
              onClick={() => detailInputRef.current?.click()}
              onKeyDown={(event) => openQuickUploadWithKeyboard(event, detailInputRef)}
              onDragOver={(event) => event.preventDefault()}
@@ -7596,7 +7855,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
              <span>拖拽或点击上传</span>
              <em>同一产品，最多 3 张</em>
              <b>+ 上传图片</b>
-              {detailProductImages.length ? renderQuickUploadThumbs(detailProductImages, removeDetailImage) : null}
+              {detailProductImages.length ? (
+                <>
+                  {renderHotMaterialThumbs(detailProductImages, removeDetailImage)}
+                  {detailProductImages.length < 3 ? (
+                    <button
+                      type="button"
+                      className="ecom-quick-hot-add-btn"
+                      aria-label="Add more detail images"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        detailInputRef.current?.click();
+                      }}
+                    >
+                      <PlusOutlined />
+                    </button>
+                  ) : null}
+                </>
+              ) : null}
            </div>
            <input
              ref={detailInputRef}
@@ -7682,6 +7958,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            <button type="button" className="ecom-quick-set-primary ecom-quick-set-primary--cancel" onClick={handleCancelGenerate}>取消生成</button>
          ) : null}
        </aside>
+        {hotMaterialHoverZoom && typeof document !== "undefined"
+          ? createPortal(
+              <div
+                className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
+                style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
+              >
+                <img src={hotMaterialHoverZoom.src} alt="" />
+              </div>,
+              document.body,
+            )
+          : null}
        <section className="ecom-quick-set-stage">
          <header className="ecom-quick-set-preview-head">
            <h1>预览</h1>
@@ -8050,7 +8337,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsProductUploadDragging(false); }}
                onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsProductUploadDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
              >
-                {renderQuickUploadThumbs(productImages, removeProductImage)}
+                {renderHotMaterialThumbs(productImages, removeProductImage)}
                <button
                  type="button"
                  className="ecom-quick-hot-add-btn"
@@ -8209,6 +8496,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            </button>
          </div>
        </aside>
+        {hotMaterialHoverZoom && typeof document !== "undefined"
+          ? createPortal(
+              <div
+                className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
+                style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
+              >
+                <img src={hotMaterialHoverZoom.src} alt="" />
+              </div>,
+              document.body,
+            )
+          : null}
        <section className="ecom-quick-set-stage">
          <header className="ecom-quick-set-preview-head">
            <h1>预览</h1>
@@ -8383,11 +8681,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    </main>
  );

-  const copywritingPreview = (
-    <div key="copywriting" className="ecom-quick-page-wrap ecom-tool-page-enter">
-      <EcommerceCopywritingPanel onClose={closeCopywritingPage} />
-    </div>
-  );
+  const copywritingPreview = <EcommerceCopywritingPanel onClose={closeCopywritingPage} />;

  const oneClickVideoPreview = (
    <div key="oneClickVideo" className="ecom-quick-page-wrap ecom-tool-page-enter">
@@ -8435,21 +8729,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          ? isWatermarkTool
            ? (
              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                {renderQuickPageSidebar("watermark")}
+                {renderQuickPageSidebar("watermark", "visual")}
                {watermarkPreview}
              </div>
            )
            : isTranslateTool
              ? (
                <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                  {renderQuickPageSidebar("translate")}
+                  {renderQuickPageSidebar("translate", "visual")}
                  {translatePreview}
                </div>
              )
              : isImageEditTool
                ? (
                  <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                    {renderQuickPageSidebar("image-edit")}
+                    {renderQuickPageSidebar("image-edit", "visual")}
                    {imageWorkbenchPreview}
                  </div>
                )
@@ -8479,41 +8773,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                        : isCopywritingTool
                          ? (
                            <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                              {renderQuickPageSidebar("copywriting")}
+                              {renderQuickPageSidebar("copywriting", "visual")}
                              {copywritingPreview}
                            </div>
                          )
                          : isOneClickVideoTool
                            ? (
-                              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-one-click-video-wrap ecom-tool-page-enter">
                                {renderQuickPageSidebar("oneClickVideo")}
                                {oneClickVideoPreview}
                              </div>
                            )
                            : clonePreview
          : placeholderPreview;
-  const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool;
-  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 activeConversationTurns = activeHistoryRecord
-    ? activeHistoryRecord.turns?.length
-      ? activeHistoryRecord.turns
-      : [buildHistoryTurnFromRecord(activeHistoryRecord)]
-    : [];
-  const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => {
-    if (turn.settingLabel) return turn.settingLabel;
-    if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) {
-      return `单图 ${turn.results.length}张`;
-    }
-    if (turn.output === "set") {
-      const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0);
-      return `套图 ${total || 1}张`;
-    }
-    if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`;
-    if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`;
-    return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
-  };
  const restoreHistoryTurnInputs = (turn: EcommerceHistoryTurn) => {
    setCloneOutput(turn.output);
    setPlatform(turn.platform);
@@ -8574,18 +8847,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          <>
            <aside className="clone-ai-conversation-panel" aria-label="AI 对话">
              <header className="clone-ai-conversation-head">
-                <div>
+                <div className="clone-ai-conversation-title">
                  <strong>{activeHistoryRecord?.title || "生成详情"}</strong>
-                  <span>{selectedCloneOutput.label} · {platform} · {language}</span>
                </div>
+                <div className="clone-ai-conversation-actions">
                  <button
                    type="button"
+                    className="clone-ai-conversation-home"
+                    onClick={handleNewEcommerceConversation}
+                    aria-label="返回首页"
+                    title="返回首页"
+                  >
+                    <AppstoreOutlined />
+                    <span>首页</span>
+                  </button>
+                  <button
+                    type="button"
+                    className="clone-ai-conversation-collapse"
                    onClick={() => setIsCloneConversationCollapsed(true)}
                    aria-label="收起对话"
                    title="收起对话"
                  >
                    <MenuFoldOutlined />
                  </button>
+                </div>
              </header>
              <div className="clone-ai-conversation-body">
                {activeConversationTurns.map((turn, index) => {
@@ -8657,16 +8942,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                })}
              </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}

@@ -75,7 +75,7 @@ export default function CommandHistorySidebar({
        </div>
        <div className="ecom-command-history__heading">
          <strong>生成记录</strong>
-          <span>{records.length} 条</span>
+          <span className="ecom-command-history__count">{records.length} 条</span>
        </div>
        {refreshMessage ? (
          <p key={refreshStamp} className="ecom-command-history__refresh-note" role="status">
@@ -86,13 +86,25 @@ export default function CommandHistorySidebar({
          {records.length ? (
            records.map((record) => {
              const outputLabel = outputLabels.find((option) => option.key === record.output)?.label || "生成记录";
+              const statusKey = record.status === "generating" ? "generating" : record.status === "failed" ? "failed" : "done";
              const statusLabel =
                record.status === "generating" ? "生成中" : record.status === "failed" ? "失败" : formatHistoryTime(record.createdAt);
              return (
-                <div key={`${record.id}-${refreshTick}`} className={`ecom-command-history__item${activeRecordId === record.id ? " is-active" : ""}`}>
-                  <button type="button" className="ecom-command-history__item-main" onClick={() => onOpenRecord(record)}>
+                <div
+                  key={`${record.id}-${refreshTick}`}
+                  className={`ecom-command-history__item is-${statusKey}${activeRecordId === record.id ? " is-active" : ""}`}
+                >
+                  <button
+                    type="button"
+                    className={`ecom-command-history__item-main${activeRecordId === record.id ? " is-active" : ""}`}
+                    onClick={() => onOpenRecord(record)}
+                    aria-current={activeRecordId === record.id ? "page" : undefined}
+                  >
                    <strong>{record.title}</strong>
-                    <span>{outputLabel} · {statusLabel}</span>
+                    <span className="ecom-command-history__item-meta">
+                      <span>{outputLabel}</span>
+                      <em>{statusLabel}</em>
+                    </span>
                  </button>
                  <button
                    type="button"
Author	SHA1	Message	Date
Codex	426e670934	feat: ecommerce quick tool UI responsive polish CI / verify (pull_request) Waiting to run Details	2026-06-18 18:35:48 +08:00
stringadmin	5c07f0794a	Merge pull request 'feat: 记录详情页Canvas按轮次分组展示，对话面板UI重构与视觉升级' (#33 ) from feat/ecommerce-record-detail-canvas-groups into main CI / verify (push) Waiting to run Details Reviewed-on: #33	2026-06-18 10:31:57 +00:00
ludan	ffd871490e	merge main: 解决EcommercePage.tsx和ecommerce-standalone.css冲突 CI / verify (pull_request) Waiting to run Details	2026-06-18 18:31:10 +08:00
ludan	7795ca3cbb	feat: 记录详情页Canvas按轮次分组展示，对话面板UI重构与视觉升级 CI / verify (pull_request) Waiting to run Details - Canvas视图重构：记录详情页用 turn-groups 按生成轮次分组替代原 canvas-nodes，支持生成中/失败状态展示及拖拽定位 - 对话面板头部改为 title + actions 布局，新增首页返回按钮，移除独立 toggle - 对话收起时显示 recall 入口卡片，展示当前轮次摘要信息并支持一键展开继续对话 - 历史记录侧边栏列表项新增状态 class（is-generating/is-failed/is-done），元信息拆分为类型+状态标签结构 - CSS 新增 1772 行：记录详情页整体视觉升级（渐变背景、毛玻璃面板、胶囊卡片、状态色条），Canvas 节点响应式布局，Preview modal 底部操作栏美化	2026-06-18 18:28:57 +08:00
stringadmin	c70affc180	Merge pull request 'feat: localize ecommerce quick tool pages' (#32 ) from codex/ecommerce-ui-latest-responsive-20260618 into main CI / verify (push) Waiting to run Details Reviewed-on: #32	2026-06-18 08:33:06 +00:00