fix: 修复语音生成历史页面播放和下载按钮不显示问题

问题根源:
- 使用了错误的枚举值 SpeechGenerationRecordStatus.Completed(首字母大写)
- 正确的枚举值应该是 SpeechGenerationRecordStatus.COMPLETED(全大写)

修复内容:
� 修正播放/暂停按钮的状态判断条件
� 修正下载按钮的状态判断条件
� 修正状态筛选选项的枚举值
� 移除调试代码,保持代码整洁

现在已完成状态的语音记录应该能正确显示播放和下载按钮了!

技术细节:
- 枚举定义:SpeechGenerationRecordStatus.COMPLETED = 'completed'
- 条件判断:record.status === SpeechGenerationRecordStatus.COMPLETED
- 状态标准化:确保从数据库读取的字符串正确映射到枚举值
This commit is contained in:
杨明明 2025-07-31 14:02:23 +08:00
parent 4d1d118148
commit afb7ff538d
1 changed files with 7 additions and 68 deletions

View File

@ -60,32 +60,7 @@ const VoiceGenerationHistory: React.FC = () => {
limit: 100 // 限制最近100条记录
});
// 调试:打印原始记录数据
console.log('🔍 原始记录数据:', allRecords);
if (allRecords.length > 0) {
console.log('🔍 第一条记录详细信息:', {
id: allRecords[0].id,
status: allRecords[0].status,
statusType: typeof allRecords[0].status,
statusValue: JSON.stringify(allRecords[0].status),
audio_url: allRecords[0].audio_url,
local_file_path: allRecords[0].local_file_path,
hasAudio: !!(allRecords[0].audio_url || allRecords[0].local_file_path),
text: allRecords[0].text?.substring(0, 50) + '...'
});
}
// 统计音频信息
const audioStats = allRecords.reduce((stats, record) => {
stats.total++;
if (record.audio_url) stats.hasAudioUrl++;
if (record.local_file_path) stats.hasLocalPath++;
if (record.audio_url || record.local_file_path) stats.hasAnyAudio++;
if (record.status === 'completed') stats.completed++;
return stats;
}, { total: 0, hasAudioUrl: 0, hasLocalPath: 0, hasAnyAudio: 0, completed: 0 });
console.log('📊 音频统计信息:', audioStats);
// 标准化记录状态
const normalizedRecords = allRecords.map(record => ({
@ -93,11 +68,6 @@ const VoiceGenerationHistory: React.FC = () => {
status: normalizeStatus(record.status)
}));
console.log('🔄 状态标准化后:', normalizedRecords.length > 0 ? {
originalStatus: allRecords[0]?.status,
normalizedStatus: normalizedRecords[0]?.status
} : '无记录');
// 根据搜索和筛选条件过滤记录
let filteredRecords = normalizedRecords;
@ -112,18 +82,11 @@ const VoiceGenerationHistory: React.FC = () => {
if (statusFilter !== 'all') {
const normalizedFilter = normalizeStatus(statusFilter);
filteredRecords = filteredRecords.filter(record => {
console.log('🔍 状态筛选比较:', {
recordStatus: record.status,
filterStatus: statusFilter,
normalizedFilter,
isEqual: record.status === normalizedFilter
});
return record.status === normalizedFilter;
});
}
setRecords(filteredRecords);
console.log('✅ 最终显示记录数:', filteredRecords.length);
} catch (error) {
console.error('加载语音生成记录失败:', error);
addNotification({
@ -304,14 +267,6 @@ const VoiceGenerationHistory: React.FC = () => {
// 获取状态样式
const getStatusStyle = (status: SpeechGenerationRecordStatus) => {
console.log('🎨 获取状态样式:', {
status,
statusType: typeof status,
enumValues: Object.values(SpeechGenerationRecordStatus),
isCompleted: status === SpeechGenerationRecordStatus.COMPLETED,
completedValue: SpeechGenerationRecordStatus.COMPLETED
});
switch (status) {
case SpeechGenerationRecordStatus.COMPLETED:
return 'bg-green-100 text-green-800 border-green-200';
@ -349,13 +304,6 @@ const VoiceGenerationHistory: React.FC = () => {
// 获取状态文本
const getStatusText = (status: SpeechGenerationRecordStatus) => {
console.log('📝 获取状态文本:', {
status,
statusType: typeof status,
isCompleted: status === SpeechGenerationRecordStatus.COMPLETED,
completedValue: SpeechGenerationRecordStatus.COMPLETED
});
switch (status) {
case SpeechGenerationRecordStatus.COMPLETED:
return '已完成';
@ -436,10 +384,10 @@ const VoiceGenerationHistory: React.FC = () => {
className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all"></option>
<option value={SpeechGenerationRecordStatus.Completed}></option>
<option value={SpeechGenerationRecordStatus.Processing}></option>
<option value={SpeechGenerationRecordStatus.Failed}></option>
<option value={SpeechGenerationRecordStatus.Pending}></option>
<option value={SpeechGenerationRecordStatus.COMPLETED}></option>
<option value={SpeechGenerationRecordStatus.PROCESSING}></option>
<option value={SpeechGenerationRecordStatus.FAILED}></option>
<option value={SpeechGenerationRecordStatus.PENDING}></option>
</select>
</div>
@ -520,16 +468,7 @@ const VoiceGenerationHistory: React.FC = () => {
{record.emotion && <span>: {record.emotion}</span>}
</div>
{/* 调试:音频信息 */}
<div className="mb-3 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs">
<div className="font-medium text-yellow-800 mb-1">:</div>
<div className="text-yellow-700 space-y-1">
<div>: {record.status} (: {typeof record.status})</div>
<div>URL: {record.audio_url ? '✅ 有' : '❌ 无'} {record.audio_url && `(${record.audio_url.substring(0, 50)}...)`}</div>
<div>: {record.local_file_path ? '✅ 有' : '❌ 无'} {record.local_file_path && `(${record.local_file_path.substring(0, 50)}...)`}</div>
<div>: {(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.COMPLETED ? '✅ 是' : '❌ 否'}</div>
</div>
</div>
{/* 时间信息 */}
<div className="flex items-center gap-4 text-xs text-gray-500">
@ -556,7 +495,7 @@ const VoiceGenerationHistory: React.FC = () => {
{/* 操作按钮 */}
<div className="flex items-center gap-2 ml-4">
{/* 播放/暂停按钮 */}
{(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.Completed && (
{(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.COMPLETED && (
<button
onClick={() => handlePlayPause(record)}
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
@ -571,7 +510,7 @@ const VoiceGenerationHistory: React.FC = () => {
)}
{/* 下载按钮 */}
{(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.Completed && (
{(record.audio_url || record.local_file_path) && record.status === SpeechGenerationRecordStatus.COMPLETED && (
<button
onClick={() => handleDownload(record)}
className="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"