Initial commit: 网络验证平台
This commit is contained in:
Admin
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true)
|
||||
const app = ref<any>(null)
|
||||
const cardTypes = ref<any[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
const appId = route.params.id
|
||||
try {
|
||||
const data = await api.get(`/agent/apps/${appId}`)
|
||||
app.value = data?.app
|
||||
cardTypes.value = data?.cardTypes || []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取应用详情失败:', error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<template v-else-if="app">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-16 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Icon icon="lucide:box" class="size-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
{{ app.name }}
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
{{ app.description || '暂无描述' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>可用卡类</UiCardTitle>
|
||||
<UiCardDescription>
|
||||
您可以为此应用生成以下类型的卡密
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div v-if="cardTypes.length === 0" class="text-center py-8 text-muted-foreground">
|
||||
暂无可用卡类
|
||||
</div>
|
||||
<div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<UiCard v-for="ct in cardTypes" :key="ct.id" class="bg-muted/50">
|
||||
<UiCardHeader class="pb-2">
|
||||
<UiCardTitle class="text-base">
|
||||
{{ ct.name }}
|
||||
</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-muted-foreground">时长</span>
|
||||
<span>{{ ct.duration_days }} 天</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm mt-2">
|
||||
<span class="text-muted-foreground">价格</span>
|
||||
<span class="font-medium">¥{{ ct.price }}</span>
|
||||
</div>
|
||||
<UiButton
|
||||
class="w-full mt-4"
|
||||
size="sm"
|
||||
as-child
|
||||
>
|
||||
<router-link :to="`/agent/cards/create?app_id=${app.id}&card_type_id=${ct.id}`">
|
||||
生成卡密
|
||||
</router-link>
|
||||
</UiButton>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</template>
|
||||
|
||||
<div v-else class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:alert-circle" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>应用不存在或无权访问</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
interface App {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
status: string
|
||||
card_types_count: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const loading = ref(true)
|
||||
const apps = ref<App[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get<App[]>('/agent/apps')
|
||||
apps.value = data || []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取应用列表失败:', error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
应用管理
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
管理您授权的应用
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="apps.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:boxes" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无授权应用</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="divide-y">
|
||||
<div
|
||||
v-for="app in apps"
|
||||
:key="app.id"
|
||||
class="flex items-center justify-between p-4 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Icon icon="lucide:box" class="size-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium">
|
||||
{{ app.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ app.description || '暂无描述' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-medium">
|
||||
{{ app.card_types_count }} 种卡类
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ formatDate(app.created_at) }}
|
||||
</p>
|
||||
</div>
|
||||
<UiButton variant="outline" size="sm" as-child>
|
||||
<router-link :to="`/agent/apps/${app.id}`">
|
||||
查看
|
||||
</router-link>
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,175 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(false)
|
||||
const apps = ref<any[]>([])
|
||||
const cardTypes = ref<any[]>([])
|
||||
|
||||
const form = ref({
|
||||
app_id: route.query.app_id || '',
|
||||
card_type_id: route.query.card_type_id || '',
|
||||
quantity: 1,
|
||||
})
|
||||
|
||||
const selectedApp = computed(() => {
|
||||
return apps.value.find(a => a.id === Number(form.value.app_id))
|
||||
})
|
||||
|
||||
const availableCardTypes = computed(() => {
|
||||
return cardTypes.value.filter(ct => ct.app_id === Number(form.value.app_id))
|
||||
})
|
||||
|
||||
const totalPrice = computed(() => {
|
||||
const ct = cardTypes.value.find(c => c.id === Number(form.value.card_type_id))
|
||||
return ct ? ct.price * form.value.quantity : 0
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get('/agent/apps')
|
||||
apps.value = data || []
|
||||
|
||||
if (apps.value.length > 0) {
|
||||
const typesData = await api.get('/agent/card-types')
|
||||
cardTypes.value = typesData || []
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取数据失败:', error)
|
||||
}
|
||||
})
|
||||
|
||||
async function handleGenerate() {
|
||||
if (!form.value.app_id) {
|
||||
toast.error('请选择应用')
|
||||
return
|
||||
}
|
||||
if (!form.value.card_type_id) {
|
||||
toast.error('请选择卡类')
|
||||
return
|
||||
}
|
||||
if (form.value.quantity < 1 || form.value.quantity > 100) {
|
||||
toast.error('生成数量需要在 1-100 之间')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.post<{ codes: string[], cards: any[] }>('/agent/cards/generate', {
|
||||
app_id: Number(form.value.app_id),
|
||||
card_type_id: Number(form.value.card_type_id),
|
||||
quantity: form.value.quantity,
|
||||
})
|
||||
|
||||
toast.success(`成功生成 ${data.codes.length} 张卡密`)
|
||||
|
||||
const codesText = data.codes.join('\n')
|
||||
await navigator.clipboard.writeText(codesText)
|
||||
toast.success('卡密已复制到剪贴板')
|
||||
|
||||
router.push('/agent/cards')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('生成卡密失败:', error)
|
||||
toast.error(error.message || '生成失败')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
生成卡密
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
为授权应用生成卡密
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UiCard class="max-w-xl">
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>生成设置</UiCardTitle>
|
||||
<UiCardDescription>
|
||||
选择应用和卡类，设置生成数量
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<UiLabel>选择应用</UiLabel>
|
||||
<UiSelect v-model="form.app_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择应用" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem v-for="app in apps" :key="app.id" :value="String(app.id)">
|
||||
{{ app.name }}
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div v-if="form.app_id" class="space-y-2">
|
||||
<UiLabel>选择卡类</UiLabel>
|
||||
<UiSelect v-model="form.card_type_id">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue placeholder="请选择卡类" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
|
||||
{{ ct.name }} - {{ ct.duration_days }}天 - ¥{{ ct.price }}
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>生成数量</UiLabel>
|
||||
<UiInput
|
||||
v-model.number="form.quantity"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="100"
|
||||
placeholder="请输入生成数量"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
单次最多生成 100 张卡密
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPrice > 0" class="p-4 rounded-lg bg-muted/50">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-muted-foreground">预计费用</span>
|
||||
<span class="text-xl font-bold">¥{{ totalPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<UiButton variant="outline" as-child>
|
||||
<router-link to="/agent/cards">
|
||||
取消
|
||||
</router-link>
|
||||
</UiButton>
|
||||
<UiButton
|
||||
:disabled="loading || !form.app_id || !form.card_type_id"
|
||||
@click="handleGenerate"
|
||||
>
|
||||
<Icon v-if="loading" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
|
||||
{{ loading ? '生成中...' : '生成卡密' }}
|
||||
</UiButton>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
interface Card {
|
||||
id: number
|
||||
code: string
|
||||
app_name: string
|
||||
card_type_name: string
|
||||
status: string
|
||||
created_at: string
|
||||
used_at: string | null
|
||||
}
|
||||
|
||||
const loading = ref(true)
|
||||
const cards = ref<Card[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get<Card[]>('/agent/cards')
|
||||
cards.value = data || []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取卡密列表失败:', error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
if (!dateStr)
|
||||
return '-'
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
function getStatusBadge(status: string) {
|
||||
const map: Record<string, { label: string, class: string }> = {
|
||||
unused: { label: '未使用', class: 'bg-green-500/10 text-green-500' },
|
||||
used: { label: '已使用', class: 'bg-blue-500/10 text-blue-500' },
|
||||
expired: { label: '已过期', class: 'bg-red-500/10 text-red-500' },
|
||||
disabled: { label: '已禁用', class: 'bg-gray-500/10 text-gray-500' },
|
||||
}
|
||||
return map[status] || { label: status, class: '' }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
卡密管理
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
管理您生成的卡密
|
||||
</p>
|
||||
</div>
|
||||
<UiButton as-child>
|
||||
<router-link to="/agent/cards/create">
|
||||
<Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
|
||||
生成卡密
|
||||
</router-link>
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="cards.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:key" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无卡密记录</p>
|
||||
<UiButton class="mt-4" as-child>
|
||||
<router-link to="/agent/cards/create">
|
||||
生成卡密
|
||||
</router-link>
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-muted/50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
卡密
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
应用
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
卡类
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
状态
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
创建时间
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
使用时间
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y">
|
||||
<tr v-for="card in cards" :key="card.id" class="hover:bg-muted/30">
|
||||
<td class="px-4 py-3 font-mono text-sm">
|
||||
{{ card.code }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{{ card.app_name }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{{ card.card_type_name }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UiBadge :class="getStatusBadge(card.status).class" variant="outline">
|
||||
{{ getStatusBadge(card.status).label }}
|
||||
</UiBadge>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-muted-foreground">
|
||||
{{ formatDate(card.created_at) }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-muted-foreground">
|
||||
{{ formatDate(card.used_at) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
interface Transaction {
|
||||
id: number
|
||||
type: string
|
||||
amount: number
|
||||
description: string
|
||||
balance: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const loading = ref(true)
|
||||
const balance = ref(0)
|
||||
const transactions = ref<Transaction[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get<{ balance: number, transactions: Transaction[] }>('/agent/finance')
|
||||
balance.value = data?.balance || 0
|
||||
transactions.value = data?.transactions || []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取财务数据失败:', error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
return new Date(dateStr).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
function getTypeLabel(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
recharge: '充值',
|
||||
consume: '消费',
|
||||
refund: '退款',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
function getTypeClass(type: string) {
|
||||
const map: Record<string, string> = {
|
||||
recharge: 'text-green-500',
|
||||
consume: 'text-red-500',
|
||||
refund: 'text-blue-500',
|
||||
}
|
||||
return map[type] || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
财务管理
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
查看您的账户余额和交易记录
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<UiCard>
|
||||
<UiCardHeader class="pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
账户余额
|
||||
</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-3xl font-bold">
|
||||
¥{{ balance.toFixed(2) }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>交易记录</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:receipt" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无交易记录</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="divide-y">
|
||||
<div
|
||||
v-for="tx in transactions"
|
||||
:key="tx.id"
|
||||
class="flex items-center justify-between p-4 hover:bg-muted/30"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="size-10 rounded-xl flex items-center justify-center"
|
||||
:class="tx.type === 'recharge' ? 'bg-green-500/10' : tx.type === 'refund' ? 'bg-blue-500/10' : 'bg-red-500/10'"
|
||||
>
|
||||
<Icon
|
||||
:icon="tx.type === 'recharge' ? 'lucide:arrow-down-left' : tx.type === 'refund' ? 'lucide:rotate-ccw' : 'lucide:arrow-up-right'"
|
||||
:class="getTypeClass(tx.type)"
|
||||
class="size-5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
{{ tx.description || getTypeLabel(tx.type) }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ formatDate(tx.created_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p :class="getTypeClass(tx.type)" class="font-semibold text-lg">
|
||||
{{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ tx.amount.toFixed(2) }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
余额: ¥{{ tx.balance.toFixed(2) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,184 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
const loading = ref(true)
|
||||
const stats = ref({
|
||||
totalApps: 0,
|
||||
totalCards: 0,
|
||||
totalUsers: 0,
|
||||
totalRevenue: 0,
|
||||
todayCards: 0,
|
||||
todayRevenue: 0,
|
||||
})
|
||||
|
||||
const recentCards = ref<any[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get('/agent/stats')
|
||||
if (data) {
|
||||
stats.value = {
|
||||
totalApps: data.totalApps || 0,
|
||||
totalCards: data.totalCards || 0,
|
||||
totalUsers: data.totalUsers || 0,
|
||||
totalRevenue: data.totalRevenue || 0,
|
||||
todayCards: data.todayCards || 0,
|
||||
todayRevenue: data.todayRevenue || 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取统计数据失败:', error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
控制台
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
欢迎回来，查看您的业务概况
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
授权应用
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:boxes" class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ stats.totalApps }}
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
已授权的应用数量
|
||||
</p>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
卡密总数
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:key" class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ stats.totalCards.toLocaleString() }}
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
今日生成: {{ stats.todayCards }}
|
||||
</p>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
用户总数
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:users" class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ stats.totalUsers.toLocaleString() }}
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
累计注册用户
|
||||
</p>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
累计收入
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:dollar-sign" class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
¥{{ stats.totalRevenue.toFixed(2) }}
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
今日: ¥{{ stats.todayRevenue.toFixed(2) }}
|
||||
</p>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>快捷操作</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="grid gap-4 sm:grid-cols-2">
|
||||
<router-link to="/agent/cards/create">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:plus" class="size-5" />
|
||||
<span>生成卡密</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
<router-link to="/agent/apps">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:boxes" class="size-5" />
|
||||
<span>应用管理</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
<router-link to="/agent/users">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:users" class="size-5" />
|
||||
<span>用户管理</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
<router-link to="/agent/finance">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:credit-card" class="size-5" />
|
||||
<span>财务管理</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader>
|
||||
<UiCardTitle>最近生成卡密</UiCardTitle>
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div v-if="recentCards.length > 0" class="space-y-4">
|
||||
<div v-for="card in recentCards" :key="card.id" class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
{{ card.code }}
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ card.app_name }}
|
||||
</p>
|
||||
</div>
|
||||
<UiBadge :variant="card.status === 'unused' ? 'default' : 'secondary'">
|
||||
{{ card.status === 'unused' ? '未使用' : '已使用' }}
|
||||
</UiBadge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-8 text-muted-foreground">
|
||||
<Icon icon="lucide:key" class="size-12 mx-auto mb-2 opacity-30" />
|
||||
<p>暂无卡密记录</p>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
status: string
|
||||
created_at: string
|
||||
last_login_at: string | null
|
||||
}
|
||||
|
||||
const loading = ref(true)
|
||||
const users = ref<User[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get<User[]>('/agent/users')
|
||||
users.value = data || []
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取用户列表失败:', error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
if (!dateStr)
|
||||
return '-'
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
用户管理
|
||||
</h1>
|
||||
<p class="text-muted-foreground">
|
||||
管理您应用下的用户
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:users" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无用户记录</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-muted/50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
用户名
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
邮箱
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
状态
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
注册时间
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-medium">
|
||||
最后登录
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y">
|
||||
<tr v-for="user in users" :key="user.id" class="hover:bg-muted/30">
|
||||
<td class="px-4 py-3 font-medium">
|
||||
{{ user.username }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-muted-foreground">
|
||||
{{ user.email || '-' }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UiBadge
|
||||
:class="user.status === 'active' ? 'bg-green-500/10 text-green-500' : ''"
|
||||
variant="outline"
|
||||
>
|
||||
{{ user.status === 'active' ? '正常' : user.status }}
|
||||
</UiBadge>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-muted-foreground">
|
||||
{{ formatDate(user.created_at) }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-muted-foreground">
|
||||
{{ formatDate(user.last_login_at) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user