交互重构:双端设计与实施规格(2026-08-17 定稿)

存档声明(2026-08-17):write 区设计已被 docs/10-正文即界面-交互重设计.md 取代 (StageBar/动作条/动作卡族/参考抽屉那一套已退场),本文仅存档; setup 开书向导、book 全书区、settings 的设置仍有效。

背景:导航主轴从「八步流水线」翻转为「以章节为中心」。阶段 A(URL 地基)已完成: ch 进 URL(hooks/useChapterContext.ts)、qk.chapter(pid,ch) 共享缓存、三面板独立章号 state 已删。 本文档是 B(工作台)/C(移动端)/D(桌面原生) 的实施规格。

0. 铁律

• 不推翻已认可的功能骨架:六步流水线能力、确认制、版本对比、编辑部四能力、连写队列——全部保留,只换外壳与上下文来源。
• 不引入 Tailwind/shadcn;新增样式手写进 styles.css,沿用现有 CSS 变量令牌,新增颜色类样式必须同时在 [data-theme="dark"] 下有正确表现(令牌已整组覆写,新样式尽量只用现有令牌)。
• 注释用中文,风格对齐现有文件(文件头一行说明 + 关键块注释)。
• 旧 URL 一律重定向,不许 404。
• 每阶段门禁:npx tsc -b、npx eslint <改动文件>、npm test(vitest)全绿。

1. 信息架构:三区 + 两个辅助面

区	内容	URL
setup 开书	概念/架构/大纲(保留向导感)	/project/:id/setup?step=inspire|arch|outline
write 写作	章节轨+正文+章级动作(生成/重写/润色/校对/评分/审核/版本)	/project/:id/write?ch=N&ctx=...&act=...
book 全书	看板四 tab+投稿+全书体检+翻新批量	/project/:id/book?tab=overview|characters|bible|foreshadow|publish|audit|refresh
settings 书级设置	每章目标字数/字数守卫/审校把关/连写要求/世界观硬规则	/project/:id/settings
read 只读	单章纯阅读(对照窗/移动端用)	/project/:id/read?ch=N

旧链重定向:inspire|arch|outline → setup?step=X;polish → write(保留 ch);refresh → book?tab=refresh;board → book;publish → book?tab=publish。 路由仍是 /project/:id/:step? 一条,step 校验新值,旧值在 ProjectPage 内 <Navigate replace> 重定向。

2. 桌面端(宽屏,键鼠优先)

write 区三栏

• 左=章节轨:唯一选章入口。从 ChaptersPanel 侧栏抽出:搜索/状态筛选/连写勾选/状态点/每章操作(生成·阅读·通过审核·quarantined 放行·重写框)。编辑部/润色面板里的章节 <select> 全部删除。
• 中=正文:永远视觉重心。当前章正文+本章蓝图卡;动作产出(GenResultCard/VersionCompare/润色对照/评分报告)出现在中栏。
• 中栏顶部=阶段条 StageBar(状态驱动流水线,替代旧底部动作条):阶段由纯函数 write/chapterStage.ts 的 deriveStage(chapterNum, currentBrief, genJob) 推断——unselected/empty/generating/blocked(quarantined)/review(pending_review)/approved(含存量 finalized);is_stale 不作独立阶段,叠加「大纲已变,建议重写」修饰徽标。每阶段只摆 1-2 个主动作:
  • unselected:提示「先选一章」(移动端给「选择章节」按钮开章节轨)
  • empty:生成本章
  • generating:主动作禁用并显示进度文案
  • blocked:去处理(开 ctx=review 审核报告)+ 放行(确认后调 gate-release,与 GenResultCard 共用 chapters/releaseGate.ts)
  • review:通过审核
  • approved:写下一章(选中大纲里第一个未写的章,仅选中不自动生成;全部写完则显示「已全部写完」)
  • 次动作收进右侧「更多动作 ▾」下拉:重写/润色/校对/评分/历史版本,禁用规则=无正文或有生成任务在跑(genBlocked 任务锁统一);右端 ⚙︎ =「本书设置」(去 settings)
• 右=参考抽屉:默认折叠成图标条;项=蓝图/人物/伏笔/圣经/审核/版本,点开 360px 抽屉,ctx= 进 URL。人物/伏笔/圣经复用 BoardPanel 的 CharactersBoard/ForeshadowBoard/BibleBoard(需导出)。世界观规则在 settings 区,不在此抽屉。
• 动作卡(act= 进 URL,由 StageBar「更多动作」/FAB 动作扇/命令面板打开):
  • act=revise → 行内重写意见卡(原有 revise 框提升)
  • act=polish → PolishPanel(整章模式)
  • act=proofread → 校对卡(EditorialPanel proofread tab 内容)
  • act=review → 主编评分卡(EditorialPanel review tab 内容)
  • 结果卡上挂「下一步动作」按钮(接力协议:评分→按建议重写;校对→修复所选)
  • GenResultCard 头部有 × 关闭按钮(正文已保存,随时可从参考抽屉「审核」复查);生成完成后自动选中该章(消除结果卡悬空)

拆解映射

• EditorialPanel 拆掉:review/proofread → write 动作卡;audit(全书体检+审核报告聚合)→ book?tab=audit;世界观硬规则 → settings。
• RefreshPanel → book?tab=refresh(批量工具,整体保留)。
• BoardPanel 四 tab → book 区;概览跳章已走 write?ch=N。
• ChaptersPanel 拆成:ChapterRail(左栏)+ 中栏正文/结果;字数守卫/审校把关/连写要求三张设置卡 → settings。
• settings 页:新建 panels/ProjectSettingsPanel.tsx,书级;全局 /settings 不动。

快捷键(浏览器同样生效,D 阶段)

Ctrl+S 保存正文、Ctrl+Enter 生成本章、Ctrl+[/] 上/下一章、Ctrl+B 左栏、Ctrl+\ 右栏、F11 沉浸(只留中栏)、Ctrl+K 命令面板(输入 37 跳 37 章,输入「润色/校对/评分」执行动作,输入章名模糊匹配)。

3. 移动端(窄屏,触摸优先)

同一套组件 + useBreakpoint()(如 (max-width: 767px) matchMedia hook),不做两份代码;三栏在窄屏退化:

• 顶栏:←返回项目列表 + 当前章标题(点击=章节轨全屏抽屉)+ 任务中心入口
• 正文第一屏:进来就是当前章正文
• 底部栏(env(safe-area-inset-bottom) 垫高):写 / 读 / 参考 / 本书设置(「读」与顶栏「阅读」统一开全屏 Reader,带段落润色,不再 nav 到 /read 纯只读页;/read 区保留给桌面多窗口对照窗)
• FAB(右下、safe-area 之上):与桌面 StageBar 共用 deriveStage 阶段推断,点按=当前阶段主动作——选章(unselected)/生成(empty)/去处理=开审核 sheet(blocked)/通过=通过审核带确认(review)/下一章=选中下一未写章(approved,无下一章时退化为动作扇入口);文案跟随阶段;genBlocked 时不再静默无效,toast 提示「正在生成其他章节」;长按展开动作扇(重写/润色/校对/评分,均带 genBlocked 任务锁)
• 左右滑切章:正文容器 touch 滑动,阈值 ~60px,切 URL ch(仅限已生成章)
• 参考/动作卡/结果:全屏 sheet(从底升起),组件与桌面同一份
• setup/book 区单列堆叠,tabs 横滑

4. 桌面客户端(Tauri,D 阶段)

• lib.rs MenuBuilder:文件(新建项目/导出 txt·epub/设置)、编辑(必须 predefined 角色,否则 webview 复制粘贴不全)、视图(左栏/右栏/沉浸/深浅色)、窗口(新建对照阅读窗)、帮助(帮助页)
• 菜单项 emit 事件,前端与快捷键共用一个 dispatch(window.__TAURI__ 存在时 listen)
• 多窗口:WebviewWindowBuilder 开 /project/:id/read?ch=N 只读窗;主窗保存后 emit chapter-saved {pid,ch},附窗 listen 后 invalidate qk.chapter;只读窗无编辑态→无写冲突;主窗关闭连带关附窗
• tauri-plugin-window-state 记窗口尺寸位置;暗色已完成(theme.ts 三态+系统跟随),无需再做

5. 执行顺序与验收

B(三区+工作台) → C(移动端壳) → D(快捷键/命令面板/菜单栏/多窗口/窗口状态)。 B 验收:八步旧链全部重定向正确;write 区三栏可用;编辑部四能力一个不少;设置卡在 /project/:id/settings 可改可存;门禁全绿。