From 9d8f7d158ba38c09409a34750905768966bf8e5b Mon Sep 17 00:00:00 2001
From: AAEE86 <ppk0227@hotmail.com>
Date: Mon, 1 Jun 2026 21:13:10 +0800
Subject: [PATCH] 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
---
 .../usage/components/UsageRecordsTable.vue    | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/usage/components/UsageRecordsTable.vue b/frontend/src/features/usage/components/UsageRecordsTable.vue
index 49fb6749f..0e8a204df 100644
--- a/frontend/src/features/usage/components/UsageRecordsTable.vue
+++ b/frontend/src/features/usage/components/UsageRecordsTable.vue
@@ -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