Initial commit: 网络验证平台
This commit is contained in:
Admin
@@ -0,0 +1,370 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
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 api from '@/services/api'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Agent {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
avatar: string
|
||||
status: string
|
||||
parent_agent_id: number | null
|
||||
parent_agent_name: string
|
||||
commission: number
|
||||
can_create_agent: boolean
|
||||
balance: number
|
||||
}
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const agents = ref<Agent[]>([])
|
||||
|
||||
const agentId = computed(() => route.params.id as string)
|
||||
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
parent_agent_id: '',
|
||||
commission: 0,
|
||||
can_create_agent: false,
|
||||
balance: 0,
|
||||
})
|
||||
|
||||
async function fetchAgent() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get<Agent>(`/dev/agents/${agentId.value}`)
|
||||
if (data) {
|
||||
form.value.username = data.username || ''
|
||||
form.value.email = data.email || ''
|
||||
form.value.password = ''
|
||||
form.value.parent_agent_id = data.parent_agent_id ? String(data.parent_agent_id) : 'none'
|
||||
form.value.commission = data.commission || 0
|
||||
form.value.can_create_agent = data.can_create_agent === true
|
||||
form.value.balance = data.balance || 0
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取代理信息失败:', error)
|
||||
toast.error(t('developer.agents.edit.fetchFailed'))
|
||||
router.push('/developer/agents')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAgents() {
|
||||
try {
|
||||
const data = await api.get<{ agents?: Agent[], total: number }>('/dev/agents')
|
||||
agents.value = (data?.agents || []).filter(a => String(a.id) !== agentId.value)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取代理列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const selectedParentAgent = computed(() => {
|
||||
if (form.value.parent_agent_id && form.value.parent_agent_id !== 'none') {
|
||||
return agents.value.find(a => String(a.id) === form.value.parent_agent_id)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.value.username) {
|
||||
toast.error(t('developer.agents.create.usernameRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
if (form.value.password && form.value.password.length < 6) {
|
||||
toast.error(t('developer.agents.create.passwordMinLength'))
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const payload: any = {
|
||||
commission: form.value.commission,
|
||||
can_create_agent: form.value.can_create_agent,
|
||||
balance: form.value.balance,
|
||||
}
|
||||
|
||||
if (form.value.email) {
|
||||
payload.email = form.value.email
|
||||
}
|
||||
|
||||
if (form.value.password) {
|
||||
payload.password = form.value.password
|
||||
}
|
||||
|
||||
if (form.value.parent_agent_id && form.value.parent_agent_id !== 'none') {
|
||||
payload.parent_agent_id = parseInt(form.value.parent_agent_id)
|
||||
} else {
|
||||
payload.parent_agent_id = null
|
||||
}
|
||||
|
||||
await api.put(`/dev/agents/${agentId.value}`, payload)
|
||||
toast.success(t('developer.agents.edit.saveSuccess'))
|
||||
router.push('/developer/agents')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('保存代理失败:', error)
|
||||
toast.error(error.message || t('developer.agents.edit.saveFailed'))
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAgent()
|
||||
fetchAgents()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
:title="t('developer.agents.edit.title')"
|
||||
:description="t('developer.agents.edit.description')"
|
||||
:breadcrumbs="[
|
||||
{ title: t('developer.agents.title'), href: '/developer/agents' },
|
||||
{ title: t('developer.agents.edit.title') },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<div class="grid gap-6 lg:grid-cols-3">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Icon icon="lucide:user" class="size-5" />
|
||||
{{ t('developer.agents.create.basicInfo') }}
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>{{ t('developer.agents.create.basicInfoDesc') }}</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="username">
|
||||
{{ t('developer.agents.form.username') }}
|
||||
</UiLabel>
|
||||
<UiInput
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
disabled
|
||||
class="bg-muted"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ t('developer.agents.edit.usernameHint') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="email">
|
||||
{{ t('developer.agents.form.email') }}
|
||||
</UiLabel>
|
||||
<UiInput
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
:placeholder="t('developer.agents.form.emailPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="password">
|
||||
{{ t('developer.agents.form.password') }}
|
||||
</UiLabel>
|
||||
<UiInput
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
:placeholder="t('developer.agents.edit.passwordPlaceholder')"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ t('developer.agents.edit.passwordHint') }}
|
||||
</p>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Icon icon="lucide:settings-2" class="size-5" />
|
||||
{{ t('developer.agents.create.agentConfig') }}
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>{{ t('developer.agents.create.agentConfigDesc') }}</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="parent_agent">
|
||||
{{ t('developer.agents.form.parentAgent') }}
|
||||
</UiLabel>
|
||||
<UiSelect v-model="form.parent_agent_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue :placeholder="t('developer.agents.form.selectParentAgent')" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem value="none">
|
||||
{{ t('developer.agents.form.noParent') }}
|
||||
</UiSelectItem>
|
||||
<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">
|
||||
{{ t('developer.agents.create.parentAgentHint') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="commission">
|
||||
{{ t('developer.agents.form.commission') }}
|
||||
</UiLabel>
|
||||
<div class="flex items-center gap-4">
|
||||
<UiNumberField
|
||||
v-model="form.commission"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
class="flex-1 max-w-[200px]"
|
||||
>
|
||||
<UiNumberFieldContent>
|
||||
<UiNumberFieldDecrement />
|
||||
<UiNumberFieldInput />
|
||||
<UiNumberFieldIncrement />
|
||||
</UiNumberFieldContent>
|
||||
</UiNumberField>
|
||||
<span class="text-sm text-muted-foreground">%</span>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ t('developer.agents.form.commissionPlaceholder') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="balance">
|
||||
{{ t('developer.agents.form.balance') }}
|
||||
</UiLabel>
|
||||
<div class="flex items-center gap-4">
|
||||
<UiNumberField
|
||||
v-model="form.balance"
|
||||
:min="0"
|
||||
:step="0.01"
|
||||
class="flex-1 max-w-[200px]"
|
||||
>
|
||||
<UiNumberFieldContent>
|
||||
<UiNumberFieldDecrement />
|
||||
<UiNumberFieldInput />
|
||||
<UiNumberFieldIncrement />
|
||||
</UiNumberFieldContent>
|
||||
</UiNumberField>
|
||||
<span class="text-sm text-muted-foreground">¥</span>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ t('developer.agents.form.balancePlaceholder') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-0.5">
|
||||
<UiLabel>{{ t('developer.agents.form.canCreateAgent') }}</UiLabel>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ t('developer.agents.create.canCreateAgentHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- 注意：UiSwitch 必须使用 v-model，不能使用 v-model:checked -->
|
||||
<UiSwitch v-model="form.can_create_agent" />
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Icon icon="lucide:receipt" class="size-5" />
|
||||
{{ t('developer.agents.create.preview') }}
|
||||
</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.agents.form.username') }}</span>
|
||||
<span>{{ form.username || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.agents.form.canCreateAgent') }}</span>
|
||||
<span>{{ form.can_create_agent ? t('common.yes') : t('common.no') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.agents.form.email') }}</span>
|
||||
<span>{{ form.email || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.agents.form.parentAgent') }}</span>
|
||||
<span>{{ selectedParentAgent?.username || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.agents.form.commission') }}</span>
|
||||
<span>{{ (form.commission * 100).toFixed(0) }}%</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">{{ t('developer.agents.form.balance') }}</span>
|
||||
<span>¥{{ form.balance.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="pt-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<UiButton
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:disabled="saving"
|
||||
@click="handleSave"
|
||||
>
|
||||
<Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Icon v-else icon="lucide:save" class="mr-2 h-4 w-4" />
|
||||
{{ t('developer.agents.edit.save') }}
|
||||
</UiButton>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
class="w-full"
|
||||
@click="router.back()"
|
||||
>
|
||||
{{ t('developer.agents.create.cancel') }}
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
Reference in New Issue
Block a user