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。
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
interface ChapterListProps {
|
||
currentChapterNo: number;
|
||
}
|
||
|
||
// 左栏目录（UX §6.3）。M1 无章节列表端点 → 仅展示当前章占位。
|
||
// 桌面 aside 包裹；移动端经 Workbench 抽屉复用 ChapterListContent。
|
||
export function ChapterList({ currentChapterNo }: ChapterListProps) {
|
||
return (
|
||
<aside className="hidden border-r border-line bg-panel py-4 lg:block">
|
||
<ChapterListContent currentChapterNo={currentChapterNo} />
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
export function ChapterListContent({ currentChapterNo }: ChapterListProps) {
|
||
return (
|
||
<>
|
||
<h2 className="px-4 text-xs font-semibold uppercase tracking-wide text-ink-soft">
|
||
目录
|
||
</h2>
|
||
<ul className="mt-2">
|
||
<li>
|
||
<span className="flex items-center gap-2 border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] px-4 py-2 text-sm text-cinnabar">
|
||
<span aria-hidden="true">●</span>第 {currentChapterNo} 章
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<p className="mt-4 px-4 text-xs text-ink-soft/70">
|
||
多卷多章目录将在大纲模块开放（后续里程碑）。
|
||
</p>
|
||
</>
|
||
);
|
||
}
|