summaryrefslogtreecommitdiff
path: root/frontend/src/components/ProjectMetricRow.svelte
blob: 66dfb93ac11eb4d0319202c3b8faa1c0e3a71c3a (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
<script lang="ts">
  import { aggregateDashboard } from '../lib/dashboardMetrics';
  import * as Card from '$lib/components/ui/card';

  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="grid grid-cols-2 md:grid-cols-4 gap-2.5 mb-4" role="list" aria-label="工作台概览">
    <Card.Root size="sm" data-testid="metric-card" role="listitem" class="gap-1 min-w-0 py-3">
      <span class="text-xs text-muted-foreground">我的项目</span>
      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">{metric.projectCount}</span>
    </Card.Root>
    <Card.Root size="sm" data-testid="metric-card" role="listitem" class="gap-1 min-w-0 py-3">
      <span class="text-xs text-muted-foreground">数据集</span>
      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">{metric.datasetCount}</span>
    </Card.Root>
    <Card.Root size="sm" data-testid="metric-card" role="listitem" class="gap-1 min-w-0 py-3">
      <span class="text-xs text-muted-foreground">回测</span>
      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">
        <span class="text-xs text-muted-foreground font-normal">运行中</span> {metric.runningRuns}
        <span class="text-xs text-muted-foreground font-normal">已完成</span> {metric.doneRuns}
      </span>
    </Card.Root>
    <Card.Root
      size="sm"
      data-testid="metric-card"
      role="listitem"
      class="gap-1 min-w-0 py-3"
      data-todo={metric.usageLabel === '-' ? 'TODO: /api/ai/usage 未返回 totals.requests(使用记录为空)时保持占位 -' : undefined}
    >
      <span class="text-xs text-muted-foreground">AI 用量</span>
      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">{metric.usageLabel}</span>
      {#if metric.usageTokens}<span class="text-xs text-muted-foreground tabular-nums">{metric.usageTokens}</span>{/if}
    </Card.Root>
  </div>