feat: Q5 智能匹配前端简化 — 一键AI选素材 (#1241) #1241

Merged

auto-approve-bot merged 22 commits from feat/smart-match-simplify into develop 2026-08-05 00:36:00 +08:00

Conversation 5 Commits 22 Files Changed 10

+119 -185

xiaoxia commented 2026-08-05 00:05:26 +08:00

Owner

Copy Link

Copy Source

改动概要

Q5 智能匹配前端简化：去掉「输入描述→匹配→确认」的冗余流程，改为一键触发 AI 选素材。

改动文件

1. apps/web/src/api/assets/assets.ts — 新增 smartMatchAssets() API 函数，调用 POST /assets/smart-match
2. apps/web/src/api/assets/index.ts — 导出 smartMatchAssets
3. hooks/step2-materials/useSmartMatch.ts — 重写：去掉描述输入/随机匹配/匹配分数，改为一键调用后端 API，失败时回退全选
4. hooks/useStep2Materials.ts — 适配新 hook 接口（传入 libraryId，移除 smartMatchInput/smartMatchedResults）
5. components/material/SmartMatchInput.tsx — 简化为一键按钮「让 AI 帮你选」，无 textarea
6. components/material/SmartMatchResults.tsx — 简化为直接展示选中素材，无匹配分数/理由
7. components/material/SmartMatchCard.tsx — 移除 matchScore/matchReason，只保留缩略图+名称+时长
8. components/Step2MaterialSelect.tsx — 适配新组件 props
9. generate.css — 移除 textarea/score/reason 相关样式，新增 action-row 布局
10. test/pages/GeneratePage.test.tsx — 新增 smartMatchAssets mock

行为变化

• 之前：用户需要输入描述 → 点击匹配 → 查看带分数的结果 → 确认选择
• 之后：用户点击「让 AI 帮你选」→ loading → 后端自动选择素材 → 直接展示结果

注意

• 后端 POST /assets/smart-match 端点尚未实现，当前调用失败时回退为全选当前库素材
• 后端统一选素材逻辑后续完善后，前端无需再改

## 改动概要 Q5 智能匹配前端简化：去掉「输入描述→匹配→确认」的冗余流程，改为一键触发 AI 选素材。 ### 改动文件 1. **`apps/web/src/api/assets/assets.ts`** — 新增 `smartMatchAssets()` API 函数，调用 `POST /assets/smart-match` 2. **`apps/web/src/api/assets/index.ts`** — 导出 `smartMatchAssets` 3. **`hooks/step2-materials/useSmartMatch.ts`** — 重写：去掉描述输入/随机匹配/匹配分数，改为一键调用后端 API，失败时回退全选 4. **`hooks/useStep2Materials.ts`** — 适配新 hook 接口（传入 `libraryId`，移除 `smartMatchInput`/`smartMatchedResults`） 5. **`components/material/SmartMatchInput.tsx`** — 简化为一键按钮「让 AI 帮你选」，无 textarea 6. **`components/material/SmartMatchResults.tsx`** — 简化为直接展示选中素材，无匹配分数/理由 7. **`components/material/SmartMatchCard.tsx`** — 移除 `matchScore`/`matchReason`，只保留缩略图+名称+时长 8. **`components/Step2MaterialSelect.tsx`** — 适配新组件 props 9. **`generate.css`** — 移除 textarea/score/reason 相关样式，新增 action-row 布局 10. **`test/pages/GeneratePage.test.tsx`** — 新增 `smartMatchAssets` mock ### 行为变化 - **之前**：用户需要输入描述 → 点击匹配 → 查看带分数的结果 → 确认选择 - **之后**：用户点击「让 AI 帮你选」→ loading → 后端自动选择素材 → 直接展示结果 ### 注意 - 后端 `POST /assets/smart-match` 端点尚未实现，当前调用失败时回退为全选当前库素材 - 后端统一选素材逻辑后续完善后，前端无需再改

xiaoxia added 10 commits 2026-08-05 00:05:26 +08:00

feat: add smartMatchAssets API for Q5 smart match simplify 2706cfbb2f

feat: export smartMatchAssets 1609bdc7f4

feat: simplify useSmartMatch - one-click AI selection 774e6361d4

feat: update useStep2Materials for simplified smart match 937b72bf3a

feat: simplify SmartMatchInput - one-click AI selection 962bd60022

feat: simplify SmartMatchResults - no scores/reasons 239d626278

feat: simplify SmartMatchCard - remove match score/reason 7a505dd854

feat: update Step2MaterialSelect for simplified smart match 1627890fa8

test: add smartMatchAssets mock for Q5 simplify b8f0821f73

style: simplify smart-match CSS for Q5 88209bbb4d

xiaoxia added 1 commit 2026-08-05 00:07:49 +08:00

fix: remove unused getAssets import c3f0a70b4c

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

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-08-05 00:15:22 +08:00

style: format SmartMatchInput.tsx with prettier 60d88e17c4

xiaoxia added 1 commit 2026-08-05 00:15:23 +08:00

style: format GeneratePage.test.tsx with prettier 2e947b485a

xiaoxia added 1 commit 2026-08-05 00:15:24 +08:00

style: format useStep2Materials.ts with prettier 26cf7bd808

xiaoxia added 1 commit 2026-08-05 00:15:26 +08:00

style: format assets.ts with prettier 315cbcc80a

xiaoxia added 1 commit 2026-08-05 00:15:28 +08:00

style: format index.ts with prettier ce89f6d71d

xiaoxia added 1 commit 2026-08-05 00:15:29 +08:00

style: format SmartMatchResults.tsx with prettier 81dbfcc4f5

xiaoxia added 1 commit 2026-08-05 00:15:32 +08:00

style: format Step2MaterialSelect.tsx with prettier f9bed8abf7

xiaoxia added 1 commit 2026-08-05 00:15:34 +08:00

style: format SmartMatchCard.tsx with prettier 621212f5fb

auto-approve-bot approved these changes 2026-08-05 00:17:55 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-05 00:17:55 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-08-05 00:28:39 +08:00

fix: address AI code review blocking issues in useSmartMatch.ts dd842758d7

xiaoxia added 1 commit 2026-08-05 00:29:15 +08:00

fix: restore smartMatchedResults for correct display in SmartMatchResults 1efef05425

auto-approve-bot commented 2026-08-05 00:32:55 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1241

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

1. apps/web/src/pages/generate/hooks/step2-materials/useSmartMatch.ts 第101行：handleSelectAllMatched 逻辑错误。该函数用于在智能匹配结果区点击“全选”按钮，预期行为是选中所有 AI 推荐的素材（即 smartMatchedResults）。但当前代码实现为 materials.items.map(...)，这会选中整个素材库的所有素材。如果素材库包含大量素材，这将导致用户意外选中所有非推荐素材，造成严重的功能逻辑偏差和潜在的性能问题。应修改为遍历 smartMatchedResults。

💡 建议（1个可选）

1. apps/web/src/pages/generate/hooks/step2-materials/useSmartMatch.ts 第60行：API 返回数据一致性风险。代码中 const resolved = result.items?.length ? result.items : ... 优先使用了 API 返回的对象。如果后端 smart-match 接口返回的 AssetItem 对象不完整（例如缺少前端渲染所需的 duration、url 或 thumb 等字段），会导致 UI 渲染报错或显示异常。建议始终通过 ID 从本地 materials.items 中映射查找完整对象，以确保数据结构的一致性。

---

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

---

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

## 代码审查结果 - PR #1241 ### ⚠️ 问题（1个需要修改） 1. **apps/web/src/pages/generate/hooks/step2-materials/useSmartMatch.ts 第101行**：`handleSelectAllMatched` 逻辑错误。该函数用于在智能匹配结果区点击“全选”按钮，预期行为是选中所有 AI 推荐的素材（即 `smartMatchedResults`）。但当前代码实现为 `materials.items.map(...)`，这会选中整个素材库的所有素材。如果素材库包含大量素材，这将导致用户意外选中所有非推荐素材，造成严重的功能逻辑偏差和潜在的性能问题。应修改为遍历 `smartMatchedResults`。 ### 💡 建议（1个可选） 1. **apps/web/src/pages/generate/hooks/step2-materials/useSmartMatch.ts 第60行**：API 返回数据一致性风险。代码中 `const resolved = result.items?.length ? result.items : ...` 优先使用了 API 返回的对象。如果后端 `smart-match` 接口返回的 `AssetItem` 对象不完整（例如缺少前端渲染所需的 `duration`、`url` 或 `thumb` 等字段），会导致 UI 渲染报错或显示异常。建议始终通过 ID 从本地 `materials.items` 中映射查找完整对象，以确保数据结构的一致性。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-04 16:32:54 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit 4e35a2c855 into develop 2026-08-05 00:36:00 +08:00

auto-approve-bot deleted branch feat/smart-match-simplify 2026-08-05 00:36:00 +08:00

gitea-actions bot commented 2026-08-05 00:36:32 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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