feat(admin): 计费页加「余额硬拦截」开关 + 各租户「充值」按钮

闭合积分环的配置/操作端,接到 P4 后端:
- 计费规则区:加「余额硬拦截」开关(credit_enforce),与汇率合成一个「保存规则」。
- 用量观测·租户排行:每行加「充值」按钮(正=充值、负=校正),调 /admin/credits/grant,
  充值后即时刷新余额。
- api:getBillingConfig/saveBillingConfig 带 credit_enforce;新增 grantCredits。

live 验证(preview):开关渲染+可存;点公司A「充值 10」→余额 5.92→15.92、账本落对租户;
tsc + 41 vitest 全过。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-07 13:53:52 +08:00
parent 93741a5504
commit b46382817c
3 changed files with 89 additions and 30 deletions
+20 -6
View File
@@ -143,17 +143,21 @@ export async function savePricing(p: Pricing): Promise<void> {
}
}
// —— 全局计费规则(token→积分汇率)——
export async function getBillingConfig(): Promise<{ tokens_per_credit: number }> {
// —— 全局计费规则(token→积分汇率 + 硬拦截开关)——
export async function getBillingConfig(): Promise<{ tokens_per_credit: number; credit_enforce: boolean }> {
const res = guard(await fetch(`${ADMIN}/billing-config`, { headers: authHeaders() }));
if (!res.ok) throw new Error(`billing config failed: ${res.status}`);
const d = (await res.json()) as { tokens_per_credit?: string };
return { tokens_per_credit: Number(d.tokens_per_credit) || 1000 }; // 空/未设 → 回退默认 1000
const d = (await res.json()) as { tokens_per_credit?: string; credit_enforce?: boolean };
return { tokens_per_credit: Number(d.tokens_per_credit) || 1000, credit_enforce: !!d.credit_enforce }; // 空/未设 → 回退默认
}
export async function saveBillingConfig(tokensPerCredit: number): Promise<void> {
export async function saveBillingConfig(tokensPerCredit: number, creditEnforce: boolean): Promise<void> {
const res = guard(
await fetch(`${ADMIN}/billing-config`, { method: "PUT", headers: authHeaders(true), body: JSON.stringify({ tokens_per_credit: tokensPerCredit }) }),
await fetch(`${ADMIN}/billing-config`, {
method: "PUT",
headers: authHeaders(true),
body: JSON.stringify({ tokens_per_credit: tokensPerCredit, credit_enforce: creditEnforce }),
}),
);
if (!res.ok) {
const d = (await res.json().catch(() => ({}))) as { error?: string };
@@ -161,6 +165,16 @@ export async function saveBillingConfig(tokensPerCredit: number): Promise<void>
}
}
// —— 充值/发放积分(正=充值,负=校正)——
export async function grantCredits(tenantId: string, credits: number, memo: string): Promise<number> {
const res = guard(
await fetch(`${ADMIN}/credits/grant`, { method: "POST", headers: authHeaders(true), body: JSON.stringify({ tenant_id: tenantId, credits, memo }) }),
);
const d = (await res.json().catch(() => ({}))) as { balance_micro?: number; error?: string };
if (!res.ok) throw new Error(d.error ?? `grant failed: ${res.status}`);
return d.balance_micro ?? 0;
}
// gatewayOnline 用公开的 /healthz 探活(不受鉴权影响)。
export async function gatewayOnline(): Promise<boolean> {
try {
+39 -21
View File
@@ -18,9 +18,10 @@ interface Row {
export function BillingRules({ onSaved }: { onSaved?: () => void }) {
const [rows, setRows] = useState<Row[]>([]);
const [rate, setRate] = useState(""); // tokens_per_credit
const [rateDirty, setRateDirty] = useState(false);
const [rateSaving, setRateSaving] = useState(false);
const [rateMsg, setRateMsg] = useState("");
const [enforce, setEnforce] = useState(false); // 硬拦截开关
const [cfgDirty, setCfgDirty] = useState(false);
const [cfgSaving, setCfgSaving] = useState(false);
const [cfgMsg, setCfgMsg] = useState("");
const [loading, setLoading] = useState(true);
const [err, setErr] = useState("");
@@ -45,7 +46,8 @@ export function BillingRules({ onSaved }: { onSaved?: () => void }) {
};
setRows([...chat.map(mk), ...emb.map(mk)]);
setRate(String(cfg.tokens_per_credit));
setRateDirty(false);
setEnforce(cfg.credit_enforce);
setCfgDirty(false);
} catch (e) {
setErr((e as Error).message);
} finally {
@@ -75,23 +77,23 @@ export function BillingRules({ onSaved }: { onSaved?: () => void }) {
}
};
const saveRate = async () => {
const saveConfig = async () => {
const n = Number(rate);
if (!(n > 0)) {
setRateMsg("汇率必须 > 0");
setCfgMsg("汇率必须 > 0");
return;
}
setRateSaving(true);
setRateMsg("");
setCfgSaving(true);
setCfgMsg("");
try {
await saveBillingConfig(n);
setRateDirty(false);
setRateMsg("✓ 已保存");
await saveBillingConfig(n, enforce);
setCfgDirty(false);
setCfgMsg("✓ 已保存");
onSaved?.();
} catch (e) {
setRateMsg((e as Error).message);
setCfgMsg((e as Error).message);
} finally {
setRateSaving(false);
setCfgSaving(false);
}
};
@@ -108,8 +110,8 @@ export function BillingRules({ onSaved }: { onSaved?: () => void }) {
<span className="rounded bg-violet-50 px-2 py-0.5 text-[10px] font-medium text-violet-700"></span>
</div>
{/* 全局 token→积分 汇率 */}
<div className="mb-5 flex flex-wrap items-end gap-3 rounded-lg border border-violet-100 bg-violet-50/40 p-3">
{/* 全局token→积分 汇率 + 硬拦截开关 */}
<div className="mb-5 flex flex-wrap items-end gap-5 rounded-lg border border-violet-100 bg-violet-50/40 p-3">
<div>
<label className="block text-[11px] font-medium text-gray-500">token </label>
<div className="mt-1 flex items-center gap-2 text-sm text-gray-600">
@@ -120,22 +122,38 @@ export function BillingRules({ onSaved }: { onSaved?: () => void }) {
value={rate}
onChange={(e) => {
setRate(e.target.value);
setRateDirty(true);
setRateMsg("");
setCfgDirty(true);
setCfgMsg("");
}}
className="w-28 rounded border px-2 py-1 text-right font-mono text-xs focus:border-violet-500 focus:outline-none"
/>
<span className="text-xs text-gray-400">token = 1 1 token </span>
</div>
</div>
<div>
<label className="block text-[11px] font-medium text-gray-500"></label>
<label className="mt-1 flex cursor-pointer items-center gap-2 text-sm text-gray-600">
<input
type="checkbox"
checked={enforce}
onChange={(e) => {
setEnforce(e.target.checked);
setCfgDirty(true);
setCfgMsg("");
}}
className="h-4 w-4 accent-violet-600"
/>
<span className="text-xs text-gray-400"> 0 =</span>
</label>
</div>
<button
onClick={() => void saveRate()}
disabled={!rateDirty || rateSaving}
onClick={() => void saveConfig()}
disabled={!cfgDirty || cfgSaving}
className="rounded bg-violet-600 px-3 py-1 text-xs text-white hover:bg-violet-700 disabled:opacity-40"
>
{rateSaving ? "保存中…" : "保存汇率"}
{cfgSaving ? "保存中…" : "保存规则"}
</button>
{rateMsg && <span className={`text-[11px] ${rateMsg.startsWith("✓") ? "text-emerald-600" : "text-rose-600"}`}>{rateMsg}</span>}
{cfgMsg && <span className={`text-[11px] ${cfgMsg.startsWith("✓") ? "text-emerald-600" : "text-rose-600"}`}>{cfgMsg}</span>}
</div>
{/* 每模型单价 + 积分权重 */}
+30 -3
View File
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState, type ReactNode } from "react";
import { adminUsage, type UsageReport, type UsageTenantSum, type UsageDay } from "../api";
import { adminUsage, grantCredits, type UsageReport, type UsageTenantSum, type UsageDay } from "../api";
import { BillingRules } from "../components/BillingRules";
// 管理端「用量 & 计费」= 计费闭环一页:顶部配「规则」(单价/积分权重/汇率),下方看「结果」(用量观测)。
@@ -68,6 +68,23 @@ export function UsagePage() {
const series = useMemo(() => (report ? fillDays(report.trend, days) : []), [report, days]);
const [granting, setGranting] = useState("");
const doGrant = async (tenantId: string, name: string) => {
const s = window.prompt(`给「${name}」充值积分(正=充值,负=扣减/校正)`, "100");
if (s === null) return;
const n = Number(s);
if (!n) return;
setGranting(tenantId);
try {
await grantCredits(tenantId, n, "admin 手动充值");
await load();
} catch (e) {
window.alert((e as Error).message);
} finally {
setGranting("");
}
};
if (loading) return <div className="text-sm text-gray-400"></div>;
if (err) return <div className="text-sm text-rose-500">{err}</div>;
if (!report) return null;
@@ -170,7 +187,8 @@ export function UsagePage() {
<th className="py-2 pr-3 text-right font-medium">Token</th>
<th className="py-2 pr-3 text-right font-medium"></th>
<th className="py-2 pr-3 text-right font-medium"></th>
<th className="py-2 text-right font-medium"></th>
<th className="py-2 pr-3 text-right font-medium"></th>
<th className="py-2 text-right font-medium"></th>
</tr>
</thead>
<tbody>
@@ -185,7 +203,16 @@ export function UsagePage() {
<td className="py-2 pr-3 text-right tabular-nums text-gray-500">{int(r.total_tok)}</td>
<td className="py-2 pr-3 text-right tabular-nums text-gray-500">{money(r.cost_micros)}</td>
<td className="py-2 pr-3 text-right tabular-nums text-gray-500">{int(r.task_count)}</td>
<td className={`py-2 text-right tabular-nums ${r.balance_micro >= 0 ? "text-gray-800" : "text-rose-500"}`}>{credits(r.balance_micro)}</td>
<td className={`py-2 pr-3 text-right tabular-nums ${r.balance_micro >= 0 ? "text-gray-800" : "text-rose-500"}`}>{credits(r.balance_micro)}</td>
<td className="py-2 text-right">
<button
onClick={() => void doGrant(r.tenant_id, r.name || r.tenant_id)}
disabled={granting === r.tenant_id}
className="rounded border border-violet-200 px-2.5 py-1 text-xs text-violet-600 hover:bg-violet-50 disabled:opacity-40"
>
{granting === r.tenant_id ? "…" : "充值"}
</button>
</td>
</tr>
))}
</tbody>