x

2026-03-08 00:51:39 +08:00
parent e50a402152
commit 84e7ae4ef1
4 changed files with 204 additions and 79 deletions
@@ -525,6 +525,118 @@ body {
  border: 1px solid rgba(239, 68, 68, 0.2);
 }

+/* ================================
+   历史记录下拉展开
+   ================================ */
+.file-row {
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.file-row:hover {
+  background-color: var(--bg-secondary);
+}
+
+.expand-icon {
+  display: inline-block;
+  width: 20px;
+  color: var(--text-tertiary);
+  font-size: var(--text-xs);
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+
+.history-detail-row {
+  background-color: var(--bg-secondary);
+}
+
+.history-detail-row td {
+  padding: 0;
+}
+
+.history-detail {
+  padding: var(--space-4) var(--space-6);
+}
+
+.inner-table {
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+}
+
+.inner-table th {
+  background: var(--bg-tertiary);
+  font-size: var(--text-xs);
+}
+
+.inner-table td {
+  font-size: var(--text-xs);
+}
+
+.action-buttons {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.btn-sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-sm);
+}
+
+/* ================================
+   进度条
+   ================================ */
+.file-row {
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.file-row:hover {
+  background-color: var(--bg-secondary);
+}
+
+.expand-icon {
+  display: inline-block;
+  width: 20px;
+  color: var(--text-tertiary);
+  font-size: var(--text-xs);
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+
+.history-detail-row {
+  background-color: var(--bg-secondary);
+}
+
+.history-detail-row td {
+  padding: 0;
+}
+
+.history-detail {
+  padding: var(--space-4) var(--space-6);
+}
+
+.inner-table {
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+}
+
+.inner-table th {
+  background: var(--bg-tertiary);
+  font-size: var(--text-xs);
+}
+
+.inner-table td {
+  font-size: var(--text-xs);
+}
+
+.action-buttons {
+  display: flex;
+  gap: var(--space-2);
+}
+
 /* ================================
   进度条
   ================================ */
@@ -761,9 +761,7 @@ const MoldInsightView = {
      dragOver: false,
      progress: 0,
      history: null,
-      showFileHistory: false,
-      selectedFileHistory: null,
-      fileHistoryRecords: []
+      expandedFiles: {}
    });

    const loadHistory = async () => {
@@ -774,19 +772,21 @@ const MoldInsightView = {
      }
    };

-    const viewFileHistory = async (filename) => {
-      try {
-        state.selectedFileHistory = filename;
-        state.fileHistoryRecords = await apiRequest(`/api/history/${encodeURIComponent(filename)}`);
-        state.showFileHistory = true;
-      } catch (e) {
-        handleApiError(e, '加载文件历史');
+    const toggleFileHistory = async (filename) => {
+      if (state.expandedFiles[filename]) {
+        state.expandedFiles[filename] = null;
+      } else {
+        try {
+          const records = await apiRequest(`/api/history/${encodeURIComponent(filename)}`);
+          state.expandedFiles[filename] = records;
+        } catch (e) {
+          handleApiError(e, '加载文件历史');
+        }
      }
    };

    const viewResult = (record) => {
-      state.showFileHistory = false;
-      router.push(`/moldinsight/result/${record.id}`);
+      router.push(`/moldinsight/result/${record.task_id}`);
    };

    const handleFileChange = (event) => {
@@ -899,7 +899,7 @@ const MoldInsightView = {
      uploadFile, 
      formatFileSize, 
      formatDateTime,
-      viewFileHistory,
+      toggleFileHistory,
      viewResult
    };
  },
@@ -968,74 +968,71 @@ const MoldInsightView = {
              </tr>
            </thead>
            <tbody>
-              <tr v-for="file in state.history.files" :key="file.filename">
-                <td>{{ file.filename }}</td>
-                <td>
-                  <span class="badge badge-info">{{ file.upload_count }} 次</span>
-                </td>
-                <td>{{ formatFileSize(file.file_size) }}</td>
-                <td>
-                  <span :class="['badge', file.latest_status === 'completed' ? 'badge-success' : file.latest_status === 'failed' ? 'badge-error' : 'badge-warning']">
-                    {{ file.latest_status }}
-                  </span>
-                </td>
-                <td>{{ formatDateTime(file.latest_upload_time) }}</td>
-                <td>
-                  <div class="action-buttons">
-                    <button v-if="file.latest_status === 'completed'" class="btn-sm btn-primary" @click="router.push('/moldinsight/result/' + file.latest_id)">
-                      查看最新
-                    </button>
-                    <button class="btn-sm btn-secondary" @click="viewFileHistory(file.filename)">
-                      历史记录
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div v-if="state.showFileHistory" class="modal-overlay" @click.self="state.showFileHistory = false">
-        <div class="modal-content" style="max-width: 800px;">
-          <div class="modal-header">
-            <h2>{{ state.selectedFileHistory }} - 历史记录</h2>
-            <button class="modal-close" @click="state.showFileHistory = false">×</button>
-          </div>
-          <div class="modal-body">
-            <table class="data-table">
-              <thead>
-                <tr>
-                  <th>上传时间</th>
-                  <th>文件大小</th>
-                  <th>状态</th>
-                  <th>体积 (mm³)</th>
-                  <th>表面积 (mm²)</th>
-                  <th>重量 (g)</th>
-                  <th>操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="record in state.fileHistoryRecords" :key="record.id">
-                  <td>{{ formatDateTime(record.upload_time) }}</td>
-                  <td>{{ formatFileSize(record.file_size) }}</td>
+              <template v-for="file in state.history.files" :key="file.filename">
+                <tr class="file-row" @click="toggleFileHistory(file.filename)">
                  <td>
-                    <span :class="['badge', record.status === 'completed' ? 'badge-success' : record.status === 'failed' ? 'badge-error' : 'badge-warning']">
-                      {{ record.status }}
+                    <span class="expand-icon">{{ state.expandedFiles[file.filename] ? '▼' : '▶' }}</span>
+                    {{ file.filename }}
+                  </td>
+                  <td>
+                    <span class="badge badge-info">{{ file.upload_count }} 次</span>
+                  </td>
+                  <td>{{ formatFileSize(file.file_size) }}</td>
+                  <td>
+                    <span :class="['badge', file.latest_status === 'completed' ? 'badge-success' : file.latest_status === 'failed' ? 'badge-error' : 'badge-warning']">
+                      {{ file.latest_status }}
                    </span>
                  </td>
-                  <td>{{ record.volume ? formatNumber(record.volume) : '-' }}</td>
-                  <td>{{ record.surface_area ? formatNumber(record.surface_area) : '-' }}</td>
-                  <td>{{ record.product_weight ? record.product_weight.toFixed(2) : '-' }}</td>
+                  <td>{{ formatDateTime(file.latest_upload_time) }}</td>
                  <td>
-                    <button v-if="record.has_analysis" class="btn-sm btn-primary" @click="viewResult(record)">
-                      查看详情
-                    </button>
+                    <div class="action-buttons" @click.stop>
+                      <button v-if="file.latest_status === 'completed'" class="btn-sm btn-primary" @click="viewResult({task_id: file.latest_task_id})">
+                        查看最新
+                      </button>
+                    </div>
                  </td>
                </tr>
-              </tbody>
-            </table>
-          </div>
+                <tr v-if="state.expandedFiles[file.filename]" class="history-detail-row">
+                  <td colspan="6">
+                    <div class="history-detail">
+                      <table class="data-table inner-table">
+                        <thead>
+                          <tr>
+                            <th>上传时间</th>
+                            <th>文件大小</th>
+                            <th>状态</th>
+                            <th>体积 (mm³)</th>
+                            <th>表面积 (mm²)</th>
+                            <th>重量 (g)</th>
+                            <th>操作</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr v-for="record in state.expandedFiles[file.filename]" :key="record.id">
+                            <td>{{ formatDateTime(record.upload_time) }}</td>
+                            <td>{{ formatFileSize(record.file_size) }}</td>
+                            <td>
+                              <span :class="['badge', record.status === 'completed' ? 'badge-success' : record.status === 'failed' ? 'badge-error' : 'badge-warning']">
+                                {{ record.status }}
+                              </span>
+                            </td>
+                            <td>{{ record.volume ? formatNumber(record.volume) : '-' }}</td>
+                            <td>{{ record.surface_area ? formatNumber(record.surface_area) : '-' }}</td>
+                            <td>{{ record.product_weight ? record.product_weight.toFixed(2) : '-' }}</td>
+                            <td>
+                              <button v-if="record.has_analysis" class="btn-sm btn-primary" @click="viewResult(record)">
+                                查看详情
+                              </button>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
        </div>
      </div>
    </div>