feat: 优化历史记录页面显示和布局

- 添加真实图片缩略图显示功能：
  - 已完成状态显示实际结果图片缩略图
  - 不同状态使用对应的占位符和颜色
  - 支持单图片和多图片数组格式处理
- 修复布局对齐问题：
  - 重新组织状态指示器和操作提示的位置
  - 确保状态标签始终靠右对齐
  - 优化加载指示器和操作提示的布局
- 改进时间格式显示：
  - 统一使用YYYY-MM-DD HH:mm:ss格式
  - 提供完整的日期时间信息
- 增强交互体验：
  - 添加图片缩放动画效果
  - 优化不同状态的视觉反馈

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;
+  position: relative;
-  flex-shrink: 0;
+}
-  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.2);
+
+/* 不同状态的占位符背景 */
+.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;
 }

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', {
+    const year = date.getFullYear()
-      month: '2-digit',
+    const month = String(date.getMonth() + 1).padStart(2, '0')
-      day: '2-digit',
+    const day = String(date.getDate()).padStart(2, '0')
-      hour: '2-digit',
+    const hours = String(date.getHours()).padStart(2, '0')
-      minute: '2-digit'
+    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` }}
               >
                 <View className='item-thumbnail'>
-                  <Text className='thumbnail-icon'>
+                  {record.status === 'completed' && record.outputResult ? (
-                    {record.type === 'image-to-video' ? '🎬' : '🎨'}
+                    <Image
-                  </Text>
+                      className='thumbnail-image'
+                      src={Array.isArray(record.outputResult) ? record.outputResult[0] : record.outputResult}
+                      mode='aspectFill'
+                    />
+                  ) : (
+                    <View className={`thumbnail-placeholder ${record.status}`}>
+                      <Text className='thumbnail-icon'>
+                        {record.status === 'generating' ? '⏳' :
+                         record.status === 'failed' ? '❌' :
+                         record.type === 'image-to-video' ? '🎬' : '🎨'}
+                      </Text>
+                    </View>
+                  )}
                 </View>
 
                 <View className='item-content'>
                   <View className='item-header'>
                     <Text className='item-title'>{record.templateName}</Text>
-                    <Text
+                    <View className='item-right'>
-                      className='item-status'
+                      <Text
-                      style={{ color: getStatusColor(record.status) }}
+                        className='item-status'
-                    >
+                        style={{ color: getStatusColor(record.status) }}
-                      {getStatusText(record.status)}
+                      >
-                    </Text>
+                        {getStatusText(record.status)}
+                      </Text>
+
+                      {/* 添加状态指示器 */}
+                      {record.status === 'generating' && (
+                        <View className='loading-indicator'>
+                          <Text className='loading-dot'>●</Text>
+                          <Text className='loading-dot'>●</Text>
+                          <Text className='loading-dot'>●</Text>
+                        </View>
+                      )}
+                    </View>
                   </View>
 
                   <View className='item-info'>
-                    <Text className='item-type'>
-                      {record.type === 'image-to-video' ? '图生视频' : '图生图'}
-                    </Text>
                     <Text className='item-time'>{formatTime(record.createTime)}</Text>
+                    {record.status === 'completed' && (
+                      <View className='action-hint'>
+                        <Text className='hint-text'>点击查看</Text>
+                      </View>
+                    )}
                   </View>
                 </View>
-
-                {/* 添加状态指示器 */}
-                {record.status === 'generating' && (
-                  <View className='loading-indicator'>
-                    <Text className='loading-dot'>●</Text>
-                    <Text className='loading-dot'>●</Text>
-                    <Text className='loading-dot'>●</Text>
-                  </View>
-                )}
-
-                {record.status === 'completed' && (
-                  <View className='action-hint'>
-                    <Text className='hint-text'>点击查看</Text>
-                  </View>
-                )}
               </View>
             ))
           )}