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

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

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

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 '-'
+        }
+      },
+    },
+  ]
+}

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>

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>

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
+}

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>