admin/meijiaka-zy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 音频素材库改为横向卡片网格布局，一行2个，每页20个，带分页

Browse Source
This commit is contained in:
小鱼开发
2026-04-22 07:51:42 +08:00
parent 1154a360b6
commit baea183377
1 changed files with 92 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
+92 -49
View File
@@ -22,6 +22,11 @@ export default function VoiceMaterialLibrary() {
const [uploadName, setUploadName] = useState('');
const [selectedFile, setSelectedFile] = useState<File | null>(null);
// 分页
const [audioPage, setAudioPage] = useState(1);
const [videoPage, setVideoPage] = useState(1);
const pageSize = 20;
// 重命名状态
const [editingId, setEditingId] = useState<string | null>(null);
const [editingName, setEditingName] = useState('');
@@ -432,37 +437,39 @@ export default function VoiceMaterialLibrary() {
isLoadingMaterials ? (
<p style={{ color: 'var(--text-secondary)' }}>加载中...</p>
) : (
<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">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
<line x1="12" y1="19" x2="12" y2="23" />
<line x1="8" y1="23" x2="16" y2="23" />
</svg>
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
<div className="voice-list" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, flex: 1 }}>
{voiceMaterials.length === 0 && (
<div className="empty-state" style={{ gridColumn: '1 / -1', minHeight: 300 }}>
<div className="empty-state-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
<line x1="12" y1="19" x2="12" y2="23" />
<line x1="8" y1="23" x2="16" y2="23" />
</svg>
</div>
<p className="empty-state-title">暂无音频素材</p>
<p className="empty-state-desc">点击右上角按钮上传音频素材，<br />上传后将自动进行音色克隆</p>
</div>
<p className="empty-state-title">暂无音频素材</p>
<p className="empty-state-desc">点击右上角按钮上传音频素材，<br />上传后将自动进行音色克隆</p>
</div>
)}
{voiceMaterials.map(m => (
<div
key={m.id}
className="voice-card"
style={{
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: 'flex-start', gap: 8 }}>
<div style={{ flex: 1, minWidth: 0 }}>
)}
{voiceMaterials.slice((audioPage - 1) * pageSize, audioPage * pageSize).map(m => (
<div
key={m.id}
className="voice-card"
style={{
padding: 'var(--spacing-md) var(--spacing-lg)',
borderRadius: 'var(--radius-md)',
border: '1px solid var(--border-color)',
background: 'var(--bg-card)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12,
minHeight: 64,
}}
>
<div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
{editingId === m.id ? (
<input
type="text"
@@ -478,12 +485,41 @@ export default function VoiceMaterialLibrary() {
style={{ width: '100%', height: 28, padding: '2px 8px', fontSize: 'var(--font-sm)' }}
/>
) : (
<div style={{ fontWeight: 500, fontSize: 'var(--font-sm)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{m.name}
</div>
<>
<div style={{ fontWeight: 500, fontSize: 'var(--font-sm)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{m.name}
</div>
<div style={{ fontSize: 'var(--font-xs)', color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{statusLabel(m.status)}
</div>
</>
)}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
{m.status === 'ready' && (
<button
className="btn btn-ghost"
style={{
padding: 0,
width: 36,
height: 36,
borderRadius: '50%',
background: 'var(--bg-secondary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
onClick={() => {
const audio = new Audio(m.sourceUrl);
audio.play();
}}
title="播放"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</button>
)}
<button
className="btn btn-ghost"
style={{ padding: '4px', width: 28, height: 28 }}
@@ -508,24 +544,31 @@ export default function VoiceMaterialLibrary() {
</button>
</div>
</div>
<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',
}}
))}
</div>
{voiceMaterials.length > pageSize && (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, padding: '8px 0' }}>
<button
className="btn btn-secondary"
style={{ padding: '4px 12px', fontSize: 'var(--font-sm)' }}
onClick={() => setAudioPage(p => Math.max(1, p - 1))}
disabled={audioPage <= 1}
>
{statusLabel(m.status)}
上一页
</button>
<span style={{ fontSize: 'var(--font-sm)', color: 'var(--text-secondary)' }}>
{audioPage} / {Math.ceil(voiceMaterials.length / pageSize)}
</span>
{m.status === 'ready' && (
<audio src={m.sourceUrl} controls style={{ width: '100%', marginTop: 'auto', height: 32 }} />
)}
<button
className="btn btn-secondary"
style={{ padding: '4px 12px', fontSize: 'var(--font-sm)' }}
onClick={() => setAudioPage(p => Math.min(Math.ceil(voiceMaterials.length / pageSize), p + 1))}
disabled={audioPage >= Math.ceil(voiceMaterials.length / pageSize)}
>
下一页
</button>
</div>
))}
)}
</div>
)
)}