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
10 changed files with 4512 additions and 185 deletions
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-theme="dark" data-ui-theme="dark-green" style="color-scheme: dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1,4 +1,4 @@
-import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import {
  BugOutlined,
  CheckCircleFilled,
@@ -20,9 +20,7 @@ import {
 import ErrorBoundary from "./components/ErrorBoundary";
 import ToastContainer from "./components/toast/ToastContainer";
 import { toast } from "./components/toast/toastStore";
-import EcommercePage from "./features/ecommerce/EcommercePage";
 import { flushPendingGenerationRecords } from "./api/generationRecordClient";
-import { ossAssets } from "./data/ossAssets";
 import { keyServerClient } from "./api/keyServerClient";
 import { setUserMaxConcurrency } from "./api/generationConcurrency";
 import {
@@ -38,6 +36,8 @@ import { useAppStore, useSessionStore } from "./stores";
 import type { WebUserSession } from "./types";
 import "./styles/ecommerce-standalone.css";

+const EcommercePage = lazy(() => import("./features/ecommerce/EcommercePage"));
+
 type AuthMode = "login" | "register";
 type AuthMethod = "account" | "email" | "phone";

@@ -51,17 +51,6 @@ interface LocalProfilePageProps {
  onLogout: () => void;
 }

-const profileWorks = [
-  { title: "主图套图生成", desc: "电商主图与场景图自动生成", image: ossAssets.ecommerce.templateCases[0], type: "图像", time: "6/9 18:13" },
-  { title: "A+详情页设计", desc: "产品卖点与长图详情版式", image: ossAssets.ecommerce.templateCases[1], type: "图像", time: "6/9 10:11" },
-  { title: "短视频广告", desc: "产品展示短视频脚本与画面", image: ossAssets.ecommerce.productSet.hosting, type: "视频", time: "6/9 10:05" },
-  { title: "模特图生成", desc: "服饰商品真人上身展示", image: ossAssets.ecommerce.tryOn.tryA, type: "图像", time: "6/9 10:03" },
-  { title: "商品场景图", desc: "按平台比例输出营销素材", image: ossAssets.ecommerce.detail.gridA, type: "图像", time: "6/9 10:01" },
-  { title: "高度复刻", desc: "参考图结构复刻与商品替换", image: ossAssets.ecommerce.detail.gridB, type: "图像", time: "6/9 09:39" },
-  { title: "详情模块", desc: "功能卖点、参数和包装模块", image: ossAssets.ecommerce.detail.gridC, type: "图像", time: "6/8 21:20" },
-  { title: "平台素材", desc: "淘宝/天猫投放图批量生成", image: ossAssets.ecommerce.detail.gridD, type: "图像", time: "6/8 18:26" },
-];
-
 function LocalAvatar({ session, size = "md" }: { session: WebUserSession; size?: "sm" | "md" | "lg" }) {
  const displayName = session.user.displayName || session.user.username || "用户";
  const label = displayName.trim().slice(0, 1).toUpperCase() || "用";
@@ -75,9 +64,9 @@ function LocalAvatar({ session, size = "md" }: { session: WebUserSession; size?:

 function LocalProfilePage({ session, balance, imageCount, videoCount, onBack, onBugFeedback, onLogout }: LocalProfilePageProps) {
  const displayName = session.user.displayName || session.user.username || "用户";
-  const workCount = Math.max(imageCount + videoCount, profileWorks.length);
-  const projectCount = Math.max(1, Math.round(workCount / 18));
-  const assetCount = Math.max(1, Math.round(workCount / 20));
+  const workCount = Math.max(imageCount + videoCount, 0);
+  const projectCount = 0;
+  const assetCount = 0;

  return (
    <section className="local-profile-page">
@@ -142,22 +131,15 @@ function LocalProfilePage({ session, balance, imageCount, videoCount, onBack, on
            <header>
              <div>
                <strong>代表作</strong>
-                <span>最近完成的高质量生成内容</span>
+                <span>后续将展示接口返回的真实作品</span>
              </div>
              <em>{workCount} 项</em>
            </header>
-            <div className="local-profile-work-grid">
-              {profileWorks.map((work) => (
-                <article key={`${work.title}-${work.time}`} className="local-profile-work-card">
-                  <img src={work.image} alt="" />
-                  <div>
-                    <span>{work.type}</span>
-                    <strong>{work.title}</strong>
-                    <p>{work.desc}</p>
-                    <em>已完成 · {work.time}</em>
-                  </div>
-                </article>
-              ))}
+            <div className="local-profile-work-grid local-profile-work-grid--empty">
+              <div className="local-profile-empty">
+                <strong>暂无代表作数据</strong>
+                <span>作品接口接入后，这里会显示你的真实生成内容。</span>
+              </div>
            </div>
          </section>
        </main>
@@ -184,7 +166,6 @@ function App() {
  const [sessionNotice, setSessionNotice] = useState<string | null>(null);
  const [profileMenuOpen, setProfileMenuOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState<"workspace" | "profile">("workspace");
-  const [workspaceKey, setWorkspaceKey] = useState(0);

  useEffect(() => {
    void loadDarkGreenTheme();
@@ -339,7 +320,7 @@ function App() {
  const balance = Math.max(usage.balanceCents, 0) / 100;
  const displayName = session?.user.displayName || session?.user.username || "用户";
  const actualWorkCount = Math.max(usage.imageUsed + usage.videoUsed, 0);
-  const shownWorkCount = Math.max(actualWorkCount, profileWorks.length);
+  const shownWorkCount = actualWorkCount;

  const avatarMenuStats = useMemo(
    () => [
@@ -360,7 +341,6 @@ function App() {
  const handleOpenWorkspace = () => {
    setProfileMenuOpen(false);
    setCurrentPage("workspace");
-    setWorkspaceKey((k) => k + 1);
  };

  const handleBugFeedback = () => {
@@ -447,17 +427,22 @@ function App() {
      </header>

      <main className="ecommerce-standalone__content">
-        {currentPage === "profile" && session ? (
-          <LocalProfilePage
-            session={session}
-            balance={balance}
-            imageCount={usage.imageUsed}
-            videoCount={usage.videoUsed}
-            onBack={handleOpenWorkspace}
-            onBugFeedback={handleBugFeedback}
-            onLogout={handleLogout}
-          />
-        ) : (
+        {session ? (
+          <div className="ecommerce-standalone__page" hidden={currentPage !== "profile"}>
+            <LocalProfilePage
+              session={session}
+              balance={balance}
+              imageCount={usage.imageUsed}
+              videoCount={usage.videoUsed}
+              onBack={handleOpenWorkspace}
+              onBugFeedback={handleBugFeedback}
+              onLogout={handleLogout}
+            />
+          </div>
+        ) : null}
+        {/* 工作台常驻挂载，仅用 hidden 切换。切到个人中心时不卸载，
+            生成任务、进度动画、已上传图片等本地状态全部保留，切回即继续。 */}
+        <div className="ecommerce-standalone__page" hidden={Boolean(session) && currentPage === "profile"}>
          <ErrorBoundary>
            <Suspense
              fallback={
@@ -468,7 +453,6 @@ function App() {
              }
            >
              <EcommercePage
-                key={workspaceKey}
                projects={[]}
                isAuthenticated={Boolean(session)}
                onStartCreate={() => undefined}
@@ -482,7 +466,7 @@ function App() {
              />
            </Suspense>
          </ErrorBoundary>
-        )}
+        </div>
      </main>

      {authOpen ? (
@@ -38,6 +38,20 @@ export interface SaveGenerationRecordResult {
  id: string;
 }

+// 同一 clientRecordId 的保存去重：套图主流程、backgroundTaskRunner、useGenerationTasks
+// 三处都可能对同一条终态任务调用 saveGenerationRecord，SSE 重复推送 completed 时
+// 单个 poller 内也会重复触发。这里做客户端幂等：in-flight 合流 + 成功后短期拦截，
+// 避免后端在缺少去重时插入重复记录。
+const inFlightSaves = new Map<string, Promise<SaveGenerationRecordResult>>();
+const recentlySavedAt = new Map<string, number>();
+const SAVE_DEDUPE_WINDOW_MS = 60_000;
+
+function pruneRecentlySaved(now: number): void {
+  for (const [id, savedAt] of recentlySavedAt) {
+    if (now - savedAt > SAVE_DEDUPE_WINDOW_MS) recentlySavedAt.delete(id);
+  }
+}
+
 function readPendingRecords(): SaveGenerationRecordInput[] {
  try {
    const raw = window.localStorage.getItem(PENDING_RECORDS_KEY);
@@ -60,6 +74,36 @@ function writePendingRecord(input: SaveGenerationRecordInput): void {
 }

 export async function saveGenerationRecord(input: SaveGenerationRecordInput): Promise<SaveGenerationRecordResult> {
+  const now = Date.now();
+  pruneRecentlySaved(now);
+
+  const recordId = input.clientRecordId;
+  if (recordId) {
+    const inFlight = inFlightSaves.get(recordId);
+    if (inFlight) return inFlight;
+    const savedAt = recentlySavedAt.get(recordId);
+    if (savedAt !== undefined && now - savedAt <= SAVE_DEDUPE_WINDOW_MS) {
+      // 终态记录只需落库一次；窗口内的重复调用直接视为已保存。
+      return { source: "server", id: recordId };
+    }
+  }
+
+  const promise = saveGenerationRecordInternal(input);
+  if (recordId) {
+    inFlightSaves.set(recordId, promise);
+    void promise
+      .then((result) => {
+        if (result.source === "server") recentlySavedAt.set(recordId, Date.now());
+      })
+      .catch(() => undefined)
+      .finally(() => {
+        inFlightSaves.delete(recordId);
+      });
+  }
+  return promise;
+}
+
+async function saveGenerationRecordInternal(input: SaveGenerationRecordInput): Promise<SaveGenerationRecordResult> {
  try {
    const response = await serverRequest<{ id?: string | number }>("ai/generation-records", {
      method: "POST",
@@ -106,8 +106,8 @@ const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration;

 const ecommerceInspirationRows = [
  {
-    title: "社区集锦",
-    desc: "不止作图，更懂转化。",
+    title: "作品记录",
+    desc: "沉淀最近生成的高转化素材，随时回看与复用。",
    variant: "team",
    cards: [
      { title: "指定ASIN，优化listing", meta: "竞品拆解 · 卖点重排 · 图文建议", mediaUrl: ecommerceInspirationAssets.asinListing, mediaType: "image" },
@@ -156,6 +156,16 @@ const ecommerceInspirationRows = [
  },
 ] as const;

+// 把灵感卡片的标题 + 卖点要点合成一段可直接填入指令栏的提示词。
+const buildInspirationPrompt = (title: string, meta: string): string => {
+  const points = meta
+    .split(/[·、,，]/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+  const base = title.trim();
+  return points.length ? `${base}。风格要点：${points.join("、")}。` : `${base}。`;
+};
+
 const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

 const normalizeHexColor = (value: string) => {
@@ -304,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;
@@ -997,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;
@@ -1385,6 +1410,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [productSetRequirement, setProductSetRequirement] = useState("");
  const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>(defaultProductSetOutput);
  const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
+  // 套图/图像生成的真实进度（0-100）：多张串行生成时按"已完成张数 + 当前张子进度"推进，
+  // 替代进度条原先写死 50 导致卡在 75% 的假进度。
+  const [generationProgress, setGenerationProgress] = useState(0);
  const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
  const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
@@ -1411,9 +1439,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [watermarkResultUrl, setWatermarkResultUrl] = useState<string | null>(null);
  const [watermarkProgress, setWatermarkProgress] = useState(0);
  const [translateImage, setTranslateImage] = useState<{ src: string; name: string; format: string } | null>(null);
-  const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done">("idle");
+  const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done" | "failed">("idle");
  const [isTranslateDragging, setIsTranslateDragging] = useState(false);
  const [translateLanguage, setTranslateLanguage] = useState("zh");
+  const [translateResultUrl, setTranslateResultUrl] = useState<string | null>(null);
  const [imageWorkbenchImage, setImageWorkbenchImage] = useState<{ src: string; name: string; format: string } | null>(null);
  const [imageWorkbenchPrompt, setImageWorkbenchPrompt] = useState("");
  const [imageWorkbenchBrushSize, setImageWorkbenchBrushSize] = useState(50);
@@ -1437,8 +1466,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [visibleComposerMenu, setVisibleComposerMenu] = useState<ComposerMenuKey | null>(null);
  const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
  const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
+  const [composerPopoverTop, setComposerPopoverTop] = useState(0);
  const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(true);
-  const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video" } | null>(null);
+  const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video"; prompt: string } | null>(null);
  const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
  const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
  const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
@@ -1459,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);
@@ -1478,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: "",
@@ -1519,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;
@@ -1628,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;
@@ -2082,6 +2264,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        stopWatermarkProgress();
        setWatermarkProgress(100);
        toast.success("去水印处理完成");
+        void saveUnifiedEcommerceGenerationRecord({
+          clientRecordId: crypto.randomUUID(),
+          title: `去水印 ${watermarkImage.name || ""}`.trim(),
+          mode: "watermark",
+          taskIds: [taskId],
+          sourceImages: [{ url: imageUrl, label: watermarkImage.name || "watermark-source" }],
+          results: [{ url: persistedUrl, label: "去水印结果", mediaType: "image", taskId }],
+          createdAt: new Date().toISOString(),
+        });
      } else {
        setWatermarkStatus("failed");
        stopWatermarkProgress();
@@ -2128,6 +2319,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    }
    setActiveQuickTool(null);
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
@@ -2145,6 +2337,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      return nextImage;
    });
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    setActiveQuickTool("translate");
  };

@@ -2154,6 +2347,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      translateProcessTimeoutRef.current = null;
    }
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
@@ -2182,28 +2376,76 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      return nextImage;
    });
    setTranslateStatus("idle");
+    setTranslateResultUrl(null);
    toast.success("图片已导入");
  };

-  const handleTranslateGenerate = () => {
+  const handleTranslateGenerate = async () => {
    if (!translateImage || translateStatus === "processing") return;
-    if (translateProcessTimeoutRef.current !== null) window.clearTimeout(translateProcessTimeoutRef.current);
+    const targetLabel = translateLanguageOptions.find((option) => option.value === translateLanguage)?.label || "中文";
    setTranslateStatus("processing");
-    translateProcessTimeoutRef.current = window.setTimeout(() => {
-      translateProcessTimeoutRef.current = null;
-      setTranslateStatus("done");
-      toast.success("图片翻译完成");
-    }, 900);
+    setTranslateResultUrl(null);
+
+    try {
+      const sourceBlob = await fetch(translateImage.src).then((res) => res.blob());
+      const sourceMime = normalizeEcommerceImageMime(sourceBlob.type || "image/png");
+      const { url: imageUrl } = await aiGenerationClient.uploadAssetBinary(sourceBlob, {
+        name: `translate-source-${Date.now()}.png`,
+        mimeType: sourceMime,
+        scope: ecommerceOssScopes.productSource,
+      });
+
+      const prompt = `将图片中的所有文字翻译成${targetLabel}，保持原有的排版、字体风格、位置和整体设计不变，只替换文字内容。`;
+      const { taskId } = await aiGenerationClient.createImageEditTask({
+        imageUrl,
+        function: "description_edit",
+        prompt,
+      });
+
+      const resultUrl = await waitForTask(taskId, {
+        kind: "image",
+        abortRef: { current: false },
+        onProgress: () => {},
+      });
+
+      if (resultUrl) {
+        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("translate"), "ecommerce-translate");
+        setTranslateResultUrl(persistedUrl);
+        setTranslateStatus("done");
+        toast.success("图片翻译完成");
+        void saveUnifiedEcommerceGenerationRecord({
+          clientRecordId: crypto.randomUUID(),
+          title: `图片翻译（${targetLabel}） ${translateImage.name || ""}`.trim(),
+          mode: "translate",
+          prompt,
+          taskIds: [taskId],
+          sourceImages: [{ url: imageUrl, label: translateImage.name || "translate-source" }],
+          results: [{ url: persistedUrl, label: "翻译结果", mediaType: "image", taskId }],
+          config: { targetLanguage: translateLanguage },
+          createdAt: new Date().toISOString(),
+        });
+      } else {
+        setTranslateStatus("failed");
+        toast.error("翻译未返回结果");
+      }
+    } catch (err) {
+      setTranslateStatus("failed");
+      if (err instanceof ServerRequestError && err.status === 402) {
+        toast.error("余额不足，请充值后继续");
+      } else {
+        toast.error(err instanceof Error ? err.message : "图片翻译失败");
+      }
+    }
  };

  const handleTranslateDownload = () => {
-    if (!translateImage || translateStatus !== "done") {
+    if (!translateResultUrl || translateStatus !== "done") {
      toast.info("请先完成图片翻译");
      return;
    }
    const link = document.createElement("a");
-    const safeName = (translateImage.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
-    link.href = translateImage.src;
+    const safeName = (translateImage?.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
+    link.href = translateResultUrl;
    link.download = `${safeName || "translate-result"}-翻译.png`;
    document.body.appendChild(link);
    link.click();
@@ -2402,6 +2644,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        stopWorkbenchProgress();
        setImageWorkbenchProgress(100);
        toast.success("局部重绘已完成");
+        void saveUnifiedEcommerceGenerationRecord({
+          clientRecordId: crypto.randomUUID(),
+          title: imageWorkbenchPrompt.trim() || `图片修改 ${imageWorkbenchImage.name || ""}`.trim(),
+          mode: "inpaint",
+          prompt: imageWorkbenchPrompt || undefined,
+          taskIds: [taskId],
+          sourceImages: [{ url: imageUrl, label: imageWorkbenchImage.name || "inpaint-source" }],
+          results: [{ url: persistedUrl, label: "局部重绘结果", mediaType: "image", taskId }],
+          config: { ratio: imageWorkbenchRatio },
+          createdAt: new Date().toISOString(),
+        });
      } else {
        setImageWorkbenchStatus("failed");
        stopWorkbenchProgress();
@@ -3295,8 +3548,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  }, [openCloneBasicSelect]);

  useEffect(() => {
-    const shouldAutoCompactComposer = (status === "generating" || status === "done") && !isCommandComposerCompact;
-    if (!composerMenu && !shouldAutoCompactComposer) return undefined;
+    if (!composerMenu && !(status === "done" && !isCommandComposerCompact)) return undefined;

    const handlePointerDown = (event: PointerEvent) => {
      const target = event.target;
@@ -3305,19 +3557,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      if (composer?.contains(target)) return;

      if (composerMenu && composerMenu !== "settings") setComposerMenu(null);
-      if (shouldAutoCompactComposer) setIsCommandComposerCompact(true);
+      if (status === "done" && !isCommandComposerCompact) setIsCommandComposerCompact(true);
    };

    document.addEventListener("pointerdown", handlePointerDown);
    return () => document.removeEventListener("pointerdown", handlePointerDown);
  }, [composerMenu, isCommandComposerCompact, status]);

-  useEffect(() => {
-    if ((status === "generating" || status === "done") && !isCommandComposerCompact) {
-      setIsCommandComposerCompact(true);
-    }
-  }, [isCommandComposerCompact, status]);
-
  useEffect(() => {
    if (composerMenuCloseTimeoutRef.current !== null) {
      window.clearTimeout(composerMenuCloseTimeoutRef.current);
@@ -3564,6 +3810,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {

      const generatedUrls: string[] = [];
      const stamp = Date.now();
+      const totalCount = Math.max(1, cloneSetCountKeys.reduce((sum, key) => sum + counts[key], 0));
+      let completedCount = 0;
+      setGenerationProgress(0);

      for (const countKey of cloneSetCountKeys) {
        if (imageAbortRef.current.current) break;
@@ -3587,8 +3836,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          let resultUrl: string | null = null;
          try {
            resultUrl = await waitForTask(taskId, {
+              kind: "image",
              abortRef: imageAbortRef.current,
-              onProgress: () => {},
+              onProgress: (event) => {
+                // 整体进度 = (已完成张数 + 当前张子进度) / 总张数。
+                const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
+                const overall = ((completedCount + sub / 100) / totalCount) * 100;
+                setGenerationProgress(Math.round(Math.min(99, overall)));
+              },
            });
          } finally {
            untrackEcommerceTask(taskId);
@@ -3604,6 +3859,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            generatedUrls.push("");
            imageGen.updateTask(storeId, { status: "failed", error: "生成未返回结果" });
          }
+          completedCount += 1;
+          setGenerationProgress(Math.round(Math.min(99, (completedCount / totalCount) * 100)));
        }
      }

@@ -3655,6 +3912,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {

      const prompt = buildEcommerceImagePrompt(outputKey, userText, pPlatform, pRatio, pLanguage, pMarket, tryOnOptions);
      const stamp = Date.now();
+      setGenerationProgress(0);

      const { taskId } = await aiGenerationClient.createImageTask({
        prompt,
@@ -3670,8 +3928,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      let resultUrl: string | null = null;
      try {
        resultUrl = await waitForTask(taskId, {
+          kind: "image",
          abortRef: imageAbortRef.current,
-          onProgress: () => {},
+          onProgress: (event) => {
+            const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
+            setGenerationProgress(Math.round(Math.min(99, sub)));
+          },
        });
      } finally {
        untrackEcommerceTask(taskId);
@@ -4494,14 +4756,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
          >
            <img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
-            <span>原图素材</span>
          </button>
          <div className="product-set-flow-arrow" aria-hidden="true" />
          <div className="product-set-card-grid result-reveal">
            {setPreviewCards.map((card) => (
              <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                <img src={card.src} alt={card.label} />
-                <span>{card.label}</span>
              </button>
            ))}
          </div>
@@ -4510,7 +4770,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        <section className="product-set-empty-preview" aria-live="polite">
          {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
          <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
-          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label="商品套图" /> : null}
+          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label="商品套图" /> : null}
          <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图。"}</span>
        </section>
      )}
@@ -4563,7 +4823,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      language: item,
      countries: marketLanguageOptions.filter((option) => option.languages.includes(item)).map((option) => option.country),
    }));
-    const composerPopoverStyle: CSSProperties = { left: composerPopoverLeft };
+    const composerPopoverStyle = {
+      "--composer-popover-left": `${composerPopoverLeft}px`,
+      "--composer-popover-top": `${composerPopoverTop}px`,
+    } as CSSProperties;
    const menuToRender = composerMenu ?? visibleComposerMenu;
    if (!menuToRender) return null;
    const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
@@ -4744,7 +5007,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const toggleComposerMenu = (menuKey: ComposerMenuKey, event: ReactMouseEvent<HTMLButtonElement>) => {
    const composerRect = event.currentTarget.closest(".clone-ai-input-wrapper.ecom-command-composer")?.getBoundingClientRect();
    const buttonRect = event.currentTarget.getBoundingClientRect();
-    setComposerPopoverLeft(Math.max(0, buttonRect.left - (composerRect?.left ?? 0)));
+    const composerLeft = composerRect?.left ?? buttonRect.left;
+    const composerTop = composerRect?.top ?? buttonRect.top;
+    setComposerPopoverLeft(Math.max(0, buttonRect.left - composerLeft));
+    setComposerPopoverTop(Math.max(0, buttonRect.bottom - composerTop + 8));
    setComposerMenu((menu) => (menu === menuKey ? null : menuKey));
  };

@@ -4773,12 +5039,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  };

  const showMainVideoWorkspace = cloneOutput === "video" && isVideoWorkspaceVisible;
-  const hasGenerationSurface = status === "generating" || status === "done" || canvasNodes.length > 0;
-  const showPreGenerationGuides =
-    (status === "idle" || status === "ready") &&
-    !showMainVideoWorkspace &&
-    !activeHistoryRecordId &&
-    canvasNodes.length === 0;

  const scrollInspirationRow = (event: ReactMouseEvent<HTMLButtonElement>, direction: -1 | 1) => {
    const row = event.currentTarget.closest(".ecom-inspiration-row");
@@ -4787,6 +5047,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    strip.scrollBy({ left: direction * Math.max(280, strip.clientWidth * 0.78), behavior: "smooth" });
  };

+  const applyInspirationPrompt = (prompt: string) => {
+    const nextValue = prompt.slice(0, 500);
+    // 回到主指令栏（关闭可能打开的快捷工具页），把提示词填入并聚焦。
+    setActiveQuickTool(null);
+    setRequirement(nextValue);
+    syncRequirementMentionQuery(nextValue, nextValue.length);
+    setInspirationPreview(null);
+    requestAnimationFrame(() => {
+      const textarea = requirementTextareaRef.current;
+      if (textarea) {
+        textarea.focus();
+        textarea.setSelectionRange(nextValue.length, nextValue.length);
+        textarea.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    });
+    toast.success("提示词已填入指令栏");
+  };
+
  const inspirationPreviewOverlay =
    inspirationPreview && typeof document !== "undefined"
      ? createPortal(
@@ -4805,6 +5083,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
              ) : (
                <img src={inspirationPreview.mediaUrl} alt="" className="ecom-inspiration-preview__media" />
              )}
+              {inspirationPreview.prompt ? (
+                <div className="ecom-inspiration-preview__actions">
+                  <button
+                    type="button"
+                    className="ecom-inspiration-preview__use-prompt"
+                    onClick={() => applyInspirationPrompt(inspirationPreview.prompt)}
+                  >
+                    <EditOutlined />
+                    <span>使用此提示词</span>
+                  </button>
+                </div>
+              ) : null}
            </div>
          </div>,
          document.body,
@@ -4827,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>

@@ -4944,7 +5237,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                <>
                  <LoadingOutlined style={{ fontSize: 28 }} />
                  <strong>正在生成</strong>
-                  <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
+                  <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
                  <span>AI 正在为 {platform} / {market} 整理{selectedCloneOutput.label}。</span>
                </>
              ) : status === "failed" ? (
@@ -4975,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"
@@ -4998,9 +5295,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                        e.currentTarget.releasePointerCapture(e.pointerId);
                      }
                    }}
-                  >
-                    <span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
-                  </div>
+                  />
                  {node.sourceImage ? (
                    <div className="clone-ai-source-stack">
                      <button
@@ -5022,11 +5317,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                  ) : null}
                  <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} />
-                          <span>{card.label}</span>
                        </button>
                      ))}
                    </div>
@@ -5045,7 +5340,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            <section className="clone-ai-empty-state" aria-live="polite">
              {status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
              <strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
-              {status === "generating" ? <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
+              {status === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
              <span>
                {status === "generating"
                  ? "AI 正在为 " + platform + " / " + market + " 整理" + selectedCloneOutput.label + "。"
@@ -5065,18 +5360,16 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {

      <section
        ref={commandComposerWrapRef}
-        className={`clone-ai-bottom-input ecom-command-composer-wrap${hasGenerationSurface ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && hasGenerationSurface ? " is-compact" : ""}`}
+        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="生成指令"
        onClick={() => {
-          if (isCommandComposerCompact && status !== "generating") setIsCommandComposerCompact(false);
+          if (isCommandComposerCompact) setIsCommandComposerCompact(false);
        }}
      >
-        {!hasGenerationSurface ? (
-          <h1 className="ecom-command-title">
-            {typewriterText}
-            <span className="typewriter-cursor" aria-hidden="true">|</span>
-          </h1>
-        ) : null}
+        <h1 className={`ecom-command-title${status === "done" || canvasNodes.length > 0 ? " is-after-generate" : ""}`}>
+          {typewriterText}
+          <span className="typewriter-cursor" aria-hidden="true">|</span>
+        </h1>
        <input
          ref={cloneReferenceInputRef}
          type="file"
@@ -5104,43 +5397,61 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          onChange={handleSmartCutoutUpload}
          aria-label="上传智能抠图素材"
        />
+        <div className="ecom-command-mode-tabs" aria-label="生成模式">
+          {cloneOutputOptions.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              className={cloneOutput === option.key ? "is-active" : ""}
+              onClick={() => handleCloneOutputChange(option.key)}
+            >
+              <span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
+              <strong>{option.label}</strong>
+            </button>
+          ))}
+        </div>
        <div className="clone-ai-input-wrapper ecom-command-composer">
-          <button
-            type="button"
-            className={`ecom-command-reference${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
-            onClick={() => productInputRef.current?.click()}
-            onDragEnter={(event) => {
-              event.preventDefault();
-              setIsProductUploadDragging(true);
-            }}
-            onDragOver={(event) => event.preventDefault()}
-            onDragLeave={() => setIsProductUploadDragging(false)}
-            onDrop={(event) => {
-              event.preventDefault();
-              setIsProductUploadDragging(false);
-              const files = Array.from(event.dataTransfer.files);
-              if (files.length) addComposerAssets(files);
-            }}
-          >
-            <span aria-hidden="true"><CloudUploadOutlined /></span>
-            <strong>上传商品图</strong>
-          </button>
          {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">
+            <button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
+              <span>平台</span>{platform}
+            </button>
+            <button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
+              <span>语种</span>{language}
+            </button>
+            <button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
+              <span>比例</span>{formatRatioDisplayValue(ratio)}
+            </button>
+            <button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
+              <span>设置</span>{composerSettingLabel}
+            </button>
+          </div>
          <textarea
            ref={requirementTextareaRef}
            value={requirement}
@@ -5161,10 +5472,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
          ) : null}
          <div className="ecom-command-toolbar" aria-label="生成设置">
-            <div className="ecom-command-option-row">
+            <div className="ecom-command-composer-actions">
              <button
                type="button"
-                className={`ecom-command-reference ecom-command-reference--inline${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
+                className={`ecom-command-reference ecom-command-reference--bottom${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
                onClick={() => productInputRef.current?.click()}
                onDragEnter={(event) => {
                  event.preventDefault();
@@ -5182,26 +5493,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                <span aria-hidden="true"><PaperClipOutlined /></span>
                <strong>上传素材</strong>
              </button>
-              <button type="button" className={composerMenu === "mode" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("mode", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><AppstoreOutlined /></span>
-                {selectedCloneOutput.label}<span>模式</span>
-              </button>
-              <button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
-                <span>平台</span>{platform}
-              </button>
-              <button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
-                <span>语种</span>{language}
-              </button>
-              <button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
-                <span>比例</span>{formatRatioDisplayValue(ratio)}
-              </button>
-              <button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
-                <span>设置</span>{composerSettingLabel}
-              </button>
            </div>
            <div className="ecom-command-submit-row">
              <button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
@@ -5211,7 +5502,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          </div>
          {renderComposerMenu()}
        </div>
-        {showPreGenerationGuides ? (
+        {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
          <section className="ecom-command-quick-board" aria-label="快捷功能">
            {[
              { label: "A+/详情页", tone: "detail", icon: <LayoutOutlined />, onClick: openQuickDetailPage },
@@ -5236,7 +5527,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            ))}
          </section>
        ) : null}
-        {showPreGenerationGuides ? (
+        {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
          <section className="ecom-inspiration-lab" aria-label="电商灵感案例">
            <div className="ecom-inspiration-rows">
              {ecommerceInspirationRows.map((row) => (
@@ -5251,7 +5542,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                  </div>
                  <div className="ecom-inspiration-strip" tabIndex={0}>
                    {row.cards.map((card, index) => (
-                      <article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType })}>
+                      <article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType, prompt: buildInspirationPrompt(card.title, card.meta) })}>
                        <div className="ecom-inspiration-card__visual" aria-hidden="true">
                          {card.mediaType === "video" ? (
                            <video src={card.mediaUrl} muted playsInline loop autoPlay preload="metadata" />
@@ -6163,13 +6454,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                  <strong>正在翻译</strong>
                  <em>AI 正在识别并翻译图片中的文字</em>
                </div>
-              ) : translateStatus === "done" ? (
+              ) : translateStatus === "done" && translateResultUrl ? (
                <>
-                  <img src={translateImage.src} alt="翻译结果" />
+                  <img src={translateResultUrl} alt="翻译结果" />
                  <button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
                    <QuestionCircleOutlined />
                  </button>
                </>
+              ) : translateStatus === "failed" ? (
+                <div className="ecom-watermark-empty">
+                  <GlobalOutlined />
+                  <strong>翻译失败</strong>
+                  <em>请重试或更换图片</em>
+                </div>
              ) : (
                <div className="ecom-watermark-empty">
                  <GlobalOutlined />
@@ -6541,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}
    >
@@ -6582,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>
@@ -6616,7 +7039,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            onClick={refreshEcommerceHistory}
            disabled={isHistoryRefreshing}
          >
-            ↻
+            <ReloadOutlined />
          </button>
        </div>
        <div className="ecom-command-history__heading">
@@ -1,10 +1,11 @@
 import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
-import type { ReactNode } from "react";

 interface EcommerceProgressBarProps {
  status: "idle" | "generating" | "done" | "failed" | string;
  label?: string;
  onCancel?: () => void;
+  /** 0-100 真实进度。传入时进度条按真实值推进；省略时按状态做平滑蠕动。 */
+  progress?: number;
 }

 function mapStatus(status: string): "running" | "completed" | "failed" {
@@ -14,9 +15,13 @@ function mapStatus(status: string): "running" | "completed" | "failed" {
  return "running";
 }

-export function EcommerceProgressBar({ status, label, onCancel }: EcommerceProgressBarProps) {
-  const progress = mapStatus(status) === "running" ? 50 : 100;
-  const smoothed = useSmoothedProgress(progress, mapStatus(status));
+export function EcommerceProgressBar({ status, label, onCancel, progress }: EcommerceProgressBarProps) {
+  const mapped = mapStatus(status);
+  // running 时目标取「真实进度」与兜底值 88 的较大者：有真实进度则跟随推进，
+  // 后端不推中间进度时也由平滑器持续蠕动到高位，不再卡死在 75%。
+  const realProgress = typeof progress === "number" ? Math.max(0, Math.min(100, progress)) : 0;
+  const target = mapped === "running" ? Math.max(realProgress, 88) : 100;
+  const smoothed = useSmoothedProgress(target, mapped);

  if (status === "idle") return null;

@@ -2,15 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./styles/index.css";
 import App from "./App";
-import { reportError } from "./utils/errorReporting";
-
-window.addEventListener("unhandledrejection", (event) => {
-  reportError(event.reason, "rejection");
-});
-
-window.addEventListener("error", (event) => {
-  if (event.error) reportError(event.error, "unhandled");
-});

 const root = document.getElementById("root");

@@ -24,17 +24,33 @@ interface PersistedQueueSnapshot {
  savedAt: number;
 }

-const STORAGE_KEY = "omniai:generation-queue";
+const STORAGE_KEY_PREFIX = "omniai:generation-queue";
 const MAX_ITEMS = 80;
 const STALE_MS = 2 * 60 * 60 * 1000; // 2 hours

+function hashUserId(): string {
+  try {
+    const raw = localStorage.getItem("omniai-web-session");
+    if (!raw) return "anon";
+    const parsed = JSON.parse(raw) as { user?: { id?: number | string } };
+    return String(parsed?.user?.id || "anon");
+  } catch {
+    return "anon";
+  }
+}
+
+// 队列按用户分桶持久化：不同账号读写不同 key，避免登出再登他人账号时读到上一个用户的队列。
+function getStorageKey(): string {
+  return `${STORAGE_KEY_PREFIX}:${hashUserId()}`;
+}
+
 function loadPersistedQueue(): GenerationQueueItem[] {
  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
+    const raw = localStorage.getItem(getStorageKey());
    if (!raw) return [];
    const snapshot = JSON.parse(raw) as PersistedQueueSnapshot;
    if (Date.now() - (snapshot.savedAt || 0) > STALE_MS) {
-      localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem(getStorageKey());
      return [];
    }
    return snapshot.items.filter(
@@ -48,7 +64,7 @@ function loadPersistedQueue(): GenerationQueueItem[] {
 function persistQueue(items: GenerationQueueItem[]): void {
  try {
    const snapshot: PersistedQueueSnapshot = { version: 1, items, savedAt: Date.now() };
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+    localStorage.setItem(getStorageKey(), JSON.stringify(snapshot));
  } catch { /* quota exceeded */ }
 }

@@ -63,17 +79,6 @@ interface GenerationStoreState {
  clearTerminal: () => void;
 }

-function hashUserId(): string {
-  try {
-    const raw = localStorage.getItem("omniai-web-session");
-    if (!raw) return "anon";
-    const parsed = JSON.parse(raw) as { user?: { id?: number | string } };
-    return String(parsed?.user?.id || "anon");
-  } catch {
-    return "anon";
-  }
-}
-
 const initialQueue = loadPersistedQueue();

 export const useGenerationStore = create<GenerationStoreState>((set, get) => ({
@@ -2950,6 +2950,15 @@
  min-width: 0;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-result-stack > .clone-ai-node-label {
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  z-index: 5;
+  transform: translate(-50%, -100%);
+  white-space: nowrap;
+}
+
 .product-clone-page[data-tool="clone"] .clone-ai-source-corner-action {
  position: absolute;
  top: -6px;
@@ -12093,3 +12102,110 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
    grid-row: auto !important;
  }
 }
+
+/* Composer menu anchors: place option popovers under the clicked control, not under the whole composer. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover {
+  position: absolute !important;
+  inset: var(--composer-popover-top, 48px) auto auto var(--composer-popover-left, 0px) !important;
+  right: auto !important;
+  bottom: auto !important;
+  margin: 0 !important;
+  transform: none !important;
+  translate: none !important;
+  z-index: 160 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+}
+
+/* 平台弹窗宽度仅桌面/平板固定；≤640px 由移动端断点的全宽规则接管。 */
+@media (min-width: 641px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform {
+    width: min(460px, calc(100% - 24px)) !important;
+    max-width: min(460px, calc(100% - 24px)) !important;
+  }
+}
+
+/* 平台选项：logo + 名称横排，名称过长省略，避免在窄网格里溢出弹窗。 */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platform button {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 8px !important;
+  min-width: 0 !important;
+  text-align: left !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platform button .ecom-platform-name {
+  min-width: 0 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+@media (min-width: 641px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--languages,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker {
+    width: max-content !important;
+    min-width: 200px !important;
+    max-width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important;
+  }
+}
+
+/* 宽设置面板：固定宽度并靠右对齐 composer，避免从靠右的"设置"按钮左对齐展开时顶出右边缘被裁。
+   仅桌面/平板生效；≤640px 由移动端断点的全宽规则接管。 */
+@media (min-width: 641px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings {
+    width: min(520px, calc(100% - 24px)) !important;
+    max-width: min(520px, calc(100% - 24px)) !important;
+    left: auto !important;
+    inset: var(--composer-popover-top, 48px) 12px auto auto !important;
+  }
+}
+
+/* Uploaded assets stay as compact attachments inside the composer hierarchy. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
+  min-height: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+  position: static !important;
+  grid-column: 1 !important;
+  display: flex !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  justify-self: start !important;
+  gap: 10px !important;
+  width: auto !important;
+  max-width: 100% !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  padding: 2px 2px 0 !important;
+  overflow: visible !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+  flex: 0 0 64px !important;
+  width: 64px !important;
+  height: 64px !important;
+  border-radius: 14px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add {
+  flex: 0 0 44px !important;
+  width: 44px !important;
+  height: 64px !important;
+  min-height: 44px !important;
+  margin: 0 !important;
+  font-size: 24px !important;
+}
@@ -2,8 +2,14 @@ import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
 import { defineConfig } from "vite";

-export default defineConfig(() => {
-  const devApiTarget = process.env.OMNIAI_DEV_API_TARGET?.trim();
+export default defineConfig(({ command }) => {
+  // dev 模式下默认把 /api 代理到线上电商后端，本地 `npm run dev` 即可直接登录/生成。
+  // 想连本地或 SSH 隧道的后端时，用环境变量覆盖：
+  //   $env:OMNIAI_DEV_API_TARGET="http://127.0.0.1:3601"; npm run dev
+  // 仅 dev 代理用途，不会打进生产构建产物。
+  const devApiTarget =
+    process.env.OMNIAI_DEV_API_TARGET?.trim() ||
+    (command === "serve" ? "https://omniai.com.cn" : "");
  const apiProxy = devApiTarget
    ? {
        "/api": {
@@ -27,9 +33,7 @@ export default defineConfig(() => {
      port: 4174,
      host: "127.0.0.1",
    },
-    esbuild: {
-      drop: ["console", "debugger"],
-    },
+    ...(command === "build" ? { esbuild: { drop: ["console", "debugger"] } } : {}),
    build: {
      sourcemap: false,
      rollupOptions: {
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
stringadmin	307537a7ce	fix(ecommerce): 补全 clone-ai-node-label 在 result-stack 顶部的定位样式	2026-06-15 11:33:04 +08:00
stringadmin	0b2d6b901f	feat: 电商工作台进度与生成记录健壮性优化	2026-06-15 10:24:31 +08:00
stringadmin	e1fdbe5f9b	Merge remote-tracking branch 'origin/codex/ecommerce-hot-video-responsive' into main-merge-work	2026-06-13 19:41:10 +08:00
stringadmin	f51dfb17e1	Merge remote-tracking branch 'origin/fix/compact-composer-whitespace' into main-merge-work # Conflicts: # src/features/ecommerce/EcommercePage.tsx # src/styles/ecommerce-standalone.css	2026-06-13 19:41:04 +08:00
stringadmin	76ae9ab0ac	Merge pull request 'feat: 重构电商指令栏布局，模式标签外置、精简结果标签、优化生成记录交互' (#13 ) from feat/ecommerce-composer-redesign into main Reviewed-on: #13	2026-06-13 11:29:36 +00:00
stringadmin	98db427ac5	Merge remote-tracking branch 'origin/main' into feat/ecommerce-composer-redesign # Conflicts: # src/features/ecommerce/EcommercePage.tsx	2026-06-13 19:28:51 +08:00
stringadmin	573cbacbd3	Merge pull request 'Codex/fix project review bugs' (#12 ) from codex/fix-project-review-bugs into main Reviewed-on: #12	2026-06-13 11:11:03 +00:00
stringadmin	38b513aebf	Merge branch 'main' into codex/fix-project-review-bugs	2026-06-13 11:10:57 +00:00
ludan	4f6e32fb10	feat: 重构电商指令栏布局，模式标签外置、精简结果标签、优化生成记录交互本次修改对电商图片工作台的指令栏(composer)进行了全面重构，主要包含以下变更：一、指令栏布局重构（EcommercePage.tsx）： - 新增生成模式标签页(ecom-command-mode-tabs)，5种模式（套图/详情图/模特图/视频/爆款图）以标签形式外置于输入区上方，每种模式配有独立图标和配色 - 设置行(平台/语种/比例/设置)移入输入区内部，采用圆角胶囊按钮排列 - 上传按钮从输入区移到底部工具栏，改为"上传素材"紧凑样式 - 精简生成结果画布：移除所有文字标签（套图/详情图/模特图/爆款图标签、原图素材标签、结果卡片标签），让图片成为绝对视觉焦点 - 灵感行"AI团队"更名为"作品记录"，更新描述文案为"沉淀最近生成的高转化素材，随时回看与复用" 二、样式系统升级（ecommerce-standalone.css）： - 新增模式标签页完整样式：5列等宽网格、磨砂玻璃背板、各模式独立主题色 · 套图 set：翠绿 #0f8f72 · 详情图 detail：紫色 #7a5af8 · 模特图 model：蓝色 #1073cc · 视频 video：暖橙 #cc6b14 · 爆款图 hot：玫红 #c04468 - hover/active 状态带径向光晕和上浮微动效(translateY(-1px)) - 隐藏生成结果中的所有文字标签(display:none)，减少视觉噪音 - 修复历史记录删除按钮定位：改为绝对居中定位，不受网格布局影响 - 输入区改为单列布局，增大最小高度(214-286px)，增加内边距变更文件： - src/features/ecommerce/EcommercePage.tsx (+87/-51) - src/styles/ecommerce-standalone.css (+456)	2026-06-12 18:41:31 +08:00
stringadmin	9ae5e1f493	Merge pull request 'Codex/fix project review bugs' (#11 ) from codex/fix-project-review-bugs into main Reviewed-on: #11	2026-06-12 09:29:49 +00:00
stringadmin	e88edbe165	fix: 优化 compact 对话框、画布节点标签、删图重置及比例弹窗 - compact 模式尺寸调整，生成按钮不再溢出框外 - 生成时自动进入 compact 状态，idle 时恢复 - 删除所有样图后重置为新对话状态（清除画布、恢复标题） - 去掉 drag handle 模式标签，原图右上角统一高级黑 tag - 作品图不再显示重复标识 - 比例弹窗宽度自适应内容，添加 hover/active 交互样式 - 套图模式默认三种各一张 - 设置弹窗点击外部可关闭 - 历史记录删除按钮样式优化 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-12 12:37:32 +08:00
stringadmin	863f1f075e	fix: 修复 compact 模式下对话框底部大量空白高特异性 min-height 规则覆盖了 compact 模式的 max-height: 126px，导致 .ecom-command-composer 在缩小状态下仍保持 218px+ 的最小高度。在文件末尾添加更高特异性的 is-compact 覆盖，强制 min-height: 118px。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-12 11:33:13 +08:00
Codex	aa133d0f5c	style: refine ecommerce quick tool pages	2026-06-12 00:08:59 +08:00