admin/verify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复添加/编辑授权页面样式

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

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

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

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

- 参考卡密管理子页面样式
This commit is contained in:
admin
2026-05-09 05:05:43 +08:00
parent 9d580a6bb7
commit 0bd52e6bf1
2 changed files with 134 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/admin/agent-apps/[id].vue
+71 -80
View File
@@ -158,78 +158,67 @@ onMounted(() => {
<BasicPage <BasicPage
title="编辑授权" title="编辑授权"
description="修改代理的应用授权配置" description="修改代理的应用授权配置"
:breadcrumbs="[
{ title: t('nav.agentApps'), href: '/admin/agent-apps' },
{ title: '编辑授权' },
]"
sticky sticky
> >
<div v-if="loading" class="flex items-center justify-center py-12"> <div v-if="loading" class="flex items-center justify-center py-12">
<Loader2 class="size-8 animate-spin text-muted-foreground" /> <Loader2 class="size-8 animate-spin text-muted-foreground" />
</div> </div>
<div v-else class="max-w-4xl mx-auto space-y-6"> <UiCard v-else class="max-w-2xl">
<UiCard> <UiCardHeader>
<UiCardHeader> <UiCardTitle>基本信息</UiCardTitle>
<UiCardTitle>基本信息</UiCardTitle> <UiCardDescription>
<UiCardDescription>选择代理和应用</UiCardDescription> 查看代理和应用信息
</UiCardHeader> </UiCardDescription>
<UiCardContent class="space-y-6"> </UiCardHeader>
<div class="grid gap-6 md:grid-cols-2"> <UiCardContent class="space-y-6">
<div class="space-y-2"> <div class="space-y-2">
<UiLabel>选择代理</UiLabel> <UiLabel>代理</UiLabel>
<UiSelect <UiSelect
v-model="form.agent_id" v-model="form.agent_id"
disabled disabled
> >
<UiSelectTrigger> <UiSelectTrigger>
<UiSelectValue placeholder="请选择代理" /> <UiSelectValue placeholder="请选择代理" />
</UiSelectTrigger> </UiSelectTrigger>
<UiSelectContent> <UiSelectContent>
<UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)"> <UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
{{ agent.username }} {{ agent.username }}
</UiSelectItem> </UiSelectItem>
</UiSelectContent> </UiSelectContent>
</UiSelect> </UiSelect>
<p class="text-xs text-muted-foreground">编辑时不可修改代理</p> <p class="text-xs text-muted-foreground">编辑时不可修改代理</p>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<UiLabel>选择应用</UiLabel> <UiLabel>应用</UiLabel>
<UiSelect <UiSelect
v-model="form.application_id" v-model="form.application_id"
disabled disabled
> >
<UiSelectTrigger> <UiSelectTrigger>
<UiSelectValue placeholder="请选择应用" /> <UiSelectValue placeholder="请选择应用" />
</UiSelectTrigger> </UiSelectTrigger>
<UiSelectContent> <UiSelectContent>
<UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)"> <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
{{ app.name }} {{ app.name }}
</UiSelectItem> </UiSelectItem>
</UiSelectContent> </UiSelectContent>
</UiSelect> </UiSelect>
<p class="text-xs text-muted-foreground">编辑时不可修改应用</p> <p class="text-xs text-muted-foreground">编辑时不可修改应用</p>
</div> </div>
</div>
<div class="space-y-2"> <div class="space-y-2">
<UiLabel>备注</UiLabel> <UiLabel>备注</UiLabel>
<UiTextarea <UiTextarea
v-model="form.remark" v-model="form.remark"
placeholder="输入备注信息（可选）" placeholder="输入备注信息（可选）"
rows="3" rows="3"
/> />
</div> </div>
</UiCardContent>
</UiCard>
<UiCard v-if="form.application_id && cardTypes.length > 0"> <div v-if="form.application_id && cardTypes.length > 0" class="space-y-3">
<UiCardHeader> <UiLabel>卡类权限</UiLabel>
<UiCardTitle>卡类权限</UiCardTitle>
<UiCardDescription>配置代理可以生成的卡类和价格</UiCardDescription>
</UiCardHeader>
<UiCardContent>
<div class="border rounded-lg overflow-hidden"> <div class="border rounded-lg overflow-hidden">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="w-full text-sm">
@@ -266,25 +255,27 @@ onMounted(() => {
</table> </table>
</div> </div>
</div> </div>
<p class="text-xs text-muted-foreground mt-3"> <p class="text-xs text-muted-foreground">
提示：取消勾选"授权"列可以禁止代理生成该类型的卡密 提示：取消勾选"授权"列可以禁止代理生成该类型的卡密
</p> </p>
</UiCardContent> </div>
</UiCard>
<div class="flex gap-3"> <div class="flex gap-3">
<UiButton <UiButton variant="outline" as-child>
:disabled="saving || !form.agent_id || !form.application_id" <router-link to="/admin/agent-apps">
@click="handleSave" 取消
> </router-link>
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" /> </UiButton>
<CheckCircle v-else class="mr-2 h-4 w-4" /> <UiButton
保存修改 :disabled="saving || !form.agent_id || !form.application_id"
</UiButton> @click="handleSave"
<UiButton variant="outline" @click="router.back()"> >
取消 <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
</UiButton> <CheckCircle v-else class="mr-2 h-4 w-4" />
</div> 保存修改
</div> </UiButton>
</div>
</UiCardContent>
</UiCard>
</BasicPage> </BasicPage>
</template> </template>
frontend/src/pages/admin/agent-apps/create.vue
+63 -79
View File
@@ -41,13 +41,6 @@ const form = ref({
card_type_auth: {} as Record<string, boolean>, 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() { async function fetchAgents() {
try { try {
const data = await api.get<{ agents?: Agent[] }>('/dev/agents') const data = await api.get<{ agents?: Agent[] }>('/dev/agents')
@@ -137,66 +130,55 @@ onMounted(() => {
<BasicPage <BasicPage
title="添加授权" title="添加授权"
description="为代理添加新的应用授权" description="为代理添加新的应用授权"
:breadcrumbs="[
{ title: t('nav.agentApps'), href: '/admin/agent-apps' },
{ title: '添加授权' },
]"
sticky sticky
> >
<div class="max-w-4xl mx-auto space-y-6"> <UiCard class="max-w-2xl">
<UiCard> <UiCardHeader>
<UiCardHeader> <UiCardTitle>基本信息</UiCardTitle>
<UiCardTitle>基本信息</UiCardTitle> <UiCardDescription>
<UiCardDescription>选择代理和应用</UiCardDescription> 选择代理和应用
</UiCardHeader> </UiCardDescription>
<UiCardContent class="space-y-6"> </UiCardHeader>
<div class="grid gap-6 md:grid-cols-2"> <UiCardContent class="space-y-6">
<div class="space-y-2"> <div class="space-y-2">
<UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel> <UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
<UiSelect v-model="form.agent_id"> <UiSelect v-model="form.agent_id">
<UiSelectTrigger> <UiSelectTrigger>
<UiSelectValue placeholder="请选择代理" /> <UiSelectValue placeholder="请选择代理" />
</UiSelectTrigger> </UiSelectTrigger>
<UiSelectContent> <UiSelectContent>
<UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)"> <UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
{{ agent.username }} {{ agent.username }}
</UiSelectItem> </UiSelectItem>
</UiSelectContent> </UiSelectContent>
</UiSelect> </UiSelect>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel> <UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
<UiSelect v-model="form.application_id"> <UiSelect v-model="form.application_id">
<UiSelectTrigger> <UiSelectTrigger>
<UiSelectValue placeholder="请选择应用" /> <UiSelectValue placeholder="请选择应用" />
</UiSelectTrigger> </UiSelectTrigger>
<UiSelectContent> <UiSelectContent>
<UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)"> <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
{{ app.name }} {{ app.name }}
</UiSelectItem> </UiSelectItem>
</UiSelectContent> </UiSelectContent>
</UiSelect> </UiSelect>
</div> </div>
</div>
<div class="space-y-2"> <div class="space-y-2">
<UiLabel>备注</UiLabel> <UiLabel>备注</UiLabel>
<UiTextarea <UiTextarea
v-model="form.remark" v-model="form.remark"
placeholder="输入备注信息（可选）" placeholder="输入备注信息（可选）"
rows="3" rows="3"
/> />
</div> </div>
</UiCardContent>
</UiCard>
<UiCard v-if="form.application_id && cardTypes.length > 0"> <div v-if="form.application_id && cardTypes.length > 0" class="space-y-3">
<UiCardHeader> <UiLabel>卡类权限</UiLabel>
<UiCardTitle>卡类权限</UiCardTitle>
<UiCardDescription>配置代理可以生成的卡类和价格</UiCardDescription>
</UiCardHeader>
<UiCardContent>
<div class="border rounded-lg overflow-hidden"> <div class="border rounded-lg overflow-hidden">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="w-full text-sm">
@@ -233,25 +215,27 @@ onMounted(() => {
</table> </table>
</div> </div>
</div> </div>
<p class="text-xs text-muted-foreground mt-3"> <p class="text-xs text-muted-foreground">
提示：取消勾选"授权"列可以禁止代理生成该类型的卡密 提示：取消勾选"授权"列可以禁止代理生成该类型的卡密
</p> </p>
</UiCardContent> </div>
</UiCard>
<div class="flex gap-3"> <div class="flex gap-3">
<UiButton <UiButton variant="outline" as-child>
:disabled="saving || !form.agent_id || !form.application_id" <router-link to="/admin/agent-apps">
@click="handleSave" 取消
> </router-link>
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" /> </UiButton>
<CheckCircle v-else class="mr-2 h-4 w-4" /> <UiButton
确认授权 :disabled="saving || !form.agent_id || !form.application_id"
</UiButton> @click="handleSave"
<UiButton variant="outline" @click="router.back()"> >
取消 <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
</UiButton> <CheckCircle v-else class="mr-2 h-4 w-4" />
</div> 确认授权
</div> </UiButton>
</div>
</UiCardContent>
</UiCard>
</BasicPage> </BasicPage>
</template> </template>