138 lines
6.2 KiB
JavaScript
138 lines
6.2 KiB
JavaScript
/*
|
||
Copyright (C) 2025 QuantumNous
|
||
|
||
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.
|
||
|
||
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, { useMemo } from 'react';
|
||
import { ArrowUpRight, Clock, Inbox } from 'lucide-react';
|
||
import { renderQuota, renderNumber, timestamp2string } from '../../helpers';
|
||
|
||
const isSuccess = (l) =>
|
||
l?.type === 0 || l?.status === 0 || l?.type === 'success' || l?.type === undefined;
|
||
|
||
const RecentActivity = ({ logs = [], className = '' }) => {
|
||
const recent = useMemo(() => logs.slice(0, 10), [logs]);
|
||
|
||
return (
|
||
<div
|
||
className={`relative overflow-hidden rounded-2xl border border-slate-200 bg-white transition-shadow hover:shadow-md dark:border-white/5 dark:bg-white/[0.02] dark:hover:shadow-black/20 ${className}`}
|
||
>
|
||
<div className='flex items-center justify-between p-6 pb-4'>
|
||
<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'>
|
||
<Clock size={18} />
|
||
</div>
|
||
<div>
|
||
<div className='text-sm font-semibold text-slate-900 dark:text-white'>最近调用</div>
|
||
<div className='mt-0.5 text-[11px] text-slate-400 tabular-nums dark:text-white/40'>
|
||
共{' '}
|
||
<span className='font-semibold text-slate-900 dark:text-white'>
|
||
{recent.length}
|
||
</span>{' '}
|
||
条记录
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href='/console/log'
|
||
className='flex items-center gap-1 text-xs text-slate-500 transition-colors hover:text-slate-900 dark:text-white/60 dark:hover:text-white'
|
||
>
|
||
查看全部 <ArrowUpRight size={11} />
|
||
</a>
|
||
</div>
|
||
|
||
{recent.length === 0 ? (
|
||
<div className='flex flex-col items-center justify-center px-6 py-14'>
|
||
<div className='mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 dark:bg-white/5'>
|
||
<Inbox size={28} className='text-slate-400 dark:text-white/30' />
|
||
</div>
|
||
<h3 className='text-sm font-semibold text-slate-900 dark:text-white'>暂无使用记录</h3>
|
||
<p className='mt-1 text-xs text-slate-500 dark:text-white/40'>
|
||
开始使用 API 后，您的使用历史将显示在这里
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className='overflow-hidden border-t border-slate-100 dark:border-white/5'>
|
||
<table className='w-full text-sm'>
|
||
<thead>
|
||
<tr className='border-b border-slate-100 bg-slate-50/50 text-slate-500 dark:border-white/5 dark:bg-white/[0.02] dark:text-white/40'>
|
||
<th className='w-[140px] px-6 py-2.5 text-left font-mono text-[10px] font-normal uppercase tracking-wider'>
|
||
time
|
||
</th>
|
||
<th className='px-2 py-2.5 text-left font-mono text-[10px] font-normal uppercase tracking-wider'>
|
||
model
|
||
</th>
|
||
<th className='w-[120px] px-2 py-2.5 text-right font-mono text-[10px] font-normal uppercase tracking-wider'>
|
||
tokens
|
||
</th>
|
||
<th className='w-[120px] px-2 py-2.5 text-right font-mono text-[10px] font-normal uppercase tracking-wider'>
|
||
cost
|
||
</th>
|
||
<th className='w-[120px] px-6 py-2.5 text-right font-mono text-[10px] font-normal uppercase tracking-wider'>
|
||
status
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{recent.map((l) => {
|
||
const ok = isSuccess(l);
|
||
return (
|
||
<tr
|
||
key={l.id}
|
||
className='border-b border-slate-100 transition-colors last:border-b-0 hover:bg-slate-50/50 dark:border-white/5 dark:hover:bg-white/[0.02]'
|
||
>
|
||
<td className='whitespace-nowrap px-6 py-3 font-mono text-xs tabular-nums text-slate-500 dark:text-white/50'>
|
||
{timestamp2string(l.created_at).slice(5, 16)}
|
||
</td>
|
||
<td className='max-w-[300px] truncate px-2 py-3 text-slate-700 dark:text-white/90'>
|
||
{l.model_name || '—'}
|
||
</td>
|
||
<td className='px-2 py-3 text-right font-mono text-xs tabular-nums text-slate-500 dark:text-white/70'>
|
||
{renderNumber(l.token_used || 0)}
|
||
</td>
|
||
<td className='px-2 py-3 text-right font-mono text-xs tabular-nums text-slate-500 dark:text-white/70'>
|
||
{renderQuota(l.quota || 0)}
|
||
</td>
|
||
<td className='whitespace-nowrap px-6 py-3 text-right'>
|
||
<span
|
||
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 ${
|
||
ok
|
||
? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
|
||
: 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`h-1.5 w-1.5 rounded-full ${
|
||
ok ? 'bg-emerald-500' : 'bg-red-500'
|
||
}`}
|
||
/>
|
||
<span className='text-xs font-medium'>{ok ? '成功' : '失败'}</span>
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RecentActivity;
|