qlib/frontend/web/components/app-shell.tsx

"use client";

/** 应用外壳：桌面左侧导航栏 + 窄屏顶栏与抽屉（usePathname 高亮当前页）。 */
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Icon, type IconName } from "@/components/icons";

interface NavItem {
  href: string;
  label: string;
  icon: IconName;
}

const GROUPS: { title: string; items: NavItem[] }[] = [
  {
    title: "研究",
    items: [
      { href: "/", label: "总览", icon: "grid" },
      { href: "/stocks", label: "股票池", icon: "candles" },
      { href: "/selection", label: "股票筛选", icon: "target" },
      { href: "/factors", label: "因子研究", icon: "flask" },
      { href: "/factors/compose", label: "因子组合", icon: "layers" },
      { href: "/backtest", label: "选股回测", icon: "gauge" },
    ],
  },
  {
    title: "归档",
    items: [{ href: "/experiments", label: "实验", icon: "archive" }],
  },
];

function isActive(href: string, pathname: string): boolean {
  if (href === "/") return pathname === "/";
  if (href === "/factors") return pathname === "/factors";
  if (pathname === href || pathname.startsWith(href + "/")) return true;
  return false;
}

function Brand() {
  return (
    <Link href="/" className="brand" style={{ textDecoration: "none" }}>
      <span className="logo">
        <Icon name="logo" size={18} />
      </span>
      <span>
        qlib-platform
        <small>个人 A 股量化研究台</small>
      </span>
    </Link>
  );
}

function NavLinks({ pathname, onNavigate }: { pathname: string; onNavigate?: () => void }) {
  return (
    <>
      {GROUPS.map((g) => (
        <div key={g.title}>
          <div className="nav-label">{g.title}</div>
          {g.items.map((item) => {
            const active = isActive(item.href, pathname);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={active ? "nav-link active" : "nav-link"}
                aria-current={active ? "page" : undefined}
                onClick={onNavigate}
              >
                <span className="nav-ic">
                  <Icon name={item.icon} size={17} />
                </span>
                {item.label}
              </Link>
            );
          })}
        </div>
      ))}
    </>
  );
}

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  // 路由变化时收起抽屉
  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <div className="shell">
      <aside className="rail nav" aria-label="主导航">
        <Brand />
        <NavLinks pathname={pathname} />
        <div className="rail-foot">
          数据源 Tushare 首选 · 新浪校验兜底
          <br />
          数据库 MySQL · 研究引擎 Qlib
        </div>
      </aside>

      <div className="topbar">
        <button
          type="button"
          className="icon-btn"
          aria-label="打开导航菜单"
          aria-expanded={open}
          onClick={() => setOpen(true)}
          style={{ width: 36, height: 36 }}
        >
          <Icon name="filter" size={18} />
        </button>
        <Brand />
      </div>

      {open ? (
        <div className="scrim show" aria-hidden="true" onClick={() => setOpen(false)} />
      ) : null}
      <aside
        className={open ? "drawer nav open" : "drawer nav"}
        aria-label="移动端导航"
        aria-hidden={!open}
      >
        {open ? <NavLinks pathname={pathname} onNavigate={() => setOpen(false)} /> : null}
      </aside>

      <main className="content">
        <div className="page">{children}</div>
      </main>
    </div>
  );
}