fix: 修复添加/编辑授权页面样式
- 统一使用单个 UiCard，设置 max-w-2xl - 移除显式的面包屑导航配置 - 调整按钮顺序，取消在前，确认在后 - 将卡类权限表格整合到基本信息卡片中 - 参考卡密管理子页面样式
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user