diff --git a/src/pages/history/index.css b/src/pages/history/index.css index 3d8ea75..24445a1 100644 --- a/src/pages/history/index.css +++ b/src/pages/history/index.css @@ -120,18 +120,54 @@ .item-thumbnail { width: 100rpx; height: 100rpx; - background: linear-gradient(135deg, #007AFF, #5AC8FA); + border-radius: 20rpx; + margin-right: 32rpx; + flex-shrink: 0; + overflow: hidden; + position: relative; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); +} + +.thumbnail-image { + width: 100%; + height: 100%; + border-radius: 20rpx; + background: #f5f5f5; + transition: transform 0.2s ease; +} + +.history-item:active .thumbnail-image { + transform: scale(0.95); +} + +.thumbnail-placeholder { + width: 100%; + height: 100%; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; - margin-right: 32rpx; - flex-shrink: 0; - box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.2); + position: relative; +} + +/* 不同状态的占位符背景 */ +.thumbnail-placeholder { + background: linear-gradient(135deg, #007AFF, #5AC8FA); +} + +/* 生成中状态 */ +.thumbnail-placeholder.generating { + background: linear-gradient(135deg, #FF9500, #FFB84D); +} + +/* 失败状态 */ +.thumbnail-placeholder.failed { + background: linear-gradient(135deg, #FF3B30, #FF6B6B); } .thumbnail-icon { font-size: 40rpx; + filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2)); } .item-content { @@ -159,6 +195,13 @@ margin-right: 16rpx; } +.item-right { + display: flex; + align-items: center; + gap: 12rpx; + flex-shrink: 0; +} + .item-status { font-size: 22rpx; font-weight: 600; @@ -307,7 +350,6 @@ display: flex; align-items: center; gap: 4rpx; - margin-left: 16rpx; } .loading-dot { @@ -348,7 +390,6 @@ /* 操作提示 */ .action-hint { - margin-left: 16rpx; display: flex; align-items: center; } diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx index 01d3957..2426ad0 100644 --- a/src/pages/history/index.tsx +++ b/src/pages/history/index.tsx @@ -41,8 +41,9 @@ export default function History() { const handleItemClick = (record: any) => { if (record.status === 'completed' && record.outputResult) { // 跳转到结果页面查看 + const images = Array.isArray(record.outputResult) ? record.outputResult : [record.outputResult] navigateTo({ - url: `/pages/result/index?images=${encodeURIComponent(JSON.stringify([record.outputResult!]))}` + url: `/pages/result/index?images=${encodeURIComponent(JSON.stringify(images))}` }) } else if (record.status === 'failed') { // 显示错误信息 @@ -80,12 +81,14 @@ export default function History() { const formatTime = (timeStr: string) => { const date = new Date(timeStr) - return date.toLocaleString('zh-CN', { - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit' - }) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` } return ( @@ -116,44 +119,54 @@ export default function History() { style={{ animationDelay: `${index * 0.1}s` }} > - - {record.type === 'image-to-video' ? '🎬' : '🎨'} - + {record.status === 'completed' && record.outputResult ? ( + + ) : ( + + + {record.status === 'generating' ? '⏳' : + record.status === 'failed' ? '❌' : + record.type === 'image-to-video' ? '🎬' : '🎨'} + + + )} {record.templateName} - - {getStatusText(record.status)} - + + + {getStatusText(record.status)} + + + {/* 添加状态指示器 */} + {record.status === 'generating' && ( + + + + + + )} + - - {record.type === 'image-to-video' ? '图生视频' : '图生图'} - {formatTime(record.createTime)} + {record.status === 'completed' && ( + + 点击查看 + + )} - - {/* 添加状态指示器 */} - {record.status === 'generating' && ( - - - - - - )} - - {record.status === 'completed' && ( - - 点击查看 - - )} )) )}