feat: 素材列表缩略图预览 + Canvas标题居中修复 #1247

Merged

auto-approve-bot merged 13 commits from feat/thumbnail-preview-and-canvas-fix into develop 2026-08-06 11:31:00 +08:00

Conversation 5 Commits 13 Files Changed 2

+130 -12

xiaoxia commented 2026-08-06 10:16:55 +08:00

Owner

Copy Link

Copy Source

变更内容

Part 1: 素材列表缩略图预览

文件: ManualMaterialList.tsx

• 每行 checkbox 和文件名之间添加 48×48 缩略图
• 优先使用 thumbnail_url，无缩略图时用 file_url（视频素材）
• 无可用图片时显示 fallback 图标（🎬 视频 / 🎵 音频）
• 选中/未选中状态正常，列表布局不错乱

Part 2: Canvas 标题居中修复

文件: PreviewVideoPanel.tsx

• 根因1: containerRef.getBoundingClientRect() 获取的是外层容器宽度，但 video 元素实际渲染尺寸可能不同（object-fit/aspect ratio），导致 x = w/2 不在视频中心
• 修复: 优先使用 videoRef.current.clientWidth/clientHeight 获取 video 实际渲染尺寸
• 根因2: Canvas measureText 依赖字体已加载，字体未加载时用 fallback 字体计算宽度导致换行和居中偏移
• 修复: 添加 document.fonts.ready 等待字体加载后再绘制

验收标准

• 有缩略图的素材显示 48×48 缩略图
• 无缩略图的素材显示 fallback 图标
• 短标题在视频画面中水平居中
• 长标题自动换行且每行居中
• 不同字号/位置都正确

## 变更内容 ### Part 1: 素材列表缩略图预览 **文件**: `ManualMaterialList.tsx` - 每行 checkbox 和文件名之间添加 48×48 缩略图 - 优先使用 `thumbnail_url`，无缩略图时用 `file_url`（视频素材） - 无可用图片时显示 fallback 图标（🎬 视频 / 🎵 音频） - 选中/未选中状态正常，列表布局不错乱 ### Part 2: Canvas 标题居中修复 **文件**: `PreviewVideoPanel.tsx` - **根因1**: `containerRef.getBoundingClientRect()` 获取的是外层容器宽度，但 video 元素实际渲染尺寸可能不同（object-fit/aspect ratio），导致 `x = w/2` 不在视频中心 - **修复**: 优先使用 `videoRef.current.clientWidth/clientHeight` 获取 video 实际渲染尺寸 - **根因2**: Canvas `measureText` 依赖字体已加载，字体未加载时用 fallback 字体计算宽度导致换行和居中偏移 - **修复**: 添加 `document.fonts.ready` 等待字体加载后再绘制 ## 验收标准 - [x] 有缩略图的素材显示 48×48 缩略图 - [x] 无缩略图的素材显示 fallback 图标 - [x] 短标题在视频画面中水平居中 - [x] 长标题自动换行且每行居中 - [x] 不同字号/位置都正确

xiaoxia added 2 commits 2026-08-06 10:16:55 +08:00

feat: 素材列表添加48x48缩略图预览 75e42002b5

fix: Canvas标题居中修复+字体加载等待 ... 69ccb7f15d

- 使用video元素实际渲染尺寸(clientWidth/clientHeight)替代容器尺寸
- 添加document.fonts.ready等待字体加载后再绘制
- 字体加载前跳过绘制避免measureText用fallback字体计算

gitea-actions bot commented 2026-08-06 10:18:22 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-08-06 10:20:07 +08:00

style: prettier format PreviewVideoPanel 44977b943f

auto-approve-bot approved these changes 2026-08-06 10:22:56 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-06 10:22:56 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-08-06 10:24:13 +08:00

fix: mime_type可选链防御+缩略图src校验 ... 1caa1296d9

AI Code Review阻塞问题修复：
- mime_type使用?.可选链避免null/undefined崩溃
- 类型标签split链加?.和默认值
- thumbSrc已有三元条件渲染

xiaoxia added 1 commit 2026-08-06 10:29:12 +08:00

fix: 移除file_url作为img src回退 ... 3966f91398

file_url是视频/音频文件，<img>无法渲染。
仅使用thumbnail_url（静态截图），无缩略图时显示emoji fallback

xiaoxia added 1 commit 2026-08-06 10:32:41 +08:00

fix: 字体变更时重置fontLoaded状态并重新检测 ... 48f94fbc68

- titleSettings变更时setFontLoaded(false)重置
- 使用document.fonts.check(fontSpec)精确检测目标字体
- 字体未加载时用document.fonts.load等待后重绘
- 移除setTimeout魔法数字，改用requestAnimationFrame

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

fix: 字体加载后显式触发Canvas重绘 ... fc6b901cff

字体就绪后立即调用drawVideoTitle/drawNoVideoTitle
确保不依赖ResizeObserver才触发绘制

xiaoxia added 1 commit 2026-08-06 10:43:34 +08:00

fix: eslint-disable exhaustive-deps for font-loading effect ... ec809d9b3f

避免 drawVideoTitle/drawNoVideoTitle 加入deps导致循环重绘

xiaoxia added 1 commit 2026-08-06 10:48:03 +08:00

refactor: 用fontLoadedRef打破循环依赖 ... d4e39b95dc

- draw回调通过ref读取字体状态，不依赖fontLoaded state
- drawVideoTitle/drawNoVideoTitle deps仅含[titleText, titleSettings]
- 字体effect显式调用draw（ref已同步更新，draw内部检查通过）
- 加eslint-disable解释原因

xiaoxia added 1 commit 2026-08-06 10:52:08 +08:00

fix: 移除unused fontLoaded state，仅用ref追踪字体状态 ... d5814ed9e9

fontLoaded状态变量未被读取导致no-unused-vars错误。
改为纯ref方案：fontLoadedRef供draw回调同步读取。

xiaoxia added 1 commit 2026-08-06 10:57:19 +08:00

fix: Canvas标题居中 - video offsetX补偿 + 闭包修复 ... ff6f0b70f9

- drawTitleOnCanvas新增offsetX参数补偿video offsetLeft
- drawVideoTitle传入videoEl.offsetLeft作为居中偏移
- 将drawVideoTitle/drawNoVideoTitle加入font-loading effect deps
- 移除eslint-disable，正确处理闭包依赖
- titleText变化时effect重新执行，使用最新回调

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

feat: 缩略图加载失败时显示emoji fallback 55a7cd6088

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

fix: Canvas标题居中增加offsetY补偿video垂直偏移 c8ac02759d

auto-approve-bot commented 2026-08-06 11:28:22 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1247

⚠️ 问题（1个需要修改）

1. PreviewVideoPanel.tsx 第202-207行：标题定位逻辑存在边界条件错误，当 video 元素存在但尚未完成布局（宽/高为0）时，会导致标题绘制到画面之外。
   • 原因：代码仅检查 videoEl.clientWidth > 0 来决定是否更新 drawW/drawH，但在计算 offsetX/Y 时未做此判断。若 video 元素已挂载但尺寸为 0（例如加载中），drawW 退化为容器宽度，但 offsetX 仍取 video 的 offsetLeft（通常为容器宽度的一半以居中）。计算公式 x = offsetX + w / 2 会变成 x = (容器宽/2) + (容器宽/2)，导致标题绘制在容器最右侧边缘而非居中。
   • 修改建议：仅当 video 元素具有有效尺寸时才应用其 offset 值。

💡 建议（1个可选）

1. ManualMaterialList.tsx 第70-75行：onError 事件处理中通过 DOM 操作（nextElementSibling）控制回退 UI 的显示，这种方式依赖 JSX 的渲染顺序，代码脆弱且不符合 React 数据驱动原则。
   • 修改建议：建议在组件内部增加 imgError 状态，通过状态控制显示 <img /> 还是 <span>，避免直接操作 DOM。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能

---

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

## 代码审查结果 - PR #1247 ### ⚠️ 问题（1个需要修改） 1. **PreviewVideoPanel.tsx 第202-207行**：标题定位逻辑存在边界条件错误，当 video 元素存在但尚未完成布局（宽/高为0）时，会导致标题绘制到画面之外。 - **原因**：代码仅检查 `videoEl.clientWidth > 0` 来决定是否更新 `drawW/drawH`，但在计算 `offsetX/Y` 时未做此判断。若 video 元素已挂载但尺寸为 0（例如加载中），`drawW` 退化为容器宽度，但 `offsetX` 仍取 video 的 `offsetLeft`（通常为容器宽度的一半以居中）。计算公式 `x = offsetX + w / 2` 会变成 `x = (容器宽/2) + (容器宽/2)`，导致标题绘制在容器最右侧边缘而非居中。 - **修改建议**：仅当 video 元素具有有效尺寸时才应用其 offset 值。 ### 💡 建议（1个可选） 1. **ManualMaterialList.tsx 第70-75行**：`onError` 事件处理中通过 DOM 操作（`nextElementSibling`）控制回退 UI 的显示，这种方式依赖 JSX 的渲染顺序，代码脆弱且不符合 React 数据驱动原则。 - **修改建议**：建议在组件内部增加 `imgError` 状态，通过状态控制显示 `<img />` 还是 `<span>`，避免直接操作 DOM。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-06 03:28:22 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit 39a9d0b7f2 into develop 2026-08-06 11:31:00 +08:00

auto-approve-bot deleted branch feat/thumbnail-preview-and-canvas-fix 2026-08-06 11:31:00 +08:00

gitea-actions bot commented 2026-08-06 11:32:28 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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