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

fix: 标题叠加层始终渲染+移除不存在的batch接口调用 #1419

Merged
auto-approve-bot merged 1 commits from fix/preview-title-overlay-and-api into develop 2026-08-18 13:26:01 +08:00
Conversation 5 Commits 1 Files Changed 2
+35 -38
xiaoxia commented 2026-08-18 13:16:20 +08:00
Owner
Copy Link
Copy Source

修复内容

修复1：标题叠加层不显示

问题：TitleOverlay 仅在 !assetsLoading 条件下渲染，导致加载过程中标题不可见；且条件分支 titleSettings && 不够精确。

修复：

  • 重构 PreviewVideoPanel 布局结构，使用单一 .xx-preview-video 容器
  • 容器内部条件渲染 loading 状态或 FrontendPreviewPlayer
  • TitleOverlay 始终渲染在容器顶层（z-index: 30），不受加载状态影响
  • 只要 titleSettings.title 有文字就显示

修复2：接口调用适配

问题：usePreviewAssets.ts 调用 POST /assets/batch 返回 405 Method Not Allowed，虽有回退逻辑但每次加载都会产生无效 405 请求。

修复：

  • 移除对 /assets/batch 的调用
  • 直接使用 Promise.allSettled 并发 GET /assets/{id}
  • 消除无效网络请求

验收标准

  1. ✅ Step5 选择素材后，预览面板能正常显示素材缩略图/第一帧
  2. ✅ Step4 设置的标题样式能实时在预览面板显示（含加载状态）
  3. ✅ Network 面板不会有 405 请求
  4. ✅ 播放控制正常工作
  5. ✅ 多个素材片段能按顺序播放
## 修复内容 ### 修复1：标题叠加层不显示 **问题**：TitleOverlay 仅在 `!assetsLoading` 条件下渲染，导致加载过程中标题不可见；且条件分支 `titleSettings &&` 不够精确。 **修复**： - 重构 PreviewVideoPanel 布局结构，使用单一 `.xx-preview-video` 容器 - 容器内部条件渲染 loading 状态或 FrontendPreviewPlayer - TitleOverlay 始终渲染在容器顶层（z-index: 30），不受加载状态影响 - 只要 `titleSettings.title` 有文字就显示 ### 修复2：接口调用适配 **问题**：`usePreviewAssets.ts` 调用 `POST /assets/batch` 返回 405 Method Not Allowed，虽有回退逻辑但每次加载都会产生无效 405 请求。 **修复**： - 移除对 `/assets/batch` 的调用 - 直接使用 `Promise.allSettled` 并发 `GET /assets/{id}` - 消除无效网络请求 ## 验收标准 1. ✅ Step5 选择素材后，预览面板能正常显示素材缩略图/第一帧 2. ✅ Step4 设置的标题样式能实时在预览面板显示（含加载状态） 3. ✅ Network 面板不会有 405 请求 4. ✅ 播放控制正常工作 5. ✅ 多个素材片段能按顺序播放
xiaoxia added 1 commit 2026-08-18 13:16:21 +08:00
fix: 标题叠加层始终渲染+移除不存在的batch接口调用
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 / Check if frontend-only change (pull_request) Successful in 37s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m37s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m43s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m41s
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 1m4s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m33s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m19s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m12s
Details
AI Code Review / AI Code Review (pull_request) Successful in 3m39s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m42s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 7m53s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
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 / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 6s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 34s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 46s
Details
3104d82a7b 
- PreviewVideoPanel: 重构布局结构，标题叠加层不再受加载状态影响
  - 单一 .xx-preview-video 容器，内部条件渲染 loading/player
  - TitleOverlay 始终渲染在容器顶层（z-index: 30）
  - 只要有标题文字就显示，不依赖素材加载完成
- usePreviewAssets: 移除 POST /assets/batch（后端返回405）
  - 直接使用 Promise.allSettled 并发 GET /assets/{id}
  - 消除每次加载时的无效 405 请求
gitea-actions bot commented 2026-08-18 13:19:29 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

【阻塞级判定】

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

📊 审查概览

  • 整体评价：通过
  • 建议级问题数量：0 个

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

无

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

无

✅ 良好实践

  1. PreviewVideoPanel.tsx: 使用 ?. 可选链和 trim() 安全地判断标题是否存在，有效避免了空指针异常和仅包含空格的字符串被误判为有效标题。
  2. PreviewVideoPanel.tsx: 优化了 DOM 结构，将 TitleOverlay 提升至与加载状态同级，利用 z-index 确保层级覆盖，逻辑清晰且符合交互预期（加载时标题依然可见）。
  3. usePreviewAssets.ts: 移除了无效的批量接口调用逻辑（已知返回 405），减少了不必要的网络请求开销，代码更加简洁高效。

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

🤖 由 AI 代码审查机器人自动生成 | 2026-08-18 05:20:01 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：0 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 无 ### ✅ 良好实践 1. **PreviewVideoPanel.tsx**: 使用 `?.` 可选链和 `trim()` 安全地判断标题是否存在，有效避免了空指针异常和仅包含空格的字符串被误判为有效标题。 2. **PreviewVideoPanel.tsx**: 优化了 DOM 结构，将 `TitleOverlay` 提升至与加载状态同级，利用 `z-index` 确保层级覆盖，逻辑清晰且符合交互预期（加载时标题依然可见）。 3. **usePreviewAssets.ts**: 移除了无效的批量接口调用逻辑（已知返回 405），减少了不必要的网络请求开销，代码更加简洁高效。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-18 05:20:01 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot approved these changes 2026-08-18 13:25:30 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-08-18 13:25:30 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 766277142c into develop 2026-08-18 13:26:01 +08:00
auto-approve-bot deleted branch fix/preview-title-overlay-and-api 2026-08-18 13:26:01 +08:00
gitea-actions bot commented 2026-08-18 13:26:47 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

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?