Browse Source
Backend: - Add quota/usage/stats API types to ai.api - Add 4 new routes: GET /ai/quota/records (user), GET /ai/quotas, POST /ai/quota/recharge, GET /ai/stats (admin) - Add model methods: AIUserQuotaFindList, AIUserQuotaRecharge, AIUsageRecordFindList, ModelStats, DailyStats, TotalStats - Implement quota list, recharge, usage records, stats logic - Add Casbin policies for new endpoints - Add menu seeds: 用量统计, 额度管理 Frontend: - Add quota/usage/stats TypeScript types and API client methods - Create AIUsagePage with stats cards + usage records table - Create AIQuotaManagementPage with quota table + recharge modal - Register routes, page titles, sidebar icons (BarChart3, Wallet)master
22 changed files with 1525 additions and 6 deletions
@ -0,0 +1,32 @@ |
|||
// Code scaffolded by goctl. Safe to edit.
|
|||
// goctl 1.9.2
|
|||
|
|||
package ai |
|||
|
|||
import ( |
|||
"net/http" |
|||
|
|||
"github.com/youruser/base/internal/logic/ai" |
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/zeromicro/go-zero/rest/httpx" |
|||
) |
|||
|
|||
// 获取用户额度列表
|
|||
func AiQuotaListHandler(svcCtx *svc.ServiceContext) http.HandlerFunc { |
|||
return func(w http.ResponseWriter, r *http.Request) { |
|||
var req types.AIQuotaListRequest |
|||
if err := httpx.Parse(r, &req); err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
return |
|||
} |
|||
|
|||
l := ai.NewAiQuotaListLogic(r.Context(), svcCtx) |
|||
resp, err := l.AiQuotaList(&req) |
|||
if err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
} else { |
|||
httpx.OkJsonCtx(r.Context(), w, resp) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
// Code scaffolded by goctl. Safe to edit.
|
|||
// goctl 1.9.2
|
|||
|
|||
package ai |
|||
|
|||
import ( |
|||
"net/http" |
|||
|
|||
"github.com/youruser/base/internal/logic/ai" |
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/zeromicro/go-zero/rest/httpx" |
|||
) |
|||
|
|||
// 充值用户额度
|
|||
func AiQuotaRechargeHandler(svcCtx *svc.ServiceContext) http.HandlerFunc { |
|||
return func(w http.ResponseWriter, r *http.Request) { |
|||
var req types.AIQuotaRechargeRequest |
|||
if err := httpx.Parse(r, &req); err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
return |
|||
} |
|||
|
|||
l := ai.NewAiQuotaRechargeLogic(r.Context(), svcCtx) |
|||
resp, err := l.AiQuotaRecharge(&req) |
|||
if err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
} else { |
|||
httpx.OkJsonCtx(r.Context(), w, resp) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
// Code scaffolded by goctl. Safe to edit.
|
|||
// goctl 1.9.2
|
|||
|
|||
package ai |
|||
|
|||
import ( |
|||
"net/http" |
|||
|
|||
"github.com/youruser/base/internal/logic/ai" |
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/zeromicro/go-zero/rest/httpx" |
|||
) |
|||
|
|||
// 获取我的用量记录
|
|||
func AiUsageRecordListHandler(svcCtx *svc.ServiceContext) http.HandlerFunc { |
|||
return func(w http.ResponseWriter, r *http.Request) { |
|||
var req types.AIUsageRecordListRequest |
|||
if err := httpx.Parse(r, &req); err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
return |
|||
} |
|||
|
|||
l := ai.NewAiUsageRecordListLogic(r.Context(), svcCtx) |
|||
resp, err := l.AiUsageRecordList(&req) |
|||
if err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
} else { |
|||
httpx.OkJsonCtx(r.Context(), w, resp) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
// Code scaffolded by goctl. Safe to edit.
|
|||
// goctl 1.9.2
|
|||
|
|||
package ai |
|||
|
|||
import ( |
|||
"net/http" |
|||
|
|||
"github.com/youruser/base/internal/logic/ai" |
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/zeromicro/go-zero/rest/httpx" |
|||
) |
|||
|
|||
// 获取AI使用统计
|
|||
func AiUsageStatsHandler(svcCtx *svc.ServiceContext) http.HandlerFunc { |
|||
return func(w http.ResponseWriter, r *http.Request) { |
|||
var req types.AIUsageStatsRequest |
|||
if err := httpx.Parse(r, &req); err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
return |
|||
} |
|||
|
|||
l := ai.NewAiUsageStatsLogic(r.Context(), svcCtx) |
|||
resp, err := l.AiUsageStats(&req) |
|||
if err != nil { |
|||
httpx.ErrorCtx(r.Context(), w, err) |
|||
} else { |
|||
httpx.OkJsonCtx(r.Context(), w, resp) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
package ai |
|||
|
|||
import ( |
|||
"context" |
|||
|
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/youruser/base/model" |
|||
|
|||
"github.com/zeromicro/go-zero/core/logx" |
|||
) |
|||
|
|||
type AiQuotaListLogic struct { |
|||
logx.Logger |
|||
ctx context.Context |
|||
svcCtx *svc.ServiceContext |
|||
} |
|||
|
|||
func NewAiQuotaListLogic(ctx context.Context, svcCtx *svc.ServiceContext) *AiQuotaListLogic { |
|||
return &AiQuotaListLogic{ |
|||
Logger: logx.WithContext(ctx), |
|||
ctx: ctx, |
|||
svcCtx: svcCtx, |
|||
} |
|||
} |
|||
|
|||
func (l *AiQuotaListLogic) AiQuotaList(req *types.AIQuotaListRequest) (resp *types.AIQuotaListResponse, err error) { |
|||
quotas, total, err := model.AIUserQuotaFindList(l.ctx, l.svcCtx.DB, req.Page, req.PageSize) |
|||
if err != nil { |
|||
return nil, err |
|||
} |
|||
|
|||
// Build user ID list for batch username lookup
|
|||
userIds := make([]int64, len(quotas)) |
|||
for i, q := range quotas { |
|||
userIds[i] = q.UserId |
|||
} |
|||
|
|||
// Lookup usernames
|
|||
usernameMap := make(map[int64]string) |
|||
if len(userIds) > 0 { |
|||
var users []model.User |
|||
l.svcCtx.DB.WithContext(l.ctx).Where("id IN ?", userIds).Select("id, username").Find(&users) |
|||
for _, u := range users { |
|||
usernameMap[u.Id] = u.Username |
|||
} |
|||
} |
|||
|
|||
list := make([]types.AIQuotaUserInfo, len(quotas)) |
|||
for i, q := range quotas { |
|||
list[i] = types.AIQuotaUserInfo{ |
|||
UserId: q.UserId, |
|||
Username: usernameMap[q.UserId], |
|||
Balance: q.Balance, |
|||
TotalRecharged: q.TotalRecharged, |
|||
TotalConsumed: q.TotalConsumed, |
|||
FrozenAmount: q.FrozenAmount, |
|||
} |
|||
} |
|||
|
|||
return &types.AIQuotaListResponse{ |
|||
List: list, |
|||
Total: total, |
|||
}, nil |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
package ai |
|||
|
|||
import ( |
|||
"context" |
|||
"errors" |
|||
|
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/youruser/base/model" |
|||
|
|||
"github.com/zeromicro/go-zero/core/logx" |
|||
) |
|||
|
|||
type AiQuotaRechargeLogic struct { |
|||
logx.Logger |
|||
ctx context.Context |
|||
svcCtx *svc.ServiceContext |
|||
} |
|||
|
|||
func NewAiQuotaRechargeLogic(ctx context.Context, svcCtx *svc.ServiceContext) *AiQuotaRechargeLogic { |
|||
return &AiQuotaRechargeLogic{ |
|||
Logger: logx.WithContext(ctx), |
|||
ctx: ctx, |
|||
svcCtx: svcCtx, |
|||
} |
|||
} |
|||
|
|||
func (l *AiQuotaRechargeLogic) AiQuotaRecharge(req *types.AIQuotaRechargeRequest) (resp *types.Response, err error) { |
|||
if req.Amount <= 0 { |
|||
return nil, errors.New("充值金额必须大于0") |
|||
} |
|||
|
|||
err = model.AIUserQuotaRecharge(l.ctx, l.svcCtx.DB, req.UserId, req.Amount) |
|||
if err != nil { |
|||
return nil, err |
|||
} |
|||
|
|||
return &types.Response{ |
|||
Code: 0, |
|||
Message: "充值成功", |
|||
Success: true, |
|||
}, nil |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
package ai |
|||
|
|||
import ( |
|||
"context" |
|||
"fmt" |
|||
|
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/youruser/base/model" |
|||
|
|||
"github.com/zeromicro/go-zero/core/logx" |
|||
) |
|||
|
|||
type AiUsageRecordListLogic struct { |
|||
logx.Logger |
|||
ctx context.Context |
|||
svcCtx *svc.ServiceContext |
|||
} |
|||
|
|||
func NewAiUsageRecordListLogic(ctx context.Context, svcCtx *svc.ServiceContext) *AiUsageRecordListLogic { |
|||
return &AiUsageRecordListLogic{ |
|||
Logger: logx.WithContext(ctx), |
|||
ctx: ctx, |
|||
svcCtx: svcCtx, |
|||
} |
|||
} |
|||
|
|||
func (l *AiUsageRecordListLogic) AiUsageRecordList(req *types.AIUsageRecordListRequest) (resp *types.AIUsageRecordListResponse, err error) { |
|||
// For non-admin users, the userId filter is enforced from context
|
|||
// The route is user-level (Auth middleware), so we use request userId filter
|
|||
// If userId=0 in request, it means show current user's records (from context)
|
|||
userId := req.UserId |
|||
if userId == 0 { |
|||
uid, ok := l.ctx.Value("userId").(int64) |
|||
if ok { |
|||
userId = uid |
|||
} else if uidJson, ok2 := l.ctx.Value("userId").(float64); ok2 { |
|||
userId = int64(uidJson) |
|||
} |
|||
} |
|||
|
|||
records, total, err := model.AIUsageRecordFindList(l.ctx, l.svcCtx.DB, userId, req.ModelId, req.Status, req.Page, req.PageSize) |
|||
if err != nil { |
|||
return nil, err |
|||
} |
|||
|
|||
// Build lookup caches
|
|||
userMap := make(map[int64]string) |
|||
providerMap := make(map[int64]string) |
|||
|
|||
for _, r := range records { |
|||
if _, ok := userMap[r.UserId]; !ok { |
|||
user, err := model.FindOne(l.ctx, l.svcCtx.DB, r.UserId) |
|||
if err == nil { |
|||
userMap[r.UserId] = user.Username |
|||
} |
|||
} |
|||
if _, ok := providerMap[r.ProviderId]; !ok { |
|||
provider, err := model.AIProviderFindOne(l.ctx, l.svcCtx.DB, r.ProviderId) |
|||
if err == nil { |
|||
providerMap[r.ProviderId] = provider.DisplayName |
|||
} |
|||
} |
|||
} |
|||
|
|||
list := make([]types.AIUsageRecordInfo, len(records)) |
|||
for i, r := range records { |
|||
list[i] = types.AIUsageRecordInfo{ |
|||
Id: r.Id, |
|||
UserId: r.UserId, |
|||
Username: userMap[r.UserId], |
|||
ProviderId: r.ProviderId, |
|||
ProviderName: providerMap[r.ProviderId], |
|||
ModelId: r.ModelId, |
|||
InputTokens: r.InputTokens, |
|||
OutputTokens: r.OutputTokens, |
|||
Cost: r.Cost, |
|||
Status: r.Status, |
|||
LatencyMs: r.LatencyMs, |
|||
ErrorMessage: r.ErrorMessage, |
|||
CreatedAt: fmt.Sprintf("%s", r.CreatedAt.Format("2006-01-02 15:04:05")), |
|||
} |
|||
} |
|||
|
|||
return &types.AIUsageRecordListResponse{ |
|||
List: list, |
|||
Total: total, |
|||
}, nil |
|||
} |
|||
@ -0,0 +1,80 @@ |
|||
package ai |
|||
|
|||
import ( |
|||
"context" |
|||
|
|||
"github.com/youruser/base/internal/svc" |
|||
"github.com/youruser/base/internal/types" |
|||
"github.com/youruser/base/model" |
|||
|
|||
"github.com/zeromicro/go-zero/core/logx" |
|||
) |
|||
|
|||
type AiUsageStatsLogic struct { |
|||
logx.Logger |
|||
ctx context.Context |
|||
svcCtx *svc.ServiceContext |
|||
} |
|||
|
|||
func NewAiUsageStatsLogic(ctx context.Context, svcCtx *svc.ServiceContext) *AiUsageStatsLogic { |
|||
return &AiUsageStatsLogic{ |
|||
Logger: logx.WithContext(ctx), |
|||
ctx: ctx, |
|||
svcCtx: svcCtx, |
|||
} |
|||
} |
|||
|
|||
func (l *AiUsageStatsLogic) AiUsageStats(req *types.AIUsageStatsRequest) (resp *types.AIUsageStatsResponse, err error) { |
|||
days := req.Days |
|||
if days <= 0 { |
|||
days = 30 |
|||
} |
|||
|
|||
// Total stats
|
|||
totalStats, err := model.AIUsageRecordTotalStats(l.ctx, l.svcCtx.DB, days) |
|||
if err != nil { |
|||
return nil, err |
|||
} |
|||
|
|||
// Model stats
|
|||
modelResults, err := model.AIUsageRecordModelStats(l.ctx, l.svcCtx.DB, days) |
|||
if err != nil { |
|||
return nil, err |
|||
} |
|||
|
|||
modelStats := make([]types.AIModelStatItem, len(modelResults)) |
|||
for i, m := range modelResults { |
|||
modelStats[i] = types.AIModelStatItem{ |
|||
ModelId: m.ModelId, |
|||
Calls: m.Calls, |
|||
InputTokens: m.InputTokens, |
|||
OutputTokens: m.OutputTokens, |
|||
TotalCost: m.TotalCost, |
|||
} |
|||
} |
|||
|
|||
// Daily stats
|
|||
dailyResults, err := model.AIUsageRecordDailyStats(l.ctx, l.svcCtx.DB, days) |
|||
if err != nil { |
|||
return nil, err |
|||
} |
|||
|
|||
dailyStats := make([]types.AIDailyStatItem, len(dailyResults)) |
|||
for i, d := range dailyResults { |
|||
dailyStats[i] = types.AIDailyStatItem{ |
|||
Date: d.Date, |
|||
Calls: d.Calls, |
|||
TotalTokens: d.TotalTokens, |
|||
TotalCost: d.TotalCost, |
|||
} |
|||
} |
|||
|
|||
return &types.AIUsageStatsResponse{ |
|||
TotalCalls: totalStats.TotalCalls, |
|||
TotalTokens: totalStats.TotalTokens, |
|||
TotalCost: totalStats.TotalCost, |
|||
TotalUsers: totalStats.TotalUsers, |
|||
ModelStats: modelStats, |
|||
DailyStats: dailyStats, |
|||
}, nil |
|||
} |
|||
@ -0,0 +1,331 @@ |
|||
import { useState, useEffect, useCallback } from 'react' |
|||
import { Search, Wallet, Plus } from 'lucide-react' |
|||
import { Button } from '@/components/ui/Button' |
|||
import { Input } from '@/components/ui/Input' |
|||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card' |
|||
import { Modal } from '@/components/ui/Modal' |
|||
import { |
|||
Table, |
|||
TableHeader, |
|||
TableBody, |
|||
TableRow, |
|||
TableHead, |
|||
TableCell, |
|||
} from '@/components/ui/Table' |
|||
import type { AIQuotaUserInfo, AIQuotaRechargeRequest } from '@/types' |
|||
import { apiClient } from '@/services/api' |
|||
|
|||
export function AIQuotaManagementPage() { |
|||
const [quotas, setQuotas] = useState<AIQuotaUserInfo[]>([]) |
|||
const [isLoading, setIsLoading] = useState(true) |
|||
const [error, setError] = useState<string | null>(null) |
|||
const [searchQuery, setSearchQuery] = useState('') |
|||
|
|||
// Pagination
|
|||
const [currentPage, setCurrentPage] = useState(1) |
|||
const [pageSize] = useState(20) |
|||
const [total, setTotal] = useState(0) |
|||
|
|||
// Recharge modal
|
|||
const [rechargeModalOpen, setRechargeModalOpen] = useState(false) |
|||
const [rechargeUser, setRechargeUser] = useState<AIQuotaUserInfo | null>(null) |
|||
const [rechargeAmount, setRechargeAmount] = useState('') |
|||
const [rechargeRemark, setRechargeRemark] = useState('') |
|||
const [isRecharging, setIsRecharging] = useState(false) |
|||
|
|||
// Fetch quotas
|
|||
const fetchQuotas = useCallback(async () => { |
|||
try { |
|||
setIsLoading(true) |
|||
setError(null) |
|||
const response = await apiClient.getAIQuotas(currentPage, pageSize) |
|||
setQuotas(response.list || []) |
|||
setTotal(response.total || 0) |
|||
} catch (err) { |
|||
console.error('Failed to fetch AI quotas:', err) |
|||
setError('获取用户额度列表失败，请稍后重试') |
|||
setQuotas([]) |
|||
setTotal(0) |
|||
} finally { |
|||
setIsLoading(false) |
|||
} |
|||
}, [currentPage, pageSize]) |
|||
|
|||
useEffect(() => { |
|||
fetchQuotas() |
|||
}, [fetchQuotas]) |
|||
|
|||
// --- Recharge ---
|
|||
|
|||
const openRechargeModal = (quota: AIQuotaUserInfo) => { |
|||
setRechargeUser(quota) |
|||
setRechargeAmount('') |
|||
setRechargeRemark('') |
|||
setRechargeModalOpen(true) |
|||
} |
|||
|
|||
const resetRechargeForm = () => { |
|||
setRechargeUser(null) |
|||
setRechargeAmount('') |
|||
setRechargeRemark('') |
|||
} |
|||
|
|||
const handleRecharge = async () => { |
|||
if (!rechargeUser) return |
|||
|
|||
const amount = parseFloat(rechargeAmount) |
|||
if (isNaN(amount) || amount <= 0) { |
|||
alert('请输入有效的充值金额（必须大于0）') |
|||
return |
|||
} |
|||
|
|||
try { |
|||
setIsRecharging(true) |
|||
const data: AIQuotaRechargeRequest = { |
|||
userId: rechargeUser.userId, |
|||
amount, |
|||
remark: rechargeRemark || undefined, |
|||
} |
|||
await apiClient.rechargeAIQuota(data) |
|||
setRechargeModalOpen(false) |
|||
resetRechargeForm() |
|||
await fetchQuotas() |
|||
} catch (err) { |
|||
console.error('Failed to recharge:', err) |
|||
alert('充值失败，请重试') |
|||
} finally { |
|||
setIsRecharging(false) |
|||
} |
|||
} |
|||
|
|||
// --- Pagination ---
|
|||
|
|||
const totalPages = Math.ceil(total / pageSize) |
|||
const canGoPrev = currentPage > 1 |
|||
const canGoNext = currentPage < totalPages |
|||
|
|||
const handlePrevPage = () => { |
|||
if (canGoPrev) setCurrentPage(currentPage - 1) |
|||
} |
|||
|
|||
const handleNextPage = () => { |
|||
if (canGoNext) setCurrentPage(currentPage + 1) |
|||
} |
|||
|
|||
// --- Filtering ---
|
|||
|
|||
const filteredQuotas = quotas.filter((quota) => |
|||
quota.username.toLowerCase().includes(searchQuery.toLowerCase()) |
|||
) |
|||
|
|||
// --- Format Currency ---
|
|||
|
|||
const formatCurrency = (value: number): string => { |
|||
return `¥${value.toFixed(2)}` |
|||
} |
|||
|
|||
const getBalanceColor = (balance: number): string => { |
|||
if (balance > 0) return 'text-green-400' |
|||
if (balance < 0) return 'text-red-400' |
|||
return 'text-text-secondary' |
|||
} |
|||
|
|||
// --- Render ---
|
|||
|
|||
return ( |
|||
<div className="space-y-6 animate-fade-in"> |
|||
{/* Header */} |
|||
<Card> |
|||
<CardContent className="p-6"> |
|||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> |
|||
<div className="flex-1 w-full sm:max-w-md"> |
|||
<Input |
|||
placeholder="搜索用户..." |
|||
value={searchQuery} |
|||
onChange={(e) => setSearchQuery(e.target.value)} |
|||
leftIcon={<Search className="h-4 w-4" />} |
|||
/> |
|||
</div> |
|||
<div className="flex items-center gap-2"> |
|||
<span className="text-sm text-text-secondary"> |
|||
共 {total} 个用户 |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Error Message */} |
|||
{error && ( |
|||
<div className="p-4 bg-red-500/10 text-red-400 rounded-lg flex justify-between items-center"> |
|||
<span>{error}</span> |
|||
<button onClick={fetchQuotas} className="underline hover:text-red-300"> |
|||
重试 |
|||
</button> |
|||
</div> |
|||
)} |
|||
|
|||
{/* Quota Table */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle className="flex items-center gap-2"> |
|||
<Wallet className="h-5 w-5" /> |
|||
用户额度列表 |
|||
</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="overflow-x-auto"> |
|||
<Table> |
|||
<TableHeader> |
|||
<TableRow> |
|||
<TableHead>用户</TableHead> |
|||
<TableHead>余额</TableHead> |
|||
<TableHead>累计充值</TableHead> |
|||
<TableHead>累计消费</TableHead> |
|||
<TableHead>冻结金额</TableHead> |
|||
<TableHead className="text-right">操作</TableHead> |
|||
</TableRow> |
|||
</TableHeader> |
|||
<TableBody> |
|||
{isLoading ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={6} className="text-center"> |
|||
加载中... |
|||
</TableCell> |
|||
</TableRow> |
|||
) : filteredQuotas.length === 0 ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={6} className="text-center"> |
|||
暂无数据 |
|||
</TableCell> |
|||
</TableRow> |
|||
) : ( |
|||
filteredQuotas.map((quota) => ( |
|||
<TableRow key={quota.userId}> |
|||
<TableCell className="font-medium text-foreground"> |
|||
{quota.username} |
|||
</TableCell> |
|||
<TableCell className={`font-medium ${getBalanceColor(quota.balance)}`}> |
|||
{formatCurrency(quota.balance)} |
|||
</TableCell> |
|||
<TableCell className="text-text-secondary"> |
|||
{formatCurrency(quota.totalRecharged)} |
|||
</TableCell> |
|||
<TableCell className="text-text-secondary"> |
|||
{formatCurrency(quota.totalConsumed)} |
|||
</TableCell> |
|||
<TableCell className="text-amber-400 font-medium"> |
|||
{formatCurrency(quota.frozenAmount)} |
|||
</TableCell> |
|||
<TableCell className="text-right"> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={() => openRechargeModal(quota)} |
|||
className="flex items-center gap-1" |
|||
> |
|||
<Plus className="h-3.5 w-3.5" /> |
|||
充值 |
|||
</Button> |
|||
</TableCell> |
|||
</TableRow> |
|||
)) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
|
|||
{/* Pagination */} |
|||
{!isLoading && totalPages > 1 && ( |
|||
<div className="flex items-center justify-between mt-6 pt-4 border-t border-border-secondary"> |
|||
<div className="text-sm text-text-secondary"> |
|||
第 {currentPage} 页，共 {totalPages} 页 |
|||
</div> |
|||
<div className="flex items-center gap-2"> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={handlePrevPage} |
|||
disabled={!canGoPrev} |
|||
> |
|||
上一页 |
|||
</Button> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={handleNextPage} |
|||
disabled={!canGoNext} |
|||
> |
|||
下一页 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
)} |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Recharge Modal */} |
|||
<Modal |
|||
isOpen={rechargeModalOpen} |
|||
onClose={() => { |
|||
setRechargeModalOpen(false) |
|||
resetRechargeForm() |
|||
}} |
|||
title="充值额度" |
|||
size="md" |
|||
footer={ |
|||
<> |
|||
<Button |
|||
variant="outline" |
|||
onClick={() => { |
|||
setRechargeModalOpen(false) |
|||
resetRechargeForm() |
|||
}} |
|||
disabled={isRecharging} |
|||
> |
|||
取消 |
|||
</Button> |
|||
<Button onClick={handleRecharge} disabled={isRecharging} isLoading={isRecharging}> |
|||
确认充值 |
|||
</Button> |
|||
</> |
|||
} |
|||
> |
|||
<div className="space-y-4"> |
|||
<div> |
|||
<label className="block text-sm font-medium text-text-secondary mb-2"> |
|||
用户 |
|||
</label> |
|||
<div className="px-3 py-2 bg-muted/50 border border-border-secondary rounded-lg text-foreground"> |
|||
{rechargeUser?.username} |
|||
</div> |
|||
</div> |
|||
|
|||
<Input |
|||
label="充值金额" |
|||
type="number" |
|||
placeholder="请输入充值金额" |
|||
value={rechargeAmount} |
|||
onChange={(e) => setRechargeAmount(e.target.value)} |
|||
min="0" |
|||
step="0.01" |
|||
required |
|||
/> |
|||
|
|||
<Input |
|||
label="备注" |
|||
placeholder="请输入备注（可选）" |
|||
value={rechargeRemark} |
|||
onChange={(e) => setRechargeRemark(e.target.value)} |
|||
/> |
|||
|
|||
<div className="p-3 bg-sky-500/10 border border-sky-500/30 rounded-lg"> |
|||
<p className="text-sm text-sky-400"> |
|||
充值金额必须大于 0，充值后将立即生效。 |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,351 @@ |
|||
import { useState, useEffect, useCallback } from 'react' |
|||
import { BarChart3, Activity, Coins, Users } from 'lucide-react' |
|||
import { Button } from '@/components/ui/Button' |
|||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card' |
|||
import { |
|||
Table, |
|||
TableHeader, |
|||
TableBody, |
|||
TableRow, |
|||
TableHead, |
|||
TableCell, |
|||
} from '@/components/ui/Table' |
|||
import type { AIUsageRecordInfo, AIUsageStats } from '@/types' |
|||
import { apiClient } from '@/services/api' |
|||
|
|||
export function AIUsagePage() { |
|||
// Stats state
|
|||
const [stats, setStats] = useState<AIUsageStats | null>(null) |
|||
const [isLoadingStats, setIsLoadingStats] = useState(true) |
|||
const [selectedPeriod, setSelectedPeriod] = useState<7 | 30 | 90>(30) |
|||
|
|||
// Records state
|
|||
const [records, setRecords] = useState<AIUsageRecordInfo[]>([]) |
|||
const [total, setTotal] = useState(0) |
|||
const [isLoadingRecords, setIsLoadingRecords] = useState(true) |
|||
const [error, setError] = useState<string | null>(null) |
|||
|
|||
// Pagination state
|
|||
const [page, setPage] = useState(1) |
|||
const [pageSize] = useState(20) |
|||
|
|||
// Fetch stats
|
|||
const fetchStats = useCallback(async () => { |
|||
try { |
|||
setIsLoadingStats(true) |
|||
setError(null) |
|||
const data = await apiClient.getAIUsageStats(selectedPeriod) |
|||
setStats(data) |
|||
} catch (err) { |
|||
console.error('Failed to fetch AI usage stats:', err) |
|||
setError('获取统计数据失败，请稍后重试') |
|||
} finally { |
|||
setIsLoadingStats(false) |
|||
} |
|||
}, [selectedPeriod]) |
|||
|
|||
// Fetch records
|
|||
const fetchRecords = useCallback(async () => { |
|||
try { |
|||
setIsLoadingRecords(true) |
|||
setError(null) |
|||
const response = await apiClient.getAIUsageRecords({ page, pageSize }) |
|||
setRecords(response.list || []) |
|||
setTotal(response.total || 0) |
|||
} catch (err) { |
|||
console.error('Failed to fetch AI usage records:', err) |
|||
setError('获取使用记录失败，请稍后重试') |
|||
setRecords([]) |
|||
} finally { |
|||
setIsLoadingRecords(false) |
|||
} |
|||
}, [page, pageSize]) |
|||
|
|||
useEffect(() => { |
|||
fetchStats() |
|||
}, [fetchStats]) |
|||
|
|||
useEffect(() => { |
|||
fetchRecords() |
|||
}, [fetchRecords]) |
|||
|
|||
// Format number with comma separators
|
|||
const formatNumber = (num: number): string => { |
|||
return num.toLocaleString('zh-CN') |
|||
} |
|||
|
|||
// Format cost as currency
|
|||
const formatCost = (cost: number): string => { |
|||
return `¥${cost.toFixed(2)}` |
|||
} |
|||
|
|||
// Format timestamp
|
|||
const formatTimestamp = (timestamp: string): string => { |
|||
const date = new Date(timestamp) |
|||
return date.toLocaleString('zh-CN', { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit', |
|||
}) |
|||
} |
|||
|
|||
// Pagination handlers
|
|||
const totalPages = Math.ceil(total / pageSize) |
|||
|
|||
const handlePrevPage = () => { |
|||
if (page > 1) { |
|||
setPage(page - 1) |
|||
} |
|||
} |
|||
|
|||
const handleNextPage = () => { |
|||
if (page < totalPages) { |
|||
setPage(page + 1) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-6 animate-fade-in"> |
|||
{/* Period Selector */} |
|||
<div className="flex items-center justify-between"> |
|||
<h1 className="text-2xl font-bold text-foreground">AI 使用统计</h1> |
|||
<div className="flex gap-2"> |
|||
<Button |
|||
variant={selectedPeriod === 7 ? 'default' : 'outline'} |
|||
size="sm" |
|||
onClick={() => setSelectedPeriod(7)} |
|||
> |
|||
7天 |
|||
</Button> |
|||
<Button |
|||
variant={selectedPeriod === 30 ? 'default' : 'outline'} |
|||
size="sm" |
|||
onClick={() => setSelectedPeriod(30)} |
|||
> |
|||
30天 |
|||
</Button> |
|||
<Button |
|||
variant={selectedPeriod === 90 ? 'default' : 'outline'} |
|||
size="sm" |
|||
onClick={() => setSelectedPeriod(90)} |
|||
> |
|||
90天 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* Error Message */} |
|||
{error && ( |
|||
<div className="p-4 bg-red-500/10 text-red-400 rounded-lg flex justify-between items-center"> |
|||
<span>{error}</span> |
|||
<button |
|||
onClick={() => { |
|||
fetchStats() |
|||
fetchRecords() |
|||
}} |
|||
className="underline hover:text-red-300" |
|||
> |
|||
重试 |
|||
</button> |
|||
</div> |
|||
)} |
|||
|
|||
{/* Stats Cards */} |
|||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> |
|||
{/* Total Calls */} |
|||
<Card> |
|||
<CardContent className="p-6"> |
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-sm text-text-muted">总调用次数</p> |
|||
{isLoadingStats ? ( |
|||
<p className="text-2xl font-bold text-foreground mt-2">--</p> |
|||
) : ( |
|||
<p className="text-2xl font-bold text-foreground mt-2"> |
|||
{formatNumber(stats?.totalCalls || 0)} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="h-12 w-12 bg-sky-500/20 rounded-lg flex items-center justify-center"> |
|||
<BarChart3 className="h-6 w-6 text-sky-400" /> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Total Tokens */} |
|||
<Card> |
|||
<CardContent className="p-6"> |
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-sm text-text-muted">总 Token 数</p> |
|||
{isLoadingStats ? ( |
|||
<p className="text-2xl font-bold text-foreground mt-2">--</p> |
|||
) : ( |
|||
<p className="text-2xl font-bold text-foreground mt-2"> |
|||
{formatNumber(stats?.totalTokens || 0)} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="h-12 w-12 bg-purple-500/20 rounded-lg flex items-center justify-center"> |
|||
<Activity className="h-6 w-6 text-purple-400" /> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Total Cost */} |
|||
<Card> |
|||
<CardContent className="p-6"> |
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-sm text-text-muted">总费用</p> |
|||
{isLoadingStats ? ( |
|||
<p className="text-2xl font-bold text-foreground mt-2">--</p> |
|||
) : ( |
|||
<p className="text-2xl font-bold text-foreground mt-2"> |
|||
{formatCost(stats?.totalCost || 0)} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="h-12 w-12 bg-green-500/20 rounded-lg flex items-center justify-center"> |
|||
<Coins className="h-6 w-6 text-green-400" /> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Active Users */} |
|||
<Card> |
|||
<CardContent className="p-6"> |
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-sm text-text-muted">活跃用户数</p> |
|||
{isLoadingStats ? ( |
|||
<p className="text-2xl font-bold text-foreground mt-2">--</p> |
|||
) : ( |
|||
<p className="text-2xl font-bold text-foreground mt-2"> |
|||
{formatNumber(stats?.totalUsers || 0)} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="h-12 w-12 bg-orange-500/20 rounded-lg flex items-center justify-center"> |
|||
<Users className="h-6 w-6 text-orange-400" /> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
|
|||
{/* Usage Records Table */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle>使用记录 ({total})</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="overflow-x-auto"> |
|||
<Table> |
|||
<TableHeader> |
|||
<TableRow> |
|||
<TableHead>时间</TableHead> |
|||
<TableHead>用户</TableHead> |
|||
<TableHead>模型</TableHead> |
|||
<TableHead className="text-right">输入Tokens</TableHead> |
|||
<TableHead className="text-right">输出Tokens</TableHead> |
|||
<TableHead className="text-right">费用</TableHead> |
|||
<TableHead className="text-right">延迟</TableHead> |
|||
<TableHead>状态</TableHead> |
|||
</TableRow> |
|||
</TableHeader> |
|||
<TableBody> |
|||
{isLoadingRecords ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={8} className="text-center py-8 text-text-secondary"> |
|||
加载中... |
|||
</TableCell> |
|||
</TableRow> |
|||
) : records.length === 0 ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={8} className="text-center py-8 text-text-muted"> |
|||
暂无数据 |
|||
</TableCell> |
|||
</TableRow> |
|||
) : ( |
|||
records.map((record) => ( |
|||
<TableRow key={record.id}> |
|||
<TableCell className="text-text-secondary text-sm"> |
|||
{formatTimestamp(record.createdAt)} |
|||
</TableCell> |
|||
<TableCell className="font-medium text-foreground"> |
|||
{record.username} |
|||
</TableCell> |
|||
<TableCell className="font-mono text-sm text-text-secondary"> |
|||
{record.modelId} |
|||
</TableCell> |
|||
<TableCell className="text-right text-text-secondary tabular-nums"> |
|||
{formatNumber(record.inputTokens)} |
|||
</TableCell> |
|||
<TableCell className="text-right text-text-secondary tabular-nums"> |
|||
{formatNumber(record.outputTokens)} |
|||
</TableCell> |
|||
<TableCell className="text-right font-medium text-foreground tabular-nums"> |
|||
{formatCost(record.cost)} |
|||
</TableCell> |
|||
<TableCell className="text-right text-text-secondary tabular-nums"> |
|||
{record.latencyMs}ms |
|||
</TableCell> |
|||
<TableCell> |
|||
{record.status === 'ok' ? ( |
|||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30"> |
|||
成功 |
|||
</span> |
|||
) : ( |
|||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30"> |
|||
失败 |
|||
</span> |
|||
)} |
|||
</TableCell> |
|||
</TableRow> |
|||
)) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
|
|||
{/* Pagination */} |
|||
{!isLoadingRecords && records.length > 0 && ( |
|||
<div className="flex items-center justify-between mt-6 pt-4 border-t border-border-secondary"> |
|||
<div className="text-sm text-text-muted"> |
|||
显示第 {(page - 1) * pageSize + 1} - {Math.min(page * pageSize, total)} 条，共 {total} 条 |
|||
</div> |
|||
<div className="flex gap-2"> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={handlePrevPage} |
|||
disabled={page === 1} |
|||
> |
|||
上一页 |
|||
</Button> |
|||
<div className="flex items-center px-3 text-sm text-foreground"> |
|||
第 {page} / {totalPages} 页 |
|||
</div> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={handleNextPage} |
|||
disabled={page >= totalPages} |
|||
> |
|||
下一页 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
)} |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
) |
|||
} |
|||
Loading…
Reference in new issue