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' && (
-
- 点击查看
-
- )}
))
)}