fix: 音频素材库改为卡片网格布局，试听播放改用 sourceUrl（原音频）

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>
             ))}