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

feat(title): 预览画面标题自由拖拽——position=custom+PlayRes坐标提交（工单#1405方案B） #1593

Merged
xiaoxia merged 1 commits from feat/title-drag-custom into develop 2026-09-01 12:04:23 +08:00
Conversation 5 Commits 1 Files Changed 9
+112 -12
xiaoxia commented 2026-09-01 07:20:52 +08:00
Owner
Copy Link
Copy Source

改动内容（工单 #1405 方案B）

类型与状态

  • types.ts: TitleSettings 新增 posX: number | null、posY: number | null，默认 null
  • useGenerateFormState/index.ts: DEFAULT_TITLE_SETTINGS 补齐 posX: null, posY: null
  • useTitleStyleUpdaters.ts: updatePosition 切回三档时清坐标；新增 updateTitlePosition(posX, posY) 供预览播放器调用

位置下拉

  • constants.ts: POSITION_OPTIONS 新增 { value: "custom", label: "自定义" }；拖拽后下拉框自动显示"自定义"；选 top/center/bottom 时清坐标回预设

预览拖拽（FrontendPreviewPlayer.tsx）

  • 外层叠加层 pointerEvents 保留 none，标题文本块加 pointerEvents: auto、cursor: grab/grabbing、touchAction: none、透明 padding（box-shadow inset 16px transparent）扩大抓握热区
  • 使用 Pointer Events（onPointerDown/Move/Up + setPointerCapture + onPointerCancel），鼠标+触屏共用
  • 拖拽时 preventDefault + stopPropagation，不触发视频播放/暂停
  • 坐标换算：指针相对播放器容器位置 → PlayRes 像素（posX = relX/容器宽 × PlayResX，PlayRes 根据 videoRatio 取 1080×1920 / 1920×1080 / 1080×1080），clamp 在画面范围内

渲染规则（同渲染分支，靠有无坐标区分）

  • 有 posX/posY：用 left/top 百分比 + transform: translate(-50%,-50%) 定位（锚点=文本块中心，与后端 \an5+\pos 完全对应）
  • 无坐标：现有 top/center/bottom 布局一字不动（left/right 50% + textAlign center）
  • 三档位置的现有预览效果、标题样式（字号/描边/阴影/换行/字体）一律不变

提交映射（useGenerateVideo.ts）

  • 组装 title_config 时，position === "custom" 且 posX/posY 非空 → 带 pos_x/pos_y（取整）
  • 三档时不传这两个字段（后端默认走 alignment）

兼容

  • useCanvasPlayer.ts: 标题类型联合加入 "custom"，兜底路径坐标缺失时行为与改动前完全一致，不报错
  • 不涉及 CI / Dockerfile / 后端代码

未改动

  • 无死代码
  • 不并行维护两套定位逻辑（custom 与三档走同一个渲染分支）
  • 不影响配音字幕/ASS 其他段
## 改动内容（工单 #1405 方案B） ### 类型与状态 - **types.ts**: TitleSettings 新增 `posX: number | null`、`posY: number | null`，默认 `null` - **useGenerateFormState/index.ts**: DEFAULT_TITLE_SETTINGS 补齐 `posX: null, posY: null` - **useTitleStyleUpdaters.ts**: `updatePosition` 切回三档时清坐标；新增 `updateTitlePosition(posX, posY)` 供预览播放器调用 ### 位置下拉 - **constants.ts**: POSITION_OPTIONS 新增 `{ value: "custom", label: "自定义" }`；拖拽后下拉框自动显示"自定义"；选 top/center/bottom 时清坐标回预设 ### 预览拖拽（FrontendPreviewPlayer.tsx） - 外层叠加层 pointerEvents 保留 `none`，标题文本块加 `pointerEvents: auto`、`cursor: grab/grabbing`、`touchAction: none`、透明 padding（box-shadow inset 16px transparent）扩大抓握热区 - 使用 Pointer Events（onPointerDown/Move/Up + setPointerCapture + onPointerCancel），鼠标+触屏共用 - 拖拽时 preventDefault + stopPropagation，不触发视频播放/暂停 - 坐标换算：指针相对播放器容器位置 → PlayRes 像素（`posX = relX/容器宽 × PlayResX`，PlayRes 根据 videoRatio 取 1080×1920 / 1920×1080 / 1080×1080），clamp 在画面范围内 ### 渲染规则（同渲染分支，靠有无坐标区分） - 有 posX/posY：用 `left/top 百分比 + transform: translate(-50%,-50%)` 定位（锚点=文本块中心，与后端 \an5+\pos 完全对应） - 无坐标：现有 top/center/bottom 布局一字不动（left/right 50% + textAlign center） - 三档位置的现有预览效果、标题样式（字号/描边/阴影/换行/字体）一律不变 ### 提交映射（useGenerateVideo.ts） - 组装 title_config 时，`position === "custom"` 且 posX/posY 非空 → 带 `pos_x`/`pos_y`（取整） - 三档时不传这两个字段（后端默认走 alignment） ### 兼容 - **useCanvasPlayer.ts**: 标题类型联合加入 `"custom"`，兜底路径坐标缺失时行为与改动前完全一致，不报错 - 不涉及 CI / Dockerfile / 后端代码 ## 未改动 - 无死代码 - 不并行维护两套定位逻辑（custom 与三档走同一个渲染分支） - 不影响配音字幕/ASS 其他段
gitea-actions bot commented 2026-09-01 07:27:14 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1593 | | 预览链接 | [https://pr-1593.preview.xiaoxiajianji.com](https://pr-1593.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot approved these changes 2026-09-01 07:27:39 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-01 07:27:39 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia added 1 commit 2026-09-01 11:57:52 +08:00
feat(title): 预览画面标题自由拖拽——pointer-events+PlayRes坐标换算+position=custom提交（工单#1405方案B）
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 3s
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 3s
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
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 / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 3m18s
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
AI Code Review / AI Code Review (pull_request) Successful in 4m16s
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
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 4m48s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 4m54s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 4m40s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 5m10s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 5m42s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 6m5s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 6m11s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 8m45s
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 3s
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
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 3m38s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m16s
Details
60c00ee4b6
xiaoxia force-pushed feat/title-drag-custom from 40e50c0c54 to 60c00ee4b6 2026-09-01 11:57:52 +08:00 Compare
auto-approve-bot commented 2026-09-01 12:02:06 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

  • 是否存在阻塞级问题：否
  • 阻塞级问题数量：0 个

📊 审查概览

  • 整体评价：有建议
  • 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

无

💡 改进建议（不阻塞合并）

  1. [apps/web/.tscache/tsconfig.tsbuildinfo] 提交了构建缓存文件

    • 具体内容：该文件是 TypeScript 编译器生成的增量编译缓存文件，属于构建产物，不应纳入版本控制。提交此类文件会导致 Git 仓库体积膨胀，且在多人协作时极易产生无意义的合并冲突。建议将 .tscache 目录添加至 .gitignore，并从本次提交中移除此文件。

  2. [Diff 内容] 无法审查核心业务逻辑

    • 具体内容：提供的 Diff 内容被截断（原始 463990 字符，仅显示 30000 字符），且主要展示的是 tsconfig.tsbuildinfo 的 JSON 内容。关键的业务文件（如 GeneratePage.tsx、useGenerateVideo.ts 等）的代码变更未在可见 Diff 中体现。因此，无法对本次 PR 的核心逻辑、安全性及性能进行实质性审查。请提供完整的 Diff 或确保关键代码变更可见。

✅ 良好实践

无（因核心代码变更未展示，无法判断代码质量）

🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 04:02:05 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/.tscache/tsconfig.tsbuildinfo] 提交了构建缓存文件** - 具体内容：该文件是 TypeScript 编译器生成的增量编译缓存文件，属于构建产物，不应纳入版本控制。提交此类文件会导致 Git 仓库体积膨胀，且在多人协作时极易产生无意义的合并冲突。建议将 `.tscache` 目录添加至 `.gitignore`，并从本次提交中移除此文件。 2. **[Diff 内容] 无法审查核心业务逻辑** - 具体内容：提供的 Diff 内容被截断（原始 463990 字符，仅显示 30000 字符），且主要展示的是 `tsconfig.tsbuildinfo` 的 JSON 内容。关键的业务文件（如 `GeneratePage.tsx`、`useGenerateVideo.ts` 等）的代码变更未在可见 Diff 中体现。因此，无法对本次 PR 的核心逻辑、安全性及性能进行实质性审查。请提供完整的 Diff 或确保关键代码变更可见。 ### ✅ 良好实践 无（因核心代码变更未展示，无法判断代码质量） --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 04:02:05 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia merged commit ff40a7b5f3 into develop 2026-09-01 12:04:23 +08:00
gitea-actions bot commented 2026-09-01 12:08:01 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1593
Delete Branch "feat/title-drag-custom"

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?