chengcheng
8beb8501fa
Some checks failed
ci / verify (pull_request) Failing after 8s
阻止上游提交状态不明的任务被租约接管后重复执行，并为人工复核保留可操作的结算记录。 将生产提交绑定到当前估价签名，统一复用预处理快照，并补强规则形状、定点溢出与历史规则兼容校验。 已通过 PostgreSQL 16 集成测试、Go 全量测试与静态检查、前端测试与构建、OpenAPI、依赖审计、镜像、迁移、流水线和 SemVer 门禁。
163 lines
7.6 KiB
TypeScript
163 lines
7.6 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
||
import { AlertTriangle, ReceiptText, RefreshCw, RotateCcw } from 'lucide-react';
|
||
import type { BillingSettlement } from '@easyai-ai-gateway/contracts';
|
||
import { listBillingSettlements, retryBillingSettlement } from '../../api';
|
||
import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmDialog, Select, Table, TableCell, TableHead, TableRow } from '../../components/ui';
|
||
|
||
export function BillingSettlementsPanel(props: { token: string }) {
|
||
const [items, setItems] = useState<BillingSettlement[]>([]);
|
||
const [status, setStatus] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [retrying, setRetrying] = useState('');
|
||
const [confirming, setConfirming] = useState<BillingSettlement | null>(null);
|
||
const [message, setMessage] = useState('');
|
||
|
||
const load = useCallback(async (signal?: AbortSignal) => {
|
||
setLoading(true);
|
||
setMessage('');
|
||
try {
|
||
const result = await listBillingSettlements(props.token, { status, pageSize: 100, signal });
|
||
setItems(result.items);
|
||
} catch (error) {
|
||
if (signal?.aborted) return;
|
||
setMessage(error instanceof Error ? error.message : '结算队列加载失败');
|
||
} finally {
|
||
if (!signal?.aborted) setLoading(false);
|
||
}
|
||
}, [props.token, status]);
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController();
|
||
void load(controller.signal);
|
||
return () => controller.abort();
|
||
}, [load]);
|
||
|
||
async function retry(item: BillingSettlement) {
|
||
setRetrying(item.id);
|
||
setMessage('');
|
||
try {
|
||
await retryBillingSettlement(props.token, item.id);
|
||
setMessage(`结算 ${shortId(item.id)} 已重新进入队列`);
|
||
await load();
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : '结算重试失败');
|
||
} finally {
|
||
setRetrying('');
|
||
}
|
||
}
|
||
|
||
const exceptions = items.filter((item) => item.status === 'retryable_failed' || item.status === 'manual_review').length;
|
||
return (
|
||
<div className="pageStack">
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="identityHeaderTitle">
|
||
<div className="iconBox"><ReceiptText size={17} /></div>
|
||
<div>
|
||
<CardTitle>计费结算</CardTitle>
|
||
<p className="mutedText">任务结果与账务状态相互独立；异常记录可审计重试，不会重新调用上游。</p>
|
||
</div>
|
||
<Badge variant={exceptions ? 'warning' : 'secondary'}>{exceptions ? `${exceptions} 条异常` : `${items.length} 条`}</Badge>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="tableActions">
|
||
<Select size="sm" aria-label="结算状态" value={status} onChange={(event) => setStatus(event.target.value)}>
|
||
<option value="">全部状态</option>
|
||
<option value="pending">待处理</option>
|
||
<option value="processing">处理中</option>
|
||
<option value="retryable_failed">等待重试</option>
|
||
<option value="manual_review">人工复核</option>
|
||
<option value="completed">已完成</option>
|
||
</Select>
|
||
<Button type="button" size="sm" variant="outline" disabled={loading} onClick={() => void load()}>
|
||
<RefreshCw size={14} />{loading ? '刷新中' : '刷新'}
|
||
</Button>
|
||
</div>
|
||
{message && <p className="formMessage">{message}</p>}
|
||
</CardContent>
|
||
</Card>
|
||
{items.length ? (
|
||
<Table density="compact" className="identityDataTable">
|
||
<TableRow>
|
||
<TableHead>任务 / 动作</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>金额</TableHead>
|
||
<TableHead>尝试</TableHead>
|
||
<TableHead>异常分类</TableHead>
|
||
<TableHead>操作</TableHead>
|
||
</TableRow>
|
||
{items.map((item) => (
|
||
<TableRow key={item.id}>
|
||
<TableCell><span className="identityTableName"><strong>{shortId(item.taskId)}</strong><small>{item.action === 'settle' ? '扣费' : '释放冻结'} · {shortId(item.id)}</small></span></TableCell>
|
||
<TableCell><Badge variant={statusVariant(item.status)}>{statusLabel(item.status)}</Badge></TableCell>
|
||
<TableCell>{formatAmount(item.amount)} {item.currency}</TableCell>
|
||
<TableCell>{item.attempts} / 20</TableCell>
|
||
<TableCell>{item.lastErrorCode || item.manualReviewReason || '-'}</TableCell>
|
||
<TableCell>
|
||
{(item.status === 'retryable_failed' || item.status === 'manual_review') ? (
|
||
<Button type="button" size="xs" variant="outline" disabled={retrying === item.id} onClick={() => setConfirming(item)}>
|
||
<RotateCcw size={13} />{retrying === item.id ? '提交中' : retryActionLabel(item)}
|
||
</Button>
|
||
) : '-'}
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</Table>
|
||
) : (
|
||
<Card><CardContent className="emptyState"><AlertTriangle size={18} /><strong>{loading ? '正在加载结算队列' : '暂无结算记录'}</strong><span>可切换状态筛选，查看待处理与人工复核记录。</span></CardContent></Card>
|
||
)}
|
||
<ConfirmDialog
|
||
open={Boolean(confirming)}
|
||
loading={Boolean(confirming && retrying === confirming.id)}
|
||
title={confirming ? `${retryActionLabel(confirming)}这条计费记录？` : '处理计费记录？'}
|
||
description={confirming ? retryActionDescription(confirming) : ''}
|
||
confirmLabel={confirming ? retryActionLabel(confirming) : '确认'}
|
||
onCancel={() => setConfirming(null)}
|
||
onConfirm={() => {
|
||
if (!confirming) return;
|
||
const item = confirming;
|
||
void retry(item).finally(() => setConfirming(null));
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function statusLabel(status: string) {
|
||
return ({ pending: '待处理', processing: '处理中', retryable_failed: '等待重试', manual_review: '人工复核', completed: '已完成' } as Record<string, string>)[status] ?? status;
|
||
}
|
||
|
||
function statusVariant(status: string): 'secondary' | 'warning' | 'destructive' | 'success' | 'outline' {
|
||
if (status === 'completed') return 'success';
|
||
if (status === 'manual_review') return 'destructive';
|
||
if (status === 'retryable_failed') return 'warning';
|
||
if (status === 'processing') return 'outline';
|
||
return 'secondary';
|
||
}
|
||
|
||
function formatAmount(value: number) {
|
||
return new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 9 }).format(value);
|
||
}
|
||
|
||
function retryActionLabel(item: BillingSettlement) {
|
||
if (item.status !== 'manual_review') return '重试';
|
||
if (item.manualReviewReason === 'upstream_submission_unknown' && item.action === 'release') return '确认释放';
|
||
if (item.manualReviewReason === 'historical_success_without_charge' && item.action === 'settle') return '确认结算';
|
||
return '重新入队';
|
||
}
|
||
|
||
function retryActionDescription(item: BillingSettlement) {
|
||
if (item.manualReviewReason === 'upstream_submission_unknown' && item.action === 'release') {
|
||
return '上游提交结果不明。确认后只会释放当前冻结，不会再次调用上游；请先完成外部核查。';
|
||
}
|
||
if (item.manualReviewReason === 'historical_success_without_charge' && item.action === 'settle') {
|
||
return `确认后将按历史快照结算 ${formatAmount(item.amount)} ${item.currency}，不会重新调用上游。`;
|
||
}
|
||
return '确认后会将该记录重新放入结算队列，不会重新调用上游。';
|
||
}
|
||
|
||
function shortId(value: string) {
|
||
return value.length > 12 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;
|
||
}
|