修改样式

frontend/src/views/workbench/ai-3d/History.vue

@@ -103,48 +103,38 @@
             <div class="status-badge" :class="`status-${task.status}`">
               {{ getStatusText(task.status) }}
             </div>
+          </div>
 
-            <!-- 悬停显示的操作按钮 -->
+          <!-- 悬停显示的底部信息 -->
-            <div class="card-actions-overlay" @click.stop>
+          <div class="card-hover-info" @click.stop>
+            <div class="hover-left">
+              <img
+                v-if="task.inputType === 'image'"
+                :src="task.inputContent"
+                alt=""
+                class="input-thumb"
+              />
+              <span v-else class="input-desc">{{ task.inputContent }}</span>
+            </div>
+            <span class="hover-date">{{ formatDate(task.createTime) }}</span>
+            <div class="hover-actions">
+              <a-tooltip v-if="['failed', 'timeout'].includes(task.status)" title="重试" placement="top">
                 <button
-                v-if="task.status === 'completed'"
+                  class="action-btn"
-                class="overlay-btn btn-primary"
-                @click="handlePreview(task)"
-              >
-                <EyeOutlined />
-                <span>预览</span>
-              </button>
-              <button
-                v-if="['failed', 'timeout'].includes(task.status)"
-                class="overlay-btn btn-primary"
                   :disabled="task.retryCount >= 3"
                   @click="handleRetry(task)"
                 >
                   <ReloadOutlined />
-                <span>重试</span>
                 </button>
+              </a-tooltip>
+              <a-tooltip title="删除" placement="top">
                 <button
-                class="overlay-btn btn-secondary"
+                  class="action-btn"
                   @click="handleDelete(task)"
                 >
                   <DeleteOutlined />
-                <span>删除</span>
                 </button>
-            </div>
+              </a-tooltip>
-          </div>
-
-          <div class="card-info">
-            <div class="card-desc" :title="task.inputContent">
-              {{ task.inputContent }}
-            </div>
-            <div class="card-meta">
-              <span class="card-time">
-                <ClockCircleOutlined />
-                {{ formatTime(task.createTime) }}
-              </span>
-              <span class="card-type">
-                {{ task.inputType === "text" ? "文生3D" : "图生3D" }}
-              </span>
             </div>
           </div>
         </div>
@@ -173,8 +163,6 @@ import {
   ArrowLeftOutlined,
   FileImageOutlined,
   CloseOutlined,
-  ClockCircleOutlined,
-  EyeOutlined,
   ReloadOutlined,
   DeleteOutlined,
   ThunderboltOutlined,
@@ -284,6 +272,11 @@ const formatTime = (time: string) => {
   return dayjs(time).format("YYYY-MM-DD HH:mm")
 }
 
+// 格式化日期（年月日）
+const formatDate = (time: string) => {
+  return dayjs(time).format("YYYY.MM.DD")
+}
+
 // 查看任务详情
 const handleViewTask = (task: AI3DTask) => {
   router.push({
@@ -679,36 +672,36 @@ $gradient-primary: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
 // ==========================================
 .history-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
+  gap: 24px;
 }
 
 .history-card {
   background: $surface;
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
   cursor: pointer;
   position: relative;
-  // border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
 
   &:hover {
-    .card-preview {
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
-      transform: scale(1.03);
+    transform: translateY(-4px);
-    }
 
     .card-preview .preview-image {
       transform: scale(1.05);
     }
 
-    .card-actions-overlay {
+    .card-hover-info {
       opacity: 1;
+      transform: translateY(0);
     }
   }
 }
 
 .card-preview {
-  height: 160px;
+  height: 240px;
-  // border-radius: 8px;
   background: linear-gradient(
     135deg,
     rgba($surface-light, 0.9) 0%,
@@ -719,7 +712,6 @@ $gradient-primary: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
   justify-content: center;
   position: relative;
   overflow: hidden;
-  transition: transform 0.3s ease;
 
   .preview-image {
     width: 100%;
@@ -764,62 +756,6 @@ $gradient-primary: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
   }
 }
 
-// 悬停时显示的操作按钮遮罩层
-.card-actions-overlay {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.6) 0%,
-    rgba(0, 0, 0, 0.2) 50%,
-    transparent 100%
-  );
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 16px;
-  gap: 10px;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 10;
-
-  .overlay-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 14px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-
-    &.btn-primary {
-      background: $primary;
-      color: white;
-
-      &:hover {
-        background: $primary-light;
-      }
-    }
-
-    &.btn-secondary {
-      background: rgba(255, 255, 255, 0.9);
-      color: $text;
-
-      &:hover {
-        background: white;
-      }
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
 @keyframes pulse-error {
   0%,
   100% {
@@ -900,51 +836,87 @@ $gradient-primary: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
   }
 }
 
-.card-info {
+// 悬停显示的底部信息
-  padding: 16px;
+.card-hover-info {
-  background: $surface;
+  position: absolute;
-  border-top: 1px solid rgba($primary, 0.06);
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(12px);
+  border-radius: 12px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .hover-left {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .input-thumb {
+      width: 36px;
+      height: 36px;
+      object-fit: cover;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      flex-shrink: 0;
     }
 
-.card-desc {
+    .input-desc {
-  font-size: 14px;
+      font-size: 13px;
-  color: $text;
+      color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-  margin-bottom: 12px;
+    }
-  font-weight: 500;
-  line-height: 1.4;
   }
 
-.card-meta {
+  .hover-date {
-  display: flex;
+    font-size: 12px;
-  justify-content: space-between;
+    color: rgba(255, 255, 255, 0.6);
-  align-items: center;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
-.card-time {
+  .hover-actions {
     display: flex;
     align-items: center;
     gap: 6px;
-  font-size: 12px;
+    flex-shrink: 0;
-  color: $text-muted;
+
+    .action-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.9);
+      cursor: pointer;
+      transition: all 0.2s;
+      font-size: 14px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+        color: #fff;
       }
 
-.card-type {
+      &:disabled {
-  display: inline-flex;
+        opacity: 0.4;
-  align-items: center;
+        cursor: not-allowed;
-  padding: 4px 10px;
+      }
-  background: linear-gradient(
+    }
-    135deg,
+  }
-    rgba($primary, 0.1) 0%,
-    rgba($primary-light, 0.15) 100%
-  );
-  border: 1px solid rgba($primary, 0.2);
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 500;
-  color: $primary;
 }
 
 // ==========================================

frontend/src/views/workbench/ai-3d/Index.vue

@@ -585,48 +585,38 @@
               <div class="status-badge" :class="`status-${task.status}`">
                 {{ getStatusText(task.status) }}
               </div>
+            </div>
 
-              <!-- 悬停显示的操作按钮 -->
+            <!-- 悬停显示的底部信息 -->
-              <div class="card-actions-overlay" @click.stop>
+            <div class="card-hover-info" @click.stop>
+              <div class="hover-left">
+                <img
+                  v-if="task.inputType === 'image'"
+                  :src="task.inputContent"
+                  alt=""
+                  class="input-thumb"
+                />
+                <span v-else class="input-desc">{{ task.inputContent }}</span>
+              </div>
+              <span class="hover-date">{{ formatDate(task.createTime) }}</span>
+              <div class="hover-actions">
+                <a-tooltip v-if="['failed', 'timeout'].includes(task.status)" title="重试" placement="top">
                   <button
-                  v-if="task.status === 'completed'"
+                    class="action-btn"
-                  class="overlay-btn btn-primary"
-                  @click="handlePreview(task)"
-                >
-                  <EyeOutlined />
-                  <span>预览</span>
-                </button>
-                <button
-                  v-if="['failed', 'timeout'].includes(task.status)"
-                  class="overlay-btn btn-primary"
                     :disabled="task.retryCount >= 3"
                     @click="handleRetry(task)"
                   >
                     <ReloadOutlined />
-                  <span>重试</span>
                   </button>
+                </a-tooltip>
+                <a-tooltip title="删除" placement="top">
                   <button
-                  class="overlay-btn btn-secondary"
+                    class="action-btn"
                     @click="handleDelete(task)"
                   >
                     <DeleteOutlined />
-                  <span>删除</span>
                   </button>
-              </div>
+                </a-tooltip>
-            </div>
-
-            <div class="card-info">
-              <div class="card-desc" :title="task.inputContent">
-                {{ task.inputContent }}
-              </div>
-              <div class="card-meta">
-                <span class="card-time">
-                  <ClockCircleOutlined />
-                  {{ formatTime(task.createTime) }}
-                </span>
-                <span class="card-type">
-                  {{ task.inputType === "text" ? "文生3D" : "图生3D" }}
-                </span>
               </div>
             </div>
           </div>
@@ -651,7 +641,6 @@ import {
   DeleteOutlined,
   ArrowRightOutlined,
   ArrowLeftOutlined,
-  ClockCircleOutlined,
   BulbOutlined,
   FolderOutlined,
   SyncOutlined,
@@ -1148,6 +1137,11 @@ const formatTime = (time: string) => {
   return dayjs(time).format("MM-DD HH:mm")
 }
 
+// 格式化日期（年月日）
+const formatDate = (time: string) => {
+  return dayjs(time).format("YYYY.MM.DD")
+}
+
 // 更新容器宽度
 const updateGridWidth = () => {
   if (historyGridRef.value) {
@@ -2437,39 +2431,40 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%);
 .history-grid {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 24px;
-  overflow: hidden; // 移除滚动，只展示一行
+  flex-wrap: nowrap;
-  flex-wrap: nowrap; // 不换行
+  padding: 8px; // 为阴影留出空间
+  margin: -8px; // 抵消padding对布局的影响
 }
 
 .history-card {
   flex-shrink: 0;
-  width: 240px;
+  width: 280px;
   background: $surface;
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
   cursor: pointer;
   position: relative;
-  // border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
 
   &:hover {
-    .card-preview {
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
-      transform: scale(1.03);
+    transform: translateY(-4px);
-    }
 
     .card-preview .preview-image {
       transform: scale(1.05);
     }
 
-    .card-actions-overlay {
+    .card-hover-info {
       opacity: 1;
+      transform: translateY(0);
     }
   }
 }
 
 .card-preview {
-  height: 160px;
+  height: 220px;
-  // border-radius: 8px;
   background: linear-gradient(
     135deg,
     rgba($surface-light, 0.9) 0%,
@@ -2480,7 +2475,7 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%);
   justify-content: center;
   position: relative;
   overflow: hidden;
-  transition: transform 0.3s ease;
+  border-radius: 16px;
 
   .preview-image {
     width: 100%;
@@ -2525,62 +2520,6 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%);
   }
 }
 
-// 悬停时显示的操作按钮遮罩层
-.card-actions-overlay {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.6) 0%,
-    rgba(0, 0, 0, 0.2) 50%,
-    transparent 100%
-  );
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 16px;
-  gap: 10px;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 10;
-
-  .overlay-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 14px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-
-    &.btn-primary {
-      background: $primary;
-      color: white;
-
-      &:hover {
-        background: $primary-light;
-      }
-    }
-
-    &.btn-secondary {
-      background: rgba(255, 255, 255, 0.9);
-      color: $text;
-
-      &:hover {
-        background: white;
-      }
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
 @keyframes pulse-error {
   0%,
   100% {
@@ -2661,51 +2600,84 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%);
   }
 }
 
-.card-info {
+// 悬停显示的底部信息
-  padding: 16px;
+.card-hover-info {
-  background: $surface;
+  position: absolute;
-  border-top: 1px solid rgba($primary, 0.06);
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(12px);
+  border-radius: 12px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .hover-left {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    .input-thumb {
+      width: 36px;
+      height: 36px;
+      object-fit: cover;
+      border-radius: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
     }
 
-.card-desc {
+    .input-desc {
-  font-size: 14px;
+      font-size: 13px;
-  color: $text;
+      color: rgba(255, 255, 255, 0.95);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-  margin-bottom: 12px;
+      max-width: 100px;
-  font-weight: 500;
+    }
-  line-height: 1.4;
   }
 
-.card-meta {
+  .hover-date {
-  display: flex;
+    font-size: 12px;
-  justify-content: space-between;
+    color: rgba(255, 255, 255, 0.6);
-  align-items: center;
+    white-space: nowrap;
   }
 
-.card-time {
+  .hover-actions {
     display: flex;
     align-items: center;
     gap: 6px;
-  font-size: 12px;
+
-  color: $text-muted;
+    .action-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.12);
+      color: rgba(255, 255, 255, 0.85);
+      cursor: pointer;
+      transition: all 0.2s;
+      font-size: 14px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.25);
+        color: #fff;
       }
 
-.card-type {
+      &:disabled {
-  display: inline-flex;
+        opacity: 0.4;
-  align-items: center;
+        cursor: not-allowed;
-  padding: 4px 10px;
+      }
-  background: linear-gradient(
+    }
-    135deg,
+  }
-    rgba($primary, 0.1) 0%,
-    rgba($primary-light, 0.15) 100%
-  );
-  border: 1px solid rgba($primary, 0.2);
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 500;
-  color: $primary;
 }
 
 // ==========================================
@@ -2721,7 +2693,11 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%);
   }
 
   .history-card {
-    width: 200px;
+    width: 240px;
+
+    .card-preview {
+      height: 200px;
+    }
   }
 }
 
@@ -2743,12 +2719,38 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%);
   }
 
   .history-card {
-    width: 180px;
+    width: 220px;
 
-    .card-actions-overlay {
+    .card-preview {
-      .overlay-btn {
+      height: 180px;
-        padding: 6px 10px;
+    }
+
+    .card-hover-info {
+      bottom: 6px;
+      left: 6px;
+      right: 6px;
+      padding: 10px 12px;
+      border-radius: 10px;
+
+      .hover-left {
+        .input-thumb {
+          width: 30px;
+          height: 30px;
+        }
+
+        .input-desc {
           font-size: 12px;
+          max-width: 80px;
+        }
+      }
+
+      .hover-date {
+        font-size: 11px;
+      }
+
+      .hover-actions .action-btn {
+        width: 28px;
+        height: 28px;
       }
     }
   }