From 60c5949a74bc41fc8c2fc31dcb16552f41e6b7fa Mon Sep 17 00:00:00 2001
From: bayma888 <kubai666@126.com>
Date: Sun, 8 Mar 2026 19:11:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BD=BF=E7=94=A8=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E7=82=B9=E5=87=BB=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E9=82=AE=E7=AE=B1=E5=8F=AF=E6=9F=A5=E7=9C=8B=E5=85=85=E5=80=BC?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- UsageTable 用户邮箱改为可点击链接，点击弹出余额变动记录
- 复用 UserBalanceHistoryModal 组件，通过 getById API 获取完整用户信息
- 新增 hideActions prop 隐藏充值/退款按钮（Usage 页面仅查看）
- i18n: 新增 clickToViewBalance、failedToLoadUser 词条 (en/zh)
---
 .../src/components/admin/usage/UsageTable.vue | 11 +++++++-
 .../admin/user/UserBalanceHistoryModal.vue    |  4 ++-
 frontend/src/i18n/locales/en.ts               |  2 ++
 frontend/src/i18n/locales/zh.ts               |  2 ++
 frontend/src/views/admin/UsageView.vue        | 25 +++++++++++++++++--
 5 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index 14c434d6..59bcb681 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -4,7 +4,15 @@
       <DataTable :columns="columns" :data="data" :loading="loading">
         <template #cell-user="{ row }">
           <div class="text-sm">
-            <span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || '-' }}</span>
+            <button
+              v-if="row.user?.email"
+              class="font-medium text-primary-600 underline decoration-dashed underline-offset-2 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+              @click="$emit('userClick', row.user_id, row.user?.email)"
+              :title="t('admin.usage.clickToViewBalance')"
+            >
+              {{ row.user.email }}
+            </button>
+            <span v-else class="font-medium text-gray-900 dark:text-white">-</span>
             <span class="ml-1 text-gray-500 dark:text-gray-400">#{{ row.user_id }}</span>
           </div>
         </template>
@@ -278,6 +286,7 @@ import Icon from '@/components/icons/Icon.vue'
 import type { AdminUsageLog } from '@/types'
 
 defineProps(['data', 'loading', 'columns'])
+defineEmits(['userClick'])
 const { t } = useI18n()
 
 // Tooltip state - cost
diff --git a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
index e7dfdb7d..1a79e4e3 100644
--- a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
+++ b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
@@ -54,6 +54,7 @@
         />
         <!-- Deposit button - matches menu style -->
         <button
+          v-if="!hideActions"
           @click="emit('deposit')"
           class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
         >
@@ -62,6 +63,7 @@
         </button>
         <!-- Withdraw button - matches menu style -->
         <button
+          v-if="!hideActions"
           @click="emit('withdraw')"
           class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
         >
@@ -176,7 +178,7 @@ import BaseDialog from '@/components/common/BaseDialog.vue'
 import Select from '@/components/common/Select.vue'
 import Icon from '@/components/icons/Icon.vue'
 
-const props = defineProps<{ show: boolean; user: AdminUser | null }>()
+const props = defineProps<{ show: boolean; user: AdminUser | null; hideActions?: boolean }>()
 const emit = defineEmits(['close', 'deposit', 'withdraw'])
 const { t } = useI18n()
 
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 270d68c5..82b857d8 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -2866,6 +2866,8 @@ export default {
       billingTypeBalance: 'Balance',
       billingTypeSubscription: 'Subscription',
       ipAddress: 'IP',
+      clickToViewBalance: 'Click to view balance history',
+      failedToLoadUser: 'Failed to load user info',
       cleanup: {
         button: 'Cleanup',
         title: 'Cleanup Usage Records',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 44fa5fbf..c37f6ef0 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -3034,6 +3034,8 @@ export default {
       billingTypeBalance: '钱包余额',
       billingTypeSubscription: '订阅套餐',
       ipAddress: 'IP',
+      clickToViewBalance: '点击查看充值记录',
+      failedToLoadUser: '加载用户信息失败',
       cleanup: {
         button: '清理',
         title: '清理使用记录',
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index 9c39068a..82ce84ee 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -54,7 +54,7 @@
           </div>
         </template>
       </UsageFilters>
-      <UsageTable :data="usageLogs" :loading="loading" :columns="visibleColumns" />
+      <UsageTable :data="usageLogs" :loading="loading" :columns="visibleColumns" @userClick="handleUserClick" />
       <Pagination v-if="pagination.total > 0" :page="pagination.page" :total="pagination.total" :page-size="pagination.page_size" @update:page="handlePageChange" @update:pageSize="handlePageSizeChange" />
     </div>
   </AppLayout>
@@ -66,6 +66,13 @@
     :end-date="endDate"
     @close="cleanupDialogVisible = false"
   />
+  <!-- Balance history modal triggered from usage table user click -->
+  <UserBalanceHistoryModal
+    :show="showBalanceHistoryModal"
+    :user="balanceHistoryUser"
+    :hide-actions="true"
+    @close="showBalanceHistoryModal = false; balanceHistoryUser = null"
+  />
 </template>
 
 <script setup lang="ts">
@@ -79,9 +86,10 @@ import AppLayout from '@/components/layout/AppLayout.vue'; import Pagination fro
 import UsageStatsCards from '@/components/admin/usage/UsageStatsCards.vue'; import UsageFilters from '@/components/admin/usage/UsageFilters.vue'
 import UsageTable from '@/components/admin/usage/UsageTable.vue'; import UsageExportProgress from '@/components/admin/usage/UsageExportProgress.vue'
 import UsageCleanupDialog from '@/components/admin/usage/UsageCleanupDialog.vue'
+import UserBalanceHistoryModal from '@/components/admin/user/UserBalanceHistoryModal.vue'
 import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'; import GroupDistributionChart from '@/components/charts/GroupDistributionChart.vue'; import TokenUsageTrend from '@/components/charts/TokenUsageTrend.vue'
 import Icon from '@/components/icons/Icon.vue'
-import type { AdminUsageLog, TrendDataPoint, ModelStat, GroupStat } from '@/types'; import type { AdminUsageStatsResponse, AdminUsageQueryParams } from '@/api/admin/usage'
+import type { AdminUsageLog, TrendDataPoint, ModelStat, GroupStat, AdminUser } from '@/types'; import type { AdminUsageStatsResponse, AdminUsageQueryParams } from '@/api/admin/usage'
 
 const { t } = useI18n()
 const appStore = useAppStore()
@@ -91,6 +99,19 @@ let abortController: AbortController | null = null; let exportAbortController: A
 let chartReqSeq = 0
 const exportProgress = reactive({ show: false, progress: 0, current: 0, total: 0, estimatedTime: '' })
 const cleanupDialogVisible = ref(false)
+// Balance history modal state
+const showBalanceHistoryModal = ref(false)
+const balanceHistoryUser = ref<AdminUser | null>(null)
+
+const handleUserClick = async (userId: number) => {
+  try {
+    const user = await adminAPI.users.getById(userId)
+    balanceHistoryUser.value = user
+    showBalanceHistoryModal.value = true
+  } catch {
+    appStore.showError(t('admin.usage.failedToLoadUser'))
+  }
+}
 
 const granularityOptions = computed(() => [{ value: 'day', label: t('admin.dashboard.day') }, { value: 'hour', label: t('admin.dashboard.hour') }])
 // Use local timezone to avoid UTC timezone issues