Commit d4ed917e1b9da936a82100b37feb5248f58c070e
1 parent
c72d1b10
fix: make message timeline timestamps visible - show absolute time + relative, stronger CSS contrast
Showing
1 changed file
with
20 additions
and
2 deletions
web/src/views/CompanyDashboard.vue
| ... | ... | @@ -430,7 +430,7 @@ |
| 430 | 430 | <span class="timeline-role-badge" :class="msg.role"> |
| 431 | 431 | {{ msg.role === 'user' ? '收到指令' : '产出回复' }} |
| 432 | 432 | </span> |
| 433 | - <span class="timeline-time">{{ formatTimeline(msg.timestamp) }}</span> | |
| 433 | + <span class="timeline-time">🕐 {{ formatTimelineAbsolute(msg.timestamp) }}</span> | |
| 434 | 434 | <span v-if="msg.taskId" class="timeline-task-badge">📌 {{ msg.taskId }}</span> |
| 435 | 435 | </div> |
| 436 | 436 | <div class="timeline-conv-title">{{ msg.conversationTitle }}</div> |
| ... | ... | @@ -950,6 +950,20 @@ function formatTimeline(ts) { |
| 950 | 950 | return d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) |
| 951 | 951 | } |
| 952 | 952 | |
| 953 | +function formatTimelineAbsolute(ts) { | |
| 954 | + if (!ts) return '' | |
| 955 | + const d = new Date(ts) | |
| 956 | + const time = d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }) | |
| 957 | + const now = new Date() | |
| 958 | + const diffMs = now.getTime() - d.getTime() | |
| 959 | + let relative = '' | |
| 960 | + if (diffMs < 60000) relative = '刚刚' | |
| 961 | + else if (diffMs < 3600000) relative = `${Math.floor(diffMs / 60000)}分钟前` | |
| 962 | + else if (diffMs < 86400000) relative = `${Math.floor(diffMs / 3600000)}小时前` | |
| 963 | + else relative = `${Math.floor(diffMs / 86400000)}天前` | |
| 964 | + return `${time}（${relative}）` | |
| 965 | +} | |
| 966 | + | |
| 953 | 967 | onMounted(() => { |
| 954 | 968 | loadCompanies() |
| 955 | 969 | loadTemplates() |
| ... | ... | @@ -1641,7 +1655,11 @@ function closeDropdown() { |
| 1641 | 1655 | .timeline-role-badge.user { background: rgba(59,130,246,0.12); color: var(--blue-text, #60a5fa); } |
| 1642 | 1656 | .timeline-role-badge.assistant { background: rgba(16,185,129,0.12); color: var(--accent-light); } |
| 1643 | 1657 | |
| 1644 | -.timeline-time { font-size: 10px; color: var(--text-faint); } | |
| 1658 | +.timeline-time { | |
| 1659 | + font-size: 11px; color: var(--text-secondary); font-weight: 500; | |
| 1660 | + padding: 1px 6px; border-radius: 4px; | |
| 1661 | + background: var(--bg-surface-hover); | |
| 1662 | +} | |
| 1645 | 1663 | .timeline-task-badge { |
| 1646 | 1664 | font-size: 10px; padding: 1px 6px; border-radius: 4px; |
| 1647 | 1665 | background: rgba(251,191,36,0.1); color: var(--yellow-text, #fbbf24); | ... | ... |