feat(viral-video): 分镜文案区改为流式文档/剧本排版 #2156

Merged

auto-approve-bot merged 1 commits from feat/viral-video-storyboard-doc-style into develop 2026-10-03 14:30:40 +08:00

Conversation 4 Commits 1 Files Changed 2

+216 -172

xiaoxia commented 2026-10-03 14:21:31 +08:00

Owner

Copy Link

Copy Source

变更说明

按用户反馈，分镜文案区从表单式（label左/内容右双栏）改为流式文档/剧本风格，白底紫色主题不变。

JSX

• 视频总览：3 行 kv 合并为单行内联段落 p.vv-sb-overview，strong 加粗标签 + 透明底输入框 + · 分隔；画幅 Select 宽度 120px 紧凑。
• 场景与光线：去掉 kv 包裹，textarea 改为块级段落（vv-sb-doc-ta-block）。
• 逐镜头（核心）：
  • 移除 vv-sb-doc-shot-head 包裹，时间标签直接放镜头顶部（紫底胶囊样式）。
  • 5 个字段（景别/角度与运镜、场景与对白、动作与真人细节、音效/BGM、转场）改为 <p class="vv-sb-field"><strong class="vv-sb-field-k">label：</strong><textarea block/></p>，标签加粗紫字内联段落开头，textarea 块级 100% 宽承接内容，不再有 120px 左列留白。
  • 参考图片移至镜头段落最下方左对齐。
• 硬性约束/负面提示词：标签列表加 vv-sb-tags-block 段落间距，标签功能与交互完全保留。
• 口播稿：删除展开/收起（voOpen/caret 按钮/条件渲染），SoundOutlined 图标保留，内容默认常显。
• vv-sb-actions（示例预览tag、重新生成文案按钮）保持不变。
• const locked = false 保留，所有输入/textarea/Select 可正常编辑，onChange/value/disabled 全量保留。

CSS

• 新增：.vv-sb-overview/.vv-sb-inline-text/.vv-sb-sep/.vv-sb-para/.vv-sb-doc-ta-block/.vv-sb-field/.vv-sb-field-k/.vv-sb-doc-ta-inline/.vv-sb-ref-row/.vv-sb-tags-block/.vv-sb-vo-wrap
• 调整：.vv-sb-h margin 6/2、.vv-sb-doc-shot gap 2px、.vv-sb-time-doc 加紫底胶囊、.vv-sb-vo 改为块级段落样式
• 删除废弃规则：.vv-sb-kv/.vv-sb-k/.vv-sb-kv-ref/.vv-sb-inline/.vv-sb-inline-input/.vv-sb-doc-shot-head/.vv-sb-doc-collapse/.vv-sb-caret
• 保留：.vv-sb-tag*/.vv-sb-ref*/.vv-sb-muted/.vv-sb-actions 全部不变；紫主题色盘（#7c3aed/#f5f0ff/#fafafe）不变。

验证

• npx tsc --noEmit ✅
• npx prettier --write ✅
• npx vite build ✅ 6.12s
• grep 确认无残留 .vv-sb-kv/.vv-sb-k/vv-sb-doc-shot-head/vv-sb-doc-collapse/vv-sb-caret/voOpen 引用

## 变更说明 按用户反馈，分镜文案区从表单式（label左/内容右双栏）改为流式文档/剧本风格，白底紫色主题不变。 ### JSX - **视频总览**：3 行 kv 合并为单行内联段落 `p.vv-sb-overview`，`strong` 加粗标签 + 透明底输入框 + `·` 分隔；画幅 Select 宽度 120px 紧凑。 - **场景与光线**：去掉 kv 包裹，textarea 改为块级段落（`vv-sb-doc-ta-block`）。 - **逐镜头（核心）**： - 移除 `vv-sb-doc-shot-head` 包裹，时间标签直接放镜头顶部（紫底胶囊样式）。 - 5 个字段（景别/角度与运镜、场景与对白、动作与真人细节、音效/BGM、转场）改为 `<p class="vv-sb-field"><strong class="vv-sb-field-k">label：</strong><textarea block/></p>`，标签加粗紫字内联段落开头，textarea 块级 100% 宽承接内容，不再有 120px 左列留白。 - 参考图片移至镜头段落最下方左对齐。 - **硬性约束/负面提示词**：标签列表加 `vv-sb-tags-block` 段落间距，标签功能与交互完全保留。 - **口播稿**：删除展开/收起（`voOpen`/caret 按钮/条件渲染），SoundOutlined 图标保留，内容默认常显。 - vv-sb-actions（示例预览tag、重新生成文案按钮）保持不变。 - `const locked = false` 保留，所有输入/textarea/Select 可正常编辑，onChange/value/disabled 全量保留。 ### CSS - 新增：`.vv-sb-overview`/`.vv-sb-inline-text`/`.vv-sb-sep`/`.vv-sb-para`/`.vv-sb-doc-ta-block`/`.vv-sb-field`/`.vv-sb-field-k`/`.vv-sb-doc-ta-inline`/`.vv-sb-ref-row`/`.vv-sb-tags-block`/`.vv-sb-vo-wrap` - 调整：`.vv-sb-h` margin 6/2、`.vv-sb-doc-shot` gap 2px、`.vv-sb-time-doc` 加紫底胶囊、`.vv-sb-vo` 改为块级段落样式 - 删除废弃规则：`.vv-sb-kv`/`.vv-sb-k`/`.vv-sb-kv-ref`/`.vv-sb-inline`/`.vv-sb-inline-input`/`.vv-sb-doc-shot-head`/`.vv-sb-doc-collapse`/`.vv-sb-caret` - 保留：`.vv-sb-tag*`/`.vv-sb-ref*`/`.vv-sb-muted`/`.vv-sb-actions` 全部不变；紫主题色盘（#7c3aed/#f5f0ff/#fafafe）不变。 ### 验证 - `npx tsc --noEmit` ✅ - `npx prettier --write` ✅ - `npx vite build` ✅ 6.12s - grep 确认无残留 `.vv-sb-kv`/`.vv-sb-k`/`vv-sb-doc-shot-head`/`vv-sb-doc-collapse`/`vv-sb-caret`/`voOpen` 引用

xiaoxia added 1 commit 2026-10-03 14:21:32 +08:00

feat(viral-video): 分镜文案区改为流式文档/剧本排版 ... 3f673f7766

- 视频总览：主题/时长/画幅改为单行内联段落，紫色圆点分隔，Select 紧凑 120px
- 场景与光线：改为段落块级文本域（vv-sb-para + vv-sb-doc-ta-block）
- 逐镜头拆解：去除 label-value 双栏布局，每字段改为段落(p.vv-sb-field)
  - 时间标签升级为紫底胶囊样式
  - 字段名加粗紫字（vv-sb-field-k #6d28d9），textarea 块级展示
  - 5 个字段（景别/场景对白/动作/音效/转场）保持原顺序+可编辑
  - 参考图片移到镜头段落最下方左对齐
- 硬性约束/负面提示词：加 vv-sb-tags-block 段落间距，标签功能不变
- 口播稿：移除展开/收起箭头(voOpen)和caret按钮，默认常显
- 删除冗余 CSS：.vv-sb-kv/.vv-sb-k/.vv-sb-kv-ref/.vv-sb-inline/.vv-sb-inline-input/.vv-sb-doc-shot-head/.vv-sb-doc-collapse/.vv-sb-caret
- 主题保持白底紫色(#7c3aed)，紧凑间距沿用PR#2145
- 所有输入/textarea/Select 保留 disabled={locked=false}，编辑功能正常
- tsc / prettier / vite build 全绿

auto-approve-bot approved these changes 2026-10-03 14:22:57 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-10-03 14:22:57 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-10-03 14:23:31 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#2156
预览链接	https://pr-2156.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2156 | | 预览链接 | [https://pr-2156.preview.xiaoxiajianji.com](https://pr-2156.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot merged commit 83465397fe into develop 2026-10-03 14:30:40 +08:00

auto-approve-bot deleted branch feat/viral-video-storyboard-doc-style 2026-10-03 14:30:43 +08:00

gitea-actions bot commented 2026-10-03 14:37:38 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #2156 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #2156 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

xiaoxia referenced this pull request 2026-10-03 14:53:32 +08:00

fix(viral-video): 素材库/音色弹窗底部固定操作栏，内容区可滚动 #2158

xiaoxia referenced this pull request 2026-10-03 15:30:50 +08:00

feat(viral-video): 分镜内联流式排版 + 动态视频模型选择器 #2159

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot frontend-dev xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2156