feat: 查重结果展示升级 — 风险阈值15/30 + 视觉相似度/匹配帧数 + 片段时间轴 #1662 #1676

Merged

auto-approve-bot merged 2 commits from feature/1662-duplication-display into develop 2026-09-04 00:32:39 +08:00

Conversation 5 Commits 2 Files Changed 11

+211 -29

xiaoxia commented 2026-09-04 00:17:31 +08:00

Owner

Copy Link

Copy Source

改动

适配后端 #1660 查重改造，前端展示升级：

1. 风险阈值调整（utils.ts）：<15% 低风险 / 15-30% 中风险 / >30% 高风险
2. 类型扩展：DuplicationRecord、ProductItem、VideoItem 新增 visual_similarity、match_count 可选字段（兼容旧数据），mapVideoToProductItem 透传
3. ResultCard：查重率数字旁新增风险等级 Tag
4. 时间轴可视化（SegmentsSection）：片段列表上方新增纯 CSS 时间轴条，按相似度绿/黄/红着色，hover 显示时间区间/相似度/匹配视频名
5. ProductInfoPanel：查重率按风险着色，视觉相似度/匹配帧数存在时展示
6. 单测：getRiskLevel 边界用例（14.9→low / 15→medium / 30→medium / 30.1→high）

技术约束

• 所有新字段可选，后端未返回时降级展示
• 时间轴纯 CSS，无新依赖
• 阈值统一在 utils.ts 一处

本地 tsc/eslint/prettier/vitest 全绿。

## 改动 适配后端 #1660 查重改造，前端展示升级： 1. **风险阈值调整**（utils.ts）：<15% 低风险 / 15-30% 中风险 / >30% 高风险 2. **类型扩展**：DuplicationRecord、ProductItem、VideoItem 新增 `visual_similarity`、`match_count` 可选字段（兼容旧数据），mapVideoToProductItem 透传 3. **ResultCard**：查重率数字旁新增风险等级 Tag 4. **时间轴可视化**（SegmentsSection）：片段列表上方新增纯 CSS 时间轴条，按相似度绿/黄/红着色，hover 显示时间区间/相似度/匹配视频名 5. **ProductInfoPanel**：查重率按风险着色，视觉相似度/匹配帧数存在时展示 6. **单测**：getRiskLevel 边界用例（14.9→low / 15→medium / 30→medium / 30.1→high） ## 技术约束 - 所有新字段可选，后端未返回时降级展示 - 时间轴纯 CSS，无新依赖 - 阈值统一在 utils.ts 一处 本地 tsc/eslint/prettier/vitest 全绿。

xiaoxia added 1 commit 2026-09-04 00:17:33 +08:00

feat: 查重结果展示升级 — 风险阈值15/30 + 视觉相似度/匹配帧数 + 片段时间轴 #1662 ... cf671b98c2

- getRiskLevel 阈值调整为 <15 低风险 / 15-30 中风险 / >30 高风险
- DuplicationRecord / ProductItem / VideoItem 新增 visual_similarity、match_count 可选字段
- mapVideoToProductItem 透传新字段
- ResultCard 查重率数字旁新增风险等级 Tag
- SegmentsSection 新增片段时间轴可视化条（纯CSS，按相似度着色，hover tooltip）
- ProductInfoPanel 查重率按风险着色 + 视觉相似度/匹配帧数展示
- 新增 getRiskLevel 边界单测（14.9/15/30/30.1）

gitea-actions bot commented 2026-09-04 00:20:33 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-09-04 00:21:37 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-04 00:21:37 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-09-04 00:25:10 +08:00

fix(products): visual_similarity/match_count 空值检查兼容 null（AI Review 阻塞项修复） ... f24e527e0b

后端 JSON 可能返回 null，!== undefined 无法拦截，改为 != null 同时检查 null/undefined

auto-approve-bot commented 2026-09-04 00:30:44 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [apps/web/src/pages/duplication/components/SegmentsSection.tsx: 46] 时间轴渲染位置防溢出优化
   • 具体内容：在计算时间轴片段的 left 属性时，使用了 Math.min(left, 100) 防止溢出右边界，但未限制负值。如果后端数据异常导致 seg.source_start 为负数，片段会渲染在时间轴容器左侧之外。建议修改为 Math.max(0, Math.min(left, 100)) 以确保百分比始终在 [0, 100] 区间内。

✅ 良好实践

• 边界测试覆盖充分：针对 getRiskLevel 函数的阈值调整（15%和30%），新增的单元测试覆盖了 undefined、边界值及常规值，逻辑验证非常严谨。
• 向后兼容性处理得当：新增的 visual_similarity 和 match_count 字段在类型定义、映射函数及 UI 渲染中均正确使用了可选链（?.）或空值判断（!= null），确保了旧数据不会导致页面崩溃。
• UI 交互细节完善：时间轴可视化中，片段宽度设置了 0.5% 的最小值，防止极短片段在界面上不可见，提升了用户体验。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-09-03 16:30:44 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/duplication/components/SegmentsSection.tsx: 46] 时间轴渲染位置防溢出优化** - 具体内容：在计算时间轴片段的 `left` 属性时，使用了 `Math.min(left, 100)` 防止溢出右边界，但未限制负值。如果后端数据异常导致 `seg.source_start` 为负数，片段会渲染在时间轴容器左侧之外。建议修改为 `Math.max(0, Math.min(left, 100))` 以确保百分比始终在 [0, 100] 区间内。 ### ✅ 良好实践 - **边界测试覆盖充分**：针对 `getRiskLevel` 函数的阈值调整（15%和30%），新增的单元测试覆盖了 undefined、边界值及常规值，逻辑验证非常严谨。 - **向后兼容性处理得当**：新增的 `visual_similarity` 和 `match_count` 字段在类型定义、映射函数及 UI 渲染中均正确使用了可选链（`?.`）或空值判断（`!= null`），确保了旧数据不会导致页面崩溃。 - **UI 交互细节完善**：时间轴可视化中，片段宽度设置了 `0.5%` 的最小值，防止极短片段在界面上不可见，提升了用户体验。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-09-03 16:30:44 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit df164ddf75 into develop 2026-09-04 00:32:39 +08:00

auto-approve-bot deleted branch feature/1662-duplication-display 2026-09-04 00:32:40 +08:00

gitea-actions bot commented 2026-09-04 00:33:00 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this pull request 2026-09-04 23:31:28 +08:00

Release: 同步 develop 到 main（PR #1654~#1698 全量同步） #1699

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