fix(viral-video): 素材库音频选择弹窗占位符显示修复+按钮禁用态可见性加固 #2120

Merged

xiaoxia merged 1 commits from fix/2041-voice-asset-picker-empty into develop 2026-10-01 11:40:24 +08:00

Conversation 3 Commits 1 Files Changed 2

+59 -2

xiaoxia commented 2026-10-01 11:40:03 +08:00

Owner

Copy Link

Copy Source

Bug 修复：素材库音频选择弹窗「3个音符占位符」

根因

AssetPickerModal 在 kind=voice 时使用横向卡片（vv-asset-voice 1列 grid，每卡 flex 横排），但占位图标 .vv-thumb-ph 继承了通用规则 width:100%; height:100%，在横排 flex 下撑满整行把右侧的 .vv-thumb-name 挤到容器右侧视口外（overflow:hidden），用户只能看到3个大号 🎵 图标而看不到素材名称，误以为列表为空。

修复

1. .vv-asset-voice .vv-thumb-ph：改为固定 36px 圆形图标，浅紫底 #f3f0ff + 紫色音符 #7c3aed，与音色头像风格统一
2. .vv-asset-voice img/video：同样限制 36px 圆形 object-fit:cover，避免未来有缩略图的音频撑爆布局
3. .vv-asset-voice .vv-thumb-name：改为 flex 布局 + 透明底 + 左对齐，内部 .vv-thumb-name-txt（名称）+ .vv-thumb-dur（时长徽章，如 15s）
4. 勾选标记 ✓：在 voice 横向卡片中从右上角移到垂直居中靠右，避免与头像重叠
5. 空状态文案：voice kind 从「该素材库暂无音频素材」改为两行友好提示：「暂无配音素材」+「请先在『配音/我的音色』中上传音频文件，或在素材库管理中添加」

代码复核：「选择内置音色」Modal 绑定

• ✅ 按钮 onClick={() => setVoicePickerOpen(true)} 正确绑定
• ✅ 按钮仅在 !canEditAssets（STEP1已进入分析中/失败恢复前）为 disabled，正常状态可点击
• ✅ PresetVoicePickerModal 在 JSX 末尾挂载，传入 open/voices/selectedId/onClose/onConfirm 齐全
• ✅ onConfirm 回调正确设置 refAudio:{source:"preset",id,name} 并关闭弹窗

STEP2/STEP3 disabled 按钮可见性确认

• .vv-btn-primary.vv-btn-disabled-gray 已设置 opacity:1; background:#d1d5db; color:#6b7280，不会被父级 opacity 冲淡
• .vv-col-disabled .vv-btn-primary { opacity:1 !important } 已强制覆盖列禁用态的 0.55 透明度
• 未就绪按钮显示为清晰的灰色块，与紫色激活态视觉差异明显

未改动

• 接口调用链路：getAssetLibraries("voice") → getAssets(libraryId) → mime_type 过滤 audio/ 前缀，逻辑无错；真实空库时正确显示空状态
• PresetVoicePickerModal 组件本身无 bug

测试

• tsc --noEmit 通过
• vite build 通过
• prettier 通过

## Bug 修复：素材库音频选择弹窗「3个音符占位符」 ### 根因 AssetPickerModal 在 kind=voice 时使用横向卡片（`vv-asset-voice` 1列 grid，每卡 flex 横排），但占位图标 `.vv-thumb-ph` 继承了通用规则 `width:100%; height:100%`，在横排 flex 下撑满整行把右侧的 `.vv-thumb-name` 挤到容器右侧视口外（overflow:hidden），用户只能看到3个大号 🎵 图标而看不到素材名称，误以为列表为空。 ### 修复 1. **`.vv-asset-voice .vv-thumb-ph`**：改为固定 36px 圆形图标，浅紫底 `#f3f0ff` + 紫色音符 `#7c3aed`，与音色头像风格统一 2. **`.vv-asset-voice img/video`**：同样限制 36px 圆形 object-fit:cover，避免未来有缩略图的音频撑爆布局 3. **`.vv-asset-voice .vv-thumb-name`**：改为 flex 布局 + 透明底 + 左对齐，内部 `.vv-thumb-name-txt`（名称）+ `.vv-thumb-dur`（时长徽章，如 15s） 4. **勾选标记 ✓**：在 voice 横向卡片中从右上角移到垂直居中靠右，避免与头像重叠 5. **空状态文案**：voice kind 从「该素材库暂无音频素材」改为两行友好提示：「暂无配音素材」+「请先在『配音/我的音色』中上传音频文件，或在素材库管理中添加」 ### 代码复核：「选择内置音色」Modal 绑定 - ✅ 按钮 `onClick={() => setVoicePickerOpen(true)}` 正确绑定 - ✅ 按钮仅在 `!canEditAssets`（STEP1已进入分析中/失败恢复前）为 disabled，正常状态可点击 - ✅ `PresetVoicePickerModal` 在 JSX 末尾挂载，传入 open/voices/selectedId/onClose/onConfirm 齐全 - ✅ onConfirm 回调正确设置 `refAudio:{source:"preset",id,name}` 并关闭弹窗 ### STEP2/STEP3 disabled 按钮可见性确认 - `.vv-btn-primary.vv-btn-disabled-gray` 已设置 `opacity:1; background:#d1d5db; color:#6b7280`，不会被父级 opacity 冲淡 - `.vv-col-disabled .vv-btn-primary { opacity:1 !important }` 已强制覆盖列禁用态的 0.55 透明度 - 未就绪按钮显示为清晰的灰色块，与紫色激活态视觉差异明显 ### 未改动 - 接口调用链路：`getAssetLibraries("voice")` → `getAssets(libraryId)` → mime_type 过滤 audio/ 前缀，逻辑无错；真实空库时正确显示空状态 - PresetVoicePickerModal 组件本身无 bug ## 测试 - [x] tsc --noEmit 通过 - [x] vite build 通过 - [x] prettier 通过

xiaoxia added 1 commit 2026-10-01 11:40:06 +08:00

fix(viral-video): 素材库音频选择弹窗修复+按钮禁用态可见性加固 ... 3430c2fb6d

1. 修复「从素材库选择」配音弹窗列表只显示音符占位符不显示名称的问题：
   - 根因：.vv-thumb-ph（占位图标）在 voice 横向卡片中继承 width/height:100%，占满整行把 .vv-thumb-name 挤到视口外，用户只看到3个大号🎵图标看不到名称
   - 修复：为 .vv-asset-voice .vv-thumb-ph 设置固定 36px 圆形+浅紫底+紫色音符（与头像风格一致）
   - .vv-asset-voice 下的 img/video 也限 36px 圆形，避免缩略图过大
   - .vv-asset-voice .vv-thumb-name 改为 flex 布局+左对齐+透明底
   - 音频项名称后显示时长徽章（如 15s），与其他模块展示一致
   - 勾选标记 ✓ 从右上角移到垂直居中靠右（横向卡片更合理）

2. 空状态提示优化（voice kind）：
   - 原先只显示「该素材库暂无音频素材」一行
   - 现在分两行：主提示「暂无配音素材」+ 副提示「请先在『配音/我的音色』中上传音频文件，或在素材库管理中添加」
   - 其他 kind（image/video）保持原样

3. 「选择内置音色」Modal 绑定代码复核：
   - 按钮 onClick={() => setVoicePickerOpen(true)} ✅
   - disabled={!canEditAssets} 在 STEP1 未上传时为 disabled（符合预期）
   - PresetVoicePickerModal 已在 JSX 末尾正确挂载，传 open/voices/selectedId/onClose/onConfirm ✅
   - vv-col-disabled 的 opacity 已通过 .vv-col-disabled .vv-btn-primary { opacity:1 !important } 覆盖，按钮在禁用列中仍用 vv-btn-disabled-gray 灰色样式可见

4. STEP2/STEP3 disabled 灰色按钮可见性加固：
   - vv-btn-disabled-gray 已设置 opacity:1 + 灰色#d1d5db背景+灰字#6b7280，不会被父级 opacity:0.55 冲淡
   - vv-col-disabled 下 .vv-btn-primary opacity:1 强制覆盖
   - disabled 主按钮清晰可见为灰色块状，和紫色激活态形成明显对比

tsc/vite build 全绿。

xiaoxia reviewed 2026-10-01 11:40:17 +08:00

xiaoxia left a comment

Author

Owner

Copy Link

Copy Source

LGTM

LGTM

xiaoxia merged commit 7fd9c0cf43 into develop 2026-10-01 11:40:24 +08:00

gitea-actions bot commented 2026-10-01 11:43:36 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

gitea-actions bot commented 2026-10-01 11:43:41 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot frontend-dev xiaoxia

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2120