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

feat: 优化授权管理页面为单卡片交互

Browse Source 
- 将代理、应用、卡类权限合并到一个卡片中显示
- 编辑时代理和应用可编辑
- 添加卡类后直接显示在下方列表，可删除和修改价格

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
admin
2026-05-09 12:11:28 +08:00
parent 38f6788062
commit 247fdb0f70
2 changed files with 156 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/admin/agent-apps/[id].vue
+80 -107
View File
@@ -1,11 +1,11 @@
<script setup lang="ts">
import { Check, Eye, Info, Loader2, Plus, X } from 'lucide-vue-next'
import { Check, Eye, Info, Loader2, Plus, Trash2 } from 'lucide-vue-next'
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { toast } from 'vue-sonner'
import { BasicPage } from '@/components/global-layout'
import { BasicPage } from '@/components/global-ayout'
import api from '@/services/api'
const router = useRouter()
@@ -67,6 +67,10 @@ const selectedApplication = computed(() => {
return null
})
const availableCardTypes = computed(() => {
return cardTypes.value.filter(c => !permissions.value.some(p => p.card_type_id === c.id))
})
async function fetchAgents() {
try {
const data = await api.get<{ agents?: Agent[] }>('/dev/agents')
@@ -140,11 +144,6 @@ function addPermission() {
const cardType = cardTypes.value.find(ct => String(ct.id) === selectedCardTypeId.value)
if (!cardType) return
if (permissions.value.some(p => p.card_type_id === cardType.id)) {
toast.error('该卡类已添加')
return
}
permissions.value.push({
card_type_id: cardType.id,
card_type_name: cardType.name,
@@ -170,7 +169,7 @@ async function handleSave() {
}
if (permissions.value.length === 0) {
toast.error('请至少添加一个卡类权限')
toast.error('请至少添加一个卡类')
return
}
@@ -183,6 +182,8 @@ async function handleSave() {
}))
await api.put(`/dev/agent-apps/${agentAppId.value}`, {
agent_id: Number(form.value.agent_id),
application_id: Number(form.value.application_id),
card_types: cardTypesPayload,
discount: 0,
remark: form.value.remark,
@@ -226,107 +227,88 @@ onMounted(() => {
<UiCardHeader>
<UiCardTitle class="flex items-center gap-2">
<Info class="size-5" />
基本信息
授权信息
</UiCardTitle>
<UiCardDescription>查看代理和应用信息</UiCardDescription>
<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 class="space-y-2">
<UiLabel>备注</UiLabel>
<UiTextarea
v-model="form.remark"
placeholder="输入备注信息（可选）"
rows="3"
/>
</div>
</UiCardContent>
</UiCard>
<UiCard v-if="form.application_id && cardTypes.length > 0">
<UiCardHeader>
<UiCardTitle class="flex items-center gap-2">
<Plus class="size-5" />
卡类权限
</UiCardTitle>
<UiCardDescription>为代理添加卡类授权</UiCardDescription>
</UiCardHeader>
<UiCardContent class="space-y-4">
<div class="flex gap-3">
<div class="flex-1">
<UiSelect v-model="selectedCardTypeId">
<div class="grid gap-4 sm:grid-cols-2">
<div class="space-y-2">
<UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
<UiSelect v-model="form.agent_id">
<UiSelectTrigger>
<UiSelectValue placeholder="选择卡类" />
<UiSelectValue placeholder="请选择代理" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectItem
v-for="ct in cardTypes.filter(c => !permissions.some(p => p.card_type_id === c.id))"
:key="ct.id"
:value="String(ct.id)"
>
{{ ct.name }} ({{ ct.billing_type }})
<UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
{{ agent.username }}
</UiSelectItem>
</UiSelectContent>
</UiSelect>
</div>
<UiButton @click="addPermission">
<Plus class="mr-1 h-4 w-4" />
添加
</UiButton>
</div>
<div v-if="permissions.length > 0" class="border rounded-lg divide-y">
<div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3">
<div class="flex-1">
<div class="font-medium">{{ p.card_type_name }}</div>
<div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
<span class="text-muted-foreground">¥</span>
<UiInput
class="w-20 text-right"
v-model.number="p.price"
/>
</div>
<UiButton variant="ghost" size="icon" @click="removePermission(index)">
<X class="h-4 w-4" />
</UiButton>
</div>
<div class="space-y-2">
<UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
<UiSelect v-model="form.application_id" @update:model-value="fetchCardTypes($event)">
<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>
<p v-else class="text-sm text-muted-foreground text-center py-4">
请选择卡类添加到授权列表
</p>
<div class="space-y-3">
<UiLabel>卡类权限 <span class="text-destructive">*</span></UiLabel>
<div class="flex gap-3">
<div class="flex-1">
<UiSelect v-model="selectedCardTypeId" :disabled="!form.application_id">
<UiSelectTrigger>
<UiSelectValue placeholder="选择卡类" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
{{ ct.name }} ({{ ct.billing_type }})
</UiSelectItem>
</UiSelectContent>
</UiSelect>
</div>
<UiButton @click="addPermission" :disabled="!form.application_id">
<Plus class="mr-1 h-4 w-4" />
添加
</UiButton>
</div>
<div v-if="permissions.length > 0" class="border rounded-lg divide-y max-h-64 overflow-y-auto">
<div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3 gap-4">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">{{ p.card_type_name }}</div>
<div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
</div>
<div class="flex items-center gap-2 shrink-0">
<div class="flex items-center gap-1">
<span class="text-muted-foreground">¥</span>
<UiInput class="w-20 text-right" v-model.number="p.price" />
</div>
<UiButton variant="ghost" size="icon" @click="removePermission(index)">
<Trash2 class="h-4 w-4 text-destructive" />
</UiButton>
</div>
</div>
</div>
<p v-else class="text-sm text-muted-foreground text-center py-4">
{{ form.application_id ? '请选择卡类添加到授权列表' : '请先选择应用' }}
</p>
</div>
<div class="space-y-2">
<UiLabel>备注</UiLabel>
<UiTextarea v-model="form.remark" placeholder="输入备注信息（可选）" rows="2" />
</div>
</UiCardContent>
</UiCard>
</div>
@@ -364,21 +346,12 @@ onMounted(() => {
<UiCard>
<UiCardContent class="pt-6">
<div class="flex flex-col gap-3">
<UiButton
class="w-full"
size="lg"
:disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0"
@click="handleSave"
>
<UiButton class="w-full" size="lg" :disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0" @click="handleSave">
<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="router.back()"
>
<UiButton variant="outline" class="w-full" @click="router.back()">
取消
</UiButton>
</div>
frontend/src/pages/admin/agent-apps/create.vue
+76 -110
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { CheckCircle, Eye, Info, Loader2, Plus, X } from 'lucide-vue-next'
import { Eye, Info, Loader2, Plus, Trash2, X } from 'lucide-vite-next'
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
@@ -63,11 +63,8 @@ const selectedApplication = computed(() => {
return null
})
const selectedCardType = computed(() => {
if (selectedCardTypeId.value) {
return cardTypes.value.find(ct => String(ct.id) === selectedCardTypeId.value)
}
return null
const availableCardTypes = computed(() => {
return cardTypes.value.filter(c => !permissions.value.some(p => p.card_type_id === c.id))
})
async function fetchAgents() {
@@ -108,11 +105,6 @@ function addPermission() {
const cardType = cardTypes.value.find(ct => String(ct.id) === selectedCardTypeId.value)
if (!cardType) return
if (permissions.value.some(p => p.card_type_id === cardType.id)) {
toast.error('该卡类已添加')
return
}
permissions.value.push({
card_type_id: cardType.id,
card_type_name: cardType.name,
@@ -138,7 +130,7 @@ async function handleSave() {
}
if (permissions.value.length === 0) {
toast.error('请至少添加一个卡类权限')
toast.error('请至少添加一个卡类')
return
}
@@ -191,105 +183,88 @@ onMounted(() => {
<UiCardHeader>
<UiCardTitle class="flex items-center gap-2">
<Info class="size-5" />
基本信息
授权信息
</UiCardTitle>
<UiCardDescription>选择代理和应用</UiCardDescription>
<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" @update:model-value="fetchCardTypes($event)">
<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>
<UiCard v-if="form.application_id && cardTypes.length > 0">
<UiCardHeader>
<UiCardTitle class="flex items-center gap-2">
<CheckCircle class="size-5" />
卡类权限
</UiCardTitle>
<UiCardDescription>为代理添加卡类授权</UiCardDescription>
</UiCardHeader>
<UiCardContent class="space-y-4">
<div class="flex gap-3">
<div class="flex-1">
<UiSelect v-model="selectedCardTypeId">
<div class="grid gap-4 sm:grid-cols-2">
<div class="space-y-2">
<UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
<UiSelect v-model="form.agent_id">
<UiSelectTrigger>
<UiSelectValue placeholder="选择卡类" />
<UiSelectValue placeholder="请选择代理" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectItem
v-for="ct in cardTypes.filter(c => !permissions.some(p => p.card_type_id === c.id))"
:key="ct.id"
:value="String(ct.id)"
>
{{ ct.name }} ({{ ct.billing_type }})
<UiSelectItem v-for="agent in agents" :key="agent.id" :value="String(agent.id)">
{{ agent.username }}
</UiSelectItem>
</UiSelectContent>
</UiSelect>
</div>
<UiButton @click="addPermission">
<Plus class="mr-1 h-4 w-4" />
添加
</UiButton>
</div>
<div v-if="permissions.length > 0" class="border rounded-lg divide-y">
<div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3">
<div class="flex-1">
<div class="font-medium">{{ p.card_type_name }}</div>
<div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
<span class="text-muted-foreground">¥</span>
<UiInput
class="w-20 text-right"
v-model.number="p.price"
/>
</div>
<UiButton variant="ghost" size="icon" @click="removePermission(index)">
<X class="h-4 w-4" />
</UiButton>
</div>
<div class="space-y-2">
<UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
<UiSelect v-model="form.application_id" @update:model-value="fetchCardTypes($event)">
<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>
<p v-else class="text-sm text-muted-foreground text-center py-4">
请选择卡类添加到授权列表
</p>
<div class="space-y-3">
<UiLabel>卡类权限 <span class="text-destructive">*</span></UiLabel>
<div class="flex gap-3">
<div class="flex-1">
<UiSelect v-model="selectedCardTypeId" :disabled="!form.application_id">
<UiSelectTrigger>
<UiSelectValue placeholder="选择卡类" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
{{ ct.name }} ({{ ct.billing_type }})
</UiSelectItem>
</UiSelectContent>
</UiSelect>
</div>
<UiButton @click="addPermission" :disabled="!form.application_id">
<Plus class="mr-1 h-4 w-4" />
添加
</UiButton>
</div>
<div v-if="permissions.length > 0" class="border rounded-lg divide-y max-h-64 overflow-y-auto">
<div v-for="(p, index) in permissions" :key="p.card_type_id" class="flex items-center justify-between p-3 gap-4">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">{{ p.card_type_name }}</div>
<div class="text-sm text-muted-foreground">{{ p.billing_type }}</div>
</div>
<div class="flex items-center gap-2 shrink-0">
<div class="flex items-center gap-1">
<span class="text-muted-foreground">¥</span>
<UiInput class="w-20 text-right" v-model.number="p.price" />
</div>
<UiButton variant="ghost" size="icon" @click="removePermission(index)">
<Trash2 class="h-4 w-4 text-destructive" />
</UiButton>
</div>
</div>
</div>
<p v-else class="text-sm text-muted-foreground text-center py-4">
{{ form.application_id ? '请选择卡类添加到授权列表' : '请先选择应用' }}
</p>
</div>
<div class="space-y-2">
<UiLabel>备注</UiLabel>
<UiTextarea v-model="form.remark" placeholder="输入备注信息（可选）" rows="2" />
</div>
</UiCardContent>
</UiCard>
</div>
@@ -327,21 +302,12 @@ onMounted(() => {
<UiCard>
<UiCardContent class="pt-6">
<div class="flex flex-col gap-3">
<UiButton
class="w-full"
size="lg"
:disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0"
@click="handleSave"
>
<UiButton class="w-full" size="lg" :disabled="saving || !form.agent_id || !form.application_id || permissions.length === 0" @click="handleSave">
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
<Plus v-else class="mr-2 h-4 w-4" />
确认授权
</UiButton>
<UiButton
variant="outline"
class="w-full"
@click="router.back()"
>
<UiButton variant="outline" class="w-full" @click="router.back()">
取消
</UiButton>
</div>
@@ -351,4 +317,4 @@ onMounted(() => {
</div>
</div>
</BasicPage>
</template>
</template>