diff --git a/frontend/src/pages/admin/agent-apps/[id]/card-types.vue b/frontend/src/pages/admin/agent-apps/[id]/card-types.vue
deleted file mode 100644
index 36713e2..0000000
--- a/frontend/src/pages/admin/agent-apps/[id]/card-types.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<script setup lang="ts">
-import { ArrowLeft, CheckCheck, Loader2, X } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { toast } from 'vue-sonner'
-
-import { BasicPage } from '@/components/global-layout'
-import { API_BASE } from '@/utils/config'
-
-interface CardType {
-  id: number
-  name: string
-  billing_type: string
-  price: number
-}
-
-interface CardTypePermission {
-  card_type_id: number
-  name: string
-  billing_type: string
-  price: number
-  can_generate: boolean
-}
-
-const route = useRoute()
-const router = useRouter()
-
-const loading = ref(true)
-const saving = ref(false)
-const agentAppName = ref('')
-const cardTypeForm = ref<CardTypePermission[]>([])
-
-function getBillingTypeText(type: string) {
-  const map: Record<string, string> = {
-    subscription: '订阅',
-    time: '计时',
-    point: '点卡',
-  }
-  return map[type] || type
-}
-
-async function fetchData() {
-  loading.value = true
-  try {
-    const token = localStorage.getItem('token')
-
-    const [agentAppRes, cardTypesRes] = await Promise.all([
-      fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
-        headers: { Authorization: `Bearer ${token}` },
-      }),
-      fetch(`${API_BASE}/dev/card-types`, {
-        headers: { Authorization: `Bearer ${token}` },
-      }),
-    ])
-
-    const [agentAppData, cardTypesData] = await Promise.all([
-      agentAppRes.json(),
-      cardTypesRes.json(),
-    ])
-
-    if (agentAppData.code === 200 && agentAppData.agent_app) {
-      agentAppName.value = `${agentAppData.agent_app.agent_name} - ${agentAppData.agent_app.app_name}`
-      const existingPerms = agentAppData.agent_app.card_types || []
-
-      const allCardTypes = cardTypesData.card_types || []
-      cardTypeForm.value = allCardTypes.map((ct: CardType) => {
-        const existing = existingPerms.find((p: any) => p.card_type_id === ct.id)
-        return {
-          card_type_id: ct.id,
-          name: ct.name,
-          billing_type: ct.billing_type,
-          price: ct.price,
-          can_generate: existing ? existing.can_generate : false,
-        }
-      })
-    }
-    else {
-      toast.error('获取授权信息失败')
-      router.push('/admin/agent-apps')
-    }
-  }
-  catch (error) {
-    console.error('获取数据失败:', error)
-    toast.error('获取数据失败')
-    router.push('/admin/agent-apps')
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-function selectAll() {
-  cardTypeForm.value.forEach(ct => ct.can_generate = true)
-}
-
-function clearAll() {
-  cardTypeForm.value.forEach(ct => ct.can_generate = false)
-}
-
-async function handleSubmit() {
-  saving.value = true
-  try {
-    const token = localStorage.getItem('token')
-    const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}/card-types`, {
-      method: 'PUT',
-      headers: {
-        'Authorization': `Bearer ${token}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        card_types: cardTypeForm.value.map(ct => ({
-          card_type_id: ct.card_type_id,
-          can_generate: ct.can_generate,
-        })),
-      }),
-    })
-
-    const data = await response.json()
-    if (data.code === 200) {
-      toast.success('保存成功')
-      router.push('/admin/agent-apps')
-    }
-    else {
-      toast.error(data.message || '保存失败')
-    }
-  }
-  catch (error) {
-    console.error('保存失败:', error)
-    toast.error('保存失败')
-  }
-  finally {
-    saving.value = false
-  }
-}
-
-function goBack() {
-  router.push('/admin/agent-apps')
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <BasicPage
-    title="卡密权限配置"
-    description="配置代理商可生成的卡密类型"
-  >
-    <template #actions>
-      <UiButton variant="outline" @click="goBack">
-        <ArrowLeft class="mr-2 h-4 w-4" />
-        返回
-      </UiButton>
-    </template>
-
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
-    </div>
-
-    <div v-else class="space-y-6">
-      <UiCard>
-        <UiCardHeader>
-          <UiCardTitle>授权信息</UiCardTitle>
-          <UiCardDescription>
-            {{ agentAppName }}
-          </UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent>
-          <div class="flex gap-2 mb-4">
-            <UiButton variant="outline" size="sm" @click="selectAll">
-              <CheckCheck class="mr-2 h-4 w-4" />
-              全选
-            </UiButton>
-            <UiButton variant="outline" size="sm" @click="clearAll">
-              <X class="mr-2 h-4 w-4" />
-              清空
-            </UiButton>
-          </div>
-        </UiCardContent>
-      </UiCard>
-
-      <UiCard>
-        <UiCardContent class="p-0">
-          <UiTable>
-            <UiTableHeader>
-              <UiTableRow>
-                <UiTableHead class="w-12" />
-                <UiTableHead>卡类名称</UiTableHead>
-                <UiTableHead>计费类型</UiTableHead>
-                <UiTableHead>价格</UiTableHead>
-              </UiTableRow>
-            </UiTableHeader>
-            <UiTableBody>
-              <UiTableRow
-                v-for="cardType in cardTypeForm"
-                :key="cardType.card_type_id"
-                :class="cardType.can_generate ? 'bg-accent/50' : ''"
-                class="cursor-pointer"
-                @click="cardType.can_generate = !cardType.can_generate"
-              >
-                <UiTableCell>
-                  <UiCheckbox
-                    :checked="cardType.can_generate"
-                    @update:checked="cardType.can_generate = $event"
-                    @click.stop
-                  />
-                </UiTableCell>
-                <UiTableCell class="font-medium">
-                  {{ cardType.name }}
-                </UiTableCell>
-                <UiTableCell>
-                  <UiBadge variant="outline">
-                    {{ getBillingTypeText(cardType.billing_type) }}
-                  </UiBadge>
-                </UiTableCell>
-                <UiTableCell>
-                  ¥{{ cardType.price }}
-                </UiTableCell>
-              </UiTableRow>
-            </UiTableBody>
-          </UiTable>
-        </UiCardContent>
-        <UiCardFooter class="flex justify-end gap-2">
-          <UiButton variant="outline" @click="goBack">
-            取消
-          </UiButton>
-          <UiButton :disabled="saving" @click="handleSubmit">
-            <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
-            保存
-          </UiButton>
-        </UiCardFooter>
-      </UiCard>
-    </div>
-  </BasicPage>
-</template>
diff --git a/frontend/src/pages/admin/agent-apps/[id]/edit.vue b/frontend/src/pages/admin/agent-apps/[id]/edit.vue
index a7c74f2..b55c438 100644
--- a/frontend/src/pages/admin/agent-apps/[id]/edit.vue
+++ b/frontend/src/pages/admin/agent-apps/[id]/edit.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ArrowLeft, Loader2, Wallet } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
+import { ArrowLeft, Check, CheckCheck, Eye, Loader2, X } from 'lucide-vue-next'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { AgentApp } from '@/pages/admin/agent-apps/data/schema'
+import type { AgentApp, CardTypeAuth } from '@/pages/admin/agent-apps/data/schema'
 
 import { BasicPage } from '@/components/global-layout'
-import { API_BASE } from '@/utils/config'
+import api from '@/services/api'
 
 const route = useRoute()
 const router = useRouter()
@@ -17,24 +17,56 @@ const saving = ref(false)
 const agentApp = ref<AgentApp | null>(null)
 
 const form = ref({
-  discount: 1.0,
   status: 'active',
+  discount: 1.0,
+  card_types: [] as Array<{
+    card_type_id: number
+    name: string
+    billing_type: string
+    origin_price: number
+    price: number
+    can_generate: boolean
+  }>,
 })
 
+const agentAppId = computed(() => route.params.id as string)
+
+function getBillingTypeText(type: string) {
+  const map: Record<string, string> = {
+    subscription: '订阅',
+    time: '计时',
+    point: '点卡',
+  }
+  return map[type] || type
+}
+
 async function fetchAgentApp() {
   loading.value = true
   try {
-    const token = localStorage.getItem('token')
-    const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
-      headers: { Authorization: `Bearer ${token}` },
-    })
-    const data = await response.json()
-    if (data.code === 200 && data.agent_app) {
-      agentApp.value = data.agent_app
-      form.value = {
-        discount: data.agent_app.discount,
-        status: data.agent_app.status,
-      }
+    const [agentAppRes, cardTypesRes] = await Promise.all([
+      api.get<{ agent_app: AgentApp }>(`/dev/agent-apps/${agentAppId.value}`),
+      api.get<{ card_types: Array<{ id: number, name: string, billing_type: string, price: number }> }>('/dev/card-types'),
+    ])
+
+    if (agentAppRes?.agent_app) {
+      agentApp.value = agentAppRes.agent_app
+      form.value.status = agentAppRes.agent_app.status || 'active'
+      form.value.discount = agentAppRes.agent_app.discount || 1.0
+
+      const existingPerms = agentAppRes.agent_app.card_types || []
+      const allCardTypes = cardTypesRes?.card_types || []
+
+      form.value.card_types = allCardTypes.map((ct) => {
+        const existing = existingPerms.find((p: CardTypeAuth) => (p.card_type_id || p.id) === ct.id)
+        return {
+          card_type_id: ct.id,
+          name: ct.name,
+          billing_type: ct.billing_type,
+          origin_price: ct.price,
+          price: existing?.price || ct.price,
+          can_generate: existing ? existing.can_generate : false,
+        }
+      })
     }
     else {
       toast.error('获取授权信息失败')
@@ -51,6 +83,14 @@ async function fetchAgentApp() {
   }
 }
 
+function selectAll() {
+  form.value.card_types.forEach(ct => ct.can_generate = true)
+}
+
+function clearAll() {
+  form.value.card_types.forEach(ct => ct.can_generate = false)
+}
+
 async function handleSubmit() {
   if (form.value.discount < 0 || form.value.discount > 1) {
     toast.error('折扣必须在0-1之间')
@@ -59,28 +99,25 @@ async function handleSubmit() {
 
   saving.value = true
   try {
-    const token = localStorage.getItem('token')
-    const response = await fetch(`${API_BASE}/dev/agent-apps/${route.params.id}`, {
-      method: 'PUT',
-      headers: {
-        'Authorization': `Bearer ${token}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(form.value),
+    await api.put(`/dev/agent-apps/${agentAppId.value}`, {
+      status: form.value.status,
+      discount: form.value.discount,
     })
 
-    const data = await response.json()
-    if (data.code === 200) {
-      toast.success('保存成功')
-      router.push('/admin/agent-apps')
-    }
-    else {
-      toast.error(data.message || '保存失败')
-    }
+    await api.put(`/dev/agent-apps/${agentAppId.value}/card-types`, {
+      card_types: form.value.card_types.map(ct => ({
+        card_type_id: ct.card_type_id,
+        can_generate: ct.can_generate,
+        price: ct.price,
+      })),
+    })
+
+    toast.success('保存成功')
+    router.push('/admin/agent-apps')
   }
-  catch (error) {
+  catch (error: any) {
     console.error('保存失败:', error)
-    toast.error('保存失败')
+    toast.error(error.message || '保存失败')
   }
   finally {
     saving.value = false
@@ -91,6 +128,10 @@ function goBack() {
   router.push('/admin/agent-apps')
 }
 
+function goToView() {
+  router.push(`/admin/agent-apps/${agentAppId.value}/view`)
+}
+
 onMounted(() => {
   fetchAgentApp()
 })
@@ -100,94 +141,236 @@ onMounted(() => {
   <BasicPage
     title="编辑授权"
     description="修改代理商授权信息"
+    :breadcrumbs="[
+      { title: '授权管理', href: '/admin/agent-apps' },
+      { title: '编辑授权' },
+    ]"
+    sticky
   >
     <template #actions>
       <UiButton variant="outline" @click="goBack">
         <ArrowLeft class="mr-2 h-4 w-4" />
         返回
       </UiButton>
+      <UiButton variant="outline" @click="goToView">
+        <Eye class="mr-2 h-4 w-4" />
+        查看授权
+      </UiButton>
     </template>
 
     <div v-if="loading" class="flex items-center justify-center py-12">
       <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
     </div>
 
-    <div v-else-if="agentApp" class="max-w-2xl">
-      <UiCard>
-        <UiCardHeader>
-          <UiCardTitle>授权信息</UiCardTitle>
-          <UiCardDescription>
-            代理商: {{ agentApp.agent_name }} | 应用: {{ agentApp.app_name }}
-          </UiCardDescription>
-        </UiCardHeader>
-        <UiCardContent class="space-y-6">
-          <div class="space-y-2">
-            <UiLabel for="status">
-              状态
-            </UiLabel>
-            <UiSelect v-model="form.status">
-              <UiSelectTrigger>
-                <UiSelectValue placeholder="请选择状态" />
-              </UiSelectTrigger>
-              <UiSelectContent>
-                <UiSelectItem value="active">
-                  已授权
-                </UiSelectItem>
-                <UiSelectItem value="inactive">
-                  已禁用
-                </UiSelectItem>
-              </UiSelectContent>
-            </UiSelect>
-          </div>
+    <div v-else-if="agentApp" 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>基本信息</UiCardTitle>
+              <UiCardDescription>
+                代理: {{ agentApp.agent_name }} | 应用: {{ agentApp.app_name }}
+              </UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="grid grid-cols-2 gap-6">
+                <div class="space-y-2">
+                  <UiLabel>代理</UiLabel>
+                  <div class="flex items-center gap-2">
+                    <span class="font-medium">{{ agentApp.agent_name }}</span>
+                    <span v-if="agentApp.agent_email" class="text-xs text-muted-foreground">
+                      ({{ agentApp.agent_email }})
+                    </span>
+                  </div>
+                </div>
+                <div class="space-y-2">
+                  <UiLabel>应用</UiLabel>
+                  <div class="flex items-center gap-2">
+                    <UiBadge variant="secondary">
+                      {{ agentApp.app_name }}
+                    </UiBadge>
+                  </div>
+                </div>
+              </div>
 
-          <div class="space-y-2">
-            <UiLabel for="discount">
-              折扣
-            </UiLabel>
-            <div class="flex items-center gap-4">
-              <UiInput
-                id="discount"
-                v-model.number="form.discount"
-                type="number"
-                step="0.01"
-                min="0"
-                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-1
-            </p>
-          </div>
+              <div class="grid grid-cols-2 gap-6">
+                <div class="space-y-2">
+                  <UiLabel for="status">状态</UiLabel>
+                  <UiSelect v-model="form.status">
+                    <UiSelectTrigger>
+                      <UiSelectValue placeholder="请选择状态" />
+                    </UiSelectTrigger>
+                    <UiSelectContent>
+                      <UiSelectItem value="active">
+                        已启用
+                      </UiSelectItem>
+                      <UiSelectItem value="inactive">
+                        已禁用
+                      </UiSelectItem>
+                    </UiSelectContent>
+                  </UiSelect>
+                </div>
 
-          <div class="space-y-2">
-            <UiLabel>当前余额</UiLabel>
-            <div class="text-2xl font-bold">
-              ¥{{ agentApp.balance.toFixed(2) }}
-            </div>
-            <UiButton
-              variant="outline"
-              size="sm"
-              @click="router.push(`/admin/agent-apps/${route.params.id}/recharge`)"
-            >
-              <Wallet class="mr-2 h-4 w-4" />
-              充值余额
-            </UiButton>
-          </div>
-        </UiCardContent>
-        <UiCardFooter class="flex justify-end gap-2">
-          <UiButton variant="outline" @click="goBack">
-            取消
-          </UiButton>
-          <UiButton :disabled="saving" @click="handleSubmit">
-            <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
-            保存
-          </UiButton>
-        </UiCardFooter>
-      </UiCard>
+                <div class="space-y-2">
+                  <UiLabel for="discount">折扣</UiLabel>
+                  <div class="flex items-center gap-4">
+                    <UiNumberField
+                      v-model="form.discount"
+                      :min="0"
+                      :max="1"
+                      :step="0.01"
+                      class="flex-1"
+                    >
+                      <UiNumberFieldContent>
+                        <UiNumberFieldDecrement />
+                        <UiNumberFieldInput />
+                        <UiNumberFieldIncrement />
+                      </UiNumberFieldContent>
+                    </UiNumberField>
+                    <span class="text-sm text-muted-foreground w-16">
+                      {{ (form.discount * 10).toFixed(1) }}折
+                    </span>
+                  </div>
+                  <p class="text-xs text-muted-foreground">
+                    代理商购买卡密的折扣，范围0-1
+                  </p>
+                </div>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>当前余额</UiLabel>
+                <div class="text-2xl font-bold text-primary">
+                  ¥{{ (agentApp.balance || 0).toFixed(2) }}
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardHeader>
+              <div class="flex items-center justify-between">
+                <div>
+                  <UiCardTitle>卡密权限配置</UiCardTitle>
+                  <UiCardDescription>配置代理商可生成的卡密类型及价格</UiCardDescription>
+                </div>
+                <div class="flex gap-2">
+                  <UiButton variant="outline" size="sm" @click="selectAll">
+                    <CheckCheck class="mr-2 h-4 w-4" />
+                    全选
+                  </UiButton>
+                  <UiButton variant="outline" size="sm" @click="clearAll">
+                    <X class="mr-2 h-4 w-4" />
+                    清空
+                  </UiButton>
+                </div>
+              </div>
+            </UiCardHeader>
+            <UiCardContent>
+              <div v-if="form.card_types.length > 0">
+                <UiTable>
+                  <UiTableHeader>
+                    <UiTableRow>
+                      <UiTableHead class="w-12" />
+                      <UiTableHead>卡类名称</UiTableHead>
+                      <UiTableHead>计费类型</UiTableHead>
+                      <UiTableHead>原价</UiTableHead>
+                      <UiTableHead>授权价格</UiTableHead>
+                    </UiTableRow>
+                  </UiTableHeader>
+                  <UiTableBody>
+                    <UiTableRow
+                      v-for="ct in form.card_types"
+                      :key="ct.card_type_id"
+                      :class="ct.can_generate ? 'bg-primary/5' : ''"
+                      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">
+                        {{ ct.name }}
+                      </UiTableCell>
+                      <UiTableCell>
+                        <UiBadge variant="outline">
+                          {{ getBillingTypeText(ct.billing_type) }}
+                        </UiBadge>
+                      </UiTableCell>
+                      <UiTableCell>
+                        ¥{{ ct.origin_price }}
+                      </UiTableCell>
+                      <UiTableCell @click.stop>
+                        <UiNumberField v-model="ct.price" :min="0" class="w-32">
+                          <UiNumberFieldContent>
+                            <UiNumberFieldDecrement />
+                            <UiNumberFieldInput />
+                            <UiNumberFieldIncrement />
+                          </UiNumberFieldContent>
+                        </UiNumberField>
+                      </UiTableCell>
+                    </UiTableRow>
+                  </UiTableBody>
+                </UiTable>
+              </div>
+              <div v-else class="text-center py-8 text-muted-foreground">
+                暂无卡密类型
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle>统计信息</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 class="font-medium">{{ form.card_types.length }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">已授权</span>
+                  <span class="font-medium text-green-600">
+                    {{ form.card_types.filter(ct => ct.can_generate).length }}
+                  </span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">未授权</span>
+                  <span class="font-medium text-muted-foreground">
+                    {{ form.card_types.filter(ct => !ct.can_generate).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"
+                  @click="handleSubmit"
+                >
+                  <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 variant="outline" class="w-full" @click="goBack">
+                  取消
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
     </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/agent-apps/[id]/view.vue b/frontend/src/pages/admin/agent-apps/[id]/view.vue
new file mode 100644
index 0000000..5547ac1
--- /dev/null
+++ b/frontend/src/pages/admin/agent-apps/[id]/view.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ArrowLeft, CheckCircle, Key, Loader2, Pencil, XCircle } from 'lucide-vue-next'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toast } from 'vue-sonner'
+
+import type { AgentApp } from '@/pages/admin/agent-apps/data/schema'
+
+import { BasicPage } from '@/components/global-layout'
+import api from '@/services/api'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(true)
+const agentApp = ref<AgentApp | null>(null)
+
+const agentAppId = computed(() => route.params.id as string)
+
+function getBillingTypeText(type: string) {
+  const map: Record<string, string> = {
+    subscription: '订阅',
+    time: '计时',
+    point: '点卡',
+  }
+  return map[type] || type
+}
+
+async function fetchAgentApp() {
+  loading.value = true
+  try {
+    const data = await api.get<{ agent_app: AgentApp }>(`/dev/agent-apps/${agentAppId.value}`)
+    if (data?.agent_app) {
+      agentApp.value = data.agent_app
+    }
+    else {
+      toast.error('获取授权信息失败')
+      router.push('/admin/agent-apps')
+    }
+  }
+  catch (error) {
+    console.error('获取授权信息失败:', error)
+    toast.error('获取授权信息失败')
+    router.push('/admin/agent-apps')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function goBack() {
+  router.push('/admin/agent-apps')
+}
+
+function goToEdit() {
+  router.push(`/admin/agent-apps/${agentAppId.value}/edit`)
+}
+
+onMounted(() => {
+  fetchAgentApp()
+})
+</script>
+
+<template>
+  <BasicPage
+    title="查看授权"
+    description="查看授权详情信息"
+    :breadcrumbs="[
+      { title: '授权管理', href: '/admin/agent-apps' },
+      { title: '查看授权' },
+    ]"
+    sticky
+  >
+    <template #actions>
+      <UiButton variant="outline" @click="goBack">
+        <ArrowLeft class="mr-2 h-4 w-4" />
+        返回
+      </UiButton>
+      <UiButton @click="goToEdit">
+        <Pencil class="mr-2 h-4 w-4" />
+        编辑授权
+      </UiButton>
+    </template>
+
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+    </div>
+
+    <div v-else-if="agentApp" 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>基本信息</UiCardTitle>
+              <UiCardDescription>授权的基本信息</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent>
+              <div class="grid grid-cols-2 gap-6">
+                <div class="space-y-1">
+                  <span class="text-sm text-muted-foreground">代理</span>
+                  <p class="font-medium">{{ agentApp.agent_name }}</p>
+                  <p v-if="agentApp.agent_email" class="text-xs text-muted-foreground">
+                    {{ agentApp.agent_email }}
+                  </p>
+                </div>
+                <div class="space-y-1">
+                  <span class="text-sm text-muted-foreground">应用</span>
+                  <p class="font-medium">{{ agentApp.app_name }}</p>
+                </div>
+                <div class="space-y-1">
+                  <span class="text-sm text-muted-foreground">状态</span>
+                  <div>
+                    <UiBadge :variant="agentApp.status === 'active' ? 'default' : 'secondary'">
+                      <CheckCircle v-if="agentApp.status === 'active'" class="mr-1 h-3 w-3" />
+                      <XCircle v-else class="mr-1 h-3 w-3" />
+                      {{ agentApp.status === 'active' ? '已启用' : '已禁用' }}
+                    </UiBadge>
+                  </div>
+                </div>
+                <div class="space-y-1">
+                  <span class="text-sm text-muted-foreground">折扣</span>
+                  <p class="font-medium">{{ (agentApp.discount * 10).toFixed(1) }}折</p>
+                </div>
+                <div class="space-y-1">
+                  <span class="text-sm text-muted-foreground">余额</span>
+                  <p class="font-medium text-primary">¥{{ (agentApp.balance || 0).toFixed(2) }}</p>
+                </div>
+                <div class="space-y-1">
+                  <span class="text-sm text-muted-foreground">授权时间</span>
+                  <p class="font-medium">{{ agentApp.created_at }}</p>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Key class="size-5" />
+                卡密权限
+              </UiCardTitle>
+              <UiCardDescription>代理可生成的卡密类型及价格</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent>
+              <div v-if="agentApp.card_types && agentApp.card_types.length > 0">
+                <UiTable>
+                  <UiTableHeader>
+                    <UiTableRow>
+                      <UiTableHead>卡类名称</UiTableHead>
+                      <UiTableHead>计费类型</UiTableHead>
+                      <UiTableHead>原价</UiTableHead>
+                      <UiTableHead>授权价格</UiTableHead>
+                      <UiTableHead>状态</UiTableHead>
+                    </UiTableRow>
+                  </UiTableHeader>
+                  <UiTableBody>
+                    <UiTableRow v-for="ct in agentApp.card_types" :key="ct.card_type_id || ct.id">
+                      <UiTableCell class="font-medium">
+                        {{ ct.name }}
+                      </UiTableCell>
+                      <UiTableCell>
+                        <UiBadge variant="outline">
+                          {{ getBillingTypeText(ct.billing_type || '') }}
+                        </UiBadge>
+                      </UiTableCell>
+                      <UiTableCell>
+                        ¥{{ ct.origin_price || 0 }}
+                      </UiTableCell>
+                      <UiTableCell>
+                        ¥{{ ct.price || 0 }}
+                      </UiTableCell>
+                      <UiTableCell>
+                        <UiBadge :variant="ct.can_generate ? 'default' : 'secondary'">
+                          {{ ct.can_generate ? '已授权' : '未授权' }}
+                        </UiBadge>
+                      </UiTableCell>
+                    </UiTableRow>
+                  </UiTableBody>
+                </UiTable>
+              </div>
+              <div v-else class="text-center py-8 text-muted-foreground">
+                暂无卡密权限
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle>统计信息</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 class="font-medium">{{ agentApp.card_types?.length || 0 }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">已授权</span>
+                  <span class="font-medium text-green-600">
+                    {{ agentApp.card_types?.filter(ct => ct.can_generate).length || 0 }}
+                  </span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">未授权</span>
+                  <span class="font-medium text-muted-foreground">
+                    {{ agentApp.card_types?.filter(ct => !ct.can_generate).length || 0 }}
+                  </span>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton class="w-full" @click="goToEdit">
+                  <Pencil class="mr-2 h-4 w-4" />
+                  编辑授权
+                </UiButton>
+                <UiButton variant="outline" class="w-full" @click="goBack">
+                  返回列表
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
+  </BasicPage>
+</template>
diff --git a/frontend/src/pages/admin/agent-apps/index.vue b/frontend/src/pages/admin/agent-apps/index.vue
index 69d893d..86ccedf 100644
--- a/frontend/src/pages/admin/agent-apps/index.vue
+++ b/frontend/src/pages/admin/agent-apps/index.vue
@@ -17,17 +17,6 @@ const agentApps = ref<AgentApp[]>([])
 const showRemoveDialog = ref(false)
 const removingItem = ref<AgentApp | null>(null)
 
-const viewDialogOpen = ref(false)
-const viewItem = ref<AgentApp | null>(null)
-
-const editDialogOpen = ref(false)
-const editItem = ref<AgentApp | null>(null)
-const editSaving = ref(false)
-const editForm = ref({
-  status: 'active',
-  card_types: [] as Array<{ card_type_id: number, can_generate: boolean, price: number, name: string }>,
-})
-
 const activeCount = computed(() => agentApps.value.filter(app => app.status === 'active').length)
 const inactiveCount = computed(() => agentApps.value.filter(app => app.status === 'inactive').length)
 const totalBalance = computed(() => agentApps.value.reduce((sum, app) => sum + (app.balance || 0), 0))
@@ -71,52 +60,11 @@ function goToCreate() {
 }
 
 function handleView(item: AgentApp) {
-  viewItem.value = item
-  viewDialogOpen.value = true
+  router.push(`/admin/agent-apps/${item.id}/view`)
 }
 
 function handleEdit(item: AgentApp) {
-  editItem.value = item
-  editForm.value = {
-    status: item.status || 'active',
-    card_types: (item.card_types || []).map(ct => ({
-      card_type_id: ct.card_type_id || ct.id,
-      can_generate: ct.can_generate,
-      price: ct.price || 0,
-      name: ct.name || '',
-    })),
-  }
-  editDialogOpen.value = true
-}
-
-async function handleEditSubmit() {
-  if (!editItem.value) return
-
-  editSaving.value = true
-  try {
-    await api.put(`/dev/agent-apps/${editItem.value.id}`, {
-      status: editForm.value.status,
-    })
-    
-    await api.put(`/dev/agent-apps/${editItem.value.id}/card-types`, {
-      card_types: editForm.value.card_types.map(ct => ({
-        card_type_id: ct.card_type_id,
-        can_generate: ct.can_generate,
-        price: ct.price,
-      })),
-    })
-    
-    toast.success('保存成功')
-    editDialogOpen.value = false
-    fetchData()
-  }
-  catch (error: any) {
-    console.error('保存失败:', error)
-    toast.error(error.message || '保存失败')
-  }
-  finally {
-    editSaving.value = false
-  }
+  router.push(`/admin/agent-apps/${item.id}/edit`)
 }
 
 function confirmRemove(item: AgentApp) {
@@ -346,157 +294,5 @@ onMounted(() => {
       confirm-text="确定移除"
       @confirm="handleRemove"
     />
-
-    <UiDialog v-model:open="viewDialogOpen">
-      <UiDialogContent class="sm:max-w-lg">
-        <UiDialogHeader>
-          <UiDialogTitle>查看授权</UiDialogTitle>
-          <UiDialogDescription>
-            {{ viewItem?.agent_name }} - {{ viewItem?.app_name }}
-          </UiDialogDescription>
-        </UiDialogHeader>
-        <div class="space-y-4">
-          <div class="grid grid-cols-2 gap-4">
-            <div class="space-y-1">
-              <span class="text-sm text-muted-foreground">代理</span>
-              <p class="font-medium">{{ viewItem?.agent_name }}</p>
-            </div>
-            <div class="space-y-1">
-              <span class="text-sm text-muted-foreground">应用</span>
-              <p class="font-medium">{{ viewItem?.app_name }}</p>
-            </div>
-            <div class="space-y-1">
-              <span class="text-sm text-muted-foreground">状态</span>
-              <UiBadge :variant="viewItem?.status === 'active' ? 'default' : 'secondary'">
-                {{ viewItem?.status === 'active' ? '已启用' : '已禁用' }}
-              </UiBadge>
-            </div>
-            <div class="space-y-1">
-              <span class="text-sm text-muted-foreground">余额</span>
-              <p class="font-medium">¥{{ (viewItem?.balance || 0).toFixed(2) }}</p>
-            </div>
-            <div class="space-y-1">
-              <span class="text-sm text-muted-foreground">授权时间</span>
-              <p class="font-medium">{{ viewItem?.created_at }}</p>
-            </div>
-          </div>
-          
-          <div class="space-y-2">
-            <span class="text-sm text-muted-foreground">卡密权限</span>
-            <div v-if="viewItem?.card_types && viewItem.card_types.length > 0" class="border rounded-lg">
-              <UiTable>
-                <UiTableHeader>
-                  <UiTableRow>
-                    <UiTableHead>卡类名称</UiTableHead>
-                    <UiTableHead>授权价格</UiTableHead>
-                    <UiTableHead>状态</UiTableHead>
-                  </UiTableRow>
-                </UiTableHeader>
-                <UiTableBody>
-                  <UiTableRow v-for="ct in viewItem.card_types" :key="ct.card_type_id || ct.id">
-                    <UiTableCell>{{ ct.name }}</UiTableCell>
-                    <UiTableCell>¥{{ ct.price || 0 }}</UiTableCell>
-                    <UiTableCell>
-                      <UiBadge :variant="ct.can_generate ? 'default' : 'secondary'">
-                        {{ ct.can_generate ? '已授权' : '未授权' }}
-                      </UiBadge>
-                    </UiTableCell>
-                  </UiTableRow>
-                </UiTableBody>
-              </UiTable>
-            </div>
-            <p v-else class="text-muted-foreground text-sm">暂无卡密权限</p>
-          </div>
-        </div>
-        <UiDialogFooter>
-          <UiButton variant="outline" @click="viewDialogOpen = false">
-            关闭
-          </UiButton>
-        </UiDialogFooter>
-      </UiDialogContent>
-    </UiDialog>
-
-    <UiDialog v-model:open="editDialogOpen">
-      <UiDialogContent class="sm:max-w-2xl">
-        <UiDialogHeader>
-          <UiDialogTitle>编辑授权</UiDialogTitle>
-          <UiDialogDescription>
-            {{ editItem?.agent_name }} - {{ editItem?.app_name }}
-          </UiDialogDescription>
-        </UiDialogHeader>
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <UiLabel>状态</UiLabel>
-            <UiSelect v-model="editForm.status">
-              <UiSelectTrigger>
-                <UiSelectValue placeholder="请选择状态" />
-              </UiSelectTrigger>
-              <UiSelectContent>
-                <UiSelectItem value="active">
-                  已启用
-                </UiSelectItem>
-                <UiSelectItem value="inactive">
-                  已禁用
-                </UiSelectItem>
-              </UiSelectContent>
-            </UiSelect>
-          </div>
-          
-          <div class="space-y-2">
-            <UiLabel>卡密权限</UiLabel>
-            <div v-if="editForm.card_types.length > 0" class="border rounded-lg">
-              <UiTable>
-                <UiTableHeader>
-                  <UiTableRow>
-                    <UiTableHead class="w-12" />
-                    <UiTableHead>卡类名称</UiTableHead>
-                    <UiTableHead>授权价格</UiTableHead>
-                  </UiTableRow>
-                </UiTableHeader>
-                <UiTableBody>
-                  <UiTableRow
-                    v-for="ct in editForm.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">
-                      {{ ct.name }}
-                    </UiTableCell>
-                    <UiTableCell @click.stop>
-                      <UiNumberField v-model="ct.price" :min="0" class="w-28">
-                        <UiNumberFieldContent>
-                          <UiNumberFieldDecrement />
-                          <UiNumberFieldInput />
-                          <UiNumberFieldIncrement />
-                        </UiNumberFieldContent>
-                      </UiNumberField>
-                    </UiTableCell>
-                  </UiTableRow>
-                </UiTableBody>
-              </UiTable>
-            </div>
-            <p v-else class="text-muted-foreground text-sm">暂无卡密权限</p>
-          </div>
-        </div>
-        <UiDialogFooter>
-          <UiButton variant="outline" @click="editDialogOpen = false">
-            取消
-          </UiButton>
-          <UiButton :disabled="editSaving" @click="handleEditSubmit">
-            <span v-if="editSaving" class="i-lucide-loader-2 mr-2 h-4 w-4 animate-spin" />
-            保存
-          </UiButton>
-        </UiDialogFooter>
-      </UiDialogContent>
-    </UiDialog>
   </BasicPage>
 </template>