feat: 优化代理管理页面和代理后台页面

- 添加云端数据权限列到代理管理页面
- 重构代理后台用户管理、卡密管理、财务管理页面使用DataTable组件
- 添加统计卡片到代理后台各页面
- 修复agent-apps相关类型错误
- 添加代理后台页面i18n国际化支持

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/agent/users/components/columns.ts

@@ -0,0 +1,94 @@
+import type { ColumnDef } from '@tanstack/vue-table'
+import type { Composer } from 'vue-i18n'
+
+import { h } from 'vue'
+
+import type { User } from '../data/schema'
+
+import Badge from '@/components/ui/badge/Badge.vue'
+
+export function getColumns(t: Composer['t']): ColumnDef<User>[] {
+  return [
+    {
+      accessorKey: 'username',
+      header: () => t('agent.users.columns.username'),
+      cell: ({ row }) => {
+        const username = row.getValue('username') as string
+        return h('div', { class: 'flex items-center space-x-3' }, [
+          h('div', { class: 'h-8 w-8 rounded bg-primary/10 flex items-center justify-center flex-shrink-0' }, [
+            h('span', { class: 'text-primary font-bold text-sm' }, username.charAt(0).toUpperCase()),
+          ]),
+          h('div', {}, [
+            h('p', { class: 'font-medium' }, username),
+          ]),
+        ])
+      },
+    },
+    {
+      accessorKey: 'email',
+      header: () => t('agent.users.columns.email'),
+      cell: ({ row }) => {
+        const email = row.getValue('email') as string
+        return email || '-'
+      },
+    },
+    {
+      accessorKey: 'status',
+      header: () => t('agent.users.columns.status'),
+      cell: ({ row }) => {
+        const status = row.getValue('status') as string
+        const statusMap: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive' }> = {
+          active: { label: t('agent.users.status.active'), variant: 'default' },
+          disabled: { label: t('agent.users.status.disabled'), variant: 'secondary' },
+          banned: { label: t('agent.users.status.banned'), variant: 'destructive' },
+        }
+        const { label, variant } = statusMap[status] || { label: status || '-', variant: 'secondary' }
+        return h(Badge, { variant }, () => label)
+      },
+    },
+    {
+      accessorKey: 'created_at',
+      header: () => t('agent.users.columns.createdAt'),
+      cell: ({ row }) => {
+        const createdAt = row.getValue('created_at') as string
+        if (!createdAt) return '-'
+        try {
+          const date = new Date(createdAt)
+          if (Number.isNaN(date.getTime())) return '-'
+          return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        }
+        catch {
+          return '-'
+        }
+      },
+    },
+    {
+      accessorKey: 'last_login_at',
+      header: () => t('agent.users.columns.lastLoginAt'),
+      cell: ({ row }) => {
+        const lastLoginAt = row.getValue('last_login_at') as string | null
+        if (!lastLoginAt) return '-'
+        try {
+          const date = new Date(lastLoginAt)
+          if (Number.isNaN(date.getTime())) return '-'
+          return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        }
+        catch {
+          return '-'
+        }
+      },
+    },
+  ]
+}

frontend/src/pages/agent/users/components/data-table-toolbar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Table } from '@tanstack/vue-table'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { Input } from '@/components/ui/input'
+import type { User } from '@/pages/agent/users/data/schema'
+
+const props = defineProps<{
+  table: Table<User>
+  searchFilter?: string
+}>()
+
+const emit = defineEmits<{
+  'update:searchFilter': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const searchModel = computed({
+  get: () => props.searchFilter,
+  set: (value: string) => emit('update:searchFilter', value),
+})
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UiInput
+      v-model="searchModel"
+      :placeholder="t('agent.users.searchPlaceholder')"
+      class="h-8 w-[200px] lg:w-[250px]"
+    />
+  </div>
+</template>

frontend/src/pages/agent/users/components/data-table.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { ColumnDef } from '@tanstack/vue-table'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { DataTableProps } from '@/components/data-table/types'
+import type { User } from '@/pages/agent/users/data/schema'
+
+import DataTable from '@/components/data-table/data-table.vue'
+import { SelectColumn } from '@/components/data-table/table-columns'
+import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
+import DataTableViewOptions from '@/components/data-table/view-options.vue'
+import { getColumns } from '@/pages/agent/users/components/columns'
+import DataTableToolbar from '@/pages/agent/users/components/data-table-toolbar.vue'
+
+const props = defineProps<Omit<DataTableProps<User>, 'columns'> & {
+  searchFilter?: string
+}>()
+
+const emit = defineEmits<{
+  'refresh': []
+  'update:searchFilter': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const columns = computed(() => [
+  SelectColumn as ColumnDef<User>,
+  ...getColumns(t),
+])
+
+const table = generateVueTable<User>({
+  get data() { return props.data },
+  get loading() { return props.loading },
+  columns: columns.value,
+})
+
+const columnLabels: Record<string, string> = {
+  select: 'agent.users.select',
+  username: 'agent.users.columns.username',
+  email: 'agent.users.columns.email',
+  status: 'agent.users.columns.status',
+  created_at: 'agent.users.columns.createdAt',
+  last_login_at: 'agent.users.columns.lastLoginAt',
+}
+
+defineExpose({
+  table,
+})
+</script>
+
+<template>
+  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
+    <template #toolbar>
+      <div class="space-y-3">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="flex flex-wrap items-center gap-2">
+            <DataTableToolbar
+              :table
+              :search-filter="searchFilter"
+              @update:search-filter="emit('update:searchFilter', $event)"
+            />
+            <slot name="filters" />
+          </div>
+          <DataTableViewOptions :table="table" :column-labels="columnLabels" />
+        </div>
+      </div>
+    </template>
+  </DataTable>
+</template>

frontend/src/pages/agent/users/data/schema.ts

@@ -0,0 +1,8 @@
+export interface User {
+  id: number
+  username: string
+  email: string
+  status: string
+  created_at: string
+  last_login_at: string | null
+}

frontend/src/pages/agent/users/index.vue

@@ -1,30 +1,25 @@
 <script setup lang="ts">
-import { Loader2, Search, Users } from 'lucide-vue-next'
+import { Loader2, Users } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { User } from '@/pages/agent/users/data/schema'
+
 import { BasicPage } from '@/components/global-layout'
+import DataTable from '@/pages/agent/users/components/data-table.vue'
 import api from '@/services/api'
 
 const { t } = useI18n()
 
-interface User {
-  id: number
-  username: string
-  email: string
-  status: string
-  created_at: string
-  last_login_at: string | null
-}
-
 const loading = ref(true)
 const users = ref<User[]>([])
-const searchQuery = ref('')
+const tableRef = ref()
+const searchFilter = ref('')
 
 const filteredUsers = computed(() => {
   let result = users.value.filter(u => u)
-  if (searchQuery.value) {
-    const query = searchQuery.value.toLowerCase()
+  if (searchFilter.value) {
+    const query = searchFilter.value.toLowerCase()
     result = result.filter(u =>
       u.username?.toLowerCase().includes(query)
       || u.email?.toLowerCase().includes(query),
@@ -33,7 +28,12 @@ const filteredUsers = computed(() => {
   return result
 })
 
-onMounted(async () => {
+const activeCount = computed(() => users.value.filter(user => user.status === 'active').length)
+const disabledCount = computed(() => users.value.filter(user => user.status === 'disabled').length)
+const bannedCount = computed(() => users.value.filter(user => user.status === 'banned').length)
+
+async function fetchUsers() {
+  loading.value = true
   try {
     const data = await api.get<any>('/agent/users')
     if (Array.isArray(data)) {
@@ -53,89 +53,99 @@ onMounted(async () => {
   finally {
     loading.value = false
   }
+}
+
+onMounted(() => {
+  fetchUsers()
 })
-
-function formatDate(dateStr: string | null) {
-  if (!dateStr) return '-'
-  return dateStr.replace('T', ' ').substring(0, 19)
-}
-
-function getStatusInfo(status: string) {
-  const map: Record<string, { label: string, variant: string }> = {
-    active: { label: '正常', variant: 'default' },
-    disabled: { label: '禁用', variant: 'secondary' },
-    banned: { label: '封禁', variant: 'destructive' },
-  }
-  return map[status] || { label: status || '未知', variant: 'outline' }
-}
 </script>
 
 <template>
   <BasicPage
-    :title="t('nav.users')"
-    description="查看和管理用户信息"
+    :title="t('agent.users.title')"
+    :description="t('agent.users.description')"
     :breadcrumbs="[
-      { title: '控制台', href: '/agent' },
-      { title: '用户管理' },
+      { title: t('nav.dashboard'), href: '/agent' },
+      { title: t('nav.users') },
     ]"
     sticky
   >
-    <template #actions>
-      <div class="relative">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-        <UiInput
-          v-model="searchQuery"
-          placeholder="搜索用户名或邮箱..."
-          class="pl-9 w-[250px]"
-        />
+    <div class="space-y-6">
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.users.totalUsers') }}
+            </UiCardTitle>
+            <Users class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ users.length }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.users.status.active') }}
+            </UiCardTitle>
+            <Users class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ activeCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.users.status.disabled') }}
+            </UiCardTitle>
+            <Users class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ disabledCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.users.status.banned') }}
+            </UiCardTitle>
+            <Users class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ bannedCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
       </div>
-    </template>
 
-    <UiCard>
-      <UiCardContent class="p-0">
-        <div v-if="loading" class="flex items-center justify-center py-12">
-          <Loader2 class="size-8 animate-spin text-muted-foreground" />
-        </div>
-
-        <div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
-          <Users class="size-16 mx-auto mb-4 opacity-30" />
-          <p>暂无用户数据</p>
-        </div>
-
-        <div v-else>
-          <div v-if="filteredUsers.length === 0" class="text-center py-12 text-muted-foreground">
-            <Search class="size-12 mx-auto mb-4 opacity-30" />
-            <p>未找到匹配的用户</p>
+      <UiCard>
+        <UiCardContent class="p-6">
+          <div v-if="loading" class="flex items-center justify-center py-12">
+            <Loader2 class="size-8 animate-spin text-muted-foreground" />
           </div>
 
-          <div v-else class="overflow-x-auto">
-            <table class="w-full text-sm">
-              <thead class="bg-muted/50">
-                <tr>
-                  <th class="text-left p-3 font-medium">用户名</th>
-                  <th class="text-left p-3 font-medium">邮箱</th>
-                  <th class="text-left p-3 font-medium">状态</th>
-                  <th class="text-left p-3 font-medium">注册时间</th>
-                  <th class="text-left p-3 font-medium">最后登录</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="user in filteredUsers" :key="user.id" class="border-t hover:bg-muted/30 transition-colors">
-                  <td class="p-3 font-medium">{{ user.username }}</td>
-                  <td class="p-3 text-muted-foreground">{{ user.email || '-' }}</td>
-                  <td class="p-3">
-                    <UiBadge :variant="getStatusInfo(user.status).variant as any">
-                      {{ getStatusInfo(user.status).label }}
-                    </UiBadge>
-                  </td>
-                  <td class="p-3 text-muted-foreground">{{ formatDate(user.created_at) }}</td>
-                  <td class="p-3 text-muted-foreground">{{ formatDate(user.last_login_at) }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </UiCardContent>
-    </UiCard>
+          <DataTable
+            v-else
+            ref="tableRef"
+            :loading
+            :data="filteredUsers"
+            :search-filter="searchFilter"
+            @refresh="fetchUsers"
+            @update:search-filter="searchFilter = $event"
+          />
+        </UiCardContent>
+      </UiCard>
+    </div>
   </BasicPage>
 </template>