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;

apps/web/src/pages/viral-video/components/AssetPickerModal.tsx

@@ -199,7 +199,16 @@ export default function AssetPickerModal({
               <div className="vv-empty-icon">
                 {kind === "image" ? "🖼️" : kind === "video" ? "🎬" : "🎵"}
               </div>
-              该素材库暂无{KIND_LABEL[kind]}素材
+              {kind === "voice" ? (
+                <>
+                  <div style={{ marginTop: 8, fontSize: 13 }}>暂无配音素材</div>
+                  <div style={{ marginTop: 4, fontSize: 12, color: "#9ca3af" }}>
+                    请先在「配音/我的音色」中上传音频文件，或在素材库管理中添加
+                  </div>
+                </>
+              ) : (
+                <>该素材库暂无{KIND_LABEL[kind]}素材</>
+              )}
             </div>
           ) : (
             <div className={`vv-asset-thumbs vv-asset-${kind}`}>
@@ -221,7 +230,12 @@ export default function AssetPickerModal({
                     )}
                     {active && <div className="vv-thumb-check">✓</div>}
                     <div className="vv-thumb-name" title={asset.name}>
-                      {asset.name}
+                      <span className="vv-thumb-name-txt">{asset.name}</span>
+                      {kind === "voice" &&
+                        typeof asset.duration === "number" &&
+                        asset.duration > 0 && (
+                          <span className="vv-thumb-dur">{Math.round(asset.duration)}s</span>
+                        )}
                     </div>
                   </div>
                 )