UI、样式与交互规格
1. 对齐方法
Electron 1.1.4 的信息架构、工具位置、面板关系、操作方向为基线。默认 modern + system theme + blue + classic；亮/暗实测用固定主题，避免跟随系统造成截图不一致。先读取 next/src/shared/styles/global.css 的有效规则与页面组件，再在相同客户区尺寸/字体/DPI/语言/数据下截图。
本文件的尺寸/Token 是FX设计目标；其中主窗口与导航宽度来自源码观察，其他建议尺寸需结合Electron实测微调。现代化应提高文字清晰度、焦点可见性和操作一致性，不能把全部工具改成大留白仪表盘、满屏卡片或手机页面。
保持桌面工具箱的高信息密度：工具导航在左，工作区主导，工具栏紧凑，输入/输出可直接编辑或复制。表单和编辑区用弱分隔组织，层级明确但不堆叠厚边框、渐变、强阴影。
2. 主窗口与导航
目标外框默认1440×920，最小1080×720；独立工具窗口默认1100×760、最小760×560。系统工作区较小时夹取可见范围并启用窄布局，不强行让最小尺寸把窗口推到屏幕外。系统装饰高度按OS实际记录。
┌─────────────────────────────────────────────────────────────┐
│ 系统窗口装饰 / 经验证的HeaderBar │
├─────────────┬───────────────────────────────────────────────┤
│ 搜索 │ 工具自身工具栏 / Tab / 文件状态 │
│ 首页 ├────────────┬────────────────────┬──────────────┤
│ 文本 │ 可选左侧库 │ 主编辑/结果/画布 │ 可选检查器 │
│ 开发 │ 或请求集合 │ │ /操作区 │
│ 网络 │ │ │ │
│ 编码 │ │ │ │
│ 日常 │ │ │ │
│ 系统 ├────────────┴────────────────────┴──────────────┤
│ 最近(可选) │ 文档/任务状态、必要统计 │
│ 设置/版本 │ │
└─────────────┴───────────────────────────────────────────────┘
左侧展开248逻辑单位、隐藏标题84；可调整的扩展行为保持默认参照值。顶部保留搜索；底部设置稳定可达。首页独立于六分组；顺序text/dev/network/encode/daily/system，工具次序严格按F00–F25注册表。
默认导航行高36，紧凑32；图标16–18，左右内边距12–16；当前项圆角8、低饱和强调背景并有文字/形状状态，不能只靠颜色。分组标题12，行间距4，组间距12–16。隐藏标题模式有Tooltip、可访问名称和键盘焦点，不依赖悬停才知道当前工具。
支持classic/card/grouped、隐藏标题/工具、分隔线、紧凑、自定义组/顺序、最近5项。自定义组不改变Tool ID；隐藏项仍可被命令搜索找到。选择工具不重置其内容；右键或行末提供分离/收回，键盘也能访问。
除首页外全部使用沉浸工具工作区：功能栏尽可能贴近顶部，不增加一层重复“工具名+说明+卡片”的大标题。设置在主工作区打开并有返回，返回后恢复原工具，不每次弹新设置窗口。
3. 设计 Token
颜色集中在ThemeSnapshot与CSS；表中的强调操作色提高了默认小字对比度，是FX主动改进，Electron源色 #4f83cc/#3f6fae 可用于装饰或对齐截图时比对。
| Token | 浅色建议 | 深色建议 | 用途 |
|---|---|---|---|
| window | #F7F7F8 |
#18191C |
窗口底色 |
| sidebar | #F1F2F4 |
#202126 |
导航区 |
| workspace | #FBFBFB |
#1B1C20 |
大工作区 |
| surface | #FFFFFF |
#24262B |
输入/弹层/表面 |
| surface-soft | #F4F5F7 |
#2B2D33 |
次级块/hover |
| text-primary | #242426 |
#F0F1F3 |
正文/标题 |
| text-secondary | #5C6068 |
#B6BAC4 |
次级文字 |
| border-soft | #E4E6EB |
#373A43 |
装饰分隔 |
| border-control | #858C99 |
#808898 |
需要边界辨识的输入/选择控件 |
| accent | #2864B4 |
#90BAFA |
主操作/链接/焦点 |
| on-accent | #FFFFFF |
#14223A |
强调面文字 |
| accent-soft | #E8F0FC |
#293C5A |
导航选中/提示 |
| success | #246748 |
#82CCA8 |
成功文字/图标 |
| warning | #815414 |
#E7BC70 |
警告文字/图标 |
| danger | #B13F39 |
#F0A39B |
错误/危险动作 |
文本对比目标：普通文本≥4.5:1、大文本≥3:1；重要图标、焦点及识别边界≥3:1。表中颜色仍须在实际叠加背景/透明度下测量；弱分隔线不是唯一识别手段。此处是项目验收标准，不能据此宣称已经通过整套可访问性认证。
间距用4、8、12、16、24、32；常规页面内边距16–24，工具栏8–12；控件间距8。圆角：输入/按钮6–8、导航8、对话框12；只有浮层用轻阴影。分隔线1逻辑单位并考虑高DPI对齐；禁止各种控件随意使用不一致圆角。
字体默认系统UI、13；正文可调12–18，说明最小12；代码等宽14、行高约1.45–1.6。重要文本不靠10px小字维持版面。CJK字体回退在三平台真机检查；UI英数与中文基线一致，编辑器emoji不掉字；用户选择不存在的字体时显示回退。
按钮/输入默认高32，主要动作32–36，紧凑28（只适用于工具栏）；桌面图标按钮命中区域至少28×28，常规32×32。小图标可16px，不能把点击区也缩成16px。焦点描边2，键盘/指针都可发现；不可通过全局CSS去掉focus。
六强调色 yellow/coral/blue/green/red/purple，各自计算on-accent和focus，黄底不要白字。六风格 modern/quiet/hero/smartisan/miui-v5/claude 保留名称与设置入口，P1先完成modern深浅，P6补齐其他风格；风格改变表面/边框/字体细节，不改变核心命令位置或状态语义。不能把六个名称映射同一套颜色即算支持。
4. JavaFX CSS 和布局实现
浏览器的CSS变量、grid/flex、color-mix()与拖拽区域属性不能原样用于FX。布局使用BorderPane/HBox/VBox/GridPane/SplitPane/StackPane，颜色用looked-up colors，尺寸用Java常量或自定义styleable属性。JavaFX CSS官方参考
以下仅是颜色/状态写法示例，完整主题须覆盖控件皮肤和编辑器：
.root {
-mt-surface: #ffffff;
-mt-text: #242426;
-mt-accent: #2864b4;
-mt-on-accent: #ffffff;
-fx-background-color: -mt-surface;
-fx-font-size: 13px;
}
.label { -fx-text-fill: -mt-text; }
.button.primary {
-fx-background-color: -mt-accent;
-fx-text-fill: -mt-on-accent;
-fx-background-radius: 8;
-fx-padding: 6 12;
}
.button:focused {
-fx-border-color: -mt-accent;
-fx-border-width: 2;
-fx-border-radius: 8;
}
不要在每页散落 setStyle；用语义styleClass及:invalid/:busy等自有pseudoClass。表格/树的cell factory要清理复用cell上的文字、图标、事件和Tooltip，避免滚动后显示上一行状态。
可折叠pane同时处理visible/managed以及SplitPane.items，折叠后释放空间，展开恢复比例。给编辑器、表格和ScrollPane合适的min/pref/max与grow，防止长文本撑破窗口；比例按scene布局完成后恢复并夹到有效范围。拖动分隔条提供可见hover及更宽命中区。
主题变更覆盖主Scene、工具Stage、Popup、Tooltip、ContextMenu、DialogPane、编辑器和预览。设置字体/主题不重建全视图，不清空文档undo。系统色彩变化可热更新，失败保留用户手动light/dark可用。
5. 常用组件与状态
P1建立组件样本页（开发入口，不占正式工具ID），展示：主/次/ghost/危险按钮、图标按钮、搜索、输入/选择/复选框、Tab、分栏、表格/树、结果编辑器、空态、inline错误、加载/进度、toast、dialog、menu、tooltip，覆盖default/hover/pressed/focused/disabled/busy/invalid。
- 每个工具只有一组清楚的主动作；复制/导入/历史是次级动作。不可将“清空”放成默认回车动作。
- 输入无效就近标原因、行列/字段，可跳转；出错保留输入和有标记的上次结果。Toast只提示短结果，不代替必须读取的错误。
- 执行期间显示真实进度或明确不定进度；取消后状态稳定，迟到响应不可重新标成功。
- 空态说明此工具接受什么并给真实“粘贴/导入/填入示例”入口；示例只有用户点击后进入输入，不能伪装为执行结果。
- 历史/收藏用搜索列表+详情/恢复；危险删除确认对象，清空可撤销则优先提供撤销。右键动作也有键盘通路。
- 对话框焦点进入可操作控件，Tab不逃逸，Esc取消，关闭后还给触发者；owner跟随当前宿主Stage。长内容自身滚动，底部动作保持可见。
6. 关键页面结构
JSON（F04）
SplitPane：Vault 220–280 | 主编辑器 flex | 检查器 260–340，默认约240/flex/300；工具栏32–40高。左树可搜索/折叠，主编辑器占最大面积，右侧转换/JSONPath面板折叠但有常驻入口。格式化、压缩、字体/换行、复制、查找、导入/导出、历史、更多、清空按源码顺序核对。
状态条显示校验/错误定位、字符/行、文档保存；检查器结果可复制；JSONPath树/表达式和结果保持关联。不能把原版三栏改成格式化按钮加两个小文本框。
随手记（F01）
Vault 240 | 编辑/预览 flex | 快速替换 220–280；编辑/分栏/预览模式位置稳定。标题/文件路径、保存状态和字体动作在紧凑栏，主要空间交给正文。附件拖放有落点提示，保存中不闪烁重置光标；快速替换按选区优先执行。
HTTP（F09）
请求集合 240 | 请求/响应工作区；右上Method+URL+发送/取消一行，URL获得剩余宽度。请求Tab为Params/Headers/Cookies/Body，响应为Body/Headers/Cookies；请求/响应上下SplitPane可调。状态码、耗时、大小位于响应头；参数表支持键盘增删/多行粘贴。分离至760宽仍可发送/取消，次级项进入更多菜单。
代码运行（F05）
Java/Groovy、Python、Node.js主Tab，首Tab内部选择Java或Groovy；上代码、下输出。运行/停止、执行路径、参数/工作目录入口和状态在工具栏；错误流有明确标识、文字可选择。切语言不丢草稿，运行时保持输出滚动控制。
文本对比/转换（F02/F06/F13等）
优先保留左右输入/输出与中间方向动作；窄窗口可以上下排列但方向标记同步变化。对比支持模式、差异计数与上下差异、同步滚动；转换输出保留只读/可编辑语义，复制不自动反写输入。
图片、PDF（F23/F24）
图片：操作栏、左图库、中画布、底部缩放/尺寸；图库可折叠，多选批量动作明显。透明图棋盘只在画布，不能误写到导出。PDF：拆分/合并顺序、任务表、页码/范围/排序、进度/最近输出；结果路径可打开，不用全屏卡片隐藏批量任务。
留言板与时钟（F19/F18）
留言板左控制、右大字；演示全屏隐藏编辑控件，有键盘可退出的方式，Esc先退出演示。字号自适应不裁字；保留选择主题和对齐，防休眠状态与展示会话生命周期一致。时钟退出恢复原窗口bounds/最大化状态。
设置（A01）
主工作区的返回+标题；左类别220左右、右内容flex，右侧表单限宽约760。11类按功能表次序，类别独立滚动；设置更改确实生效，持久化失败显示并回滚或标未保存。实时设置与需要重启设置明确区分；未实现项写原因，不能做无效果开关。
7. 窗口适配、键盘和可访问性
按可用工作区宽度而非物理屏幕判断：≥1100展示常规三栏；850–1099允许右辅助栏默认折叠；<850优先保留主编辑器，将左库/右面板改为可打开抽屉/单面板切换。阈值是起始设计值，逐工具在最小窗口验收后调整；不改变用户主动保存的宽屏面板偏好。
工具栏不足时次级动作进入有文字的更多菜单，主动作/取消/返回不得消失。任何尺寸无控件相互覆盖、不可达按钮或外框水平滚动；表格和编辑器可在其内部合理滚动。
| 快捷键（Primary为macOS Cmd，其他Ctrl） | 作用 |
|---|---|
| Primary+K | 命令搜索，当前实际窗口可用 |
| Primary+, | 设置，返回不丢当前工具 |
| Primary+F | 查找 |
| macOS Cmd+Option+F；Windows/Linux Ctrl+H | 替换；保留macOS Cmd+H的系统隐藏行为 |
| Primary+S | 保存当前文档/方案，不能隐式应用系统hosts |
| Primary+Z / Shift+Primary+Z | 撤销/重做，Windows可兼容Ctrl+Y |
| Primary+Shift+F | 格式化当前支持内容 |
| Primary+Enter | 适用工具的运行/发送；输入法组合中不触发 |
| Esc | 先关闭搜索/菜单/对话框或退出演示，再处理工具取消 |
快捷键按焦点和scope路由，编辑器复制/撤销优先；独立窗口注册/注销对应Scene accelerators，不能一个键执行两次。不默认注册抢占其他产品的系统全局热键；需要时允许用户自选且冲突可见。
控件提供Label关联、accessibleText/role、结果/错误可读语义，图标不做唯一说明，更新状态避免高频读屏打扰。以Tab/Shift+Tab/方向/Enter/Esc完成搜索、换工具、编辑、运行、保存和返回。实际在macOS VoiceOver、Windows读屏/Java Access Bridge、Linux目标环境验收并记录支持范围，不因使用JavaFX就宣称全部可访问。
8. 视觉验收
必拍首页、JSON、随手记编辑/预览、HTTP、运行、图片、PDF、设置、搜索、工具独立窗口；modern浅/深、中文/英文/日文、1440×920和1080×720；独立窗口760×560，另测系统缩放100/125/150/200%。
保存Electron与FX成对截图、设置及差异编号；对齐客户区后分区域检查。建议核心分栏/工具栏几何误差≤8逻辑单位或区域尺寸2%，超出逐项说明；字体栅格化/系统装饰另列，不用一个整体像素相似分数判定全部通过。
通过条件：导航/面板/动作可对应，无裁剪/溢出，文本可读，焦点和命中区达标，暗色无残留亮色菜单，主题/字号不丢状态，截图中的按钮确实执行对应功能。改造前后给同输入/同窗口对比，主动改善写入FX差异记录。