From 914e3d5127df42f746109646174fa56f24f4a0e5 Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Sat, 9 May 2026 21:00:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=90=86?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=92=8C=E4=BB=A3=E7=90=86?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/pages/admin/agent-apps/create.vue     |   6 +-
 .../src/pages/admin/agent-apps/data/schema.ts |   2 +-
 frontend/src/pages/admin/agent-apps/index.vue |   2 +-
 .../pages/admin/agents/components/columns.ts  |  14 +-
 .../src/pages/admin/agents/data/schema.ts     |   1 +
 .../pages/agent/cards/components/columns.ts   |  84 ++++++
 .../cards/components/data-table-toolbar.vue   |  35 +++
 .../agent/cards/components/data-table.vue     |  88 +++++++
 frontend/src/pages/agent/cards/data/schema.ts |   9 +
 frontend/src/pages/agent/cards/index.vue      | 240 ++++++++++--------
 .../pages/agent/finance/components/columns.ts |  86 +++++++
 .../finance/components/data-table-toolbar.vue |  46 ++++
 .../agent/finance/components/data-table.vue   |  71 ++++++
 .../src/pages/agent/finance/data/schema.ts    |   8 +
 frontend/src/pages/agent/finance/index.vue    | 194 ++++++--------
 .../pages/agent/users/components/columns.ts   |  94 +++++++
 .../users/components/data-table-toolbar.vue   |  35 +++
 .../agent/users/components/data-table.vue     |  71 ++++++
 frontend/src/pages/agent/users/data/schema.ts |   8 +
 frontend/src/pages/agent/users/index.vue      | 180 ++++++-------
 frontend/src/plugins/i18n/en.json             |  61 ++++-
 frontend/src/plugins/i18n/zh.json             |  61 ++++-
 22 files changed, 1089 insertions(+), 307 deletions(-)
 create mode 100644 frontend/src/pages/agent/cards/components/columns.ts
 create mode 100644 frontend/src/pages/agent/cards/components/data-table-toolbar.vue
 create mode 100644 frontend/src/pages/agent/cards/components/data-table.vue
 create mode 100644 frontend/src/pages/agent/cards/data/schema.ts
 create mode 100644 frontend/src/pages/agent/finance/components/columns.ts
 create mode 100644 frontend/src/pages/agent/finance/components/data-table-toolbar.vue
 create mode 100644 frontend/src/pages/agent/finance/components/data-table.vue
 create mode 100644 frontend/src/pages/agent/finance/data/schema.ts
 create mode 100644 frontend/src/pages/agent/users/components/columns.ts
 create mode 100644 frontend/src/pages/agent/users/components/data-table-toolbar.vue
 create mode 100644 frontend/src/pages/agent/users/components/data-table.vue
 create mode 100644 frontend/src/pages/agent/users/data/schema.ts

diff --git a/frontend/src/pages/admin/agent-apps/create.vue b/frontend/src/pages/admin/agent-apps/create.vue
index 625bb6f..3cba71d 100644
--- a/frontend/src/pages/admin/agent-apps/create.vue
+++ b/frontend/src/pages/admin/agent-apps/create.vue
@@ -108,6 +108,10 @@ async function fetchCardTypes(appId: string) {
   }
 }
 
+function handleAppChange(value: string | number | bigint | Record<string, any> | null | undefined) {
+  fetchCardTypes(String(value || ''))
+}
+
 watch(selectedCardType, (ct) => {
   if (ct) {
     formData.value.price = ct.price
@@ -201,7 +205,7 @@ onMounted(() => {
 
               <div class="space-y-2">
                 <UiLabel>{{ t('admin.agentApps.createForm.selectApp') }} <span class="text-destructive">*</span></UiLabel>
-                <UiSelect v-model="formData.application_id" :disabled="saving || loading" @update:model-value="fetchCardTypes($event)">
+                <UiSelect v-model="formData.application_id" :disabled="saving || loading" @update:model-value="handleAppChange">
                   <UiSelectTrigger>
                     <UiSelectValue :placeholder="t('admin.agentApps.createForm.selectAppPlaceholder')" />
                   </UiSelectTrigger>
diff --git a/frontend/src/pages/admin/agent-apps/data/schema.ts b/frontend/src/pages/admin/agent-apps/data/schema.ts
index f4f142a..0f281b3 100644
--- a/frontend/src/pages/admin/agent-apps/data/schema.ts
+++ b/frontend/src/pages/admin/agent-apps/data/schema.ts
@@ -7,7 +7,7 @@ export interface AgentApp {
   status: string
   discount: number
   balance: number
-  card_types: { card_type_id: number, can_generate: boolean, name?: string }[]
+  card_types: { card_type_id: number, can_generate: boolean, name?: string, price?: number }[]
   created_at?: string
   updated_at?: string
   remark?: string
diff --git a/frontend/src/pages/admin/agent-apps/index.vue b/frontend/src/pages/admin/agent-apps/index.vue
index d623cfb..d94e97f 100644
--- a/frontend/src/pages/admin/agent-apps/index.vue
+++ b/frontend/src/pages/admin/agent-apps/index.vue
@@ -34,7 +34,7 @@ async function fetchAgentApps() {
   loading.value = true
   try {
     const data = await api.get<{ agent_apps?: AgentApp[] }>('/dev/agent-apps')
-    agentApps.value = data?.agent_apps || data || []
+    agentApps.value = Array.isArray(data) ? data : (data?.agent_apps || [])
   }
   catch {
     agentApps.value = []
diff --git a/frontend/src/pages/admin/agents/components/columns.ts b/frontend/src/pages/admin/agents/components/columns.ts
index 436c260..032ecbd 100644
--- a/frontend/src/pages/admin/agents/components/columns.ts
+++ b/frontend/src/pages/admin/agents/components/columns.ts
@@ -68,7 +68,19 @@ export function getColumns(actions: {
       cell: ({ row }) => {
         const canCreate = row.getValue('can_create_agent') as boolean
         return h('div', { class: 'flex items-center justify-center' }, [
-          canCreate 
+          canCreate
+            ? h(Check, { class: 'h-4 w-4 text-green-500' })
+            : h(X, { class: 'h-4 w-4 text-red-500' }),
+        ])
+      },
+    },
+    {
+      accessorKey: 'can_view_cloud_data',
+      header: () => t('admin.agents.columns.canViewCloudData'),
+      cell: ({ row }) => {
+        const canView = row.getValue('can_view_cloud_data') as boolean
+        return h('div', { class: 'flex items-center justify-center' }, [
+          canView
             ? h(Check, { class: 'h-4 w-4 text-green-500' })
             : h(X, { class: 'h-4 w-4 text-red-500' }),
         ])
diff --git a/frontend/src/pages/admin/agents/data/schema.ts b/frontend/src/pages/admin/agents/data/schema.ts
index 82c40ca..801c7b3 100644
--- a/frontend/src/pages/admin/agents/data/schema.ts
+++ b/frontend/src/pages/admin/agents/data/schema.ts
@@ -12,6 +12,7 @@ export interface Agent {
   balance: number
   total_consumption: number
   can_create_agent: boolean
+  can_view_cloud_data: boolean
   cards_count: number
   child_agents_count: number
   children?: Agent[]
diff --git a/frontend/src/pages/agent/cards/components/columns.ts b/frontend/src/pages/agent/cards/components/columns.ts
new file mode 100644
index 0000000..e2e2ad7
--- /dev/null
+++ b/frontend/src/pages/agent/cards/components/columns.ts
@@ -0,0 +1,84 @@
+import type { ColumnDef } from '@tanstack/vue-table'
+import type { Composer } from 'vue-i18n'
+
+import { h } from 'vue'
+
+import type { Card } from '../data/schema'
+
+import Badge from '@/components/ui/badge/Badge.vue'
+
+export function getColumns(t: Composer['t']): ColumnDef<Card>[] {
+  return [
+    {
+      accessorKey: 'code',
+      header: () => t('agent.cards.columns.code'),
+      cell: ({ row }) => {
+        const code = row.getValue('code') as string
+        return h('span', { class: 'font-mono text-sm' }, code)
+      },
+    },
+    {
+      accessorKey: 'app_name',
+      header: () => t('agent.cards.columns.appName'),
+      cell: ({ row }) => {
+        const appName = row.getValue('app_name') as string
+        return h(Badge, { variant: 'secondary' }, () => appName)
+      },
+    },
+    {
+      accessorKey: 'card_type_name',
+      header: () => t('agent.cards.columns.cardTypeName'),
+      cell: ({ row }) => {
+        const cardTypeName = row.getValue('card_type_name') as string
+        return h('span', { class: 'font-medium' }, cardTypeName)
+      },
+    },
+    {
+      accessorKey: 'status',
+      header: () => t('agent.cards.columns.status'),
+      cell: ({ row }) => {
+        const status = row.getValue('status') as string
+        const statusMap: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive' }> = {
+          unused: { label: t('agent.cards.status.unused'), variant: 'default' },
+          used: { label: t('agent.cards.status.used'), variant: 'secondary' },
+          expired: { label: t('agent.cards.status.expired'), variant: 'destructive' },
+          disabled: { label: t('agent.cards.status.disabled'), variant: 'secondary' },
+        }
+        const { label, variant } = statusMap[status] || { label: status || '-', variant: 'secondary' }
+        return h(Badge, { variant }, () => label)
+      },
+    },
+    {
+      accessorKey: 'created_at',
+      header: () => t('agent.cards.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.toLocaleDateString('zh-CN')
+        }
+        catch {
+          return '-'
+        }
+      },
+    },
+    {
+      accessorKey: 'used_at',
+      header: () => t('agent.cards.columns.usedAt'),
+      cell: ({ row }) => {
+        const usedAt = row.getValue('used_at') as string | null
+        if (!usedAt) return '-'
+        try {
+          const date = new Date(usedAt)
+          if (Number.isNaN(date.getTime())) return '-'
+          return date.toLocaleDateString('zh-CN')
+        }
+        catch {
+          return '-'
+        }
+      },
+    },
+  ]
+}
diff --git a/frontend/src/pages/agent/cards/components/data-table-toolbar.vue b/frontend/src/pages/agent/cards/components/data-table-toolbar.vue
new file mode 100644
index 0000000..80478ec
--- /dev/null
+++ b/frontend/src/pages/agent/cards/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 { Card } from '@/pages/agent/cards/data/schema'
+
+const props = defineProps<{
+  table: Table<Card>
+  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.cards.searchPlaceholder')"
+      class="h-8 w-[200px] lg:w-[250px]"
+    />
+  </div>
+</template>
diff --git a/frontend/src/pages/agent/cards/components/data-table.vue b/frontend/src/pages/agent/cards/components/data-table.vue
new file mode 100644
index 0000000..bc9d4a4
--- /dev/null
+++ b/frontend/src/pages/agent/cards/components/data-table.vue
@@ -0,0 +1,88 @@
+<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 { Card } from '@/pages/agent/cards/data/schema'
+
+import BulkActions from '@/components/data-table/bulk-actions.vue'
+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/cards/components/columns'
+import DataTableToolbar from '@/pages/agent/cards/components/data-table-toolbar.vue'
+
+const props = defineProps<Omit<DataTableProps<Card>, 'columns'> & {
+  searchFilter?: string
+}>()
+
+const emit = defineEmits<{
+  'refresh': []
+  'batchExport': []
+  'export': []
+  'update:searchFilter': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const columns = computed(() => [
+  SelectColumn as ColumnDef<Card>,
+  ...getColumns(t),
+])
+
+const table = generateVueTable<Card>({
+  get data() { return props.data },
+  get loading() { return props.loading },
+  columns: columns.value,
+})
+
+const columnLabels: Record<string, string> = {
+  select: 'agent.cards.select',
+  code: 'agent.cards.columns.code',
+  app_name: 'agent.cards.columns.appName',
+  card_type_name: 'agent.cards.columns.cardTypeName',
+  status: 'agent.cards.columns.status',
+  created_at: 'agent.cards.columns.createdAt',
+  used_at: 'agent.cards.columns.usedAt',
+}
+
+defineExpose({
+  table,
+})
+</script>
+
+<template>
+  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
+    <template #toolbar>
+      <div class="space-y-3">
+        <div class="flex items-center justify-end">
+          <slot name="actions" />
+        </div>
+        <BulkActions :table="table" entity-name="cards">
+          <UiButton variant="outline" size="sm" @click="emit('batchExport')">
+            {{ t('agent.cards.batchExportBtn') }}
+          </UiButton>
+        </BulkActions>
+        <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>
+          <div class="flex items-center gap-2">
+            <UiButton variant="outline" size="sm" @click="emit('export')">
+              {{ t('agent.cards.exportBtn') }}
+            </UiButton>
+            <DataTableViewOptions :table="table" :column-labels="columnLabels" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </DataTable>
+</template>
diff --git a/frontend/src/pages/agent/cards/data/schema.ts b/frontend/src/pages/agent/cards/data/schema.ts
new file mode 100644
index 0000000..a2f9dba
--- /dev/null
+++ b/frontend/src/pages/agent/cards/data/schema.ts
@@ -0,0 +1,9 @@
+export interface Card {
+  id: number
+  code: string
+  app_name: string
+  card_type_name: string
+  status: string
+  created_at: string
+  used_at: string | null
+}
diff --git a/frontend/src/pages/agent/cards/index.vue b/frontend/src/pages/agent/cards/index.vue
index 7b4e43e..4a21dbb 100644
--- a/frontend/src/pages/agent/cards/index.vue
+++ b/frontend/src/pages/agent/cards/index.vue
@@ -1,27 +1,43 @@
 <script setup lang="ts">
 import { Key, Loader2, Plus } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import type { Card } from '@/pages/agent/cards/data/schema'
 
 import { BasicPage } from '@/components/global-layout'
-import api from '@/services/api'
+import DataTable from '@/pages/agent/cards/components/data-table.vue'
+import api, { BASE_URL } from '@/services/api'
 
 const { t } = useI18n()
-
-interface Card {
-  id: number
-  code: string
-  app_name: string
-  card_type_name: string
-  status: string
-  created_at: string
-  used_at: string | null
-}
+const router = useRouter()
 
 const loading = ref(true)
 const cards = ref<Card[]>([])
+const tableRef = ref()
+const searchFilter = ref('')
 
-onMounted(async () => {
+const filteredCards = computed(() => {
+  let result = cards.value.filter(c => c)
+  if (searchFilter.value) {
+    const query = searchFilter.value.toLowerCase()
+    result = result.filter(c =>
+      c.code?.toLowerCase().includes(query)
+      || c.app_name?.toLowerCase().includes(query)
+      || c.card_type_name?.toLowerCase().includes(query),
+    )
+  }
+  return result
+})
+
+const unusedCount = computed(() => cards.value.filter(card => card.status === 'unused').length)
+const usedCount = computed(() => cards.value.filter(card => card.status === 'used').length)
+const expiredCount = computed(() => cards.value.filter(card => card.status === 'expired').length)
+const disabledCount = computed(() => cards.value.filter(card => card.status === 'disabled').length)
+
+async function fetchCards() {
+  loading.value = true
   try {
     const data = await api.get<any>('/agent/cards')
     if (Array.isArray(data)) {
@@ -41,111 +57,127 @@ onMounted(async () => {
   finally {
     loading.value = false
   }
+}
+
+function goToCreate() {
+  router.push('/agent/cards/create')
+}
+
+function handleExport() {
+  const token = localStorage.getItem('token')
+  const url = `${BASE_URL}/agent/cards/export?token=${token}`
+  window.open(url, '_blank')
+}
+
+function handleBatchExport(ids: (string | number)[]) {
+  if (!ids.length) return
+  const token = localStorage.getItem('token')
+  const params = new URLSearchParams()
+  params.append('ids', ids.join(','))
+  const url = `${BASE_URL}/agent/cards/export?${params.toString()}&token=${token}`
+  window.open(url, '_blank')
+}
+
+onMounted(() => {
+  fetchCards()
 })
-
-function formatDate(dateStr: string | null) {
-  if (!dateStr)
-    return '-'
-  return new Date(dateStr).toLocaleDateString()
-}
-
-function getStatusBadge(status: string) {
-  const map: Record<string, { label: string, class: string }> = {
-    unused: { label: t('agent.cards.unused'), class: 'bg-green-500/10 text-green-500' },
-    used: { label: t('agent.cards.used'), class: 'bg-blue-500/10 text-blue-500' },
-    expired: { label: t('agent.cards.expired'), class: 'bg-red-500/10 text-red-500' },
-    disabled: { label: t('agent.cards.disabled'), class: 'bg-gray-500/10 text-gray-500' },
-  }
-  return map[status] || { label: status, class: '' }
-}
 </script>
 
 <template>
   <BasicPage
-    :title="t('nav.cards')"
-    description="管理生成的卡密"
+    :title="t('agent.cards.title')"
+    :description="t('agent.cards.description')"
     :breadcrumbs="[
-      { title: '控制台', href: '/agent' },
-      { title: '卡密管理' },
+      { title: t('nav.dashboard'), href: '/agent' },
+      { title: t('nav.cards') },
     ]"
     sticky
   >
     <template #actions>
-      <UiButton as-child>
-        <router-link to="/agent/cards/create">
-          <Plus class="mr-2 h-4 w-4" />
-          生成卡密
-        </router-link>
+      <UiButton @click="goToCreate">
+        <Plus class="mr-2 h-4 w-4" />
+        {{ t('agent.cards.generateCard') }}
       </UiButton>
     </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 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.cards.totalCards') }}
+            </UiCardTitle>
+            <Key class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ cards.length }}
+            </div>
+          </UiCardContent>
+        </UiCard>
 
-        <div v-else-if="cards.length === 0" class="text-center py-12 text-muted-foreground">
-          <Key class="size-16 mx-auto mb-4 opacity-30" />
-          <p>暂无卡密</p>
-          <UiButton class="mt-4" as-child>
-            <router-link to="/agent/cards/create">
-              生成卡密
-            </router-link>
-          </UiButton>
-        </div>
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.cards.unused') }}
+            </UiCardTitle>
+            <Key class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ unusedCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
 
-        <div v-else class="overflow-x-auto">
-          <table class="w-full">
-            <thead class="bg-muted/50">
-              <tr>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  卡号
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  应用
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  卡类
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  状态
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  创建时间
-                </th>
-                <th class="px-4 py-3 text-left text-sm font-medium">
-                  使用时间
-                </th>
-              </tr>
-            </thead>
-            <tbody class="divide-y">
-              <tr v-for="card in cards.filter(c => c)" :key="card.id" class="hover:bg-muted/30">
-                <td class="px-4 py-3 font-mono text-sm">
-                  {{ card.code }}
-                </td>
-                <td class="px-4 py-3 text-sm">
-                  {{ card.app_name }}
-                </td>
-                <td class="px-4 py-3 text-sm">
-                  {{ card.card_type_name }}
-                </td>
-                <td class="px-4 py-3">
-                  <UiBadge :class="getStatusBadge(card.status).class" variant="outline">
-                    {{ getStatusBadge(card.status).label }}
-                  </UiBadge>
-                </td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">
-                  {{ formatDate(card.created_at) }}
-                </td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">
-                  {{ formatDate(card.used_at) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </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.cards.used') }}
+            </UiCardTitle>
+            <Key class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ usedCount }}
+            </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.cards.expired') }}
+            </UiCardTitle>
+            <Key class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ expiredCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+      </div>
+
+      <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>
+
+          <DataTable
+            v-else
+            ref="tableRef"
+            :loading
+            :data="filteredCards"
+            :search-filter="searchFilter"
+            @refresh="fetchCards"
+            @batch-export="handleBatchExport(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
+            @export="handleExport"
+            @update:search-filter="searchFilter = $event"
+          />
+        </UiCardContent>
+      </UiCard>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/agent/finance/components/columns.ts b/frontend/src/pages/agent/finance/components/columns.ts
new file mode 100644
index 0000000..33728de
--- /dev/null
+++ b/frontend/src/pages/agent/finance/components/columns.ts
@@ -0,0 +1,86 @@
+import type { ColumnDef } from '@tanstack/vue-table'
+import type { Composer } from 'vue-i18n'
+
+import { ArrowDownLeft, ArrowUpRight, RotateCcw } from 'lucide-vue-next'
+import { h } from 'vue'
+
+import type { Transaction } from '../data/schema'
+
+import Badge from '@/components/ui/badge/Badge.vue'
+
+export function getColumns(t: Composer['t']): ColumnDef<Transaction>[] {
+  return [
+    {
+      accessorKey: 'type',
+      header: () => t('agent.finance.columns.type'),
+      cell: ({ row }) => {
+        const type = row.getValue('type') as string
+        const typeMap: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive', icon: any }> = {
+          recharge: { label: t('agent.finance.types.recharge'), variant: 'default', icon: ArrowDownLeft },
+          consume: { label: t('agent.finance.types.consume'), variant: 'secondary', icon: ArrowUpRight },
+          refund: { label: t('agent.finance.types.refund'), variant: 'default', icon: RotateCcw },
+        }
+        const config = typeMap[type] || { label: type, variant: 'secondary', icon: ArrowUpRight }
+        const iconClass = type === 'recharge' ? 'text-green-500' : type === 'refund' ? 'text-blue-500' : 'text-red-500'
+        const bgClass = type === 'recharge' ? 'bg-green-500/10' : type === 'refund' ? 'bg-blue-500/10' : 'bg-red-500/10'
+
+        return h('div', { class: 'flex items-center gap-2' }, [
+          h('div', { class: `size-8 rounded-lg flex items-center justify-center ${bgClass}` }, [
+            h(config.icon, { class: `size-4 ${iconClass}` }),
+          ]),
+          h('span', config.label),
+        ])
+      },
+    },
+    {
+      accessorKey: 'description',
+      header: () => t('agent.finance.columns.description'),
+      cell: ({ row }) => {
+        const description = row.getValue('description') as string
+        const type = row.getValue('type') as string
+        return h('span', { class: 'text-muted-foreground' }, description || t(`agent.finance.types.${type}`) || '-')
+      },
+    },
+    {
+      accessorKey: 'amount',
+      header: () => t('agent.finance.columns.amount'),
+      cell: ({ row }) => {
+        const type = row.getValue('type') as string
+        const amount = row.getValue('amount') as number
+        const prefix = type === 'recharge' || type === 'refund' ? '+' : '-'
+        const textClass = type === 'recharge' || type === 'refund' ? 'text-green-500' : 'text-red-500'
+        return h('span', { class: `font-semibold ${textClass}` }, `${prefix}¥${(amount || 0).toFixed(2)}`)
+      },
+    },
+    {
+      accessorKey: 'balance',
+      header: () => t('agent.finance.columns.balance'),
+      cell: ({ row }) => {
+        const balance = row.getValue('balance') as number
+        return h('span', { class: 'text-muted-foreground' }, `¥${(balance || 0).toFixed(2)}`)
+      },
+    },
+    {
+      accessorKey: 'created_at',
+      header: () => t('agent.finance.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 h('span', { class: 'text-muted-foreground whitespace-nowrap' }, date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+          }))
+        }
+        catch {
+          return '-'
+        }
+      },
+    },
+  ]
+}
diff --git a/frontend/src/pages/agent/finance/components/data-table-toolbar.vue b/frontend/src/pages/agent/finance/components/data-table-toolbar.vue
new file mode 100644
index 0000000..09b2985
--- /dev/null
+++ b/frontend/src/pages/agent/finance/components/data-table-toolbar.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Table } from '@tanstack/vue-table'
+
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { Transaction } from '@/pages/agent/finance/data/schema'
+
+const props = defineProps<{
+  table: Table<Transaction>
+  typeFilter?: string
+}>()
+
+const emit = defineEmits<{
+  'update:typeFilter': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const typeModel = computed({
+  get: () => props.typeFilter,
+  set: (value: string) => emit('update:typeFilter', value),
+})
+
+const typeOptions = computed(() => [
+  { label: t('agent.finance.allTypes'), value: '' },
+  { label: t('agent.finance.types.recharge'), value: 'recharge' },
+  { label: t('agent.finance.types.consume'), value: 'consume' },
+  { label: t('agent.finance.types.refund'), value: 'refund' },
+])
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UiSelect v-model="typeModel" class="w-[120px]">
+      <UiSelectTrigger>
+        <UiSelectValue :placeholder="t('agent.finance.selectType')" />
+      </UiSelectTrigger>
+      <UiSelectContent>
+        <UiSelectItem v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </UiSelectItem>
+      </UiSelectContent>
+    </UiSelect>
+  </div>
+</template>
diff --git a/frontend/src/pages/agent/finance/components/data-table.vue b/frontend/src/pages/agent/finance/components/data-table.vue
new file mode 100644
index 0000000..1f8dcc7
--- /dev/null
+++ b/frontend/src/pages/agent/finance/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 { Transaction } from '@/pages/agent/finance/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/finance/components/columns'
+import DataTableToolbar from '@/pages/agent/finance/components/data-table-toolbar.vue'
+
+const props = defineProps<Omit<DataTableProps<Transaction>, 'columns'> & {
+  typeFilter?: string
+}>()
+
+const emit = defineEmits<{
+  'refresh': []
+  'update:typeFilter': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const columns = computed(() => [
+  SelectColumn as ColumnDef<Transaction>,
+  ...getColumns(t),
+])
+
+const table = generateVueTable<Transaction>({
+  get data() { return props.data },
+  get loading() { return props.loading },
+  columns: columns.value,
+})
+
+const columnLabels: Record<string, string> = {
+  select: 'agent.finance.select',
+  type: 'agent.finance.columns.type',
+  description: 'agent.finance.columns.description',
+  amount: 'agent.finance.columns.amount',
+  balance: 'agent.finance.columns.balance',
+  created_at: 'agent.finance.columns.createdAt',
+}
+
+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
+              :type-filter="typeFilter"
+              @update:typeFilter="emit('update:typeFilter', $event)"
+            />
+            <slot name="filters" />
+          </div>
+          <DataTableViewOptions :table="table" :column-labels="columnLabels" />
+        </div>
+      </div>
+    </template>
+  </DataTable>
+</template>
diff --git a/frontend/src/pages/agent/finance/data/schema.ts b/frontend/src/pages/agent/finance/data/schema.ts
new file mode 100644
index 0000000..79d722c
--- /dev/null
+++ b/frontend/src/pages/agent/finance/data/schema.ts
@@ -0,0 +1,8 @@
+export interface Transaction {
+  id: number
+  type: string
+  amount: number
+  description: string
+  balance: number
+  created_at: string
+}
diff --git a/frontend/src/pages/agent/finance/index.vue b/frontend/src/pages/agent/finance/index.vue
index cac1004..54fdb20 100644
--- a/frontend/src/pages/agent/finance/index.vue
+++ b/frontend/src/pages/agent/finance/index.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
-import { ArrowDownLeft, ArrowUpRight, CreditCard, Loader2, Receipt, RotateCcw, TrendingDown, TrendingUp, Wallet } from 'lucide-vue-next'
+import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw, TrendingDown, TrendingUp, Wallet } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { Transaction } from '@/pages/agent/finance/data/schema'
+
 import { BasicPage } from '@/components/global-layout'
+import DataTable from '@/pages/agent/finance/components/data-table.vue'
 import api from '@/services/api'
 
 const { t } = useI18n()
 
-interface Transaction {
-  id: number
-  type: string
-  amount: number
-  description: string
-  balance: number
-  created_at: string
-}
-
 const loading = ref(true)
 const balance = ref(0)
 const transactions = ref<Transaction[]>([])
+const tableRef = ref()
+const typeFilter = ref('')
+
+const filteredTransactions = computed(() => {
+  let result = transactions.value.filter(tx => tx)
+  if (typeFilter.value) {
+    result = result.filter(tx => tx.type === typeFilter.value)
+  }
+  return result
+})
 
 const totalRecharge = computed(() => {
   return transactions.value
@@ -33,6 +37,9 @@ const totalConsume = computed(() => {
     .reduce((sum, tx) => sum + (tx.amount || 0), 0)
 })
 
+const rechargeCount = computed(() => transactions.value.filter(tx => tx.type === 'recharge' || tx.type === 'refund').length)
+const consumeCount = computed(() => transactions.value.filter(tx => tx.type === 'consume').length)
+
 onMounted(async () => {
   try {
     const data = await api.get<any>('/agent/finance')
@@ -55,80 +62,87 @@ onMounted(async () => {
     loading.value = false
   }
 })
-
-function formatDate(dateStr: string) {
-  if (!dateStr) return '-'
-  return dateStr.replace('T', ' ').substring(0, 19)
-}
-
-function getTypeLabel(type: string) {
-  const map: Record<string, string> = {
-    recharge: '充值',
-    consume: '消费',
-    refund: '退款',
-  }
-  return map[type] || type
-}
-
-function getTypeClass(type: string) {
-  const map: Record<string, string> = {
-    recharge: 'text-green-500',
-    consume: 'text-red-500',
-    refund: 'text-blue-500',
-  }
-  return map[type] || ''
-}
-
-function getTypeIcon(type: string) {
-  if (type === 'recharge') return ArrowDownLeft
-  if (type === 'refund') return RotateCcw
-  return ArrowUpRight
-}
-
-function getTypeBgClass(type: string) {
-  if (type === 'recharge') return 'bg-green-500/10'
-  if (type === 'refund') return 'bg-blue-500/10'
-  return 'bg-red-500/10'
-}
 </script>
 
 <template>
   <BasicPage
-    :title="t('nav.finance')"
-    description="查看财务信息和交易记录"
+    :title="t('agent.finance.title')"
+    :description="t('agent.finance.description')"
     :breadcrumbs="[
-      { title: '控制台', href: '/agent' },
-      { title: '财务管理' },
+      { title: t('nav.dashboard'), href: '/agent' },
+      { title: t('nav.finance') },
     ]"
     sticky
   >
     <div class="space-y-6">
-      <div class="grid gap-4 md:grid-cols-3">
+      <div class="grid gap-4 md:grid-cols-3 lg:grid-cols-5">
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <UiCardTitle class="text-sm font-medium">账户余额</UiCardTitle>
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.finance.balance') }}
+            </UiCardTitle>
             <Wallet class="size-4 text-muted-foreground" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold">¥{{ balance.toFixed(2) }}</div>
+            <div class="text-2xl font-bold">
+              ¥{{ balance.toFixed(2) }}
+            </div>
           </UiCardContent>
         </UiCard>
+
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <UiCardTitle class="text-sm font-medium">累计收入</UiCardTitle>
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.finance.rechargeCount') }}
+            </UiCardTitle>
+            <ArrowDownLeft class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ rechargeCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.finance.rechargeAmount') }}
+            </UiCardTitle>
             <TrendingUp class="size-4 text-green-500" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold text-green-500">+¥{{ totalRecharge.toFixed(2) }}</div>
+            <div class="text-2xl font-bold text-green-500">
+              +¥{{ totalRecharge.toFixed(2) }}
+            </div>
           </UiCardContent>
         </UiCard>
+
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <UiCardTitle class="text-sm font-medium">累计支出</UiCardTitle>
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.finance.consumeCount') }}
+            </UiCardTitle>
+            <ArrowUpRight class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ consumeCount }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.finance.consumeAmount') }}
+            </UiCardTitle>
             <TrendingDown class="size-4 text-red-500" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold text-red-500">-¥{{ totalConsume.toFixed(2) }}</div>
+            <div class="text-2xl font-bold text-red-500">
+              -¥{{ totalConsume.toFixed(2) }}
+            </div>
           </UiCardContent>
         </UiCard>
       </div>
@@ -137,66 +151,26 @@ function getTypeBgClass(type: string) {
         <UiCardHeader>
           <UiCardTitle class="flex items-center gap-2">
             <Receipt class="size-5" />
-            交易记录
+            {{ t('agent.finance.transactions') }}
           </UiCardTitle>
-          <UiCardDescription>账户资金变动记录</UiCardDescription>
+          <UiCardDescription>
+            {{ t('agent.finance.transactionsDesc') }}
+          </UiCardDescription>
         </UiCardHeader>
-        <UiCardContent class="p-0">
+        <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-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
-            <Receipt class="size-16 mx-auto mb-4 opacity-30" />
-            <p>暂无交易记录</p>
-          </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-right p-3 font-medium">金额</th>
-                  <th class="text-right p-3 font-medium">余额</th>
-                  <th class="text-left p-3 font-medium">时间</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="tx in transactions.filter(t => t)" :key="tx.id" class="border-t hover:bg-muted/30 transition-colors">
-                  <td class="p-3">
-                    <div class="flex items-center gap-2">
-                      <div
-                        class="size-8 rounded-lg flex items-center justify-center"
-                        :class="getTypeBgClass(tx.type)"
-                      >
-                        <component
-                          :is="getTypeIcon(tx.type)"
-                          :class="getTypeClass(tx.type)"
-                          class="size-4"
-                        />
-                      </div>
-                      <span>{{ getTypeLabel(tx.type) }}</span>
-                    </div>
-                  </td>
-                  <td class="p-3 text-muted-foreground">
-                    {{ tx.description || getTypeLabel(tx.type) }}
-                  </td>
-                  <td class="p-3 text-right">
-                    <span :class="getTypeClass(tx.type)" class="font-semibold">
-                      {{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ (tx.amount || 0).toFixed(2) }}
-                    </span>
-                  </td>
-                  <td class="p-3 text-right text-muted-foreground">
-                    ¥{{ (tx.balance || 0).toFixed(2) }}
-                  </td>
-                  <td class="p-3 text-muted-foreground">
-                    {{ formatDate(tx.created_at) }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+          <DataTable
+            v-else
+            ref="tableRef"
+            :loading
+            :data="filteredTransactions"
+            :type-filter="typeFilter"
+            @refresh="() => {}"
+            @update:typeFilter="typeFilter = $event"
+          />
         </UiCardContent>
       </UiCard>
     </div>
diff --git a/frontend/src/pages/agent/users/components/columns.ts b/frontend/src/pages/agent/users/components/columns.ts
new file mode 100644
index 0000000..5825743
--- /dev/null
+++ b/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 '-'
+        }
+      },
+    },
+  ]
+}
diff --git a/frontend/src/pages/agent/users/components/data-table-toolbar.vue b/frontend/src/pages/agent/users/components/data-table-toolbar.vue
new file mode 100644
index 0000000..365016a
--- /dev/null
+++ b/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>
diff --git a/frontend/src/pages/agent/users/components/data-table.vue b/frontend/src/pages/agent/users/components/data-table.vue
new file mode 100644
index 0000000..df8ac88
--- /dev/null
+++ b/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>
diff --git a/frontend/src/pages/agent/users/data/schema.ts b/frontend/src/pages/agent/users/data/schema.ts
new file mode 100644
index 0000000..e870472
--- /dev/null
+++ b/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
+}
diff --git a/frontend/src/pages/agent/users/index.vue b/frontend/src/pages/agent/users/index.vue
index 1c6170a..886c910 100644
--- a/frontend/src/pages/agent/users/index.vue
+++ b/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>
diff --git a/frontend/src/plugins/i18n/en.json b/frontend/src/plugins/i18n/en.json
index 25c64a3..9220d33 100644
--- a/frontend/src/plugins/i18n/en.json
+++ b/frontend/src/plugins/i18n/en.json
@@ -1286,6 +1286,7 @@
         "cardsCount": "Cards Generated",
         "childAgentsCount": "Child Agents",
         "canCreateAgent": "Create Agent Permission",
+        "canViewCloudData": "Cloud Data Permission",
         "balance": "Balance",
         "createdAt": "Created At",
         "lastLoginAt": "Last Login"
@@ -2723,11 +2724,32 @@
       "loadFailed": "Failed to load financial data",
       "accountBalance": "Account Balance",
       "transactionRecords": "Transaction Records",
+      "transactions": "Transaction Records",
+      "transactionsDesc": "Account balance change records",
       "noTransactions": "No transactions yet",
       "balance": "Balance",
       "recharge": "Recharge",
       "consume": "Consume",
-      "refund": "Refund"
+      "refund": "Refund",
+      "rechargeCount": "Income Count",
+      "rechargeAmount": "Income Amount",
+      "consumeCount": "Expense Count",
+      "consumeAmount": "Expense Amount",
+      "allTypes": "All Types",
+      "selectType": "Select Type",
+      "select": "Select",
+      "columns": {
+        "type": "Type",
+        "description": "Description",
+        "amount": "Amount",
+        "balance": "Balance",
+        "createdAt": "Time"
+      },
+      "types": {
+        "recharge": "Recharge",
+        "consume": "Consume",
+        "refund": "Refund"
+      }
     },
     "users": {
       "title": "User Management",
@@ -2739,7 +2761,22 @@
       "status": "Status",
       "registerTime": "Register Time",
       "lastLogin": "Last Login",
-      "active": "Active"
+      "active": "Active",
+      "totalUsers": "Total Users",
+      "searchPlaceholder": "Search username or email...",
+      "select": "Select",
+      "columns": {
+        "username": "Username",
+        "email": "Email",
+        "status": "Status",
+        "createdAt": "Created At",
+        "lastLoginAt": "Last Login"
+      },
+      "status": {
+        "active": "Active",
+        "disabled": "Disabled",
+        "banned": "Banned"
+      }
     },
     "apps": {
       "title": "App Management",
@@ -2767,6 +2804,7 @@
       "description": "Manage your generated cards",
       "loadFailed": "Failed to load card list",
       "generateCards": "Generate Cards",
+      "generateCard": "Generate Card",
       "noCards": "No card records yet",
       "cardCode": "Card Code",
       "app": "Application",
@@ -2778,6 +2816,25 @@
       "used": "Used",
       "expired": "Expired",
       "disabled": "Disabled",
+      "totalCards": "Total Cards",
+      "searchPlaceholder": "Search card code, app or card type...",
+      "exportBtn": "Export",
+      "batchExportBtn": "Batch Export",
+      "select": "Select",
+      "columns": {
+        "code": "Card Code",
+        "appName": "Application",
+        "cardTypeName": "Card Type",
+        "status": "Status",
+        "createdAt": "Created At",
+        "usedAt": "Used At"
+      },
+      "status": {
+        "unused": "Unused",
+        "used": "Used",
+        "expired": "Expired",
+        "disabled": "Disabled"
+      },
       "create": {
         "title": "Generate Cards",
         "description": "Generate cards for authorized applications",
diff --git a/frontend/src/plugins/i18n/zh.json b/frontend/src/plugins/i18n/zh.json
index 4c8faff..cd567da 100644
--- a/frontend/src/plugins/i18n/zh.json
+++ b/frontend/src/plugins/i18n/zh.json
@@ -1242,6 +1242,7 @@
         "cardsCount": "生成卡密",
         "childAgentsCount": "下级代理",
         "canCreateAgent": "创建代理权限",
+        "canViewCloudData": "云端数据权限",
         "balance": "余额",
         "totalConsumption": "消费",
         "createdAt": "注册时间",
@@ -2713,11 +2714,32 @@
       "loadFailed": "获取财务数据失败",
       "accountBalance": "账户余额",
       "transactionRecords": "交易记录",
+      "transactions": "交易记录",
+      "transactionsDesc": "账户资金变动记录",
       "noTransactions": "暂无交易记录",
       "balance": "余额",
       "recharge": "充值",
       "consume": "消费",
-      "refund": "退款"
+      "refund": "退款",
+      "rechargeCount": "收入笔数",
+      "rechargeAmount": "收入金额",
+      "consumeCount": "支出笔数",
+      "consumeAmount": "支出金额",
+      "allTypes": "全部类型",
+      "selectType": "选择类型",
+      "select": "选择",
+      "columns": {
+        "type": "类型",
+        "description": "描述",
+        "amount": "金额",
+        "balance": "余额",
+        "createdAt": "时间"
+      },
+      "types": {
+        "recharge": "充值",
+        "consume": "消费",
+        "refund": "退款"
+      }
     },
     "users": {
       "title": "用户管理",
@@ -2729,7 +2751,22 @@
       "status": "状态",
       "registerTime": "注册时间",
       "lastLogin": "最后登录",
-      "active": "正常"
+      "active": "正常",
+      "totalUsers": "用户总数",
+      "searchPlaceholder": "搜索用户名或邮箱...",
+      "select": "选择",
+      "columns": {
+        "username": "用户名",
+        "email": "邮箱",
+        "status": "状态",
+        "createdAt": "注册时间",
+        "lastLoginAt": "最后登录"
+      },
+      "status": {
+        "active": "正常",
+        "disabled": "禁用",
+        "banned": "封禁"
+      }
     },
     "apps": {
       "title": "应用管理",
@@ -2757,6 +2794,7 @@
       "description": "管理您生成的卡密",
       "loadFailed": "获取卡密列表失败",
       "generateCards": "生成卡密",
+      "generateCard": "生成卡密",
       "noCards": "暂无卡密记录",
       "cardCode": "卡密",
       "app": "应用",
@@ -2768,6 +2806,25 @@
       "used": "已使用",
       "expired": "已过期",
       "disabled": "已禁用",
+      "totalCards": "卡密总数",
+      "searchPlaceholder": "搜索卡号、应用或卡类...",
+      "exportBtn": "导出",
+      "batchExportBtn": "批量导出",
+      "select": "选择",
+      "columns": {
+        "code": "卡号",
+        "appName": "应用",
+        "cardTypeName": "卡类",
+        "status": "状态",
+        "createdAt": "创建时间",
+        "usedAt": "使用时间"
+      },
+      "status": {
+        "unused": "未使用",
+        "used": "已使用",
+        "expired": "已过期",
+        "disabled": "已禁用"
+      },
       "create": {
         "title": "生成卡密",
         "description": "为授权应用生成卡密",