verify/frontend/src/pages/agent/cards/index.vue

<script setup lang="ts">
import { Key, Loader2, Plus } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'

import { BasicPage } from '@/components/global-layout'
import api 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 loading = ref(true)
const cards = ref<Card[]>([])

onMounted(async () => {
  try {
    const data = await api.get<any>('/agent/cards')
    if (Array.isArray(data)) {
      cards.value = data
    } else if (data?.cards) {
      cards.value = data.cards
    } else if (data?.data) {
      cards.value = Array.isArray(data.data) ? data.data : []
    } else {
      cards.value = []
    }
  }
  catch (error) {
    console.error('Load cards failed:', error)
    cards.value = []
  }
  finally {
    loading.value = false
  }
})

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="管理生成的卡密"
    :breadcrumbs="[
      { title: '控制台', href: '/agent' },
      { title: '卡密管理' },
    ]"
    sticky
  >
    <template #actions>
      <UiButton as-child>
        <router-link to="/agent/cards/create">
          <Plus class="mr-2 h-4 w-4" />
          生成卡密
        </router-link>
      </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 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>

        <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>
  </BasicPage>
</template>