From 1154a360b6683e5a4849e1f1448a9ce22a3ac295 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= <git@xiaoyu.com>
Date: Wed, 22 Apr 2026 07:41:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9F=B3=E9=A2=91=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=BA=93=E6=94=B9=E4=B8=BA=E5=8D=A1=E7=89=87=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E8=AF=95=E5=90=AC=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E6=94=B9=E7=94=A8=20sourceUrl=EF=BC=88=E5=8E=9F=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VoiceMaterialLibrary.tsx                  | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx b/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
index 83855d2..19e5b69 100644
--- a/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
+++ b/tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
@@ -432,7 +432,7 @@ export default function VoiceMaterialLibrary() {
         isLoadingMaterials ? (
           <p style={{ color: 'var(--text-secondary)' }}>加载中...</p>
         ) : (
-          <div className="voice-list" style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
+          <div className="voice-list" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 16, flex: 1 }}>
             {voiceMaterials.length === 0 && (
               <div className="empty-state" style={{ minHeight: 300, flex: 1 }}>
                 <div className="empty-state-icon">
@@ -450,15 +450,18 @@ export default function VoiceMaterialLibrary() {
             {voiceMaterials.map(m => (
               <div
                 key={m.id}
-                className="voice-row"
+                className="voice-card"
                 style={{
-                  padding: 'var(--spacing-sm) var(--spacing-md)',
+                  padding: 'var(--spacing-md)',
                   borderRadius: 'var(--radius-md)',
                   border: '1px solid var(--border-color)',
                   background: 'var(--bg-card)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 8,
                 }}
               >
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                   <div style={{ flex: 1, minWidth: 0 }}>
                     {editingId === m.id ? (
                       <input
@@ -480,19 +483,7 @@ export default function VoiceMaterialLibrary() {
                       </div>
                     )}
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-                    <span
-                      style={{
-                        fontSize: 'var(--font-xs)',
-                        color: statusColor(m.status),
-                        background: `${statusColor(m.status)}15`,
-                        padding: '2px 8px',
-                        borderRadius: 'var(--radius-sm)',
-                        whiteSpace: 'nowrap',
-                      }}
-                    >
-                      {statusLabel(m.status)}
-                    </span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
                     <button
                       className="btn btn-ghost"
                       style={{ padding: '4px', width: 28, height: 28 }}
@@ -517,8 +508,21 @@ export default function VoiceMaterialLibrary() {
                     </button>
                   </div>
                 </div>
-                {m.status === 'ready' && m.trialUrl && (
-                  <audio src={m.trialUrl} controls style={{ width: '100%', marginTop: 6, height: 28 }} />
+                <span
+                  style={{
+                    fontSize: 'var(--font-xs)',
+                    color: statusColor(m.status),
+                    background: `${statusColor(m.status)}15`,
+                    padding: '2px 8px',
+                    borderRadius: 'var(--radius-sm)',
+                    whiteSpace: 'nowrap',
+                    alignSelf: 'flex-start',
+                  }}
+                >
+                  {statusLabel(m.status)}
+                </span>
+                {m.status === 'ready' && (
+                  <audio src={m.sourceUrl} controls style={{ width: '100%', marginTop: 'auto', height: 32 }} />
                 )}
               </div>
             ))}