diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css index f3d314d08..fdbb0202b 100644 --- a/apps/web/src/pages/viral-video/ViralVideoPage.css +++ b/apps/web/src/pages/viral-video/ViralVideoPage.css @@ -1142,6 +1142,49 @@ text-align: left; padding: 0; flex: 1; + background: transparent; + display: flex; + align-items: center; + gap: 8px; + white-space: nowrap; + overflow: hidden; +} +.vv-asset-voice .vv-thumb-name-txt { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} +.vv-asset-voice .vv-thumb-dur { + flex: 0 0 auto; + font-size: 11px; + color: #9ca3af; + background: #f3f4f6; + padding: 1px 6px; + border-radius: 4px; +} +.vv-asset-voice .vv-thumb-ph { + width: 36px; + height: 36px; + flex: 0 0 36px; + font-size: 20px; + border-radius: 50%; + background: #f3f0ff; + color: #7c3aed; +} +.vv-asset-voice .vv-thumb-card img, +.vv-asset-voice .vv-thumb-card video { + width: 36px; + height: 36px; + flex: 0 0 36px; + border-radius: 50%; + object-fit: cover; +} +.vv-asset-voice .vv-thumb-check { + top: 50%; + right: 10px; + transform: translateY(-50%); } .vv-modal-empty { flex: 1; diff --git a/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx b/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx index bc85f706b..ffba79c3a 100644 --- a/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx +++ b/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx @@ -199,7 +199,16 @@ export default function AssetPickerModal({
{kind === "image" ? "🖼️" : kind === "video" ? "🎬" : "🎵"}
- 该素材库暂无{KIND_LABEL[kind]}素材 + {kind === "voice" ? ( + <> +
暂无配音素材
+
+ 请先在「配音/我的音色」中上传音频文件,或在素材库管理中添加 +
+ + ) : ( + <>该素材库暂无{KIND_LABEL[kind]}素材 + )} ) : (
@@ -221,7 +230,12 @@ export default function AssetPickerModal({ )} {active &&
✓
}
- {asset.name} + {asset.name} + {kind === "voice" && + typeof asset.duration === "number" && + asset.duration > 0 && ( + {Math.round(asset.duration)}s + )}
)