Merge pull request 'feat: 记录详情页Canvas按轮次分组展示，对话面板UI重构与视觉升级' (#33) from feat/ecommerce-record-detail-canvas-groups into main

Reviewed-on: #33

src/features/ecommerce/EcommercePage.tsx

@@ -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;
@@ -4843,6 +4857,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,93 +6366,211 @@ 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}>
-            <section className="clone-ai-canvas-nodes" aria-label="生成结果">
-              {canvasNodes.map((node) => (
-                <article
-                  key={node.id}
-                  className="clone-ai-canvas-node"
-                  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"
-                    onPointerDown={(e) => {
-                      if (e.button !== 0) return;
-                      e.stopPropagation();
-                      e.currentTarget.setPointerCapture(e.pointerId);
-                      nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y };
-                    }}
-                    onPointerMove={(e) => {
-                      const drag = nodeDragRef.current;
-                      if (!drag.active || drag.nodeId !== node.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 === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
-                    }}
-                    onPointerUp={(e) => {
-                      if (nodeDragRef.current.nodeId === node.id) {
-                        nodeDragRef.current = { ...nodeDragRef.current, active: false };
-                        e.currentTarget.releasePointerCapture(e.pointerId);
-                      }
-                    }}
-                  />
-                  <div className="clone-ai-source-stack">
-                    <button
-                      type="button"
-                      className="clone-ai-source-corner-action"
-                      onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
-                      disabled={!node.sourceImage}
-                    >
-                      原图素材
-                    </button>
-                    <button
-                      type="button"
-                      className="clone-ai-main-result"
-                      aria-label="预览原图素材"
-                      onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
-                      disabled={!node.sourceImage}
-                    >
-                      {node.sourceImage ? (
-                        <img
-                          src={node.sourceImage}
-                          alt="原图素材"
-                          onError={(event) => {
-                            event.currentTarget.style.display = "none";
-                            event.currentTarget.parentElement?.classList.add("is-missing-source");
+              {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);
+                            }
                           }}
                         />
-                      ) : null}
-                      <span className="clone-ai-source-missing">素材不可用</span>
-                    </button>
-                  </div>
-                  <div className="clone-ai-flow-arrow" aria-hidden="true" />
-                  <div className="clone-ai-result-stack">
-                    <span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
-                    <div className="clone-ai-result-grid result-reveal">
-                      {node.results.map((card) => (
-                        <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
-                          <img src={card.src} alt={card.label} />
+                        <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
+                      key={node.id}
+                      className="clone-ai-canvas-node"
+                      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"
+                        onPointerDown={(e) => {
+                          if (e.button !== 0) return;
+                          e.stopPropagation();
+                          e.currentTarget.setPointerCapture(e.pointerId);
+                          nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y };
+                        }}
+                        onPointerMove={(e) => {
+                          const drag = nodeDragRef.current;
+                          if (!drag.active || drag.nodeId !== node.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 === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
+                        }}
+                        onPointerUp={(e) => {
+                          if (nodeDragRef.current.nodeId === node.id) {
+                            nodeDragRef.current = { ...nodeDragRef.current, active: false };
+                            e.currentTarget.releasePointerCapture(e.pointerId);
+                          }
+                        }}
+                      />
+                      <div className="clone-ai-source-stack">
+                        <button
+                          type="button"
+                          className="clone-ai-source-corner-action"
+                          onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
+                          disabled={!node.sourceImage}
+                        >
+                          原图素材
                         </button>
-                      ))}
-                    </div>
-                  </div>
-                </article>
-              ))}
-              {status === "generating" ? (
-                <article className="clone-ai-canvas-node is-generating" style={{ transform: `translate(${canvasNodes.length * 420}px, 0px)` }}>
-                  <LoadingOutlined style={{ fontSize: 24 }} />
-                  <span>正在生成{selectedCloneOutput.label}…</span>
-                </article>
-              ) : null}
-            </section>
+                        <button
+                          type="button"
+                          className="clone-ai-main-result"
+                          aria-label="预览原图素材"
+                          onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
+                          disabled={!node.sourceImage}
+                        >
+                          {node.sourceImage ? (
+                            <img
+                              src={node.sourceImage}
+                              alt="原图素材"
+                              onError={(event) => {
+                                event.currentTarget.style.display = "none";
+                                event.currentTarget.parentElement?.classList.add("is-missing-source");
+                              }}
+                            />
+                          ) : null}
+                          <span className="clone-ai-source-missing">素材不可用</span>
+                        </button>
+                      </div>
+                      <div className="clone-ai-flow-arrow" aria-hidden="true" />
+                      <div className="clone-ai-result-stack">
+                        <span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
+                        <div className="clone-ai-result-grid result-reveal">
+                          {node.results.map((card) => (
+                            <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
+                              <img src={card.src} alt={card.label} />
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    </article>
+                  ))}
+                  {status === "generating" ? (
+                    <article className="clone-ai-canvas-node is-generating" style={{ transform: `translate(${canvasNodes.length * 420}px, 0px)` }}>
+                      <LoadingOutlined style={{ fontSize: 24 }} />
+                      <span>正在生成{selectedCloneOutput.label}…</span>
+                    </article>
+                  ) : null}
+                </section>
+              )}
             </div>
           ) : status === "idle" || status === "ready" ? null : (
             <section className="clone-ai-empty-state" aria-live="polite">
@@ -6405,13 +6596,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>
@@ -8492,28 +8741,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                             )
                             : 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 +8802,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>
-                <button
-                  type="button"
-                  onClick={() => setIsCloneConversationCollapsed(true)}
-                  aria-label="收起对话"
-                  title="收起对话"
-                >
-                  <MenuFoldOutlined />
-                </button>
+                <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 +8897,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}
 

src/features/ecommerce/panels/CommandHistorySidebar.tsx

@@ -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"