xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 10 Actions 34.2k Packages Projects Releases 7 Wiki Activity

feat(viral-video): v1.6 暗色主题 + 分镜脚本线性文档风格 + STEP3改版 #2135

Merged
auto-approve-bot merged 1 commits from fix/2041-v16-dark-ui into develop 2026-10-02 10:31:37 +08:00
Conversation 3 Commits 1 Files Changed 2
+1422 -1499
xiaoxia commented 2026-10-02 10:26:34 +08:00
Owner
Copy Link
Copy Source

改动内容

问题1+9 全站select统一暗色圆角单层样式：

  • 去掉旧的双框重叠，所有antd Select统一由.ant-select-selector承担视觉（bg:#0f1a2e/border:#1e2d45/白字/cyan focus ring）
  • STEP3 Select用12px大圆角+42px高，STEP1/2用8px圆角+36px高
  • antd dropdown全局深色（#1a2540底，选中cyan半透明）

问题2+3 步骤解锁（上一PR已做，本次保留）：

  • 分析图片只锁按钮自身；STEP1未完成时只禁用「生成文案」「生成视频」按钮，音色/时长/比例/参考视频等控件全程可操作

问题6 爆款结构19项（上一PR已做）：STRUCTURES替换为完整列表

问题5 图片分析多行展示（上一PR已做+本次暗色适配）：展示category/colors/material/visual_style/scene/target_audience/text_on_image/selling_points全字段

问题7 分镜脚本→竞品线性文档风格：

  • 去卡片/去紫色badge/去双列grid/去textarea边框/去白卡
  • section header加粗（视频总览/场景与光线/逐秒镜头拆解/硬性约束/负面提示词/完整口播稿）
  • 每字段「标签：内容」label:value一行一项，纯文本段落
  • 镜头用cyan左边框+cyan粗体时间段标题分隔，镜头之间无卡片包裹只用间距分隔
  • 参考图显示为@图片N样式的小缩略图badge（36x36圆角），hover可更换
  • 硬约束tag：cyan半透明底；负面tag：红半透明底
  • 口播稿折叠保留，展开后带cyan左边框段落
  • 字段hover/focus时显示cyan虚线边框可编辑态，平时透明无边框
  • 整体深色与页面一致

问题8 文案生成分阶段进度提示：

  • getCopyStageText()映射5阶段（analyzing_images→分析商品特征/planning→构思脚本框架/writing_shots→生成分镜脚本/writing_copy→撰写口播文案/finalizing→优化细节）
  • 显示：cyan spinner + emoji阶段文案 + "预计10-30秒，请稍候"灰色hint
  • 优先读后端progress_message

问题9 STEP3 UI 1:1复刻截图3：

  • 深蓝黑背景（#0b1220/#111a2e）
  • 「3」cyan圆形badge + "STEP 3 生成视频"白色粗体
  • 右上角「历史作品」cyan描边ghost按钮（点击提示"功能开发中"）
  • 标题下细cyan分割线
  • 2x2参数网格：视频比例/视频模型/清晰度/成片超分
  • 新增「清晰度」（480p/720p/1080p，默认480p）、「成片超分」（关闭/开启，默认关闭）字段，暂仅UI展示payload不传（等后端支持）
  • Select大圆角12px/高42px/深色底/cyan聚焦边框

全局暗色主题适配：

  • 页面bg:#0b1220，卡片bg:#111a2e/#0f1a2e，主色#22d3ee（cyan），主文字#e6edf7，灰阶#94a3b8/#64748b/#475569，边框#1e2d45
  • 主按钮cyan渐变#06b6d4→#22d3ee白字；ghost透明底+cyan边框+cyan字；disabled#334155灰
  • fusion-btn/pill/recog/audio-cell/preview/error/tabs/seg-tabs/credits/modal/滚动条/上传区全部暗色
  • step-badge激活cyan底#0b1220字，未激活#1e2d45底#64748b字

验证

  • tsc --noEmit ✅
  • prettier --write ✅
  • vite build ✅ 6.30s
## 改动内容 **问题1+9 全站select统一暗色圆角单层样式**： - 去掉旧的双框重叠，所有antd Select统一由`.ant-select-selector`承担视觉（bg:#0f1a2e/border:#1e2d45/白字/cyan focus ring） - STEP3 Select用12px大圆角+42px高，STEP1/2用8px圆角+36px高 - antd dropdown全局深色（#1a2540底，选中cyan半透明） **问题2+3 步骤解锁**（上一PR已做，本次保留）： - 分析图片只锁按钮自身；STEP1未完成时只禁用「生成文案」「生成视频」按钮，音色/时长/比例/参考视频等控件全程可操作 **问题6 爆款结构19项**（上一PR已做）：STRUCTURES替换为完整列表 **问题5 图片分析多行展示**（上一PR已做+本次暗色适配）：展示category/colors/material/visual_style/scene/target_audience/text_on_image/selling_points全字段 **问题7 分镜脚本→竞品线性文档风格**： - 去卡片/去紫色badge/去双列grid/去textarea边框/去白卡 - section header加粗（视频总览/场景与光线/逐秒镜头拆解/硬性约束/负面提示词/完整口播稿） - 每字段「标签：内容」label:value一行一项，纯文本段落 - 镜头用cyan左边框+cyan粗体时间段标题分隔，镜头之间无卡片包裹只用间距分隔 - 参考图显示为@图片N样式的小缩略图badge（36x36圆角），hover可更换 - 硬约束tag：cyan半透明底；负面tag：红半透明底 - 口播稿折叠保留，展开后带cyan左边框段落 - 字段hover/focus时显示cyan虚线边框可编辑态，平时透明无边框 - 整体深色与页面一致 **问题8 文案生成分阶段进度提示**： - `getCopyStageText()`映射5阶段（analyzing_images→分析商品特征/planning→构思脚本框架/writing_shots→生成分镜脚本/writing_copy→撰写口播文案/finalizing→优化细节） - 显示：cyan spinner + emoji阶段文案 + "预计10-30秒，请稍候"灰色hint - 优先读后端progress_message **问题9 STEP3 UI 1:1复刻截图3**： - 深蓝黑背景（#0b1220/#111a2e） - 「3」cyan圆形badge + "STEP 3 生成视频"白色粗体 - 右上角「历史作品」cyan描边ghost按钮（点击提示"功能开发中"） - 标题下细cyan分割线 - 2x2参数网格：视频比例/视频模型/清晰度/成片超分 - 新增「清晰度」（480p/720p/1080p，默认480p）、「成片超分」（关闭/开启，默认关闭）字段，暂仅UI展示payload不传（等后端支持） - Select大圆角12px/高42px/深色底/cyan聚焦边框 **全局暗色主题适配**： - 页面bg:#0b1220，卡片bg:#111a2e/#0f1a2e，主色#22d3ee（cyan），主文字#e6edf7，灰阶#94a3b8/#64748b/#475569，边框#1e2d45 - 主按钮cyan渐变#06b6d4→#22d3ee白字；ghost透明底+cyan边框+cyan字；disabled#334155灰 - fusion-btn/pill/recog/audio-cell/preview/error/tabs/seg-tabs/credits/modal/滚动条/上传区全部暗色 - step-badge激活cyan底#0b1220字，未激活#1e2d45底#64748b字 ## 验证 - tsc --noEmit ✅ - prettier --write ✅ - vite build ✅ 6.30s
xiaoxia added 1 commit 2026-10-02 10:26:35 +08:00
feat(viral-video): v1.6 暗色主题 + 分镜脚本线性文档风格 + STEP3改版
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 2s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m38s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m56s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 2m6s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m34s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m35s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m51s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 3m16s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 4m11s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m11s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 28s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 29s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m35s
Details
577263ba7c 
- 全站配色切换为深蓝黑+cyan主题：#0b1220背景/#111a2e卡片/#22d3ee主色/#e6edf7文字/#1e2d45边框
- 问题1/9修复：所有select统一单层暗色圆角样式，STEP3用12px大圆角42px高度
- 问题7：分镜脚本改为线性文档排版
  - 去卡片/去紫色badge/去双列grid/去textarea边框
  - section header加粗（视频总览/场景与光线/逐秒镜头拆解/硬性约束/负面提示词/完整口播稿）
  - 每字段「标签：内容」label:value格式，纯文本段落
  - 镜头用cyan左边框+cyan粗体时间段标题分隔
  - 参考图显示为小缩略图badge(@图片N样式)
  - 硬性约束cyan半透明tag，负面提示红半透明tag
  - 口播稿折叠保留，展开后带cyan左边框段落
  - 输入/select/textarea透明底，hover/focus时显示cyan边框可编辑态
- 问题8：文案生成分阶段进度提示
  - getCopyStageText()映射5个阶段（分析商品/构思框架/生成分镜/撰写口播/优化细节）
  - 优先读后端progress_message，显示emoji+阶段文案+预计10-30秒灰色hint
- 问题9：STEP3 1:1复刻截图3
  - 顶部cyan圆形badge+白色粗体标题
  - 右上角「历史作品」cyan描边ghost按钮
  - 标题下细cyan分割线
  - 2x2参数网格：视频比例/视频模型/清晰度/成片超分
  - 新增清晰度(480p/720p/1080p)、成片超分(关闭/开启)字段（暂仅UI展示，payload待后端）
  - Select深色底大圆角cyan聚焦
- 全控件暗色适配：fusion-btn/pill/recog/audio-cell/preview/error/tabs/seg-tabs/credits/modal/滚动条/antd dropdown
- 删除未使用BulbOutlined/ThunderboltOutlined图标导入
- 问题4/5/2/3保持之前修复
xiaoxia reviewed 2026-10-02 10:26:35 +08:00
xiaoxia left a comment
Author
Owner
Copy Link
Copy Source

LGTM

LGTM
gitea-actions bot commented 2026-10-02 10:28:28 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2135 | | 预览链接 | [https://pr-2135.preview.xiaoxiajianji.com](https://pr-2135.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot merged commit dbb4e57810 into develop 2026-10-02 10:31:37 +08:00
auto-approve-bot deleted branch fix/2041-v16-dark-ui 2026-10-02 10:31:39 +08:00
gitea-actions bot commented 2026-10-02 10:32:04 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2135 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.
Reviewers
No Reviewers
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
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2135
Delete Branch "fix/2041-v16-dark-ui"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?