feat: 优化代理后台页面布局

- 所有页面统一使用 BasicPage 组件

- 添加面包屑导航支持

- 统一页面标题和描述样式

- 移除控制台页面的应用管理快捷链接

- 优化卡密管理、用户管理、财务管理页面布局

frontend/src/pages/agent/cards/create.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
+import { BasicPage } from '@/components/global-layout'
 import api from '@/services/api'
 
 const { t } = useI18n()
@@ -21,10 +22,6 @@ const form = ref({
   quantity: 1,
 })
 
-const _selectedApp = computed(() => {
-  return apps.value.find(a => a.id === Number(form.value.app_id))
-})
-
 const availableCardTypes = computed(() => {
   return cardTypes.value.filter(ct => ct.app_id === Number(form.value.app_id))
 })
@@ -51,15 +48,15 @@ onMounted(async () => {
 
 async function handleGenerate() {
   if (!form.value.app_id) {
-    toast.error(t('agent.cards.create.selectApp'))
+    toast.error('请选择应用')
     return
   }
   if (!form.value.card_type_id) {
-    toast.error(t('agent.cards.create.selectCardType'))
+    toast.error('请选择卡类')
     return
   }
   if (form.value.quantity < 1 || form.value.quantity > 100) {
-    toast.error(t('agent.cards.create.quantityRange'))
+    toast.error('数量必须在1-100之间')
     return
   }
 
@@ -71,17 +68,17 @@ async function handleGenerate() {
       quantity: form.value.quantity,
     })
 
-    toast.success(t('agent.cards.create.generateSuccess', { count: data.codes.length }))
+    toast.success(`成功生成 ${data.codes.length} 张卡密`)
 
     const codesText = data.codes.join('\n')
     await navigator.clipboard.writeText(codesText)
-    toast.success(t('agent.cards.create.copiedToClipboard'))
+    toast.success('卡密已复制到剪贴板')
 
     router.push('/agent/cards')
   }
   catch (error: any) {
     console.error('Generate cards failed:', error)
-    toast.error(error.message || t('agent.cards.create.generateFailed'))
+    toast.error(error.message || '生成卡密失败')
   }
   finally {
     loading.value = false
@@ -90,29 +87,24 @@ async function handleGenerate() {
 </script>
 
 <template>
-  <div class="space-y-6">
-    <div>
-      <h1 class="text-2xl font-bold">
-        {{ t('agent.cards.create.title') }}
-      </h1>
-      <p class="text-muted-foreground">
-        {{ t('agent.cards.create.description') }}
-      </p>
-    </div>
-
-    <UiCard class="max-w-xl">
+  <BasicPage
+    title="生成卡密"
+    description="批量生成卡密"
+    sticky
+  >
+    <UiCard class="max-w-2xl">
       <UiCardHeader>
-        <UiCardTitle>{{ t('agent.cards.create.generateSettings') }}</UiCardTitle>
+        <UiCardTitle>生成设置</UiCardTitle>
         <UiCardDescription>
-          {{ t('agent.cards.create.settingsDesc') }}
+          选择应用和卡类，设置生成数量
         </UiCardDescription>
       </UiCardHeader>
       <UiCardContent class="space-y-6">
         <div class="space-y-2">
-          <UiLabel>{{ t('agent.cards.create.selectAppLabel') }}</UiLabel>
+          <UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
           <UiSelect v-model="form.app_id">
             <UiSelectTrigger>
-              <UiSelectValue :placeholder="t('agent.cards.create.selectAppPlaceholder')" />
+              <UiSelectValue placeholder="请选择应用" />
             </UiSelectTrigger>
             <UiSelectContent>
               <UiSelectItem v-for="app in apps" :key="app.id" :value="String(app.id)">
@@ -123,36 +115,36 @@ async function handleGenerate() {
         </div>
 
         <div v-if="form.app_id" class="space-y-2">
-          <UiLabel>{{ t('agent.cards.create.selectCardTypeLabel') }}</UiLabel>
+          <UiLabel>选择卡类 <span class="text-destructive">*</span></UiLabel>
           <UiSelect v-model="form.card_type_id">
             <UiSelectTrigger>
-              <UiSelectValue :placeholder="t('agent.cards.create.selectCardTypePlaceholder')" />
+              <UiSelectValue placeholder="请选择卡类" />
             </UiSelectTrigger>
             <UiSelectContent>
               <UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
-                {{ ct.name }} - {{ ct.duration_days }}{{ t('agent.apps.detail.days') }} - ¥{{ ct.price }}
+                {{ ct.name }} - {{ ct.duration_days }}天 - ¥{{ ct.price }}
               </UiSelectItem>
             </UiSelectContent>
           </UiSelect>
         </div>
 
         <div class="space-y-2">
-          <UiLabel>{{ t('agent.cards.create.quantity') }}</UiLabel>
+          <UiLabel>生成数量 <span class="text-destructive">*</span></UiLabel>
           <UiInput
             v-model.number="form.quantity"
             type="number"
             :min="1"
             :max="100"
-            :placeholder="t('agent.cards.create.quantityPlaceholder')"
+            placeholder="请输入生成数量"
           />
           <p class="text-xs text-muted-foreground">
-            {{ t('agent.cards.create.quantityHint') }}
+            单次最多生成100张卡密
           </p>
         </div>
 
         <div v-if="totalPrice > 0" class="p-4 rounded-lg bg-muted/50">
           <div class="flex items-center justify-between">
-            <span class="text-muted-foreground">{{ t('agent.cards.create.estimatedCost') }}</span>
+            <span class="text-muted-foreground">预计费用</span>
             <span class="text-xl font-bold">¥{{ totalPrice.toFixed(2) }}</span>
           </div>
         </div>
@@ -160,7 +152,7 @@ async function handleGenerate() {
         <div class="flex gap-3">
           <UiButton variant="outline" as-child>
             <router-link to="/agent/cards">
-              {{ t('agent.cards.create.cancel') }}
+              取消
             </router-link>
           </UiButton>
           <UiButton
@@ -168,10 +160,10 @@ async function handleGenerate() {
             @click="handleGenerate"
           >
             <Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
-            {{ loading ? t('agent.cards.create.generating') : t('agent.cards.create.generateBtn') }}
+            {{ loading ? '生成中...' : '生成卡密' }}
           </UiButton>
         </div>
       </UiCardContent>
     </UiCard>
-  </div>
+  </BasicPage>
 </template>

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

@@ -3,6 +3,7 @@ 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()
@@ -51,23 +52,19 @@ function getStatusBadge(status: string) {
 </script>
 
 <template>
-  <div class="space-y-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h1 class="text-2xl font-bold">
-          {{ t('agent.cards.title') }}
-        </h1>
-        <p class="text-muted-foreground">
-          {{ t('agent.cards.description') }}
-        </p>
-      </div>
+  <BasicPage
+    :title="t('nav.cards')"
+    description="管理生成的卡密"
+    sticky
+  >
+    <template #actions>
       <UiButton as-child>
         <router-link to="/agent/cards/create">
           <Plus class="mr-2 h-4 w-4" />
-          {{ t('agent.cards.generateCards') }}
+          生成卡密
         </router-link>
       </UiButton>
-    </div>
+    </template>
 
     <UiCard>
       <UiCardContent class="p-0">
@@ -77,10 +74,10 @@ function getStatusBadge(status: string) {
 
         <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>{{ t('agent.cards.noCards') }}</p>
+          <p>暂无卡密</p>
           <UiButton class="mt-4" as-child>
             <router-link to="/agent/cards/create">
-              {{ t('agent.cards.generateCards') }}
+              生成卡密
             </router-link>
           </UiButton>
         </div>
@@ -90,22 +87,22 @@ function getStatusBadge(status: string) {
             <thead class="bg-muted/50">
               <tr>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.cards.cardCode') }}
+                  卡号
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.cards.app') }}
+                  应用
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.cards.cardType') }}
+                  卡类
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.cards.status') }}
+                  状态
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.cards.createTime') }}
+                  创建时间
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.cards.useTime') }}
+                  使用时间
                 </th>
               </tr>
             </thead>
@@ -137,5 +134,5 @@ function getStatusBadge(status: string) {
         </div>
       </UiCardContent>
     </UiCard>
-  </div>
+  </BasicPage>
 </template>

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

@@ -3,6 +3,7 @@ import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw } from 'lucide
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { BasicPage } from '@/components/global-layout'
 import api from '@/services/api'
 
 const { t } = useI18n()
@@ -40,9 +41,9 @@ function formatDate(dateStr: string) {
 
 function getTypeLabel(type: string) {
   const map: Record<string, string> = {
-    recharge: t('agent.finance.recharge'),
-    consume: t('agent.finance.consume'),
-    refund: t('agent.finance.refund'),
+    recharge: '充值',
+    consume: '消费',
+    refund: '退款',
   }
   return map[type] || type
 }
@@ -58,21 +59,16 @@ function getTypeClass(type: string) {
 </script>
 
 <template>
-  <div class="space-y-6">
-    <div>
-      <h1 class="text-2xl font-bold">
-        {{ t('agent.finance.title') }}
-      </h1>
-      <p class="text-muted-foreground">
-        {{ t('agent.finance.description') }}
-      </p>
-    </div>
-
+  <BasicPage
+    :title="t('nav.finance')"
+    description="财务管理"
+    sticky
+  >
     <div class="grid gap-4 md:grid-cols-3">
       <UiCard>
         <UiCardHeader class="pb-2">
           <UiCardTitle class="text-sm font-medium">
-            {{ t('agent.finance.accountBalance') }}
+            账户余额
           </UiCardTitle>
         </UiCardHeader>
         <UiCardContent>
@@ -83,9 +79,9 @@ function getTypeClass(type: string) {
       </UiCard>
     </div>
 
-    <UiCard>
+    <UiCard class="mt-6">
       <UiCardHeader>
-        <UiCardTitle>{{ t('agent.finance.transactionRecords') }}</UiCardTitle>
+        <UiCardTitle>交易记录</UiCardTitle>
       </UiCardHeader>
       <UiCardContent class="p-0">
         <div v-if="loading" class="flex items-center justify-center py-12">
@@ -94,7 +90,7 @@ function getTypeClass(type: string) {
 
         <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>{{ t('agent.finance.noTransactions') }}</p>
+          <p>暂无交易记录</p>
         </div>
 
         <div v-else class="divide-y">
@@ -128,12 +124,12 @@ function getTypeClass(type: string) {
                 {{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ tx.amount.toFixed(2) }}
               </p>
               <p class="text-xs text-muted-foreground">
-                {{ t('agent.finance.balance') }}: ¥{{ tx.balance.toFixed(2) }}
+                余额: ¥{{ tx.balance.toFixed(2) }}
               </p>
             </div>
           </div>
         </div>
       </UiCardContent>
     </UiCard>
-  </div>
+  </BasicPage>
 </template>

frontend/src/pages/agent/index.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { Boxes, CreditCard, DollarSign, Key, Plus, Users } from 'lucide-vue-next'
+import { DollarSign, Key, Plus, Users } 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()
 
 const loading = ref(true)
 const stats = ref({
-  totalApps: 0,
   totalCards: 0,
   totalUsers: 0,
   totalRevenue: 0,
@@ -17,12 +17,9 @@ const stats = ref({
   todayRevenue: 0,
 })
 
-const recentCards = ref<any[]>([])
-
 onMounted(async () => {
   try {
     const data = await api.get<{
-      totalApps?: number
       totalCards?: number
       totalUsers?: number
       totalRevenue?: number
@@ -31,7 +28,6 @@ onMounted(async () => {
     }>('/agent/stats')
     if (data) {
       stats.value = {
-        totalApps: data.totalApps || 0,
         totalCards: data.totalCards || 0,
         totalUsers: data.totalUsers || 0,
         totalRevenue: data.totalRevenue || 0,
@@ -50,38 +46,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="space-y-6">
-    <div>
-      <h1 class="text-2xl font-bold">
-        {{ t('agent.dashboard.title') }}
-      </h1>
-      <p class="text-muted-foreground">
-        {{ t('agent.dashboard.welcomeBack') }}
-      </p>
-    </div>
-
-    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+  <BasicPage
+    :title="t('nav.console')"
+    description="代理商后台控制台"
+    sticky
+  >
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
       <UiCard>
         <UiCardHeader class="flex flex-row items-center justify-between pb-2">
           <UiCardTitle class="text-sm font-medium">
-            {{ t('agent.dashboard.authorizedApps') }}
-          </UiCardTitle>
-          <Boxes class="size-4 text-muted-foreground" />
-        </UiCardHeader>
-        <UiCardContent>
-          <div class="text-2xl font-bold">
-            {{ stats.totalApps }}
-          </div>
-          <p class="text-xs text-muted-foreground">
-            {{ t('agent.dashboard.authorizedAppsCount') }}
-          </p>
-        </UiCardContent>
-      </UiCard>
-
-      <UiCard>
-        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
-          <UiCardTitle class="text-sm font-medium">
-            {{ t('agent.dashboard.totalCards') }}
+            卡密总数
           </UiCardTitle>
           <Key class="size-4 text-muted-foreground" />
         </UiCardHeader>
@@ -90,7 +64,7 @@ onMounted(async () => {
             {{ stats.totalCards.toLocaleString() }}
           </div>
           <p class="text-xs text-muted-foreground">
-            {{ t('agent.dashboard.todayGenerated') }}: {{ stats.todayCards }}
+            今日生成: {{ stats.todayCards }}
           </p>
         </UiCardContent>
       </UiCard>
@@ -98,7 +72,7 @@ onMounted(async () => {
       <UiCard>
         <UiCardHeader class="flex flex-row items-center justify-between pb-2">
           <UiCardTitle class="text-sm font-medium">
-            {{ t('agent.dashboard.totalUsers') }}
+            用户总数
           </UiCardTitle>
           <Users class="size-4 text-muted-foreground" />
         </UiCardHeader>
@@ -107,7 +81,7 @@ onMounted(async () => {
             {{ stats.totalUsers.toLocaleString() }}
           </div>
           <p class="text-xs text-muted-foreground">
-            {{ t('agent.dashboard.totalUsersDesc') }}
+            已注册用户数量
           </p>
         </UiCardContent>
       </UiCard>
@@ -115,7 +89,7 @@ onMounted(async () => {
       <UiCard>
         <UiCardHeader class="flex flex-row items-center justify-between pb-2">
           <UiCardTitle class="text-sm font-medium">
-            {{ t('agent.dashboard.totalRevenue') }}
+            总收入
           </UiCardTitle>
           <DollarSign class="size-4 text-muted-foreground" />
         </UiCardHeader>
@@ -124,71 +98,36 @@ onMounted(async () => {
             ¥{{ stats.totalRevenue.toFixed(2) }}
           </div>
           <p class="text-xs text-muted-foreground">
-            {{ t('agent.dashboard.todayRevenue') }}: ¥{{ stats.todayRevenue.toFixed(2) }}
+            今日收入: ¥{{ stats.todayRevenue.toFixed(2) }}
           </p>
         </UiCardContent>
       </UiCard>
     </div>
 
-    <div class="grid gap-6 lg:grid-cols-2">
-      <UiCard>
-        <UiCardHeader>
-          <UiCardTitle>{{ t('agent.dashboard.quickActions') }}</UiCardTitle>
-        </UiCardHeader>
-        <UiCardContent class="grid gap-4 sm:grid-cols-2">
-          <router-link to="/agent/cards/create">
-            <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
-              <Plus class="size-5" />
-              <span>{{ t('agent.dashboard.generateCards') }}</span>
-            </UiButton>
-          </router-link>
-          <router-link to="/agent/apps">
-            <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
-              <Boxes class="size-5" />
-              <span>{{ t('agent.dashboard.appManagement') }}</span>
-            </UiButton>
-          </router-link>
-          <router-link to="/agent/users">
-            <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
-              <Users class="size-5" />
-              <span>{{ t('agent.dashboard.userManagement') }}</span>
-            </UiButton>
-          </router-link>
-          <router-link to="/agent/finance">
-            <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
-              <CreditCard class="size-5" />
-              <span>{{ t('agent.dashboard.financeManagement') }}</span>
-            </UiButton>
-          </router-link>
-        </UiCardContent>
-      </UiCard>
-
-      <UiCard>
-        <UiCardHeader>
-          <UiCardTitle>{{ t('agent.dashboard.recentCards') }}</UiCardTitle>
-        </UiCardHeader>
-        <UiCardContent>
-          <div v-if="recentCards.length > 0" class="space-y-4">
-            <div v-for="card in recentCards" :key="card.id" class="flex items-center justify-between">
-              <div>
-                <p class="font-medium">
-                  {{ card.code }}
-                </p>
-                <p class="text-sm text-muted-foreground">
-                  {{ card.app_name }}
-                </p>
-              </div>
-              <UiBadge :variant="card.status === 'unused' ? 'default' : 'secondary'">
-                {{ card.status === 'unused' ? t('agent.dashboard.unused') : t('agent.dashboard.used') }}
-              </UiBadge>
-            </div>
-          </div>
-          <div v-else class="text-center py-8 text-muted-foreground">
-            <Key class="size-12 mx-auto mb-2 opacity-30" />
-            <p>{{ t('agent.dashboard.noCards') }}</p>
-          </div>
-        </UiCardContent>
-      </UiCard>
-    </div>
-  </div>
+    <UiCard class="mt-6">
+      <UiCardHeader>
+        <UiCardTitle>快捷操作</UiCardTitle>
+      </UiCardHeader>
+      <UiCardContent class="grid gap-4 sm:grid-cols-3">
+        <router-link to="/agent/cards/create">
+          <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
+            <Plus class="size-5" />
+            <span>生成卡密</span>
+          </UiButton>
+        </router-link>
+        <router-link to="/agent/cards">
+          <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
+            <Key class="size-5" />
+            <span>卡密管理</span>
+          </UiButton>
+        </router-link>
+        <router-link to="/agent/users">
+          <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
+            <Users class="size-5" />
+            <span>用户管理</span>
+          </UiButton>
+        </router-link>
+      </UiCardContent>
+    </UiCard>
+  </BasicPage>
 </template>

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

@@ -3,6 +3,7 @@ import { Loader2, Users } 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()
@@ -40,16 +41,11 @@ function formatDate(dateStr: string | null) {
 </script>
 
 <template>
-  <div class="space-y-6">
-    <div>
-      <h1 class="text-2xl font-bold">
-        {{ t('agent.users.title') }}
-      </h1>
-      <p class="text-muted-foreground">
-        {{ t('agent.users.description') }}
-      </p>
-    </div>
-
+  <BasicPage
+    :title="t('nav.users')"
+    description="管理用户信息"
+    sticky
+  >
     <UiCard>
       <UiCardContent class="p-0">
         <div v-if="loading" class="flex items-center justify-center py-12">
@@ -58,7 +54,7 @@ function formatDate(dateStr: string | null) {
 
         <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>{{ t('agent.users.noUsers') }}</p>
+          <p>暂无用户</p>
         </div>
 
         <div v-else class="overflow-x-auto">
@@ -66,19 +62,19 @@ function formatDate(dateStr: string | null) {
             <thead class="bg-muted/50">
               <tr>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.users.username') }}
+                  用户名
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.users.email') }}
+                  邮箱
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.users.status') }}
+                  状态
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.users.registerTime') }}
+                  注册时间
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  {{ t('agent.users.lastLogin') }}
+                  最后登录
                 </th>
               </tr>
             </thead>
@@ -95,7 +91,7 @@ function formatDate(dateStr: string | null) {
                     :class="user.status === 'active' ? 'bg-green-500/10 text-green-500' : ''"
                     variant="outline"
                   >
-                    {{ user.status === 'active' ? t('agent.users.active') : user.status }}
+                    {{ user.status === 'active' ? '正常' : user.status }}
                   </UiBadge>
                 </td>
                 <td class="px-4 py-3 text-sm text-muted-foreground">
@@ -110,5 +106,5 @@ function formatDate(dateStr: string | null) {
         </div>
       </UiCardContent>
     </UiCard>
-  </div>
+  </BasicPage>
 </template>