feat: 新建授权改为独立页面，修复代理列表获取和卡片颜色

frontend/src/pages/admin/agent-apps/create.vue

@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import { CheckCheck, Eye, Key, Loader2, Share2, X } from 'lucide-vue-next'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { toast } from 'vue-sonner'
+
+import { BasicPage } from '@/components/global-layout'
+import api from '@/services/api'
+
+const router = useRouter()
+
+interface Agent {
+  id: number
+  username: string
+  email?: string
+  status: string
+}
+
+interface Application {
+  id: number
+  name: string
+}
+
+interface CardType {
+  id: number
+  name: string
+  billing_type: string
+  price: number
+}
+
+const saving = ref(false)
+const agents = ref<Agent[]>([])
+const applications = ref<Application[]>([])
+const cardTypes = ref<CardType[]>([])
+
+const form = ref({
+  agent_id: '',
+  application_id: '',
+  discount: 1.0,
+  card_types: [] as Array<{ card_type_id: number, can_generate: boolean }>,
+})
+
+async function fetchAgents() {
+  try {
+    const data = await api.get<{ agents: Agent[] }>('/dev/agents')
+    agents.value = Array.isArray(data?.agents) ? data.agents : []
+  }
+  catch (error) {
+    console.error('获取代理列表失败:', error)
+  }
+}
+
+async function fetchApplications() {
+  try {
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = Array.isArray(data?.applications) ? data.applications : []
+  }
+  catch (error) {
+    console.error('获取应用列表失败:', error)
+  }
+}
+
+async function fetchCardTypes(applicationId: string) {
+  if (!applicationId) {
+    cardTypes.value = []
+    form.value.card_types = []
+    return
+  }
+  try {
+    const data = await api.get<{ card_types: CardType[] }>(`/dev/card-types?application_id=${applicationId}`)
+    cardTypes.value = Array.isArray(data?.card_types) ? data.card_types : []
+    form.value.card_types = cardTypes.value.map(ct => ({
+      card_type_id: ct.id,
+      can_generate: false,
+    }))
+  }
+  catch (error) {
+    console.error('获取卡类列表失败:', error)
+    cardTypes.value = []
+    form.value.card_types = []
+  }
+}
+
+watch(() => form.value.application_id, (newVal) => {
+  fetchCardTypes(newVal)
+})
+
+const selectedAgent = computed(() => {
+  if (form.value.agent_id) {
+    return agents.value.find(a => String(a.id) === form.value.agent_id)
+  }
+  return null
+})
+
+const selectedApplication = computed(() => {
+  if (form.value.application_id) {
+    return applications.value.find(app => String(app.id) === form.value.application_id)
+  }
+  return null
+})
+
+const enabledCardTypesCount = computed(() => {
+  return form.value.card_types.filter(ct => ct.can_generate).length
+})
+
+function getBillingTypeText(type: string) {
+  const map: Record<string, string> = {
+    subscription: '订阅',
+    time: '计时',
+    point: '点卡',
+  }
+  return map[type] || type
+}
+
+function selectAllCardTypes() {
+  form.value.card_types.forEach(ct => ct.can_generate = true)
+}
+
+function clearAllCardTypes() {
+  form.value.card_types.forEach(ct => ct.can_generate = false)
+}
+
+const isFormValid = computed(() => {
+  return form.value.agent_id && form.value.application_id
+})
+
+async function handleSave() {
+  if (!form.value.agent_id) {
+    toast.error('请选择代理')
+    return
+  }
+  if (!form.value.application_id) {
+    toast.error('请选择应用')
+    return
+  }
+
+  saving.value = true
+  try {
+    await api.post('/dev/agent-apps/authorize', {
+      agent_id: Number(form.value.agent_id),
+      application_id: Number(form.value.application_id),
+      discount: form.value.discount,
+      card_types: form.value.card_types,
+    })
+    toast.success('授权成功')
+    router.push('/admin/agent-apps')
+  }
+  catch (error: any) {
+    console.error('授权失败:', error)
+    toast.error(error.message || '授权失败')
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  fetchAgents()
+  fetchApplications()
+})
+</script>
+
+<template>
+  <BasicPage
+    title="新建授权"
+    description="为代理分配应用卡密权限"
+    :breadcrumbs="[
+      { title: '授权管理', href: '/admin/agent-apps' },
+      { title: '新建授权' },
+    ]"
+    sticky
+  >
+    <div class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Share2 class="size-5" />
+                基本信息
+              </UiCardTitle>
+              <UiCardDescription>选择要授权的代理和应用</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel>选择代理</UiLabel>
+                <UiSelect v-model="form.agent_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="请选择代理" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem
+                      v-for="agent in agents"
+                      :key="agent.id"
+                      :value="String(agent.id)"
+                    >
+                      {{ agent.username }}
+                      <span v-if="agent.email" class="text-muted-foreground ml-1">({{ agent.email }})</span>
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>选择应用</UiLabel>
+                <UiSelect v-model="form.application_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="请选择应用" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem
+                      v-for="app in applications"
+                      :key="app.id"
+                      :value="String(app.id)"
+                    >
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>折扣</UiLabel>
+                <div class="flex items-center gap-4">
+                  <UiInput
+                    v-model.number="form.discount"
+                    type="number"
+                    step="0.01"
+                    min="0.01"
+                    max="1"
+                    class="flex-1"
+                  />
+                  <span class="text-sm text-muted-foreground w-20">
+                    {{ (form.discount * 10).toFixed(1) }}折
+                  </span>
+                </div>
+                <p class="text-xs text-muted-foreground">
+                  代理购买卡密的折扣，范围0.01-1
+                </p>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard v-if="cardTypes.length > 0">
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Key class="size-5" />
+                卡密权限
+              </UiCardTitle>
+              <UiCardDescription>配置代理可生成的卡密类型</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="flex gap-2">
+                <UiButton variant="outline" size="sm" @click="selectAllCardTypes">
+                  <CheckCheck class="mr-2 h-4 w-4" />
+                  全选
+                </UiButton>
+                <UiButton variant="outline" size="sm" @click="clearAllCardTypes">
+                  <X class="mr-2 h-4 w-4" />
+                  清空
+                </UiButton>
+              </div>
+
+              <div class="border rounded-lg">
+                <UiTable>
+                  <UiTableHeader>
+                    <UiTableRow>
+                      <UiTableHead class="w-12" />
+                      <UiTableHead>卡类名称</UiTableHead>
+                      <UiTableHead>计费类型</UiTableHead>
+                      <UiTableHead>价格</UiTableHead>
+                    </UiTableRow>
+                  </UiTableHeader>
+                  <UiTableBody>
+                    <UiTableRow
+                      v-for="(ct, index) in form.card_types"
+                      :key="ct.card_type_id"
+                      :class="ct.can_generate ? 'bg-primary/10' : ''"
+                      class="cursor-pointer"
+                      @click="ct.can_generate = !ct.can_generate"
+                    >
+                      <UiTableCell>
+                        <UiCheckbox
+                          :checked="ct.can_generate"
+                          @update:checked="ct.can_generate = $event"
+                          @click.stop
+                        />
+                      </UiTableCell>
+                      <UiTableCell class="font-medium">
+                        {{ cardTypes[index]?.name || `卡类 #${ct.card_type_id}` }}
+                      </UiTableCell>
+                      <UiTableCell>
+                        <UiBadge variant="outline">
+                          {{ getBillingTypeText(cardTypes[index]?.billing_type || '') }}
+                        </UiBadge>
+                      </UiTableCell>
+                      <UiTableCell>
+                        ¥{{ cardTypes[index]?.price || 0 }}
+                      </UiTableCell>
+                    </UiTableRow>
+                  </UiTableBody>
+                </UiTable>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Eye class="size-5" />
+                预览
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">代理</span>
+                  <span>{{ selectedAgent?.username || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">应用</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">折扣</span>
+                  <span>{{ (form.discount * 10).toFixed(1) }}折</span>
+                </div>
+                <div v-if="cardTypes.length > 0" class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">卡密权限</span>
+                  <span class="text-primary">{{ enabledCardTypesCount }}/{{ cardTypes.length }}</span>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !isFormValid"
+                  @click="handleSave"
+                >
+                  <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
+                  <Share2 v-else class="mr-2 h-4 w-4" />
+                  确认授权
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  取消
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
+  </BasicPage>
+</template>

frontend/src/pages/admin/agent-apps/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { CheckCircle, Key, Plus, Share2, Wallet, XCircle } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
@@ -11,26 +10,12 @@ import ConfirmDialog from '@/components/confirm-dialog.vue'
 import { BasicPage } from '@/components/global-layout'
 import api from '@/services/api'
 
-const { t } = useI18n()
 const router = useRouter()
 
 const loading = ref(true)
 const agentApps = ref<AgentApp[]>([])
 const showRemoveDialog = ref(false)
 const removingItem = ref<AgentApp | null>(null)
-const showAuthorizeDialog = ref(false)
-const authorizing = ref(false)
-
-const agents = ref<Array<{ id: number, username: string, email?: string }>>([])
-const applications = ref<Array<{ id: number, name: string }>>([])
-const cardTypes = ref<Array<{ id: number, name: string, billing_type: string, price: number }>>([])
-
-const authorizeForm = ref({
-  agent_id: '' as string | number,
-  application_id: '' as string | number,
-  discount: 1.0,
-  card_types: [] as Array<{ card_type_id: number, can_generate: boolean }>,
-})
 
 const activeCount = computed(() => agentApps.value.filter(app => app.status === 'active').length)
 const inactiveCount = computed(() => agentApps.value.filter(app => app.status === 'inactive').length)
@@ -55,13 +40,6 @@ const filteredApps = computed(() => {
   return result
 })
 
-const selectedAppCardTypes = computed(() => {
-  if (!authorizeForm.value.application_id)
-    return []
-  const appId = Number(authorizeForm.value.application_id)
-  return cardTypes.value.filter(ct => ct.id && true)
-})
-
 async function fetchData() {
   loading.value = true
   try {
@@ -77,83 +55,8 @@ async function fetchData() {
   }
 }
 
-async function fetchDialogData() {
+function goToCreate() {
-  try {
+  router.push('/admin/agent-apps/create')
-    const [agentsData, appsData] = await Promise.all([
-      api.get<{ agents: Array<{ id: number, username: string, email?: string }> }>('/dev/agents'),
-      api.get<{ applications: Array<{ id: number, name: string }> }>('/dev/applications'),
-    ])
-    agents.value = agentsData?.agents || []
-    applications.value = appsData?.applications || []
-  }
-  catch (error) {
-    console.error('获取数据失败:', error)
-  }
-}
-
-async function onApplicationChange() {
-  const appId = Number(authorizeForm.value.application_id)
-  if (!appId) {
-    cardTypes.value = []
-    authorizeForm.value.card_types = []
-    return
-  }
-
-  try {
-    const data = await api.get<{ card_types: Array<{ id: number, name: string, billing_type: string, price: number }> }>('/dev/card-types')
-    const allTypes = data?.card_types || []
-    cardTypes.value = allTypes
-    authorizeForm.value.card_types = allTypes.map(ct => ({
-      card_type_id: ct.id,
-      can_generate: false,
-    }))
-  }
-  catch (error) {
-    console.error('获取卡类失败:', error)
-  }
-}
-
-function openAuthorizeDialog() {
-  authorizeForm.value = {
-    agent_id: '',
-    application_id: '',
-    discount: 1.0,
-    card_types: [],
-  }
-  cardTypes.value = []
-  showAuthorizeDialog.value = true
-  fetchDialogData()
-}
-
-async function handleAuthorize() {
-  if (!authorizeForm.value.agent_id) {
-    toast.error('请选择代理')
-    return
-  }
-  if (!authorizeForm.value.application_id) {
-    toast.error('请选择应用')
-    return
-  }
-
-  authorizing.value = true
-  try {
-    await api.post('/dev/agent-apps/authorize', {
-      agent_id: Number(authorizeForm.value.agent_id),
-      application_id: Number(authorizeForm.value.application_id),
-      discount: authorizeForm.value.discount,
-      card_types: authorizeForm.value.card_types,
-    })
-    toast.success('授权成功')
-    showAuthorizeDialog.value = false
-    fetchData()
-  }
-  catch (error: any) {
-    console.error('授权失败:', error)
-    toast.error(error.message || '授权失败')
-  }
-  finally {
-    authorizing.value = false
-  }
 }
 
 function confirmRemove(item: AgentApp) {
@@ -177,15 +80,6 @@ async function handleRemove() {
   }
 }
 
-function getBillingTypeText(type: string) {
-  const map: Record<string, string> = {
-    subscription: '订阅',
-    time: '计时',
-    point: '点卡',
-  }
-  return map[type] || type
-}
-
 onMounted(() => {
   fetchData()
 })
@@ -198,7 +92,7 @@ onMounted(() => {
     sticky
   >
     <template #actions>
-      <UiButton @click="openAuthorizeDialog">
+      <UiButton @click="goToCreate">
         <Plus class="mr-2 h-4 w-4" />
         新建授权
       </UiButton>
@@ -225,7 +119,7 @@ onMounted(() => {
             <UiCardTitle class="text-sm font-medium">
               已启用
             </UiCardTitle>
-            <CheckCircle class="size-4 text-muted-foreground" />
+            <CheckCircle class="size-4 text-green-500" />
           </UiCardHeader>
           <UiCardContent>
             <div class="text-2xl font-bold text-green-600">
@@ -239,10 +133,10 @@ onMounted(() => {
             <UiCardTitle class="text-sm font-medium">
               已禁用
             </UiCardTitle>
-            <XCircle class="size-4 text-muted-foreground" />
+            <XCircle class="size-4 text-orange-500" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold text-muted-foreground">
+            <div class="text-2xl font-bold text-orange-600">
               {{ inactiveCount }}
             </div>
           </UiCardContent>
@@ -253,10 +147,10 @@ onMounted(() => {
             <UiCardTitle class="text-sm font-medium">
               代理余额总计
             </UiCardTitle>
-            <Wallet class="size-4 text-muted-foreground" />
+            <Wallet class="size-4 text-blue-500" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold">
+            <div class="text-2xl font-bold text-blue-600">
               ¥{{ totalBalance.toFixed(2) }}
             </div>
           </UiCardContent>
@@ -349,7 +243,10 @@ onMounted(() => {
                   <span class="font-medium">¥{{ (item.balance || 0).toFixed(2) }}</span>
                 </UiTableCell>
                 <UiTableCell>
-                  <UiBadge :variant="item.status === 'active' ? 'default' : 'secondary'">
+                  <UiBadge
+                    :variant="item.status === 'active' ? 'default' : 'secondary'"
+                    :class="item.status === 'active' ? 'bg-green-500/10 text-green-600 hover:bg-green-500/20' : 'bg-orange-500/10 text-orange-600 hover:bg-orange-500/20'"
+                  >
                     {{ item.status === 'active' ? '已启用' : '已禁用' }}
                   </UiBadge>
                 </UiTableCell>
@@ -391,140 +288,6 @@ onMounted(() => {
       </UiCard>
     </div>
 
-    <UiDialog v-model:open="showAuthorizeDialog">
-      <UiDialogContent class="max-w-2xl max-h-[85vh] overflow-y-auto">
-        <UiDialogHeader>
-          <UiDialogTitle>新建授权</UiDialogTitle>
-          <UiDialogDescription>
-            为代理分配应用卡密权限
-          </UiDialogDescription>
-        </UiDialogHeader>
-
-        <div class="space-y-6 py-4">
-          <div class="space-y-2">
-            <UiLabel>选择代理</UiLabel>
-            <UiSelect v-model="authorizeForm.agent_id">
-              <UiSelectTrigger>
-                <UiSelectValue placeholder="请选择代理" />
-              </UiSelectTrigger>
-              <UiSelectContent>
-                <UiSelectItem
-                  v-for="agent in agents"
-                  :key="agent.id"
-                  :value="String(agent.id)"
-                >
-                  {{ agent.username }}
-                  <span v-if="agent.email" class="text-muted-foreground ml-1">({{ agent.email }})</span>
-                </UiSelectItem>
-              </UiSelectContent>
-            </UiSelect>
-          </div>
-
-          <div class="space-y-2">
-            <UiLabel>选择应用</UiLabel>
-            <UiSelect v-model="authorizeForm.application_id" @update:model-value="onApplicationChange">
-              <UiSelectTrigger>
-                <UiSelectValue placeholder="请选择应用" />
-              </UiSelectTrigger>
-              <UiSelectContent>
-                <UiSelectItem
-                  v-for="app in applications"
-                  :key="app.id"
-                  :value="String(app.id)"
-                >
-                  {{ app.name }}
-                </UiSelectItem>
-              </UiSelectContent>
-            </UiSelect>
-          </div>
-
-          <div class="space-y-2">
-            <UiLabel>折扣</UiLabel>
-            <div class="flex items-center gap-4">
-              <UiInput
-                v-model.number="authorizeForm.discount"
-                type="number"
-                step="0.01"
-                min="0.01"
-                max="1"
-                class="flex-1"
-              />
-              <span class="text-sm text-muted-foreground w-20">
-                {{ (authorizeForm.discount * 10).toFixed(1) }}折
-              </span>
-            </div>
-            <p class="text-xs text-muted-foreground">
-              代理购买卡密的折扣，范围0.01-1
-            </p>
-          </div>
-
-          <div v-if="authorizeForm.card_types.length > 0" class="space-y-2">
-            <div class="flex items-center justify-between">
-              <UiLabel>卡密权限</UiLabel>
-              <div class="flex gap-2">
-                <UiButton variant="outline" size="sm" @click="authorizeForm.card_types.forEach(ct => ct.can_generate = true)">
-                  全选
-                </UiButton>
-                <UiButton variant="outline" size="sm" @click="authorizeForm.card_types.forEach(ct => ct.can_generate = false)">
-                  清空
-                </UiButton>
-              </div>
-            </div>
-            <div class="border rounded-lg">
-              <UiTable>
-                <UiTableHeader>
-                  <UiTableRow>
-                    <UiTableHead class="w-12" />
-                    <UiTableHead>卡类名称</UiTableHead>
-                    <UiTableHead>计费类型</UiTableHead>
-                    <UiTableHead>价格</UiTableHead>
-                  </UiTableRow>
-                </UiTableHeader>
-                <UiTableBody>
-                  <UiTableRow
-                    v-for="(ct, index) in authorizeForm.card_types"
-                    :key="ct.card_type_id"
-                    :class="ct.can_generate ? 'bg-accent/50' : ''"
-                    class="cursor-pointer"
-                    @click="ct.can_generate = !ct.can_generate"
-                  >
-                    <UiTableCell>
-                      <UiCheckbox
-                        :checked="ct.can_generate"
-                        @update:checked="ct.can_generate = $event"
-                        @click.stop
-                      />
-                    </UiTableCell>
-                    <UiTableCell class="font-medium">
-                      {{ cardTypes[index]?.name || `卡类 #${ct.card_type_id}` }}
-                    </UiTableCell>
-                    <UiTableCell>
-                      <UiBadge variant="outline">
-                        {{ getBillingTypeText(cardTypes[index]?.billing_type || '') }}
-                      </UiBadge>
-                    </UiTableCell>
-                    <UiTableCell>
-                      ¥{{ cardTypes[index]?.price || 0 }}
-                    </UiTableCell>
-                  </UiTableRow>
-                </UiTableBody>
-              </UiTable>
-            </div>
-          </div>
-        </div>
-
-        <UiDialogFooter>
-          <UiButton variant="outline" @click="showAuthorizeDialog = false">
-            取消
-          </UiButton>
-          <UiButton :disabled="authorizing" @click="handleAuthorize">
-            <div v-if="authorizing" class="i-lucide-loader-2 mr-2 h-4 w-4 animate-spin" />
-            确认授权
-          </UiButton>
-        </UiDialogFooter>
-      </UiDialogContent>
-    </UiDialog>
-
     <ConfirmDialog
       v-model:open="showRemoveDialog"
       title="移除授权"

frontend/src/router/routes.ts

@@ -173,6 +173,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/pages/admin/agent-apps/index.vue'),
         meta: { title: '授权管理 - 管理后台' },
       },
+      {
+        path: 'agent-apps/create',
+        name: 'AdminAgentAppsCreate',
+        component: () => import('@/pages/admin/agent-apps/create.vue'),
+        meta: { title: '新建授权 - 管理后台' },
+      },
       {
         path: 'agents',
         name: 'AdminAgents',