4.3 KiB
4.3 KiB
阶段 0 · UI 与交互原型说明
主界面定稿以需求 §3 为准。本文件说明：整体画面结构、操作逻辑、阶段 0 原型的对应关系。
1. 画面结构（自上而下五段）
┌──────────────────────────────────────────────────────────────┐
│ 标题栏 图标 · 文档名（未保存圆点） — □ × │
├──────────────────────────────────────────────────────────────┤
│ 菜单栏 文件 编辑 段落 格式 视图 主题 帮助 │
├──────────────────────────────────────────────────────────────┤
│ 标签栏 文档A × │ 文档B ●× │ ＋ │
├──────────────┬───────────────────────────────────────────────┤
│ 侧边栏 │ │
│ [文件|大纲] │ 编辑区（正文限宽居中） │
│ 树 / 标题树 │ 标题 · 正文 · 代码块 · 表格 │
│ │ │
├──────────────┴───────────────────────────────────────────────┤
│ 状态栏 字数 字符 行/列 UTF-8 换行 保存状态 模式 缩放 │
└──────────────────────────────────────────────────────────────┘
视觉定调（与大王既定品味一致）：中性灰白、低饱和石板色点缀、适度圆角（6/8px）、无投影堆叠、无渐变、无卡片墙；深色为深灰非纯黑；正文字体与行距优先，界面元素全部退后。
2. 操作逻辑要点
- 单一编辑区：默认即时渲染，不出现左右分栏预览；源码模式是整区切换（Ctrl 切换后光标/选区尽量保持），不是第二块常驻区域。
- 侧边栏：文件/大纲双页签，
Ctrl+Shift+L开合，宽度可拖、状态记忆；关闭后编辑区扩展但正文宽度不变（只改边距，不改阅读版心）。 - 大纲：标题树实时跟随文档模型；点击定位、当前标题高亮、拖拽排序直接改文档结构（走编辑器事务，可撤销）。
- 标签页：未保存显示圆点；关未保存标签必弹保存确认；右键菜单含关闭其他/右侧/全部。
- 表格：光标进入表格时上方浮现轻量工具栏（增删行列/对齐/删表），离开即消失，不占版面。
- 图片：选中浮现操作条（缩放保比例/对齐/替换/删除）；粘贴图片自动落盘到资源目录并插入相对路径。
- 专注/打字机/全屏：F8/F9/F11；三者可叠加；全屏下鼠标触顶临时呼出菜单。
- 状态栏即信息源：字数（中文按字、英文按词，代码块计入可配置）、光标行列、编码、换行符、保存状态、当前模式，一眼确认文档状态，不另设信息卡片。
3. 阶段 0 原型对应关系（prototype/）
原型已落地的结构：标题栏占位行、菜单行（仅原型内真实动作：切换示例、撤销/重做、源码模式切换、侧边栏开关、序列化面板开关、导出 md）、侧边大纲（实时生成、点击定位）、中央编辑区（限宽 860px 居中）、右侧序列化面板（验证用，正式版无此面板）、底部状态栏（字数/字符/行数/编码/模式）。
原型刻意未做（避免假功能）：真实窗口控制、文件打开/保存对话框、文件树、主题切换——均为阶段 1/4/5 内容，原型菜单不放占位按钮。
4. 交互验收口径
阶段 2 起每个编辑特性按「输入 → 即时呈现 → 光标落点 → 撤销一步回退 → 保存重开一致」五点验收；阶段 0 的人工清单见 03 号报告 §4。