kai/writer-work-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1652ad9d2006e4a56a71ac9fd75f237ae4437c93
writer-work-flow/UX_SPEC.md
Yaojia Wang d3dc620a71 feat: Phase 0 — monorepo 骨架 + 全表迁移 + FastAPI/Next 骨架 + CI 
- uv(workspace) + pnpm monorepo；docker-compose(pg+api+web)
- SQLAlchemy 16 MVP 表 + Alembic 初版迁移(无漂移，users stub)
- FastAPI 骨架：统一错误信封(带 request_id) + structlog + /jobs/:id + OpenAPI
- Next.js 骨架：纸感主题 token + OpenAPI→TS 客户端代码生成(gen:api)
- CI(ruff/mypy/pytest + pg service + alembic 漂移校验)
- 四份设计规格(PRODUCT/UX/ARCHITECTURE/DEV_PLAN) + CLAUDE.md
2026-06-18 11:38:28 +02:00

503 lines
34 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 网文创作工作流 · 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 网关：档位路由/凭据/能力降级/回退/记账 |
Reference in New Issue View Git Blame Copy Permalink