feat(ux): M1/M2 移动端可用 — 导航汉堡抽屉 + 写作工具条不溢出

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。

apps/web/components/workbench/ChapterAssistant.tsx

@@ -17,15 +17,27 @@ interface ChapterAssistantProps {
 // 右栏「本章助手」（UX §6.3）。
 // 「本章注入（透明）」读 B0 端点，列出确定性选中的设定/角色 + 入选理由徽标——
 // 这是「看到的=写章用的」的信任牌（不变量 #6）。「四审」指向审稿页入口。
+// 桌面 aside 包裹；移动端经 Workbench 抽屉复用 AssistantContent。
 export function ChapterAssistant({
   projectId,
   chapterNo,
+}: ChapterAssistantProps) {
+  return (
+    <aside className="hidden border-l border-line bg-panel py-4 lg:block">
+      <AssistantContent projectId={projectId} chapterNo={chapterNo} />
+    </aside>
+  );
+}
+
+export function AssistantContent({
+  projectId,
+  chapterNo,
 }: ChapterAssistantProps) {
   const injection = useInjection(projectId, chapterNo);
   const selected = injection.data?.selected ?? [];
 
   return (
-    <aside className="hidden border-l border-line bg-panel p-4 lg:block">
+    <div className="px-4">
       <h2 className="text-sm font-semibold text-ink">本章助手</h2>
 
       <section className="mt-4">
@@ -66,7 +78,7 @@ export function ChapterAssistant({
           去审稿 →
         </Link>
       </section>
-    </aside>
+    </div>
   );
 }
 

apps/web/components/workbench/ChapterList.tsx

@@ -3,9 +3,18 @@ interface ChapterListProps {
 }
 
 // 左栏目录（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>
@@ -19,6 +28,6 @@ export function ChapterList({ currentChapterNo }: ChapterListProps) {
       <p className="mt-4 px-4 text-xs text-ink-soft/70">
         多卷多章目录将在大纲模块开放（后续里程碑）。
       </p>
-    </aside>
+    </>
   );
 }

apps/web/components/workbench/Workbench.tsx

@@ -4,13 +4,14 @@ import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 
 import { AppShell } from "@/components/AppShell";
+import { Drawer } from "@/components/Drawer";
 import type { ProjectResponse } from "@/lib/api/types";
 import { friendlyError } from "@/lib/errors/messages";
 import { useAutosave } from "@/lib/autosave/useAutosave";
 import { useDraftStream } from "@/lib/stream/useDraftStream";
 import { WORKBENCH_CHAPTER_NO } from "@/lib/workbench/chapter";
-import { ChapterList } from "./ChapterList";
-import { ChapterAssistant } from "./ChapterAssistant";
+import { ChapterList, ChapterListContent } from "./ChapterList";
+import { ChapterAssistant, AssistantContent } from "./ChapterAssistant";
 import { Editor } from "./Editor";
 
 interface WorkbenchProps {
@@ -19,6 +20,9 @@ interface WorkbenchProps {
   initialText?: string;
 }
 
+// 移动端右栏（目录/助手）经抽屉触达；桌面用三栏栅格。
+type MobilePanel = "chapters" | "assistant" | null;
+
 // M1：单章工作台。章节列表为占位（无章节列表端点）；默认第 1 章。
 // WORKBENCH_CHAPTER_NO 移到 lib/workbench/chapter.ts（非客户端模块），供 Server Component 安全导入。
 
@@ -27,6 +31,7 @@ export function Workbench({ project, initialText = "" }: WorkbenchProps) {
   // 用已存草稿作初值；流式开始后由下方 effect 覆盖（流不会被初值反扑——
   // stream.state.text 起始为空，仅当 streaming/done/aborted 且变化才写回）。
   const [text, setText] = useState(initialText);
+  const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
   const autosave = useAutosave(project.id, chapterNo);
   const stream = useDraftStream();
   const lastStreamText = useRef("");
@@ -56,6 +61,7 @@ export function Workbench({ project, initialText = "" }: WorkbenchProps) {
   };
 
   const wordCount = text.length;
+  const closePanel = (): void => setMobilePanel(null);
 
   return (
     <AppShell
@@ -85,11 +91,31 @@ export function Workbench({ project, initialText = "" }: WorkbenchProps) {
             streamError={stream.state.error}
             onWrite={onWrite}
             onStop={stream.stop}
+            onOpenChapters={() => setMobilePanel("chapters")}
+            onOpenAssistant={() => setMobilePanel("assistant")}
           />
         </section>
 
         <ChapterAssistant projectId={project.id} chapterNo={chapterNo} />
       </div>
+
+      {/* 移动端：目录 / 本章助手经抽屉触达（桌面已在栅格里，抽屉 lg:hidden）。 */}
+      <Drawer
+        open={mobilePanel === "chapters"}
+        onClose={closePanel}
+        side="left"
+        label="目录"
+      >
+        <ChapterListContent currentChapterNo={chapterNo} />
+      </Drawer>
+      <Drawer
+        open={mobilePanel === "assistant"}
+        onClose={closePanel}
+        side="right"
+        label="本章助手"
+      >
+        <AssistantContent projectId={project.id} chapterNo={chapterNo} />
+      </Drawer>
     </AppShell>
   );
 }
@@ -129,6 +155,8 @@ interface ToolbarProps {
   streamError: { code: string; message: string } | null;
   onWrite: () => void;
   onStop: () => void;
+  onOpenChapters: () => void;
+  onOpenAssistant: () => void;
 }
 
 function Toolbar({
@@ -141,11 +169,20 @@ function Toolbar({
   streamError,
   onWrite,
   onStop,
+  onOpenChapters,
+  onOpenAssistant,
 }: ToolbarProps) {
   return (
-    <div className="border-t border-line bg-panel px-6 py-3">
+    <div className="border-t border-line bg-panel px-4 py-3 sm:px-6">
       {streamError ? <StreamErrorNote streamError={streamError} /> : null}
-      <div className="flex items-center gap-4">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+        <button
+          type="button"
+          onClick={onOpenChapters}
+          className="rounded border border-line px-3 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar lg:hidden"
+        >
+          目录
+        </button>
         {streaming ? (
           <button
             type="button"
@@ -184,6 +221,13 @@ function Toolbar({
         >
           伏笔
         </Link>
+        <button
+          type="button"
+          onClick={onOpenAssistant}
+          className="rounded border border-line px-3 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar lg:hidden"
+        >
+          助手
+        </button>
         <Link
           href={`/projects/${projectId}/review?chapter=${chapterNo}`}
           className="rounded border border-cinnabar px-4 py-2 text-sm text-cinnabar hover:bg-[var(--color-cinnabar-wash)]"