chore: 提交所有工作进度 — SaaS 后端增强、Admin UI、桌面端集成
包含大量 SaaS 平台改进、Admin 管理后台更新、桌面端集成完善、 文档同步、测试文件重构等内容。为 QA 测试准备干净工作树。
This commit is contained in:
iven
@@ -1,4 +1,13 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
const nextConfig = {
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/api/:path*',
|
||||
destination: 'http://localhost:8080/api/:path*',
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.14",
|
||||
"@radix-ui/react-select": "^2.2.5",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-switch": "^1.2.5",
|
||||
"@radix-ui/react-tabs": "^1.1.12",
|
||||
"@radix-ui/react-tooltip": "^1.2.7",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.484.0",
|
||||
@@ -22,6 +22,7 @@
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"recharts": "^2.15.3",
|
||||
"swr": "^2.4.1",
|
||||
"tailwind-merge": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
29
admin/pnpm-lock.yaml
generated
29
admin/pnpm-lock.yaml
generated
@@ -47,6 +47,9 @@ importers:
|
||||
recharts:
|
||||
specifier: ^2.15.3
|
||||
version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
swr:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1(react@18.3.1)
|
||||
tailwind-merge:
|
||||
specifier: ^3.0.2
|
||||
version: 3.5.0
|
||||
@@ -719,6 +722,10 @@ packages:
|
||||
decimal.js-light@2.5.1:
|
||||
resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
|
||||
|
||||
dequal@2.0.3:
|
||||
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
detect-node-es@1.1.0:
|
||||
resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
|
||||
|
||||
@@ -1093,6 +1100,11 @@ packages:
|
||||
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
swr@2.4.1:
|
||||
resolution: {integrity: sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA==}
|
||||
peerDependencies:
|
||||
react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
tailwind-merge@3.5.0:
|
||||
resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
|
||||
|
||||
@@ -1159,6 +1171,11 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
use-sync-external-store@1.6.0:
|
||||
resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
|
||||
@@ -1744,6 +1761,8 @@ snapshots:
|
||||
|
||||
decimal.js-light@2.5.1: {}
|
||||
|
||||
dequal@2.0.3: {}
|
||||
|
||||
detect-node-es@1.1.0: {}
|
||||
|
||||
didyoumean@1.2.2: {}
|
||||
@@ -2073,6 +2092,12 @@ snapshots:
|
||||
|
||||
supports-preserve-symlinks-flag@1.0.0: {}
|
||||
|
||||
swr@2.4.1(react@18.3.1):
|
||||
dependencies:
|
||||
dequal: 2.0.3
|
||||
react: 18.3.1
|
||||
use-sync-external-store: 1.6.0(react@18.3.1)
|
||||
|
||||
tailwind-merge@3.5.0: {}
|
||||
|
||||
tailwindcss@3.4.19:
|
||||
@@ -2151,6 +2176,10 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.28
|
||||
|
||||
use-sync-external-store@1.6.0(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
util-deprecate@1.0.2: {}
|
||||
|
||||
victory-vendor@36.9.2:
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
@@ -41,6 +42,9 @@ import {
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { useDebounce } from '@/hooks/use-debounce'
|
||||
import type { AccountPublic } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
@@ -64,14 +68,28 @@ const statusLabels: Record<string, string> = {
|
||||
}
|
||||
|
||||
export default function AccountsPage() {
|
||||
const [accounts, setAccounts] = useState<AccountPublic[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
const [roleFilter, setRoleFilter] = useState<string>('all')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [mutationError, setMutationError] = useState('')
|
||||
|
||||
const debouncedSearch = useDebounce(search, 300)
|
||||
|
||||
const { data, error: swrError, isLoading, mutate } = useSWR(
|
||||
['accounts', page, debouncedSearch, roleFilter, statusFilter],
|
||||
() => {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (debouncedSearch.trim()) params.search = debouncedSearch.trim()
|
||||
if (roleFilter !== 'all') params.role = roleFilter
|
||||
if (statusFilter !== 'all') params.status = statusFilter
|
||||
return api.accounts.list(params)
|
||||
},
|
||||
)
|
||||
|
||||
const accounts = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
const error = swrError?.message || mutationError
|
||||
|
||||
// 编辑 Dialog
|
||||
const [editTarget, setEditTarget] = useState<AccountPublic | null>(null)
|
||||
@@ -82,33 +100,6 @@ export default function AccountsPage() {
|
||||
const [confirmTarget, setConfirmTarget] = useState<{ id: string; action: string; status: string } | null>(null)
|
||||
const [confirmSaving, setConfirmSaving] = useState(false)
|
||||
|
||||
const fetchAccounts = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (search.trim()) params.search = search.trim()
|
||||
if (roleFilter !== 'all') params.role = roleFilter
|
||||
if (statusFilter !== 'all') params.status = statusFilter
|
||||
|
||||
const res = await api.accounts.list(params)
|
||||
setAccounts(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setError(err.body.message)
|
||||
} else {
|
||||
setError('加载失败')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, search, roleFilter, statusFilter])
|
||||
|
||||
useEffect(() => {
|
||||
fetchAccounts()
|
||||
}, [fetchAccounts])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
function openEditDialog(account: AccountPublic) {
|
||||
@@ -130,10 +121,10 @@ export default function AccountsPage() {
|
||||
role: editForm.role as AccountPublic['role'],
|
||||
})
|
||||
setEditTarget(null)
|
||||
fetchAccounts()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setError(err.body.message)
|
||||
setMutationError(err.body.message)
|
||||
}
|
||||
} finally {
|
||||
setEditSaving(false)
|
||||
@@ -157,10 +148,10 @@ export default function AccountsPage() {
|
||||
status: confirmTarget.status as AccountPublic['status'],
|
||||
})
|
||||
setConfirmTarget(null)
|
||||
fetchAccounts()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setError(err.body.message)
|
||||
setMutationError(err.body.message)
|
||||
}
|
||||
} finally {
|
||||
setConfirmSaving(false)
|
||||
@@ -205,24 +196,13 @@ export default function AccountsPage() {
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => { setMutationError('') }} />}
|
||||
|
||||
{/* 表格 */}
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : accounts.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={7} />
|
||||
) : error ? null : accounts.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
290
admin/src/app/(dashboard)/agent-templates/page.tsx
Normal file
290
admin/src/app/(dashboard)/agent-templates/page.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { AgentTemplate } from '@/lib/types'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
|
||||
export default function AgentTemplatesPage() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [error, setError] = useState('')
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading, mutate } = useSWR(
|
||||
['agentTemplates.list', page],
|
||||
() => api.agentTemplates.list({ page, page_size: 50 }),
|
||||
)
|
||||
|
||||
const templates = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
const fd = new FormData(e.currentTarget)
|
||||
try {
|
||||
const tools = (fd.get('tools') as string || '').split(',').map(s => s.trim()).filter(Boolean)
|
||||
const capabilities = (fd.get('capabilities') as string || '').split(',').map(s => s.trim()).filter(Boolean)
|
||||
await api.agentTemplates.create({
|
||||
name: fd.get('name') as string,
|
||||
description: (fd.get('description') as string) || undefined,
|
||||
category: (fd.get('category') as string) || 'general',
|
||||
model: (fd.get('model') as string) || undefined,
|
||||
system_prompt: (fd.get('system_prompt') as string) || undefined,
|
||||
tools: tools.length > 0 ? tools : undefined,
|
||||
capabilities: capabilities.length > 0 ? capabilities : undefined,
|
||||
temperature: (fd.get('temperature') as string) ? parseFloat(fd.get('temperature') as string) : undefined,
|
||||
max_tokens: (fd.get('max_tokens') as string) ? parseInt(fd.get('max_tokens') as string, 10) : undefined,
|
||||
visibility: (fd.get('visibility') as string) || 'public',
|
||||
})
|
||||
setShowCreate(false)
|
||||
mutate()
|
||||
} catch {
|
||||
setError('创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async (id: string, name: string) => {
|
||||
if (!confirm(`确认归档模板 "${name}"？`)) return
|
||||
try {
|
||||
await api.agentTemplates.archive(id)
|
||||
mutate()
|
||||
} catch {
|
||||
setError('归档失败')
|
||||
}
|
||||
}
|
||||
|
||||
const statusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
active: 'bg-emerald-500/20 text-emerald-400',
|
||||
archived: 'bg-zinc-500/20 text-zinc-400',
|
||||
}
|
||||
return <span className={`px-2 py-0.5 text-xs rounded-full ${colors[status] || colors.archived}`}>{status}</span>
|
||||
}
|
||||
|
||||
const sourceBadge = (source: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
builtin: 'bg-blue-500/20 text-blue-400',
|
||||
custom: 'bg-purple-500/20 text-purple-400',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${colors[source] || ''}`}>
|
||||
{source === 'builtin' ? '内置' : '自定义'}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Agent 配置模板</h1>
|
||||
<p className="text-sm text-zinc-400 mt-1">管理 Agent 配置模板，支持团队共享和一键复用</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
||||
>
|
||||
+ 新建模板
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-800">
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">名称</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">分类</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">来源</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">模型</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">工具数</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">可见性</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">状态</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">更新时间</th>
|
||||
<th className="text-right px-4 py-3 text-zinc-400 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={9}>
|
||||
<TableSkeleton rows={5} cols={9} hasToolbar={false} />
|
||||
</td>
|
||||
</tr>
|
||||
) : templates.length === 0 ? (
|
||||
<tr><td colSpan={9}><EmptyState message="暂无 Agent 模板" /></td></tr>
|
||||
) : (
|
||||
templates.map(t => (
|
||||
<tr key={t.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/30">
|
||||
<td className="px-4 py-3">
|
||||
<div>
|
||||
<span className="text-white font-medium">{t.name}</span>
|
||||
{t.description && (
|
||||
<p className="text-xs text-zinc-500 mt-0.5 truncate max-w-[200px]">{t.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.category}</td>
|
||||
<td className="px-4 py-3">{sourceBadge(t.source)}</td>
|
||||
<td className="px-4 py-3 text-zinc-300 font-mono text-xs">{t.model || '-'}</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.tools.length}</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.visibility}</td>
|
||||
<td className="px-4 py-3">{statusBadge(t.status)}</td>
|
||||
<td className="px-4 py-3 text-zinc-500 text-xs">
|
||||
{new Date(t.updated_at).toLocaleString('zh-CN')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => setEditingId(editingId === t.id ? null : t.id)}
|
||||
className="text-zinc-400 hover:text-white mr-2"
|
||||
>
|
||||
详情
|
||||
</button>
|
||||
{t.source === 'custom' && (
|
||||
<button
|
||||
onClick={() => handleArchive(t.id, t.name)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
>
|
||||
归档
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="px-4 py-2 text-xs text-zinc-500 border-t border-zinc-800">
|
||||
共 {total} 个模板
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开详情 */}
|
||||
{editingId && (() => {
|
||||
const t = templates.find(t => t.id === editingId)
|
||||
if (!t) return null
|
||||
return (
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold text-white">{t.name} — 详情</h2>
|
||||
<button onClick={() => setEditingId(null)} className="text-zinc-400 hover:text-white text-sm">关闭</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-zinc-500">分类：</span>
|
||||
<span className="text-zinc-300">{t.category}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500">模型：</span>
|
||||
<span className="text-zinc-300 font-mono">{t.model || '未指定'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500">温度：</span>
|
||||
<span className="text-zinc-300">{t.temperature?.toFixed(2) || '默认'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500">最大 Token：</span>
|
||||
<span className="text-zinc-300">{t.max_tokens || '未限制'}</span>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<span className="text-zinc-500">工具：</span>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{t.tools.length > 0 ? t.tools.map(tool => (
|
||||
<span key={tool} className="px-2 py-0.5 bg-zinc-800 rounded text-xs text-zinc-300">{tool}</span>
|
||||
)) : <span className="text-zinc-600">无</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<span className="text-zinc-500">能力：</span>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{t.capabilities.length > 0 ? t.capabilities.map(cap => (
|
||||
<span key={cap} className="px-2 py-0.5 bg-blue-500/10 rounded text-xs text-blue-400">{cap}</span>
|
||||
)) : <span className="text-zinc-600">无</span>}
|
||||
</div>
|
||||
</div>
|
||||
{t.system_prompt && (
|
||||
<div className="col-span-2">
|
||||
<span className="text-zinc-500">系统提示词：</span>
|
||||
<pre className="text-xs text-zinc-400 bg-zinc-800/50 rounded p-2 mt-1 overflow-x-auto max-h-32">
|
||||
{t.system_prompt.substring(0, 500)}{t.system_prompt.length > 500 ? '...' : ''}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreate && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<form onSubmit={handleCreate} className="bg-zinc-900 rounded-xl border border-zinc-700 p-6 w-full max-w-lg space-y-4 max-h-[80vh] overflow-y-auto">
|
||||
<h2 className="text-lg font-semibold text-white">新建 Agent 模板</h2>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">名称 *</label>
|
||||
<input name="name" required className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="my_agent" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">描述</label>
|
||||
<input name="description" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="可选" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">分类</label>
|
||||
<select name="category" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm">
|
||||
<option value="general">通用</option>
|
||||
<option value="coding">编程</option>
|
||||
<option value="research">研究</option>
|
||||
<option value="creative">创意</option>
|
||||
<option value="assistant">助手</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">模型</label>
|
||||
<input name="model" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="如 glm-4-plus" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">系统提示词</label>
|
||||
<textarea name="system_prompt" rows={4} className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm font-mono" placeholder="Agent 系统提示词" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">工具（逗号分隔）</label>
|
||||
<input name="tools" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="browser, file_system, code_execute" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">能力（逗号分隔）</label>
|
||||
<input name="capabilities" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="streaming, vision, function_calling" />
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">温度</label>
|
||||
<input name="temperature" type="number" step="0.1" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="默认" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">最大 Token</label>
|
||||
<input name="max_tokens" type="number" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="不限" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">可见性</label>
|
||||
<select name="visibility" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm">
|
||||
<option value="public">公开</option>
|
||||
<option value="team">团队</option>
|
||||
<option value="private">私有</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => setShowCreate(false)} className="px-4 py-2 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-sm">取消</button>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">创建</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
@@ -32,8 +33,10 @@ import {
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import type { TokenInfo } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
@@ -45,11 +48,17 @@ const allPermissions = [
|
||||
]
|
||||
|
||||
export default function ApiKeysPage() {
|
||||
const [tokens, setTokens] = useState<TokenInfo[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [mutationError, setMutationError] = useState('')
|
||||
|
||||
const { data, error: swrError, isLoading, mutate } = useSWR(
|
||||
['tokens', page],
|
||||
() => api.tokens.list({ page, page_size: PAGE_SIZE }),
|
||||
)
|
||||
|
||||
const tokens = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
const error = swrError?.message || mutationError
|
||||
|
||||
// 创建 Dialog
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
@@ -64,25 +73,6 @@ export default function ApiKeysPage() {
|
||||
const [revokeTarget, setRevokeTarget] = useState<TokenInfo | null>(null)
|
||||
const [revoking, setRevoking] = useState(false)
|
||||
|
||||
const fetchTokens = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.tokens.list({ page, page_size: PAGE_SIZE })
|
||||
setTokens(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page])
|
||||
|
||||
useEffect(() => {
|
||||
fetchTokens()
|
||||
}, [fetchTokens])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
function togglePermission(perm: string) {
|
||||
@@ -107,9 +97,9 @@ export default function ApiKeysPage() {
|
||||
setCreateOpen(false)
|
||||
setCreatedToken(res)
|
||||
setCreateForm({ name: '', expires_days: '', permissions: ['chat'] })
|
||||
fetchTokens()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
if (err instanceof ApiRequestError) setMutationError(err.body.message)
|
||||
} finally {
|
||||
setCreating(false)
|
||||
}
|
||||
@@ -121,9 +111,9 @@ export default function ApiKeysPage() {
|
||||
try {
|
||||
await api.tokens.revoke(revokeTarget.id)
|
||||
setRevokeTarget(null)
|
||||
fetchTokens()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
if (err instanceof ApiRequestError) setMutationError(err.body.message)
|
||||
} finally {
|
||||
setRevoking(false)
|
||||
}
|
||||
@@ -158,21 +148,12 @@ export default function ApiKeysPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setMutationError('')} />}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : tokens.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={7} />
|
||||
) : error ? null : tokens.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Loader2,
|
||||
Pencil,
|
||||
@@ -35,6 +36,8 @@ import {
|
||||
} from '@/components/ui/dialog'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import type { ConfigItem } from '@/lib/types'
|
||||
|
||||
@@ -51,36 +54,24 @@ const sourceVariants: Record<string, 'secondary' | 'info' | 'default'> = {
|
||||
}
|
||||
|
||||
export default function ConfigPage() {
|
||||
const [configs, setConfigs] = useState<ConfigItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [activeTab, setActiveTab] = useState('all')
|
||||
|
||||
// SWR for config list
|
||||
const { data: configs = [], isLoading, mutate } = useSWR(
|
||||
['config', activeTab],
|
||||
() => {
|
||||
const params: Record<string, unknown> = {}
|
||||
if (activeTab !== 'all') params.category = activeTab
|
||||
return api.config.list(params)
|
||||
}
|
||||
)
|
||||
|
||||
// 编辑 Dialog
|
||||
const [editTarget, setEditTarget] = useState<ConfigItem | null>(null)
|
||||
const [editValue, setEditValue] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const fetchConfigs = useCallback(async (category?: string) => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = {}
|
||||
if (category && category !== 'all') params.category = category
|
||||
const res = await api.config.list(params)
|
||||
setConfigs(res)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfigs(activeTab)
|
||||
}, [fetchConfigs, activeTab])
|
||||
|
||||
function openEditDialog(config: ConfigItem) {
|
||||
setEditTarget(config)
|
||||
setEditValue(config.current_value !== undefined ? String(config.current_value) : '')
|
||||
@@ -98,7 +89,7 @@ export default function ConfigPage() {
|
||||
}
|
||||
await api.config.update(editTarget.id, { value: parsedValue })
|
||||
setEditTarget(null)
|
||||
fetchConfigs(activeTab)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -112,7 +103,15 @@ export default function ConfigPage() {
|
||||
return String(value)
|
||||
}
|
||||
|
||||
const categories = ['all', 'auth', 'relay', 'model', 'system']
|
||||
const categoryLabels: Record<string, string> = {
|
||||
all: '全部',
|
||||
server: '服务器',
|
||||
agent: 'Agent',
|
||||
memory: '记忆',
|
||||
llm: 'LLM',
|
||||
security: '安全策略',
|
||||
}
|
||||
const categories = Object.keys(categoryLabels)
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -121,27 +120,18 @@ export default function ConfigPage() {
|
||||
<TabsList>
|
||||
{categories.map((cat) => (
|
||||
<TabsTrigger key={cat} value={cat}>
|
||||
{cat === 'all' ? '全部' : cat}
|
||||
{categoryLabels[cat] || cat}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : configs.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无配置项
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={8} cols={8} hasToolbar={false} />
|
||||
) : error ? null : configs.length === 0 ? (
|
||||
<EmptyState message="暂无配置项" />
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
|
||||
@@ -13,6 +13,8 @@ import {
|
||||
ArrowLeftRight,
|
||||
Settings,
|
||||
FileText,
|
||||
MessageSquare,
|
||||
Bot,
|
||||
LogOut,
|
||||
ChevronLeft,
|
||||
Menu,
|
||||
@@ -22,16 +24,44 @@ import { AuthGuard, useAuth } from '@/components/auth-guard'
|
||||
import { logout } from '@/lib/auth'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
/** 权限常量 — 与后端 db.rs SEED_ROLES 保持同步 */
|
||||
const ROLE_PERMISSIONS: Record<string, string[]> = {
|
||||
super_admin: ['admin:full', 'account:admin', 'provider:manage', 'model:manage', 'relay:admin', 'config:write', 'prompt:read', 'prompt:write', 'prompt:publish', 'prompt:admin'],
|
||||
admin: ['account:read', 'account:admin', 'provider:manage', 'model:read', 'model:manage', 'relay:use', 'relay:admin', 'config:read', 'config:write', 'prompt:read', 'prompt:write', 'prompt:publish'],
|
||||
user: ['model:read', 'relay:use', 'config:read', 'prompt:read'],
|
||||
}
|
||||
|
||||
/** 从后端获取权限列表（运行时同步） */
|
||||
async function fetchRolePermissions(role: string): Promise<string[]> {
|
||||
try {
|
||||
const res = await fetch('/api/v1/roles/' + role)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
return data.permissions || []
|
||||
}
|
||||
return ROLE_PERMISSIONS[role] ?? []
|
||||
} catch {
|
||||
return ROLE_PERMISSIONS[role] ?? []
|
||||
}
|
||||
}
|
||||
|
||||
/** 根据 role 获取权限列表 */
|
||||
function getPermissionsForRole(role: string): string[] {
|
||||
return ROLE_PERMISSIONS[role] ?? []
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ href: '/', label: '仪表盘', icon: LayoutDashboard },
|
||||
{ href: '/accounts', label: '账号管理', icon: Users },
|
||||
{ href: '/providers', label: '服务商', icon: Server },
|
||||
{ href: '/models', label: '模型管理', icon: Cpu },
|
||||
{ href: '/api-keys', label: 'API 密钥', icon: Key },
|
||||
{ href: '/usage', label: '用量统计', icon: BarChart3 },
|
||||
{ href: '/relay', label: '中转任务', icon: ArrowLeftRight },
|
||||
{ href: '/config', label: '系统配置', icon: Settings },
|
||||
{ href: '/logs', label: '操作日志', icon: FileText },
|
||||
{ href: '/accounts', label: '账号管理', icon: Users, permission: 'account:admin' },
|
||||
{ href: '/providers', label: '服务商', icon: Server, permission: 'provider:manage' },
|
||||
{ href: '/models', label: '模型管理', icon: Cpu, permission: 'model:read' },
|
||||
{ href: '/agent-templates', label: 'Agent 模板', icon: Bot, permission: 'model:read' },
|
||||
{ href: '/api-keys', label: 'API 密钥', icon: Key, permission: 'admin:full' },
|
||||
{ href: '/usage', label: '用量统计', icon: BarChart3, permission: 'admin:full' },
|
||||
{ href: '/relay', label: '中转任务', icon: ArrowLeftRight, permission: 'relay:use' },
|
||||
{ href: '/config', label: '系统配置', icon: Settings, permission: 'config:read' },
|
||||
{ href: '/prompts', label: '提示词管理', icon: MessageSquare, permission: 'prompt:read' },
|
||||
{ href: '/logs', label: '操作日志', icon: FileText, permission: 'admin:full' },
|
||||
]
|
||||
|
||||
function Sidebar({
|
||||
@@ -45,11 +75,18 @@ function Sidebar({
|
||||
const router = useRouter()
|
||||
const { account } = useAuth()
|
||||
|
||||
const permissions = account ? getPermissionsForRole(account.role) : []
|
||||
|
||||
function handleLogout() {
|
||||
logout()
|
||||
router.replace('/login')
|
||||
}
|
||||
|
||||
const filteredNavItems = navItems.filter((item) => {
|
||||
if (!item.permission) return true
|
||||
return permissions.includes(item.permission) || permissions.includes('admin:full')
|
||||
})
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
@@ -75,7 +112,7 @@ function Sidebar({
|
||||
{/* 导航 */}
|
||||
<nav className="flex-1 overflow-y-auto scrollbar-thin py-2 px-2">
|
||||
<ul className="space-y-1">
|
||||
{navItems.map((item) => {
|
||||
{filteredNavItems.map((item) => {
|
||||
const isActive =
|
||||
item.href === '/'
|
||||
? pathname === '/'
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
@@ -37,6 +38,8 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatNumber } from '@/lib/utils'
|
||||
@@ -71,14 +74,29 @@ const emptyForm: ModelForm = {
|
||||
}
|
||||
|
||||
export default function ModelsPage() {
|
||||
const [models, setModels] = useState<Model[]>([])
|
||||
const [providers, setProviders] = useState<Provider[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [providerFilter, setProviderFilter] = useState<string>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// SWR for models list
|
||||
const { data, isLoading, mutate } = useSWR(
|
||||
['models', page, providerFilter],
|
||||
() => {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (providerFilter !== 'all') params.provider_id = providerFilter
|
||||
return api.models.list(params)
|
||||
}
|
||||
)
|
||||
const models = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
// SWR for providers list (dropdown)
|
||||
const { data: providersData } = useSWR(
|
||||
['providers.all'],
|
||||
() => api.providers.list({ page: 1, page_size: 100 })
|
||||
)
|
||||
const providers = providersData?.items ?? []
|
||||
|
||||
// Dialog
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [editTarget, setEditTarget] = useState<Model | null>(null)
|
||||
@@ -89,37 +107,6 @@ export default function ModelsPage() {
|
||||
const [deleteTarget, setDeleteTarget] = useState<Model | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const fetchModels = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (providerFilter !== 'all') params.provider_id = providerFilter
|
||||
const res = await api.models.list(params)
|
||||
setModels(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, providerFilter])
|
||||
|
||||
const fetchProviders = useCallback(async () => {
|
||||
try {
|
||||
const res = await api.providers.list({ page: 1, page_size: 100 })
|
||||
setProviders(res.items)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchModels()
|
||||
fetchProviders()
|
||||
}, [fetchModels, fetchProviders])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
const providerMap = new Map(providers.map((p) => [p.id, p.display_name || p.name]))
|
||||
@@ -169,7 +156,7 @@ export default function ModelsPage() {
|
||||
await api.models.create(payload)
|
||||
}
|
||||
setDialogOpen(false)
|
||||
fetchModels()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -183,7 +170,7 @@ export default function ModelsPage() {
|
||||
try {
|
||||
await api.models.delete(deleteTarget.id)
|
||||
setDeleteTarget(null)
|
||||
fetchModels()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -213,21 +200,12 @@ export default function ModelsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : models.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={8} cols={9} hasToolbar={false} />
|
||||
) : error ? null : models.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Users,
|
||||
Server,
|
||||
ArrowLeftRight,
|
||||
Zap,
|
||||
Loader2,
|
||||
TrendingUp,
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
@@ -21,8 +19,12 @@ import {
|
||||
Bar,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import useSWR from 'swr'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { StatsSkeleton } from '@/components/ui/skeleton'
|
||||
import { ChartSkeleton } from '@/components/ui/skeleton'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -86,61 +88,24 @@ function StatusBadge({ status }: { status: string }) {
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null)
|
||||
const [usageData, setUsageData] = useState<UsageRecord[]>([])
|
||||
const [recentLogs, setRecentLogs] = useState<OperationLog[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const { data: stats, isLoading: statsLoading } = useSWR(
|
||||
['stats.dashboard'],
|
||||
() => api.stats.dashboard(),
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const [statsRes, usageRes, logsRes] = await Promise.allSettled([
|
||||
api.stats.dashboard(),
|
||||
api.usage.daily({ days: 30 }),
|
||||
api.logs.list({ page: 1, page_size: 5 }),
|
||||
])
|
||||
const { data: usageData = [], isLoading: usageLoading } = useSWR(
|
||||
['usage.daily.30'],
|
||||
() => api.usage.daily({ days: 30 }),
|
||||
)
|
||||
|
||||
if (statsRes.status === 'fulfilled') setStats(statsRes.value)
|
||||
if (usageRes.status === 'fulfilled') setUsageData(usageRes.value)
|
||||
if (logsRes.status === 'fulfilled') setRecentLogs(logsRes.value.items)
|
||||
} catch (err) {
|
||||
setError('加载数据失败，请检查后端服务是否启动')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
fetchData()
|
||||
}, [])
|
||||
const { data: logsData, isLoading: logsLoading } = useSWR(
|
||||
['logs.recent'],
|
||||
() => api.logs.list({ page: 1, page_size: 5 }),
|
||||
)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const recentLogs: OperationLog[] = logsData?.items ?? []
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-destructive">{error}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 text-sm text-primary hover:underline cursor-pointer"
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartData = usageData.map((r) => ({
|
||||
const chartData = usageData.map((r: UsageRecord) => ({
|
||||
day: r.day.slice(5), // MM-DD
|
||||
请求量: r.count,
|
||||
Input: r.input_tokens,
|
||||
@@ -150,139 +115,151 @@ export default function DashboardPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="总账号数"
|
||||
value={stats?.total_accounts ?? '-'}
|
||||
icon={<Users className="h-5 w-5 text-blue-400" />}
|
||||
color="bg-blue-500/10"
|
||||
subtitle={`活跃 ${stats?.active_accounts ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="活跃服务商"
|
||||
value={stats?.active_providers ?? '-'}
|
||||
icon={<Server className="h-5 w-5 text-green-400" />}
|
||||
color="bg-green-500/10"
|
||||
subtitle={`模型 ${stats?.active_models ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="今日请求"
|
||||
value={stats?.tasks_today ?? '-'}
|
||||
icon={<ArrowLeftRight className="h-5 w-5 text-purple-400" />}
|
||||
color="bg-purple-500/10"
|
||||
subtitle="中转任务"
|
||||
/>
|
||||
<StatCard
|
||||
title="今日 Token"
|
||||
value={formatNumber((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0))}
|
||||
icon={<Zap className="h-5 w-5 text-orange-400" />}
|
||||
color="bg-orange-500/10"
|
||||
subtitle={`In: ${formatNumber(stats?.tokens_today_input ?? 0)} / Out: ${formatNumber(stats?.tokens_today_output ?? 0)}`}
|
||||
/>
|
||||
</div>
|
||||
{statsLoading ? (
|
||||
<StatsSkeleton count={4} />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="总账号数"
|
||||
value={stats?.total_accounts ?? '-'}
|
||||
icon={<Users className="h-5 w-5 text-blue-400" />}
|
||||
color="bg-blue-500/10"
|
||||
subtitle={`活跃 ${stats?.active_accounts ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="活跃服务商"
|
||||
value={stats?.active_providers ?? '-'}
|
||||
icon={<Server className="h-5 w-5 text-green-400" />}
|
||||
color="bg-green-500/10"
|
||||
subtitle={`模型 ${stats?.active_models ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="今日请求"
|
||||
value={stats?.tasks_today ?? '-'}
|
||||
icon={<ArrowLeftRight className="h-5 w-5 text-purple-400" />}
|
||||
color="bg-purple-500/10"
|
||||
subtitle="中转任务"
|
||||
/>
|
||||
<StatCard
|
||||
title="今日 Token"
|
||||
value={formatNumber((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0))}
|
||||
icon={<Zap className="h-5 w-5 text-orange-400" />}
|
||||
color="bg-orange-500/10"
|
||||
subtitle={`In: ${formatNumber(stats?.tokens_today_input ?? 0)} / Out: ${formatNumber(stats?.tokens_today_output ?? 0)}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 图表 */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{/* 请求趋势 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<TrendingUp className="h-4 w-4 text-primary" />
|
||||
请求趋势 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
<linearGradient id="colorRequests" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#22C55E" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#22C55E" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="请求量"
|
||||
stroke="#22C55E"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorRequests)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{usageLoading ? (
|
||||
<ChartSkeleton height={280} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<TrendingUp className="h-4 w-4 text-primary" />
|
||||
请求趋势 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
<linearGradient id="colorRequests" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#22C55E" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#22C55E" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="请求量"
|
||||
stroke="#22C55E"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorRequests)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Token 用量 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-orange-400" />
|
||||
Token 用量 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }}
|
||||
/>
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[2, 2, 0, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[2, 2, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{usageLoading ? (
|
||||
<ChartSkeleton height={280} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-orange-400" />
|
||||
Token 用量 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }}
|
||||
/>
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[2, 2, 0, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[2, 2, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 最近操作日志 */}
|
||||
@@ -291,7 +268,9 @@ export default function DashboardPage() {
|
||||
<CardTitle className="text-base">最近操作</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{recentLogs.length > 0 ? (
|
||||
{logsLoading ? (
|
||||
<TableSkeleton rows={5} cols={5} hasToolbar={false} />
|
||||
) : recentLogs.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
|
||||
341
admin/src/app/(dashboard)/prompts/page.tsx
Normal file
341
admin/src/app/(dashboard)/prompts/page.tsx
Normal file
@@ -0,0 +1,341 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { PromptTemplate, PromptVersion } from '@/lib/types'
|
||||
import { EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
|
||||
export default function PromptsPage() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [selectedName, setSelectedName] = useState<string | null>(null)
|
||||
const [versions, setVersions] = useState<PromptVersion[]>([])
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [showNewVersion, setShowNewVersion] = useState(false)
|
||||
const [filter, setFilter] = useState<{ source?: string; status?: string }>({})
|
||||
|
||||
const { data, error, isLoading, mutate } = useSWR(
|
||||
['prompts.list', page, filter.source, filter.status],
|
||||
() => api.prompts.list({ page, page_size: 50, ...filter }),
|
||||
)
|
||||
|
||||
const templates = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
const fetchVersions = async (name: string) => {
|
||||
try {
|
||||
const res = await api.prompts.listVersions(name)
|
||||
setVersions(res)
|
||||
setSelectedName(name)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch versions:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
const fd = new FormData(e.currentTarget)
|
||||
try {
|
||||
await api.prompts.create({
|
||||
name: fd.get('name') as string,
|
||||
category: fd.get('category') as string,
|
||||
description: (fd.get('description') as string) || undefined,
|
||||
source: 'custom',
|
||||
system_prompt: fd.get('system_prompt') as string,
|
||||
})
|
||||
setShowCreate(false)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
console.error('Failed to create prompt:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNewVersion = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (!selectedName) return
|
||||
const fd = new FormData(e.currentTarget)
|
||||
try {
|
||||
await api.prompts.createVersion(selectedName, {
|
||||
system_prompt: fd.get('system_prompt') as string,
|
||||
changelog: (fd.get('changelog') as string) || undefined,
|
||||
})
|
||||
setShowNewVersion(false)
|
||||
fetchVersions(selectedName)
|
||||
} catch (err) {
|
||||
console.error('Failed to create version:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRollback = async (name: string, version: number) => {
|
||||
if (!confirm(`确认回退到版本 ${version}？`)) return
|
||||
try {
|
||||
await api.prompts.rollback(name, version)
|
||||
fetchVersions(name)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
console.error('Failed to rollback:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async (name: string) => {
|
||||
if (!confirm(`确认归档 ${name}？`)) return
|
||||
try {
|
||||
await api.prompts.archive(name)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
console.error('Failed to archive:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const statusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
active: 'bg-emerald-500/20 text-emerald-400',
|
||||
deprecated: 'bg-amber-500/20 text-amber-400',
|
||||
archived: 'bg-zinc-500/20 text-zinc-400',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${colors[status] || colors.archived}`}>
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const sourceBadge = (source: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
builtin: 'bg-blue-500/20 text-blue-400',
|
||||
custom: 'bg-purple-500/20 text-purple-400',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${colors[source] || ''}`}>
|
||||
{source === 'builtin' ? '内置' : '自定义'}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">提示词管理</h1>
|
||||
<p className="text-sm text-zinc-400 mt-1">管理内置和自定义提示词模板，支持版本控制和 OTA 分发</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
||||
>
|
||||
+ 新建模板
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2">
|
||||
{(['all', 'builtin', 'custom'] as const).map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setFilter(s === 'all' ? {} : { source: s })}
|
||||
className={`px-3 py-1 text-sm rounded-lg transition-colors ${
|
||||
(filter.source || 'all') === s
|
||||
? 'bg-zinc-700 text-white'
|
||||
: 'bg-zinc-800 text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{s === 'all' ? '全部' : s === 'builtin' ? '内置' : '自定义'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Template List */}
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-800">
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">名称</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">分类</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">来源</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">版本</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">状态</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">更新时间</th>
|
||||
<th className="text-right px-4 py-3 text-zinc-400 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={7}>
|
||||
<TableSkeleton rows={5} cols={7} hasToolbar={false} />
|
||||
</td>
|
||||
</tr>
|
||||
) : error ? (
|
||||
<tr><td colSpan={7} className="px-4 py-8 text-center text-red-400">加载失败</td></tr>
|
||||
) : templates.length === 0 ? (
|
||||
<tr><td colSpan={7}><EmptyState message="暂无提示词模板" /></td></tr>
|
||||
) : (
|
||||
templates.map(t => (
|
||||
<tr key={t.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/30">
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => fetchVersions(t.name)}
|
||||
className="text-blue-400 hover:text-blue-300 font-mono"
|
||||
>
|
||||
{t.name}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.category}</td>
|
||||
<td className="px-4 py-3">{sourceBadge(t.source)}</td>
|
||||
<td className="px-4 py-3 text-zinc-300">v{t.current_version}</td>
|
||||
<td className="px-4 py-3">{statusBadge(t.status)}</td>
|
||||
<td className="px-4 py-3 text-zinc-500 text-xs">
|
||||
{new Date(t.updated_at).toLocaleString('zh-CN')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => fetchVersions(t.name)}
|
||||
className="text-zinc-400 hover:text-white mr-2"
|
||||
>
|
||||
历史
|
||||
</button>
|
||||
{t.source === 'custom' && (
|
||||
<button
|
||||
onClick={() => handleArchive(t.name)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
>
|
||||
归档
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="px-4 py-2 text-xs text-zinc-500 border-t border-zinc-800">
|
||||
共 {total} 个模板
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Version History Panel */}
|
||||
{selectedName && (
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
{selectedName} — 版本历史
|
||||
</h2>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowNewVersion(true)}
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-xs"
|
||||
>
|
||||
发布新版本
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setSelectedName(null); setVersions([]) }}
|
||||
className="px-3 py-1.5 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-xs"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{versions.map(v => (
|
||||
<div key={v.id} className="bg-zinc-800/50 rounded-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-mono text-zinc-300">v{v.version}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-zinc-500">
|
||||
{new Date(v.created_at).toLocaleString('zh-CN')}
|
||||
</span>
|
||||
{v.changelog && (
|
||||
<span className="text-xs text-zinc-400">— {v.changelog}</span>
|
||||
)}
|
||||
{v.min_app_version && (
|
||||
<span className="text-xs text-amber-400">最低版本: {v.min_app_version}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<pre className="text-xs text-zinc-400 bg-zinc-900 rounded p-2 overflow-x-auto max-h-32">
|
||||
{v.system_prompt.substring(0, 300)}{v.system_prompt.length > 300 ? '...' : ''}
|
||||
</pre>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(v.system_prompt)
|
||||
}}
|
||||
className="text-xs text-zinc-500 hover:text-white"
|
||||
>
|
||||
复制
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRollback(selectedName, v.version)}
|
||||
className="text-xs text-amber-500 hover:text-amber-400"
|
||||
>
|
||||
回退到此版本
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{versions.length === 0 && (
|
||||
<EmptyState message="暂无版本历史" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreate && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<form onSubmit={handleCreate} className="bg-zinc-900 rounded-xl border border-zinc-700 p-6 w-full max-w-lg space-y-4">
|
||||
<h2 className="text-lg font-semibold text-white">新建提示词模板</h2>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">名称</label>
|
||||
<input name="name" required className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="my_prompt" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">分类</label>
|
||||
<select name="category" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm">
|
||||
<option value="custom_system">系统提示词</option>
|
||||
<option value="custom_extraction">提取提示词</option>
|
||||
<option value="custom_compaction">压缩提示词</option>
|
||||
<option value="custom_other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">描述</label>
|
||||
<input name="description" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="可选" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">系统提示词</label>
|
||||
<textarea name="system_prompt" required rows={6} className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm font-mono" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => setShowCreate(false)} className="px-4 py-2 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-sm">取消</button>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">创建</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Version Modal */}
|
||||
{showNewVersion && selectedName && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<form onSubmit={handleNewVersion} className="bg-zinc-900 rounded-xl border border-zinc-700 p-6 w-full max-w-lg space-y-4">
|
||||
<h2 className="text-lg font-semibold text-white">发布 {selectedName} 新版本</h2>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">系统提示词</label>
|
||||
<textarea name="system_prompt" required rows={6} className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">变更说明</label>
|
||||
<input name="changelog" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="描述本次变更" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => setShowNewVersion(false)} className="px-4 py-2 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-sm">取消</button>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">发布</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
@@ -8,6 +9,9 @@ import {
|
||||
ChevronRight,
|
||||
Pencil,
|
||||
Trash2,
|
||||
KeyRound,
|
||||
Power,
|
||||
PowerOff,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -37,10 +41,18 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate, maskApiKey } from '@/lib/utils'
|
||||
import type { Provider } from '@/lib/types'
|
||||
|
||||
function formatTokens(tokens: number): string {
|
||||
if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
|
||||
if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`
|
||||
return String(tokens)
|
||||
}
|
||||
import type { Provider, ProviderKey } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
@@ -67,12 +79,17 @@ const emptyForm: ProviderForm = {
|
||||
}
|
||||
|
||||
export default function ProvidersPage() {
|
||||
const [providers, setProviders] = useState<Provider[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// SWR for providers list
|
||||
const { data, isLoading, mutate } = useSWR(
|
||||
['providers', page],
|
||||
() => api.providers.list({ page, page_size: PAGE_SIZE })
|
||||
)
|
||||
const providers = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
// 创建/编辑 Dialog
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [editTarget, setEditTarget] = useState<Provider | null>(null)
|
||||
@@ -83,24 +100,24 @@ export default function ProvidersPage() {
|
||||
const [deleteTarget, setDeleteTarget] = useState<Provider | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const fetchProviders = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.providers.list({ page, page_size: PAGE_SIZE })
|
||||
setProviders(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page])
|
||||
// Key Pool 管理
|
||||
const [keyPoolProvider, setKeyPoolProvider] = useState<Provider | null>(null)
|
||||
const [showAddKey, setShowAddKey] = useState(false)
|
||||
const [addKeyForm, setAddKeyForm] = useState({
|
||||
key_label: '',
|
||||
key_value: '',
|
||||
priority: 0,
|
||||
max_rpm: '',
|
||||
max_tpm: '',
|
||||
quota_reset_interval: '',
|
||||
})
|
||||
const [addingKey, setAddingKey] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetchProviders()
|
||||
}, [fetchProviders])
|
||||
// SWR for key pool — only fetches when dialog is open
|
||||
const { data: providerKeys = [], isLoading: keysLoading, mutate: mutateKeys } = useSWR(
|
||||
keyPoolProvider ? ['provider.keys', keyPoolProvider.id] : null,
|
||||
() => api.providers.listKeys(keyPoolProvider!.id)
|
||||
)
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
@@ -145,7 +162,7 @@ export default function ProvidersPage() {
|
||||
await api.providers.create(payload)
|
||||
}
|
||||
setDialogOpen(false)
|
||||
fetchProviders()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -159,7 +176,7 @@ export default function ProvidersPage() {
|
||||
try {
|
||||
await api.providers.delete(deleteTarget.id)
|
||||
setDeleteTarget(null)
|
||||
fetchProviders()
|
||||
mutate()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -167,6 +184,55 @@ export default function ProvidersPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Key Pool 管理 ─────────────────────────────────────
|
||||
|
||||
function openKeyPool(provider: Provider) {
|
||||
setKeyPoolProvider(provider)
|
||||
setShowAddKey(false)
|
||||
}
|
||||
|
||||
async function handleAddKey() {
|
||||
if (!keyPoolProvider || !addKeyForm.key_label.trim() || !addKeyForm.key_value.trim()) return
|
||||
setAddingKey(true)
|
||||
try {
|
||||
await api.providers.addKey(keyPoolProvider.id, {
|
||||
key_label: addKeyForm.key_label.trim(),
|
||||
key_value: addKeyForm.key_value.trim(),
|
||||
priority: addKeyForm.priority,
|
||||
max_rpm: addKeyForm.max_rpm ? parseInt(addKeyForm.max_rpm, 10) : undefined,
|
||||
max_tpm: addKeyForm.max_tpm ? parseInt(addKeyForm.max_tpm, 10) : undefined,
|
||||
quota_reset_interval: addKeyForm.quota_reset_interval.trim() || undefined,
|
||||
})
|
||||
setAddKeyForm({ key_label: '', key_value: '', priority: 0, max_rpm: '', max_tpm: '', quota_reset_interval: '' })
|
||||
setShowAddKey(false)
|
||||
mutateKeys()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
setAddingKey(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleKey(keyId: string, active: boolean) {
|
||||
if (!keyPoolProvider) return
|
||||
try {
|
||||
await api.providers.toggleKey(keyPoolProvider.id, keyId, active)
|
||||
mutateKeys()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteKey(keyId: string) {
|
||||
if (!keyPoolProvider || !confirm('确认删除此 Key？')) return
|
||||
try {
|
||||
await api.providers.deleteKey(keyPoolProvider.id, keyId)
|
||||
mutateKeys()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 工具栏 */}
|
||||
@@ -178,21 +244,12 @@ export default function ProvidersPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : providers.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={9} hasToolbar={false} />
|
||||
) : error ? null : providers.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
@@ -238,6 +295,9 @@ export default function ProvidersPage() {
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" onClick={() => openKeyPool(p)} title="Key Pool">
|
||||
<KeyRound className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => openEditDialog(p)} title="编辑">
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -381,6 +441,165 @@ export default function ProvidersPage() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Key Pool 管理 Dialog */}
|
||||
<Dialog open={!!keyPoolProvider} onOpenChange={() => setKeyPoolProvider(null)}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Key Pool 管理 — {keyPoolProvider?.display_name || keyPoolProvider?.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
管理此服务商的多个 API Key，实现智能轮转绕过限额。优先级数字越小越优先。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[50vh] overflow-y-auto scrollbar-thin">
|
||||
{keysLoading ? (
|
||||
<TableSkeleton rows={4} cols={8} hasToolbar={false} />
|
||||
) : providerKeys.length === 0 && !showAddKey ? (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||
<p>尚未配置 Key Pool</p>
|
||||
<p className="mt-1 text-xs">将使用服务商主 API Key 作为回退</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>标签</TableHead>
|
||||
<TableHead>优先级</TableHead>
|
||||
<TableHead>RPM</TableHead>
|
||||
<TableHead>TPM</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>请求/Token</TableHead>
|
||||
<TableHead>最后 429</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{providerKeys.map((k) => {
|
||||
const isCooling = k.cooldown_until && new Date(k.cooldown_until) > new Date()
|
||||
return (
|
||||
<TableRow key={k.id} className={isCooling ? 'opacity-60' : ''}>
|
||||
<TableCell className="font-medium">{k.key_label}</TableCell>
|
||||
<TableCell>{k.priority}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{k.max_rpm ?? '-'}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{k.max_tpm ?? '-'}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={k.is_active ? 'success' : 'secondary'}>
|
||||
{isCooling ? '冷却中' : k.is_active ? '活跃' : '禁用'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{k.total_requests} / {formatTokens(k.total_tokens)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{k.last_429_at ? formatDate(k.last_429_at) : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleToggleKey(k.id, !k.is_active)}
|
||||
title={k.is_active ? '禁用' : '启用'}
|
||||
>
|
||||
{k.is_active ? <PowerOff className="h-3.5 w-3.5 text-amber-500" /> : <Power className="h-3.5 w-3.5 text-green-500" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteKey(k.id)}
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!showAddKey ? (
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setKeyPoolProvider(null)}>关闭</Button>
|
||||
<Button onClick={() => setShowAddKey(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
添加 Key
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
) : (
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<p className="text-sm font-medium">添加新 Key</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">标签 *</Label>
|
||||
<Input
|
||||
value={addKeyForm.key_label}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, key_label: e.target.value })}
|
||||
placeholder="如 zhipu-coding-1"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">优先级</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={addKeyForm.priority}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, priority: parseInt(e.target.value, 10) || 0 })}
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">API Key *</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={addKeyForm.key_value}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, key_value: e.target.value })}
|
||||
placeholder="输入 API Key"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">RPM 限额</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={addKeyForm.max_rpm}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, max_rpm: e.target.value })}
|
||||
placeholder="不限"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">TPM 限额</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={addKeyForm.max_tpm}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, max_tpm: e.target.value })}
|
||||
placeholder="不限"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">限额重置周期</Label>
|
||||
<Input
|
||||
value={addKeyForm.quota_reset_interval}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, quota_reset_interval: e.target.value })}
|
||||
placeholder="如 5h, 1d（可选）"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => { setShowAddKey(false); setAddKeyForm({ key_label: '', key_value: '', priority: 0, max_rpm: '', max_tpm: '', quota_reset_interval: '' }) }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddKey} disabled={addingKey || !addKeyForm.key_label.trim() || !addKeyForm.key_value.trim()}>
|
||||
{addingKey && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
添加
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Search,
|
||||
Loader2,
|
||||
@@ -29,6 +30,8 @@ import {
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate, formatNumber } from '@/lib/utils'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import type { RelayTask } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
@@ -48,34 +51,22 @@ const statusLabels: Record<string, string> = {
|
||||
}
|
||||
|
||||
export default function RelayPage() {
|
||||
const [tasks, setTasks] = useState<RelayTask[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
|
||||
const fetchTasks = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const { data, error: swrError, isLoading } = useSWR(
|
||||
['relay', page, statusFilter],
|
||||
() => {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (statusFilter !== 'all') params.status = statusFilter
|
||||
const res = await api.relay.list(params)
|
||||
setTasks(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, statusFilter])
|
||||
return api.relay.list(params)
|
||||
},
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks()
|
||||
}, [fetchTasks])
|
||||
const tasks = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
const error = swrError?.message
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
@@ -101,21 +92,12 @@ export default function RelayPage() {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => {}} />}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : tasks.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={10} />
|
||||
) : error ? null : tasks.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { Loader2, Zap } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { Zap, Monitor, Smartphone } from 'lucide-react'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
@@ -15,6 +16,8 @@ import {
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton, ChartSkeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -22,84 +25,87 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatNumber } from '@/lib/utils'
|
||||
import type { UsageRecord, UsageByModel } from '@/lib/types'
|
||||
import type { UsageRecord, UsageByModel, ModelUsageStat, DailyUsageStat } from '@/lib/types'
|
||||
|
||||
export default function UsagePage() {
|
||||
const [days, setDays] = useState(7)
|
||||
const [dailyData, setDailyData] = useState<UsageRecord[]>([])
|
||||
const [modelData, setModelData] = useState<UsageByModel[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState('relay')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const [dailyRes, modelRes] = await Promise.allSettled([
|
||||
api.usage.daily({ days }),
|
||||
api.usage.byModel({ days }),
|
||||
])
|
||||
if (dailyRes.status === 'fulfilled') setDailyData(dailyRes.value)
|
||||
else throw new Error('Failed to fetch daily usage')
|
||||
if (modelRes.status === 'fulfilled') setModelData(modelRes.value)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载数据失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [days])
|
||||
// 4 parallel SWR calls — each loads independently
|
||||
const { data: dailyData = [], isLoading: dailyLoading } = useSWR(
|
||||
['usage.daily', days],
|
||||
() => api.usage.daily({ days })
|
||||
)
|
||||
const { data: modelData = [], isLoading: modelLoading } = useSWR(
|
||||
['usage.byModel', days],
|
||||
() => api.usage.byModel({ days })
|
||||
)
|
||||
const { data: telemetryModels = [] } = useSWR(
|
||||
['telemetry.modelStats'],
|
||||
() => api.telemetry.modelStats()
|
||||
)
|
||||
const { data: telemetryDaily = [] } = useSWR(
|
||||
['telemetry.dailyStats', days],
|
||||
() => api.telemetry.dailyStats({ days })
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [fetchData])
|
||||
const relayLoading = dailyLoading || modelLoading
|
||||
const telemetryLoading = !telemetryModels.length && !telemetryDaily.length && (dailyLoading || modelLoading)
|
||||
|
||||
const lineChartData = dailyData.map((r) => ({
|
||||
// === Relay 用量图表数据 ===
|
||||
|
||||
const relayLineData = dailyData.map((r) => ({
|
||||
day: r.day.slice(5),
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
}))
|
||||
|
||||
const barChartData = modelData.map((r) => ({
|
||||
const relayBarData = modelData.map((r) => ({
|
||||
model: r.model_id,
|
||||
请求量: r.count,
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
}))
|
||||
|
||||
const totalInput = dailyData.reduce((s, r) => s + r.input_tokens, 0)
|
||||
const totalOutput = dailyData.reduce((s, r) => s + r.output_tokens, 0)
|
||||
const totalRequests = dailyData.reduce((s, r) => s + r.count, 0)
|
||||
const relayTotalInput = dailyData.reduce((s, r) => s + r.input_tokens, 0)
|
||||
const relayTotalOutput = dailyData.reduce((s, r) => s + r.output_tokens, 0)
|
||||
const relayTotalRequests = dailyData.reduce((s, r) => s + r.count, 0)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// === 遥测图表数据 ===
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-destructive">{error}</p>
|
||||
<button onClick={() => fetchData()} className="mt-4 text-sm text-primary hover:underline cursor-pointer">
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const telemetryLineData = telemetryDaily.map((r) => ({
|
||||
day: r.day.slice(5),
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
设备数: r.unique_devices,
|
||||
}))
|
||||
|
||||
const telemetryTotalInput = telemetryDaily.reduce((s, r) => s + r.input_tokens, 0)
|
||||
const telemetryTotalOutput = telemetryDaily.reduce((s, r) => s + r.output_tokens, 0)
|
||||
const telemetryTotalRequests = telemetryDaily.reduce((s, r) => s + r.request_count, 0)
|
||||
|
||||
// === 合计 ===
|
||||
|
||||
const totalInput = relayTotalInput + telemetryTotalInput
|
||||
const totalOutput = relayTotalOutput + telemetryTotalOutput
|
||||
const totalRequests = relayTotalRequests + telemetryTotalRequests
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
{/* 时间范围 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">时间范围:</span>
|
||||
@@ -115,8 +121,8 @@ export default function UsagePage() {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 汇总统计 */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{/* 汇总统计 — render immediately, use 0 while loading */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">总请求数</p>
|
||||
@@ -127,7 +133,7 @@ export default function UsagePage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">Input Tokens</p>
|
||||
<p className="text-sm text-muted-foreground">总 Input Tokens</p>
|
||||
<p className="mt-1 text-2xl font-bold text-blue-400">
|
||||
{formatNumber(totalInput)}
|
||||
</p>
|
||||
@@ -135,101 +141,190 @@ export default function UsagePage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">Output Tokens</p>
|
||||
<p className="text-sm text-muted-foreground">总 Output Tokens</p>
|
||||
<p className="mt-1 text-2xl font-bold text-orange-400">
|
||||
{formatNumber(totalOutput)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Monitor className="h-4 w-4 text-green-400" />
|
||||
<p className="text-sm text-muted-foreground">中转请求</p>
|
||||
</div>
|
||||
<p className="mt-1 text-2xl font-bold text-green-400">
|
||||
{formatNumber(relayTotalRequests)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Smartphone className="h-4 w-4 text-purple-400" />
|
||||
<p className="text-sm text-muted-foreground">桌面端调用</p>
|
||||
</div>
|
||||
<p className="mt-1 text-2xl font-bold text-purple-400">
|
||||
{formatNumber(telemetryTotalRequests)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Token 用量趋势 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-primary" />
|
||||
Token 用量趋势
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{lineChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={lineChartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
||||
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Tab 切换 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="relay">
|
||||
<Monitor className="h-4 w-4 mr-1" />
|
||||
中转用量
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="telemetry">
|
||||
<Smartphone className="h-4 w-4 mr-1" />
|
||||
桌面端遥测
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 按模型分布 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">按模型分布</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{barChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<BarChart data={barChartData} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
type="number"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="model"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
width={120}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[0, 2, 2, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[0, 2, 2, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
{/* Relay 用量 Tab */}
|
||||
<TabsContent value="relay" className="space-y-6">
|
||||
{relayLoading ? (
|
||||
<>
|
||||
<ChartSkeleton height={320} />
|
||||
<ChartSkeleton height={280} />
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-primary" />
|
||||
中转 Token 用量趋势
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{relayLineData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={relayLineData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis dataKey="day" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<YAxis tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
||||
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<EmptyState message="暂无中转数据" />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">中转按模型分布</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{relayBarData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={Math.max(200, relayBarData.length * 40)}>
|
||||
<BarChart data={relayBarData} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis type="number" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<YAxis type="category" dataKey="model" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} width={120} />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[0, 2, 2, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[0, 2, 2, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 遥测 Tab */}
|
||||
<TabsContent value="telemetry" className="space-y-6">
|
||||
{telemetryLoading ? (
|
||||
<>
|
||||
<ChartSkeleton height={320} />
|
||||
<TableSkeleton rows={5} cols={6} hasToolbar={false} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Smartphone className="h-4 w-4 text-purple-400" />
|
||||
桌面端 Token 用量趋势
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{telemetryLineData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={telemetryLineData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis dataKey="day" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<YAxis tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
||||
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<EmptyState message="暂无桌面端遥测数据（需要桌面端上报）" />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">桌面端按模型统计</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{telemetryModels.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>模型</TableHead>
|
||||
<TableHead className="text-right">请求数</TableHead>
|
||||
<TableHead className="text-right">Input Tokens</TableHead>
|
||||
<TableHead className="text-right">Output Tokens</TableHead>
|
||||
<TableHead className="text-right">平均延迟</TableHead>
|
||||
<TableHead className="text-right">成功率</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{telemetryModels.map((stat) => (
|
||||
<TableRow key={stat.model_id}>
|
||||
<TableCell className="font-mono text-sm">{stat.model_id}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(stat.request_count)}</TableCell>
|
||||
<TableCell className="text-right text-blue-400">{formatNumber(stat.input_tokens)}</TableCell>
|
||||
<TableCell className="text-right text-orange-400">{formatNumber(stat.output_tokens)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{stat.avg_latency_ms !== null ? `${Math.round(stat.avg_latency_ms)}ms` : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Badge variant={stat.success_rate >= 0.95 ? 'default' : 'destructive'}>
|
||||
{(stat.success_rate * 100).toFixed(1)}%
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
4
admin/src/app/icon.svg
Normal file
4
admin/src/app/icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="6" fill="#0f172a"/>
|
||||
<text x="16" y="22" font-family="system-ui, sans-serif" font-size="16" font-weight="700" fill="#60a5fa" text-anchor="middle">Z</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 282 B |
@@ -1,4 +1,5 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { SWRProvider } from '@/lib/swr-provider'
|
||||
import './globals.css'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -20,7 +21,9 @@ export default function RootLayout({
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-screen bg-background font-sans antialiased">
|
||||
{children}
|
||||
<SWRProvider>
|
||||
{children}
|
||||
</SWRProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Lock, User, Loader2, Eye, EyeOff } from 'lucide-react'
|
||||
import { Lock, User, Loader2, Eye, EyeOff, ShieldCheck } from 'lucide-react'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { login } from '@/lib/auth'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
@@ -11,7 +11,9 @@ export default function LoginPage() {
|
||||
const router = useRouter()
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [totpCode, setTotpCode] = useState('')
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [needTotp, setNeedTotp] = useState(false)
|
||||
const [remember, setRemember] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
@@ -31,12 +33,23 @@ export default function LoginPage() {
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await api.auth.login({ username: username.trim(), password })
|
||||
const res = await api.auth.login({
|
||||
username: username.trim(),
|
||||
password,
|
||||
totp_code: totpCode.trim() || undefined,
|
||||
})
|
||||
login(res.token, res.account)
|
||||
router.replace('/')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setError(err.body.message || '登录失败，请检查用户名和密码')
|
||||
const msg = err.body.message || ''
|
||||
// 后端返回 "需要 TOTP" 时显示 TOTP 输入框
|
||||
if (msg.includes('TOTP') || msg.includes('totp') || msg.includes('2FA') || msg.includes('验证码') || err.status === 403) {
|
||||
setNeedTotp(true)
|
||||
setError(msg || '请输入两步验证码')
|
||||
} else {
|
||||
setError(msg || '登录失败，请检查用户名和密码')
|
||||
}
|
||||
} else {
|
||||
setError('网络错误，请稍后重试')
|
||||
}
|
||||
@@ -152,6 +165,35 @@ export default function LoginPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TOTP 验证码 */}
|
||||
{needTotp && (
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="totp"
|
||||
className="text-sm font-medium text-foreground"
|
||||
>
|
||||
两步验证码
|
||||
</label>
|
||||
<div className="relative">
|
||||
<ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
id="totp"
|
||||
type="text"
|
||||
placeholder="请输入 6 位验证码"
|
||||
value={totpCode}
|
||||
onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
maxLength={6}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-transparent pl-10 pr-3 py-2 text-sm shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring tracking-widest"
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
请使用身份验证器 App（如 Google Authenticator）扫描二维码后生成的验证码
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 记住我 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
import { useEffect, useState, type ReactNode } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { isAuthenticated, getAccount } from '@/lib/auth'
|
||||
import { isAuthenticated, getAccount, clearAuth } from '@/lib/auth'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { AccountPublic } from '@/lib/types'
|
||||
|
||||
interface AuthGuardProps {
|
||||
@@ -13,17 +14,31 @@ export function AuthGuard({ children }: AuthGuardProps) {
|
||||
const router = useRouter()
|
||||
const [authorized, setAuthorized] = useState(false)
|
||||
const [account, setAccount] = useState<AccountPublic | null>(null)
|
||||
const [verifying, setVerifying] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated()) {
|
||||
router.replace('/login')
|
||||
return
|
||||
async function verifyAuth() {
|
||||
if (!isAuthenticated()) {
|
||||
router.replace('/login')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const serverAccount = await api.auth.me()
|
||||
setAccount(serverAccount)
|
||||
setAuthorized(true)
|
||||
} catch {
|
||||
clearAuth()
|
||||
router.replace('/login')
|
||||
} finally {
|
||||
setVerifying(false)
|
||||
}
|
||||
}
|
||||
setAccount(getAccount())
|
||||
setAuthorized(true)
|
||||
|
||||
verifyAuth()
|
||||
}, [router])
|
||||
|
||||
if (!authorized) {
|
||||
if (verifying) {
|
||||
return (
|
||||
<div className="flex h-screen w-screen items-center justify-center bg-background">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
@@ -31,6 +46,10 @@ export function AuthGuard({ children }: AuthGuardProps) {
|
||||
)
|
||||
}
|
||||
|
||||
if (!authorized) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
|
||||
115
admin/src/components/ui/skeleton.tsx
Normal file
115
admin/src/components/ui/skeleton.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
// ============================================================
|
||||
// Skeleton 组件 — 替代全屏 spinner 的骨架屏
|
||||
// ============================================================
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function SkeletonBase({ className }: { className?: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'animate-pulse rounded-md bg-muted',
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
/** 表格骨架屏 */
|
||||
export function TableSkeleton({
|
||||
rows = 5,
|
||||
cols = 5,
|
||||
hasToolbar = true,
|
||||
}: {
|
||||
rows?: number
|
||||
cols?: number
|
||||
hasToolbar?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{hasToolbar && (
|
||||
<div className="flex items-center justify-between">
|
||||
<SkeletonBase className="h-9 w-[200px]" />
|
||||
<SkeletonBase className="h-9 w-[120px]" />
|
||||
</div>
|
||||
)}
|
||||
<div className="rounded-md border border-border overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="border-b border-border bg-muted/30 px-4 py-3">
|
||||
<div className="flex gap-4">
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<SkeletonBase
|
||||
key={i}
|
||||
className={cn(
|
||||
'h-4',
|
||||
i === 0 ? 'w-[120px]' : i === cols - 1 ? 'w-[80px]' : 'w-[100px]',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{Array.from({ length: rows }).map((_, rowIdx) => (
|
||||
<div
|
||||
key={rowIdx}
|
||||
className={cn(
|
||||
'px-4 py-3',
|
||||
rowIdx < rows - 1 && 'border-b border-border',
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
{Array.from({ length: cols }).map((_, colIdx) => (
|
||||
<SkeletonBase
|
||||
key={colIdx}
|
||||
className={cn(
|
||||
'h-4',
|
||||
colIdx === 0 ? 'w-[120px]' : colIdx === cols - 1 ? 'w-[80px]' : 'w-[100px]',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between">
|
||||
<SkeletonBase className="h-4 w-[140px]" />
|
||||
<div className="flex gap-2">
|
||||
<SkeletonBase className="h-8 w-[80px]" />
|
||||
<SkeletonBase className="h-8 w-[80px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 统计卡片骨架屏 */
|
||||
export function StatsSkeleton({ count = 4 }: { count?: number }) {
|
||||
return (
|
||||
<div className={`grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-${count}`}>
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border border-border p-6">
|
||||
<SkeletonBase className="h-4 w-[80px]" />
|
||||
<SkeletonBase className="mt-2 h-8 w-[100px]" />
|
||||
<SkeletonBase className="mt-1 h-3 w-[120px]" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 图表骨架屏 */
|
||||
export function ChartSkeleton({ height }: { height?: number }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border">
|
||||
<div className="border-b border-border px-6 py-4">
|
||||
<SkeletonBase className="h-5 w-[140px]" />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<SkeletonBase className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { SkeletonBase as Skeleton }
|
||||
63
admin/src/components/ui/state.tsx
Normal file
63
admin/src/components/ui/state.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
'use client'
|
||||
|
||||
import { AlertCircle, Inbox } from 'lucide-react'
|
||||
|
||||
/** 统一的错误提示横幅 */
|
||||
export function ErrorBanner({
|
||||
message,
|
||||
onDismiss,
|
||||
}: {
|
||||
message: string
|
||||
onDismiss?: () => void
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
<span className="flex-1">{message}</span>
|
||||
{onDismiss && (
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="underline cursor-pointer shrink-0"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 统一的空状态占位 */
|
||||
export function EmptyState({
|
||||
message = '暂无数据',
|
||||
}: {
|
||||
message?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-64 flex-col items-center justify-center gap-2 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8" />
|
||||
<span className="text-sm">{message}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 统一的加载失败提示 + 重试 */
|
||||
export function ErrorRetry({
|
||||
message = '请求失败，请重试',
|
||||
onRetry,
|
||||
}: {
|
||||
message?: string
|
||||
onRetry: () => void
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-64 flex-col items-center justify-center gap-3 text-muted-foreground">
|
||||
<AlertCircle className="h-8 w-8 text-destructive" />
|
||||
<span className="text-sm">{message}</span>
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90 transition-colors cursor-pointer"
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
admin/src/hooks/use-debounce.ts
Normal file
16
admin/src/hooks/use-debounce.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// ============================================================
|
||||
// useDebounce — 防抖 hook
|
||||
// ============================================================
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
export function useDebounce<T>(value: T, delay = 300): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => setDebouncedValue(value), delay)
|
||||
return () => clearTimeout(handler)
|
||||
}, [value, delay])
|
||||
|
||||
return debouncedValue
|
||||
}
|
||||
@@ -2,19 +2,25 @@
|
||||
// ZCLAW SaaS Admin — 类型化 HTTP 客户端
|
||||
// ============================================================
|
||||
|
||||
import { getToken, logout } from './auth'
|
||||
import { getToken, login as saveToken, logout, getAccount } from './auth'
|
||||
import type {
|
||||
AccountPublic,
|
||||
AgentTemplate,
|
||||
ApiError,
|
||||
ConfigItem,
|
||||
CreateTokenRequest,
|
||||
DashboardStats,
|
||||
DailyUsageStat,
|
||||
LoginRequest,
|
||||
LoginResponse,
|
||||
Model,
|
||||
ModelUsageStat,
|
||||
OperationLog,
|
||||
PaginatedResponse,
|
||||
PromptTemplate,
|
||||
PromptVersion,
|
||||
Provider,
|
||||
ProviderKey,
|
||||
RelayTask,
|
||||
TokenInfo,
|
||||
UsageByModel,
|
||||
@@ -35,51 +41,132 @@ export class ApiRequestError extends Error {
|
||||
|
||||
// ── 基础请求 ──────────────────────────────────────────────
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SAAS_API_URL || 'http://localhost:8080'
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SAAS_API_URL || '/api/v1'
|
||||
|
||||
const DEFAULT_TIMEOUT_MS = 10_000
|
||||
const MAX_RETRIES = 2
|
||||
|
||||
function sleep(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
/** 判断是否为可重试的网络错误（不含 AbortError） */
|
||||
function isRetryableNetworkError(err: unknown): boolean {
|
||||
// AbortError 不重试：可能是组件卸载或路由切换导致的外部取消
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return false
|
||||
if (err instanceof TypeError) {
|
||||
const msg = (err as TypeError).message
|
||||
return msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('ECONNREFUSED')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/** 尝试刷新 Token，成功返回新 token，失败返回 null */
|
||||
async function tryRefreshToken(): Promise<string | null> {
|
||||
try {
|
||||
const token = getToken()
|
||||
if (!token) return null
|
||||
|
||||
const res = await fetch(`${BASE_URL}/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
|
||||
if (!res.ok) return null
|
||||
|
||||
const data = await res.json()
|
||||
const newToken = data.token as string
|
||||
const account = getAccount()
|
||||
if (account && newToken) {
|
||||
saveToken(newToken, account)
|
||||
}
|
||||
return newToken
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(
|
||||
method: string,
|
||||
path: string,
|
||||
body?: unknown,
|
||||
_isRetry = false,
|
||||
): Promise<T> {
|
||||
const token = getToken()
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
let lastError: unknown
|
||||
|
||||
const res = await fetch(`${BASE_URL}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
})
|
||||
for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
|
||||
const controller = new AbortController()
|
||||
const timeoutId = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT_MS)
|
||||
|
||||
if (res.status === 401) {
|
||||
logout()
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
throw new ApiRequestError(401, { error: 'unauthorized', message: '登录已过期，请重新登录' })
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
let errorBody: ApiError
|
||||
try {
|
||||
errorBody = await res.json()
|
||||
} catch {
|
||||
errorBody = { error: 'unknown', message: `请求失败 (${res.status})` }
|
||||
const token = getToken()
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
const res = await fetch(`${BASE_URL}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
signal: controller.signal,
|
||||
})
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
// 401: 尝试刷新 Token 后重试
|
||||
if (res.status === 401 && !_isRetry) {
|
||||
const newToken = await tryRefreshToken()
|
||||
if (newToken) {
|
||||
return request<T>(method, path, body, true)
|
||||
}
|
||||
logout()
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
throw new ApiRequestError(401, { error: 'unauthorized', message: '登录已过期，请重新登录' })
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
let errorBody: ApiError
|
||||
try {
|
||||
errorBody = await res.json()
|
||||
} catch {
|
||||
errorBody = { error: 'unknown', message: `请求失败 (${res.status})` }
|
||||
}
|
||||
throw new ApiRequestError(res.status, errorBody)
|
||||
}
|
||||
|
||||
// 204 No Content
|
||||
if (res.status === 204) {
|
||||
return undefined as T
|
||||
}
|
||||
|
||||
return res.json() as Promise<T>
|
||||
} catch (err) {
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
// API 错误和外部取消的 AbortError 直接抛出，不重试
|
||||
if (err instanceof ApiRequestError) throw err
|
||||
if (err instanceof DOMException && err.name === 'AbortError') throw err
|
||||
|
||||
lastError = err
|
||||
|
||||
// 仅对可重试的网络错误重试
|
||||
if (attempt < MAX_RETRIES && isRetryableNetworkError(err)) {
|
||||
await sleep(1000 * Math.pow(2, attempt))
|
||||
continue
|
||||
}
|
||||
|
||||
throw err
|
||||
}
|
||||
throw new ApiRequestError(res.status, errorBody)
|
||||
}
|
||||
|
||||
// 204 No Content
|
||||
if (res.status === 204) {
|
||||
return undefined as T
|
||||
}
|
||||
|
||||
return res.json() as Promise<T>
|
||||
throw lastError
|
||||
}
|
||||
|
||||
// ── API 客户端 ────────────────────────────────────────────
|
||||
@@ -88,7 +175,7 @@ export const api = {
|
||||
// ── 认证 ──────────────────────────────────────────────
|
||||
auth: {
|
||||
async login(data: LoginRequest): Promise<LoginResponse> {
|
||||
return request<LoginResponse>('POST', '/api/auth/login', data)
|
||||
return request<LoginResponse>('POST', '/auth/login', data)
|
||||
},
|
||||
|
||||
async register(data: {
|
||||
@@ -97,11 +184,11 @@ export const api = {
|
||||
email: string
|
||||
display_name?: string
|
||||
}): Promise<LoginResponse> {
|
||||
return request<LoginResponse>('POST', '/api/auth/register', data)
|
||||
return request<LoginResponse>('POST', '/auth/register', data)
|
||||
},
|
||||
|
||||
async me(): Promise<AccountPublic> {
|
||||
return request<AccountPublic>('GET', '/api/auth/me')
|
||||
return request<AccountPublic>('GET', '/auth/me')
|
||||
},
|
||||
},
|
||||
|
||||
@@ -115,25 +202,25 @@ export const api = {
|
||||
status?: string
|
||||
}): Promise<PaginatedResponse<AccountPublic>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<AccountPublic>>('GET', `/api/accounts${qs}`)
|
||||
return request<PaginatedResponse<AccountPublic>>('GET', `/accounts${qs}`)
|
||||
},
|
||||
|
||||
async get(id: string): Promise<AccountPublic> {
|
||||
return request<AccountPublic>('GET', `/api/accounts/${id}`)
|
||||
return request<AccountPublic>('GET', `/accounts/${id}`)
|
||||
},
|
||||
|
||||
async update(
|
||||
id: string,
|
||||
data: Partial<Pick<AccountPublic, 'display_name' | 'email' | 'role'>>,
|
||||
): Promise<AccountPublic> {
|
||||
return request<AccountPublic>('PATCH', `/api/accounts/${id}`, data)
|
||||
return request<AccountPublic>('PATCH', `/accounts/${id}`, data)
|
||||
},
|
||||
|
||||
async updateStatus(
|
||||
id: string,
|
||||
data: { status: AccountPublic['status'] },
|
||||
): Promise<void> {
|
||||
return request<void>('PATCH', `/api/accounts/${id}/status`, data)
|
||||
return request<void>('PATCH', `/accounts/${id}/status`, data)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -144,22 +231,46 @@ export const api = {
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<Provider>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<Provider>>('GET', `/api/providers${qs}`)
|
||||
return request<PaginatedResponse<Provider>>('GET', `/providers${qs}`)
|
||||
},
|
||||
|
||||
async create(data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>): Promise<Provider> {
|
||||
return request<Provider>('POST', '/api/providers', data)
|
||||
return request<Provider>('POST', '/providers', data)
|
||||
},
|
||||
|
||||
async update(
|
||||
id: string,
|
||||
data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>,
|
||||
): Promise<Provider> {
|
||||
return request<Provider>('PATCH', `/api/providers/${id}`, data)
|
||||
return request<Provider>('PATCH', `/providers/${id}`, data)
|
||||
},
|
||||
|
||||
async delete(id: string): Promise<void> {
|
||||
return request<void>('DELETE', `/api/providers/${id}`)
|
||||
return request<void>('DELETE', `/providers/${id}`)
|
||||
},
|
||||
|
||||
// Key Pool 管理
|
||||
async listKeys(providerId: string): Promise<ProviderKey[]> {
|
||||
return request<ProviderKey[]>('GET', `/providers/${providerId}/keys`)
|
||||
},
|
||||
|
||||
async addKey(providerId: string, data: {
|
||||
key_label: string
|
||||
key_value: string
|
||||
priority?: number
|
||||
max_rpm?: number
|
||||
max_tpm?: number
|
||||
quota_reset_interval?: string
|
||||
}): Promise<{ ok: boolean; key_id: string }> {
|
||||
return request<{ ok: boolean; key_id: string }>('POST', `/providers/${providerId}/keys`, data)
|
||||
},
|
||||
|
||||
async toggleKey(providerId: string, keyId: string, active: boolean): Promise<{ ok: boolean }> {
|
||||
return request<{ ok: boolean }>('PUT', `/providers/${providerId}/keys/${keyId}/toggle`, { active })
|
||||
},
|
||||
|
||||
async deleteKey(providerId: string, keyId: string): Promise<{ ok: boolean }> {
|
||||
return request<{ ok: boolean }>('DELETE', `/providers/${providerId}/keys/${keyId}`)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -171,19 +282,19 @@ export const api = {
|
||||
provider_id?: string
|
||||
}): Promise<PaginatedResponse<Model>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<Model>>('GET', `/api/models${qs}`)
|
||||
return request<PaginatedResponse<Model>>('GET', `/models${qs}`)
|
||||
},
|
||||
|
||||
async create(data: Partial<Omit<Model, 'id'>>): Promise<Model> {
|
||||
return request<Model>('POST', '/api/models', data)
|
||||
return request<Model>('POST', '/models', data)
|
||||
},
|
||||
|
||||
async update(id: string, data: Partial<Omit<Model, 'id'>>): Promise<Model> {
|
||||
return request<Model>('PATCH', `/api/models/${id}`, data)
|
||||
return request<Model>('PATCH', `/models/${id}`, data)
|
||||
},
|
||||
|
||||
async delete(id: string): Promise<void> {
|
||||
return request<void>('DELETE', `/api/models/${id}`)
|
||||
return request<void>('DELETE', `/models/${id}`)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -194,28 +305,30 @@ export const api = {
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<TokenInfo>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<TokenInfo>>('GET', `/api/tokens${qs}`)
|
||||
return request<PaginatedResponse<TokenInfo>>('GET', `/keys${qs}`)
|
||||
},
|
||||
|
||||
async create(data: CreateTokenRequest): Promise<TokenInfo> {
|
||||
return request<TokenInfo>('POST', '/api/tokens', data)
|
||||
return request<TokenInfo>('POST', '/keys', data)
|
||||
},
|
||||
|
||||
async revoke(id: string): Promise<void> {
|
||||
return request<void>('DELETE', `/api/tokens/${id}`)
|
||||
return request<void>('DELETE', `/keys/${id}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 用量统计 ──────────────────────────────────────────
|
||||
usage: {
|
||||
async daily(params?: { days?: number }): Promise<UsageRecord[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<UsageRecord[]>('GET', `/api/usage/daily${qs}`)
|
||||
const qs = buildQueryString({ ...params, group_by: 'day' })
|
||||
const result = await request<{ by_day: UsageRecord[] }>('GET', `/usage${qs}`)
|
||||
return result.by_day || []
|
||||
},
|
||||
|
||||
async byModel(params?: { days?: number }): Promise<UsageByModel[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<UsageByModel[]>('GET', `/api/usage/by-model${qs}`)
|
||||
const qs = buildQueryString({ ...params, group_by: 'model' })
|
||||
const result = await request<{ by_model: UsageByModel[] }>('GET', `/usage${qs}`)
|
||||
return result.by_model || []
|
||||
},
|
||||
},
|
||||
|
||||
@@ -227,11 +340,11 @@ export const api = {
|
||||
status?: string
|
||||
}): Promise<PaginatedResponse<RelayTask>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<RelayTask>>('GET', `/api/relay/tasks${qs}`)
|
||||
return request<PaginatedResponse<RelayTask>>('GET', `/relay/tasks${qs}`)
|
||||
},
|
||||
|
||||
async get(id: string): Promise<RelayTask> {
|
||||
return request<RelayTask>('GET', `/api/relay/tasks/${id}`)
|
||||
return request<RelayTask>('GET', `/relay/tasks/${id}`)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -239,13 +352,16 @@ export const api = {
|
||||
config: {
|
||||
async list(params?: {
|
||||
category?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}): Promise<ConfigItem[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<ConfigItem[]>('GET', `/api/config${qs}`)
|
||||
const result = await request<PaginatedResponse<ConfigItem>>('GET', `/config/items${qs}`)
|
||||
return result.items
|
||||
},
|
||||
|
||||
async update(id: string, data: { value: string | number | boolean }): Promise<ConfigItem> {
|
||||
return request<ConfigItem>('PATCH', `/api/config/${id}`, data)
|
||||
return request<ConfigItem>('PATCH', `/config/items/${id}`, data)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -257,14 +373,149 @@ export const api = {
|
||||
action?: string
|
||||
}): Promise<PaginatedResponse<OperationLog>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<OperationLog>>('GET', `/api/logs${qs}`)
|
||||
return request<PaginatedResponse<OperationLog>>('GET', `/logs/operations${qs}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 仪表盘 ────────────────────────────────────────────
|
||||
stats: {
|
||||
async dashboard(): Promise<DashboardStats> {
|
||||
return request<DashboardStats>('GET', '/api/stats/dashboard')
|
||||
return request<DashboardStats>('GET', '/stats/dashboard')
|
||||
},
|
||||
},
|
||||
|
||||
// ── 提示词管理 ────────────────────────────────────────
|
||||
prompts: {
|
||||
async list(params?: {
|
||||
category?: string
|
||||
source?: string
|
||||
status?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<PromptTemplate>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<PromptTemplate>>('GET', `/prompts${qs}`)
|
||||
},
|
||||
|
||||
async get(name: string): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('GET', `/prompts/${encodeURIComponent(name)}`)
|
||||
},
|
||||
|
||||
async create(data: {
|
||||
name: string
|
||||
category: string
|
||||
description?: string
|
||||
source?: string
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables?: unknown[]
|
||||
min_app_version?: string
|
||||
}): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('POST', '/prompts', data)
|
||||
},
|
||||
|
||||
async update(name: string, data: {
|
||||
description?: string
|
||||
status?: string
|
||||
}): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('PUT', `/prompts/${encodeURIComponent(name)}`, data)
|
||||
},
|
||||
|
||||
async archive(name: string): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('DELETE', `/prompts/${encodeURIComponent(name)}`)
|
||||
},
|
||||
|
||||
async listVersions(name: string): Promise<PromptVersion[]> {
|
||||
return request<PromptVersion[]>('GET', `/prompts/${encodeURIComponent(name)}/versions`)
|
||||
},
|
||||
|
||||
async createVersion(name: string, data: {
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables?: unknown[]
|
||||
changelog?: string
|
||||
min_app_version?: string
|
||||
}): Promise<PromptVersion> {
|
||||
return request<PromptVersion>('POST', `/prompts/${encodeURIComponent(name)}/versions`, data)
|
||||
},
|
||||
|
||||
async rollback(name: string, version: number): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('POST', `/prompts/${encodeURIComponent(name)}/rollback/${version}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── Agent 配置模板 ──────────────────────────────────
|
||||
agentTemplates: {
|
||||
async list(params?: {
|
||||
category?: string
|
||||
source?: string
|
||||
visibility?: string
|
||||
status?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<AgentTemplate>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<AgentTemplate>>('GET', `/agent-templates${qs}`)
|
||||
},
|
||||
|
||||
async get(id: string): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('GET', `/agent-templates/${id}`)
|
||||
},
|
||||
|
||||
async create(data: {
|
||||
name: string
|
||||
description?: string
|
||||
category?: string
|
||||
source?: string
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools?: string[]
|
||||
capabilities?: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility?: string
|
||||
}): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('POST', '/agent-templates', data)
|
||||
},
|
||||
|
||||
async update(id: string, data: {
|
||||
description?: string
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools?: string[]
|
||||
capabilities?: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility?: string
|
||||
status?: string
|
||||
}): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('POST', `/agent-templates/${id}`, data)
|
||||
},
|
||||
|
||||
async archive(id: string): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('DELETE', `/agent-templates/${id}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 遥测统计 ──────────────────────────────────────────
|
||||
telemetry: {
|
||||
/** 按模型聚合用量统计 */
|
||||
async modelStats(params?: {
|
||||
from?: string
|
||||
to?: string
|
||||
model_id?: string
|
||||
connection_mode?: string
|
||||
}): Promise<ModelUsageStat[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<ModelUsageStat[]>('GET', `/telemetry/stats${qs}`)
|
||||
},
|
||||
|
||||
/** 按天聚合用量统计 */
|
||||
async dailyStats(params?: {
|
||||
days?: number
|
||||
}): Promise<DailyUsageStat[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<DailyUsageStat[]>('GET', `/telemetry/daily${qs}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
13
admin/src/lib/api-error.ts
Normal file
13
admin/src/lib/api-error.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
// ============================================================
|
||||
// API Error 类 — 与 swr-fetcher 共享
|
||||
// ============================================================
|
||||
|
||||
export class ApiRequestError extends Error {
|
||||
constructor(
|
||||
public status: number,
|
||||
public body: { error?: string; message?: string },
|
||||
) {
|
||||
super(body.message || `Request failed with status ${status}`)
|
||||
this.name = 'ApiRequestError'
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,13 @@ export function logout(): void {
|
||||
localStorage.removeItem(ACCOUNT_KEY)
|
||||
}
|
||||
|
||||
/** 清除认证状态（用于 Token 验证失败时） */
|
||||
export function clearAuth(): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(ACCOUNT_KEY)
|
||||
}
|
||||
|
||||
/** 获取 JWT token */
|
||||
export function getToken(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
|
||||
60
admin/src/lib/swr-fetcher.ts
Normal file
60
admin/src/lib/swr-fetcher.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
// ============================================================
|
||||
// SWR fetcher — 将 SWR key 映射到 api-client 调用
|
||||
// ============================================================
|
||||
|
||||
import { api } from './api-client'
|
||||
import { ApiRequestError } from './api-client'
|
||||
|
||||
type ApiMethod = typeof api
|
||||
|
||||
/** SWR fetcher: key 可以是字符串或 [method-path, params] 元组 */
|
||||
type SwrKey =
|
||||
| string
|
||||
| [string, ...unknown[]]
|
||||
|
||||
async function resolveApiCall(key: SwrKey): Promise<unknown> {
|
||||
if (typeof key === 'string') {
|
||||
// 简单字符串 key，直接 fetch
|
||||
return fetchGeneric(key)
|
||||
}
|
||||
|
||||
const [path, ...args] = key
|
||||
return callByPath(path, args)
|
||||
}
|
||||
|
||||
async function fetchGeneric(path: string): Promise<unknown> {
|
||||
const res = await fetch(path, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({ error: 'unknown', message: `请求失败 (${res.status})` }))
|
||||
throw new ApiRequestError(res.status, body)
|
||||
}
|
||||
if (res.status === 204) return null
|
||||
return res.json()
|
||||
}
|
||||
|
||||
/** 根据 path 调用对应的 api 方法 */
|
||||
async function callByPath(path: string, args: unknown[]): Promise<unknown> {
|
||||
const parts = path.split('.')
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let target: any = api
|
||||
for (const part of parts) {
|
||||
target = target[part]
|
||||
if (!target) throw new Error(`API method not found: ${path}`)
|
||||
}
|
||||
return target(...args)
|
||||
}
|
||||
|
||||
export const swrFetcher = <T = unknown>(key: SwrKey): Promise<T> =>
|
||||
resolveApiCall(key) as Promise<T>
|
||||
|
||||
/** 创建 SWR key helper — 类型安全 */
|
||||
export function createKey<TMethod extends string>(
|
||||
method: TMethod,
|
||||
...args: unknown[]
|
||||
): [TMethod, ...unknown[]] {
|
||||
return [method, ...args]
|
||||
}
|
||||
26
admin/src/lib/swr-provider.tsx
Normal file
26
admin/src/lib/swr-provider.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
'use client'
|
||||
|
||||
import { SWRConfig } from 'swr'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
export function SWRProvider({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<SWRConfig
|
||||
value={{
|
||||
revalidateOnFocus: false,
|
||||
dedupingInterval: 5000,
|
||||
errorRetryCount: 2,
|
||||
errorRetryInterval: 3000,
|
||||
shouldRetryOnError: (err: unknown) => {
|
||||
if (err && typeof err === 'object' && 'status' in err) {
|
||||
const status = (err as { status: number }).status
|
||||
return status !== 401 && status !== 403
|
||||
}
|
||||
return true
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SWRConfig>
|
||||
)
|
||||
}
|
||||
@@ -18,6 +18,7 @@ export interface AccountPublic {
|
||||
export interface LoginRequest {
|
||||
username: string
|
||||
password: string
|
||||
totp_code?: string
|
||||
}
|
||||
|
||||
/** 登录响应 */
|
||||
@@ -167,3 +168,127 @@ export interface ApiError {
|
||||
message: string
|
||||
status?: number
|
||||
}
|
||||
|
||||
// ── 提示词模板 ────────────────────────────────────────────
|
||||
|
||||
/** 提示词模板 */
|
||||
export interface PromptTemplate {
|
||||
id: string
|
||||
name: string
|
||||
category: string
|
||||
description?: string
|
||||
source: 'builtin' | 'custom'
|
||||
current_version: number
|
||||
status: 'active' | 'deprecated' | 'archived'
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** 提示词版本 */
|
||||
export interface PromptVersion {
|
||||
id: string
|
||||
template_id: string
|
||||
version: number
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables: PromptVariable[]
|
||||
changelog?: string
|
||||
min_app_version?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 提示词变量定义 */
|
||||
export interface PromptVariable {
|
||||
name: string
|
||||
type: 'string' | 'number' | 'select' | 'boolean'
|
||||
default_value?: string
|
||||
description?: string
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
/** OTA 更新检查请求 */
|
||||
export interface PromptCheckRequest {
|
||||
device_id: string
|
||||
versions: Record<string, number>
|
||||
}
|
||||
|
||||
/** OTA 更新响应 */
|
||||
export interface PromptCheckResponse {
|
||||
updates: PromptUpdatePayload[]
|
||||
server_time: string
|
||||
}
|
||||
|
||||
/** 单个更新载荷 */
|
||||
export interface PromptUpdatePayload {
|
||||
name: string
|
||||
version: number
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables: PromptVariable[]
|
||||
source: string
|
||||
min_app_version?: string
|
||||
changelog?: string
|
||||
}
|
||||
|
||||
// ── Agent 配置模板 ────────────────────────────────────────
|
||||
|
||||
/** Agent 模板 */
|
||||
export interface AgentTemplate {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
category: string
|
||||
source: 'builtin' | 'custom'
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools: string[]
|
||||
capabilities: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility: 'public' | 'team' | 'private'
|
||||
status: 'active' | 'archived'
|
||||
current_version: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// ── Provider Key Pool ─────────────────────────────────────
|
||||
|
||||
/** Provider Key */
|
||||
export interface ProviderKey {
|
||||
id: string
|
||||
provider_id: string
|
||||
key_label: string
|
||||
priority: number
|
||||
max_rpm?: number
|
||||
max_tpm?: number
|
||||
quota_reset_interval?: string
|
||||
is_active: boolean
|
||||
last_429_at?: string
|
||||
cooldown_until?: string
|
||||
total_requests: number
|
||||
total_tokens: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// ── 遥测统计 ────────────────────────────────────────────
|
||||
|
||||
/** 按模型聚合的用量统计 */
|
||||
export interface ModelUsageStat {
|
||||
model_id: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
avg_latency_ms: number | null
|
||||
success_rate: number
|
||||
}
|
||||
|
||||
/** 按天的用量统计 */
|
||||
export interface DailyUsageStat {
|
||||
day: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
unique_devices: number
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user