summaryrefslogtreecommitdiff
path: root/frontend/src/pages/ProjectPage.svelte
blob: 61db8741a1ae6648dbbcccc9cf7c31954db989f5 (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 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="flex items-center gap-1.5 py-1 pb-2 text-sm text-muted-foreground min-w-0" aria-label="面包屑">
  <a class="text-muted-foreground hover:text-primary hover:no-underline" href="#/projects">我的项目</a>
  <span aria-hidden="true">/</span>
  <span class="font-semibold text-foreground truncate max-w-[45vw]">{projectName}</span>
  <span aria-hidden="true">/</span>
  <span>{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}