9b893a6c61
M1 左导航响应式抽屉：抽出 lib/nav/items.ts（条目数据+激活判定，纯逻辑+vitest） 共用于桌面静态侧栏（hidden lg:block）与移动汉堡抽屉。新增通用 Drawer（遮罩/ Esc 关闭/打开聚焦，复用 CommandPalette a11y 模式）+ NavDrawer + NavItems； LeftNav 改 <lg 隐藏，AppShell 顶栏加汉堡（aria-label 打开导航）。 M2 写作工具条不溢出 + 移动端可达章节/助手：Toolbar 改 flex-wrap，390px 不再 横切「尚未保存」；ChapterList/ChapterAssistant 抽出 *Content，Workbench 经 左/右 Drawer 在 <lg 触达目录/助手。 实景 390px 复验（browse）：汉堡显示/静态导航隐藏/抽屉开合聚焦+Esc、工具条 两行不溢出、助手抽屉真注入面板。门禁：lint/typecheck 干净 · vitest 177 · build OK。
83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { usePathname } from "next/navigation";
|
||
|
||
import {
|
||
GLOBAL_NAV_ITEMS,
|
||
isNavItemActive,
|
||
projectNavItems,
|
||
type ActiveNav,
|
||
type NavItem,
|
||
} from "@/lib/nav/items";
|
||
|
||
interface NavItemsProps {
|
||
// 项目内页传 projectId → 展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
|
||
projectId?: string;
|
||
activeNav?: ActiveNav;
|
||
// 抽屉内点链接后关闭抽屉；静态侧栏不传。
|
||
onNavigate?: () => void;
|
||
}
|
||
|
||
// 导航条目列表（桌面静态侧栏与移动抽屉共用，避免渲染漂移）。
|
||
export function NavItems({ projectId, activeNav, onNavigate }: NavItemsProps) {
|
||
const pathname = usePathname() ?? "/";
|
||
const scoped = projectId ? projectNavItems(projectId) : [];
|
||
|
||
return (
|
||
<ul className="flex flex-col gap-1 px-2">
|
||
{GLOBAL_NAV_ITEMS.map((item) => (
|
||
<NavLink
|
||
key={item.label}
|
||
item={item}
|
||
active={isNavItemActive(item, { pathname, activeNav })}
|
||
onNavigate={onNavigate}
|
||
/>
|
||
))}
|
||
{scoped.length > 0 ? (
|
||
<li
|
||
className="mt-3 px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-ink-soft/60"
|
||
aria-hidden="true"
|
||
>
|
||
本作
|
||
</li>
|
||
) : null}
|
||
{scoped.map((item) => (
|
||
<NavLink
|
||
key={item.label}
|
||
item={item}
|
||
active={isNavItemActive(item, { pathname, activeNav })}
|
||
onNavigate={onNavigate}
|
||
/>
|
||
))}
|
||
</ul>
|
||
);
|
||
}
|
||
|
||
function NavLink({
|
||
item,
|
||
active,
|
||
onNavigate,
|
||
}: {
|
||
item: NavItem;
|
||
active: boolean;
|
||
onNavigate?: () => void;
|
||
}) {
|
||
return (
|
||
<li>
|
||
<Link
|
||
href={item.href}
|
||
onClick={onNavigate}
|
||
aria-current={active ? "page" : undefined}
|
||
className={`flex items-center gap-2 rounded px-3 py-2 text-sm ${
|
||
active
|
||
? "border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
|
||
: "text-ink hover:bg-[var(--color-cinnabar-wash)]"
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
</li>
|
||
);
|
||
}
|