feat: 优化代理管理页面和代理后台页面
- 添加云端数据权限列到代理管理页面 - 重构代理后台用户管理、卡密管理、财务管理页面使用DataTable组件 - 添加统计卡片到代理后台各页面 - 修复agent-apps相关类型错误 - 添加代理后台页面i18n国际化支持 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -108,6 +108,10 @@ async function fetchCardTypes(appId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleAppChange(value: string | number | bigint | Record<string, any> | null | undefined) {
|
||||
fetchCardTypes(String(value || ''))
|
||||
}
|
||||
|
||||
watch(selectedCardType, (ct) => {
|
||||
if (ct) {
|
||||
formData.value.price = ct.price
|
||||
@@ -201,7 +205,7 @@ onMounted(() => {
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel>{{ t('admin.agentApps.createForm.selectApp') }} <span class="text-destructive">*</span></UiLabel>
|
||||
<UiSelect v-model="formData.application_id" :disabled="saving || loading" @update:model-value="fetchCardTypes($event)">
|
||||
<UiSelect v-model="formData.application_id" :disabled="saving || loading" @update:model-value="handleAppChange">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue :placeholder="t('admin.agentApps.createForm.selectAppPlaceholder')" />
|
||||
</UiSelectTrigger>
|
||||
|
||||
@@ -7,7 +7,7 @@ export interface AgentApp {
|
||||
status: string
|
||||
discount: number
|
||||
balance: number
|
||||
card_types: { card_type_id: number, can_generate: boolean, name?: string }[]
|
||||
card_types: { card_type_id: number, can_generate: boolean, name?: string, price?: number }[]
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
remark?: string
|
||||
|
||||
@@ -34,7 +34,7 @@ async function fetchAgentApps() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get<{ agent_apps?: AgentApp[] }>('/dev/agent-apps')
|
||||
agentApps.value = data?.agent_apps || data || []
|
||||
agentApps.value = Array.isArray(data) ? data : (data?.agent_apps || [])
|
||||
}
|
||||
catch {
|
||||
agentApps.value = []
|
||||
|
||||
@@ -68,7 +68,19 @@ export function getColumns(actions: {
|
||||
cell: ({ row }) => {
|
||||
const canCreate = row.getValue('can_create_agent') as boolean
|
||||
return h('div', { class: 'flex items-center justify-center' }, [
|
||||
canCreate
|
||||
canCreate
|
||||
? h(Check, { class: 'h-4 w-4 text-green-500' })
|
||||
: h(X, { class: 'h-4 w-4 text-red-500' }),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'can_view_cloud_data',
|
||||
header: () => t('admin.agents.columns.canViewCloudData'),
|
||||
cell: ({ row }) => {
|
||||
const canView = row.getValue('can_view_cloud_data') as boolean
|
||||
return h('div', { class: 'flex items-center justify-center' }, [
|
||||
canView
|
||||
? h(Check, { class: 'h-4 w-4 text-green-500' })
|
||||
: h(X, { class: 'h-4 w-4 text-red-500' }),
|
||||
])
|
||||
|
||||
@@ -12,6 +12,7 @@ export interface Agent {
|
||||
balance: number
|
||||
total_consumption: number
|
||||
can_create_agent: boolean
|
||||
can_view_cloud_data: boolean
|
||||
cards_count: number
|
||||
child_agents_count: number
|
||||
children?: Agent[]
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
import type { Composer } from 'vue-i18n'
|
||||
|
||||
import { h } from 'vue'
|
||||
|
||||
import type { Card } from '../data/schema'
|
||||
|
||||
import Badge from '@/components/ui/badge/Badge.vue'
|
||||
|
||||
export function getColumns(t: Composer['t']): ColumnDef<Card>[] {
|
||||
return [
|
||||
{
|
||||
accessorKey: 'code',
|
||||
header: () => t('agent.cards.columns.code'),
|
||||
cell: ({ row }) => {
|
||||
const code = row.getValue('code') as string
|
||||
return h('span', { class: 'font-mono text-sm' }, code)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'app_name',
|
||||
header: () => t('agent.cards.columns.appName'),
|
||||
cell: ({ row }) => {
|
||||
const appName = row.getValue('app_name') as string
|
||||
return h(Badge, { variant: 'secondary' }, () => appName)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'card_type_name',
|
||||
header: () => t('agent.cards.columns.cardTypeName'),
|
||||
cell: ({ row }) => {
|
||||
const cardTypeName = row.getValue('card_type_name') as string
|
||||
return h('span', { class: 'font-medium' }, cardTypeName)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: () => t('agent.cards.columns.status'),
|
||||
cell: ({ row }) => {
|
||||
const status = row.getValue('status') as string
|
||||
const statusMap: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive' }> = {
|
||||
unused: { label: t('agent.cards.status.unused'), variant: 'default' },
|
||||
used: { label: t('agent.cards.status.used'), variant: 'secondary' },
|
||||
expired: { label: t('agent.cards.status.expired'), variant: 'destructive' },
|
||||
disabled: { label: t('agent.cards.status.disabled'), variant: 'secondary' },
|
||||
}
|
||||
const { label, variant } = statusMap[status] || { label: status || '-', variant: 'secondary' }
|
||||
return h(Badge, { variant }, () => label)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => t('agent.cards.columns.createdAt'),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at') as string
|
||||
if (!createdAt) return '-'
|
||||
try {
|
||||
const date = new Date(createdAt)
|
||||
if (Number.isNaN(date.getTime())) return '-'
|
||||
return date.toLocaleDateString('zh-CN')
|
||||
}
|
||||
catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'used_at',
|
||||
header: () => t('agent.cards.columns.usedAt'),
|
||||
cell: ({ row }) => {
|
||||
const usedAt = row.getValue('used_at') as string | null
|
||||
if (!usedAt) return '-'
|
||||
try {
|
||||
const date = new Date(usedAt)
|
||||
if (Number.isNaN(date.getTime())) return '-'
|
||||
return date.toLocaleDateString('zh-CN')
|
||||
}
|
||||
catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import type { Table } from '@tanstack/vue-table'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { Input } from '@/components/ui/input'
|
||||
import type { Card } from '@/pages/agent/cards/data/schema'
|
||||
|
||||
const props = defineProps<{
|
||||
table: Table<Card>
|
||||
searchFilter?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:searchFilter': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const searchModel = computed({
|
||||
get: () => props.searchFilter,
|
||||
set: (value: string) => emit('update:searchFilter', value),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<UiInput
|
||||
v-model="searchModel"
|
||||
:placeholder="t('agent.cards.searchPlaceholder')"
|
||||
class="h-8 w-[200px] lg:w-[250px]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { DataTableProps } from '@/components/data-table/types'
|
||||
import type { Card } from '@/pages/agent/cards/data/schema'
|
||||
|
||||
import BulkActions from '@/components/data-table/bulk-actions.vue'
|
||||
import DataTable from '@/components/data-table/data-table.vue'
|
||||
import { SelectColumn } from '@/components/data-table/table-columns'
|
||||
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
|
||||
import DataTableViewOptions from '@/components/data-table/view-options.vue'
|
||||
import { getColumns } from '@/pages/agent/cards/components/columns'
|
||||
import DataTableToolbar from '@/pages/agent/cards/components/data-table-toolbar.vue'
|
||||
|
||||
const props = defineProps<Omit<DataTableProps<Card>, 'columns'> & {
|
||||
searchFilter?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'refresh': []
|
||||
'batchExport': []
|
||||
'export': []
|
||||
'update:searchFilter': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const columns = computed(() => [
|
||||
SelectColumn as ColumnDef<Card>,
|
||||
...getColumns(t),
|
||||
])
|
||||
|
||||
const table = generateVueTable<Card>({
|
||||
get data() { return props.data },
|
||||
get loading() { return props.loading },
|
||||
columns: columns.value,
|
||||
})
|
||||
|
||||
const columnLabels: Record<string, string> = {
|
||||
select: 'agent.cards.select',
|
||||
code: 'agent.cards.columns.code',
|
||||
app_name: 'agent.cards.columns.appName',
|
||||
card_type_name: 'agent.cards.columns.cardTypeName',
|
||||
status: 'agent.cards.columns.status',
|
||||
created_at: 'agent.cards.columns.createdAt',
|
||||
used_at: 'agent.cards.columns.usedAt',
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
table,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
|
||||
<template #toolbar>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-end">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
<BulkActions :table="table" entity-name="cards">
|
||||
<UiButton variant="outline" size="sm" @click="emit('batchExport')">
|
||||
{{ t('agent.cards.batchExportBtn') }}
|
||||
</UiButton>
|
||||
</BulkActions>
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DataTableToolbar
|
||||
:table
|
||||
:search-filter="searchFilter"
|
||||
@update:search-filter="emit('update:searchFilter', $event)"
|
||||
/>
|
||||
<slot name="filters" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UiButton variant="outline" size="sm" @click="emit('export')">
|
||||
{{ t('agent.cards.exportBtn') }}
|
||||
</UiButton>
|
||||
<DataTableViewOptions :table="table" :column-labels="columnLabels" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
export interface Card {
|
||||
id: number
|
||||
code: string
|
||||
app_name: string
|
||||
card_type_name: string
|
||||
status: string
|
||||
created_at: string
|
||||
used_at: string | null
|
||||
}
|
||||
@@ -1,27 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { Key, Loader2, Plus } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import type { Card } from '@/pages/agent/cards/data/schema'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import api from '@/services/api'
|
||||
import DataTable from '@/pages/agent/cards/components/data-table.vue'
|
||||
import api, { BASE_URL } from '@/services/api'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Card {
|
||||
id: number
|
||||
code: string
|
||||
app_name: string
|
||||
card_type_name: string
|
||||
status: string
|
||||
created_at: string
|
||||
used_at: string | null
|
||||
}
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(true)
|
||||
const cards = ref<Card[]>([])
|
||||
const tableRef = ref()
|
||||
const searchFilter = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
const filteredCards = computed(() => {
|
||||
let result = cards.value.filter(c => c)
|
||||
if (searchFilter.value) {
|
||||
const query = searchFilter.value.toLowerCase()
|
||||
result = result.filter(c =>
|
||||
c.code?.toLowerCase().includes(query)
|
||||
|| c.app_name?.toLowerCase().includes(query)
|
||||
|| c.card_type_name?.toLowerCase().includes(query),
|
||||
)
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
const unusedCount = computed(() => cards.value.filter(card => card.status === 'unused').length)
|
||||
const usedCount = computed(() => cards.value.filter(card => card.status === 'used').length)
|
||||
const expiredCount = computed(() => cards.value.filter(card => card.status === 'expired').length)
|
||||
const disabledCount = computed(() => cards.value.filter(card => card.status === 'disabled').length)
|
||||
|
||||
async function fetchCards() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get<any>('/agent/cards')
|
||||
if (Array.isArray(data)) {
|
||||
@@ -41,111 +57,127 @@ onMounted(async () => {
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToCreate() {
|
||||
router.push('/agent/cards/create')
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
const token = localStorage.getItem('token')
|
||||
const url = `${BASE_URL}/agent/cards/export?token=${token}`
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
|
||||
function handleBatchExport(ids: (string | number)[]) {
|
||||
if (!ids.length) return
|
||||
const token = localStorage.getItem('token')
|
||||
const params = new URLSearchParams()
|
||||
params.append('ids', ids.join(','))
|
||||
const url = `${BASE_URL}/agent/cards/export?${params.toString()}&token=${token}`
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCards()
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string | null) {
|
||||
if (!dateStr)
|
||||
return '-'
|
||||
return new Date(dateStr).toLocaleDateString()
|
||||
}
|
||||
|
||||
function getStatusBadge(status: string) {
|
||||
const map: Record<string, { label: string, class: string }> = {
|
||||
unused: { label: t('agent.cards.unused'), class: 'bg-green-500/10 text-green-500' },
|
||||
used: { label: t('agent.cards.used'), class: 'bg-blue-500/10 text-blue-500' },
|
||||
expired: { label: t('agent.cards.expired'), class: 'bg-red-500/10 text-red-500' },
|
||||
disabled: { label: t('agent.cards.disabled'), class: 'bg-gray-500/10 text-gray-500' },
|
||||
}
|
||||
return map[status] || { label: status, class: '' }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
:title="t('nav.cards')"
|
||||
description="管理生成的卡密"
|
||||
:title="t('agent.cards.title')"
|
||||
:description="t('agent.cards.description')"
|
||||
:breadcrumbs="[
|
||||
{ title: '控制台', href: '/agent' },
|
||||
{ title: '卡密管理' },
|
||||
{ title: t('nav.dashboard'), href: '/agent' },
|
||||
{ title: t('nav.cards') },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton as-child>
|
||||
<router-link to="/agent/cards/create">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
生成卡密
|
||||
</router-link>
|
||||
<UiButton @click="goToCreate">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
{{ t('agent.cards.generateCard') }}
|
||||
</UiButton>
|
||||
</template>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.cards.totalCards') }}
|
||||
</UiCardTitle>
|
||||
<Key class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ cards.length }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<div v-else-if="cards.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<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>
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.cards.unused') }}
|
||||
</UiCardTitle>
|
||||
<Key class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ unusedCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<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.filter(c => c)" :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>
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.cards.used') }}
|
||||
</UiCardTitle>
|
||||
<Key class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ usedCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.cards.expired') }}
|
||||
</UiCardTitle>
|
||||
<Key class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ expiredCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-6">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
v-else
|
||||
ref="tableRef"
|
||||
:loading
|
||||
:data="filteredCards"
|
||||
:search-filter="searchFilter"
|
||||
@refresh="fetchCards"
|
||||
@batch-export="handleBatchExport(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
|
||||
@export="handleExport"
|
||||
@update:search-filter="searchFilter = $event"
|
||||
/>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
import type { Composer } from 'vue-i18n'
|
||||
|
||||
import { ArrowDownLeft, ArrowUpRight, RotateCcw } from 'lucide-vue-next'
|
||||
import { h } from 'vue'
|
||||
|
||||
import type { Transaction } from '../data/schema'
|
||||
|
||||
import Badge from '@/components/ui/badge/Badge.vue'
|
||||
|
||||
export function getColumns(t: Composer['t']): ColumnDef<Transaction>[] {
|
||||
return [
|
||||
{
|
||||
accessorKey: 'type',
|
||||
header: () => t('agent.finance.columns.type'),
|
||||
cell: ({ row }) => {
|
||||
const type = row.getValue('type') as string
|
||||
const typeMap: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive', icon: any }> = {
|
||||
recharge: { label: t('agent.finance.types.recharge'), variant: 'default', icon: ArrowDownLeft },
|
||||
consume: { label: t('agent.finance.types.consume'), variant: 'secondary', icon: ArrowUpRight },
|
||||
refund: { label: t('agent.finance.types.refund'), variant: 'default', icon: RotateCcw },
|
||||
}
|
||||
const config = typeMap[type] || { label: type, variant: 'secondary', icon: ArrowUpRight }
|
||||
const iconClass = type === 'recharge' ? 'text-green-500' : type === 'refund' ? 'text-blue-500' : 'text-red-500'
|
||||
const bgClass = type === 'recharge' ? 'bg-green-500/10' : type === 'refund' ? 'bg-blue-500/10' : 'bg-red-500/10'
|
||||
|
||||
return h('div', { class: 'flex items-center gap-2' }, [
|
||||
h('div', { class: `size-8 rounded-lg flex items-center justify-center ${bgClass}` }, [
|
||||
h(config.icon, { class: `size-4 ${iconClass}` }),
|
||||
]),
|
||||
h('span', config.label),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: () => t('agent.finance.columns.description'),
|
||||
cell: ({ row }) => {
|
||||
const description = row.getValue('description') as string
|
||||
const type = row.getValue('type') as string
|
||||
return h('span', { class: 'text-muted-foreground' }, description || t(`agent.finance.types.${type}`) || '-')
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'amount',
|
||||
header: () => t('agent.finance.columns.amount'),
|
||||
cell: ({ row }) => {
|
||||
const type = row.getValue('type') as string
|
||||
const amount = row.getValue('amount') as number
|
||||
const prefix = type === 'recharge' || type === 'refund' ? '+' : '-'
|
||||
const textClass = type === 'recharge' || type === 'refund' ? 'text-green-500' : 'text-red-500'
|
||||
return h('span', { class: `font-semibold ${textClass}` }, `${prefix}¥${(amount || 0).toFixed(2)}`)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'balance',
|
||||
header: () => t('agent.finance.columns.balance'),
|
||||
cell: ({ row }) => {
|
||||
const balance = row.getValue('balance') as number
|
||||
return h('span', { class: 'text-muted-foreground' }, `¥${(balance || 0).toFixed(2)}`)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => t('agent.finance.columns.createdAt'),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at') as string
|
||||
if (!createdAt) return '-'
|
||||
try {
|
||||
const date = new Date(createdAt)
|
||||
if (Number.isNaN(date.getTime())) return '-'
|
||||
return h('span', { class: 'text-muted-foreground whitespace-nowrap' }, date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}))
|
||||
}
|
||||
catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import type { Table } from '@tanstack/vue-table'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { Transaction } from '@/pages/agent/finance/data/schema'
|
||||
|
||||
const props = defineProps<{
|
||||
table: Table<Transaction>
|
||||
typeFilter?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:typeFilter': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const typeModel = computed({
|
||||
get: () => props.typeFilter,
|
||||
set: (value: string) => emit('update:typeFilter', value),
|
||||
})
|
||||
|
||||
const typeOptions = computed(() => [
|
||||
{ label: t('agent.finance.allTypes'), value: '' },
|
||||
{ label: t('agent.finance.types.recharge'), value: 'recharge' },
|
||||
{ label: t('agent.finance.types.consume'), value: 'consume' },
|
||||
{ label: t('agent.finance.types.refund'), value: 'refund' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<UiSelect v-model="typeModel" class="w-[120px]">
|
||||
<UiSelectTrigger>
|
||||
<UiSelectValue :placeholder="t('agent.finance.selectType')" />
|
||||
</UiSelectTrigger>
|
||||
<UiSelectContent>
|
||||
<UiSelectItem v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</UiSelectItem>
|
||||
</UiSelectContent>
|
||||
</UiSelect>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { DataTableProps } from '@/components/data-table/types'
|
||||
import type { Transaction } from '@/pages/agent/finance/data/schema'
|
||||
|
||||
import DataTable from '@/components/data-table/data-table.vue'
|
||||
import { SelectColumn } from '@/components/data-table/table-columns'
|
||||
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
|
||||
import DataTableViewOptions from '@/components/data-table/view-options.vue'
|
||||
import { getColumns } from '@/pages/agent/finance/components/columns'
|
||||
import DataTableToolbar from '@/pages/agent/finance/components/data-table-toolbar.vue'
|
||||
|
||||
const props = defineProps<Omit<DataTableProps<Transaction>, 'columns'> & {
|
||||
typeFilter?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'refresh': []
|
||||
'update:typeFilter': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const columns = computed(() => [
|
||||
SelectColumn as ColumnDef<Transaction>,
|
||||
...getColumns(t),
|
||||
])
|
||||
|
||||
const table = generateVueTable<Transaction>({
|
||||
get data() { return props.data },
|
||||
get loading() { return props.loading },
|
||||
columns: columns.value,
|
||||
})
|
||||
|
||||
const columnLabels: Record<string, string> = {
|
||||
select: 'agent.finance.select',
|
||||
type: 'agent.finance.columns.type',
|
||||
description: 'agent.finance.columns.description',
|
||||
amount: 'agent.finance.columns.amount',
|
||||
balance: 'agent.finance.columns.balance',
|
||||
created_at: 'agent.finance.columns.createdAt',
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
table,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
|
||||
<template #toolbar>
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DataTableToolbar
|
||||
:table
|
||||
:type-filter="typeFilter"
|
||||
@update:typeFilter="emit('update:typeFilter', $event)"
|
||||
/>
|
||||
<slot name="filters" />
|
||||
</div>
|
||||
<DataTableViewOptions :table="table" :column-labels="columnLabels" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
export interface Transaction {
|
||||
id: number
|
||||
type: string
|
||||
amount: number
|
||||
description: string
|
||||
balance: number
|
||||
created_at: string
|
||||
}
|
||||
@@ -1,25 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDownLeft, ArrowUpRight, CreditCard, Loader2, Receipt, RotateCcw, TrendingDown, TrendingUp, Wallet } from 'lucide-vue-next'
|
||||
import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw, TrendingDown, TrendingUp, Wallet } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { Transaction } from '@/pages/agent/finance/data/schema'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import DataTable from '@/pages/agent/finance/components/data-table.vue'
|
||||
import api from '@/services/api'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
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[]>([])
|
||||
const tableRef = ref()
|
||||
const typeFilter = ref('')
|
||||
|
||||
const filteredTransactions = computed(() => {
|
||||
let result = transactions.value.filter(tx => tx)
|
||||
if (typeFilter.value) {
|
||||
result = result.filter(tx => tx.type === typeFilter.value)
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
const totalRecharge = computed(() => {
|
||||
return transactions.value
|
||||
@@ -33,6 +37,9 @@ const totalConsume = computed(() => {
|
||||
.reduce((sum, tx) => sum + (tx.amount || 0), 0)
|
||||
})
|
||||
|
||||
const rechargeCount = computed(() => transactions.value.filter(tx => tx.type === 'recharge' || tx.type === 'refund').length)
|
||||
const consumeCount = computed(() => transactions.value.filter(tx => tx.type === 'consume').length)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await api.get<any>('/agent/finance')
|
||||
@@ -55,80 +62,87 @@ onMounted(async () => {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
if (!dateStr) return '-'
|
||||
return dateStr.replace('T', ' ').substring(0, 19)
|
||||
}
|
||||
|
||||
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] || ''
|
||||
}
|
||||
|
||||
function getTypeIcon(type: string) {
|
||||
if (type === 'recharge') return ArrowDownLeft
|
||||
if (type === 'refund') return RotateCcw
|
||||
return ArrowUpRight
|
||||
}
|
||||
|
||||
function getTypeBgClass(type: string) {
|
||||
if (type === 'recharge') return 'bg-green-500/10'
|
||||
if (type === 'refund') return 'bg-blue-500/10'
|
||||
return 'bg-red-500/10'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
:title="t('nav.finance')"
|
||||
description="查看财务信息和交易记录"
|
||||
:title="t('agent.finance.title')"
|
||||
:description="t('agent.finance.description')"
|
||||
:breadcrumbs="[
|
||||
{ title: '控制台', href: '/agent' },
|
||||
{ title: '财务管理' },
|
||||
{ title: t('nav.dashboard'), href: '/agent' },
|
||||
{ title: t('nav.finance') },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-5">
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">账户余额</UiCardTitle>
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.finance.balance') }}
|
||||
</UiCardTitle>
|
||||
<Wallet class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">¥{{ balance.toFixed(2) }}</div>
|
||||
<div class="text-2xl font-bold">
|
||||
¥{{ balance.toFixed(2) }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">累计收入</UiCardTitle>
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.finance.rechargeCount') }}
|
||||
</UiCardTitle>
|
||||
<ArrowDownLeft class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ rechargeCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.finance.rechargeAmount') }}
|
||||
</UiCardTitle>
|
||||
<TrendingUp class="size-4 text-green-500" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold text-green-500">+¥{{ totalRecharge.toFixed(2) }}</div>
|
||||
<div class="text-2xl font-bold text-green-500">
|
||||
+¥{{ totalRecharge.toFixed(2) }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">累计支出</UiCardTitle>
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.finance.consumeCount') }}
|
||||
</UiCardTitle>
|
||||
<ArrowUpRight class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ consumeCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.finance.consumeAmount') }}
|
||||
</UiCardTitle>
|
||||
<TrendingDown class="size-4 text-red-500" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold text-red-500">-¥{{ totalConsume.toFixed(2) }}</div>
|
||||
<div class="text-2xl font-bold text-red-500">
|
||||
-¥{{ totalConsume.toFixed(2) }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
@@ -137,66 +151,26 @@ function getTypeBgClass(type: string) {
|
||||
<UiCardHeader>
|
||||
<UiCardTitle class="flex items-center gap-2">
|
||||
<Receipt class="size-5" />
|
||||
交易记录
|
||||
{{ t('agent.finance.transactions') }}
|
||||
</UiCardTitle>
|
||||
<UiCardDescription>账户资金变动记录</UiCardDescription>
|
||||
<UiCardDescription>
|
||||
{{ t('agent.finance.transactionsDesc') }}
|
||||
</UiCardDescription>
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="p-0">
|
||||
<UiCardContent class="p-6">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Receipt class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无交易记录</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/50">
|
||||
<tr>
|
||||
<th class="text-left p-3 font-medium">类型</th>
|
||||
<th class="text-left p-3 font-medium">描述</th>
|
||||
<th class="text-right p-3 font-medium">金额</th>
|
||||
<th class="text-right p-3 font-medium">余额</th>
|
||||
<th class="text-left p-3 font-medium">时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="tx in transactions.filter(t => t)" :key="tx.id" class="border-t hover:bg-muted/30 transition-colors">
|
||||
<td class="p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="size-8 rounded-lg flex items-center justify-center"
|
||||
:class="getTypeBgClass(tx.type)"
|
||||
>
|
||||
<component
|
||||
:is="getTypeIcon(tx.type)"
|
||||
:class="getTypeClass(tx.type)"
|
||||
class="size-4"
|
||||
/>
|
||||
</div>
|
||||
<span>{{ getTypeLabel(tx.type) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-3 text-muted-foreground">
|
||||
{{ tx.description || getTypeLabel(tx.type) }}
|
||||
</td>
|
||||
<td class="p-3 text-right">
|
||||
<span :class="getTypeClass(tx.type)" class="font-semibold">
|
||||
{{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ (tx.amount || 0).toFixed(2) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-3 text-right text-muted-foreground">
|
||||
¥{{ (tx.balance || 0).toFixed(2) }}
|
||||
</td>
|
||||
<td class="p-3 text-muted-foreground">
|
||||
{{ formatDate(tx.created_at) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTable
|
||||
v-else
|
||||
ref="tableRef"
|
||||
:loading
|
||||
:data="filteredTransactions"
|
||||
:type-filter="typeFilter"
|
||||
@refresh="() => {}"
|
||||
@update:typeFilter="typeFilter = $event"
|
||||
/>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
import type { Composer } from 'vue-i18n'
|
||||
|
||||
import { h } from 'vue'
|
||||
|
||||
import type { User } from '../data/schema'
|
||||
|
||||
import Badge from '@/components/ui/badge/Badge.vue'
|
||||
|
||||
export function getColumns(t: Composer['t']): ColumnDef<User>[] {
|
||||
return [
|
||||
{
|
||||
accessorKey: 'username',
|
||||
header: () => t('agent.users.columns.username'),
|
||||
cell: ({ row }) => {
|
||||
const username = row.getValue('username') as string
|
||||
return h('div', { class: 'flex items-center space-x-3' }, [
|
||||
h('div', { class: 'h-8 w-8 rounded bg-primary/10 flex items-center justify-center flex-shrink-0' }, [
|
||||
h('span', { class: 'text-primary font-bold text-sm' }, username.charAt(0).toUpperCase()),
|
||||
]),
|
||||
h('div', {}, [
|
||||
h('p', { class: 'font-medium' }, username),
|
||||
]),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: () => t('agent.users.columns.email'),
|
||||
cell: ({ row }) => {
|
||||
const email = row.getValue('email') as string
|
||||
return email || '-'
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: () => t('agent.users.columns.status'),
|
||||
cell: ({ row }) => {
|
||||
const status = row.getValue('status') as string
|
||||
const statusMap: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive' }> = {
|
||||
active: { label: t('agent.users.status.active'), variant: 'default' },
|
||||
disabled: { label: t('agent.users.status.disabled'), variant: 'secondary' },
|
||||
banned: { label: t('agent.users.status.banned'), variant: 'destructive' },
|
||||
}
|
||||
const { label, variant } = statusMap[status] || { label: status || '-', variant: 'secondary' }
|
||||
return h(Badge, { variant }, () => label)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => t('agent.users.columns.createdAt'),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at') as string
|
||||
if (!createdAt) return '-'
|
||||
try {
|
||||
const date = new Date(createdAt)
|
||||
if (Number.isNaN(date.getTime())) return '-'
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'last_login_at',
|
||||
header: () => t('agent.users.columns.lastLoginAt'),
|
||||
cell: ({ row }) => {
|
||||
const lastLoginAt = row.getValue('last_login_at') as string | null
|
||||
if (!lastLoginAt) return '-'
|
||||
try {
|
||||
const date = new Date(lastLoginAt)
|
||||
if (Number.isNaN(date.getTime())) return '-'
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import type { Table } from '@tanstack/vue-table'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { Input } from '@/components/ui/input'
|
||||
import type { User } from '@/pages/agent/users/data/schema'
|
||||
|
||||
const props = defineProps<{
|
||||
table: Table<User>
|
||||
searchFilter?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:searchFilter': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const searchModel = computed({
|
||||
get: () => props.searchFilter,
|
||||
set: (value: string) => emit('update:searchFilter', value),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<UiInput
|
||||
v-model="searchModel"
|
||||
:placeholder="t('agent.users.searchPlaceholder')"
|
||||
class="h-8 w-[200px] lg:w-[250px]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { DataTableProps } from '@/components/data-table/types'
|
||||
import type { User } from '@/pages/agent/users/data/schema'
|
||||
|
||||
import DataTable from '@/components/data-table/data-table.vue'
|
||||
import { SelectColumn } from '@/components/data-table/table-columns'
|
||||
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
|
||||
import DataTableViewOptions from '@/components/data-table/view-options.vue'
|
||||
import { getColumns } from '@/pages/agent/users/components/columns'
|
||||
import DataTableToolbar from '@/pages/agent/users/components/data-table-toolbar.vue'
|
||||
|
||||
const props = defineProps<Omit<DataTableProps<User>, 'columns'> & {
|
||||
searchFilter?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'refresh': []
|
||||
'update:searchFilter': [value: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const columns = computed(() => [
|
||||
SelectColumn as ColumnDef<User>,
|
||||
...getColumns(t),
|
||||
])
|
||||
|
||||
const table = generateVueTable<User>({
|
||||
get data() { return props.data },
|
||||
get loading() { return props.loading },
|
||||
columns: columns.value,
|
||||
})
|
||||
|
||||
const columnLabels: Record<string, string> = {
|
||||
select: 'agent.users.select',
|
||||
username: 'agent.users.columns.username',
|
||||
email: 'agent.users.columns.email',
|
||||
status: 'agent.users.columns.status',
|
||||
created_at: 'agent.users.columns.createdAt',
|
||||
last_login_at: 'agent.users.columns.lastLoginAt',
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
table,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
|
||||
<template #toolbar>
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DataTableToolbar
|
||||
:table
|
||||
:search-filter="searchFilter"
|
||||
@update:search-filter="emit('update:searchFilter', $event)"
|
||||
/>
|
||||
<slot name="filters" />
|
||||
</div>
|
||||
<DataTableViewOptions :table="table" :column-labels="columnLabels" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
export interface User {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
status: string
|
||||
created_at: string
|
||||
last_login_at: string | null
|
||||
}
|
||||
@@ -1,30 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { Loader2, Search, Users } from 'lucide-vue-next'
|
||||
import { Loader2, Users } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { User } from '@/pages/agent/users/data/schema'
|
||||
|
||||
import { BasicPage } from '@/components/global-layout'
|
||||
import DataTable from '@/pages/agent/users/components/data-table.vue'
|
||||
import api from '@/services/api'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
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[]>([])
|
||||
const searchQuery = ref('')
|
||||
const tableRef = ref()
|
||||
const searchFilter = ref('')
|
||||
|
||||
const filteredUsers = computed(() => {
|
||||
let result = users.value.filter(u => u)
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
if (searchFilter.value) {
|
||||
const query = searchFilter.value.toLowerCase()
|
||||
result = result.filter(u =>
|
||||
u.username?.toLowerCase().includes(query)
|
||||
|| u.email?.toLowerCase().includes(query),
|
||||
@@ -33,7 +28,12 @@ const filteredUsers = computed(() => {
|
||||
return result
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const activeCount = computed(() => users.value.filter(user => user.status === 'active').length)
|
||||
const disabledCount = computed(() => users.value.filter(user => user.status === 'disabled').length)
|
||||
const bannedCount = computed(() => users.value.filter(user => user.status === 'banned').length)
|
||||
|
||||
async function fetchUsers() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get<any>('/agent/users')
|
||||
if (Array.isArray(data)) {
|
||||
@@ -53,89 +53,99 @@ onMounted(async () => {
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchUsers()
|
||||
})
|
||||
|
||||
function formatDate(dateStr: string | null) {
|
||||
if (!dateStr) return '-'
|
||||
return dateStr.replace('T', ' ').substring(0, 19)
|
||||
}
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
const map: Record<string, { label: string, variant: string }> = {
|
||||
active: { label: '正常', variant: 'default' },
|
||||
disabled: { label: '禁用', variant: 'secondary' },
|
||||
banned: { label: '封禁', variant: 'destructive' },
|
||||
}
|
||||
return map[status] || { label: status || '未知', variant: 'outline' }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicPage
|
||||
:title="t('nav.users')"
|
||||
description="查看和管理用户信息"
|
||||
:title="t('agent.users.title')"
|
||||
:description="t('agent.users.description')"
|
||||
:breadcrumbs="[
|
||||
{ title: '控制台', href: '/agent' },
|
||||
{ title: '用户管理' },
|
||||
{ title: t('nav.dashboard'), href: '/agent' },
|
||||
{ title: t('nav.users') },
|
||||
]"
|
||||
sticky
|
||||
>
|
||||
<template #actions>
|
||||
<div class="relative">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<UiInput
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索用户名或邮箱..."
|
||||
class="pl-9 w-[250px]"
|
||||
/>
|
||||
<div class="space-y-6">
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.users.totalUsers') }}
|
||||
</UiCardTitle>
|
||||
<Users class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ users.length }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.users.status.active') }}
|
||||
</UiCardTitle>
|
||||
<Users class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ activeCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.users.status.disabled') }}
|
||||
</UiCardTitle>
|
||||
<Users class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ disabledCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
|
||||
<UiCard>
|
||||
<UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
{{ t('agent.users.status.banned') }}
|
||||
</UiCardTitle>
|
||||
<Users class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ bannedCount }}
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Users class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无用户数据</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-if="filteredUsers.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Search class="size-12 mx-auto mb-4 opacity-30" />
|
||||
<p>未找到匹配的用户</p>
|
||||
<UiCard>
|
||||
<UiCardContent class="p-6">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/50">
|
||||
<tr>
|
||||
<th class="text-left p-3 font-medium">用户名</th>
|
||||
<th class="text-left p-3 font-medium">邮箱</th>
|
||||
<th class="text-left p-3 font-medium">状态</th>
|
||||
<th class="text-left p-3 font-medium">注册时间</th>
|
||||
<th class="text-left p-3 font-medium">最后登录</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in filteredUsers" :key="user.id" class="border-t hover:bg-muted/30 transition-colors">
|
||||
<td class="p-3 font-medium">{{ user.username }}</td>
|
||||
<td class="p-3 text-muted-foreground">{{ user.email || '-' }}</td>
|
||||
<td class="p-3">
|
||||
<UiBadge :variant="getStatusInfo(user.status).variant as any">
|
||||
{{ getStatusInfo(user.status).label }}
|
||||
</UiBadge>
|
||||
</td>
|
||||
<td class="p-3 text-muted-foreground">{{ formatDate(user.created_at) }}</td>
|
||||
<td class="p-3 text-muted-foreground">{{ formatDate(user.last_login_at) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
<DataTable
|
||||
v-else
|
||||
ref="tableRef"
|
||||
:loading
|
||||
:data="filteredUsers"
|
||||
:search-filter="searchFilter"
|
||||
@refresh="fetchUsers"
|
||||
@update:search-filter="searchFilter = $event"
|
||||
/>
|
||||
</UiCardContent>
|
||||
</UiCard>
|
||||
</div>
|
||||
</BasicPage>
|
||||
</template>
|
||||
|
||||
@@ -1286,6 +1286,7 @@
|
||||
"cardsCount": "Cards Generated",
|
||||
"childAgentsCount": "Child Agents",
|
||||
"canCreateAgent": "Create Agent Permission",
|
||||
"canViewCloudData": "Cloud Data Permission",
|
||||
"balance": "Balance",
|
||||
"createdAt": "Created At",
|
||||
"lastLoginAt": "Last Login"
|
||||
@@ -2723,11 +2724,32 @@
|
||||
"loadFailed": "Failed to load financial data",
|
||||
"accountBalance": "Account Balance",
|
||||
"transactionRecords": "Transaction Records",
|
||||
"transactions": "Transaction Records",
|
||||
"transactionsDesc": "Account balance change records",
|
||||
"noTransactions": "No transactions yet",
|
||||
"balance": "Balance",
|
||||
"recharge": "Recharge",
|
||||
"consume": "Consume",
|
||||
"refund": "Refund"
|
||||
"refund": "Refund",
|
||||
"rechargeCount": "Income Count",
|
||||
"rechargeAmount": "Income Amount",
|
||||
"consumeCount": "Expense Count",
|
||||
"consumeAmount": "Expense Amount",
|
||||
"allTypes": "All Types",
|
||||
"selectType": "Select Type",
|
||||
"select": "Select",
|
||||
"columns": {
|
||||
"type": "Type",
|
||||
"description": "Description",
|
||||
"amount": "Amount",
|
||||
"balance": "Balance",
|
||||
"createdAt": "Time"
|
||||
},
|
||||
"types": {
|
||||
"recharge": "Recharge",
|
||||
"consume": "Consume",
|
||||
"refund": "Refund"
|
||||
}
|
||||
},
|
||||
"users": {
|
||||
"title": "User Management",
|
||||
@@ -2739,7 +2761,22 @@
|
||||
"status": "Status",
|
||||
"registerTime": "Register Time",
|
||||
"lastLogin": "Last Login",
|
||||
"active": "Active"
|
||||
"active": "Active",
|
||||
"totalUsers": "Total Users",
|
||||
"searchPlaceholder": "Search username or email...",
|
||||
"select": "Select",
|
||||
"columns": {
|
||||
"username": "Username",
|
||||
"email": "Email",
|
||||
"status": "Status",
|
||||
"createdAt": "Created At",
|
||||
"lastLoginAt": "Last Login"
|
||||
},
|
||||
"status": {
|
||||
"active": "Active",
|
||||
"disabled": "Disabled",
|
||||
"banned": "Banned"
|
||||
}
|
||||
},
|
||||
"apps": {
|
||||
"title": "App Management",
|
||||
@@ -2767,6 +2804,7 @@
|
||||
"description": "Manage your generated cards",
|
||||
"loadFailed": "Failed to load card list",
|
||||
"generateCards": "Generate Cards",
|
||||
"generateCard": "Generate Card",
|
||||
"noCards": "No card records yet",
|
||||
"cardCode": "Card Code",
|
||||
"app": "Application",
|
||||
@@ -2778,6 +2816,25 @@
|
||||
"used": "Used",
|
||||
"expired": "Expired",
|
||||
"disabled": "Disabled",
|
||||
"totalCards": "Total Cards",
|
||||
"searchPlaceholder": "Search card code, app or card type...",
|
||||
"exportBtn": "Export",
|
||||
"batchExportBtn": "Batch Export",
|
||||
"select": "Select",
|
||||
"columns": {
|
||||
"code": "Card Code",
|
||||
"appName": "Application",
|
||||
"cardTypeName": "Card Type",
|
||||
"status": "Status",
|
||||
"createdAt": "Created At",
|
||||
"usedAt": "Used At"
|
||||
},
|
||||
"status": {
|
||||
"unused": "Unused",
|
||||
"used": "Used",
|
||||
"expired": "Expired",
|
||||
"disabled": "Disabled"
|
||||
},
|
||||
"create": {
|
||||
"title": "Generate Cards",
|
||||
"description": "Generate cards for authorized applications",
|
||||
|
||||
@@ -1242,6 +1242,7 @@
|
||||
"cardsCount": "生成卡密",
|
||||
"childAgentsCount": "下级代理",
|
||||
"canCreateAgent": "创建代理权限",
|
||||
"canViewCloudData": "云端数据权限",
|
||||
"balance": "余额",
|
||||
"totalConsumption": "消费",
|
||||
"createdAt": "注册时间",
|
||||
@@ -2713,11 +2714,32 @@
|
||||
"loadFailed": "获取财务数据失败",
|
||||
"accountBalance": "账户余额",
|
||||
"transactionRecords": "交易记录",
|
||||
"transactions": "交易记录",
|
||||
"transactionsDesc": "账户资金变动记录",
|
||||
"noTransactions": "暂无交易记录",
|
||||
"balance": "余额",
|
||||
"recharge": "充值",
|
||||
"consume": "消费",
|
||||
"refund": "退款"
|
||||
"refund": "退款",
|
||||
"rechargeCount": "收入笔数",
|
||||
"rechargeAmount": "收入金额",
|
||||
"consumeCount": "支出笔数",
|
||||
"consumeAmount": "支出金额",
|
||||
"allTypes": "全部类型",
|
||||
"selectType": "选择类型",
|
||||
"select": "选择",
|
||||
"columns": {
|
||||
"type": "类型",
|
||||
"description": "描述",
|
||||
"amount": "金额",
|
||||
"balance": "余额",
|
||||
"createdAt": "时间"
|
||||
},
|
||||
"types": {
|
||||
"recharge": "充值",
|
||||
"consume": "消费",
|
||||
"refund": "退款"
|
||||
}
|
||||
},
|
||||
"users": {
|
||||
"title": "用户管理",
|
||||
@@ -2729,7 +2751,22 @@
|
||||
"status": "状态",
|
||||
"registerTime": "注册时间",
|
||||
"lastLogin": "最后登录",
|
||||
"active": "正常"
|
||||
"active": "正常",
|
||||
"totalUsers": "用户总数",
|
||||
"searchPlaceholder": "搜索用户名或邮箱...",
|
||||
"select": "选择",
|
||||
"columns": {
|
||||
"username": "用户名",
|
||||
"email": "邮箱",
|
||||
"status": "状态",
|
||||
"createdAt": "注册时间",
|
||||
"lastLoginAt": "最后登录"
|
||||
},
|
||||
"status": {
|
||||
"active": "正常",
|
||||
"disabled": "禁用",
|
||||
"banned": "封禁"
|
||||
}
|
||||
},
|
||||
"apps": {
|
||||
"title": "应用管理",
|
||||
@@ -2757,6 +2794,7 @@
|
||||
"description": "管理您生成的卡密",
|
||||
"loadFailed": "获取卡密列表失败",
|
||||
"generateCards": "生成卡密",
|
||||
"generateCard": "生成卡密",
|
||||
"noCards": "暂无卡密记录",
|
||||
"cardCode": "卡密",
|
||||
"app": "应用",
|
||||
@@ -2768,6 +2806,25 @@
|
||||
"used": "已使用",
|
||||
"expired": "已过期",
|
||||
"disabled": "已禁用",
|
||||
"totalCards": "卡密总数",
|
||||
"searchPlaceholder": "搜索卡号、应用或卡类...",
|
||||
"exportBtn": "导出",
|
||||
"batchExportBtn": "批量导出",
|
||||
"select": "选择",
|
||||
"columns": {
|
||||
"code": "卡号",
|
||||
"appName": "应用",
|
||||
"cardTypeName": "卡类",
|
||||
"status": "状态",
|
||||
"createdAt": "创建时间",
|
||||
"usedAt": "使用时间"
|
||||
},
|
||||
"status": {
|
||||
"unused": "未使用",
|
||||
"used": "已使用",
|
||||
"expired": "已过期",
|
||||
"disabled": "已禁用"
|
||||
},
|
||||
"create": {
|
||||
"title": "生成卡密",
|
||||
"description": "为授权应用生成卡密",
|
||||
|
||||
Reference in New Issue
Block a user