feat: 优化授权管理和代理后台
- 授权管理页面显示具体卡密类型名称、授权时间、备注 - 重新设计添加/编辑授权页面,参考版本管理和卡类管理页面样式 - 添加备注字段支持 - 移除代理后台的应用管理页面和路由 - 从代理后台侧边栏删除应用管理导航
This commit is contained in:
@@ -53,11 +53,6 @@ const navMain = computed(() => [
|
||||
url: '/agent',
|
||||
icon: Gauge,
|
||||
},
|
||||
{
|
||||
title: t('nav.applications'),
|
||||
url: '/agent/apps',
|
||||
icon: Boxes,
|
||||
},
|
||||
{
|
||||
title: t('nav.cards'),
|
||||
url: '/agent/cards',
|
||||
@@ -88,7 +83,6 @@ const breadcrumbs = computed(() => {
|
||||
const crumbs = [{ title: t('nav.console'), path: '/agent' }]
|
||||
|
||||
const titleMap: Record<string, string> = {
|
||||
apps: t('nav.applications'),
|
||||
cards: t('nav.cards'),
|
||||
users: t('nav.users'),
|
||||
finance: t('nav.finance'),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Check, CheckCircle, Loader2 } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { CheckCircle, Loader2 } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
@@ -30,7 +30,6 @@ interface CardType {
|
||||
}
|
||||
|
||||
const agentAppId = computed(() => route.params.id as string)
|
||||
const isEdit = computed(() => !!agentAppId.value)
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
|
||||
@@ -41,6 +40,7 @@ const cardTypes = ref<CardType[]>([])
|
||||
const form = ref({
|
||||
agent_id: '',
|
||||
application_id: '',
|
||||
remark: '',
|
||||
card_type_prices: {} as Record<string, number>,
|
||||
card_type_auth: {} as Record<string, boolean>,
|
||||
})
|
||||
@@ -63,6 +63,17 @@ async function fetchApplications() {
|
||||
catch { /* ignore */ }
|
||||
}
|
||||
|
||||
async function fetchCardTypes(appId: string) {
|
||||
if (!appId) return
|
||||
try {
|
||||
const data = await api.get<{ card_types: CardType[] }>(`/dev/card-types?application_id=${appId}`)
|
||||
cardTypes.value = data?.card_types || []
|
||||
}
|
||||
catch {
|
||||
cardTypes.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAgentApp() {
|
||||
if (!agentAppId.value) return
|
||||
|
||||
@@ -74,17 +85,15 @@ async function fetchAgentApp() {
|
||||
if (agentApp) {
|
||||
form.value.agent_id = String(agentApp.agent_id)
|
||||
form.value.application_id = String(agentApp.application_id)
|
||||
|
||||
agentApp.card_types.forEach((ct: any) => {
|
||||
form.value.card_type_auth[String(ct.card_type_id)] = ct.can_generate
|
||||
})
|
||||
form.value.remark = agentApp.remark || ''
|
||||
|
||||
await fetchCardTypes(String(agentApp.application_id))
|
||||
|
||||
cardTypes.value.forEach((ct) => {
|
||||
const existingCard = agentApp.card_types.find((c: any) => c.card_type_id === ct.id)
|
||||
const existingCard = agentApp.card_types?.find((c: any) => c.card_type_id === ct.id)
|
||||
if (existingCard) {
|
||||
form.value.card_type_prices[String(ct.id)] = existingCard.price || ct.price
|
||||
form.value.card_type_auth[String(ct.id)] = existingCard.can_generate
|
||||
} else {
|
||||
form.value.card_type_prices[String(ct.id)] = ct.price
|
||||
form.value.card_type_auth[String(ct.id)] = false
|
||||
@@ -101,24 +110,6 @@ async function fetchAgentApp() {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCardTypes(appId: string) {
|
||||
if (!appId) return
|
||||
try {
|
||||
const data = await api.get<{ card_types: CardType[] }>(`/dev/card-types?application_id=${appId}`)
|
||||
cardTypes.value = data?.card_types || []
|
||||
}
|
||||
catch {
|
||||
cardTypes.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function onAppChange(appId: string) {
|
||||
cardTypes.value = []
|
||||
form.value.card_type_prices = {}
|
||||
form.value.card_type_auth = {}
|
||||
if (appId) fetchCardTypes(appId)
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.value.agent_id) {
|
||||
toast.error('请选择代理')
|
||||
@@ -140,26 +131,16 @@ async function handleSave() {
|
||||
: ct.price,
|
||||
}))
|
||||
|
||||
if (isEdit.value) {
|
||||
await api.put(`/dev/agent-apps/${agentAppId.value}`, {
|
||||
card_types: cardTypesPayload,
|
||||
discount: 0,
|
||||
})
|
||||
toast.success('授权更新成功')
|
||||
} else {
|
||||
await api.post('/dev/agent-apps', {
|
||||
agent_id: Number(form.value.agent_id),
|
||||
application_id: Number(form.value.application_id),
|
||||
card_types: cardTypesPayload,
|
||||
discount: 0,
|
||||
})
|
||||
toast.success('授权添加成功')
|
||||
}
|
||||
|
||||
await api.put(`/dev/agent-apps/${agentAppId.value}`, {
|
||||
card_types: cardTypesPayload,
|
||||
discount: 0,
|
||||
remark: form.value.remark,
|
||||
})
|
||||
toast.success('授权更新成功')
|
||||
router.push('/admin/agent-apps')
|
||||
}
|
||||
catch (error: any) {
|
||||
toast.error(error.message || (isEdit.value ? '更新授权失败' : '添加授权失败'))
|
||||
toast.error(error.message || '更新授权失败')
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
@@ -169,19 +150,17 @@ async function handleSave() {
|
||||
onMounted(() => {
|
||||
fetchAgents()
|
||||
fetchApplications()
|
||||
if (isEdit.value) {
|
||||
fetchAgentApp()
|
||||
}
|
||||
fetchAgentApp()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
:title="isEdit ? '编辑授权' : '添加授权'"
|
||||
:description="isEdit ? '修改代理的应用授权配置' : '为代理添加新的应用授权'"
|
||||
title="编辑授权"
|
||||
description="修改代理的应用授权配置"
|
||||
:breadcrumbs="[
|
||||
{ title: t('nav.agentApps'), href: '/admin/agent-apps' },
|
||||
{ title: isEdit ? '编辑授权' : '添加授权' },
|
||||
{ title: '编辑授权' },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
@@ -201,7 +180,7 @@ onMounted(() => {
|
||||
<UiLabel>选择代理</UiLabel>
|
||||
<UiSelect
|
||||
v-model="form.agent_id"
|
||||
:disabled="isEdit"
|
||||
disabled
|
||||
>
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择代理" />
|
||||
@@ -212,14 +191,14 @@ onMounted(() => {
|
||||
</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"
|
||||
@update:model-value="onAppChange"
|
||||
:disabled="isEdit"
|
||||
disabled
|
||||
>
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择应用" />
|
||||
@@ -230,8 +209,18 @@ onMounted(() => {
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
<p class="text-xs text-muted-foreground">编辑时不可修改应用</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>备注</UiLabel>
|
||||
<UiTextarea
|
||||
v-model="form.remark"
|
||||
placeholder="输入备注信息(可选)"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
@@ -290,7 +279,7 @@ onMounted(() => {
|
||||
>
|
||||
<Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<CheckCircle v-else class="mr-2 h-4 w-4" />
|
||||
{{ isEdit ? '保存修改' : '确认授权' }}
|
||||
保存修改
|
||||
</UiButton>
|
||||
<UiButton variant="outline" @click="router.back()">
|
||||
取消
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { Composer } from 'vue-i18n'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Check, Pencil, Trash2, X } from 'lucide-vue-next'
|
||||
import { Check, Pencil, Trash2 } from 'lucide-vue-next'
|
||||
import { h } from 'vue'
|
||||
|
||||
import type { AgentApp } from '../data/schema'
|
||||
@@ -46,19 +46,24 @@ export function getColumns(actions: {
|
||||
header: () => h('span', {}, '卡密类型'),
|
||||
cell: ({ row }) => {
|
||||
const cardTypes = row.getValue('card_types') as AgentApp['card_types']
|
||||
const total = cardTypes?.length || 0
|
||||
const authorized = cardTypes?.filter(c => c.can_generate).length || 0
|
||||
return h('div', { class: 'flex items-center gap-2' }, [
|
||||
h('span', { class: 'text-sm' }, `${authorized} / ${total}`),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'balance',
|
||||
header: () => h('span', {}, '余额'),
|
||||
cell: ({ row }) => {
|
||||
const balance = row.getValue('balance') as number
|
||||
return h('span', { class: 'text-sm font-medium' }, `¥${(balance || 0).toFixed(2)}`)
|
||||
if (!cardTypes || cardTypes.length === 0) {
|
||||
return h('span', { class: 'text-muted-foreground' }, '-')
|
||||
}
|
||||
|
||||
return h('div', { class: 'flex flex-wrap gap-1' },
|
||||
cardTypes.map(ct =>
|
||||
h('span', {
|
||||
class: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
|
||||
ct.can_generate
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
|
||||
}`
|
||||
}, [
|
||||
ct.can_generate && h(Check, { class: 'size-3' }),
|
||||
ct.name || `卡类#${ct.card_type_id}`
|
||||
])
|
||||
)
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -72,6 +77,24 @@ export function getColumns(actions: {
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => h('span', {}, '授权时间'),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at') as string
|
||||
if (!createdAt) return h('span', { class: 'text-muted-foreground' }, '-')
|
||||
const date = new Date(createdAt)
|
||||
return h('span', { class: 'text-sm' }, date.toLocaleString('zh-CN'))
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'remark',
|
||||
header: () => h('span', {}, '备注'),
|
||||
cell: ({ row }) => {
|
||||
const remark = row.getValue('remark') as string
|
||||
return h('span', { class: 'text-sm text-muted-foreground' }, remark || '-')
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => h('span', { class: 'sr-only' }, '操作'),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Check, CheckCircle, Loader2 } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { CheckCircle, Loader2 } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
@@ -29,7 +29,6 @@ interface CardType {
|
||||
}
|
||||
|
||||
const saving = ref(false)
|
||||
|
||||
const agents = ref<Agent[]>([])
|
||||
const applications = ref<Application[]>([])
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
@@ -37,10 +36,18 @@ const cardTypes = ref<CardType[]>([])
|
||||
const form = ref({
|
||||
agent_id: '',
|
||||
application_id: '',
|
||||
remark: '',
|
||||
card_type_prices: {} as Record<string, number>,
|
||||
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')
|
||||
@@ -74,12 +81,12 @@ async function fetchCardTypes(appId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function onAppChange(appId: string) {
|
||||
watch(() => form.value.application_id, (appId) => {
|
||||
cardTypes.value = []
|
||||
form.value.card_type_prices = {}
|
||||
form.value.card_type_auth = {}
|
||||
if (appId) fetchCardTypes(appId)
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.value.agent_id) {
|
||||
@@ -107,6 +114,7 @@ async function handleSave() {
|
||||
application_id: Number(form.value.application_id),
|
||||
card_types: cardTypesPayload,
|
||||
discount: 0,
|
||||
remark: form.value.remark,
|
||||
})
|
||||
toast.success('授权添加成功')
|
||||
router.push('/admin/agent-apps')
|
||||
@@ -144,7 +152,7 @@ onMounted(() => {
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择代理</UiLabel>
|
||||
<UiLabel>选择代理 <span class="text-destructive">*</span></UiLabel>
|
||||
<UiSelect v-model="form.agent_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择代理" />
|
||||
@@ -158,11 +166,8 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择应用</UiLabel>
|
||||
<UiSelect
|
||||
v-model="form.application_id"
|
||||
@update:model-value="onAppChange"
|
||||
>
|
||||
<UiLabel>选择应用 <span class="text-destructive">*</span></UiLabel>
|
||||
<UiSelect v-model="form.application_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择应用" />
|
||||
</UiSelectTrigger>
|
||||
@@ -174,6 +179,15 @@ onMounted(() => {
|
||||
</UiSelect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>备注</UiLabel>
|
||||
<UiTextarea
|
||||
v-model="form.remark"
|
||||
placeholder="输入备注信息(可选)"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
|
||||
@@ -10,4 +10,5 @@ export interface AgentApp {
|
||||
card_types: { card_type_id: number, can_generate: boolean, name?: string }[]
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
remark?: string
|
||||
}
|
||||
|
||||
@@ -426,18 +426,6 @@ const routes: RouteRecordRaw[] = [
|
||||
component: () => import('@/pages/agent/index.vue'),
|
||||
meta: { title: '控制台 - 代理商后台' },
|
||||
},
|
||||
{
|
||||
path: 'apps',
|
||||
name: 'AgentApps',
|
||||
component: () => import('@/pages/agent/apps/index.vue'),
|
||||
meta: { title: '应用管理 - 代理商后台' },
|
||||
},
|
||||
{
|
||||
path: 'apps/:id',
|
||||
name: 'AgentAppDetail',
|
||||
component: () => import('@/pages/agent/apps/[id].vue'),
|
||||
meta: { title: '应用详情 - 代理商后台' },
|
||||
},
|
||||
{
|
||||
path: 'cards',
|
||||
name: 'AgentCards',
|
||||
|
||||
Reference in New Issue
Block a user