From dbb4e57810aeee75113cdb4e645eb845fcdfaf94 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Fri, 2 Oct 2026 10:31:36 +0800 Subject: [PATCH] =?UTF-8?q?feat(viral-video):=20v1.6=20=E6=9A=97=E8=89=B2?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=20+=20=E5=88=86=E9=95=9C=E8=84=9A=E6=9C=AC?= =?UTF-8?q?=E7=BA=BF=E6=80=A7=E6=96=87=E6=A1=A3=E9=A3=8E=E6=A0=BC=20+=20ST?= =?UTF-8?q?EP3=E6=94=B9=E7=89=88=20(#2135)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xiaoxia Co-committed-by: xiaoxia --- .../src/pages/viral-video/ViralVideoPage.css | 2525 ++++++++--------- .../src/pages/viral-video/ViralVideoPage.tsx | 396 +-- 2 files changed, 1422 insertions(+), 1499 deletions(-) diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css index 530527c8a..7169265b9 100644 --- a/apps/web/src/pages/viral-video/ViralVideoPage.css +++ b/apps/web/src/pages/viral-video/ViralVideoPage.css @@ -1,17 +1,36 @@ /* ============================================================ - 爆款视频创作页 - 浅色紫调（对齐 AI 数字人页视觉规范） + 爆款视频创作页 - 深蓝黑 + Cyan 暗色主题 布局：三列等宽 STEP 向导 - .vv-tabs 顶栏多任务 Tab（生成1 × / + 新建） - .vv-grid 三列等宽 grid - ├── .vv-col 左：STEP 1 上传图片+参考视频+参考音频+识别汇览 - ├── .vv-col 中：STEP 2 融合档位+视频参数+AI 文案理解 - └── .vv-col 右：STEP 3 视频预览+视频设置+扣点+状态按钮 ============================================================ */ +* { + box-sizing: border-box; +} + .vv-page { padding: 16px; - background: #f5f6fa; + background: #0b1220; min-height: calc(100vh - 56px); + color: #e6edf7; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 13px; +} + +/* scrollbar dark */ +.vv-page ::-webkit-scrollbar { + width: 8px; + height: 8px; +} +.vv-page ::-webkit-scrollbar-track { + background: transparent; +} +.vv-page ::-webkit-scrollbar-thumb { + background: #1e2d45; + border-radius: 4px; +} +.vv-page ::-webkit-scrollbar-thumb:hover { + background: #334155; } /* ── 顶部任务 Tab 栏 ─────────────────────────────────── */ @@ -21,9 +40,9 @@ gap: 6px; margin-bottom: 14px; padding: 6px 8px; - background: #fff; + background: #0f1a2e; border-radius: 10px; - border: 1px solid #e5e7eb; + border: 1px solid #1e2d45; flex-wrap: wrap; } .vv-tab { @@ -33,20 +52,20 @@ padding: 6px 12px; border-radius: 6px; font-size: 13px; - color: #6b7280; + color: #94a3b8; cursor: pointer; border: 1px solid transparent; background: transparent; transition: all 0.15s; } .vv-tab:hover { - background: #f3f4f6; - color: #374151; + background: rgba(34, 211, 238, 0.08); + color: #e6edf7; } .vv-tab.active { - background: #f3f0ff; - color: #7c3aed; - border-color: #d8cafc; + background: rgba(34, 211, 238, 0.12); + color: #22d3ee; + border-color: rgba(34, 211, 238, 0.4); font-weight: 500; } .vv-tab .vv-tab-close { @@ -57,11 +76,14 @@ align-items: center; justify-content: center; font-size: 12px; - color: #9ca3af; + color: #64748b; + background: transparent; + border: none; + cursor: pointer; } .vv-tab .vv-tab-close:hover { - background: rgba(0, 0, 0, 0.08); - color: #374151; + background: rgba(248, 113, 113, 0.2); + color: #f87171; } .vv-tab-new { display: inline-flex; @@ -70,13 +92,13 @@ padding: 6px 10px; border-radius: 6px; font-size: 13px; - color: #7c3aed; + color: #22d3ee; cursor: pointer; - border: 1px dashed #d8cafc; + border: 1px dashed rgba(34, 211, 238, 0.4); background: transparent; } .vv-tab-new:hover { - background: #f3f0ff; + background: rgba(34, 211, 238, 0.1); } .vv-tabs-right { margin-left: auto; @@ -110,8 +132,8 @@ /* ── 模块卡片 ──────────────────────────────────────── */ .vv-section { - background: #fff; - border: 1px solid #e5e7eb; + background: #111a2e; + border: 1px solid #1e2d45; border-radius: 12px; overflow: hidden; } @@ -122,7 +144,7 @@ padding: 14px 16px; cursor: pointer; user-select: none; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid #1e2d45; gap: 8px; } .vv-section.collapsed .vv-section-head { @@ -134,21 +156,25 @@ gap: 8px; font-size: 15px; font-weight: 600; - color: #111827; + color: #e6edf7; } .vv-step-badge { width: 22px; height: 22px; border-radius: 50%; - background: #7c3aed; - color: #fff; + background: #22d3ee; + color: #0b1220; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; - font-weight: 600; + font-weight: 700; flex-shrink: 0; } +.vv-step-badge-dim { + background: #1e2d45; + color: #64748b; +} .vv-section-body { padding: 14px 16px 16px; } @@ -156,31 +182,69 @@ display: none; } -/* ── STEP 1 标题（不带折叠，与截图一致） ─────────── */ +/* ── STEP 1 标题 ─────────── */ .vv-step1-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid #1e2d45; } .vv-step1-title { font-size: 17px; font-weight: 700; - color: #111827; + color: #e6edf7; letter-spacing: 0.2px; } +/* STEP 3 head with history button */ +.vv-step-subhead { + display: flex; + align-items: center; + gap: 10px; + padding: 14px 16px; + border-bottom: 1px solid #1e2d45; +} +.vv-step3-head { + justify-content: space-between; +} +.vv-step3-head-left { + display: flex; + align-items: center; + gap: 10px; + flex: 1; +} +.vv-step-subtitle { + font-size: 16px; + font-weight: 700; + color: #e6edf7; +} +.vv-step-lock { + margin-left: auto; + color: #64748b; + font-size: 12px; +} +.vv-step3-divider { + height: 1px; + background: rgba(34, 211, 238, 0.3); + margin: 0; +} +.vv-history-btn { + margin-left: auto; + padding: 4px 10px !important; + font-size: 12px !important; +} + /* ── 通用表单元素 ─────────────────────────────────── */ .vv-input, .vv-textarea { width: 100%; - border: 1px solid #e5e7eb; + border: 1px solid #1e2d45; border-radius: 8px; padding: 9px 12px; font-size: 13px; - color: #111827; - background: #fff; + color: #e6edf7; + background: #0f1a2e; outline: none; transition: border-color 0.15s, @@ -191,262 +255,322 @@ height: 36px; padding: 0 12px; } -.vv-input:disabled { - background: #f9fafb; - color: #9ca3af; +.vv-input:disabled, +.vv-textarea:disabled { + background: #0a1220; + color: #475569; cursor: not-allowed; } .vv-input::placeholder, .vv-textarea::placeholder { - color: #9ca3af; + color: #64748b; } +.vv-input:hover:not(:disabled), +.vv-textarea:hover:not(:disabled) { + border-color: #334155; +} +.vv-input:focus, +.vv-textarea:focus { + border-color: #22d3ee; + box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18); +} +.vv-textarea { + resize: vertical; + line-height: 1.6; + min-height: 60px; +} + +/* antd Input overrides inside dark page */ +.vv-page .ant-input, +.vv-page .ant-input-affix-wrapper { + background: #0f1a2e !important; + border-color: #1e2d45 !important; + color: #e6edf7 !important; +} +.vv-page .ant-input:hover, +.vv-page .ant-input-affix-wrapper:hover { + border-color: #334155 !important; +} +.vv-page .ant-input:focus, +.vv-page .ant-input-affix-wrapper-focused { + border-color: #22d3ee !important; + box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18) !important; +} +.vv-page .ant-input::placeholder { + color: #64748b !important; +} +.vv-page .ant-input-affix-wrapper .ant-input { + background: transparent !important; + color: #e6edf7 !important; +} +.vv-page .ant-input-prefix { + color: #64748b; +} + +/* antd Select dropdown dark */ +.vv-page .ant-select-dropdown, +.vv-select-dropdown { + background: #1a2540 !important; + border-radius: 8px !important; + padding: 4px !important; +} +.vv-page .ant-select-item { + color: #cbd5e1 !important; + border-radius: 6px !important; + font-size: 13px !important; + padding: 8px 12px !important; +} +.vv-page .ant-select-item-option-active { + background: #223353 !important; +} +.vv-page .ant-select-item-option-selected { + background: rgba(34, 211, 238, 0.2) !important; + color: #22d3ee !important; + font-weight: 500; +} + .vv-select { width: 100%; } .vv-select .ant-select-selector { + background: #0f1a2e !important; + border: 1px solid #1e2d45 !important; + color: #e6edf7 !important; border-radius: 8px !important; - border-color: #e5e7eb !important; - box-shadow: none !important; - height: 36px !important; padding: 0 12px !important; - transition: - border-color 0.15s, - box-shadow 0.15s !important; + min-height: 36px !important; + height: 36px !important; + font-size: 13px !important; + transition: all 0.15s !important; + box-shadow: none !important; +} +.vv-select:hover .ant-select-selector { + border-color: #334155 !important; } .vv-select.ant-select-focused .ant-select-selector, .vv-select.ant-select-open .ant-select-selector { - border-color: #7c3aed !important; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1) !important; + border-color: #22d3ee !important; + box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18) !important; } -.vv-select .ant-select-selection-item { - font-size: 13px !important; - color: #111827 !important; +.vv-select .ant-select-selection-item, +.vv-select .ant-select-selection-placeholder { + color: #e6edf7 !important; line-height: 34px !important; + font-size: 13px !important; } .vv-select .ant-select-selection-placeholder { - font-size: 13px !important; - color: #d1d5db !important; - line-height: 34px !important; + color: #64748b !important; } .vv-select .ant-select-arrow { - color: #9ca3af; - inset-inline-end: 10px; + color: #94a3b8 !important; } .vv-select.ant-select-disabled .ant-select-selector { - background: #f9fafb !important; - color: #9ca3af !important; + background: #0a1220 !important; + color: #475569 !important; cursor: not-allowed; } -.vv-select.ant-select-disabled .ant-select-selection-item, -.vv-select.ant-select-disabled .ant-select-selection-placeholder { - color: #9ca3af !important; +.vv-select-step3 .ant-select-selector { + border-radius: 12px !important; + height: 42px !important; + min-height: 42px !important; } -.vv-textarea { - line-height: 1.6; - resize: vertical; - min-height: 90px; +.vv-select-step3 .ant-select-selection-item, +.vv-select-step3 .ant-select-selection-placeholder { + line-height: 40px !important; } -.vv-input:focus, -.vv-textarea:focus { - border-color: #7c3aed; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1); -} - -/* ── Tab 分段 ─────────────────────────────────────── */ -.vv-seg-tabs { - display: flex; - gap: 8px; - margin-bottom: 12px; - border-radius: 8px; - padding: 3px; - background: #f5f6fa; -} -.vv-seg-tab { - flex: 1; - padding: 7px 10px; - font-size: 13px; - text-align: center; - border-radius: 6px; - cursor: pointer; - color: #6b7280; - background: transparent; - border: 1px solid transparent; - transition: all 0.15s; - font-family: inherit; -} -.vv-seg-tab:hover { - color: #374151; -} -.vv-seg-tab.active { - background: #fff; - color: #7c3aed; - border-color: #7c3aed; - font-weight: 500; - box-shadow: 0 1px 2px rgba(124, 58, 237, 0.06); -} - -/* 融合档位大按钮 */ -.vv-fusion-grid { +.vv-step3-grid { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; - margin-bottom: 12px; -} -.vv-fusion-btn { - padding: 10px 8px; - border: 1px solid #e5e7eb; - background: #fff; - border-radius: 8px; - font-size: 12px; - cursor: pointer; - color: #6b7280; - text-align: center; - line-height: 1.4; - transition: all 0.15s; - font-family: inherit; -} -.vv-fusion-btn strong { - display: block; - font-size: 13px; - color: #111827; - margin-bottom: 2px; - font-weight: 600; -} -.vv-fusion-btn:hover { - border-color: #d8cafc; -} -.vv-fusion-btn.active { - background: #f3f0ff; - border-color: #7c3aed; - color: #7c3aed; -} -.vv-fusion-btn.active strong { - color: #7c3aed; + grid-template-columns: 1fr 1fr; + gap: 12px; } -/* 小标签按钮 */ -.vv-pill-row { - display: flex; - gap: 6px; - flex-wrap: wrap; -} -.vv-pill { - padding: 6px 12px; - border: 1px solid #e5e7eb; - background: #fff; - border-radius: 6px; +/* ── Labels ─────────────────────────────── */ +.vv-label { + display: block; font-size: 12px; - color: #6b7280; - cursor: pointer; - font-family: inherit; - transition: all 0.15s; -} -.vv-pill:hover { - border-color: #d8cafc; - color: #7c3aed; -} -.vv-pill.active { - background: #f3f0ff; - border-color: #7c3aed; - color: #7c3aed; + color: #94a3b8; + margin-bottom: 6px; font-weight: 500; } -.vv-pill:disabled, -.vv-fusion-btn:disabled { - opacity: 0.5; - cursor: not-allowed; +.vv-label-optional { + color: #64748b; + font-weight: 400; +} +.vv-muted { + color: #64748b; + font-size: 12px; } -/* ── STEP1 操作按钮（截图：白底圆角按钮，hover紫边紫底） ── */ -.vv-action-row { - display: flex; - gap: 10px; - margin-bottom: 10px; -} -.vv-action-btn { - flex: 1; +/* ── Buttons ─────────────────────────────── */ +.vv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; - padding: 10px 14px; border-radius: 8px; - border: 1px solid #e5e7eb; - background: #fff; - color: #374151; + padding: 9px 16px; font-size: 13px; font-weight: 500; cursor: pointer; + border: 1px solid transparent; transition: all 0.15s; font-family: inherit; + line-height: 1.2; +} +.vv-btn-primary { + background: linear-gradient(135deg, #06b6d4, #22d3ee); + color: #fff; + width: 100%; + padding: 11px 16px; + border: none; +} +.vv-btn-primary:hover:not(:disabled) { + filter: brightness(1.1); + box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3); +} +.vv-btn-primary:disabled, +.vv-btn-disabled-gray { + background: #334155 !important; + color: #64748b !important; + cursor: not-allowed; + box-shadow: none; + filter: none; +} +.vv-btn-ghost { + background: transparent; + color: #22d3ee; + border: 1px solid #22d3ee; +} +.vv-btn-ghost:hover { + background: rgba(34, 211, 238, 0.12); + color: #22d3ee; +} +.vv-btn-block { + width: 100%; +} +.vv-btn-sm { + padding: 6px 12px; + font-size: 12px; +} +.vv-btn-xs { + padding: 4px 10px; + font-size: 12px; + border-radius: 6px; +} +.vv-btn-warn { + background: rgba(248, 113, 113, 0.12); + color: #f87171; + border-color: rgba(248, 113, 113, 0.3); +} +.vv-btn-warn:hover { + background: rgba(248, 113, 113, 0.2); + color: #fca5a5; +} + +.vv-link-btn { + background: transparent; + border: none; + color: #22d3ee; + font-size: 12px; + cursor: pointer; + padding: 2px 4px; +} +.vv-link-btn:hover { + text-decoration: underline; +} +.vv-link-btn:disabled { + color: #64748b; + cursor: not-allowed; + text-decoration: none; +} + +/* ── Action buttons (upload/select) ─────────────────── */ +.vv-action-row { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 10px; +} +.vv-action-btn { + flex: 1; + min-width: 120px; + padding: 10px 12px; + background: #0f1a2e; + border: 1px solid #1e2d45; + border-radius: 8px; + color: #cbd5e1; + font-size: 13px; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + transition: all 0.15s; } .vv-action-btn:hover:not(:disabled) { - border-color: #7c3aed; - color: #7c3aed; - background: #f9f7ff; + border-color: #22d3ee; + color: #22d3ee; + background: rgba(34, 211, 238, 0.08); } .vv-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } -/* 已选计数 + 清空 */ .vv-count-row { display: flex; align-items: center; justify-content: space-between; - margin: 4px 0 10px; - font-size: 13px; + margin-bottom: 10px; + font-size: 12px; +} +.vv-count-row strong { + color: #e6edf7; } -/* 文件列表（图片/视频展示，和截图一致：缩略图左 + 文件名/大小 中 + 操作右） */ +/* ── File list ──────────────────────────── */ .vv-file-list { display: flex; flex-direction: column; - gap: 8px; + gap: 6px; margin-bottom: 12px; + max-height: 260px; + overflow-y: auto; + padding-right: 4px; } .vv-file-item { display: flex; align-items: center; gap: 10px; - padding: 8px 10px; - border: 1px solid #e5e7eb; + padding: 8px; + background: #0f1a2e; + border: 1px solid #1e2d45; border-radius: 8px; - background: #fff; - transition: all 0.15s; -} -.vv-file-item:hover { - border-color: #d8cafc; } .vv-file-thumb { position: relative; - width: 52px; - height: 52px; + width: 44px; + height: 44px; border-radius: 6px; overflow: hidden; - background: #f5f6fa; flex-shrink: 0; - border: 1px solid #f3f4f6; + background: #0a1220; } .vv-file-thumb img { width: 100%; height: 100%; object-fit: cover; } -.vv-file-thumb .vv-img-badge { +.vv-img-badge { position: absolute; top: 2px; left: 2px; -} -.vv-img-badge { - background: rgba(124, 58, 237, 0.92); - color: #fff; + background: rgba(34, 211, 238, 0.9); + color: #0b1220; font-size: 10px; - font-weight: 600; - padding: 1px 6px; + font-weight: 700; + padding: 1px 5px; border-radius: 4px; - line-height: 1.4; } .vv-file-info { flex: 1; @@ -454,16 +578,16 @@ } .vv-file-name { font-size: 13px; - color: #111827; - font-weight: 500; + color: #e6edf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-weight: 500; } .vv-file-sub { font-size: 11px; - color: #9ca3af; - margin-top: 3px; + color: #64748b; + margin-top: 2px; display: flex; align-items: center; gap: 6px; @@ -474,39 +598,37 @@ flex-shrink: 0; } .vv-icon-btn { - width: 26px; - height: 26px; + width: 28px; + height: 28px; border-radius: 6px; - border: 1px solid #e5e7eb; - background: #fff; - color: #6b7280; + border: none; + background: transparent; + color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; - font-size: 11px; + font-size: 12px; transition: all 0.15s; } .vv-icon-btn:hover:not(:disabled) { - border-color: #7c3aed; - color: #7c3aed; - background: #f9f7ff; + background: rgba(34, 211, 238, 0.12); + color: #22d3ee; } .vv-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .vv-icon-btn-danger:hover:not(:disabled) { - border-color: #ef4444; - color: #ef4444; - background: #fef2f2; + background: rgba(248, 113, 113, 0.15); + color: #f87171; } -/* ── 子区块（参考视频 / 参考音频 带"选填"标签） ──── */ +/* ── Subblock ───────────────────────── */ .vv-subblock { - margin-top: 16px; + margin-top: 14px; padding-top: 14px; - border-top: 1px dashed #e5e7eb; + border-top: 1px dashed #1e2d45; } .vv-subblock-head { display: flex; @@ -515,45 +637,41 @@ margin-bottom: 10px; } .vv-subblock-title { - font-size: 14px; + font-size: 13px; font-weight: 600; - color: #111827; + color: #e6edf7; } .vv-opt-tag { - font-size: 11px; - color: #9ca3af; - background: #f3f4f6; - border-radius: 4px; + font-size: 10px; + background: rgba(34, 211, 238, 0.12); + color: #22d3ee; padding: 1px 6px; + border-radius: 4px; } .vv-subblock-hint { - margin-left: auto; font-size: 11px; - color: #9ca3af; + color: #64748b; + margin-left: auto; } -/* 抖音链接输入 */ .vv-douyin-input { - margin-bottom: 10px; + margin-bottom: 8px; } -/* 参考视频已选预览 */ .vv-ref-video-box { - margin-top: 10px; + margin-top: 8px; } .vv-ref-video-el { width: 100%; border-radius: 8px; background: #000; - border: 1px solid #e5e7eb; + max-height: 200px; } -/* ── 参考音频 2x2 网格 ──────────────────────────── */ .vv-audio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; - margin-bottom: 10px; } .vv-audio-cell { display: flex; @@ -561,119 +679,86 @@ align-items: center; justify-content: center; gap: 6px; - padding: 16px 10px; - border-radius: 10px; - border: 1.5px solid #e5e7eb; - background: #fff; - color: #374151; - font-size: 13px; - font-weight: 500; + padding: 14px 8px; + background: #0f1a2e; + border: 1px solid #1e2d45; + border-radius: 8px; + color: #94a3b8; + font-size: 12px; cursor: pointer; transition: all 0.15s; - font-family: inherit; -} -.vv-audio-ic { - font-size: 22px; - color: #9ca3af; - transition: color 0.15s; } .vv-audio-cell:hover:not(:disabled) { - border-color: #7c3aed; - color: #7c3aed; - background: #f9f7ff; -} -.vv-audio-cell:hover:not(:disabled) .vv-audio-ic { - color: #7c3aed; + border-color: #22d3ee; + color: #22d3ee; } +.vv-audio-cell.selected, .vv-audio-cell.active { - border-color: #7c3aed; - background: #f3f0ff; - color: #7c3aed; -} -.vv-audio-cell.active .vv-audio-ic { - color: #7c3aed; -} -.vv-audio-cell.selected { - border-color: #7c3aed; - background: #f3f0ff; - color: #7c3aed; -} -.vv-audio-cell.selected .vv-audio-ic { - color: #7c3aed; + background: rgba(34, 211, 238, 0.12); + border-color: #22d3ee; + color: #22d3ee; } .vv-audio-cell:disabled { opacity: 0.5; cursor: not-allowed; } +.vv-audio-ic { + font-size: 20px; +} .vv-selected-audio { display: flex; align-items: center; - gap: 8px; + gap: 6px; padding: 8px 10px; - background: #f3f0ff; - border: 1px solid #d8cafc; + background: rgba(34, 211, 238, 0.12); + border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 8px; + margin-top: 8px; font-size: 12px; - color: #5b21b6; - margin-bottom: 10px; + color: #e6edf7; } -/* 展开的音色列表面板 */ .vv-voice-panel { - border: 1px solid #f3f4f6; + margin-top: 8px; + border: 1px solid #1e2d45; border-radius: 8px; - margin-bottom: 10px; - overflow: hidden; -} -.vv-voice-list { + background: #0f1a2e; + padding: 8px; max-height: 240px; overflow-y: auto; } -.vv-voice-list::-webkit-scrollbar { - width: 6px; -} -.vv-voice-list::-webkit-scrollbar-thumb { - background: #e5e7eb; - border-radius: 3px; +.vv-voice-list { + display: flex; + flex-direction: column; + gap: 4px; } .vv-voice-item { display: flex; align-items: center; gap: 10px; - padding: 10px 12px; - border-bottom: 1px solid #f3f4f6; + padding: 8px 10px; + border-radius: 6px; cursor: pointer; transition: background 0.15s; } -.vv-voice-item:last-child { - border-bottom: none; -} .vv-voice-item:hover { - background: #f9fafb; + background: #152238; } .vv-voice-item.selected { - background: #f3f0ff; + background: rgba(34, 211, 238, 0.12); } .vv-voice-radio { - width: 16px; - height: 16px; + width: 14px; + height: 14px; border-radius: 50%; - border: 2px solid #d1d5db; + border: 2px solid #334155; flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; } .vv-voice-item.selected .vv-voice-radio { - border-color: #7c3aed; -} -.vv-voice-item.selected .vv-voice-radio::after { - content: ""; - width: 8px; - height: 8px; - border-radius: 50%; - background: #7c3aed; + border-color: #22d3ee; + background: #22d3ee; + box-shadow: inset 0 0 0 2px #0f1a2e; } .vv-voice-info { flex: 1; @@ -681,156 +766,646 @@ } .vv-voice-name { font-size: 13px; - color: #111827; + color: #e6edf7; font-weight: 500; } .vv-voice-desc { font-size: 11px; - color: #9ca3af; - margin-top: 2px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + color: #64748b; } .vv-voice-play { width: 28px; height: 28px; border-radius: 50%; - border: 1px solid #e5e7eb; - background: #fff; - color: #6b7280; + border: none; + background: rgba(34, 211, 238, 0.12); + color: #22d3ee; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; - font-size: 12px; - flex-shrink: 0; - transition: all 0.15s; } .vv-voice-play:hover { - border-color: #7c3aed; - color: #7c3aed; + background: rgba(34, 211, 238, 0.2); } .vv-voice-play.playing { - background: #7c3aed; - border-color: #7c3aed; - color: #fff; + background: #22d3ee; + color: #0b1220; } -/* 折叠提示 */ .vv-tips { - margin-top: 6px; - font-size: 12px; + margin-top: 10px; } .vv-tips-head { - background: none; - border: none; - padding: 0; - color: #9ca3af; - cursor: pointer; - display: inline-flex; + display: flex; align-items: center; gap: 4px; + background: transparent; + border: none; + color: #94a3b8; font-size: 12px; - font-family: inherit; + cursor: pointer; + padding: 4px 0; } .vv-tips-head:hover { - color: #7c3aed; + color: #22d3ee; } .vv-tips-body { margin-top: 6px; padding: 8px 10px; - background: #f9fafb; + background: rgba(250, 204, 21, 0.08); + border: 1px solid rgba(250, 204, 21, 0.2); border-radius: 6px; - color: #6b7280; - font-size: 11px; + font-size: 12px; + color: #facc15; line-height: 1.6; } -/* ── 识别描述汇览 ─────────────────────────────────── */ +/* ── Recognition 汇览 ──────────────────────── */ .vv-recog { - margin-top: 16px; - padding-top: 14px; - border-top: 1px dashed #e5e7eb; + margin-top: 14px; + padding: 12px; + background: #0f1a2e; + border: 1px solid #1e2d45; + border-radius: 8px; + font-size: 12px; + line-height: 1.7; } .vv-recog-title { + font-weight: 600; + color: #22d3ee; + margin-bottom: 8px; display: flex; align-items: center; gap: 6px; - font-size: 14px; - font-weight: 600; - color: #111827; - margin-bottom: 8px; + font-size: 13px; } .vv-recog-item { - padding: 10px 12px; - background: #f9fafb; - border-radius: 8px; - font-size: 13px; - line-height: 1.7; - color: #374151; + margin-bottom: 8px; } -.vv-recog-line + .vv-recog-line { - margin-top: 4px; +.vv-recog-item:last-child { + margin-bottom: 0; +} +.vv-recog-line { + display: flex; + gap: 4px; + flex-wrap: wrap; + margin-bottom: 2px; } .vv-recog-k { - color: #6b7280; - font-weight: 500; + color: #94a3b8; + flex-shrink: 0; +} +.vv-recog-v { + color: #e6edf7; +} +.vv-recog-meta { + color: #64748b; } -/* ── AI 摘要确认卡 ────────────────────────────────── */ -.vv-intent { - background: #fffbeb; - border: 1px solid #fcd34d; +/* progress mini */ +.vv-progress-mini-inline { + display: inline-block; + width: 10px; + height: 10px; + border: 2px solid rgba(34, 211, 238, 0.25); + border-top-color: #22d3ee; + border-radius: 50%; + animation: vv-spin 0.8s linear infinite; + vertical-align: middle; + margin-right: 4px; +} +.vv-progress-bar { + width: 100%; + height: 4px; + background: #1e2d45; + border-radius: 2px; + overflow: hidden; +} +.vv-progress-fill { + height: 100%; + background: linear-gradient(90deg, #06b6d4, #22d3ee); + transition: width 0.2s; +} + +/* ── Spinner ─────────────────── */ +.vv-spinner { + display: inline-block; + width: 14px; + height: 14px; + border: 2px solid rgba(34, 211, 238, 0.25); + border-top-color: #22d3ee; + border-radius: 50%; + animation: vv-spin 0.8s linear infinite; + vertical-align: middle; +} +@keyframes vv-spin { + to { + transform: rotate(360deg); + } +} + +/* ── Pill (style strength pills) ────────────── */ +.vv-pill-row { + display: flex; + gap: 6px; + flex-wrap: wrap; +} +.vv-pill { + padding: 5px 12px; + background: #0f1a2e; + border: 1px solid #1e2d45; + color: #cbd5e1; + border-radius: 16px; + font-size: 12px; + cursor: pointer; + transition: all 0.15s; +} +.vv-pill:hover:not(:disabled) { + border-color: rgba(34, 211, 238, 0.5); + color: #e6edf7; +} +.vv-pill.active { + background: rgba(34, 211, 238, 0.12); + border-color: #22d3ee; + color: #22d3ee; + font-weight: 500; +} +.vv-pill:disabled { + opacity: 0.5; + cursor: not-allowed; +} +.vv-mt-8 { + margin-top: 8px; +} + +/* ── Fusion grid ─────────────────── */ +.vv-section-subtitle { + font-size: 13px; + font-weight: 600; + color: #e6edf7; + margin-bottom: 8px; + margin-top: 4px; +} +.vv-fusion-grid { + display: grid; + grid-template-columns: 1fr; + gap: 8px; + margin-bottom: 12px; +} +.vv-fusion-btn { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; + padding: 10px 12px; + background: #0f1a2e; + border: 1px solid #1e2d45; + border-radius: 8px; + color: #94a3b8; + cursor: pointer; + text-align: left; + font-size: 12px; + transition: all 0.15s; + font-family: inherit; +} +.vv-fusion-btn strong { + font-size: 13px; + color: inherit; + font-weight: 600; +} +.vv-fusion-btn:hover:not(:disabled) { + border-color: rgba(34, 211, 238, 0.5); + color: #cbd5e1; +} +.vv-fusion-btn.active { + background: rgba(34, 211, 238, 0.12); + border-color: #22d3ee; + color: #22d3ee; +} +.vv-fusion-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ── Form grid (STEP2 params) ─────────────── */ +.vv-form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-top: 12px; +} +.vv-form-row { + margin-bottom: 10px; +} +@media (max-width: 500px) { + .vv-form-grid { + grid-template-columns: 1fr; + } +} + +/* ── Copy / storyboard box ─────────────── */ +.vv-copy-box { + background: #111a2e; + border: 1px solid #1e2d45; border-radius: 10px; padding: 14px; + margin-top: 12px; } -.vv-intent-title { +.vv-copy-head { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 12px; +} +.vv-copy-title { + font-size: 14px; + font-weight: 600; + color: #e6edf7; +} +.vv-copy-tag { + font-size: 11px; + padding: 2px 8px; + border-radius: 10px; + font-weight: 400; +} +.vv-copy-tag-preview { + background: rgba(250, 204, 21, 0.12); + color: #facc15; + border: 1px solid rgba(250, 204, 21, 0.3); + margin-left: auto; +} + +.vv-copy-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 28px 16px; + gap: 10px; + background: #111a2e; + border: 1px solid #1e2d45; +} +.vv-copy-loading .vv-spinner { + width: 28px; + height: 28px; + border-width: 3px; +} +.vv-copy-loading-text { + color: #e6edf7; + font-weight: 500; + font-size: 14px; + text-align: center; +} +.vv-copy-loading-hint { + font-size: 12px; + color: #64748b; +} + +.vv-copy-locked { + background: rgba(34, 211, 238, 0.06); + border-color: rgba(34, 211, 238, 0.2); +} +.vv-copy-sub { + font-size: 12px; + color: #64748b; +} + +/* ── Storyboard (linear doc style) ── */ +.vv-storyboard { + padding: 16px 4px; + background: transparent; + border: none; +} + +.vv-sb-doc { + display: flex; + flex-direction: column; + gap: 6px; + color: #e6edf7; + font-size: 13px; + line-height: 1.7; +} +.vv-sb-h { + margin: 14px 0 6px; + padding: 0; + font-size: 14px; + font-weight: 700; + color: #e6edf7; + display: flex; + align-items: center; +} +.vv-sb-h:first-child { + margin-top: 0; +} +.vv-sb-kv { + display: flex; + align-items: flex-start; + gap: 6px; + font-size: 13px; + line-height: 1.7; +} +.vv-sb-k { + flex-shrink: 0; + color: #94a3b8; + font-weight: 500; + min-width: 120px; +} +.vv-sb-kv-ref { + align-items: center; +} +.vv-sb-inline { + flex: 1; + border: none; + background: transparent; + color: #e6edf7; + font-size: 13px; + font-family: inherit; + padding: 2px 4px; + outline: none; + border-radius: 4px; +} +.vv-sb-inline-input { + border-bottom: 1px dashed transparent; + transition: border-color 0.15s; +} +.vv-sb-inline-input:hover, +.vv-sb-inline-input:focus { + border-bottom-color: rgba(34, 211, 238, 0.5); + background: rgba(34, 211, 238, 0.05); +} +.vv-sb-inline:disabled { + color: #cbd5e1; + cursor: default; +} +.vv-sb-inline-select { + min-width: 120px; +} +.vv-sb-inline-select .ant-select-selector { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding-left: 0 !important; +} +.vv-sb-inline-select .ant-select-selection-item, +.vv-sb-inline-select .ant-select-selection-placeholder { + color: #e6edf7 !important; + font-size: 13px !important; + line-height: 24px !important; + padding-left: 0 !important; +} +.vv-sb-doc-ta { + flex: 1; + min-height: 48px; + background: transparent !important; + border: 1px dashed transparent !important; + padding: 4px 6px !important; + font-size: 13px !important; + line-height: 1.7 !important; + color: #e6edf7 !important; + border-radius: 4px; + resize: vertical; + transition: + border-color 0.15s, + background 0.15s; +} +.vv-sb-doc-ta:hover, +.vv-sb-doc-ta:focus { + border-color: rgba(34, 211, 238, 0.4) !important; + background: rgba(34, 211, 238, 0.04) !important; +} +.vv-sb-doc-ta-sm { + min-height: 32px; +} +.vv-sb-doc-shots { + display: flex; + flex-direction: column; + gap: 14px; + margin-top: 4px; +} +.vv-sb-doc-shot { + padding-left: 8px; + border-left: 2px solid rgba(34, 211, 238, 0.25); +} +.vv-sb-doc-shot-head { + margin-bottom: 2px; +} +.vv-sb-time-doc { + font-size: 14px; + font-weight: 700; + color: #22d3ee; + background: transparent; + border: none; + outline: none; + padding: 2px 4px; + font-family: inherit; + border-radius: 4px; +} +.vv-sb-time-doc:focus { + background: rgba(34, 211, 238, 0.08); +} + +.vv-sb-ref-badge { + position: relative; + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 6px 2px 4px; + background: rgba(34, 211, 238, 0.1); + border: 1px solid rgba(34, 211, 238, 0.3); + border-radius: 6px; + color: #22d3ee; + font-size: 12px; +} +.vv-sb-ref-thumb { + width: 36px; + height: 36px; + object-fit: cover; + border-radius: 4px; +} +.vv-sb-ref-x { + background: rgba(0, 0, 0, 0.5); + color: #fff; + border: none; + width: 16px; + height: 16px; + border-radius: 50%; + font-size: 10px; + line-height: 1; + cursor: pointer; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; +} +.vv-sb-ref-x:hover { + background: #f87171; +} +.vv-sb-ref-pick { + display: inline-flex; + gap: 4px; + flex-wrap: wrap; +} +.vv-sb-ref-opt { + width: 36px; + height: 36px; + border-radius: 4px; + border: 1px dashed #1e2d45; + background: #0f1a2e; + padding: 0; + overflow: hidden; + cursor: pointer; + transition: border-color 0.15s; +} +.vv-sb-ref-opt:hover { + border-color: #22d3ee; +} +.vv-sb-ref-opt img { + width: 100%; + height: 100%; + object-fit: cover; +} +.vv-sb-muted { + color: #64748b; + font-size: 12px; +} + +.vv-sb-taglist { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 4px; +} +.vv-sb-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 8px; + border-radius: 6px; + font-size: 12px; + border: 1px solid transparent; +} +.vv-sb-tag-hard { + background: rgba(34, 211, 238, 0.1); + color: #22d3ee; + border-color: rgba(34, 211, 238, 0.3); +} +.vv-sb-tag-neg { + background: rgba(248, 113, 113, 0.1); + color: #f87171; + border-color: rgba(248, 113, 113, 0.3); +} +.vv-sb-tag-input { + background: transparent; + border: none; + outline: none; + color: inherit; + font-size: 12px; + width: 120px; + font-family: inherit; +} +.vv-sb-tag-del { + background: transparent; + border: none; + color: inherit; + opacity: 0.6; + cursor: pointer; + font-size: 14px; + padding: 0 2px; + line-height: 1; +} +.vv-sb-tag-del:hover { + opacity: 1; +} +.vv-sb-tag-add { + background: transparent; + border: 1px dashed #334155; + color: #94a3b8; + border-radius: 6px; + padding: 3px 10px; + font-size: 12px; + cursor: pointer; +} +.vv-sb-tag-add:hover { + border-color: #22d3ee; + color: #22d3ee; +} + +.vv-sb-doc-collapse { + background: transparent; + border: none; + color: inherit; + font: inherit; + cursor: pointer; + padding: 0; + display: inline-flex; + align-items: center; + gap: 6px; +} +.vv-sb-caret { + display: inline-block; + transition: transform 0.2s; + font-size: 10px; + color: #94a3b8; +} +.vv-sb-caret.open { + transform: rotate(180deg); +} +.vv-sb-vo { + margin-top: 6px !important; + background: #0b1220 !important; + border-left: 3px solid #22d3ee !important; + border-radius: 0 6px 6px 0 !important; + padding: 10px 12px !important; + min-height: 80px !important; + font-size: 13px !important; + line-height: 1.7 !important; + color: #e6edf7 !important; + border: none !important; +} + +.vv-sb-actions { + display: flex; + align-items: center; + gap: 8px; + margin-top: 14px; + padding-top: 12px; + border-top: 1px solid #1e2d45; +} +.vv-sb-actions .vv-btn-ghost { + padding: 6px 14px; +} + +/* ── Credits bar ──────────────── */ +.vv-credits { display: flex; align-items: center; gap: 6px; - font-size: 13px; - font-weight: 600; - color: #b45309; - margin-bottom: 10px; -} -.vv-intent-row { - margin-bottom: 8px; - font-size: 13px; - line-height: 1.6; -} -.vv-intent-row .vv-k { + padding: 10px 14px; + background: #111a2e; + border: 1px solid #1e2d45; + border-radius: 10px; font-size: 12px; - color: #92400e; - margin-bottom: 3px; + color: #94a3b8; } -.vv-intent-row .vv-v { - color: #111827; -} -.vv-chip { - display: inline-block; - padding: 2px 8px; - background: #fef3c7; - border-radius: 4px; - font-size: 11px; - color: #92400e; - margin-right: 4px; - margin-bottom: 3px; +.vv-credits strong { + color: #22d3ee; + font-weight: 700; + font-size: 14px; } -/* ── 9:16 预览 ───────────────────────────────────── */ +/* ── Preview ──────────────── */ .vv-preview { - width: 100%; - aspect-ratio: 9/16; - max-height: 480px; - border-radius: 12px; - background: #fff; - border: 1.5px dashed #d1d5db; - overflow: hidden; - position: relative; + aspect-ratio: 9 / 16; + max-height: 360px; + background: #0f1a2e; + border: 1px solid #1e2d45; + border-radius: 10px; display: flex; align-items: center; justify-content: center; + overflow: hidden; + position: relative; } .vv-preview video { width: 100%; @@ -839,306 +1414,135 @@ background: #000; } .vv-preview-placeholder { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + color: #64748b; text-align: center; - color: #9ca3af; padding: 20px; } -.vv-preview-placeholder .ph-icon { +.ph-icon { font-size: 40px; - opacity: 0.4; - margin-bottom: 8px; -} -.vv-preview-placeholder .ph-txt { - font-size: 12px; -} - -/* 上传进度条（保留给视频/音频上传使用） */ -.vv-progress-bar { - width: 100%; - height: 6px; - background: #f3f4f6; - border-radius: 3px; - overflow: hidden; - margin-top: 6px; -} -.vv-progress-fill { - height: 100%; - background: linear-gradient(90deg, #7c3aed, #a855f7); - border-radius: 3px; - transition: width 0.4s ease; -} -.vv-progress-mini-inline { - display: inline-block; - width: 10px; - height: 10px; - border: 2px solid rgba(124, 58, 237, 0.25); - border-top-color: #7c3aed; - border-radius: 50%; - animation: vvspin 0.8s linear infinite; - vertical-align: middle; - margin-right: 4px; -} - -/* ── 扣点 & 按钮 ────────────────────────────────── */ -.vv-credits { - background: #f9fafb; - border: 1px solid #f3f4f6; - border-radius: 8px; - padding: 10px 12px; - font-size: 12px; - color: #6b7280; + color: #64748b; display: flex; - justify-content: space-between; - align-items: center; -} -.vv-credits strong { - color: #7c3aed; - font-weight: 600; -} - -.vv-btn { - display: inline-flex; align-items: center; justify-content: center; - gap: 6px; - padding: 10px 16px; - border-radius: 8px; - font-size: 13px; - font-weight: 500; - cursor: pointer; - border: 1px solid transparent; - transition: all 0.15s; - font-family: inherit; } -.vv-btn-primary { - width: 100%; - background: linear-gradient(135deg, #7c3aed, #a855f7); - color: #fff; +.ph-txt { + font-size: 12px; + line-height: 1.6; + color: #94a3b8; +} + +/* ── Error ──────────────── */ +.vv-error { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; padding: 12px; - font-size: 14px; + background: rgba(248, 113, 113, 0.12); + border: 1px solid rgba(248, 113, 113, 0.3); + border-radius: 8px; + color: #fca5a5; + font-size: 13px; margin-top: 10px; } -.vv-btn-primary:hover:not(:disabled) { - box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3); - transform: translateY(-1px); -} -.vv-btn-primary:disabled { - opacity: 0.55; - cursor: not-allowed; -} -.vv-btn-primary.vv-btn-disabled-gray, -.vv-btn-primary:disabled.vv-btn-disabled-gray { - background: #d1d5db !important; - color: #6b7280 !important; - opacity: 1; - box-shadow: none !important; - transform: none !important; - cursor: not-allowed; -} -.vv-btn-primary.vv-btn-disabled-gray:hover { - box-shadow: none !important; - transform: none !important; -} -.vv-btn-warn { - background: #fef3c7; - color: #b45309; - border-color: #fcd34d; -} -.vv-btn-sm { - padding: 6px 12px; - font-size: 12px; -} -.vv-btn:disabled { - cursor: not-allowed; -} - -.vv-error { - background: #fef2f2; - border: 1px solid #fecaca; - border-radius: 8px; - padding: 10px 12px; - color: #dc2626; - font-size: 12px; -} - -.vv-spinner { - width: 14px; - height: 14px; - border: 2px solid rgba(255, 255, 255, 0.3); - border-top-color: #fff; - border-radius: 50%; - animation: vvspin 0.8s linear infinite; - display: inline-block; -} -@keyframes vvspin { - to { - transform: rotate(360deg); - } -} - -.vv-muted { - color: #9ca3af; - font-size: 12px; -} -.vv-mt-8 { - margin-top: 8px; -} -.vv-link-btn { - background: none; - border: none; - color: #7c3aed; - font-size: 12px; - cursor: pointer; - padding: 0; - font-family: inherit; -} -.vv-link-btn:hover { - text-decoration: underline; -} -.vv-link-btn:disabled { - opacity: 0.4; - cursor: not-allowed; - text-decoration: none; -} - -/* 状态提示条 */ -.vv-hint-gray { - padding: 12px 16px; - background: #f9fafb; - border-radius: 8px; - font-size: 12px; - text-align: center; - color: #6b7280; -} -.vv-hint-yellow { - padding: 12px 16px; - background: #fffbeb; - border: 1px solid #fcd34d; - border-radius: 8px; - font-size: 12px; - text-align: center; - color: #b45309; -} - -/* ── 素材选择弹窗 ────────────────────────────────── */ -.vv-modal-mask { +/* ── Asset/voice picker modal styles (in page) ───────────── */ +.vv-modal { position: fixed; inset: 0; - background: rgba(17, 24, 39, 0.45); + background: rgba(11, 18, 32, 0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } -.vv-modal { - width: 720px; - max-width: 100%; - max-height: 82vh; - background: #fff; +.vv-modal-body { + background: #111a2e; + border: 1px solid #1e2d45; border-radius: 12px; - display: flex; - flex-direction: column; - overflow: hidden; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); -} -.vv-modal-head { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 18px; - border-bottom: 1px solid #f3f4f6; -} -.vv-modal-title { - font-size: 15px; - font-weight: 600; - color: #111827; + max-width: 720px; + width: 100%; + max-height: 80vh; + overflow-y: auto; + padding: 20px; + position: relative; } .vv-modal-close { + position: absolute; + top: 14px; + right: 14px; + background: transparent; + border: none; + color: #94a3b8; + font-size: 18px; + cursor: pointer; width: 28px; height: 28px; border-radius: 6px; - border: none; - background: transparent; - color: #9ca3af; - font-size: 18px; - cursor: pointer; } .vv-modal-close:hover { - background: #f3f4f6; - color: #374151; + color: #f87171; + background: rgba(248, 113, 113, 0.1); } -.vv-modal-body { - flex: 1; - overflow: hidden; - padding: 14px 18px; - display: flex; - flex-direction: column; - gap: 12px; +.vv-modal-empty { + text-align: center; + padding: 40px 20px; + color: #64748b; } .vv-asset-search { - display: flex; - gap: 8px; + margin-bottom: 12px; } .vv-asset-thumbs { - flex: 1; - overflow-y: auto; display: grid; - gap: 10px; - padding: 4px; -} -.vv-asset-image { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); -} -.vv-asset-video { - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); -} -.vv-asset-voice { - grid-template-columns: 1fr; + gap: 10px; } .vv-thumb-card { position: relative; - border: 1px solid #e5e7eb; + border: 1px solid #1e2d45; border-radius: 8px; overflow: hidden; cursor: pointer; - background: #f9fafb; + background: #0f1a2e; transition: all 0.15s; } -.vv-asset-image .vv-thumb-card, -.vv-asset-video .vv-thumb-card { - aspect-ratio: 1; -} .vv-thumb-card:hover { - border-color: #7c3aed; + border-color: #22d3ee; } -.vv-thumb-card.selected { - border-color: #7c3aed; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); -} -.vv-thumb-card img, -.vv-thumb-card video { - width: 100%; - height: 100%; - object-fit: cover; - display: block; +.vv-thumb-card.picked { + border-color: #22d3ee; + box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2); } .vv-thumb-ph { - width: 100%; - height: 100%; + aspect-ratio: 1; + background: #0a1220; display: flex; align-items: center; justify-content: center; - font-size: 32px; - color: #9ca3af; + color: #64748b; + font-size: 24px; } -.vv-asset-voice .vv-thumb-card { - padding: 10px 14px; - display: flex; - align-items: center; - gap: 10px; - aspect-ratio: auto; +.vv-thumb-card img, +.vv-asset-image img { + width: 100%; + aspect-ratio: 1; + object-fit: cover; + display: block; +} +.vv-asset-image { + position: relative; + border: 1px solid #1e2d45; + border-radius: 8px; + overflow: hidden; + cursor: pointer; +} +.vv-asset-image:hover { + border-color: #22d3ee; } .vv-thumb-check { position: absolute; @@ -1147,768 +1551,213 @@ width: 22px; height: 22px; border-radius: 50%; - background: #7c3aed; - color: #fff; - display: flex; + background: #22d3ee; + color: #0b1220; + display: none; align-items: center; justify-content: center; font-size: 12px; + font-weight: 700; +} +.vv-thumb-card.picked .vv-thumb-check { + display: flex; } .vv-thumb-name { - font-size: 12px; - color: #374151; padding: 6px 8px; + font-size: 11px; + color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - text-align: center; - background: #fff; } -.vv-asset-voice .vv-thumb-name { - text-align: left; - padding: 0; - flex: 1; - background: transparent; - display: flex; - align-items: center; - gap: 8px; - white-space: nowrap; - overflow: hidden; +.vv-thumb-dur { + position: absolute; + bottom: 28px; + right: 4px; + background: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 10px; + padding: 1px 4px; + border-radius: 3px; } -.vv-asset-voice .vv-thumb-name-txt { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - min-width: 0; -} -.vv-asset-voice .vv-thumb-dur { - flex: 0 0 auto; - font-size: 11px; - color: #9ca3af; - background: #f3f4f6; - padding: 1px 6px; - border-radius: 4px; -} -.vv-asset-voice .vv-thumb-ph { - width: 36px; - height: 36px; - flex: 0 0 36px; - font-size: 20px; - border-radius: 50%; - background: #f3f0ff; - color: #7c3aed; -} -.vv-asset-voice .vv-thumb-card img, -.vv-asset-voice .vv-thumb-card video { - width: 36px; - height: 36px; - flex: 0 0 36px; - border-radius: 50%; - object-fit: cover; -} -.vv-asset-voice .vv-thumb-check { - top: 50%; - right: 10px; - transform: translateY(-50%); -} -.vv-modal-empty { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; - color: #9ca3af; - font-size: 13px; -} -.vv-empty-icon { - font-size: 32px; - opacity: 0.6; -} -.vv-modal-foot { - display: flex; - justify-content: flex-end; - gap: 8px; - padding: 12px 18px; - border-top: 1px solid #f3f4f6; -} - -/* ─────────── 三步独立交互新增样式 ─────────── */ - -/* STEP 子步骤头（STEP2/STEP3） */ -.vv-step-subhead { - display: flex; - align-items: center; - gap: 8px; - padding: 14px 16px 0; -} -.vv-step-subtitle { - font-size: 15px; - font-weight: 600; - color: #111827; -} -.vv-step-lock { - margin-left: auto; - font-size: 11px; - color: #9ca3af; - background: #f3f4f6; - padding: 2px 8px; - border-radius: 10px; -} -.vv-step-badge-dim { - background: #e5e7eb !important; - color: #9ca3af !important; -} - -/* 步骤列禁用态已移除：不再锁控件，仅通过按钮 disabled 控制 */ - -/* Section 内小标题 */ -.vv-section-subtitle { - font-size: 13px; - font-weight: 600; - color: #374151; - margin: 12px 0 8px; - padding-left: 2px; -} -.vv-section-subtitle:first-child { - margin-top: 0; -} - -/* 文案结果区 */ -.vv-copy-box { - margin-top: 14px; - border: 1px solid #e5e7eb; - border-radius: 10px; - padding: 12px; - background: #fff; -} -.vv-copy-loading { - display: flex; - align-items: center; - justify-content: center; - padding: 28px 12px; - color: #6b7280; - font-size: 13px; - background: #f9fafb; -} -.vv-copy-head { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; - font-size: 13px; -} -.vv-copy-title { - font-weight: 600; - color: #111827; -} -.vv-copy-sub { - color: #7c3aed; - font-size: 12px; - margin-left: 4px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} -.vv-copy-locked { - font-size: 11px; - color: #9ca3af; - background: #f3f4f6; - padding: 1px 6px; - border-radius: 4px; - margin-left: auto; -} -.vv-copy-textarea { - min-height: 160px !important; - resize: vertical; - font-size: 13px; - line-height: 1.7; - background: #fafafa; -} -.vv-copy-textarea:disabled { - background: #f9fafb; - color: #374151; - cursor: default; -} - -/* 块级按钮 */ - -/* ─────────── 三步独立交互新增样式 ─────────── */ - -/* STEP 子步骤头（STEP2/STEP3） */ -.vv-step-subhead { - display: flex; - align-items: center; - gap: 8px; - padding: 14px 16px 0; -} -.vv-step-subtitle { - font-size: 15px; - font-weight: 600; - color: #111827; -} -.vv-step-lock { - margin-left: auto; - font-size: 11px; - color: #9ca3af; - background: #f3f4f6; - padding: 2px 8px; - border-radius: 10px; -} -.vv-step-badge-dim { - background: #e5e7eb !important; - color: #9ca3af !important; -} - -/* 列禁用态 */ - -/* Section 内小标题 */ -.vv-section-subtitle { - font-size: 13px; - font-weight: 600; - color: #374151; - margin: 12px 0 8px; - padding-left: 2px; -} - -/* 文案结果区 */ -.vv-copy-box { - margin-top: 14px; - border: 1px solid #e5e7eb; - border-radius: 10px; - padding: 12px; - background: #fff; -} -.vv-copy-loading { - display: flex; - align-items: center; - justify-content: center; - padding: 28px 12px; - color: #6b7280; - font-size: 13px; - background: #f9fafb; -} -.vv-copy-head { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; - font-size: 13px; -} -.vv-copy-title { - font-weight: 600; - color: #111827; -} -.vv-copy-sub { - color: #7c3aed; - font-size: 12px; - margin-left: 4px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} -.vv-copy-locked { - font-size: 11px; - color: #9ca3af; - background: #f3f4f6; - padding: 1px 6px; - border-radius: 4px; - margin-left: auto; -} -.vv-copy-textarea { - min-height: 160px !important; - resize: vertical; - font-size: 13px; - line-height: 1.7; - background: #fafafa; -} -.vv-copy-textarea:disabled { - background: #f9fafb; - color: #374151; - cursor: default; -} - -/* ─────────── PresetVoicePickerModal 音色选择弹窗 ─────────── */ -.vv-modal-lg { - max-width: 820px; - width: 90vw; -} -.vv-voice-search { - margin-bottom: 12px; -} -.vv-voice-search .ant-input-affix-wrapper { - border-radius: 10px; - border-color: #e5e7eb; - padding: 8px 12px; -} -.vv-voice-search .ant-input-affix-wrapper:focus, -.vv-voice-search .ant-input-affix-wrapper-focused { - border-color: #7c3aed; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12); -} -.vv-voice-cat-row { +.vv-asset-video, +.vv-asset-voice { display: flex; align-items: center; gap: 10px; - margin-bottom: 14px; -} -.vv-voice-cat-label { - font-size: 13px; - color: #374151; - font-weight: 500; -} -.vv-voice-cat-row .ant-select { + padding: 10px; + border: 1px solid #1e2d45; border-radius: 8px; + cursor: pointer; + background: #0f1a2e; + margin-bottom: 6px; + transition: all 0.15s; } -.vv-voice-cat-row .ant-select-selector { - border-radius: 8px !important; - border-color: #e5e7eb !important; -} -.vv-voice-cat-row .ant-select-focused .ant-select-selector { - border-color: #7c3aed !important; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important; +.vv-asset-video:hover, +.vv-asset-voice:hover { + border-color: #22d3ee; } -.vv-voice-grid { +/* voice cards (preset) */ +.vv-voice-cat-label { + font-size: 12px; + color: #64748b; + font-weight: 600; + margin: 10px 0 6px; +} +.vv-voice-cat-row { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - max-height: 480px; - overflow-y: auto; - padding: 4px; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 8px; + margin-bottom: 8px; } .vv-voice-card { - border: 1.5px solid #e5e7eb; - border-radius: 12px; - padding: 16px 14px; - background: #f9fafb; - cursor: pointer; - transition: all 0.15s; + background: #0f1a2e; + border: 1px solid #1e2d45; + border-radius: 8px; + padding: 10px; display: flex; flex-direction: column; - align-items: center; - text-align: center; + gap: 6px; + cursor: pointer; + transition: all 0.15s; } .vv-voice-card:hover { - border-color: #7c3aed; - background: #f3f0ff; - transform: translateY(-1px); + border-color: #22d3ee; } .vv-voice-card.selected { - border-color: #7c3aed; - background: #f3f0ff; - box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12); + border-color: #22d3ee; + background: rgba(34, 211, 238, 0.12); } .vv-voice-card-avatar { - width: 56px; - height: 56px; + width: 36px; + height: 36px; border-radius: 50%; + background: linear-gradient(135deg, #06b6d4, #22d3ee); + color: #0b1220; + font-weight: 700; display: flex; align-items: center; justify-content: center; - margin-bottom: 8px; - overflow: hidden; -} -.vv-voice-card-avatar img { - width: 100%; - height: 100%; - object-fit: cover; + font-size: 14px; } .vv-voice-card-name { - font-size: 14px; - font-weight: 600; - color: #111827; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + font-size: 13px; + color: #e6edf7; + font-weight: 500; } .vv-voice-card-gender { - font-size: 11px; - color: #9ca3af; - margin-top: 2px; + font-size: 10px; + color: #64748b; } .vv-voice-card-desc { font-size: 11px; - color: #6b7280; - margin-top: 4px; + color: #94a3b8; line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; } .vv-voice-card-actions { display: flex; gap: 6px; - margin-top: 10px; - width: 100%; + margin-top: 4px; } .vv-voice-card-btn { flex: 1; - border: 1px solid #d1d5db; - background: #fff; - border-radius: 6px; - padding: 5px 8px; - font-size: 12px; + padding: 4px; + background: transparent; + border: 1px solid #1e2d45; + color: #94a3b8; + border-radius: 4px; + font-size: 11px; cursor: pointer; - color: #4b5563; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - transition: all 0.15s; } .vv-voice-card-btn:hover { - border-color: #7c3aed; - color: #7c3aed; -} -.vv-voice-card-btn.picked { - background: #7c3aed; - border-color: #7c3aed; - color: #fff; + border-color: #22d3ee; + color: #22d3ee; } .vv-voice-card-btn-preview { - flex: 0 0 auto; - min-width: 56px; -} -.vv-voice-card-btn-preview.playing { - background: #f3f0ff; - color: #7c3aed; - border-color: #7c3aed; -} -.vv-voice-card-btn.disabled { - opacity: 0.5; - cursor: not-allowed; -} -.vv-modal-foot { - display: flex; - justify-content: flex-end; - gap: 10px; - padding: 14px 18px; - border-top: 1px solid #f3f4f6; + color: #22d3ee; + border-color: rgba(34, 211, 238, 0.4); } -/* 让 voice-grid 在窄屏下 2 列 */ -@media (max-width: 720px) { - .vv-voice-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -/* ── STEP2 2列表单网格 ── */ -.vv-form-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 14px 18px; - margin-top: 12px; -} -.vv-form-row { - display: flex; - flex-direction: column; - gap: 6px; -} -.vv-label { - font-size: 13px; - font-weight: 500; - color: #374151; - display: flex; - align-items: center; - gap: 4px; -} -.vv-label-optional { - font-size: 12px; - color: #9ca3af; - font-weight: 400; -} - -/* ghost/outline 按钮 */ -.vv-btn-ghost { - background: #fff; - color: #7c3aed; - border: 1px solid #d6c6fb; -} -.vv-btn-ghost:hover { - background: #f8f4ff; - border-color: #7c3aed; -} - -@media (max-width: 640px) { - .vv-form-grid { - grid-template-columns: 1fr; - } -} - -/* ── 分镜脚本（Storyboard）样式 ── */ -.vv-storyboard { - display: flex; - flex-direction: column; - gap: 14px; -} - -.vv-copy-tag { - display: inline-flex; - align-items: center; - font-size: 11px; - padding: 2px 8px; - border-radius: 10px; - margin-left: 8px; -} -.vv-copy-tag-preview { - background: #fef3c7; - color: #92400e; -} - -/* 总览卡片 */ -.vv-sb-overview { - display: grid; - grid-template-columns: 2fr 1fr 1fr; - gap: 12px; - padding: 12px; - background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); - border-radius: 10px; - border: 1px solid #e9e4ff; -} -.vv-sb-ov-field label { - display: block; - font-size: 11px; - color: #6b7280; - margin-bottom: 4px; -} -.vv-sb-input { - font-size: 13px; -} -.vv-sb-input.vv-input { - height: 32px; -} -.vv-sb-input.vv-select .ant-select-selector { - height: 32px !important; -} -.vv-sb-input.vv-select .ant-select-selection-item, -.vv-sb-input.vv-select .ant-select-selection-placeholder { - line-height: 30px !important; -} - -/* 分块标题 */ -.vv-sb-section { - display: flex; - flex-direction: column; - gap: 8px; -} -.vv-sb-section-title { - display: flex; - align-items: center; - gap: 6px; - font-size: 13px; - font-weight: 600; - color: #374151; -} - -/* 镜头卡片 */ -.vv-sb-shots { - display: flex; - flex-direction: column; - gap: 10px; -} -.vv-sb-shot { - background: #f9fafb; - border: 1px solid #e5e7eb; - border-radius: 10px; - padding: 12px; -} -.vv-sb-shot-head { - display: flex; - align-items: center; - gap: 10px; +.vv-voice-search { margin-bottom: 10px; } -.vv-sb-shot-num { - background: #7c3aed; - color: #fff; - font-size: 12px; - font-weight: 600; - padding: 2px 10px; - border-radius: 10px; -} -.vv-sb-time { - height: 28px; - border: 1px solid #e5e7eb; - background: #fff; - border-radius: 6px; - padding: 0 10px; - font-size: 12px; - color: #6b7280; - width: 100px; - outline: none; -} -.vv-sb-time:focus { - border-color: #7c3aed; -} -.vv-sb-shot-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px 14px; -} -.vv-sb-cell { - display: flex; - flex-direction: column; - gap: 4px; -} -.vv-sb-cell-wide { - grid-column: 1 / -1; -} -.vv-sb-cell label { - font-size: 11px; - color: #6b7280; - font-weight: 500; -} -.vv-sb-cell-ta { - min-height: 54px !important; - font-size: 12.5px !important; - padding: 7px 10px !important; - line-height: 1.55 !important; - resize: vertical; -} -.vv-sb-ref-box { - width: 80px; - height: 54px; - border-radius: 8px; - overflow: hidden; - background: #fff; - border: 1px dashed #d1d5db; - display: flex; - align-items: center; - justify-content: center; -} -.vv-sb-ref-img { - width: 100%; - height: 100%; - object-fit: cover; -} -.vv-sb-ref-empty { - font-size: 11px; - color: #9ca3af; -} -/* 标签（硬性约束/负面提示词） */ -.vv-sb-taglist { +/* intent (keyword chips) - if used */ +.vv-intent { + margin-top: 10px; +} +.vv-intent-title { + font-size: 12px; + color: #94a3b8; + margin-bottom: 6px; +} +.vv-intent-row { display: flex; flex-wrap: wrap; gap: 6px; - align-items: center; } -.vv-sb-tag { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 2px 4px 2px 10px; +.vv-chip { + padding: 4px 10px; + background: #0f1a2e; + border: 1px solid #1e2d45; border-radius: 14px; font-size: 12px; -} -.vv-sb-tag-hard { - background: #f3f0ff; - color: #6d28d9; - border: 1px solid #ddd6fe; -} -.vv-sb-tag-neg { - background: #fef2f2; - color: #b91c1c; - border: 1px solid #fecaca; -} -.vv-sb-tag-input { - background: transparent; - border: none; - outline: none; - font-size: 12px; - color: inherit; - min-width: 80px; - padding: 2px 0; -} -.vv-sb-tag-hard .vv-sb-tag-input { - color: #6d28d9; -} -.vv-sb-tag-neg .vv-sb-tag-input { - color: #b91c1c; -} -.vv-sb-tag-del { - width: 18px; - height: 18px; - border-radius: 50%; - border: none; - background: rgba(0, 0, 0, 0.08); - color: inherit; - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 12px; - line-height: 1; -} -.vv-sb-tag-del:hover { - background: rgba(0, 0, 0, 0.18); -} -.vv-sb-tag-add { - border: 1px dashed #d1d5db; - background: transparent; - color: #6b7280; - font-size: 12px; - padding: 3px 10px; - border-radius: 14px; + color: #cbd5e1; cursor: pointer; } -.vv-sb-tag-add:hover { - border-color: #7c3aed; - color: #7c3aed; +.vv-chip.picked { + background: rgba(34, 211, 238, 0.12); + color: #22d3ee; + border-color: #22d3ee; } -/* 口播稿折叠 */ -.vv-sb-collapse { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - background: #fff; - border: 1px solid #e5e7eb; +/* misc helpers */ +.vv-k { + color: #94a3b8; +} +.vv-v { + color: #e6edf7; +} +.vv-hint-yellow { + background: rgba(250, 204, 21, 0.1); + border: 1px solid rgba(250, 204, 21, 0.2); + color: #facc15; + font-size: 12px; + padding: 8px; + border-radius: 6px; + line-height: 1.6; + margin-top: 8px; +} +.vv-hint-gray { + color: #64748b; + font-size: 12px; +} + +/* Segmented tabs (legacy) */ +.vv-seg-tabs { + display: inline-flex; + background: #0f1a2e; + border: 1px solid #1e2d45; border-radius: 8px; - padding: 10px 14px; - cursor: pointer; - font-size: 13px; - color: #374151; - font-weight: 500; - transition: - border-color 0.15s, - background 0.15s; + padding: 3px; + gap: 2px; } -.vv-sb-collapse:hover { - border-color: #7c3aed; - background: #faf8ff; -} -.vv-sb-caret { - transition: transform 0.2s; - color: #9ca3af; +.vv-seg-tab { + padding: 6px 14px; + border-radius: 6px; + background: transparent; + border: none; + color: #94a3b8; font-size: 12px; + cursor: pointer; + transition: all 0.15s; } -.vv-sb-caret.open { - transform: rotate(180deg); - color: #7c3aed; +.vv-seg-tab:hover { + color: #e6edf7; } -.vv-sb-vo { - min-height: 100px !important; - font-size: 13px !important; - line-height: 1.7 !important; -} - -@media (max-width: 640px) { - .vv-sb-overview { - grid-template-columns: 1fr; - } - .vv-sb-shot-grid { - grid-template-columns: 1fr; - } - .vv-sb-cell-wide { - grid-column: auto; - } +.vv-seg-tab.active { + background: #1a2540; + color: #22d3ee; + font-weight: 500; } diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.tsx b/apps/web/src/pages/viral-video/ViralVideoPage.tsx index 39a3921b2..7504bb5a1 100644 --- a/apps/web/src/pages/viral-video/ViralVideoPage.tsx +++ b/apps/web/src/pages/viral-video/ViralVideoPage.tsx @@ -9,8 +9,6 @@ import { CaretRightOutlined, VideoCameraOutlined, SoundOutlined, - BulbOutlined, - ThunderboltOutlined, ReloadOutlined, WarningFilled, SearchOutlined, @@ -23,6 +21,7 @@ import { LoadingOutlined, CheckCircleFilled, EditOutlined, + HistoryOutlined, } from "@ant-design/icons" import { Select, Input, message } from "antd" import { uploadAssetDirect, getAssetLibraries, getAssetsByKind, type AssetItem } from "@/api/assets" @@ -122,6 +121,8 @@ type TabTask = { // STEP3 设置 videoRatio: string videoModel: string + quality: string + upscale: string // UI 状态 uiStep: UIStep imageAnalysis: ImageAnalysisResult | null @@ -183,6 +184,15 @@ const MODELS = [ { v: "seedance-2.5", label: "Seedance 2.5（推荐）" }, { v: "seedance-2.0", label: "Seedance 2.0" }, ] +const QUALITY_OPTIONS = [ + { v: "480p", label: "480p（快速）" }, + { v: "720p", label: "720p（清晰）" }, + { v: "1080p", label: "1080p（高清）" }, +] +const UPSCALE_OPTIONS = [ + { v: "关闭", label: "关闭" }, + { v: "开启", label: "开启" }, +] const VOICE_TIPS = "支持 MP3/WAV/M4A/AAC/OGG 格式，最大 10MB，时长 ≤30 秒。建议清晰人声、无背景音乐、环境安静；录音请保持距麦克风 15-20cm，音量适中。" @@ -347,6 +357,8 @@ const emptyTask = (id: string, title: string): TabTask => ({ persona: "", videoRatio: "9:16", videoModel: "seedance-2.5", + quality: "480p", + upscale: "关闭", uiStep: "step1_upload", imageAnalysis: null, storyboard: null, @@ -358,6 +370,32 @@ const emptyTask = (id: string, title: string): TabTask => ({ }) /* ─────────── 主页面 ─────────── */ + +function getCopyStageText(stage: string | undefined): string { + switch (stage) { + case "image_analysis": + case "video_analysis": + case "analyzing_images": + return "🔍 正在分析商品特征..." + case "intent_parsing": + case "generating_outline": + case "planning": + return "📋 正在构思脚本框架..." + case "script_generation": + case "generating_storyboard": + case "writing_shots": + return "🎬 正在生成分镜脚本..." + case "review": + case "generating_copy": + case "writing_copy": + return "✍️ 正在撰写口播文案..." + case "finalizing": + return "✨ 正在优化细节..." + default: + return "🎬 AI 正在创作视频分镜脚本..." + } +} + const ViralVideoPage: React.FC = () => { const [tasks, setTasks] = useState(() => [emptyTask("t1", "生成 1")]) const [activeId, setActiveId] = useState("t1") @@ -937,7 +975,7 @@ const ViralVideoPage: React.FC = () => { return (
- + 识别描述汇览
AI 正在识别商品特征…
@@ -1061,8 +1099,11 @@ const ViralVideoPage: React.FC = () => { if (task.uiStep === "step2_generating") { return (
- - AI 正在创作视频分镜脚本… + + + {task.job?.progress_message || getCopyStageText(task.job?.progress_stage)} + + 预计 10-30 秒，请稍候
) } @@ -1106,155 +1147,155 @@ const ViralVideoPage: React.FC = () => { return (
-
- - AI 分镜脚本 - {isMockPreview && ( - - 示例预览 · 等后端输出新结构后自动替换 - - )} -
- - {/* 1. 总览卡片 */} -
-
- +
+ {/* 视频总览 */} +

视频总览

+
+ 整体主题： updateOverview({ theme: e.target.value })} />
-
- +
+ 总时长： updateOverview({ total_duration: e.target.value })} />
-
- +
+ 画幅：