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

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

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

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>