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/AppShell.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link";
 import type { ReactNode } from "react";
 
-import { LeftNav, type ActiveNav } from "./LeftNav";
+import type { ActiveNav } from "@/lib/nav/items";
+import { LeftNav } from "./LeftNav";
+import { NavDrawer } from "./NavDrawer";
 
 interface AppShellProps {
   children: ReactNode;
@@ -24,7 +26,8 @@ export function AppShell({
 }: AppShellProps) {
   return (
     <div className="min-h-screen">
-      <header className="flex h-16 items-center gap-4 border-b border-line bg-panel px-6">
+      <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="font-serif text-xl text-cinnabar"

apps/web/components/Drawer.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  // 滑出方向：导航在左、本章助手在右。
+  side?: "left" | "right";
+  // 无障碍标签（role=dialog）。
+  label: string;
+  children: ReactNode;
+}
+
+// 移动端侧滑抽屉（<lg；遮罩点击 / Esc 关闭 + 打开聚焦面板）。
+// 复用命令面板的 a11y 模式（CommandPalette）；桌面用静态布局，不渲染本抽屉。
+export function Drawer({
+  open,
+  onClose,
+  side = "left",
+  label,
+  children,
+}: DrawerProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    panelRef.current?.focus();
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const sideClass = side === "left" ? "left-0 border-r" : "right-0 border-l";
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/30 lg:hidden" onClick={onClose}>
+      <div
+        ref={panelRef}
+        tabIndex={-1}
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+        onClick={(e) => e.stopPropagation()}
+        className={`absolute top-0 h-full w-64 max-w-[80vw] overflow-auto border-line bg-panel py-4 shadow-paper outline-none ${sideClass}`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

apps/web/components/LeftNav.tsx

@@ -1,17 +1,5 @@
-"use client";
+import type { ActiveNav } from "@/lib/nav/items";
-
+import { NavItems } from "./NavItems";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export type ActiveNav =
-  | "write"
-  | "outline"
-  | "foreshadow"
-  | "review"
-  | "style"
-  | "codex"
-  | "rules"
-  | "skills";
 
 interface LeftNavProps {
   // 项目内页传 projectId → 展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
@@ -19,140 +7,14 @@ interface LeftNavProps {
   activeNav?: ActiveNav;
 }
 
-interface NavItem {
+// 桌面静态左导航（UX §5.1 / §3.1）。<lg 隐藏，由 NavDrawer 汉堡抽屉替代。
-  href: string;
-  label: string;
-  enabled: boolean;
-  // 项目级入口的激活键（与 activeNav 比对高亮）。
-  key?: ActiveNav;
-}
-
-const GLOBAL_ITEMS: NavItem[] = [
-  { href: "/", label: "作品库", enabled: true },
-  { href: "/settings/providers", label: "设置", enabled: true },
-];
-
-function projectItems(projectId: string): NavItem[] {
-  return [
-    {
-      href: `/projects/${projectId}/write`,
-      label: "写作",
-      enabled: true,
-      key: "write",
-    },
-    {
-      href: `/projects/${projectId}/outline`,
-      label: "大纲",
-      enabled: true,
-      key: "outline",
-    },
-    {
-      href: `/projects/${projectId}/foreshadow`,
-      label: "伏笔",
-      enabled: true,
-      key: "foreshadow",
-    },
-    {
-      href: `/projects/${projectId}/review`,
-      label: "审稿",
-      enabled: true,
-      key: "review",
-    },
-    {
-      href: `/projects/${projectId}/style`,
-      label: "文风",
-      enabled: true,
-      key: "style",
-    },
-    {
-      href: `/projects/${projectId}/codex`,
-      label: "设定库",
-      enabled: true,
-      key: "codex",
-    },
-    {
-      href: `/projects/${projectId}/rules`,
-      label: "规则",
-      enabled: true,
-      key: "rules",
-    },
-    {
-      href: `/projects/${projectId}/skills`,
-      label: "技能库",
-      enabled: true,
-      key: "skills",
-    },
-  ];
-}
-
-// 左导航：当前项朱砂竖条 + 浅晕底（UX §5.1 / §3.1）。
 export function LeftNav({ projectId, activeNav }: LeftNavProps) {
-  const pathname = usePathname();
-  const scoped = projectId ? projectItems(projectId) : [];
-
   return (
     <nav
-      className="w-44 shrink-0 border-r border-line bg-panel py-4"
+      className="hidden w-44 shrink-0 border-r border-line bg-panel py-4 lg:block"
       aria-label="主导航"
     >
-      <ul className="flex flex-col gap-1 px-2">
+      <NavItems projectId={projectId} activeNav={activeNav} />
-        {GLOBAL_ITEMS.map((item) => (
-          <NavLink
-            key={item.label}
-            item={item}
-            active={item.enabled && pathname === item.href}
-          />
-        ))}
-        {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={
-              item.key !== undefined &&
-              (item.key === activeNav || pathname === item.href)
-            }
-          />
-        ))}
-      </ul>
     </nav>
   );
 }
-
-function NavLink({ item, active }: { item: NavItem; active: boolean }) {
-  if (!item.enabled) {
-    return (
-      <li>
-        <span
-          className="block cursor-not-allowed rounded px-3 py-2 text-sm text-ink-soft/50"
-          aria-disabled="true"
-          title="后续里程碑开放"
-        >
-          {item.label}
-        </span>
-      </li>
-    );
-  }
-  return (
-    <li>
-      <Link
-        href={item.href}
-        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>
-  );
-}

apps/web/components/NavDrawer.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+
+import type { ActiveNav } from "@/lib/nav/items";
+import { Drawer } from "./Drawer";
+import { NavItems } from "./NavItems";
+
+interface NavDrawerProps {
+  projectId?: string;
+  activeNav?: ActiveNav;
+}
+
+// 移动端导航：汉堡按钮 + 左侧抽屉（仅 <lg；桌面用 LeftNav 静态侧栏）。UX §5.1。
+export function NavDrawer({ projectId, activeNav }: NavDrawerProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="打开导航"
+        aria-expanded={open}
+        className="-ml-1 rounded p-2 text-ink hover:text-cinnabar lg:hidden"
+      >
+        <span aria-hidden="true" className="block text-lg leading-none">
+          ☰
+        </span>
+      </button>
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        side="left"
+        label="主导航"
+      >
+        <NavItems
+          projectId={projectId}
+          activeNav={activeNav}
+          onNavigate={() => setOpen(false)}
+        />
+      </Drawer>
+    </>
+  );
+}

apps/web/components/NavItems.tsx

@@ -0,0 +1,82 @@
+"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>
+  );
+}

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 { ChapterList, ChapterListContent } from "./ChapterList";
-import { ChapterAssistant } from "./ChapterAssistant";
+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)]"

apps/web/lib/nav/items.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  GLOBAL_NAV_ITEMS,
+  isNavItemActive,
+  projectNavItems,
+  type NavItem,
+} from "./items";
+
+const PID = "p1";
+
+describe("projectNavItems", () => {
+  it("builds the eight project entries scoped to the project id", () => {
+    const items = projectNavItems(PID);
+
+    expect(items).toHaveLength(8);
+    expect(items.map((i) => i.key)).toEqual([
+      "write",
+      "outline",
+      "foreshadow",
+      "review",
+      "style",
+      "codex",
+      "rules",
+      "skills",
+    ]);
+    expect(items.every((i) => i.href.startsWith(`/projects/${PID}/`))).toBe(
+      true,
+    );
+  });
+});
+
+describe("isNavItemActive", () => {
+  const write: NavItem = {
+    href: `/projects/${PID}/write`,
+    label: "写作",
+    key: "write",
+  };
+
+  it("matches a project item by its activeNav key regardless of pathname", () => {
+    expect(
+      isNavItemActive(write, { pathname: "/anything", activeNav: "write" }),
+    ).toBe(true);
+  });
+
+  it("matches a project item by exact pathname when no activeNav given", () => {
+    expect(isNavItemActive(write, { pathname: `/projects/${PID}/write` })).toBe(
+      true,
+    );
+  });
+
+  it("does not match a project item when neither key nor path align", () => {
+    expect(isNavItemActive(write, { pathname: "/", activeNav: "outline" })).toBe(
+      false,
+    );
+  });
+
+  it("matches a global item by exact pathname only", () => {
+    const works = GLOBAL_NAV_ITEMS[0];
+    expect(isNavItemActive(works, { pathname: "/" })).toBe(true);
+    expect(isNavItemActive(works, { pathname: "/projects/p1/write" })).toBe(
+      false,
+    );
+  });
+
+  it("ignores activeNav for global items (no key)", () => {
+    const settings = GLOBAL_NAV_ITEMS[1];
+    expect(
+      isNavItemActive(settings, { pathname: "/", activeNav: "write" }),
+    ).toBe(false);
+  });
+});

apps/web/lib/nav/items.ts

@@ -0,0 +1,55 @@
+// 左导航条目数据 + 激活判定（纯逻辑，供桌面静态侧栏 / 移动抽屉共用，UX §5.1/§3.1）。
+// 组件只负责渲染；条目与高亮规则在此集中，避免侧栏与抽屉漂移。
+
+export type ActiveNav =
+  | "write"
+  | "outline"
+  | "foreshadow"
+  | "review"
+  | "style"
+  | "codex"
+  | "rules"
+  | "skills";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  // 项目级入口的激活键（与 activeNav 比对高亮）；全局项无 key。
+  key?: ActiveNav;
+}
+
+export const GLOBAL_NAV_ITEMS: readonly NavItem[] = [
+  { href: "/", label: "作品库" },
+  { href: "/settings/providers", label: "设置" },
+];
+
+// 项目内页展开的项目级入口（UX §3.1）。
+export function projectNavItems(projectId: string): NavItem[] {
+  return [
+    { href: `/projects/${projectId}/write`, label: "写作", key: "write" },
+    { href: `/projects/${projectId}/outline`, label: "大纲", key: "outline" },
+    {
+      href: `/projects/${projectId}/foreshadow`,
+      label: "伏笔",
+      key: "foreshadow",
+    },
+    { href: `/projects/${projectId}/review`, label: "审稿", key: "review" },
+    { href: `/projects/${projectId}/style`, label: "文风", key: "style" },
+    { href: `/projects/${projectId}/codex`, label: "设定库", key: "codex" },
+    { href: `/projects/${projectId}/rules`, label: "规则", key: "rules" },
+    { href: `/projects/${projectId}/skills`, label: "技能库", key: "skills" },
+  ];
+}
+
+export interface NavActiveContext {
+  pathname: string;
+  activeNav?: ActiveNav;
+}
+
+// 全局项按精确路径匹配；项目项按 activeNav 键匹配（或路径相等兜底）。
+export function isNavItemActive(item: NavItem, ctx: NavActiveContext): boolean {
+  if (item.key !== undefined) {
+    return item.key === ctx.activeNav || ctx.pathname === item.href;
+  }
+  return ctx.pathname === item.href;
+}