OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: align hot video preview header

Browse Source
This commit is contained in:
Codex
2026-06-11 23:56:27 +08:00
parent 13a7c3ba5a
commit 9ff3a6880b
2 changed files with 67 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/ecommerce/EcommerceVideoWorkspace.tsx
+10 -12
View File
@@ -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="生成记录">
src/styles/ecommerce-standalone.css
+57
View File
@@ -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;