xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 8 Pull Requests 8 Actions 1 Packages Projects Releases 7 Wiki Activity

PR#3 前端CSS标题叠加与拖拽调整 #1405

New Issue
Open
opened 2026-08-17 15:41:01 +08:00 by xiaoxia · 0 comments
xiaoxia commented 2026-08-17 15:41:01 +08:00
Owner
Copy Link
Copy Source

目标

前端实现 CSS 标题叠加预览 + 拖拽调整位置，替代已删除的 Canvas 预览方案。

依赖

  • ✅ PR #1402（Canvas 预览代码已清理）
  • 🔄 PR #1404（Clips API 修复，补全 asset_url 等字段，待合并）

任务内容

1. CSS 标题叠加预览

  • 在预览视频上方用 CSS absolute 定位叠加标题文字
  • 标题样式（字体、大小、颜色、位置）从 title_config 读取
  • 标题渲染效果需与后端 FFmpeg 最终渲染一致

2. 拖拽调整

  • 支持拖拽标题在预览画面上调整位置
  • 拖拽后更新 title_config 中的坐标参数
  • 保留 Step4TitleSettings.tsx、TitleStylePanel.tsx 等已有组件

3. 使用 clips API 的 asset_url

  • PR #1404 合入后，clips API 返回 asset_url 字段
  • 前端使用 asset_url 加载视频缩略图/预览

关键约束

  • 标题配置数据结构与后端 title_config schema 保持一致
  • 不做 Canvas 渲染，只用 CSS
  • 保留已有的标题输入和 AI 选择功能

验收标准

  • 预览视频上方显示标题，样式可调
  • 支持拖拽调整标题位置
  • CI 全绿
  • 部署到 staging 后可验证
## 目标 前端实现 CSS 标题叠加预览 + 拖拽调整位置，替代已删除的 Canvas 预览方案。 ## 依赖 - ✅ PR #1402（Canvas 预览代码已清理） - 🔄 PR #1404（Clips API 修复，补全 asset_url 等字段，待合并） ## 任务内容 ### 1. CSS 标题叠加预览 - 在预览视频上方用 CSS absolute 定位叠加标题文字 - 标题样式（字体、大小、颜色、位置）从 title_config 读取 - 标题渲染效果需与后端 FFmpeg 最终渲染一致 ### 2. 拖拽调整 - 支持拖拽标题在预览画面上调整位置 - 拖拽后更新 title_config 中的坐标参数 - 保留 Step4TitleSettings.tsx、TitleStylePanel.tsx 等已有组件 ### 3. 使用 clips API 的 asset_url - PR #1404 合入后，clips API 返回 asset_url 字段 - 前端使用 asset_url 加载视频缩略图/预览 ### 关键约束 - 标题配置数据结构与后端 title_config schema 保持一致 - 不做 Canvas 渲染，只用 CSS - 保留已有的标题输入和 AI 选择功能 ## 验收标准 - [ ] 预览视频上方显示标题，样式可调 - [ ] 支持拖拽调整标题位置 - [ ] CI 全绿 - [ ] 部署到 staging 后可验证
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1405
Delete Branch "%!s()"

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?