blob: 88dd8a5cef31ba45ec4f16c956f9324fe20e38d0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<script lang="ts">
import Page from '../components/Page.svelte';
import Status from '../components/Status.svelte';
import { getAIUsage } from '../lib/client';
import { extractStatusMessage } from '../lib/state';
import { fmtDateTime, fmtNum } from '../lib/format';
import type { AIUsage } from '../lib/types';
let usage = $state<AIUsage | null>(null);
let busy = $state(true);
let error = $state<string | null>(null);
$effect(() => {
void load();
});
async function load() {
busy = true;
error = null;
try {
usage = await getAIUsage();
} catch (e) {
error = extractStatusMessage(e);
} finally {
busy = false;
}
}
</script>
<Page title="AI 用量" subtitle="内部 POC 阶段的用量计量与限额参考。不含报价或计费">
<div class="stack">
<Status busy={busy} error={error} busyText="正在载入用量…" empty={null} />
{#if usage}
<div class="card">
<div class="row spaced">
<div>
<div class="mlabel">模型请求</div>
<div class="mvalue">{usage.totals?.requests ?? usage.items.length}</div>
</div>
<div>
<div class="mlabel">输入 tokens</div>
<div class="mvalue">{usage.totals?.input_tokens ?? '—'}</div>
</div>
<div>
<div class="mlabel">输出 tokens</div>
<div class="mvalue">{usage.totals?.output_tokens ?? '—'}</div>
</div>
</div>
{#if usage.internal_poc}
<p class="hint">内部 POC：请在当前配额内使用，不对实际价格负责；接受模型输出的决策需重新人工复核。</p>
{/if}
</div>
{#if usage.items.length > 0}
<div class="card" style="padding:0.4rem 0.6rem">
<table class="data">
<thead>
<tr>
<th>时间</th>
<th>模型</th>
<th>输入</th>
<th>输出</th>
<th>状态</th>
</tr>
</thead>
<tbody>
{#each usage.items as it, i (it.id)}
<tr>
<td>{fmtDateTime(it.created_at)}</td>
<td>{it.model}</td>
<td class="num">{it.input_tokens ?? '—'}</td>
<td class="num">{it.output_tokens ?? '—'}</td>
<td class="badge">{it.status ?? '—'}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<Status busy={false} empty="尚未使用 AI 建议" emptyHint="在项目「策略」标签发起一次 AI 修改，记录会出现在这里" />
{/if}
{/if}
</div>
</Page>
|
