fix: 删除no-video标题预览 + 视频素材可播放预览 + Canvas标题居中修复 #1248

Merged

xiaoxia merged 7 commits from feat/no-video-cleanup-and-centering-fix into develop 2026-08-06 17:44:08 +08:00

Conversation 5 Commits 7 Files Changed 2

+100 -96

xiaoxia commented 2026-08-06 17:12:08 +08:00

Owner

Copy Link

Copy Source

改动内容

Part 1：删除 no-video 标题预览

• 删除 noVideoCanvasRef / noVideoContainerRef 声明
• 删除 drawNoVideoTitle 回调
• 删除 no-video 模式的 ResizeObserver useEffect
• 字体加载 useEffect 中移除 drawNoVideoTitle 引用
• 删除 no-video JSX 块（!hasPreview && !isError && showTitlePreview 条件渲染的 div）

Part 2：视频素材缩略图改为可播放预览

• 视频素材（isVideo && file_url）使用 <video> 标签自动循环播放
• 无 file_url 时 fallback 到 thumbnail_url 静态图
• 非视频素材保持原有 img/fallback 逻辑

Part 3：Canvas 标题居中修复

• drawVideoTitle 改用 videoEl.getBoundingClientRect() 获取实际渲染尺寸和位置
• 用 container.getBoundingClientRect() 计算 video 相对于 container 的偏移
• offsetX = videoRect.left - containerRect.left
• offsetY = videoRect.top - containerRect.top
• drawTitleOnCanvas 接收精确的 drawW/drawH/offsetX/offsetY

验收标准

• 无视频时不再显示标题预览卡片
• 视频素材在列表中自动循环播放
• 标题在视频画面中水平居中（不同视频尺寸、不同位置都正确）
• CI 全绿

## 改动内容 ### Part 1：删除 no-video 标题预览 - 删除 `noVideoCanvasRef` / `noVideoContainerRef` 声明 - 删除 `drawNoVideoTitle` 回调 - 删除 no-video 模式的 `ResizeObserver` useEffect - 字体加载 useEffect 中移除 `drawNoVideoTitle` 引用 - 删除 no-video JSX 块（`!hasPreview && !isError && showTitlePreview` 条件渲染的 div） ### Part 2：视频素材缩略图改为可播放预览 - 视频素材（`isVideo && file_url`）使用 `<video>` 标签自动循环播放 - 无 `file_url` 时 fallback 到 `thumbnail_url` 静态图 - 非视频素材保持原有 img/fallback 逻辑 ### Part 3：Canvas 标题居中修复 - `drawVideoTitle` 改用 `videoEl.getBoundingClientRect()` 获取实际渲染尺寸和位置 - 用 `container.getBoundingClientRect()` 计算 video 相对于 container 的偏移 - offsetX = videoRect.left - containerRect.left - offsetY = videoRect.top - containerRect.top - drawTitleOnCanvas 接收精确的 drawW/drawH/offsetX/offsetY ## 验收标准 - [ ] 无视频时不再显示标题预览卡片 - [ ] 视频素材在列表中自动循环播放 - [ ] 标题在视频画面中水平居中（不同视频尺寸、不同位置都正确） - [ ] CI 全绿

xiaoxia added 2 commits 2026-08-06 17:12:08 +08:00

refactor: 删除no-video标题预览 + Canvas居中改用getBoundingClientRect ... 8507729ca9

- 删除 noVideoCanvasRef/noVideoContainerRef 声明
- 删除 drawNoVideoTitle 回调
- 删除 no-video ResizeObserver effect
- 字体加载 effect 移除 drawNoVideoTitle 引用
- 删除 no-video JSX 块
- drawVideoTitle 改用 videoEl.getBoundingClientRect() 获取实际渲染尺寸
- 用 containerRect 计算 offsetX/offsetY 精确补偿视频偏移

feat: 视频素材缩略图改为可播放video预览 ... c411b732bd

- 视频素材(isVideo+file_url)使用video标签自动循环播放
- 无file_url时fallback到thumbnail_url静态图
- 非视频素材保持原有img/fallback逻辑

auto-approve-bot approved these changes 2026-08-06 17:14:36 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-06 17:14:36 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-08-06 17:14:46 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-08-06 17:17:39 +08:00

fix: 视频素材缩略图改为hover播放，移除autoPlay避免性能问题 57c181ce97

xiaoxia added 1 commit 2026-08-06 17:21:37 +08:00

fix: 修复视频多实例播放问题+ref回调改为poster属性 ... 0d3c3e81ac

- 新增 activeVideoRef 追踪当前播放视频，播放新视频前暂停其他视频
- 移除内联 ref 回调，改用 poster 属性直接设置封面
- mouseLeave 时同步清理 activeVideoRef

xiaoxia added 1 commit 2026-08-06 17:27:18 +08:00

style: prettier格式化修复 0ba007f326

xiaoxia added 1 commit 2026-08-06 17:35:39 +08:00

docs: 添加设计说明注释，明确no-video标题预览为有意删除 ... 0d8acb38b7

标题预览仅在有视频时显示，无视频状态下不再单独预览标题。

xiaoxia added 1 commit 2026-08-06 17:35:50 +08:00

fix: 修复视频hover播放的DOM引用安全性检查 ... ffe32330a1

增加document.body.contains检查，确保操作仍在DOM中的视频元素

auto-approve-bot commented 2026-08-06 17:40:00 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

无

✅ 良好实践

1. PreviewVideoPanel.tsx：移除“无视频”模式下的复杂逻辑和冗余 Ref，有效降低了组件复杂度，符合“做减法”的优化原则。
2. PreviewVideoPanel.tsx：使用 getBoundingClientRect 计算视频相对于容器的偏移量 (offsetX, offsetY)，比直接使用 offsetLeft/Top 更准确，能够正确处理 Flex 布局或 Margin 导致的视觉偏移。
3. ManualMaterialList.tsx：在 handleVideoMouseEnter 中增加了 document.body.contains 检查，防止操作已卸载的 DOM 节点，避免了潜在的内存泄漏或报错。
4. ManualMaterialList.tsx：视频标签设置了 preload="none"，在列表场景下避免了同时加载大量视频资源导致的带宽浪费和性能问题。
5. ManualMaterialList.tsx：使用 activeVideoRef 确保同一时间只有一个视频预览在播放，互斥逻辑清晰，用户体验良好。

---

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

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-06 09:40:00 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：0 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 无 ### ✅ 良好实践 1. **PreviewVideoPanel.tsx**：移除“无视频”模式下的复杂逻辑和冗余 Ref，有效降低了组件复杂度，符合“做减法”的优化原则。 2. **PreviewVideoPanel.tsx**：使用 `getBoundingClientRect` 计算视频相对于容器的偏移量 (`offsetX`, `offsetY`)，比直接使用 `offsetLeft/Top` 更准确，能够正确处理 Flex 布局或 Margin 导致的视觉偏移。 3. **ManualMaterialList.tsx**：在 `handleVideoMouseEnter` 中增加了 `document.body.contains` 检查，防止操作已卸载的 DOM 节点，避免了潜在的内存泄漏或报错。 4. **ManualMaterialList.tsx**：视频标签设置了 `preload="none"`，在列表场景下避免了同时加载大量视频资源导致的带宽浪费和性能问题。 5. **ManualMaterialList.tsx**：使用 `activeVideoRef` 确保同一时间只有一个视频预览在播放，互斥逻辑清晰，用户体验良好。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-06 09:40:00 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit a66ecc26d8 into develop 2026-08-06 17:44:08 +08:00

gitea-actions bot commented 2026-08-06 17:45:01 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1248 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1248