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。
2026-06-20 11:26:14 +02:00
parent b18310bcb7
commit 9b893a6c61
10 changed files with 394 additions and 152 deletions
--- a/apps/web/components/AppShell.tsx
+++ b/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"
--- a/apps/web/components/Drawer.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/LeftNav.tsx
+++ b/apps/web/components/LeftNav.tsx
@@ -1,17 +1,5 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export type ActiveNav =
-  | "write"
-  | "outline"
-  | "foreshadow"
-  | "review"
-  | "style"
-  | "codex"
-  | "rules"
-  | "skills";
+import type { ActiveNav } from "@/lib/nav/items";
+import { NavItems } from "./NavItems";

 interface LeftNavProps {
  // 项目内页传 projectId → 展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
@@ -19,140 +7,14 @@ interface LeftNavProps {
  activeNav?: ActiveNav;
 }

-interface NavItem {
-  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）。
+// 桌面静态左导航（UX §5.1 / §3.1）。<lg 隐藏，由 NavDrawer 汉堡抽屉替代。
 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">
-        {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>
+      <NavItems projectId={projectId} activeNav={activeNav} />
    </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>
-  );
-}
--- a/apps/web/components/NavDrawer.tsx
+++ b/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>
+    </>
+  );
+}
--- a/apps/web/components/NavItems.tsx
+++ b/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>
+  );
+}
--- a/apps/web/components/workbench/ChapterAssistant.tsx
+++ b/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>
  );
 }

--- a/apps/web/components/workbench/ChapterList.tsx
+++ b/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>
+    </>
  );
 }
--- a/apps/web/components/workbench/Workbench.tsx
+++ b/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)]"