UI 与桌面交互规格

本文是 Compose 的设计规格，不是已经生成的 UI 或截图。布局参照当前 Electron，数值除特别说明外为 Compose 初始设计值，单位 dp/sp。

1. 总体设计

界面是高频工作的桌面工具箱：常用入口稳定、内容占主要空间、操作就近、结果可选可复制。默认以 Electron modern 风格为参照，保留浅灰侧栏、细分隔线、紧凑工具栏、白色或深灰工作区。

现代化体现在信息层级、密度、清晰反馈和完整交互。不要将工具页面改成居中的巨大卡片、营销标题、统计看板、手机底栏；不要给编辑器外面再套多层圆角背景。首页和设置可以使用分组内容，工具页应充分利用窗口。

2. 应用壳

┌────────────── OS 标题区 / 可拖动空白 / 窗口控制 ─────────────────┐
│ 侧栏 248       │ 工具专属 Tab / 主操作栏 / 分离收回入口          │
│ 折叠 搜索 分组 │───────────────────────────────────────────────│
│ 首页           │                                               │
│ 自定义分组     │          工具沉浸式工作区                       │
│ 内置工具列表   │     文件树 / 编辑器 / 结果 / 检查器              │
│ 最近（可选）   │                                               │
│                │                                               │
│ 语言 / 设置    │ 文件 / 保存状态 / 统计 / 任务状态               │
└────────────────┴───────────────────────────────────────────────┘

Electron 主窗口默认 1440×920、最小 1080×720；Compose 首轮沿用默认尺寸，以 1080×720 作为必须完整可用尺寸。
额外以 960×640 作为紧凑布局目标；验证通过后才放宽产品最小尺寸。窗口管理器强制更小时仍保留关闭/搜索和滚动路径。
侧栏初始 248，折叠 84；拖动范围建议 208–300，折叠宽度固定。状态按窗口角色保存，工具面板尺寸按工具保存。
顶部工具栏对照 --desktop-control：modern 48、hero 52、quiet 44；底部状态栏 24–28；窗口装饰区单独计算，不从截图像素直接当作内容高度。
标题区空白可拖动；按钮、输入、Tab、分割条、编辑区域不可被拖窗覆盖。
默认使用可靠的系统窗口装饰。自定义融合标题栏放在平台验证后做；保留 macOS 原生交通灯、Windows 系统菜单/贴靠、Linux 窗口管理器行为。不要在所有平台绘制假的 macOS 红黄绿按钮。
拆出的工具窗口不再渲染应用总侧栏；标题显示“工具名 · MooTool Next Compose”，保留工具栏、关闭收回行为与保存状态。

3. 尺度与视觉 Token

MooTheme 统一向 Compose 与编辑器适配层提供颜色、字体和密度。以下 Token 必须集中定义，不能逐页使用近似色。明暗值是初始建议，需视觉与对比度检查后冻结。

Token	Light	Dark	用途
workspace / surface	`#FFFFFF`	`#1C1C1E`	主工作与编辑背景
sidebar	`#F5F5F6`	`#242426`	导航
toolbar	`#FAFAFA`	`#222224`	工具栏
surfaceSubtle	`#F7F7F8`	`#252527`	次级分组
control	`#F1F1F2`	`#2C2C2F`	输入及次级按钮底色
border	`#E2E2E5`	`#39393D`	结构分隔
borderSoft	`#ECECEF`	`#303034`	侧栏右边线、卡片/弹层细边；modern 对齐 `data-interface-style='modern'` 的 `--border-soft`
borderControl	`#DCDCE0`	`#414146`	按钮、输入、分段、未选中开关边；modern 对齐 `--border-control`
borderControlHover	`#CCCDD1`	`#505056`	按钮/输入悬停边；对齐 `--border-control-hover`
surfaceCard	`#F4F4F5`	`#29292C`	首页卡片、设置分组、弹层底；modern 对齐 `--surface-card`（不是 `:root` 的 `#F2F2F3`）
surfaceCardHover	`#EDEDEE`	`#303033`	卡片悬停；对齐 `--surface-card-hover`
controlHover / controlActive	`rgba(0,0,0,.06)` / `#E7E7E9`	`rgba(255,255,255,.08)` / `#38383C`	次级按钮悬停/按下；对齐 `--control-hover` / `--control-active`
shadow / shadowSoft	`rgba(25,27,31,.10)` / `.065`	`rgba(0,0,0,.40)` / `.24`	弹层与卡片阴影；对齐 `--shadow` / `--shadow-soft`
textPrimary	`#202124`	`#EDEDEE`	主要正文
textStrong	`#1D1E21`	`#F7F7F8`	标题/分区；对齐 `--text-strong`
textBody	`#3D3E43`	`#D9D9DC`	介绍正文；对齐 `--text-body`
textMuted	`#76787E`	`#A8A8AE`	分组名与副文案；对齐 `--text-muted`
textSecondary	`#64676F`	`#B0B0B8`	辅助说明，比旧浅色更可读
accent	`#4F83CC`	`#85B4F0`	选中、链接、进度
accentAction	`#3F6FAE`	`#A9CCFA`	开关开、hero/smartisan 主按钮；modern 主按钮改走 prominent 中性色，见 DIFF-069
focusRing	`#316DC0`	`#94BDF4`	键盘焦点
success	`#246448`	`#88D5AF`	成功文字和图标
warning	`#82520A`	`#F1C56D`	警告
danger	`#AA302E`	`#FFAAA6`	错误和危险操作

不要将 accent 默认直接用作小字号白字按钮背景；选中底色与文字要独立计算。信息不能仅以红/绿区分，同时提供图标、说明和可定位目标。

类型	规格
间距	4/8/12/16/24/32；工具栏 gap 6–8、内边距 8–12
圆角	对照 Electron `--desktop-control-radius`：modern 9、hero 12、claude 10、smartisan 7、miui-v5 4、quiet 6；`editor-shell`/`vault-panel`/`settings-group` 走 `shellRadius`：modern 8、hero 14、claude 12、smartisan 10、miui-v5 5、quiet 8，见 DIFF-075；对话框 `radiusLarge` 12–16；主工作区不加整页圆角。JSON/HTTP 在 modern/quiet/miui 工作区压平（无壳圆角/阴影），hero/smartisan/claude 加回，见 DIFF-069。输入框底为 workspace/`--surface`，悬停边 `borderControlHover`，见 DIFF-072。下拉菜单走当前风格 surface；smartisan/miui 按钮保持 raised，见 DIFF-073
线条	1 dp，按 DPI 校准，避免分隔线重复叠加。分栏 `.pane-resizer` 命中区 10 dp，默认无线；悬停/焦点 1 dp 强调色 0.5，拖动 2 dp 0.9，见 DIFF-078
UI 字体	默认系统字体，正文 13 sp / Medium(500)；控件 12 sp / SemiBold(600)；设置范围 12–18；字号放大需同步增行高
编辑器字体	默认等宽 14 sp，建议随包提供获授权字体并配置中日韩/emoji 回退
标题	设置分类头 modern 18 sp / 650，其余 22 sp；hero Bold、claude 560、miui SemiBold、smartisan 650+高光字影；工具栏页标题 16 sp；分区 12–13 sp。工具页 Tab 为下划线选中，见 DIFF-075
状态栏	JSON/随手记/应用状态栏 10 sp `textMuted`，底为 toolbar 渐变，见 DIFF-071
开关/分段	modern/quiet/hero 无边开关；smartisan inset+红轨；miui 矩形橙轨；claude 纸色拇指；分段选中 smartisan raised、miui 底栏橙条
提示	`--tooltip-bg`/`--tooltip-text`：modern `#2E2E31`/`#fff`，hero 9dp、claude 8dp、miui 4dp，见 DIFF-071
行高	正文 1.4–1.5，编辑器 1.45–1.6；不能用固定像素高度截断字体
图标	线性统一风格，常用 16–18；有意义的图标按钮具备名称与 tooltip
命中区	桌面常规按钮对照 `--desktop-control-height`：modern/claude/smartisan/miui 34、hero 36、quiet 30；图标命中区至少 28–32
列表	标准 34–36 高；紧凑 30–32；多行内容按内容增高。Vault `.vault-node` 最小 36、圆角 5、悬停/选中 `--control`、13 sp 正文省略，见 DIFF-078
动效	hover/focus 80–140 ms，面板 120–180 ms；大文本不做整页进场动画

可访问性目标：正文对比度至少 4.5:1、关键非文本边界/焦点至少 3:1。此为本项目设计门槛，最终仍需测量实际状态组合；禁用项不作为唯一信息来源。

4. 导航与搜索

保留功能清单的 Tool ID、默认次序和 6 组；首页独立在最前。
classic 为默认；card 与 grouped 为独立设置选择。三者只改变导航表达，不改变业务与会话。
展开态文字+图标，选中态用风格块 navSelectedFill/navSelectedContent（hero 强调叠底、claude 暖底、miui 左侧条），选中边与图标色见 DIFF-074；折叠态提供完整名称 tooltip、可访问名称和明显选中标志。
自定义分组支持命名、工具选择、排序、删除组；删除组不删除工具数据。隐藏工具仍可搜索到。管理器为独立弹层，见 DIFF-055。
最近使用最多 5，默认不展示；点击当前工具不制造重复项。
侧栏自身纵向滚动，底部设置/语言入口固定可达；导航不带着整个工具页滚动。
标题栏动作顺序为折叠、搜索、管理分组，与 Electron sidebar-actions 一致；搜索 tooltip 含 ⌘K/Ctrl+K。见 DIFF-056。
Cmd/Ctrl+K 或侧栏搜索打开命令盘，匹配本地化名称、ID、中文/英文/日文关键词；↑↓选择、Enter 打开、Esc 关闭并把焦点归还原控件。弹层显示分组名，输入框内方向键有效。命令盘、分组管理器、工具内确认/输入弹层与关闭确认均为应用内遮罩（点空白关闭），见 DIFF-057、DIFF-059、DIFF-060、DIFF-071。关闭确认按钮顺序为隐藏到后台 / 退出 / 取消，与 Electron showMessageBox 一致。hero 遮罩 0.46、smartisan 0.42、miui 0.38、claude 0.34、其余浅色 0.24。
打开已分离工具时聚焦既有窗口，不创建第二个相同编辑器会话。右键/显式按钮提供分离与收回。

5. 页面布局模板

L1 文档工作区：JSON、随手记

┌────── 文档库 240 ─────┬──────── 编辑工具栏 ────────┬── 检查器 280 ──┐
│ 搜索 / 排序 / 新建     │ 文档名 / 保存状态 / 操作   │ 格式 / 转换    │
│ 目录树                │                           │ JSONPath       │
│                       │ 文本编辑器                │ 或快速替换     │
│                       │                           │                │
│ 路径与状态            │ 行列 / 选区 / 大小 / 换行 │ 可折叠         │
└───────────────────────┴───────────────────────────┴────────────────┘

文件树建议 200–320，中间编辑器优先剩余空间，右面板建议 240–340。JSON 左面板是文件 Vault，不要和右侧 JSONPath 结构树混淆。JSON 检查器：缩进分段、格式开关、转换两列网格、类名在转换区，JSONPath 后再到结果；路径树是额外能力。随手记中间支持编辑/分栏/预览；快速替换位于右侧。见 DIFF-052。

宽度不足时依次折叠右面板、总导航，再将文件树切为按需显示；编辑器不得被挤到只剩几个字。窄布局面板优先占据重排后的独立区域；若采用浮层，必须通过 Swing 叠层验收。Vault/检查器/编辑器外框见 DIFF-065；JSON/HTTP 工作区在 modern/quiet/miui 压平见 DIFF-069。

L2 文本变换：编解码、配置、格式化、Protobuf

┌──────── 类型 / 模式 Tab / 公共操作 ────────────────────────────┐
│ 输入/定义区              │ 转换操作 │ 输出/解码结果             │
│                           │          │                          │
└───────────────────────────────────────────────────────────────┘

遵循各工具当前左右/上下关系；Protobuf 保留 schema + message 名与三种 Tab，不能强塞为两个没有语义标签的文本框。类型 Tab 为 toolbar 底 + 选中下划线，见 DIFF-075。输入、输出都有名称、语言模式、复制/导入/导出适用操作。输出只读但可选择。

Host

┌── 方案列表 240 ──┬── 名称 / 查看系统 / 查找 / 保存 / 切换 Host ──┐
│ 搜索 / 搜内容     │                                              │
│ 新建              │  hosts 文本                                  │
│ 方案名 + 修改时间 │                                              │
│ 导入 导出 复制 删除│ 保存方案只写本产品数据；切换 Host 才改系统文件 │
└──────────────────┴──────────────────────────────────────────────┘

左列表约 220–240；右侧编辑器占剩余空间。系统 hosts 用独立只读查看，不和方案编辑混在同一输入框。

L3 HTTP

┌── 请求集合 240 ──┬── METHOD │ URL                         │发送/取消 ┐
│ 搜索 / 保存      │ Params │ Headers │ Cookies │ Body                │
│ 请求列表         │ 请求参数表 / 正文编辑器                           │
│                  ├─────────────────────────────────────────────────┤
│                  │ 状态码 / 耗时 / 大小 / 实际 URL                   │
│                  │ Body │ Headers │ Cookies                        │
│                  │ 响应内容                                        │
└──────────────────┴─────────────────────────────────────────────────┘

Method 固定适当宽度，URL 吃剩余宽度；发送按钮始终可见；请求/响应 Tab 为下划线选中，见 DIFF-076。响应与请求可调高度。失败或取消时保留请求和上次结果，旧结果标明“上次响应”。长 URL 不拉伸窗口。

L4 代码运行

上方 Java/Groovy、Python、Node.js Tab → 运行环境/参数/目录 → 代码编辑器 → 可拖动分隔条 → stdout/stderr、退出码与耗时。停止与运行处于同一操作区域，输出持续增长时默认跟随尾部，用户向上查看后暂停自动滚动。

L5 表格/批处理：PDF、环境变量、系统信息

顶部模式/刷新/导入，内容为列宽可控的真实表格；表头不与内容错位；行状态和失败原因就近显示。长路径中间省略并可 tooltip/复制；空表提供明确下一步。表格可以横向滚动，整页不可无意义横向滚动。

L6 媒体与展示：图片、二维码、调色板、留言板

图片：左图片库 + 中画布 + 上操作 + 下缩放。二维码：左参数/右预览。调色板：主色/对比色/调色区域分区。留言板：左控制/右大字预览。棋盘格只用于透明图背景；预览错误不能显示上一张图冒充本次成功。

L7 首页与设置

首页使用限宽内容、品牌与本产品版本、贡献者/帮助/作品等分区卡片；不变成工具入口网格首页。设置在主工作区显示 11 类左侧导航与右侧分组表单，返回工具保留原状态。危险或长耗时动作不做“修改字段即执行”。首页卡片与工作区/侧栏风格底见 DIFF-052。

6. 调整大小与桌面密度

以工作区实际可用宽度决策，不只用显示器宽度。BoxWithConstraints/自有布局将多个面板的最小宽度一起计算；weight 子节点允许收缩，列表/编辑器给定有限高度，禁止无限约束内嵌同向滚动。

窗口内容范围	行为
宽 ≥ 1440	三栏稳定展示，可展开检查器，编辑区占最大比重
1080–1439	优先收起非关键面板、工具栏低频操作收入“更多”，保留主要动作
960–1079（条件支持）	导航折叠；文件树/检查器按需切换；必要时左右变上下，不缩小字体
更小/高字号	允许局部滚动与可关闭面板，显示最小尺寸提示；不截掉保存/退出

拖动分隔条有 resize 光标、4–6 dp 命中区、双击恢复默认、键盘调整方式；保存比例时验证有限数值与最小内容尺寸。更换显示器恢复窗口时，将可操作标题区夹回可见范围。

7. 交互状态与错误反馈

每个适用页面覆盖：首次空态、正在读取、输入错误、执行中、成功、失败、取消、保存失败、无权限、缺少运行环境。纯计算瞬时完成不闪现假进度。

输入错误在相关字段旁显示，编辑器错误给行/列和跳转；不能只弹一瞬间 toast。复制/保存/备份成功另有右下角 toast（最多 4 条、可关闭），见 DIFF-076。
长任务在 300 ms 内给忙碌反馈，显示阶段和可取消状态；没有总量就用不确定进度。
点击复制后短暂反馈，并保留键盘焦点；系统剪贴板失败要报告。
格式化、批量替换、清空可撤销；文件删除和系统改动清楚显示对象及影响。
对话框限定高度、内部滚动，按钮始终可达；默认焦点避免落在不可恢复的危险动作。
成功信息就近呈现，避免所有工具统一弹“操作成功”而没有结果。

8. 键盘、输入法与可访问性

动作	macOS	Windows/Linux	范围
搜索工具	Cmd+K	Ctrl+K	当前应用窗口
设置	Cmd+,	Ctrl+,	当前应用
查找	Cmd+F	Ctrl+F	当前编辑器/可搜索列表
替换	使用平台习惯并在帮助中列出	同左	只在编辑器处理
保存	Cmd+S	Ctrl+S	当前文档/可保存实体
格式化	Cmd+Shift+F	Ctrl+Shift+F	当前可格式化编辑器
撤销	Cmd+Z	Ctrl+Z	当前编辑事务
重做	Cmd+Shift+Z	Ctrl+Y，并可支持 Ctrl+Shift+Z	当前编辑事务
运行/发送	Cmd+Enter	Ctrl+Enter	运行台/HTTP 等适用页
Escape	先输入法/局部弹层，再搜索/演示/对话框	相同	不一键退出整个应用

快捷键由统一注册与优先级路由：IME 预编辑 > 当前编辑器 > 当前工具 > 窗口 > 应用；相同事件只消费一次。预编辑与提交后短暂抑制见 DIFF-064。自定义快捷键要检测冲突并显示平台实际符号，不能在 Windows 写死 ⌘。

中文预编辑时不重写全文、不自动格式化、不拦截 Enter 导致误发送。选区、emoji、组合字符、列编辑、Tab/Shift+Tab、软换行都需要实测。右键菜单、鼠标双击选词、触控板横纵滚动与系统复制粘贴保持自然。

交互节点有角色、标签、选中/禁用/展开语义；focus ring 不因鼠标样式消失。键盘焦点使用 2dp 外描边且间距 2dp（对照 Electron outline / outline-offset），见 DIFF-061、DIFF-066、DIFF-068。复杂树提供方向键展开/折叠，错误可以由键盘定位。Compose 与 Swing 两套节点需分别测试读屏。官方当前列出的平台边界见基线资料，Linux 不能声称完整读屏支持。

9. 视觉验收

P0/P1 用独立测试数据截取当前 Electron 默认配置；至少首页、JSON、随手记、HTTP、设置、拆出窗口，明暗两套。比较相同内容尺寸、DPI、字体设置、语言和数据，截图同时记录基线信息。

每个工具保存默认/填充/错误状态；重要页面追加窄窗口与高字号。验收优先检查入口、面板比例、动作位置、可读性及滚动，再检查像素差异。字体渲染与系统装饰允许平台差异；不能用“原生差异”解释按钮缺失、内容遮挡或失焦。

所有截图必须来自实际程序，不用设计稿作为实现验收。文档中的文本线框是布局约定，不代表已做视觉比对。