Merge pull request #3869 from Birditch/feat/admin-user-role-and-token-ranking

feat(admin): 用户角色管理 + 用户 Token 排行

frontend/src/api/admin/dashboard.ts

@@ -167,6 +167,8 @@ export interface UserBreakdownParams {
   endpoint?: string
   endpoint_type?: 'inbound' | 'upstream' | 'path'
   limit?: number
+  // Sort column for the ranking (allowlisted server-side; falls back to actual_cost)
+  sort_by?: 'total_tokens' | 'input_tokens' | 'output_tokens' | 'cache_tokens' | 'requests' | 'cost' | 'actual_cost'
   // Additional filter conditions
   user_id?: number
   api_key_id?: number

frontend/src/api/admin/users.ts

@@ -121,6 +121,7 @@ export async function create(userData: {
   password: string
   username?: string
   notes?: string
+  role?: 'admin' | 'user'
   balance?: number
   concurrency?: number
   rpm_limit?: number

frontend/src/components/admin/usage/UserTokenRanking.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="card p-4">
+    <!-- Header -->
+    <div class="mb-3 flex flex-wrap items-center gap-3">
+      <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100">
+        {{ t('admin.usage.tokenRanking.title') }}
+      </h3>
+      <span class="text-xs text-gray-400">{{ t('admin.usage.tokenRanking.subtitle') }}</span>
+      <div class="ml-auto flex flex-wrap items-center gap-2">
+        <input
+          v-model="search"
+          type="text"
+          class="input h-8 w-44 text-sm"
+          :placeholder="t('admin.usage.tokenRanking.searchPlaceholder')"
+        />
+        <div class="w-28">
+          <Select v-model="limit" :options="limitOptions" @change="load" />
+        </div>
+        <button
+          type="button"
+          class="btn btn-secondary h-8 px-2"
+          :title="t('common.refresh')"
+          @click="load"
+        >
+          <Icon name="refresh" size="sm" :class="{ 'animate-spin': loading }" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-gray-100 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-400">
+            <th class="w-10 py-2 pr-2 text-left font-medium">#</th>
+            <th class="py-2 pr-2 text-left font-medium">{{ t('admin.usage.tokenRanking.columns.user') }}</th>
+            <th
+              v-for="col in sortableColumns"
+              :key="col.key"
+              class="cursor-pointer select-none py-2 pl-2 text-right font-medium hover:text-primary-500"
+              :class="{ 'text-primary-600 dark:text-primary-400': sortBy === col.key }"
+              @click="setSort(col.key)"
+            >
+              {{ t(col.label) }}
+              <span v-if="sortBy === col.key" aria-hidden="true">↓</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td :colspan="sortableColumns.length + 2" class="py-8 text-center">
+              <LoadingSpinner />
+            </td>
+          </tr>
+          <tr v-else-if="displayItems.length === 0">
+            <td :colspan="sortableColumns.length + 2" class="py-8 text-center text-sm text-gray-400">
+              {{ t('admin.dashboard.noDataAvailable') }}
+            </td>
+          </tr>
+          <tr
+            v-for="(item, index) in displayItems"
+            v-else
+            :key="item.user_id"
+            class="cursor-pointer border-b border-gray-50 transition-colors hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-dark-700/40"
+            @click="$emit('select-user', item.user_id, item.email)"
+          >
+            <td class="py-2 pr-2 text-gray-400">{{ index + 1 }}</td>
+            <td class="max-w-[220px] truncate py-2 pr-2 text-gray-700 dark:text-gray-200" :title="item.email">
+              {{ item.email || `User #${item.user_id}` }}
+            </td>
+            <td class="py-2 pl-2 text-right text-gray-500 dark:text-gray-400">{{ item.requests.toLocaleString() }}</td>
+            <td class="py-2 pl-2 text-right text-gray-500 dark:text-gray-400">{{ fmtTokens(item.input_tokens) }}</td>
+            <td class="py-2 pl-2 text-right text-gray-500 dark:text-gray-400">{{ fmtTokens(item.output_tokens) }}</td>
+            <td class="py-2 pl-2 text-right text-gray-500 dark:text-gray-400">{{ fmtTokens(item.cache_tokens) }}</td>
+            <td class="py-2 pl-2 text-right font-medium text-gray-800 dark:text-gray-100">{{ fmtTokens(item.total_tokens) }}</td>
+            <td class="py-2 pl-2 text-right text-green-600 dark:text-green-400">${{ fmtCost(item.actual_cost) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer -->
+    <div v-if="!loading && items.length > 0" class="mt-2 text-right text-xs text-gray-400">
+      {{ t('admin.usage.tokenRanking.userCount', { count: displayItems.length }) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getUserBreakdown, type UserBreakdownParams } from '@/api/admin/dashboard'
+import { formatCompactNumber, formatCostFixed } from '@/utils/format'
+import type { UserBreakdownItem } from '@/types'
+import Select from '@/components/common/Select.vue'
+import Icon from '@/components/icons/Icon.vue'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+
+const props = defineProps<{
+  startDate: string
+  endDate: string
+  filters: Record<string, unknown>
+  model?: string
+}>()
+
+defineEmits<{ (e: 'select-user', userId: number, email: string): void }>()
+
+const { t } = useI18n()
+
+type SortKey = NonNullable<UserBreakdownParams['sort_by']>
+const sortableColumns: { key: SortKey; label: string }[] = [
+  { key: 'requests', label: 'admin.usage.tokenRanking.columns.requests' },
+  { key: 'input_tokens', label: 'admin.usage.tokenRanking.columns.inputTokens' },
+  { key: 'output_tokens', label: 'admin.usage.tokenRanking.columns.outputTokens' },
+  { key: 'cache_tokens', label: 'admin.usage.tokenRanking.columns.cacheTokens' },
+  { key: 'total_tokens', label: 'admin.usage.tokenRanking.columns.totalTokens' },
+  { key: 'actual_cost', label: 'admin.usage.tokenRanking.columns.cost' },
+]
+
+const limitOptions = [
+  { value: 20, label: 'Top 20' },
+  { value: 50, label: 'Top 50' },
+  { value: 100, label: 'Top 100' },
+  { value: 200, label: 'Top 200' },
+]
+
+const items = ref<UserBreakdownItem[]>([])
+const loading = ref(false)
+const sortBy = ref<SortKey>('total_tokens')
+const limit = ref(50)
+const search = ref('')
+let reqSeq = 0
+
+const displayItems = computed(() => {
+  const kw = search.value.trim().toLowerCase()
+  if (!kw) return items.value
+  return items.value.filter((u) => (u.email || `user #${u.user_id}`).toLowerCase().includes(kw))
+})
+
+const fmtTokens = (v: number) => formatCompactNumber(v)
+const fmtCost = (v: number) => formatCostFixed(v, 4)
+
+const setSort = (key: SortKey) => {
+  if (sortBy.value === key) return
+  sortBy.value = key
+  load()
+}
+
+const load = async () => {
+  const seq = ++reqSeq
+  loading.value = true
+  try {
+    const params: UserBreakdownParams = {
+      ...props.filters,
+      start_date: props.startDate,
+      end_date: props.endDate,
+      sort_by: sortBy.value,
+      limit: limit.value,
+    }
+    if (props.model) params.model = props.model
+    const res = await getUserBreakdown(params)
+    if (seq !== reqSeq) return
+    items.value = res.users || []
+  } catch {
+    if (seq !== reqSeq) return
+    items.value = []
+  } finally {
+    if (seq === reqSeq) loading.value = false
+  }
+}
+
+// Reload when the shared filters / date range / model change.
+watch(
+  () => [props.startDate, props.endDate, props.model, JSON.stringify(props.filters)],
+  () => load(),
+  { immediate: true }
+)
+
+defineExpose({ reload: load })
+</script>

frontend/src/components/admin/user/UserCreateModal.vue

@@ -25,6 +25,13 @@
         <label class="input-label">{{ t('admin.users.username') }}</label>
         <input v-model="form.username" type="text" class="input" :placeholder="t('admin.users.enterUsername')" />
       </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.form.roleLabel') }}</label>
+        <select v-model="form.role" class="input">
+          <option value="user">{{ t('admin.users.roles.user') }}</option>
+          <option value="admin">{{ t('admin.users.roles.admin') }}</option>
+        </select>
+      </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label class="input-label">{{ t('admin.users.columns.balance') }}</label>
@@ -69,7 +76,7 @@ import Icon from '@/components/icons/Icon.vue'
 const props = defineProps<{ show: boolean }>()
 const emit = defineEmits(['close', 'success']); const { t } = useI18n()
 
-const form = reactive({ email: '', password: '', username: '', notes: '', balance: '', concurrency: 1, rpm_limit: 0 })
+const form = reactive({ email: '', password: '', username: '', notes: '', role: 'user' as 'user' | 'admin', balance: '', concurrency: 1, rpm_limit: 0 })
 
 const { loading, submit } = useForm({
   form,
@@ -86,7 +93,7 @@ const { loading, submit } = useForm({
   successMsg: t('admin.users.userCreated')
 })
 
-watch(() => props.show, (v) => { if(v) Object.assign(form, { email: '', password: '', username: '', notes: '', balance: '', concurrency: 1, rpm_limit: 0 }) })
+watch(() => props.show, (v) => { if(v) Object.assign(form, { email: '', password: '', username: '', notes: '', role: 'user', balance: '', concurrency: 1, rpm_limit: 0 }) })
 
 const generateRandomPassword = () => {
   const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'

frontend/src/components/admin/user/UserEditModal.vue

@@ -29,6 +29,13 @@
         <label class="input-label">{{ t('admin.users.username') }}</label>
         <input v-model="form.username" type="text" class="input" />
       </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.form.roleLabel') }}</label>
+        <select v-model="form.role" class="input">
+          <option value="user">{{ t('admin.users.roles.user') }}</option>
+          <option value="admin">{{ t('admin.users.roles.admin') }}</option>
+        </select>
+      </div>
       <div>
         <label class="input-label">{{ t('admin.users.notes') }}</label>
         <textarea v-model="form.notes" rows="3" class="input"></textarea>
@@ -78,11 +85,11 @@ const emit = defineEmits(['close', 'success'])
 const { t } = useI18n(); const appStore = useAppStore(); const { copyToClipboard } = useClipboard()
 
 const submitting = ref(false); const passwordCopied = ref(false)
-const form = reactive({ email: '', password: '', username: '', notes: '', concurrency: 1, rpm_limit: 0, customAttributes: {} as UserAttributeValuesMap })
+const form = reactive({ email: '', password: '', username: '', notes: '', role: 'user', concurrency: 1, rpm_limit: 0, customAttributes: {} as UserAttributeValuesMap })
 
 watch(() => props.user, (u) => {
   if (u) {
-    Object.assign(form, { email: u.email, password: '', username: u.username || '', notes: u.notes || '', concurrency: u.concurrency, rpm_limit: u.rpm_limit ?? 0, customAttributes: {} })
+    Object.assign(form, { email: u.email, password: '', username: u.username || '', notes: u.notes || '', role: u.role || 'user', concurrency: u.concurrency, rpm_limit: u.rpm_limit ?? 0, customAttributes: {} })
     passwordCopied.value = false
   }
 }, { immediate: true })
@@ -109,7 +116,7 @@ const handleUpdateUser = async () => {
   }
   submitting.value = true
   try {
-    const data: any = { email: form.email, username: form.username, notes: form.notes, concurrency: form.concurrency, rpm_limit: form.rpm_limit }
+    const data: any = { email: form.email, username: form.username, notes: form.notes, role: form.role, concurrency: form.concurrency, rpm_limit: form.rpm_limit }
     if (form.password.trim()) data.password = form.password.trim()
     await adminAPI.users.update(props.user.id, data)
     if (Object.keys(form.customAttributes).length > 0) await adminAPI.userAttributes.updateUserAttributeValues(props.user.id, form.customAttributes)

frontend/src/i18n/locales/en/admin/resources.ts

@@ -483,6 +483,21 @@ export default {
       clickToViewBalance: 'Click to view balance history',
       failedToLoadUser: 'Failed to load user info',
       userDeletedBadge: 'Deleted',
+      tokenRanking: {
+        title: 'User Token Ranking',
+        subtitle: 'Per-user token usage for the current filters and time range; click a row to drill down',
+        searchPlaceholder: 'Search user email...',
+        userCount: '{count} users',
+        columns: {
+          user: 'User',
+          requests: 'Requests',
+          inputTokens: 'Input Tokens',
+          outputTokens: 'Output Tokens',
+          cacheTokens: 'Cache Tokens',
+          totalTokens: 'Total Tokens',
+          cost: 'Cost'
+        }
+      },
       cleanup: {
         button: 'Cleanup',
         title: 'Cleanup Usage Records',

frontend/src/i18n/locales/zh/admin/resources.ts

@@ -544,6 +544,21 @@ export default {
       clickToViewBalance: '点击查看充值记录',
       failedToLoadUser: '加载用户信息失败',
       userDeletedBadge: '已删除',
+      tokenRanking: {
+        title: '用户 Token 排行',
+        subtitle: '按当前筛选与时间范围统计每个用户的 Token 用量，点击行可下钻到该用户',
+        searchPlaceholder: '搜索用户邮箱...',
+        userCount: '共 {count} 位用户',
+        columns: {
+          user: '用户',
+          requests: '请求数',
+          inputTokens: '输入 Token',
+          outputTokens: '输出 Token',
+          cacheTokens: '缓存 Token',
+          totalTokens: '总 Token',
+          cost: '费用'
+        }
+      },
       cleanup: {
         button: '清理',
         title: '清理使用记录',

frontend/src/types/index.ts

@@ -1594,6 +1594,9 @@ export interface UserBreakdownItem {
   user_id: number
   email: string
   requests: number
+  input_tokens: number
+  output_tokens: number
+  cache_tokens: number
   total_tokens: number
   cost: number
   actual_cost: number

frontend/src/views/admin/UsageView.vue

@@ -109,6 +109,14 @@
         </button>
       </div>
       <div v-show="activeTab === 'usage'">
+        <UserTokenRanking
+          class="mb-4"
+          :start-date="startDate"
+          :end-date="endDate"
+          :filters="breakdownFilters"
+          :model="filters.model"
+          @select-user="handleRankingSelectUser"
+        />
         <UsageTable
           :data="usageLogs"
           :loading="loading"
@@ -167,6 +175,7 @@ import { resolveUsageRequestType, requestTypeToLegacyStream } from '@/utils/usag
 import AppLayout from '@/components/layout/AppLayout.vue'; import Pagination from '@/components/common/Pagination.vue'; import Select from '@/components/common/Select.vue'; import DateRangePicker from '@/components/common/DateRangePicker.vue'
 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 UserTokenRanking from '@/components/admin/usage/UserTokenRanking.vue'
 import UsageCleanupDialog from '@/components/admin/usage/UsageCleanupDialog.vue'
 import UserBalanceHistoryModal from '@/components/admin/user/UserBalanceHistoryModal.vue'
 import OpsErrorLogTable from '@/views/admin/ops/components/OpsErrorLogTable.vue'
@@ -235,6 +244,12 @@ const handleUserClick = async (userId: number) => {
   }
 }
 
+// Drill down from the per-user token ranking: scope the whole usage view to that user.
+const handleRankingSelectUser = (userId: number) => {
+  filters.value = { ...filters.value, user_id: userId }
+  applyFilters()
+}
+
 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
 const formatLD = (d: Date) => {

frontend/src/views/admin/__tests__/UsageView.spec.ts

@@ -163,7 +163,7 @@ describe('admin UsageView distribution metric toggles', () => {
         UserBalanceHistoryModal: true, AuditLogModal: true, Pagination: true, Select: true,
         DateRangePicker: true, Icon: true, TokenUsageTrend: true,
         ModelDistributionChart: ModelDistributionChartStub, GroupDistributionChart: GroupDistributionChartStub,
-        EndpointDistributionChart: true,
+        EndpointDistributionChart: true, UserTokenRanking: true,
       } },
     })
     vi.advanceTimersByTime(120)
@@ -201,6 +201,7 @@ describe('admin UsageView distribution metric toggles', () => {
           TokenUsageTrend: true,
           ModelDistributionChart: ModelDistributionChartStub,
           GroupDistributionChart: GroupDistributionChartStub,
+          UserTokenRanking: true,
         },
       },
     })
@@ -281,6 +282,7 @@ describe('admin UsageView handleUserClick', () => {
           ModelDistributionChart: true,
           GroupDistributionChart: true,
           EndpointDistributionChart: true,
+          UserTokenRanking: true,
         },
       },
     })
@@ -326,7 +328,7 @@ describe('admin UsageView errors tab filter forwarding', () => {
         UserBalanceHistoryModal: true, AuditLogModal: true, Pagination: true, Select: true,
         DateRangePicker: true, Icon: true, TokenUsageTrend: true,
         ModelDistributionChart: true, GroupDistributionChart: true, EndpointDistributionChart: true,
-        OpsErrorLogTable: true, OpsErrorDetailModal: true,
+        UserTokenRanking: true, OpsErrorLogTable: true, OpsErrorDetailModal: true,
       } },
     })
     vi.advanceTimersByTime(120)