blob: 79806223c3079421add2dee72379a809bf38b80f (
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
|
<script lang="ts">
// 首页指标卡行（leader round2 spec §1）
// 数据通过 props 注入（ProjectsPage 拉取并共享聚合输入，见 dashboardMetrics.ts）。
import { aggregateDashboard } from '../lib/dashboardMetrics';
interface Props {
/** 注入的聚合输入；null/undefined 视为"取不到"（占位 -） */
projects: { id: string }[] | null;
datasets: { id: string }[] | null;
runs: { id: string; status: string; result?: unknown }[] | null;
usage: { totals?: { input_tokens?: number; output_tokens?: number; requests?: number } } | null;
}
let { projects, datasets, runs, usage }: Props = $props();
const metric = $derived(aggregateDashboard({ projects, datasets, runs, usage }));
</script>
<div class="metric-row" role="list" aria-label="工作台概览">
<div class="metric-card" data-testid="metric-card" role="listitem">
<span class="mlabel">我的项目</span>
<span class="mvalue">{metric.projectCount}</span>
</div>
<div class="metric-card" data-testid="metric-card" role="listitem">
<span class="mlabel">数据集</span>
<span class="mvalue">{metric.datasetCount}</span>
</div>
<div class="metric-card" data-testid="metric-card" role="listitem">
<span class="mlabel">回测</span>
<span class="mvalue">
<span class="run-split"><i>运行中</i> {metric.runningRuns}</span>
<span class="run-split"><i>已完成</i> {metric.doneRuns}</span>
</span>
</div>
<div
class="metric-card"
data-testid="metric-card"
role="listitem"
data-todo={metric.usageLabel === '-' ? 'TODO: /api/ai/usage 未返回 totals.requests（使用记录为空）时保持占位 -' : undefined}
>
<span class="mlabel">AI 用量</span>
<span class="mvalue">{metric.usageLabel}</span>
{#if metric.usageTokens}<span class="mvalue-sub">{metric.usageTokens}</span>{/if}
</div>
</div>
<style>
.metric-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.6rem;
margin-bottom: 1.1rem;
}
.metric-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: calc(var(--radius) * 1.4);
padding: 0.65rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
transition: box-shadow 150ms ease, transform 150ms ease;
}
/* 桌面端 hover 轻微上浮阴影 */
@media (hover: hover) and (min-width: 768px) {
.metric-card:hover {
box-shadow: var(--shadow);
transform: translateY(-1px);
}
}
.metric-card .mvalue {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
font-variant-numeric: tabular-nums;
line-height: 1.2;
overflow-wrap: anywhere;
}
.run-split { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.run-split i { font-style: normal; font-size: 0.68rem; color: var(--text-3); font-weight: 500; }
.mvalue-sub { font-size: 0.72rem; color: var(--text-3); }
</style>
|
