Refine mobile usage record details

- Move mobile usage actions into the card header
- Add compact user/provider metadata line on mobile
- Preserve hidden unknown toggle and auto refresh controls
This commit is contained in:
AAEE86
2026-06-01 21:13:10 +08:00
parent c1649fe837
commit 9d8f7d158b
@@ -338,7 +338,20 @@
</template>
</div>
<!-- 第三行性能指标 -->
<!-- 第三行用户 + 提供商 -->
<div
v-if="isAdmin"
class="mt-1 flex min-w-0 items-center text-[10px] leading-3.5 text-muted-foreground"
>
<span
class="min-w-0 flex-1 truncate"
:title="formatRecordUserProviderLine(record)"
>
{{ formatRecordUserProviderLine(record) }}
</span>
</div>
<!-- 第四行性能指标 -->
<div class="mt-1.5 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-[10px] leading-3.5 text-muted-foreground">
<span
class="min-w-0 truncate whitespace-nowrap tabular-nums text-foreground"
@@ -1387,6 +1400,17 @@ function formatRecordTime(dateStr: string): string {
return `${hours}:${minutes}:${seconds}`
}
function getRecordUserName(record: UsageRecord): string {
return record.username || record.user_email || (record.user_id ? `User ${record.user_id}` : '已删除用户')
}
function formatRecordUserProviderLine(record: UsageRecord): string {
const userKeyName = record.api_key?.name || '-'
const providerName = record.provider || '-'
const providerKeyName = record.provider_key_name || '-'
return `${getRecordUserName(record)} / ${userKeyName} · ${providerName} / ${providerKeyName}`
}
watch(() => props.filterSearch, (value) => {
if (value !== localSearch.value) {
localSearch.value = value