97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import Link from "next/link";
|
||
import type { ReactNode } from "react";
|
||
import { Settings } from "lucide-react";
|
||
|
||
import type { ActiveNav } from "@/lib/nav/items";
|
||
import { buttonClass } from "@/lib/ui/variants";
|
||
import { AiToolbar } from "./AiToolbar";
|
||
import { LeftNav } from "./LeftNav";
|
||
import { NavDrawer } from "./NavDrawer";
|
||
import { ThemeToggle } from "./ThemeToggle";
|
||
|
||
interface AppShellProps {
|
||
children: ReactNode;
|
||
// 顶栏右侧的上下文信息（如作品名 / 进度）。
|
||
title?: string;
|
||
subtitle?: string;
|
||
// 项目内页给出 projectId → 左导航展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
|
||
projectId?: string;
|
||
// 当前激活的项目级入口键（用于高亮）。
|
||
activeNav?: ActiveNav;
|
||
}
|
||
|
||
// 全局外壳：顶栏(64px) + 左导航 + 主区（UX §5.1）。
|
||
export function AppShell({
|
||
children,
|
||
title,
|
||
subtitle,
|
||
projectId,
|
||
activeNav,
|
||
}: AppShellProps) {
|
||
return (
|
||
<div
|
||
className="min-h-screen"
|
||
style={{ ["--chrome" as string]: projectId ? "7rem" : "4rem" }}
|
||
>
|
||
<a
|
||
href="#main"
|
||
className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:border focus:border-line focus:bg-panel focus:px-3 focus:py-2 focus:text-sm focus:text-ink focus:shadow-paper"
|
||
>
|
||
跳到正文
|
||
</a>
|
||
<header className="flex h-16 items-center gap-4 border-b border-line bg-panel px-4 sm:px-6">
|
||
<NavDrawer projectId={projectId} activeNav={activeNav} />
|
||
<Link
|
||
href="/"
|
||
className="shrink-0 whitespace-nowrap font-serif text-xl text-cinnabar"
|
||
aria-label="返回作品库"
|
||
>
|
||
墨痕
|
||
</Link>
|
||
{title ? (
|
||
<span className="min-w-0 truncate font-serif text-lg text-ink">
|
||
{title}
|
||
</span>
|
||
) : null}
|
||
{subtitle ? (
|
||
<span className="hidden shrink-0 font-mono text-xs text-ink-soft sm:inline">
|
||
{subtitle}
|
||
</span>
|
||
) : null}
|
||
<nav
|
||
aria-label="快捷操作"
|
||
className="ml-auto flex shrink-0 items-center gap-2 text-sm"
|
||
>
|
||
<ThemeToggle />
|
||
<Link
|
||
href="/settings/providers"
|
||
aria-label="设置"
|
||
title="设置"
|
||
className={buttonClass({
|
||
variant: "ghost",
|
||
size: "sm",
|
||
className: "border-transparent",
|
||
})}
|
||
>
|
||
<Settings className="h-4 w-4" aria-hidden="true" />
|
||
<span className="hidden sm:inline">设置</span>
|
||
</Link>
|
||
</nav>
|
||
</header>
|
||
{projectId ? (
|
||
<AiToolbar projectId={projectId} activeNav={activeNav} />
|
||
) : null}
|
||
<div className="flex">
|
||
<LeftNav projectId={projectId} activeNav={activeNav} />
|
||
<main
|
||
id="main"
|
||
tabIndex={-1}
|
||
className="min-h-[calc(100vh-var(--chrome,4rem))] min-w-0 flex-1 bg-bg"
|
||
>
|
||
{children}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|