fix: 修复语音生成历史页面播放和下载按钮不显示问题
问题根源: - 使用了错误的枚举值 SpeechGenerationRecordStatus.Completed(首字母大写) - 正确的枚举值应该是 SpeechGenerationRecordStatus.COMPLETED(全大写) 修复内容: � 修正播放/暂停按钮的状态判断条件 � 修正下载按钮的状态判断条件 � 修正状态筛选选项的枚举值 � 移除调试代码,保持代码整洁 现在已完成状态的语音记录应该能正确显示播放和下载按钮了! 技术细节: - 枚举定义:SpeechGenerationRecordStatus.COMPLETED = 'completed' - 条件判断:record.status === SpeechGenerationRecordStatus.COMPLETED - 状态标准化:确保从数据库读取的字符串正确映射到枚举值
This commit is contained in:
parent
4d1d118148
commit
afb7ff538d
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue