# 网文创作工作流 · UX/UI 规格说明 > 配套 [PRODUCT_SPEC.md](./PRODUCT_SPEC.md) 的用户体验与界面规格。视觉方向：**文学温暖 · 纸感**（暖米白、衬线、书卷气）。 > 形态：方案设计阶段产物，含信息架构、用户流程、页面线框、组件库、交互规范。 --- ## 0. 文档状态 | 项 | 内容 | |---|---| | 阶段 | UX/UI 设计（未实现） | | 目标用户 | 中文网文作者，长时间连续写作，需在「专注正文」与「纵览设定/伏笔」间切换 | | 视觉方向 | 文学温暖·纸感：暖米白背景 + 宋体正文 + 朱砂印章红强调 | | 平台 | 响应式 Web（桌面优先，平板适配；不做移动原生） | | 对齐 | 功能/端点/数据对齐 PRODUCT_SPEC.md §2.5 / §6 / §3.2（P2 项如时间线/AI 续写扩写暂未画线框） | --- ## 1. UX 设计原则 承接 PRODUCT_SPEC.md §1.5「把写小说当软件工程」，UX 层把工程纪律转译为作者无感的顺滑体验： 1. **正文至上（Content-first）** — 写作界面默认极致专注，设定/审稿/工具皆可收起，正文永远是视觉主角。 2. **AI 是副驾不是自动驾驶** — 所有 AI 产出都以「草稿/建议」形态呈现，作者一键采纳/拒绝/回炉；绝不静默改稿（对齐 PRODUCT_SPEC §10 作者掌控权）。 3. **状态可见（真相源外化）** — 人物、伏笔、时间线、一致性状态随手可查，写到几十万字也不"失忆"。 4. **测试即时反馈** — 四审结果像 IDE 的波浪线，写完即现、就地可跳转、可裁决。 5. **渐进披露** — 新手走引导式向导，老手走快捷命令面板；复杂能力（skill、规则）藏在二级，不挡主路。 6. **书卷气** — 视觉传达"在稿纸上创作"的温度，降低 AI 工具的冰冷感，贴合创作者情绪。 --- ## 2. 视觉设计 token（文学温暖·纸感） ### 2.1 色板 | 角色 | 名称 | 值 | 用途 | |---|---|---|---| | 背景 | 暖米白/稿纸 | `#F5F1E8` | 全局底色 | | 卡片/面板 | 宣纸白 | `#FBF8F1` | 卡片、侧栏、模态底 | | 正文文字 | 墨 | `#2B2620` | 正文、标题主色 | | 次要文字 | 淡墨 | `#6B6356` | 注释、元信息 | | 分隔线 | 米灰 | `#E5DDCD` | 描边、分隔 | | **强调主色** | **朱砂（印章红）** | `#A23B2E` | 主按钮、链接、品牌、章节标记 | | 强调浅 | 朱砂晕 | `#A23B2E14` | 选中态底、hover | | 警告/冲突 | 赭红 | `#B5543A` | `[CONFLICT]`、错误 | | 逾期 | 琥珀 | `#C8893A` | 伏笔 `OVERDUE`、提醒 | | 通过/正常 | 黛绿 | `#5A6B4F` | 校验通过、已验收 | | 信息 | 黛蓝 | `#4A5A6B` | 中性提示、链接备选 | > 暗色不在本方案首版（作者选了纸感）；后续可加「夜读模式」作为偏好开关。 ### 2.2 字体 | 用途 | 字体栈 | 说明 | |---|---|---| | 正文（小说） | `"Noto Serif SC", "Songti SC", "宋体", serif` | 宋体，营造稿纸书写感 | | 标题/卷章 | `"Noto Serif SC", "Source Serif 4", serif` | 衬线，带书卷气 | | UI（按钮/标签/菜单） | `"Noto Sans SC", "PingFang SC", system-ui, sans-serif` | 无衬线，保证小字 UI 清晰 | | 数字/代码 | `"JetBrains Mono", ui-monospace` | 字数、章号、token | ### 2.3 排版与间距 - **正文**：18px / 行高 **1.9**（舒朗稿纸感），段间距 0.8em，单栏最大宽 **720px** 居中。 - **字号梯度**：12 / 14 / 16 / 18 / 22 / 28 / 36（衬线大标题）。 - **网格**：8px 基准；页面留白慷慨（卡片内边距 24px）。 - **圆角**：6px（柔和，非全圆）。 - **阴影**：极淡暖调 `0 1px 3px #2B26200F`，避免硬投影。 - **描边**：1px `#E5DDCD`，纸感分隔优先用细线而非阴影。 ### 2.4 动效 - 时长 150–250ms，缓动 `ease-out`；面板展开/收起用 200ms。 - AI streaming：文字逐字淡入（打字机感），光标朱砂色闪烁。 - 克制：无弹跳、无大幅位移，符合"安静书房"气质。 --- ## 3. 信息架构（IA） ### 3.1 顶层导航（作品工作台左栏） ``` 作品库（多作品） └─ 单作品工作台 ├─ ① 仪表盘 连载概览：进度/待回收伏笔/最近审稿 ├─ ② 写作 核心写作界面（默认入口） ├─ ③ 大纲 分卷分章 + 场景清单 ├─ ④ 设定库 人物 / 世界观 / 时间线（Codex） ├─ ⑤ 伏笔看板 埋设→回收 依赖图 + 到期提醒 ├─ ⑥ 审稿 四审报告历史 ├─ ⑦ 文风 样本管理 + 文风指纹 └─ ⑧ 规则 四级规则管理 设置（账号 / 偏好 / 模型与提供商 / 技能 Skill 库） ``` ### 3.2 页面地图（对齐 PRODUCT_SPEC §6 端点） | 页面 | 对应端点/功能 | 优先级 | |---|---|---| | 作品库 | 列表 + `POST /projects` | P0 | | 立项向导 | `POST /projects` | P0 | | 写作工作台 | `POST /projects/:id/chapters/:no/draft` `/review` `/accept` | P0 | | 大纲编辑器 | `POST /projects/:id/outline` | P0 | | 设定库 Codex | characters / world_entities | P0 | | 角色生成器 | `POST /projects/:id/characters/generate` | P1 | | 世界观设计器 | `POST /projects/:id/world/generate` | P1 | | 文风学习 | `POST /projects/:id/style` | P1 | | 审稿报告页 | `POST /projects/:id/chapters/:no/review` | P0(一致性)/P1(其余) | | 伏笔看板 | foreshadow | P1 | | 规则管理 | `POST /projects/:id/rules` | P2 | | **模型与提供商设置** | LLM 网关配置（PRODUCT_SPEC §3.3） | P0 | | 技能库 | skills（§5.5） | P2 | --- ## 4. 核心用户流程 ### 4.1 主创作循环（工程化流水线的 UX 投影） ``` 新建作品 ──▶ 立项向导(5步) ──▶ [可选] 学文风 / 世界观设计 / 生成群像 │ ▼ ┌──────────── 写作工作台（主循环）────────────┐ │ 排大纲 → 写本章(草稿,streaming) → 审稿(四审) │ │ → 裁决冲突 → 验收(更新记忆+伏笔) │ └──────────── 循环 × N 章 ──────────────────┘ ``` ### 4.2 关键流程：写一章（最高频路径） 1. 作者在「写作」选中某章（大纲已排）→ 点 **写本章**。 2. 正文区 streaming 出草稿；右侧「本章注入」实时显示本次喂给 AI 的设定/伏笔（可信度透明）。 3. 草稿完成 → 自动触发 **审稿**（四审并行，右侧报告区逐项亮起）。 4. 作者逐条处理：冲突 `[CONFLICT]` 就地高亮、点击跳转、采纳/忽略；文风漂移段一键回炉；节奏建议查看。 5. 满意后点 **验收** → 弹出「本次将更新」清单（章节摘要 / 伏笔状态 / 人物 latest_state）→ 确认入库。 6. 伏笔看板/仪表盘随之刷新；逾期伏笔自动提醒。 ### 4.3 关键流程：生成群像（角色生成器） `设定库 → AI 生成角色 → 输入一句话需求 + 数量/定位 → 预览角色卡（可逐张编辑/重roll）→ 过一致性校验 → 批量入库` --- ## 5. 全局布局 ### 5.1 作品工作台外壳 ``` ┌──────────────────────────────────────────────────────────────┐ │ ☷ 墨痕 〈逐光而行〉 进度 32万字 · 第128章 ⚙ 头像 │ ← 顶栏(64px, 宣纸白) ├────────┬─────────────────────────────────────────────────────┤ │ 仪表盘 │ │ │ 写作 ● │ │ │ 大纲 │ （主内容区，随导航切换） │ │ 设定库 │ │ │ 伏笔 │ │ │ 审稿 │ │ │ 文风 │ │ │ 规则 │ │ │ │ │ │ ⚑ Skill│ │ └────────┴─────────────────────────────────────────────────────┘ 左栏 72–200px(可折叠为图标) 主区暖米白底 ``` - 左栏图标 + 文字，当前项朱砂竖条 + 浅晕底。 - 顶栏：作品名（衬线）、连载进度、全局搜索、设置、头像。 --- ## 6. 页面规格（线框 + 要点） ### 6.1 作品库（Dashboard 入口） ``` ┌──────────────────────────────────────────────────────────────┐ │ 墨痕 ＋ 新建作品 │ ├──────────────────────────────────────────────────────────────┤ │ │ │ 我的作品 │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ 〈逐光而行〉 │ │ 〈青冥录〉 │ │ ＋ 新建 │ │ │ │ 玄幻 · 连载中 │ │ 仙侠 · 暂停 │ │ │ │ │ │ 32万字·128章 │ │ 8万字·40章 │ │ 从一句灵感 │ │ │ │ ⚑3待回收伏笔 │ │ ✓ 无待办 │ │ 开始一本书 │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ └──────────────────────────────────────────────────────────────┘ ``` - 作品卡：书名衬线大字、题材/状态、字数/章数、**待办徽标**（待回收伏笔、未处理冲突）。 - 新建卡常驻末位。 ### 6.2 立项向导（5 步，对齐 §3.2 projects 字段） ``` ┌──────────────────────────────────────────────────────────────┐ │ 新建作品 步骤 ②/⑤ ● ● ○ ○ ○│ ├──────────────────────────────────────────────────────────────┤ │ 一句话故事 (logline) │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ 废柴少年觉醒禁忌血脉，在仙门倾轧中逆势封神。 │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ 题材 [玄幻 ▾] 故事结构 [三幕 ▾] [故事圈] [雪花] │ │ 核心卖点 □逆袭 □打脸 □系统流 □双男主 ＋自定义 │ │ │ │ [ ← 上一步 ] [ 下一步：立意/总纲 → ] │ └──────────────────────────────────────────────────────────────┘ ``` 步骤：① 书名+题材 → ② 一句话故事+卖点+结构 → ③ 立意/总纲(premise/theme) → ④ 主角+金手指 → ⑤ 基础世界观（worldbuilder 基础版，可生成可手填）。完成即建库，落 `projects` 各字段。 ### 6.3 写作工作台 ★（核心页面） 三栏：左目录、中正文、右「设定 + 审稿」抽屉。专注模式可一键收起两侧。 ``` ┌────────┬──────────────────────────────────────┬───────────────┐ │ 目录 │ 卷三 · 风云会 │ 本章助手 ✕ │ │ │ ├───────────────┤ │ 卷一 ▾ │ 第 128 章 · 血脉觉醒 │ 本章注入(透明) │ │ 卷二 ▾ │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ · 主角:林衍 │ │ 卷三 ▴ │ │ · 伏笔F-012玉佩│ │ ·126 │ 夜色如墨，林衍盘膝而坐，体内那道 │ · 设定:血脉禁制│ │ ·127 │ 沉睡已久的血脉骤然苏醒…… │ │ │ ·128 ●│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ‹生成中 │ ── 四审 ── │ │ │ │ ✓ 一致性 │ │ │ [此段与第30章设定冲突] ⚠ │ ⚠ 1 处冲突 ▸ │ │ │ │ ◔ 文风 92% │ │ │ │ ⚠ 节奏:第3段注水│ │ ＋新章 │ 字数 2,340 · 自动保存于 14:32 │ │ │ │ [ ✍写本章 ] [ 🔍审稿 ] [ ✓验收 ] │ ⚑ F-012可回收 │ └────────┴──────────────────────────────────────┴───────────────┘ ``` 要点： - **中栏正文**：宋体、720px 居中、行高 1.9；AI 段落淡入；冲突句下朱砂波浪线，行内挂 `⚠` 锚点。 - **底部操作条**：`写本章 / 审稿 / 验收` 三主按钮 + 字数 + 自动保存时间。 - **右栏「本章助手」**： - *本章注入*：透明展示喂给 AI 的设定/伏笔（建立信任，对齐"状态可见"）。 - *四审*：四项实时状态（✓/⚠/评分），点击展开详情、跳转正文锚点。 - *伏笔提示*：本章可回收的伏笔。 - **专注模式**：`⌘\` 收起两侧，只剩正文 + 极简底栏。 ### 6.4 审稿报告页（四审汇总，对齐 §4 / §5.2） ``` ┌──────────────────────────────────────────────────────────────┐ │ 第128章 审稿报告 健康分 82 [ 重新审稿 ]│ ├──────────────────────────────────────────────────────────────┤ │ ① 一致性 (continuity) ⚠ 1 冲突 │ │ ⚠ [CONFLICT] 林衍血脉"先天觉醒"与第30章"后天淬炼"矛盾 │ │ ▸ 跳转第128章·第4段 ▸ 跳转第30章 [采纳改法] [忽略] │ │ │ │ ② 伏笔 (foreshadow-analyst) 2 建议 │ │ ⚑ 本章疑似回收 F-012(神秘玉佩) → [确认回收] [不是] │ │ ＋ 检测到新埋线"残破地图" → [登记为伏笔] [忽略] │ │ │ │ ③ 文风 (style-auditor) ◔ 92% │ │ 第3段相似度 71%(偏低) → 机翻腔 [一键回炉] [查看对比] │ │ │ │ ④ 节奏 (pace-checker) ⚠ 注水 │ │ 爽点节拍图 ▁▃▅▂▁▇ 章末无钩子建议补悬念 │ │ │ │ [ 全部处理完 → 验收本章 ] │ └──────────────────────────────────────────────────────────────┘ ``` 要点：四审分区卡片；每条 finding 都有**就地跳转** + **裁决按钮**（采纳/忽略/回炉/登记）；顶部健康分（0–100）。冲突=赭红、逾期=琥珀、通过=黛绿。 ### 6.5 设定库 Codex（人物 / 世界观 / 时间线） ``` ┌──────────────────────────────────────────────────────────────┐ │ 设定库 [人物 ●] [世界观] [时间线(P2)] 🔍 [✦ AI生成角色] │ ├──────────────────────────────────────────────────────────────┤ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ 林衍 │ │ 苏挽月 │ │ 玄渊真人 │ │ ＋ │ │ │ │ 主角 │ │ 女二·CP │ │ 导师 │ │ 生成群像 │ │ │ │ 首现 ·1 │ │ 首现 ·12 │ │ 首现 ·5 │ │ │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ 点开 → 人物卡详情(背景/性格/弧光/口癖/关系网图) │ └──────────────────────────────────────────────────────────────┘ ``` - 人物卡详情：左基础信息，右**关系网图**（与其他角色的边）；字段对齐 `characters` 表（role/backstory/arc/speech_tics/tags…）。 - 顶部 `✦ AI 生成角色` 打开角色生成器。 ### 6.6 角色生成器（模态/侧抽屉，对齐 §4.5） ``` ┌────────────────────── AI 生成角色 ──────────────────────┐ │ 一句话需求 │ │ ┌────────────────────────────────────────────────────┐ │ │ │ 亦正亦邪的女二，与主角有宿命纠葛，出身敌对势力 │ │ │ └────────────────────────────────────────────────────┘ │ │ 数量 [1 ▾] 定位 [女二/CP ▾] ☑ 自动过一致性校验 │ │ [ ✦ 生成 ] │ ├─────────────────────────────────────────────────────────┤ │ 预览（生成后） │ │ ┌─────────────────────────────────────────────────┐ │ │ │ 苏挽月 · 女二/CP ↻重roll ✎编辑 │ │ │ │ 性格: 表层清冷/内核执拗/阴影复仇 │ │ │ │ 背景: 灭门遗孤，混入仙门寻仇…… │ │ │ │ 关系: 与林衍→宿敌转知己 口癖:"……又如何" │ │ │ │ ✓ 一致性校验通过 │ │ │ └─────────────────────────────────────────────────┘ │ │ [ 丢弃 ] [ ✓ 入库 ] │ └─────────────────────────────────────────────────────────┘ ``` 群像批量时多张卡纵列，逐张 重roll/编辑/入库；底部「全部入库」。 ### 6.7 大纲编辑器（分卷分章 + 场景） ``` ┌──────────────────────────────────────────────────────────────┐ │ 大纲 〈逐光而行〉 [ ✦ AI 排大纲 ] │ ├──────────────────────────────────────────────────────────────┤ │ 卷三 · 风云会 │ │ ├ 第126章 血脉初探 beats: 觉醒前兆 / 长老试探 │ │ ├ 第127章 暗流 beats: 同门构陷 │ │ └ 第128章 血脉觉醒 ⚑ 可回收 F-012 beats: 觉醒 / 反杀 │ │ 场景: ① 静室盘坐 ② 血脉暴动 ③ 长老来袭 │ │ ＋ 加章 │ │ │ │ 侧提示: ⚑ F-012(玉佩)进入回收窗口(40-60章) 建议本卷安排 │ └──────────────────────────────────────────────────────────────┘ ``` - 卷/章树状；每章显示 beats + **伏笔窗口徽标**（⚑）。 - 右侧/底部主动提示接近回收窗口的伏笔（对齐 §4.2）。 ### 6.8 伏笔看板（Kanban + 依赖，对齐 §4.2） ``` ┌──────────────────────────────────────────────────────────────┐ │ 伏笔看板 筛选[全部▾] [主线] [逾期]│ ├───────────────┬───────────────┬───────────────┬──────────────┤ │ OPEN │ PARTIAL │ CLOSED │ ⚠ OVERDUE │ ├───────────────┼───────────────┼───────────────┼──────────────┤ │ F-014 残破地图│ F-012 神秘玉佩│ F-003 师门令牌│ F-007 旧誓约 │ │ 主线·埋于128 │ 埋8 收40-60 │ ✓ 收于 95 │ 应收≤110·已128│ │ │ 进展:23章发光 │ │ 琥珀高亮 ⚑ │ │ ───────────── │ [窗口将至] │ │ [安排回收] │ │ F-018 … │ │ │ │ └───────────────┴───────────────┴───────────────┴──────────────┘ ``` - 四列状态泳道；卡片含埋设/窗口/进展；**OVERDUE 列琥珀强调**。 - 点卡 → 详情 + 关联人物/势力 + 跳转埋设章。 ### 6.9 文风学习（样本 + 指纹） ``` ┌──────────────────────────────────────────────────────────────┐ │ 文风 [ ＋ 上传样本 ] │ ├──────────────────────────────────────────────────────────────┤ │ 样本: 旧作01(3.2万) 旧作02(2.1万) 合计 5.3万字 ✓ │ │ [ ✦ 提取文风指纹 ] │ ├──────────────────────────────────────────────────────────────┤ │ 文风指纹（16 维，每维附原文证据） │ │ 句长分布 短句为主 ▏▎▍ ▸证据:"刀光一闪。血。" │ │ 文白比 7:3 ▸证据:"……乃天地至理也" │ │ 四字结构 高频 ▸证据:"风雷激荡，气吞山河" │ │ 口头禅/语气词 … │ └──────────────────────────────────────────────────────────────┘ ``` - 每维**带原文引用证据**（对齐 §4.3）；支持增量补样本。 --- ### 6.10 模型与提供商设置（LLM 网关配置，对齐 PRODUCT_SPEC §3.3） 让作者按**能力档位**选提供商+模型、管理各家 API Key、配置回退。两块：①档位路由 ②提供商凭据。 ``` ┌──────────────────────────────────────────────────────────────┐ │ 设置 › 模型与提供商 │ ├──────────────────────────────────────────────────────────────┤ │ 能力档位路由 作用域 [全局 ▾] [本作品] │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ ✍ 写手档 创意/文笔 [Claude Opus ▾] 回退[DeepSeek-V3▾]│ │ │ │ 🔍 分析档 大纲/校对 [Claude Sonnet▾] 回退[DeepSeek-R1▾]│ │ │ │ ⚡ 轻量档 打分/节奏 [DeepSeek ▾] 回退[Qwen-turbo▾] │ │ │ └────────────────────────────────────────────────────────┘ │ │ 提示：作品级覆盖全局；单 Agent 可在 Skill 内再锁定 │ │ │ │ 提供商凭据 [ ＋ 添加提供商 ] │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ ● Anthropic ●●●●●●●●sk-…3f2 ✓已连接 caching✓ 思考✓ │ │ │ │ ● DeepSeek ●●●●●●●●sk-…9a1 ✓已连接 caching✓ │ │ │ │ ○ Kimi [ 输入 API Key ] [测试连接] │ │ │ │ ○ OpenAI [ 输入 API Key ] [测试连接] │ │ │ │ ○ 通义/GLM/Gemini … │ │ │ └────────────────────────────────────────────────────────┘ │ │ 能力徽标说明：caching=前缀缓存 · 结构化 · 思考/推理 · 工具 │ │ │ │ 用量与花费（本月） Claude $12.3 · DeepSeek ¥8.6 │ │ [ 查看按档位/作品明细 ] │ └──────────────────────────────────────────────────────────────┘ ``` 要点： - **档位路由**：三档各选「主模型 + 回退模型」；下拉只列**已连接**提供商的可用模型。**作用域切换**：全局默认 / 本作品覆盖（对齐 §3.3 三级覆盖；单 Agent 级在 Skill 内锁定）。 - **凭据管理**：每个提供商一行——Key 脱敏显示、`测试连接`、连接状态点（绿/灰）、**能力徽标**（caching / 结构化输出 / 思考 / 工具调用，缺失则灰显）。Key 仅后端密钥管理、前端永不回显明文。 - **能力降级提示**：若某档位选了不支持结构化输出/缓存的提供商，行内黄条提示"将自动降级为 JSON 提示+校验/跳过缓存"（对齐 §3.3 能力协商）。 - **用量花费**：按 `provider+model` 记账，月度概览 + 按档位/作品下钻（对齐 §3.3 记账）。 - **数据合规**：提供商行可标"境内/境外"，供作者按隐私/合规取舍（对齐 PRODUCT_SPEC §10）。 - **空态**：未配置任何 Key 时，引导"至少连接一个提供商即可开始"，并提供默认推荐（Claude 求质量 / DeepSeek 求性价比）。 --- ## 7. 组件库（Component Inventory） | 组件 | 说明 | 关键状态 | |---|---|---| | AppShell | 顶栏 + 左导航 + 主区 | 导航折叠/展开 | | ProjectCard | 作品卡 | 待办徽标 | | Wizard | 分步向导 | 步进/校验 | | Editor | 正文编辑器（宋体/720px） | 编辑/streaming/只读 | | ConflictMark | 正文内冲突锚点 | 朱砂波浪线 + 悬浮卡 | | AssistantPanel | 右侧本章助手 | 注入/四审/伏笔 tab | | ReviewCard | 四审分区卡 | ✓/⚠/评分 + 裁决按钮 | | CharacterCard | 人物卡 | 列表态/详情态/生成预览态 | | RelationGraph | 关系网图 | 节点/边 hover | | ForeshadowCard | 伏笔卡 | OPEN/PARTIAL/CLOSED/OVERDUE | | KanbanColumn | 看板泳道 | 四状态 | | FingerprintRow | 文风维度行 | 维度值 + 证据展开 | | GenerateModal | AI 生成模态（角色/世界观/大纲） | 输入/生成中/预览 | | Button | 主(朱砂实心)/次(描边)/文字 | hover/loading/disabled | | Badge | 徽标（伏笔/冲突/逾期/通过） | 4 语义色 | | Toast | 轻提示（已保存/已入库） | 成功/警告/错误 | | TierRouter | 档位→主/回退模型选择行 | 全局/作品作用域 | | ProviderRow | 提供商凭据行 | 已连接/未连接/测试中 | | CapabilityBadge | 能力徽标（缓存/结构化/思考/工具） | 支持/灰显缺失 | | ApiKeyInput | API Key 脱敏输入 | 输入/已存/测试连接 | 按钮规范：**主按钮**朱砂实心白字；**次按钮**朱砂描边透明底；AI 动作统一前缀 `✦`；破坏性动作（丢弃/删除）赭红文字 + 二次确认。 --- ## 8. 交互规范（关键模式） 1. **AI 生成（streaming）**：按钮转 loading → 正文/卡片逐字淡入 → 完成后浮现操作条（采纳/回炉/丢弃）。可中途「停止」=前端 abort 中断 SSE 连接（无队列同步模型，已生成部分保留在草稿）。 2. **冲突裁决**：`[CONFLICT]` 永不自动改稿；正文波浪线 + 报告条目双入口；裁决=`采纳改法 / 忽略 / 手动改`，忽略需记录（可沉淀为规则）。 3. **回炉重写**：文风漂移段/任意选中段 → `回炉` → 仅重写该段、保留上下文，新旧对比可 diff。 4. **验收 gate**：点验收弹「本次将更新」清单（章节摘要 / 伏笔状态 / 人物 latest_state / 触发的 OVERDUE）→ 确认才写库（对齐 PRODUCT_SPEC §5.4 三规则）。 5. **本章注入透明化**：右栏始终显示本次喂给 AI 的设定/伏笔条目，可点开看原文，建立信任。 6. **快捷命令面板**（`⌘K`）：老手直达「写本章/审稿/生成角色/跳转伏笔/搜设定」。 7. **自动保存**：正文持续自动保存，显示「保存于 hh:mm」；章节版本可回溯（对齐 `chapters.version`）。 --- ## 9. 关键状态设计 | 状态 | 表现 | |---|---| | 空（新作品无章节） | 纸感插画 + "从第一章开始" 引导按钮 | | 生成中 | 打字机淡入 + 朱砂光标 + 可停止 | | 四审进行中 | 四项骨架占位逐项点亮 | | 冲突未决 | 顶部计数徽标 + 验收按钮置灰提示"尚有冲突" | | 伏笔逾期 | 仪表盘/看板琥珀提醒 + 数字徽标 | | 错误（API 429/失败） | 友好文案 + 重试；不丢正文（已自动保存） | --- ## 10. 响应式与可访问性 - **断点**：≥1280 三栏全开；1024–1280 右栏转抽屉；<1024（平板）单栏 + 浮动工具，侧栏抽屉化。移动端只读+轻编辑。 - **可访问性**：正文/背景对比 ≥ 7:1（墨 on 米白达标）；朱砂红配文字另加图标/文案，不单靠色；全键盘可达；焦点环朱砂色；尊重 `prefers-reduced-motion`（关打字机动效）。 - **长写护眼**：行宽限 720px、行高 1.9；后续可加「夜读模式」与字号/行距偏好。 --- ## 11. 落地优先级（对齐 PRODUCT_SPEC §9 M1–M5） - **M1（P0）**：AppShell + 作品库 + 立项向导 + 写作工作台(正文+写本章) + 设定库基础 + **模型与提供商设置(至少连一个提供商)**。 - **M2**：审稿报告页(一致性) + 冲突就地裁决 + 验收 gate。 - **M3**：伏笔看板 + 大纲伏笔徽标 + 节奏报告。 - **M4**：文风学习页 + 漂移回炉交互。 - **M5**：角色/世界观生成模态、规则管理、命令面板、技能库。 --- ## 附：与 PRODUCT_SPEC.md 的映射校验 | UX 页面 | PRODUCT_SPEC 模块/端点 | |---|---| | 写作工作台 | §5.2 writer + §6 draft/review/accept | | 审稿报告页 | §4 四审 + §5.2 continuity/foreshadow/style/pace | | 设定库/角色生成器 | §3.2 characters + §4.5 character-gen | | 世界观设计器 | §5.2 worldbuilder + §6 world/generate | | 大纲编辑器 | §5.2 outliner + §6 outline | | 伏笔看板 | §4.2 foreshadow 账本 | | 文风学习 | §4.3 style-auditor + §6 style | | 本章注入透明化 | §3.5 检索注入 + §5.4 真相源 | | 验收 gate | §5.4 三规则（四审只读、经验收入库） | | 模型与提供商设置 | §3.3 LLM 网关：档位路由/凭据/能力降级/回退/记账 |