fix(web): 上传按钮模式+卡片文字重叠+AI配音时长+smart-match结构兼容 #1564

Merged

auto-approve-bot merged 2 commits from feat/upload-button-card-layout-voice-duration into develop 2026-08-31 02:06:04 +08:00

Conversation 5 Commits 2 Files Changed 7

+219 -99

xiaoxia commented 2026-08-31 00:31:55 +08:00

Owner

Copy Link

Copy Source

改动（4 项）

1. 上传区改为按钮模式（需求1）

• AssetUploadZone.tsx：大虚线框 Upload.Dragger → 紧凑「＋ 上传素材」按钮（隐藏 file input，多选/上传/队列逻辑完全不变）
• 拖拽上传保留：拖文件到上传区容器仍触发上传（dragover 高亮），不再占大面积
• assets.css：删除 .xx-asset-upload-zone/icon/text/hint 旧虚线框样式，新增按钮样式

2. 素材卡片文字重叠修复（需求2）

• AssetCard.tsx 信息区重排：第一行 = 状态标签（左）+ 时长（右，两端对齐）；第二行 = 「已用X%」余量标签独占一行
• .xx-status-pill / .xx-asset-usage-badge 字号 padding 缩小适配 6 列窄卡片；状态标签过长省略号；文件名保持单行省略
• 任何状态下不再挤压重叠

3. AI 配音时长显示（需求3）

• Step5VoiceSelect.tsx：新增 isAiVoice()（duration≤0 且 file_size≤0 判定为音色模型）
• AI 音色：时长位置显示「AI 音色」，大小位置显示「按文本合成」，不显示 00:00/文件大小
• 「时长不足」警告逻辑和校验弹窗排除 AI 音色（克隆/预置音色按脚本实时合成，时长由文本决定）
• 普通上传配音素材时长显示与校验不变

4. smart-match 结构兼容 + 404/422 防御（任务0 联调，前端侧）

• assets.ts smartMatchAssets：兼容后端 {items:[{asset,score,breakdown}]} 包装结构与扁平结构，统一归一化为 AssetItem[]，过滤无 id 项
• usePreviewAssets：请求前过滤 undefined/空 id，杜绝 GET /assets/undefined 404
• useSmartMatch：matched 再过滤无 id 项后取 id，杜绝 undefined 流入 clips/from-assets 导致 422
• 后端 P0 结构修复合并后无需前端再改（归一化层两种结构都吃）

不改动

• 上传队列/进度/自动刷新、卡片选中/全选/批量操作/播放/删除/诊断功能、左侧库列表、筛选栏
• 手动选素材模式不受影响

验收

• 素材页：按钮上传+拖拽上传均正常；卡片信息区两行排布无重叠，窄屏正常
• 智能剪辑选配音：AI 音色显示「AI 音色」无时长警告；普通配音时长/大小/校验正常
• 自动模式：AI 自动选素材 → 预览生成无 404/422，标题与预览正常（待后端 P0 合并后端到端验证）

本地 tsc / ESLint / Prettier / 607 单测全绿。

## 改动（4 项） ### 1. 上传区改为按钮模式（需求1） - `AssetUploadZone.tsx`：大虚线框 `Upload.Dragger` → 紧凑「＋ 上传素材」按钮（隐藏 file input，多选/上传/队列逻辑完全不变） - 拖拽上传保留：拖文件到上传区容器仍触发上传（dragover 高亮），不再占大面积 - `assets.css`：删除 `.xx-asset-upload-zone/icon/text/hint` 旧虚线框样式，新增按钮样式 ### 2. 素材卡片文字重叠修复（需求2） - `AssetCard.tsx` 信息区重排：**第一行** = 状态标签（左）+ 时长（右，两端对齐）；**第二行** = 「已用X%」余量标签独占一行 - `.xx-status-pill` / `.xx-asset-usage-badge` 字号 padding 缩小适配 6 列窄卡片；状态标签过长省略号；文件名保持单行省略 - 任何状态下不再挤压重叠 ### 3. AI 配音时长显示（需求3） - `Step5VoiceSelect.tsx`：新增 `isAiVoice()`（duration≤0 且 file_size≤0 判定为音色模型） - AI 音色：时长位置显示「AI 音色」，大小位置显示「按文本合成」，不显示 00:00/文件大小 - 「时长不足」警告逻辑和校验弹窗排除 AI 音色（克隆/预置音色按脚本实时合成，时长由文本决定） - 普通上传配音素材时长显示与校验不变 ### 4. smart-match 结构兼容 + 404/422 防御（任务0 联调，前端侧） - `assets.ts smartMatchAssets`：兼容后端 `{items:[{asset,score,breakdown}]}` 包装结构与扁平结构，统一归一化为 `AssetItem[]`，过滤无 id 项 - `usePreviewAssets`：请求前过滤 undefined/空 id，杜绝 `GET /assets/undefined` 404 - `useSmartMatch`：matched 再过滤无 id 项后取 id，杜绝 undefined 流入 clips/from-assets 导致 422 - 后端 P0 结构修复合并后无需前端再改（归一化层两种结构都吃） ## 不改动 - 上传队列/进度/自动刷新、卡片选中/全选/批量操作/播放/删除/诊断功能、左侧库列表、筛选栏 - 手动选素材模式不受影响 ## 验收 - 素材页：按钮上传+拖拽上传均正常；卡片信息区两行排布无重叠，窄屏正常 - 智能剪辑选配音：AI 音色显示「AI 音色」无时长警告；普通配音时长/大小/校验正常 - 自动模式：AI 自动选素材 → 预览生成无 404/422，标题与预览正常（待后端 P0 合并后端到端验证） 本地 tsc / ESLint / Prettier / 607 单测全绿。

xiaoxia added 1 commit 2026-08-31 00:31:55 +08:00

fix(web): 上传区改按钮模式+卡片信息区重排+AI配音时长显示+smart-match结构兼容 ... eed93dd567

- AssetUploadZone: 大虚线框 Dragger 改为紧凑「上传素材」按钮(隐藏input多选)，
  拖拽到内容区仍可上传；删除旧虚线框样式
- AssetCard: 信息区重排，状态标签+时长第一行(两端对齐)、余量标签独占第二行，
  标签/余量 pill 缩小适配6列窄卡片，长标签省略号，杜绝文字重叠
- Step5VoiceSelect: duration=0 且 file_size=0 的 AI 音色显示「AI音色/按文本合成」，
  不显示 00:00/大小，且不参与时长不足校验(克隆音色按脚本实时合成)
- smartMatchAssets: 兼容后端 {items:[{asset,score,breakdown}]} 包装结构，
  统一归一化为 AssetItem[] 并过滤无 id 项
- usePreviewAssets: 过滤 undefined/空 id，杜绝 /assets/undefined 404
- useSmartMatch: matched 再过滤无 id 项后取 id

gitea-actions bot commented 2026-08-31 00:35:22 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-08-31 01:52:21 +08:00

fix(assets): 拖拽高亮用enter/leave计数器，避免经过子元素时闪烁 ... f968d274d0

AI Review 指出 onDragLeave 在鼠标经过按钮/文字等子元素时会误触发
setDragOver(false)，导致拖入过程中高亮不停闪烁。
改为 dragenter/dragleave 配对计数，计数器归零（真正离开容器）才取消高亮。

auto-approve-bot commented 2026-08-31 01:58:09 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1564

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

无

💡 建议（1个可选）

1. apps/web/src/pages/generate/components/Step5VoiceSelect.tsx 第30行：isAiVoice 函数通过 duration <= 0 && size <= 0 来判断是否为 AI 音色。虽然能覆盖大部分场景，但如果用户上传了损坏的文件（例如大小为0的空文件），也会被误判为 AI 音色。建议后续数据模型支持时，增加明确的 kind 或 is_ai 字段进行区分，以提高判断准确性。

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

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

## 代码审查结果 - PR #1564 ### ⚠️ 问题（0个需要修改） 无 ### 💡 建议（1个可选） 1. **apps/web/src/pages/generate/components/Step5VoiceSelect.tsx 第30行**：`isAiVoice` 函数通过 `duration <= 0 && size <= 0` 来判断是否为 AI 音色。虽然能覆盖大部分场景，但如果用户上传了损坏的文件（例如大小为0的空文件），也会被误判为 AI 音色。建议后续数据模型支持时，增加明确的 `kind` 或 `is_ai` 字段进行区分，以提高判断准确性。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-30 17:58:09 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-08-31 02:05:32 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-31 02:05:32 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit 40eca5e83f into develop 2026-08-31 02:06:04 +08:00

auto-approve-bot deleted branch feat/upload-button-card-layout-voice-duration 2026-08-31 02:06:04 +08:00

gitea-actions bot commented 2026-08-31 02:10:10 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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