fix: 修复添加/编辑授权页面样式
- 统一使用单个 UiCard，设置 max-w-2xl - 移除显式的面包屑导航配置 - 调整按钮顺序，取消在前，确认在后 - 将卡类权限表格整合到基本信息卡片中 - 参考卡密管理子页面样式
This commit is contained in:
@@ -158,26 +158,22 @@ 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>
|
||||
<UiCard v-else class="max-w-2xl">
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>基本信息</UiCardTitle>
|
||||
<UiCardDescription>选择代理和应用</UiCardDescription>
|
||||
<UiCardDescription>
|
||||
查看代理和应用信息
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择代理</UiLabel>
|
||||
<UiLabel>代理</UiLabel>
|
||||
<UiSelect
|
||||
v-model="form.agent_id"
|
||||
disabled
|
||||
@@ -195,7 +191,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择应用</UiLabel>
|
||||
<UiLabel>应用</UiLabel>
|
||||
<UiSelect
|
||||
v-model="form.application_id"
|
||||
disabled
|
||||
@@ -211,7 +207,6 @@ onMounted(() => {
|
||||
</UiSelect>
|
||||
<p class="text-xs text-muted-foreground">编辑时不可修改应用</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>备注</UiLabel>
|
||||
@@ -221,15 +216,9 @@ onMounted(() => {
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<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,13 +255,17 @@ 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 variant="outline" as-child>
|
||||
<router-link to="/admin/agent-apps">
|
||||
取消
|
||||
</router-link>
|
||||
</UiButton>
|
||||
<UiButton
|
||||
:disabled="saving || !form.agent_id || !form.application_id"
|
||||
@click="handleSave"
|
||||
@@ -281,10 +274,8 @@ onMounted(() => {
|
||||
<CheckCircle v-else class="mr-2 h-4 w-4" />
|
||||
保存修改
|
||||
</UiButton>
|
||||
<UiButton variant="outline" @click="router.back()">
|
||||
取消
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</BasicPage>
|
||||
</template>
|
||||
|
||||
@@ -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,20 +130,16 @@ 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>
|
||||
<UiCard class="max-w-2xl">
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>基本信息</UiCardTitle>
|
||||
<UiCardDescription>选择代理和应用</UiCardDescription>
|
||||
<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">
|
||||
@@ -178,7 +167,6 @@ onMounted(() => {
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>备注</UiLabel>
|
||||
@@ -188,15 +176,9 @@ onMounted(() => {
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<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,13 +215,17 @@ 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 variant="outline" as-child>
|
||||
<router-link to="/admin/agent-apps">
|
||||
取消
|
||||
</router-link>
|
||||
</UiButton>
|
||||
<UiButton
|
||||
:disabled="saving || !form.agent_id || !form.application_id"
|
||||
@click="handleSave"
|
||||
@@ -248,10 +234,8 @@ onMounted(() => {
|
||||
<CheckCircle v-else class="mr-2 h-4 w-4" />
|
||||
确认授权
|
||||
</UiButton>
|
||||
<UiButton variant="outline" @click="router.back()">
|
||||
取消
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</BasicPage>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user