feat(asset): 素材悬浮预览支持视频播放 #1240

Merged

auto-approve-bot merged 1 commits from fix/asset-video-preview into develop 2026-08-04 22:41:00 +08:00

Conversation 5 Commits 1 Files Changed 4

+15 -2

xiaoxia commented 2026-08-04 22:32:28 +08:00

Owner

Copy Link

Copy Source

改动内容

Q4 — 素材选择增加视频预览能力

修改文件

1. types.ts — MediaAsset 接口新增 source_url 字段
2. mediaAssets.ts — mapAssetToMediaAsset 映射 asset.file_url → source_url
3. PreviewOverlay.tsx — 视频素材悬浮时用 <video autoPlay muted loop> 播放，图片素材保持 <img>
4. AssetSelector.css — 增加 video 元素样式适配

效果

• 鼠标悬浮在视频素材卡片上时，预览区域自动播放视频（静音循环）
• 图片素材行为不变，仍显示缩略图
• 视频无 source_url 时降级为缩略图显示

## 改动内容 Q4 — 素材选择增加视频预览能力 ### 修改文件 1. **types.ts** — MediaAsset 接口新增 `source_url` 字段 2. **mediaAssets.ts** — mapAssetToMediaAsset 映射 `asset.file_url` → `source_url` 3. **PreviewOverlay.tsx** — 视频素材悬浮时用 `<video autoPlay muted loop>` 播放，图片素材保持 `<img>` 4. **AssetSelector.css** — 增加 video 元素样式适配 ### 效果 - 鼠标悬浮在视频素材卡片上时，预览区域自动播放视频（静音循环） - 图片素材行为不变，仍显示缩略图 - 视频无 source_url 时降级为缩略图显示

xiaoxia added 1 commit 2026-08-04 22:32:28 +08:00

feat(asset): 素材悬浮预览支持视频播放 ... 3b56778cd4

- MediaAsset 新增 source_url 字段，映射自 AssetItem.file_url
- PreviewOverlay 视频素材使用 video 标签自动播放（muted+loop）
- 图片素材保持 img 标签不变
- CSS 增加 video 元素样式适配

gitea-actions bot commented 2026-08-04 22:34:05 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot commented 2026-08-04 22:34:13 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [apps/web/src/components/asset-selector/PreviewOverlay.tsx: 15] 建议增加视频加载失败的错误处理
   • 具体内容：当前代码直接渲染 <video> 标签，如果 source_url 指向的资源无效（如 404）或格式不被浏览器支持，视频区域可能会显示为空白或损坏的图标，影响用户体验。建议添加 onError 事件处理，在视频加载失败时回退显示缩略图或图标。

✅ 良好实践

1. 移动端兼容性处理得当: 在 <video> 标签中正确使用了 playsInline、muted 和 autoPlay 属性，确保在 iOS 等移动端环境下能正常自动播放，符合现代 Web 开发最佳实践。
2. 类型定义与实现同步: 在修改 mediaAssets.ts 映射逻辑的同时，及时更新了 types.ts 中的接口定义，保持了类型系统的一致性。
3. 回退逻辑完善: 组件渲染逻辑中包含了 source_url 缺失时的回退方案（显示缩略图或图标），避免了数据不完整时的渲染异常。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-04 14:34:13 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/components/asset-selector/PreviewOverlay.tsx: 15] 建议增加视频加载失败的错误处理** - 具体内容：当前代码直接渲染 `<video>` 标签，如果 `source_url` 指向的资源无效（如 404）或格式不被浏览器支持，视频区域可能会显示为空白或损坏的图标，影响用户体验。建议添加 `onError` 事件处理，在视频加载失败时回退显示缩略图或图标。 ### ✅ 良好实践 1. **移动端兼容性处理得当**: 在 `<video>` 标签中正确使用了 `playsInline`、`muted` 和 `autoPlay` 属性，确保在 iOS 等移动端环境下能正常自动播放，符合现代 Web 开发最佳实践。 2. **类型定义与实现同步**: 在修改 `mediaAssets.ts` 映射逻辑的同时，及时更新了 `types.ts` 中的接口定义，保持了类型系统的一致性。 3. **回退逻辑完善**: 组件渲染逻辑中包含了 `source_url` 缺失时的回退方案（显示缩略图或图标），避免了数据不完整时的渲染异常。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-04 14:34:13 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-08-04 22:35:04 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-04 22:35:04 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit ffebaa7249 into develop 2026-08-04 22:41:00 +08:00

auto-approve-bot deleted branch fix/asset-video-preview 2026-08-04 22:41:00 +08:00

gitea-actions bot commented 2026-08-04 22:41:47 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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