325 lines
14 KiB
React
325 lines
14 KiB
React
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ChevronDown, ChevronRight } from 'lucide-react';
|
|
import { getUserLogs, Q } from '../api';
|
|
import { useCurrency } from '../context/SiteContext';
|
|
|
|
function formatTime(unix) {
|
|
if (!unix) return '-';
|
|
const d = new Date(unix * 1000);
|
|
const pad = (n) => String(n).padStart(2, '0');
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
|
}
|
|
|
|
function getLogOther(otherStr) {
|
|
if (!otherStr) return null;
|
|
try {
|
|
return JSON.parse(otherStr);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function formatSitePriceSnapshot(other, symbol, rate, t) {
|
|
if (!other?.site_billing_mode) return '-';
|
|
|
|
const formatUSD = (amount) => `${symbol}${(Number(amount || 0) * rate).toFixed(6)}`;
|
|
if (other.site_billing_mode === 'per_call') {
|
|
const fixedPrice = Number(other?.site_fixed_price || 0);
|
|
if (fixedPrice <= 0) return t('按次计费');
|
|
return `${t('按次计费')} · ${formatUSD(fixedPrice)} / ${t('pricing.perCallUnit')}`;
|
|
}
|
|
|
|
const inputPrice = Number(other?.site_input_price || 0);
|
|
const outputPrice = Number(other?.site_output_price || 0);
|
|
const parts = [t('按量计费')];
|
|
if (inputPrice > 0) parts.push(`${t('输入')} ${formatUSD(inputPrice)} / 1M tokens`);
|
|
if (outputPrice > 0) parts.push(`${t('输出')} ${formatUSD(outputPrice)} / 1M tokens`);
|
|
return parts.join(' · ');
|
|
}
|
|
|
|
function formatProviderSummary(other, t) {
|
|
if (!other?.provider_name) return [];
|
|
const items = [{ key: t('供应商'), value: other.provider_name }];
|
|
if (other.provider_description) {
|
|
items.push({ key: t('供应商介绍'), value: other.provider_description });
|
|
}
|
|
return items;
|
|
}
|
|
|
|
export default function Logs() {
|
|
const { t } = useTranslation();
|
|
const { symbol, rate } = useCurrency();
|
|
const [logs, setLogs] = useState([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [page, setPage] = useState(1);
|
|
const [loading, setLoading] = useState(true);
|
|
const [modelFilter, setModelFilter] = useState('');
|
|
const [tokenFilter, setTokenFilter] = useState('');
|
|
const [expandedRows, setExpandedRows] = useState({});
|
|
const pageSize = 20;
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = { p: page, page_size: pageSize, type: 2 }; // type=2 consume only
|
|
if (modelFilter) params.model_name = modelFilter;
|
|
if (tokenFilter) params.token_name = tokenFilter;
|
|
const res = await getUserLogs(params);
|
|
if (res.data.success) {
|
|
setLogs(res.data.data?.items || []);
|
|
setTotal(res.data.data?.total || 0);
|
|
}
|
|
} catch (e) { /* interceptor */ }
|
|
setLoading(false);
|
|
}, [page, modelFilter, tokenFilter]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
|
|
const toggleRow = (logId) => {
|
|
setExpandedRows(prev => ({ ...prev, [logId]: !prev[logId] }));
|
|
};
|
|
|
|
const getExpandData = useCallback((log) => {
|
|
const other = getLogOther(log.other);
|
|
if (!other) return [];
|
|
|
|
const data = [];
|
|
|
|
// Cache hits
|
|
if (other.cache_tokens > 0) {
|
|
data.push({ key: t('缓存命中 Tokens'), value: other.cache_tokens.toLocaleString() });
|
|
}
|
|
|
|
// Cache creation
|
|
if (other.cache_creation_tokens > 0) {
|
|
data.push({ key: t('缓存创建 Tokens'), value: other.cache_creation_tokens.toLocaleString() });
|
|
}
|
|
|
|
// Request ID
|
|
if (log.request_id) {
|
|
data.push({ key: 'Request ID', value: log.request_id });
|
|
}
|
|
|
|
// Stream info
|
|
if (log.is_stream !== undefined) {
|
|
data.push({ key: t('流式'), value: log.is_stream ? t('是') : t('否') });
|
|
}
|
|
|
|
// First response time for streaming
|
|
if (log.is_stream && other.frt) {
|
|
const frtSeconds = (parseFloat(other.frt) / 1000.0).toFixed(1);
|
|
data.push({ key: t('首字时间'), value: `${frtSeconds}s` });
|
|
}
|
|
|
|
// Billing source
|
|
if (other.billing_source === 'subscription') {
|
|
data.push({ key: t('计费方式'), value: t('订阅抵扣') });
|
|
}
|
|
|
|
const providerInfo = formatProviderSummary(other, t);
|
|
data.push(...providerInfo);
|
|
|
|
if (other.site_billing_mode) {
|
|
data.push({
|
|
key: t('分站定价'),
|
|
value: formatSitePriceSnapshot(other, symbol, rate, t),
|
|
});
|
|
}
|
|
|
|
return data;
|
|
}, [rate, symbol, t]);
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto px-6 py-10">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-heading font-bold text-page mb-1">{t('logs.title')}</h1>
|
|
<p className="text-sm text-page-secondary">{t('logs.subtitle')}</p>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="glass rounded-2xl p-4 mb-6">
|
|
<div className="flex flex-wrap gap-3">
|
|
<div className="flex-1 min-w-[180px]">
|
|
<input
|
|
type="text"
|
|
value={modelFilter}
|
|
onChange={(e) => { setModelFilter(e.target.value); setPage(1); }}
|
|
className="input w-full"
|
|
placeholder={t('logs.filterModel')}
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-[180px]">
|
|
<input
|
|
type="text"
|
|
value={tokenFilter}
|
|
onChange={(e) => { setTokenFilter(e.target.value); setPage(1); }}
|
|
className="input w-full"
|
|
placeholder={t('logs.filterToken')}
|
|
/>
|
|
</div>
|
|
<button onClick={() => { setModelFilter(''); setTokenFilter(''); setPage(1); }} className="btn-secondary text-sm">
|
|
{t('logs.clearFilter')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="glass rounded-2xl overflow-hidden">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="w-8 h-8 border-2 border-brand-500/30 border-t-brand-500 rounded-full animate-spin" />
|
|
</div>
|
|
) : logs.length === 0 ? (
|
|
<div className="text-center py-16 text-page-secondary">
|
|
<p>{t('logs.noLogs')}</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Desktop table */}
|
|
<div className="hidden md:block overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-page-divider">
|
|
<th className="w-8"></th>
|
|
<th className="text-left px-4 py-3 font-medium text-page-secondary">{t('logs.time')}</th>
|
|
<th className="text-left px-4 py-3 font-medium text-page-secondary">{t('logs.model')}</th>
|
|
<th className="text-left px-4 py-3 font-medium text-page-secondary">{t('logs.token')}</th>
|
|
<th className="text-right px-4 py-3 font-medium text-page-secondary">{t('logs.promptTokens')}</th>
|
|
<th className="text-right px-4 py-3 font-medium text-page-secondary">{t('logs.completionTokens')}</th>
|
|
<th className="text-right px-4 py-3 font-medium text-page-secondary">{t('logs.cost')}</th>
|
|
<th className="text-right px-4 py-3 font-medium text-page-secondary">{t('logs.duration')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{logs.map((log, i) => {
|
|
const expandData = getExpandData(log);
|
|
const hasExpandData = expandData.length > 0;
|
|
const isExpanded = expandedRows[log.id];
|
|
return (
|
|
<React.Fragment key={i}>
|
|
<tr
|
|
className={`border-b border-page-divider last:border-0 hover:bg-page-surface transition-colors ${hasExpandData ? 'cursor-pointer' : ''}`}
|
|
onClick={() => hasExpandData && toggleRow(log.id)}
|
|
>
|
|
<td className="px-2 py-3 text-page-secondary">
|
|
{hasExpandData && (
|
|
isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-page-secondary text-xs whitespace-nowrap">{formatTime(log.created_at)}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="font-mono text-xs text-page">{log.model_name || '-'}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-xs text-page-secondary">{log.token_name || '-'}</td>
|
|
<td className="px-4 py-3 text-right font-mono text-xs text-page-label">{log.prompt_tokens?.toLocaleString() || '0'}</td>
|
|
<td className="px-4 py-3 text-right font-mono text-xs text-page-label">{log.completion_tokens?.toLocaleString() || '0'}</td>
|
|
<td className="px-4 py-3 text-right font-mono text-xs text-page-warning">
|
|
{log.quota > 0 ? `${symbol}${(log.quota / Q * rate).toFixed(6)}` : '-'}
|
|
</td>
|
|
<td className="px-4 py-3 text-right text-xs text-page-secondary">
|
|
{log.use_time > 0 ? `${log.use_time}s` : '-'}
|
|
</td>
|
|
</tr>
|
|
{isExpanded && hasExpandData && (
|
|
<tr className="border-b border-page-divider last:border-0 bg-page-surface/50">
|
|
<td colSpan="8" className="px-4 py-3">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 text-sm">
|
|
{expandData.map((item, idx) => (
|
|
<div key={idx} className="flex flex-col">
|
|
<span className="text-page-secondary text-xs">{item.key}</span>
|
|
<span className="font-medium text-page">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile cards */}
|
|
<div className="md:hidden divide-y divide-page-divider">
|
|
{logs.map((log, i) => {
|
|
const expandData = getExpandData(log);
|
|
const hasExpandData = expandData.length > 0;
|
|
const isExpanded = expandedRows[log.id];
|
|
return (
|
|
<div key={i} className="px-4 py-3 space-y-1.5">
|
|
<div
|
|
className={`flex items-center justify-between ${hasExpandData ? 'cursor-pointer' : ''}`}
|
|
onClick={() => hasExpandData && toggleRow(log.id)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{hasExpandData && (
|
|
isExpanded ? <ChevronDown className="w-4 h-4 text-page-secondary" /> : <ChevronRight className="w-4 h-4 text-page-secondary" />
|
|
)}
|
|
<span className="font-mono text-xs text-page font-medium">{log.model_name || '-'}</span>
|
|
</div>
|
|
<span className="font-mono text-xs text-page-warning">
|
|
{log.quota > 0 ? `${symbol}${(log.quota / Q * rate).toFixed(6)}` : '-'}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-[11px] text-page-secondary">
|
|
<span>{formatTime(log.created_at)}</span>
|
|
<span>{log.prompt_tokens || 0} / {log.completion_tokens || 0} tokens</span>
|
|
</div>
|
|
{log.token_name && (
|
|
<div className="text-[11px] text-page-muted">{log.token_name}</div>
|
|
)}
|
|
{isExpanded && hasExpandData && (
|
|
<div className="mt-3 pt-3 border-t border-page-divider/50 grid grid-cols-2 gap-x-4 gap-y-2">
|
|
{expandData.map((item, idx) => (
|
|
<div key={idx} className="flex flex-col">
|
|
<span className="text-page-secondary text-[10px]">{item.key}</span>
|
|
<span className="font-medium text-page text-xs">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{total > pageSize && (
|
|
<div className="flex items-center justify-between mt-6">
|
|
<p className="text-sm text-page-secondary">
|
|
{t('logs.showing', { from: (page - 1) * pageSize + 1, to: Math.min(page * pageSize, total), total })}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
disabled={page <= 1}
|
|
className="btn-secondary text-sm px-3 py-1.5 disabled:opacity-30"
|
|
>
|
|
{t('logs.prev')}
|
|
</button>
|
|
<span className="text-sm text-page-secondary px-2">
|
|
{page} / {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
|
disabled={page >= totalPages}
|
|
className="btn-secondary text-sm px-3 py-1.5 disabled:opacity-30"
|
|
>
|
|
{t('logs.next')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|