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

fix: title default position lower & drag stability #1690

Merged
auto-approve-bot merged 1 commits from fix/title-position-and-drag-stability into develop 2026-09-04 15:16:46 +08:00
Conversation 5 Commits 1 Files Changed 2
+6 -4
xiaoxia commented 2026-09-04 15:09:12 +08:00
Owner
Copy Link
Copy Source

Changes

1. 标题默认位置下调

File: apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx

  • 标题 top 从 8px 改为 6.25%
  • 与 ASS 坐标系对齐（TITLE_MARGIN_TOP=120, 120/1920 ≈ 6.25%）
  • 与生成预览 FrontendPreviewPlayer 保持一致

2. 拖拽标题时保持排版稳定

File: apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

Before:

  • 默认状态：left: sidePct% + right: sidePct%（固定宽度）
  • 拖拽状态：left: xPct% + transform: translate(-50%, -50%)（宽度随内容变化）

After:

  • 两种状态都使用固定 width: ${100 - 2*sidePct}% 和 maxWidth
  • 默认状态：left: 50% + transform: translateX(-50%) 居中
  • 拖拽状态：left: xPct% + transform: translate(-50%, -50%) 定位
  • 拖拽时只变位置，宽度不变，避免 CSS reflow 导致的换行变化

Verification

  • ✅ Prettier formatted
  • ✅ TypeScript compiles
  • ✅ ESLint passes
## Changes ### 1. 标题默认位置下调 **File:** `apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx` - 标题 top 从 `8px` 改为 `6.25%` - 与 ASS 坐标系对齐（TITLE_MARGIN_TOP=120, 120/1920 ≈ 6.25%） - 与生成预览 FrontendPreviewPlayer 保持一致 ### 2. 拖拽标题时保持排版稳定 **File:** `apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx` **Before:** - 默认状态：`left: sidePct%` + `right: sidePct%`（固定宽度） - 拖拽状态：`left: xPct%` + `transform: translate(-50%, -50%)`（宽度随内容变化） **After:** - 两种状态都使用固定 `width: ${100 - 2*sidePct}%` 和 `maxWidth` - 默认状态：`left: 50%` + `transform: translateX(-50%)` 居中 - 拖拽状态：`left: xPct%` + `transform: translate(-50%, -50%)` 定位 - 拖拽时只变位置，宽度不变，避免 CSS reflow 导致的换行变化 ## Verification - ✅ Prettier formatted - ✅ TypeScript compiles - ✅ ESLint passes
xiaoxia added 1 commit 2026-09-04 15:09:13 +08:00
fix: title default position lower & drag stability
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 3s
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 Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web 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 / Frontend Unit Tests (pull_request) Successful in 1m37s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m38s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m47s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 1m51s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m55s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m3s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m18s
Details
AI Code Review / AI Code Review (pull_request) Successful in 5m30s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 6m30s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 4s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 5m29s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 10s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 30s
Details
6548529d66 
1. PreviewPlayer.tsx: title top position changed from 8px to 6.25%
   (matching ASS coordinate system ~120/1920 for 9:16 videos)

2. FrontendPreviewPlayer.tsx: title container now uses fixed width
   (100 - 2*sideMargin%) in both default and drag states, preventing
   layout reflow and unwanted line breaks when dragging.
gitea-actions bot commented 2026-09-04 15:10:58 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-04 15:11:17 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot commented 2026-09-04 15:14:43 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

  1. [apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx:594] 重复代码优化

    • 具体内容：width 和 maxWidth 的计算表达式 ${100 - 2 * titleSidePct}% 重复出现。建议在组件内或 style 对象外先计算该值（例如 const safeWidth = \${100 - 2 * titleSidePct}%`;`），然后引用该变量，提高代码可维护性。

  2. [apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx:594] 边界条件防御

    • 具体内容：表达式 100 - 2 * titleSidePct 依赖 titleSidePct。如果 titleSidePct 为 null/undefined 会导致计算结果为 NaN，导致宽度失效；如果 titleSidePct > 50 会导致宽度为负数。建议确保上游数据校验，或在此处添加 Math.max(0, ...) 和默认值处理（如 titleSidePct || 0）以增强鲁棒性。

✅ 良好实践

  • FrontendPreviewPlayer.tsx 中通过 left: 50% 配合 transform: translateX(-50%) 实现水平居中，同时结合 width 限制，逻辑清晰且符合现代 CSS 布局最佳实践，避免了 left/right 同时设置带来的拉伸问题。
  • PreviewPlayer.tsx 将固定的 px 单位改为响应式的 % 单位，提升了不同屏幕尺寸下的适配能力。

🤖 由 AI 代码审查机器人自动生成 | 2026-09-04 07:14:43 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx:594] 重复代码优化** - 具体内容：`width` 和 `maxWidth` 的计算表达式 `${100 - 2 * titleSidePct}%` 重复出现。建议在组件内或 style 对象外先计算该值（例如 `const safeWidth = \`${100 - 2 * titleSidePct}%\`;`），然后引用该变量，提高代码可维护性。 2. **[apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx:594] 边界条件防御** - 具体内容：表达式 `100 - 2 * titleSidePct` 依赖 `titleSidePct`。如果 `titleSidePct` 为 `null`/`undefined` 会导致计算结果为 `NaN`，导致宽度失效；如果 `titleSidePct > 50` 会导致宽度为负数。建议确保上游数据校验，或在此处添加 `Math.max(0, ...)` 和默认值处理（如 `titleSidePct || 0`）以增强鲁棒性。 ### ✅ 良好实践 - `FrontendPreviewPlayer.tsx` 中通过 `left: 50%` 配合 `transform: translateX(-50%)` 实现水平居中，同时结合 `width` 限制，逻辑清晰且符合现代 CSS 布局最佳实践，避免了 `left/right` 同时设置带来的拉伸问题。 - `PreviewPlayer.tsx` 将固定的 `px` 单位改为响应式的 `%` 单位，提升了不同屏幕尺寸下的适配能力。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-09-04 07:14:43 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot merged commit 8a3115bc54 into develop 2026-09-04 15:16:46 +08:00
auto-approve-bot deleted branch fix/title-position-and-drag-stability 2026-09-04 15:16:46 +08:00
gitea-actions bot commented 2026-09-04 15:17:08 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1690 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1690
Delete Branch "fix/title-position-and-drag-stability"

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?