diff options
Diffstat (limited to 'frontend/src/pages/RunsPage.svelte')
| -rw-r--r-- | frontend/src/pages/RunsPage.svelte | 26 |
1 files changed, 16 insertions, 10 deletions
diff --git a/frontend/src/pages/RunsPage.svelte b/frontend/src/pages/RunsPage.svelte index 77626b5..ce66a25 100644 --- a/frontend/src/pages/RunsPage.svelte +++ b/frontend/src/pages/RunsPage.svelte @@ -103,10 +103,16 @@ </script> <Page title="实验记录" subtitle="查看与选择比较不同回测；结果仅展示真实完成任务的数据" wide> - <div class="flex flex-col gap-3"> - <Status busy={busy} error={error} busyText="正在加载实验…" empty={null} /> - - {#if !busy && !error && runs.length === 0} + <div class="flex flex-col gap-4 md:gap-6"> + {#if busy} + <Status busy skeletonRows={4} busyText="正在加载实验…" empty={null} /> + {:else if error} + <Status busy={false} {error} empty={null}> + {#snippet errorCta()} + <Button onclick={load}>重新加载</Button> + {/snippet} + </Status> + {:else if runs.length === 0} <Status busy={false} empty="还没有实验记录" emptyHint="进入项目「回测」标签发起一次回测后记录会出现在这里" /> {/if} @@ -152,12 +158,12 @@ {/each} </Table.Body> </Table.Root> - <p class="text-sm text-muted-foreground p-2">最多同时选中 4 个已完成的回测用于比较。</p> + <p class="text-xs text-muted-foreground p-4">最多同时选中 4 个已完成的回测用于比较。</p> </Card.Root> {#if selected.length > 0} - <Card.Root size="sm" class="p-4 flex flex-col gap-3 overflow-x-auto"> - <h2 class="text-lg font-semibold">条件差异</h2> + <Card.Root size="sm" class="p-4 flex flex-col gap-4 overflow-x-auto"> + <h2 class="text-lg font-semibold m-0">条件差异</h2> <Table.Root> <Table.Header> <Table.Row> @@ -179,10 +185,10 @@ </Card.Root> {#if comparable.length > 1} - <Card.Root size="sm" class="p-4 flex flex-col gap-3"> - <h2 class="text-lg font-semibold">收益曲线对齐比较（首日归一）</h2> + <Card.Root size="sm" class="p-4 flex flex-col gap-4"> + <h2 class="text-lg font-semibold m-0">收益曲线对齐比较（首日归一）</h2> <Chart data={compare.data} series={compare.series} ariaLabel="多回测对比曲线" height={340} /> - <p class="text-sm text-muted-foreground">起点对齐为 1，仅叠加不同起点的曲线时只在各自区间内展示。</p> + <p class="text-xs text-muted-foreground">起点对齐为 1，仅叠加不同起点的曲线时只在各自区间内展示。</p> </Card.Root> {:else} <Status busy={false} empty="请再选中至少一个已完成的回测以展示比较" /> |