blob: fe9be7fd312966b41450fcc1df71535475499377 (
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
|
<script lang="ts">
import type { Route } from '../lib/router';
import { projectsStore, projectOf, projectInvisible } from '../lib/listsStore.svelte';
import ProjectDataTab from '../pages/ProjectDataTab.svelte';
import ProjectStrategyTab from '../pages/ProjectStrategyTab.svelte';
import ProjectBacktestTab from '../pages/ProjectBacktestTab.svelte';
import ProjectResultsTab from '../pages/ProjectResultsTab.svelte';
interface Props {
route: Route;
}
let { route }: Props = $props();
// 极简面包屑：我的项目 / 项目名 / 当前标签
const isProject = $derived(route.name.startsWith('project-'));
const projectName = $derived(
projectOf(route.params.id)?.name ?? (projectInvisible(route.params.id) ? '不可见项目' : '加载中…')
);
const tabLabel = $derived(
(({ data: '数据', strategy: '策略', backtest: '回测', results: '结果' })[route.name.replace('project-', '')] ?? '')
);
$effect(() => {
if (isProject) void projectsStore.ensure(route.params.id).catch(() => undefined);
});
</script>
<nav class="crumbs" aria-label="面包屑">
<a href="#/projects">我的项目</a>
<span aria-hidden="true">/</span>
<span class="crumb-name">{projectName}</span>
<span aria-hidden="true">/</span>
<span class="crumb-tab">{tabLabel}</span>
</nav>
<!-- Layout is provided once by App.svelte; wrapping here produced the doubled sidebar bug. -->
{#if route.name === 'project-data'}
<ProjectDataTab projectId={route.params.id} />
{:else if route.name === 'project-strategy'}
<ProjectStrategyTab projectId={route.params.id} />
{:else if route.name === 'project-backtest'}
<ProjectBacktestTab projectId={route.params.id} />
{:else if route.name === 'project-results'}
<ProjectResultsTab projectId={route.params.id} runId={route.query.get('run') ?? undefined} />
{/if}
<style>
/* 极简面包屑（桌面 + 移动端顶部共用） */
.crumbs {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0 0.7rem;
font-size: 0.82rem;
color: var(--text-3);
min-width: 0;
}
.crumbs a {
color: var(--text-3);
transition: color 150ms ease;
}
.crumbs a:hover { color: var(--primary); text-decoration: none; }
.crumb-name {
color: var(--foreground);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 45vw;
}
.crumb-tab { color: var(--text-2); }
</style>
|
