From 3430c2fb6d9073481cda3787b2b13436fc82ee6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?saas=E5=89=8D=E7=AB=AF=E5=B7=A5=E7=A8=8B=E5=B8=88?=
 <agent@coze.cn>
Date: Thu, 1 Oct 2026 11:39:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(viral-video):=20=E7=B4=A0=E6=9D=90=E5=BA=93?=
 =?UTF-8?q?=E9=9F=B3=E9=A2=91=E9=80=89=E6=8B=A9=E5=BC=B9=E7=AA=97=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D+=E6=8C=89=E9=92=AE=E7=A6=81=E7=94=A8=E6=80=81?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=81=E6=80=A7=E5=8A=A0=E5=9B=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 全绿。
---
 .../src/pages/viral-video/ViralVideoPage.css  | 43 +++++++++++++++++++
 .../components/AssetPickerModal.tsx           | 18 +++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

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({
               <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>
                 )