From 9ff3a6880bf17288451a61b60cc54809087aad5f Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 11 Jun 2026 23:56:27 +0800
Subject: [PATCH] fix: align hot video preview header

---
 .../ecommerce/EcommerceVideoWorkspace.tsx     | 22 ++++---
 src/styles/ecommerce-standalone.css           | 57 +++++++++++++++++++
 2 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/features/ecommerce/EcommerceVideoWorkspace.tsx b/src/features/ecommerce/EcommerceVideoWorkspace.tsx
index 7d71a54..4825af1 100644
--- a/src/features/ecommerce/EcommerceVideoWorkspace.tsx
+++ b/src/features/ecommerce/EcommerceVideoWorkspace.tsx
@@ -622,7 +622,6 @@ export default function EcommerceVideoWorkspace({
   const imagedScenes = scenes.filter((s) => s.imageUrl);
   const primaryVideo = completedScenes[0]?.resultUrl;
   const sourceImage = sourceImageUrls[0] || planResult?.imageUrls[0] || productImageDataUrls[0] || "";
-  const flowHasStarted = stage !== "idle" || completedSteps.length > 0;
   const flowMeta = `${platform} / ${aspectRatio} / ${durationSeconds}s / ${resolution}`;
   const hasImaging = stage === "imaging" || stage === "imaged" || stage === "rendering" || stage === "completed" || stage === "partial_failed";
   const hasRendering = stage === "rendering" || stage === "completed" || stage === "partial_failed";
@@ -630,11 +629,16 @@ export default function EcommerceVideoWorkspace({
 
   return (
     <div className="ecom-video-workspace" data-stage={stage}>
-      {/* ── Flow bar ──────────────────────────────────── */}
-      <header className="ecom-video-flowbar">
-        <div className="ecom-video-flowbar__title" aria-label={`短视频分镜流，${flowMeta}`} title={flowMeta}>
-          <span className={`ecom-video-flowbar__pulse${flowHasStarted ? " is-active" : ""}`} aria-hidden="true" />
-          <span className="ecom-video-flowbar__wave" aria-hidden="true"><i /><i /><i /></span>
+      {/* ── Preview header ─────────────────────────────── */}
+      <header className="ecom-video-flowbar ecom-video-preview-head" title={flowMeta}>
+        <div className="ecom-video-preview-copy">
+          <h1>预览</h1>
+          <p>上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率短视频素材。</p>
+          <div className="ecom-video-flowbar__zoom">
+            <button type="button" onClick={() => setFlowZoom((z) => Math.max(0.25, z - 0.1))} disabled={flowZoom <= 0.25} aria-label="缩小">−</button>
+            <span>{Math.round(flowZoom * 100)}%</span>
+            <button type="button" onClick={() => setFlowZoom((z) => Math.min(2, z + 0.1))} disabled={flowZoom >= 2} aria-label="放大">+</button>
+          </div>
         </div>
 
         <div className="ecom-video-step-dots" aria-label="策划进度">
@@ -645,12 +649,6 @@ export default function EcommerceVideoWorkspace({
           })}
         </div>
 
-        <div className="ecom-video-flowbar__zoom">
-          <button type="button" onClick={() => setFlowZoom((z) => Math.max(0.25, z - 0.1))} disabled={flowZoom <= 0.25} aria-label="缩小">−</button>
-          <span>{Math.round(flowZoom * 100)}%</span>
-          <button type="button" onClick={() => setFlowZoom((z) => Math.min(2, z + 0.1))} disabled={flowZoom >= 2} aria-label="放大">+</button>
-        </div>
-
         <div className="ecom-video-flowbar__actions">
           {onOpenHistory ? (
             <button type="button" className="ecom-video-flow-action ecom-video-flow-action--ghost" onClick={onOpenHistory} title="生成记录">
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css
index 6f3b886..abea8bf 100644
--- a/src/styles/ecommerce-standalone.css
+++ b/src/styles/ecommerce-standalone.css
@@ -4817,6 +4817,63 @@
   font-weight: 750 !important;
 }
 
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-head {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) auto !important;
+  align-items: start !important;
+  gap: 16px !important;
+  min-height: 0 !important;
+  padding: 0 0 18px !important;
+  border: 0 !important;
+  border-bottom: 1px solid rgba(16, 115, 204, 0.08) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy {
+  display: grid !important;
+  gap: 8px !important;
+  justify-items: start !important;
+  min-width: 0 !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy h1 {
+  margin: 0 !important;
+  color: #172636 !important;
+  font-size: 21px !important;
+  font-weight: 950 !important;
+  line-height: 1.25 !important;
+  letter-spacing: 0 !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy p {
+  margin: 0 !important;
+  color: #657686 !important;
+  font-size: 13px !important;
+  font-weight: 750 !important;
+  line-height: 1.55 !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy p span {
+  color: #1073cc !important;
+  font-weight: 950 !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-head .ecom-video-flowbar__zoom {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-head .ecom-video-step-dots {
+  display: none !important;
+}
+
+.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-head .ecom-video-flowbar__actions {
+  align-self: start !important;
+  min-height: 24px !important;
+}
+
 /* ── Step dots — light theme ──────────────────────── */
 .ecommerce-standalone .ecom-hot-video-page .ecom-video-step-dot {
   background: #cfd8dc !important;