From 0bd52e6bf1a4dd8f9e314bf7e565e41d62139262 Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Sat, 9 May 2026 05:05:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B7=BB=E5=8A=A0/?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=8E=88=E6=9D=83=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一使用单个 UiCard，设置 max-w-2xl

- 移除显式的面包屑导航配置

- 调整按钮顺序，取消在前，确认在后

- 将卡类权限表格整合到基本信息卡片中

- 参考卡密管理子页面样式
---
 frontend/src/pages/admin/agent-apps/[id].vue  | 151 ++++++++----------
 .../src/pages/admin/agent-apps/create.vue     | 142 ++++++++--------
 2 files changed, 134 insertions(+), 159 deletions(-)

diff --git a/frontend/src/pages/admin/agent-apps/[id].vue b/frontend/src/pages/admin/agent-apps/[id].vue
index 9f6a7e5..cde7be3 100644
--- a/frontend/src/pages/admin/agent-apps/[id].vue
+++ b/frontend/src/pages/admin/agent-apps/[id].vue
@@ -158,78 +158,67 @@ onMounted(() => {
   <BasicPage
     title="编辑授权"
     description="修改代理的应用授权配置"
-    :breadcrumbs="[
-      { title: t('nav.agentApps'), href: '/admin/agent-apps' },
-      { title: '编辑授权' },
-    ]"
     sticky
   >
     <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 class="max-w-4xl mx-auto space-y-6">
-      <UiCard>
-        <UiCardHeader>
-          <UiCardTitle>基本信息</UiCardTitle>
-          <UiCardDescription>选择代理和应用</UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent class="space-y-6">
-          <div class="grid gap-6 md:grid-cols-2">
-            <div class="space-y-2">
-              <UiLabel>选择代理</UiLabel>
-              <UiSelect 
-                v-model="form.agent_id" 
-                disabled
-              >
-                <UiSelectTrigger>
-                  <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>
+    <UiCard v-else class="max-w-2xl">
+      <UiCardHeader>
+        <UiCardTitle>基本信息</UiCardTitle>
+        <UiCardDescription>
+          查看代理和应用信息
+        </UiCardDescription>
+      </UiCardHeader>
+      <UiCardContent class="space-y-6">
+        <div class="space-y-2">
+          <UiLabel>代理</UiLabel>
+          <UiSelect 
+            v-model="form.agent_id" 
+            disabled
+          >
+            <UiSelectTrigger>
+              <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>
+        <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>
+        <div class="space-y-2">
+          <UiLabel>备注</UiLabel>
+          <UiTextarea
+            v-model="form.remark"
+            placeholder="输入备注信息（可选）"
+            rows="3"
+          />
+        </div>
 
-      <UiCard v-if="form.application_id && cardTypes.length > 0">
-        <UiCardHeader>
-          <UiCardTitle>卡类权限</UiCardTitle>
-          <UiCardDescription>配置代理可以生成的卡类和价格</UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent>
+        <div v-if="form.application_id && cardTypes.length > 0" class="space-y-3">
+          <UiLabel>卡类权限</UiLabel>
           <div class="border rounded-lg overflow-hidden">
             <div class="overflow-x-auto">
               <table class="w-full text-sm">
@@ -266,25 +255,27 @@ onMounted(() => {
               </table>
             </div>
           </div>
-          <p class="text-xs text-muted-foreground mt-3">
+          <p class="text-xs text-muted-foreground">
             提示：取消勾选"授权"列可以禁止代理生成该类型的卡密
           </p>
-        </UiCardContent>
-      </UiCard>
+        </div>
 
-      <div class="flex gap-3">
-        <UiButton 
-          :disabled="saving || !form.agent_id || !form.application_id" 
-          @click="handleSave"
-        >
-          <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
-          <CheckCircle v-else class="mr-2 h-4 w-4" />
-          保存修改
-        </UiButton>
-        <UiButton variant="outline" @click="router.back()">
-          取消
-        </UiButton>
-      </div>
-    </div>
+        <div class="flex gap-3">
+          <UiButton variant="outline" as-child>
+            <router-link to="/admin/agent-apps">
+              取消
+            </router-link>
+          </UiButton>
+          <UiButton
+            :disabled="saving || !form.agent_id || !form.application_id"
+            @click="handleSave"
+          >
+            <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
+            <CheckCircle v-else class="mr-2 h-4 w-4" />
+            保存修改
+          </UiButton>
+        </div>
+      </UiCardContent>
+    </UiCard>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/agent-apps/create.vue b/frontend/src/pages/admin/agent-apps/create.vue
index 6cfa363..07ed1c0 100644
--- a/frontend/src/pages/admin/agent-apps/create.vue
+++ b/frontend/src/pages/admin/agent-apps/create.vue
@@ -41,13 +41,6 @@ const form = ref({
   card_type_auth: {} as Record<string, boolean>,
 })
 
-const selectedApplication = computed(() => {
-  if (form.value.application_id) {
-    return applications.value.find(app => String(app.id) === form.value.application_id)
-  }
-  return null
-})
-
 async function fetchAgents() {
   try {
     const data = await api.get<{ agents?: Agent[] }>('/dev/agents')
@@ -137,66 +130,55 @@ onMounted(() => {
   <BasicPage
     title="添加授权"
     description="为代理添加新的应用授权"
-    :breadcrumbs="[
-      { title: t('nav.agentApps'), href: '/admin/agent-apps' },
-      { title: '添加授权' },
-    ]"
     sticky
   >
-    <div class="max-w-4xl mx-auto space-y-6">
-      <UiCard>
-        <UiCardHeader>
-          <UiCardTitle>基本信息</UiCardTitle>
-          <UiCardDescription>选择代理和应用</UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent class="space-y-6">
-          <div class="grid gap-6 md:grid-cols-2">
-            <div class="space-y-2">
-              <UiLabel>选择代理 <span class="text-destructive">*</span></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 }}
-                  </UiSelectItem>
-                </UiSelectContent>
-              </UiSelect>
-            </div>
+    <UiCard class="max-w-2xl">
+      <UiCardHeader>
+        <UiCardTitle>基本信息</UiCardTitle>
+        <UiCardDescription>
+          选择代理和应用
+        </UiCardDescription>
+      </UiCardHeader>
+      <UiCardContent class="space-y-6">
+        <div class="space-y-2">
+          <UiLabel>选择代理 <span class="text-destructive">*</span></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 }}
+              </UiSelectItem>
+            </UiSelectContent>
+          </UiSelect>
+        </div>
 
-            <div class="space-y-2">
-              <UiLabel>选择应用 <span class="text-destructive">*</span></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>
+        <div class="space-y-2">
+          <UiLabel>选择应用 <span class="text-destructive">*</span></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>
-            <UiTextarea
-              v-model="form.remark"
-              placeholder="输入备注信息（可选）"
-              rows="3"
-            />
-          </div>
-        </UiCardContent>
-      </UiCard>
+        <div class="space-y-2">
+          <UiLabel>备注</UiLabel>
+          <UiTextarea
+            v-model="form.remark"
+            placeholder="输入备注信息（可选）"
+            rows="3"
+          />
+        </div>
 
-      <UiCard v-if="form.application_id && cardTypes.length > 0">
-        <UiCardHeader>
-          <UiCardTitle>卡类权限</UiCardTitle>
-          <UiCardDescription>配置代理可以生成的卡类和价格</UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent>
+        <div v-if="form.application_id && cardTypes.length > 0" class="space-y-3">
+          <UiLabel>卡类权限</UiLabel>
           <div class="border rounded-lg overflow-hidden">
             <div class="overflow-x-auto">
               <table class="w-full text-sm">
@@ -233,25 +215,27 @@ onMounted(() => {
               </table>
             </div>
           </div>
-          <p class="text-xs text-muted-foreground mt-3">
+          <p class="text-xs text-muted-foreground">
             提示：取消勾选"授权"列可以禁止代理生成该类型的卡密
           </p>
-        </UiCardContent>
-      </UiCard>
+        </div>
 
-      <div class="flex gap-3">
-        <UiButton 
-          :disabled="saving || !form.agent_id || !form.application_id" 
-          @click="handleSave"
-        >
-          <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
-          <CheckCircle v-else class="mr-2 h-4 w-4" />
-          确认授权
-        </UiButton>
-        <UiButton variant="outline" @click="router.back()">
-          取消
-        </UiButton>
-      </div>
-    </div>
+        <div class="flex gap-3">
+          <UiButton variant="outline" as-child>
+            <router-link to="/admin/agent-apps">
+              取消
+            </router-link>
+          </UiButton>
+          <UiButton
+            :disabled="saving || !form.agent_id || !form.application_id"
+            @click="handleSave"
+          >
+            <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
+            <CheckCircle v-else class="mr-2 h-4 w-4" />
+            确认授权
+          </UiButton>
+        </div>
+      </UiCardContent>
+    </UiCard>
   </BasicPage>
 </template>