path: root/frontend/src/components/Layout.svelte

<script lang="ts">
  import type { Route } from '../lib/router';
  import { go } from '../lib/router';
  import { session } from '../lib/session.svelte';
  import { postLogout } from '../lib/client';
  import { projectsStore, projectOf, projectInvisible } from '../lib/listsStore.svelte';
  import { Button } from '$lib/components/ui/button';

  interface Props {
    route: Route;
    children?: import('svelte').Snippet;
  }
  let { route, children }: Props = $props();

  const topLeft: { name: string; label: string }[] = [
    { name: 'projects', label: '我的项目' },
    { name: 'datasets', label: '数据集' },
    { name: 'runs', label: '实验记录' },
    { name: 'usage', label: 'AI 用量' }
  ];

  const bottom: { name: string; label: string }[] =
    session.me?.role === 'admin'
      ? [
          { name: 'account', label: '账户与安全' },
          { name: 'admin', label: '管理员' }
        ]
      : [{ name: 'account', label: '账户与安全' }];

  async function logout() {
    await postLogout().catch(() => undefined);
    session.set(null);
    // drop cached projects/failure marks: the next session on this browser
    // must not see (or be marked invisible by) the previous user's projects
    projectsStore.clear();
    go('/login');
  }

  const isProject = $derived(route.name.startsWith('project-'));
  const projectTab = $derived(isProject ? route.name.replace('project-', '') : '');
  const projectNav: [string, string][] = [
    ['data', '数据'],
    ['strategy', '策略'],
    ['backtest', '回测'],
    ['results', '结果']
  ];
  const activeProject = $derived(isProject ? projectOf(route.params.id) : null);
  const projectHidden =
    $derived(isProject && !activeProject && projectInvisible(route.params.id));
  // Deep link / first navigation into a project tab: the sidebar store may not
  // contain the project yet (ProjectsPage was never visited). Fetch it once so
  // the 当前项目 name resolves without waiting for the tab's own lifecycle.
  $effect(() => {
    const id = isProject ? route.params.id : null;
    if (id && !activeProject) void projectsStore.ensure(id).catch(() => undefined);
  });

  // ---- 移动端导航重设计（375 → 底部 Tab Bar）----
  // 小型 matchMedia 反应式：jsdom 没有布局，真实渲染断言
  // （mobileTabbar.test.ts）通过 matchMedia stub 驱动 phone/桌面两种形态。
  import { onDestroy } from 'svelte';
  let phoneMode = $state(false);
  let mqListener: ((e: MediaQueryListEvent) => void) | null = null;
  $effect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) {
      phoneMode = false;
      return;
    }
    const mq = window.matchMedia('(max-width: 767px)');
    phoneMode = !!mq.matches;
    const fn: (e: MediaQueryListEvent) => void = (e) => (phoneMode = e.matches);
    if (mq.addEventListener) mq.addEventListener('change', fn);
    else mq.addListener?.(fn as never);
    mqListener = fn;
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', mqListener as never);
      else mq.removeListener?.(mqListener as never);
      mqListener = null;
    };
  });

  const mobile = $derived(phoneMode);

  const tabs: { name: string; label: string; icon: 'project' | 'dataset' | 'run' | 'user' }[] = [
    { name: 'projects', label: '我的项目', icon: 'project' },
    { name: 'datasets', label: '数据集', icon: 'dataset' },
    { name: 'runs', label: '实验记录', icon: 'run' },
    { name: 'account', label: '我的', icon: 'user' }
  ];
  const activeTab = $derived(
    isProject || route.name === 'admin' ? 'projects' : route.name === 'account' ? 'account' : route.name
  );
</script>

<div class="layout">
  {#if mobile}
    <header class="topbar" data-testid="mobile-topbar">
      <span class="topbar-brand">策研 <em>Strategy Lab</em></span>
      {#if isProject}
        <span class="topbar-crumb" aria-label="当前项目">{activeProject?.name ?? '项目'} · {projectNav.find(([t]) => t === projectTab)?.[1] ?? ''}</span>
      {/if}
      <button class="topbar-me" onclick={() => go('/account')} aria-label="账户与安全">
        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </button>
    </header>
  {/if}

  <aside class="sidebar" aria-label="全局导航">
    <a href="#/projects" class="brand">
      <span class="brand-mark" aria-hidden="true"></span>
      <span class="brand-text">策研 <span class="brand-sub">Strategy Lab</span></span>
    </a>

    {#if isProject}
      <div class="projctx">
        <div class="nav-title">当前项目</div>
        <div class="projname">{activeProject?.name ?? (projectHidden ? '不可见项目' : '加载中…')}</div>
        {#each projectNav as [t, label] (t)}
          <a
            class="navlink"
            href={`#/projects/${route.params.id}/${t}`}
            aria-current={projectTab === t ? 'page' : undefined}
          >{label}</a>
        {/each}
        <div class="divider" aria-hidden="true"></div>
      </div>
    {/if}

    <div class="nav-title">工作台</div>
    {#each topLeft as item (item.name)}
      <a class="navlink" href={`#/${item.name}`} aria-current={route.name === item.name ? 'page' : undefined}>
        {item.label}
      </a>
    {/each}

    <div class="push"></div>
    <div class="nav-title">账户</div>
    {#each bottom as item (item.name)}
      <a class="navlink" href={`#/${item.name}`} aria-current={route.name === item.name ? 'page' : undefined}>
        {item.label}
      </a>
    {/each}
    {#if session.me}
      <div class="me">
        <span class="me-name">{session.me.name}{session.me.role === 'admin' ? ' · 管理员' : ''}</span>
        <Button variant="ghost" size="sm" onclick={() => logout()}>退出</Button>
      </div>
    {/if}
  </aside>

  <main class="content" aria-label="主内容">
    {@render children?.()}
  </main>
</div>

{#if mobile}
  <nav class="tabbar" data-testid="mobile-tabbar" aria-label="底部导航">
    {#each tabs as t (t.name)}
      <a class="item" data-tab={t.name} href={`#/${t.name}`} aria-current={activeTab === t.name ? 'page' : undefined}>
        {#if t.icon === 'project'}
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 10h18" stroke="currentColor" stroke-width="2"/></svg>
        {:else if t.icon === 'dataset'}
          <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="6" rx="8" ry="3" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
        {:else if t.icon === 'run'}
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20v-8" stroke="currentColor" stroke-width="2"/><path d="M9 20V4" stroke="currentColor" stroke-width="2"/><path d="M14 20v-6" stroke="currentColor" stroke-width="2"/><path d="M19 20V9" stroke="currentColor" stroke-width="2"/></svg>
        {:else}
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
        {/if}
        <span class="tab-label">{t.label}</span>
      </a>
    {/each}
  </nav>
{/if}

<style>
  .layout {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: 100vh;
  }
  .sidebar {
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.4rem;
    color: var(--foreground);
  }
  .brand:hover { text-decoration: none; }
  .brand-mark {
    width: 22px;
    height: 22px;
    border-radius: calc(var(--radius) * 1.2);
    background: var(--primary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .brand-mark::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: linear-gradient(
      to top,
      transparent 4px,
      #f0fdfa 4px,
      #f0fdfa 7px,
      transparent 7px,
      transparent 11px,
      #f0fdfa 11px,
      #f0fdfa 15px,
      transparent 15px
    ) left/ 3px 100% no-repeat;
    opacity: 0.9;
  }
  .brand-text { font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; }
  .brand-sub { color: var(--text-3); font-weight: 500; font-size: 0.68rem; display: block; }
  .nav-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    padding: 0.35rem 0.5rem 0.1rem;
    font-weight: 700;
  }
  .navlink {
    display: block;
    padding: 0.32rem 0.55rem;
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .navlink:hover { background: var(--secondary); text-decoration: none; color: var(--foreground); }
  .navlink[aria-current='page'] {
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
  }
  .projctx .navlink { font-size: 0.85rem; }
  .projname {
    font-weight: 600;
    padding: 0 0.6rem 0.25rem;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    color: var(--foreground);
  }
  .divider {
    height: 1px;
    background: var(--border);
    margin: 0.6rem 0.3rem;
  }
  .push { flex: 1; min-height: 1rem; }
  .me {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem;
    background: var(--secondary);
    border-radius: var(--radius);
    font-size: 0.84rem;
  }
  .me-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
    min-width: 0;
  }
  .content {
    padding: 1.5rem 2rem 3rem;
    max-width: 1360px;
    width: 100%;
    /* grid/flex children default to min-content sizing; without min-width:0 a
       wide table cell propagates min-content into the column and inflates the
       whole document (375px probe measured 552px). */
    min-width: 0;
  }
  @media (max-width: 900px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
      position: static;
      height: auto;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 1px solid var(--border);
      border-right: none;
      gap: 0.25rem;
      min-width: 0;
    }
    .nav-title, .divider, .push { display: none; }
    .navlink { padding: 0.45rem 0.7rem; }
    /* the project tab row must wrap, not force one long line */
    .projctx { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; }
    .projname { max-width: 100%; overflow-wrap: anywhere; }
    .content { padding: 1.1rem 1rem 3rem; max-width: 100%; }
  }

  /* ---- 移动端形态（≤767px）：侧栏隐藏，底部 Tab Bar + 极窄标题栏 ---- */
  @media (max-width: 767px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; }
    .content { padding: 0.9rem 0.9rem 5.2rem; max-width: 100%; }
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.6rem;
    padding: 0 0.9rem;
    background: color-mix(in srgb, var(--sidebar) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
  }
  .topbar-brand { font-weight: 700; color: var(--foreground); white-space: nowrap; }
  .topbar-brand em { font-style: normal; font-weight: 500; font-size: 0.62rem; color: var(--text-3); display: block; }
  .topbar-crumb {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--foreground);
    text-align: center;
    font-weight: 600;
  }
  .topbar-me {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 999px;
    color: var(--text-2);
    transition: background-color 150ms ease, color 150ms ease;
  }
  .topbar-me:hover { background: var(--secondary); color: var(--primary); }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    min-height: 3.4rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(8px);
  }
  .tabbar .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    flex: 1;
    min-height: 3.4rem;
    color: var(--text-3);
    text-decoration: none;
    font-size: 0.66rem;
    transition: color 150ms ease, background-color 150ms ease;
  }
  .tabbar .item svg { width: 22px; height: 22px; display: block; }
  .tabbar .item:hover { color: var(--text-2); text-decoration: none; }
  /* 选中态：青绿强调色 */
  .tabbar .item[aria-current='page'] { color: var(--primary); font-weight: 600; }
  .tabbar .item[aria-current='page'] svg { color: var(--primary); }
</style>