Token 使用趋势全面升级：悬停提示 + 模型明细 + 视觉优化
This commit is contained in:
parent
8a9e0226d0
commit
d2913ff260
|
|
@ -17,10 +17,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React, { useMemo, useState, useRef, useEffect } from 'react';
|
||||
import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { TrendingUp, RefreshCw, ChevronDown } from 'lucide-react';
|
||||
import BarChart from './BarChart';
|
||||
import { renderQuota } from '../../helpers';
|
||||
import Sparkline from './Sparkline';
|
||||
import { renderQuota, renderNumber } from '../../helpers';
|
||||
|
||||
const formatMD = (d) => {
|
||||
const m = d.getMonth() + 1;
|
||||
|
|
@ -28,12 +28,8 @@ const formatMD = (d) => {
|
|||
return `${m}/${day}`;
|
||||
};
|
||||
|
||||
const toDateStr = (d) => {
|
||||
const y = d.getFullYear();
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
};
|
||||
const ACCENT_COLORS = ['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b'];
|
||||
const DOT_COLOR = '#3b82f6';
|
||||
|
||||
const RANGE_OPTIONS = [
|
||||
{ key: 'today', label: '今天' },
|
||||
|
|
@ -46,36 +42,6 @@ const RANGE_OPTIONS = [
|
|||
{ key: 'lastMonth', label: '上月' },
|
||||
];
|
||||
|
||||
const getRangeDates = (key) => {
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
switch (key) {
|
||||
case 'today':
|
||||
return { start: today, end: now };
|
||||
case 'yesterday': {
|
||||
const y = new Date(today.getTime() - 86400000);
|
||||
return { start: y, end: new Date(today.getTime() - 1000) };
|
||||
}
|
||||
case '24h':
|
||||
return { start: new Date(now.getTime() - 86400000), end: now };
|
||||
case '7d':
|
||||
return { start: new Date(today.getTime() - 6 * 86400000), end: now };
|
||||
case '14d':
|
||||
return { start: new Date(today.getTime() - 13 * 86400000), end: now };
|
||||
case '30d':
|
||||
return { start: new Date(today.getTime() - 29 * 86400000), end: now };
|
||||
case 'thisMonth':
|
||||
return { start: new Date(now.getFullYear(), now.getMonth(), 1), end: now };
|
||||
case 'lastMonth': {
|
||||
const lmStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
const lmEnd = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
|
||||
return { start: lmStart, end: lmEnd };
|
||||
}
|
||||
default:
|
||||
return { start: new Date(today.getTime() - 6 * 86400000), end: now };
|
||||
}
|
||||
};
|
||||
|
||||
const BentoTrend = ({
|
||||
dailyStats = [],
|
||||
topModels = [],
|
||||
|
|
@ -87,7 +53,9 @@ const BentoTrend = ({
|
|||
const [selectedKey, setSelectedKey] = useState('7d');
|
||||
const [customStart, setCustomStart] = useState('');
|
||||
const [customEnd, setCustomEnd] = useState('');
|
||||
const [tooltip, setTooltip] = useState(null); // { dayIdx, x, y } or null
|
||||
const rangeRef = useRef(null);
|
||||
const chartRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e) => {
|
||||
|
|
@ -108,6 +76,19 @@ const BentoTrend = ({
|
|||
setRangeOpen(false);
|
||||
};
|
||||
|
||||
const handleHover = useCallback((idx, cx, cy) => {
|
||||
if (idx < 0 || idx >= dailyStats.length) {
|
||||
setTooltip(null);
|
||||
return;
|
||||
}
|
||||
const rect = chartRef.current?.getBoundingClientRect();
|
||||
setTooltip({
|
||||
dayIdx: idx,
|
||||
x: rect ? cx - rect.left : cx,
|
||||
y: rect ? cy - rect.top - 120 : cy - 120,
|
||||
});
|
||||
}, [dailyStats.length]);
|
||||
|
||||
const counts = useMemo(() => dailyStats.map((d) => d.count), [dailyStats]);
|
||||
const costs = useMemo(() => dailyStats.map((d) => d.cost), [dailyStats]);
|
||||
|
||||
|
|
@ -117,13 +98,17 @@ const BentoTrend = ({
|
|||
const peak = counts.length > 0 ? Math.max(...counts) : 0;
|
||||
const topMax = topModels[0]?.count || 0;
|
||||
|
||||
const hoverDay = tooltip ? dailyStats[tooltip.dayIdx] : null;
|
||||
const hoverModels = hoverDay ? Object.entries(hoverDay.models || {}).sort((a, b) => b[1] - a[1]) : [];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-md dark:border-white/5 dark:bg-white/[0.02] dark:hover:shadow-black/20 ${className}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-600 dark:bg-white/5 dark:text-white/70'>
|
||||
<div className='flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'>
|
||||
<TrendingUp size={18} />
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -140,12 +125,13 @@ const BentoTrend = ({
|
|||
<div className='text-[10px] uppercase tracking-wider text-slate-400 font-mono dark:text-white/30'>
|
||||
花费
|
||||
</div>
|
||||
<div className='font-mono text-sm font-semibold tabular-nums text-slate-900 dark:text-white'>
|
||||
<div className='font-mono text-sm font-semibold tabular-nums text-emerald-600 dark:text-emerald-400'>
|
||||
{totalCost > 0 ? renderQuota(totalCost) : '—'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2' ref={rangeRef}>
|
||||
<div className='relative'>
|
||||
|
|
@ -171,7 +157,7 @@ const BentoTrend = ({
|
|||
}}
|
||||
className={`w-full rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${
|
||||
selectedKey === opt.key
|
||||
? 'bg-slate-100 font-medium text-slate-900 dark:bg-white/10 dark:text-white'
|
||||
? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-400'
|
||||
: 'text-slate-600 hover:bg-slate-50 dark:text-white/60 dark:hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
|
|
@ -188,7 +174,7 @@ const BentoTrend = ({
|
|||
type='date'
|
||||
value={customStart}
|
||||
onChange={(e) => setCustomStart(e.target.value)}
|
||||
className='flex-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 outline-none focus:border-slate-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70 dark:focus:border-white/30'
|
||||
className='flex-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 outline-none focus:border-blue-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70'
|
||||
placeholder='开始日期'
|
||||
/>
|
||||
<span className='text-xs text-slate-400'>—</span>
|
||||
|
|
@ -196,14 +182,14 @@ const BentoTrend = ({
|
|||
type='date'
|
||||
value={customEnd}
|
||||
onChange={(e) => setCustomEnd(e.target.value)}
|
||||
className='flex-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 outline-none focus:border-slate-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70 dark:focus:border-white/30'
|
||||
className='flex-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 outline-none focus:border-blue-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70'
|
||||
placeholder='结束日期'
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleApply}
|
||||
disabled={!customStart || !customEnd}
|
||||
className='w-full rounded-lg bg-slate-900 py-1.5 text-xs font-medium text-white transition-colors hover:bg-slate-800 disabled:opacity-40 dark:bg-white dark:text-neutral-900 dark:hover:bg-white/90'
|
||||
className='w-full rounded-lg bg-blue-600 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-600'
|
||||
>
|
||||
应用
|
||||
</button>
|
||||
|
|
@ -221,30 +207,83 @@ const BentoTrend = ({
|
|||
<RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Peak / total indicators */}
|
||||
<div className='hidden items-center gap-3 sm:flex'>
|
||||
<div className='flex items-center gap-1.5 text-[11px] text-slate-400 dark:text-white/40'>
|
||||
<span className='inline-block h-1.5 w-1.5 rounded-full bg-blue-500' />
|
||||
峰值 <span className='font-semibold text-slate-700 dark:text-white/80'>{peak}</span> 次
|
||||
</div>
|
||||
<div className='flex items-center gap-1.5 text-[11px] text-slate-400 dark:text-white/40'>
|
||||
合计 <span className='font-semibold text-slate-700 dark:text-white/80'>{totalCalls}</span> 次
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
|
||||
<BarChart data={counts} height={80} barW={26} />
|
||||
{/* Chart area */}
|
||||
<div ref={chartRef} className='relative flex min-h-[80px] flex-1 items-end text-blue-500'>
|
||||
<Sparkline data={counts} height={80} stroke={DOT_COLOR} onHover={handleHover} />
|
||||
|
||||
{/* Tooltip */}
|
||||
{tooltip && hoverDay && (
|
||||
<div
|
||||
className='pointer-events-none absolute z-50 min-w-[180px] rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-lg dark:border-white/10 dark:bg-neutral-900'
|
||||
style={{ left: tooltip.x, top: tooltip.y, transform: 'translate(-50%, -100%)' }}
|
||||
>
|
||||
<div className='mb-1 text-xs font-semibold text-slate-900 dark:text-white'>
|
||||
{hoverDay.date.getMonth() + 1}月{hoverDay.date.getDate()}日
|
||||
</div>
|
||||
<div className='mb-2 flex items-center gap-3 text-[11px] text-slate-500 dark:text-white/50'>
|
||||
<span>调用 <b className='text-slate-900 dark:text-white'>{hoverDay.count}</b> 次</span>
|
||||
<span>花费 <b className='text-slate-900 dark:text-white'>{renderQuota(hoverDay.cost)}</b></span>
|
||||
</div>
|
||||
{hoverModels.length > 0 && (
|
||||
<>
|
||||
<div className='mb-1.5 h-px bg-slate-100 dark:bg-white/5' />
|
||||
<div className='space-y-1'>
|
||||
{hoverModels.slice(0, 5).map(([name, count], i) => (
|
||||
<div key={name} className='flex items-center gap-2 text-[11px]'>
|
||||
<span
|
||||
className='inline-block h-1.5 w-1.5 rounded-full shrink-0'
|
||||
style={{ backgroundColor: ACCENT_COLORS[i % ACCENT_COLORS.length] }}
|
||||
/>
|
||||
<span className='min-w-0 flex-1 truncate text-slate-600 dark:text-white/70'>
|
||||
{name}
|
||||
</span>
|
||||
<span className='shrink-0 font-mono tabular-nums text-slate-400 dark:text-white/40'>
|
||||
{count}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Date labels */}
|
||||
<div className='flex items-center justify-between text-[11px]'>
|
||||
<div className='flex w-full items-center justify-between tabular-nums'>
|
||||
{dailyStats.map((d, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className='text-center text-xs text-slate-500 dark:text-white/50'
|
||||
title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
|
||||
>
|
||||
{formatMD(d.date)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className='ml-4 shrink-0 text-slate-500 tabular-nums dark:text-white/50'>
|
||||
峰值{' '}
|
||||
<span className='font-semibold text-slate-900 dark:text-white'>{peak}</span> 次
|
||||
{dailyStats.map((d, i) => {
|
||||
const isHovered = tooltip?.dayIdx === i;
|
||||
return (
|
||||
<span
|
||||
key={i}
|
||||
className={`text-center text-xs transition-colors ${
|
||||
isHovered
|
||||
? 'font-semibold text-blue-600 dark:text-blue-400'
|
||||
: 'text-slate-500 dark:text-white/50'
|
||||
}`}
|
||||
>
|
||||
{formatMD(d.date)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top 5 Models */}
|
||||
{topModels.length > 0 && (
|
||||
<div className='border-t border-slate-100 pt-4 dark:border-white/5'>
|
||||
<div className='mb-2 flex items-center justify-between text-[11px] uppercase tracking-wider text-slate-400 dark:text-white/40'>
|
||||
|
|
@ -254,13 +293,14 @@ const BentoTrend = ({
|
|||
<ul className='space-y-1.5'>
|
||||
{topModels.map((m, i) => {
|
||||
const pct = topMax > 0 ? (m.count / topMax) * 100 : 0;
|
||||
const color = ACCENT_COLORS[i % ACCENT_COLORS.length];
|
||||
return (
|
||||
<li
|
||||
key={m.name + i}
|
||||
className='flex items-center gap-3 text-xs'
|
||||
title={m.name}
|
||||
>
|
||||
<span className='w-3 shrink-0 text-right font-mono text-[10px] text-slate-300 tabular-nums dark:text-white/30'>
|
||||
<span className='w-3 shrink-0 text-right font-mono text-[10px] tabular-nums' style={{ color }}>
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className='min-w-0 flex-1 truncate text-slate-700 dark:text-white/80'>
|
||||
|
|
@ -268,8 +308,8 @@ const BentoTrend = ({
|
|||
</span>
|
||||
<div className='hidden h-1 w-24 overflow-hidden rounded-full bg-slate-100 sm:block dark:bg-white/5'>
|
||||
<div
|
||||
className='h-full rounded-full bg-slate-300 dark:bg-white/30'
|
||||
style={{ width: `${pct}%` }}
|
||||
className='h-full rounded-full'
|
||||
style={{ width: `${pct}%`, backgroundColor: color }}
|
||||
/>
|
||||
</div>
|
||||
<span className='w-12 shrink-0 text-right font-mono tabular-nums text-slate-500 dark:text-white/60'>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,94 @@
|
|||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
import React, { useState, useCallback } from 'react';
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
const Sparkline = ({ data = [], height = 80, stroke = 'currentColor', onHover }) => {
|
||||
const [hoverIdx, setHoverIdx] = useState(null);
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const Sparkline = ({
|
||||
data = [],
|
||||
width = 200,
|
||||
height = 40,
|
||||
stroke = 'currentColor',
|
||||
className = '',
|
||||
}) => {
|
||||
if (!data || data.length === 0) return null;
|
||||
const max = Math.max(...data, 1);
|
||||
const step = data.length > 1 ? width / (data.length - 1) : 0;
|
||||
const points = data
|
||||
.map((v, i) => {
|
||||
const x = i * step;
|
||||
const y = height - (v / max) * (height - 4) - 2;
|
||||
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
})
|
||||
.join(' ');
|
||||
|
||||
const areaPoints = `0,${height} ${points} ${width},${height}`;
|
||||
const max = Math.max(...data, 1);
|
||||
const n = data.length;
|
||||
const w = 400;
|
||||
|
||||
const xs = data.map((_, i) => (n > 1 ? (i / (n - 1)) * w : w / 2));
|
||||
const ys = data.map((v) => height - (v / max) * (height - 8) - 4);
|
||||
|
||||
const points = xs.map((x, i) => `${x.toFixed(1)},${ys[i].toFixed(1)}`).join(' ');
|
||||
const areaPoints = `0,${height} ${points} ${w},${height}`;
|
||||
|
||||
const handleMouseMove = useCallback((e) => {
|
||||
const svg = e.currentTarget;
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const mx = ((e.clientX - rect.left) / rect.width) * w;
|
||||
const dxs = xs.map((x) => Math.abs(x - mx));
|
||||
const idx = dxs.indexOf(Math.min(...dxs));
|
||||
setHoverIdx(idx);
|
||||
onHover?.(idx, e.clientX, e.clientY);
|
||||
}, [xs, w, onHover]);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoverIdx(null);
|
||||
onHover?.(-1);
|
||||
}, [onHover]);
|
||||
|
||||
return (
|
||||
<svg
|
||||
width='100%'
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
viewBox={`0 0 ${w} ${height}`}
|
||||
preserveAspectRatio='none'
|
||||
className={className}
|
||||
className='cursor-crosshair'
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id='sparkline-gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
|
||||
<stop offset='0%' stopColor={stroke} stopOpacity='0.18' />
|
||||
<linearGradient id='sg' x1='0%' y1='0%' x2='0%' y2='100%'>
|
||||
<stop offset='0%' stopColor={stroke} stopOpacity='0.12' />
|
||||
<stop offset='100%' stopColor={stroke} stopOpacity='0' />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon points={areaPoints} fill='url(#sparkline-gradient)' />
|
||||
|
||||
{/* hover vertical line */}
|
||||
{hoverIdx != null && (
|
||||
<line
|
||||
x1={xs[hoverIdx].toFixed(1)}
|
||||
y1={0}
|
||||
x2={xs[hoverIdx].toFixed(1)}
|
||||
y2={height}
|
||||
stroke={stroke}
|
||||
strokeWidth='1'
|
||||
strokeDasharray='3 3'
|
||||
opacity='0.3'
|
||||
vectorEffect='non-scaling-stroke'
|
||||
/>
|
||||
)}
|
||||
|
||||
<polygon points={areaPoints} fill='url(#sg)' />
|
||||
<polyline
|
||||
points={points}
|
||||
fill='none'
|
||||
stroke={stroke}
|
||||
strokeWidth='2'
|
||||
strokeWidth='2.5'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
vectorEffect='non-scaling-stroke'
|
||||
/>
|
||||
|
||||
{data.map((v, i) => {
|
||||
const active = hoverIdx === i;
|
||||
return (
|
||||
<circle
|
||||
key={i}
|
||||
cx={xs[i].toFixed(1)}
|
||||
cy={ys[i].toFixed(1)}
|
||||
r={active ? 5 : 3}
|
||||
fill={active ? stroke : 'white'}
|
||||
stroke={stroke}
|
||||
strokeWidth={active ? 3 : 2}
|
||||
vectorEffect='non-scaling-stroke'
|
||||
style={{ transition: 'r 0.15s, fill 0.15s' }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -146,11 +146,17 @@ export const useDashboardData = (userState) => {
|
|||
const dayLogs = recentLogs.filter(
|
||||
(l) => (l?.created_at || 0) >= dayStart && (l?.created_at || 0) < dayEnd && isSuccess(l),
|
||||
);
|
||||
const models = {};
|
||||
dayLogs.forEach((l) => {
|
||||
const name = l?.model_name || '未知模型';
|
||||
models[name] = (models[name] || 0) + 1;
|
||||
});
|
||||
days.push({
|
||||
date: d,
|
||||
count: dayLogs.length,
|
||||
cost: sum(dayLogs, 'quota'),
|
||||
tokens: sum(dayLogs, 'token_used'),
|
||||
models,
|
||||
});
|
||||
}
|
||||
return days;
|
||||
|
|
|
|||
Loading…
Reference in New Issue