feat: 在 API Keys 页面使用统计栏添加最后使用时间显示

- 在桌面端表格视图的使用统计列中增加最后使用时间
- 在移动端卡片视图的统计区域增加最后使用时间
- 添加 formatLastUsed 函数格式化时间显示
- 时间显示规则与 Accounts 页面保持一致(刚刚/X分钟前/X小时前/X天前/具体日期)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-08-08 20:27:20 +08:00
parent 7e1a9daa6b
commit 66857af148
2 changed files with 30 additions and 8 deletions

View File

@@ -268,6 +268,12 @@
>${{ (key.dailyCost || 0).toFixed(4) }}</span
>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">最后使用</span>
<span class="font-medium text-gray-700">{{
formatLastUsed(key.lastUsedAt)
}}</span>
</div>
</div>
<!-- 每日费用限制进度条 -->
@@ -745,6 +751,12 @@
<p class="text-xs text-gray-500">费用</p>
</div>
</div>
<div class="mt-2 flex items-center justify-between">
<span class="text-xs text-gray-600">最后使用</span>
<span class="text-xs font-medium text-gray-700">{{
formatLastUsed(key.lastUsedAt)
}}</span>
</div>
</div>
<!-- 限制进度 -->
@@ -1736,6 +1748,19 @@ const formatTokenCount = (count) => {
return count.toString()
}
// 格式化最后使用时间
const formatLastUsed = (dateString) => {
if (!dateString) return '从未使用'
const date = new Date(dateString)
const now = new Date()
const diff = now - date
if (diff < 60000) return '刚刚'
if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`
return date.toLocaleDateString('zh-CN')
}
// 监听筛选条件变化,重置页码
watch([selectedTagFilter, apiKeyStatsTimeRange], () => {
currentPage.value = 1