feat: 优化授权管理页面为单卡片交互

- 将代理、应用、卡类权限合并到一个卡片中显示
- 编辑时代理和应用可编辑
- 添加卡类后直接显示在下方列表，可删除和修改价格

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

frontend/src/pages/admin/agent-apps/[id].vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Check, Eye, Info, Loader2, Plus, X } from 'lucide-vue-next'
+import { Check, Eye, Info, Loader2, Plus, Trash2 } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import { BasicPage } from '@/components/global-layout'
+import { BasicPage } from '@/components/global-ayout'
 import api from '@/services/api'
 
 const router = useRouter()
@@ -67,6 +67,10 @@ const selectedApplication = computed(() => {
   return null
 })
 
+const availableCardTypes = computed(() => {
+  return cardTypes.value.filter(c => !permissions.value.some(p => p.card_type_id === c.id))
+})
+
 async function fetchAgents() {
   try {
     const data = await api.get<{ agents?: Agent[] }>('/dev/agents')
@@ -140,11 +144,6 @@ function addPermission() {
   const cardType = cardTypes.value.find(ct => String(ct.id) === selectedCardTypeId.value)
   if (!cardType) return
 
-  if (permissions.value.some(p => p.card_type_id === cardType.id)) {
-    toast.error('该卡类已添加')
-    return
-  }
-
   permissions.value.push({
     card_type_id: cardType.id,
     card_type_name: cardType.name,
@@ -170,7 +169,7 @@ async function handleSave() {
   }
 
   if (permissions.value.length === 0) {
-    toast.error('请至少添加一个卡类权限')
+    toast.error('请至少添加一个卡类')
     return
   }
 
@@ -183,6 +182,8 @@ async function handleSave() {
     }))
 
     await api.put(`/dev/agent-apps/${agentAppId.value}`, {
+      agent_id: Number(form.value.agent_id),
+      application_id: Number(form.value.application_id),
       card_types: cardTypesPayload,
       discount: 0,
       remark: form.value.remark,
@@ -226,107 +227,88 @@ onMounted(() => {
             <UiCardHeader>
               <UiCardTitle class="flex items-center gap-2">
                 <Info class="size-5" />
-                基本信息
+                授权信息
               </UiCardTitle>
-              <UiCardDescription>查看代理和应用信息</UiCardDescription>
+              <UiCardDescription>选择代理、应用和卡类</UiCardDescription>
             </UiCardHeader>
             <UiCardContent class="space-y-6">
-              <div class="space-y-2">
+              <div class="grid gap-4 sm:grid-cols-2">
-                <UiLabel>代理</UiLabel>
+                <div class="space-y-2">
-                <UiSelect v-model="form.agent_id" disabled>
+                  <UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
-                  <UiSelectTrigger>
+                  <UiSelect v-model="form.agent_id">
-                    <UiSelectValue placeholder="请选择代理" />
-                  </UiSelectTrigger>
-                  <UiSelectContent>
-                    <UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
-                      {{ agent.username }}
-                    </UiSelectItem>
-                  </UiSelectContent>
-                </UiSelect>
-                <p class="text-xs text-muted-foreground">编辑时不可修改代理</p>
-              </div>
-
-              <div class="space-y-2">
-                <UiLabel>应用</UiLabel>
-                <UiSelect v-model="form.application_id" disabled>
-                  <UiSelectTrigger>
-                    <UiSelectValue placeholder="请选择应用" />
-                  </UiSelectTrigger>
-                  <UiSelectContent>
-                    <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
-                      {{ app.name }}
-                    </UiSelectItem>
-                  </UiSelectContent>
-                </UiSelect>
-                <p class="text-xs text-muted-foreground">编辑时不可修改应用</p>
-              </div>
-
-              <div class="space-y-2">
-                <UiLabel>备注</UiLabel>
-                <UiTextarea
-                  v-model="form.remark"
-                  placeholder="输入备注信息（可选）"
-                  rows="3"
-                />
-              </div>
-            </UiCardContent>
-          </UiCard>
-
-          <UiCard v-if="form.application_id && cardTypes.length > 0">
-            <UiCardHeader>
-              <UiCardTitle class="flex items-center gap-2">
-                <Plus class="size-5" />
-                卡类权限
-              </UiCardTitle>
-              <UiCardDescription>为代理添加卡类授权</UiCardDescription>
-            </UiCardHeader>
-            <UiCardContent class="space-y-4">
-              <div class="flex gap-3">
-                <div class="flex-1">
-                  <UiSelect v-model="selectedCardTypeId">
                     <UiSelectTrigger>
-                      <UiSelectValue placeholder="选择卡类" />
+                      <UiSelectValue placeholder="请选择代理" />
                     </UiSelectTrigger>
                     <UiSelectContent>
-                      <UiSelectItem
+                      <UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
-                        v-for="ct in cardTypes.filter(c => !permissions.some(p => p.card_type_id === c.id))"
+                        {{ agent.username }}
-                        :key="ct.id"
-                        :value="String(ct.id)"
-                      >
-                        {{ ct.name }} ({{ ct.billing_type }})
                       </UiSelectItem>
                     </UiSelectContent>
                   </UiSelect>
                 </div>
-                <UiButton @click="addPermission">
-                  <Plus class="mr-1 h-4 w-4" />
-                  添加
-                </UiButton>
-              </div>
 
-              <div v-if="permissions.length > 0" class="border rounded-lg divide-y">
+                <div class="space-y-2">
-                <div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3">
+                  <UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
-                  <div class="flex-1">
+                  <UiSelect v-model="form.application_id" @update:model-value="fetchCardTypes($event)">
-                    <div class="font-medium">{{ p.card_type_name }}</div>
+                    <UiSelectTrigger>
-                    <div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
+                      <UiSelectValue placeholder="请选择应用" />
-                  </div>
+                    </UiSelectTrigger>
-                  <div class="flex items-center gap-2">
+                    <UiSelectContent>
-                    <div class="flex items-center gap-1">
+                      <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
-                      <span class="text-muted-foreground">¥</span>
+                        {{ app.name }}
-                      <UiInput
+                      </UiSelectItem>
-                        class="w-20 text-right"
+                    </UiSelectContent>
-                        v-model.number="p.price"
+                  </UiSelect>
-                      />
-                    </div>
-                    <UiButton variant="ghost" size="icon" @click="removePermission(index)">
-                      <X class="h-4 w-4" />
-                    </UiButton>
-                  </div>
                 </div>
               </div>
-              <p v-else class="text-sm text-muted-foreground text-center py-4">
+
-                请选择卡类添加到授权列表
+              <div class="space-y-3">
-              </p>
+                <UiLabel>卡类权限 <span class="text-destructive">*</span></UiLabel>
+                <div class="flex gap-3">
+                  <div class="flex-1">
+                    <UiSelect v-model="selectedCardTypeId" :disabled="!form.application_id">
+                      <UiSelectTrigger>
+                        <UiSelectValue placeholder="选择卡类" />
+                      </UiSelectTrigger>
+                      <UiSelectContent>
+                        <UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
+                          {{ ct.name }} ({{ ct.billing_type }})
+                        </UiSelectItem>
+                      </UiSelectContent>
+                    </UiSelect>
+                  </div>
+                  <UiButton @click="addPermission" :disabled="!form.application_id">
+                    <Plus class="mr-1 h-4 w-4" />
+                    添加
+                  </UiButton>
+                </div>
+
+                <div v-if="permissions.length > 0" class="border rounded-lg divide-y max-h-64 overflow-y-auto">
+                  <div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3 gap-4">
+                    <div class="flex-1 min-w-0">
+                      <div class="font-medium truncate">{{ p.card_type_name }}</div>
+                      <div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                      <div class="flex items-center gap-1">
+                        <span class="text-muted-foreground">¥</span>
+                        <UiInput class="w-20 text-right" v-model.number="p.price" />
+                      </div>
+                      <UiButton variant="ghost" size="icon" @click="removePermission(index)">
+                        <Trash2 class="h-4 w-4 text-destructive" />
+                      </UiButton>
+                    </div>
+                  </div>
+                </div>
+                <p v-else class="text-sm text-muted-foreground text-center py-4">
+                  {{ form.application_id ? '请选择卡类添加到授权列表' : '请先选择应用' }}
+                </p>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>备注</UiLabel>
+                <UiTextarea v-model="form.remark" placeholder="输入备注信息（可选）" rows="2" />
+              </div>
             </UiCardContent>
           </UiCard>
         </div>
@@ -364,21 +346,12 @@ onMounted(() => {
           <UiCard>
             <UiCardContent class="pt-6">
               <div class="flex flex-col gap-3">
-                <UiButton
+                <UiButton class="w-full" size="lg" :disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0" @click="handleSave">
-                  class="w-full"
-                  size="lg"
-                  :disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0"
-                  @click="handleSave"
-                >
                   <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
                   <Check v-else class="mr-2 h-4 w-4" />
                   保存修改
                 </UiButton>
-                <UiButton
+                <UiButton variant="outline" class="w-full" @click="router.back()">
-                  variant="outline"
-                  class="w-full"
-                  @click="router.back()"
-                >
                   取消
                 </UiButton>
               </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CheckCircle, Eye, Info, Loader2, Plus, X } from 'lucide-vue-next'
+import { Eye, Info, Loader2, Plus, Trash2, X } from 'lucide-vite-next'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -63,11 +63,8 @@ const selectedApplication = computed(() => {
   return null
 })
 
-const selectedCardType = computed(() => {
+const availableCardTypes = computed(() => {
-  if (selectedCardTypeId.value) {
+  return cardTypes.value.filter(c => !permissions.value.some(p => p.card_type_id === c.id))
-    return cardTypes.value.find(ct => String(ct.id) === selectedCardTypeId.value)
-  }
-  return null
 })
 
 async function fetchAgents() {
@@ -108,11 +105,6 @@ function addPermission() {
   const cardType = cardTypes.value.find(ct => String(ct.id) === selectedCardTypeId.value)
   if (!cardType) return
 
-  if (permissions.value.some(p => p.card_type_id === cardType.id)) {
-    toast.error('该卡类已添加')
-    return
-  }
-
   permissions.value.push({
     card_type_id: cardType.id,
     card_type_name: cardType.name,
@@ -138,7 +130,7 @@ async function handleSave() {
   }
 
   if (permissions.value.length === 0) {
-    toast.error('请至少添加一个卡类权限')
+    toast.error('请至少添加一个卡类')
     return
   }
 
@@ -191,105 +183,88 @@ onMounted(() => {
             <UiCardHeader>
               <UiCardTitle class="flex items-center gap-2">
                 <Info class="size-5" />
-                基本信息
+                授权信息
               </UiCardTitle>
-              <UiCardDescription>选择代理和应用</UiCardDescription>
+              <UiCardDescription>选择代理、应用和卡类</UiCardDescription>
             </UiCardHeader>
             <UiCardContent class="space-y-6">
-              <div class="space-y-2">
+              <div class="grid gap-4 sm:grid-cols-2">
-                <UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
+                <div class="space-y-2">
-                <UiSelect v-model="form.agent_id">
+                  <UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
-                  <UiSelectTrigger>
+                  <UiSelect v-model="form.agent_id">
-                    <UiSelectValue placeholder="请选择代理" />
-                  </UiSelectTrigger>
-                  <UiSelectContent>
-                    <UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
-                      {{ agent.username }}
-                    </UiSelectItem>
-                  </UiSelectContent>
-                </UiSelect>
-              </div>
-
-              <div class="space-y-2">
-                <UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
-                <UiSelect v-model="form.application_id" @update:model-value="fetchCardTypes($event)">
-                  <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>
-                <UiTextarea
-                  v-model="form.remark"
-                  placeholder="输入备注信息（可选）"
-                  rows="3"
-                />
-              </div>
-            </UiCardContent>
-          </UiCard>
-
-          <UiCard v-if="form.application_id && cardTypes.length > 0">
-            <UiCardHeader>
-              <UiCardTitle class="flex items-center gap-2">
-                <CheckCircle class="size-5" />
-                卡类权限
-              </UiCardTitle>
-              <UiCardDescription>为代理添加卡类授权</UiCardDescription>
-            </UiCardHeader>
-            <UiCardContent class="space-y-4">
-              <div class="flex gap-3">
-                <div class="flex-1">
-                  <UiSelect v-model="selectedCardTypeId">
                     <UiSelectTrigger>
-                      <UiSelectValue placeholder="选择卡类" />
+                      <UiSelectValue placeholder="请选择代理" />
                     </UiSelectTrigger>
                     <UiSelectContent>
-                      <UiSelectItem
+                      <UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
-                        v-for="ct in cardTypes.filter(c => !permissions.some(p => p.card_type_id === c.id))"
+                        {{ agent.username }}
-                        :key="ct.id"
-                        :value="String(ct.id)"
-                      >
-                        {{ ct.name }} ({{ ct.billing_type }})
                       </UiSelectItem>
                     </UiSelectContent>
                   </UiSelect>
                 </div>
-                <UiButton @click="addPermission">
-                  <Plus class="mr-1 h-4 w-4" />
-                  添加
-                </UiButton>
-              </div>
 
-              <div v-if="permissions.length > 0" class="border rounded-lg divide-y">
+                <div class="space-y-2">
-                <div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3">
+                  <UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
-                  <div class="flex-1">
+                  <UiSelect v-model="form.application_id" @update:model-value="fetchCardTypes($event)">
-                    <div class="font-medium">{{ p.card_type_name }}</div>
+                    <UiSelectTrigger>
-                    <div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
+                      <UiSelectValue placeholder="请选择应用" />
-                  </div>
+                    </UiSelectTrigger>
-                  <div class="flex items-center gap-2">
+                    <UiSelectContent>
-                    <div class="flex items-center gap-1">
+                      <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
-                      <span class="text-muted-foreground">¥</span>
+                        {{ app.name }}
-                      <UiInput
+                      </UiSelectItem>
-                        class="w-20 text-right"
+                    </UiSelectContent>
-                        v-model.number="p.price"
+                  </UiSelect>
-                      />
-                    </div>
-                    <UiButton variant="ghost" size="icon" @click="removePermission(index)">
-                      <X class="h-4 w-4" />
-                    </UiButton>
-                  </div>
                 </div>
               </div>
-              <p v-else class="text-sm text-muted-foreground text-center py-4">
+
-                请选择卡类添加到授权列表
+              <div class="space-y-3">
-              </p>
+                <UiLabel>卡类权限 <span class="text-destructive">*</span></UiLabel>
+                <div class="flex gap-3">
+                  <div class="flex-1">
+                    <UiSelect v-model="selectedCardTypeId" :disabled="!form.application_id">
+                      <UiSelectTrigger>
+                        <UiSelectValue placeholder="选择卡类" />
+                      </UiSelectTrigger>
+                      <UiSelectContent>
+                        <UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
+                          {{ ct.name }} ({{ ct.billing_type }})
+                        </UiSelectItem>
+                      </UiSelectContent>
+                    </UiSelect>
+                  </div>
+                  <UiButton @click="addPermission" :disabled="!form.application_id">
+                    <Plus class="mr-1 h-4 w-4" />
+                    添加
+                  </UiButton>
+                </div>
+
+                <div v-if="permissions.length > 0" class="border rounded-lg divide-y max-h-64 overflow-y-auto">
+                  <div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3 gap-4">
+                    <div class="flex-1 min-w-0">
+                      <div class="font-medium truncate">{{ p.card_type_name }}</div>
+                      <div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
+                    </div>
+                    <div class="flex items-center gap-2 shrink-0">
+                      <div class="flex items-center gap-1">
+                        <span class="text-muted-foreground">¥</span>
+                        <UiInput class="w-20 text-right" v-model.number="p.price" />
+                      </div>
+                      <UiButton variant="ghost" size="icon" @click="removePermission(index)">
+                        <Trash2 class="h-4 w-4 text-destructive" />
+                      </UiButton>
+                    </div>
+                  </div>
+                </div>
+                <p v-else class="text-sm text-muted-foreground text-center py-4">
+                  {{ form.application_id ? '请选择卡类添加到授权列表' : '请先选择应用' }}
+                </p>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>备注</UiLabel>
+                <UiTextarea v-model="form.remark" placeholder="输入备注信息（可选）" rows="2" />
+              </div>
             </UiCardContent>
           </UiCard>
         </div>
@@ -327,21 +302,12 @@ onMounted(() => {
           <UiCard>
             <UiCardContent class="pt-6">
               <div class="flex flex-col gap-3">
-                <UiButton
+                <UiButton class="w-full" size="lg" :disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0" @click="handleSave">
-                  class="w-full"
-                  size="lg"
-                  :disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0"
-                  @click="handleSave"
-                >
                   <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
                   <Plus v-else class="mr-2 h-4 w-4" />
                   确认授权
                 </UiButton>
-                <UiButton
+                <UiButton variant="outline" class="w-full" @click="router.back()">
-                  variant="outline"
-                  class="w-full"
-                  @click="router.back()"
-                >
                   取消
                 </UiButton>
               </div>
@@ -351,4 +317,4 @@ onMounted(() => {
       </div>
     </div>
   </BasicPage>
-</template>
+</template>