feat(#584): 智能素材匹配前端页面框架 #618

Merged

auto-approve-bot merged 2 commits from feat/584-smart-material-match into develop 2026-07-20 08:23:50 +08:00

Conversation 6 Commits 2 Files Changed 2

+527 -36

xiaoxia commented 2026-07-19 22:40:50 +08:00

Owner

Copy Link

Copy Source

No description provided.

gitea-actions bot commented 2026-07-19 22:42:00 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-07-19 23:56:51 +08:00

feat(#584): 智能素材匹配前端页面框架 ... 856647a4e5

- 智能剪辑新增智能素材匹配交互：用户输入描述后AI推荐素材
- 支持推荐素材列表展示（匹配度+匹配理由+缩略图+时长）
- 支持勾选/取消勾选、全选/清空、换一批等交互
- auto模式下使用智能匹配选中的素材生成视频
- 生成预览和确认步骤显示智能匹配的素材数量
- 下一步验证：auto模式需选中素材才能继续
- 暂用模拟数据，后端LLM接入后替换

xiaoxia force-pushed feat/584-smart-material-match from 0cca0f4ab8 to 856647a4e5 2026-07-19 23:56:51 +08:00 Compare

xiaoxia commented 2026-07-20 01:36:06 +08:00

Author

Owner

Copy Link

Copy Source

CI 基础设施已修复，但本 PR 的 Frontend Lint 仍为失败状态，属于代码层面的 lint 错误，不是 CI 基础设施问题。

请检查前端 lint 报错并修复后再推送。

CI 基础设施已修复，但本 PR 的 Frontend Lint 仍为失败状态，属于代码层面的 lint 错误，不是 CI 基础设施问题。 请检查前端 lint 报错并修复后再推送。

xiaoxia added 1 commit 2026-07-20 08:19:48 +08:00

fix(#584: 移动SMART_MATCH_REASONS到组件外修复eslint warning ... 31da58f153

- 将SMART_MATCH_REASONS常量移到组件外部，消除react-hooks/exhaustive-deps警告

auto-approve-bot approved these changes 2026-07-20 08:22:40 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-20 08:22:40 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit b0573a5e91 into develop 2026-07-20 08:23:50 +08:00

auto-approve-bot deleted branch feat/584-smart-material-match 2026-07-20 08:23:50 +08:00

gitea-actions bot commented 2026-07-20 08:24:10 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #618 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

auto-approve-bot commented 2026-07-20 08:26:25 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #618

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

无

💡 建议（3个可选）

1. GeneratePage.tsx 第508行：数组洗牌算法存在偏差

   • 说明：sort(() => Math.random() - 0.5) 是一种常见的错误洗牌方法，它无法产生均匀的随机分布，且排序效率较低（O(n log n)）。
   • 建议：建议使用 Fisher-Yates (Knuth) 洗牌算法，既保证随机性又能达到 O(n) 的时间复杂度。

2. GeneratePage.tsx 第533-534行：刷新素材时缺少空结果处理

   • 说明：在 handleRefreshMatch 中，如果计算出的 remaining 数组为空（即所有素材都已展示过），则 picked 为空，最终 smartMatchedResults �为设为空数组。此时界面会直接清空推荐列表，用户在经历 800ms 等待后看不到任何反馈，体验较差。
   • 建议：在计算 remaining 后，判断其长度是否为 0。若为 0，应提示用户“已展示所有推荐素材”或类似信息，并提前 return，避免无意义的等待和状态更新。

3. GeneratePage.tsx 第1340行：图片 URL 存在潜在 XSS 风险

   • 说明：代码中直接使用 result.asset.thumbnail_url 作为 <img> 的 src 属性。如果 thumbnail_url 的数据来源不可信（例如包含用户输入且未经过滤），攻击者可注入 javascript: 伪协议执行脚本。
   • 建议：确保后端对 thumbnail_url 进行了严格的格式校验（如仅允许 http/https 协议），或者在前端渲染前进行简单的协议白名单校验。

---

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

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-20 08:26:24 | 模型:}

## 代码审查结果 - PR #618 ### ⚠️ 问题（0个需要修改） 无 ### 💡 建议（3个可选） 1. **GeneratePage.tsx 第508行**：数组洗牌算法存在偏差 - **说明**：`sort(() => Math.random() - 0.5)` 是一种常见的错误洗牌方法，它无法产生均匀的随机分布，且排序效率较低（O(n log n)）。 - **建议**：建议使用 Fisher-Yates (Knuth) 洗牌算法，既保证随机性又能达到 O(n) 的时间复杂度。 2. **GeneratePage.tsx 第533-534行**：刷新素材时缺少空结果处理 - **说明**：在 `handleRefreshMatch` 中，如果计算出的 `remaining` 数组为空（即所有素材都已展示过），则 `picked` 为空，最终 `smartMatchedResults` �为设为空数组。此时界面会直接清空推荐列表，用户在经历 800ms 等待后看不到任何反馈，体验较差。 - **建议**：在计算 `remaining` 后，判断其长度是否为 0。若为 0，应提示用户“已展示所有推荐素材”或类似信息，并提前 return，避免无意义的等待和状态更新。 3. **GeneratePage.tsx 第1340行**：图片 URL 存在潜在 XSS 风险 - **说明**：代码中直接使用 `result.asset.thumbnail_url` 作为 `<img>` 的 `src` 属性。如果 `thumbnail_url` 的数据来源不可信（例如包含用户输入且未经过滤），攻击者可注入 `javascript:` 伪协议执行脚本。 - **建议**：确保后端对 `thumbnail_url` 进行了严格的格式校验（如仅允许 http/https 协议），或者在前端渲染前进行简单的协议白名单校验。 --- ✅ 格式检查通过 | ✅ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-20 08:26:24 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

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#618