diff --git a/frontend/src/components/HistoryDatabase.vue b/frontend/src/components/HistoryDatabase.vue index e7f081a..cb79826 100644 --- a/frontend/src/components/HistoryDatabase.vue +++ b/frontend/src/components/HistoryDatabase.vue @@ -28,11 +28,11 @@ @mouseleave="hoveringCard = null" @click="navigateToProject(project)" > - +
{{ formatSimulationId(project.simulation_id) }} - - {{ getStatusText(project.status) }} + + {{ formatRounds(project) }}
@@ -68,7 +68,7 @@ @@ -128,8 +128,8 @@ const containerStyle = computed(() => { } const rows = Math.ceil(total / CARDS_PER_ROW) - // 计算实际需要的高度:行数 * 卡片高度 + (行数-1) * 间距 + 额外padding - const expandedHeight = rows * CARD_HEIGHT + (rows - 1) * CARD_GAP + 40 + // 计算实际需要的高度:行数 * 卡片高度 + (行数-1) * 间距 + 少量底部间距 + const expandedHeight = rows * CARD_HEIGHT + (rows - 1) * CARD_GAP + 10 return { minHeight: `${expandedHeight}px` } }) @@ -186,33 +186,24 @@ const getCardStyle = (index) => { } } -// 获取状态样式类 -const getStatusClass = (status) => { - const statusMap = { - completed: 'completed', - running: 'processing', - ready: 'ready', - failed: 'failed', - preparing: 'processing', - created: 'pending' +// 根据轮数进度获取样式类 +const getProgressClass = (simulation) => { + const current = simulation.current_round || 0 + const total = simulation.total_rounds || 0 + + if (total === 0 || current === 0) { + // 未开始 + return 'not-started' + } else if (current >= total) { + // 已完成 + return 'completed' + } else { + // 进行中 + return 'in-progress' } - return statusMap[status] || 'pending' } -// 获取状态文本 -const getStatusText = (status) => { - const textMap = { - completed: 'COMPLETED', - running: 'PROCESSING', - ready: 'READY', - failed: 'FAILED', - preparing: 'PREPARING', - created: 'CREATED' - } - return textMap[status] || 'PENDING' -} - -// 格式化日期 +// 格式化日期(只显示日期部分) const formatDate = (dateStr) => { if (!dateStr) return '' try { @@ -223,6 +214,19 @@ const formatDate = (dateStr) => { } } +// 格式化时间(显示时:分) +const formatTime = (dateStr) => { + if (!dateStr) return '' + try { + const date = new Date(dateStr) + const hours = date.getHours().toString().padStart(2, '0') + const minutes = date.getMinutes().toString().padStart(2, '0') + return `${hours}:${minutes}` + } catch { + return '' + } +} + // 截断文本 const truncateText = (text, maxLength) => { if (!text) return '' @@ -377,9 +381,9 @@ onMounted(() => { }, { // 使用多个阈值,使检测更平滑 - threshold: [0.3, 0.5, 0.7], - // 调整 rootMargin,使触发区域更稳定 - rootMargin: '0px 0px -100px 0px' + threshold: [0.4, 0.6, 0.8], + // 调整 rootMargin,视口底部向上收缩,需要滚动更多才触发展开 + rootMargin: '0px 0px -150px 0px' } ) @@ -412,7 +416,7 @@ onUnmounted(() => { width: 100%; min-height: 280px; margin-top: 80px; - padding: 60px 0 120px; + padding: 60px 0 40px; overflow: visible; } @@ -534,11 +538,11 @@ onUnmounted(() => { font-weight: 500; } -.card-status { +/* 轮数进度显示 */ +.card-progress { display: flex; align-items: center; gap: 6px; - text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; font-size: 0.65rem; @@ -548,10 +552,10 @@ onUnmounted(() => { font-size: 0.5rem; } -.card-status.completed { color: #10B981; } -.card-status.processing { color: #F59E0B; } -.card-status.ready { color: #3B82F6; } -.card-status.failed { color: #EF4444; } +/* 进度状态颜色 */ +.card-progress.completed { color: #10B981; } /* 已完成 - 绿色 */ +.card-progress.in-progress { color: #F59E0B; } /* 进行中 - 橙色 */ +.card-progress.not-started { color: #9CA3AF; } /* 未开始 - 灰色 */ .card-status.pending { color: #9CA3AF; } /* 文件列表区域 */