★ FEATURED ARTICLE 桌面应用开发工具【免费下载链接】MooToolHandy tool set for developers项目地址https://gitcode.com/gh_mirrors/mo/MooTool点击查看免费下载导读MooTool Next FX 是基于 OpenJDK OpenJFXJavaFX构建的跨平台桌面工具箱独立产品线其 UI 与交互规格next-fx/docs/ui-spec.md以 Electron 版next/的信息架构为基线定义了主窗口与导航骨架、现代设计 Token、JavaFX CSS 实现手法、关键页面结构与窗口/键盘/可访问性行为。本文系统拆解这份规格并结合next-fx/当前源码如 MainWindow.java、base.css、JsonView.java逐项佐证落地细节帮助你直接复用这套高信息密度的桌面工具箱设计体系或在此基础上做视觉验收与二次开发。1. 规格定位与对齐基线该规格的定位不是从零设计而是以 Electron 1.1.4 的信息架构、工具位置、面板关系、操作方向为基线做 JavaFX 现代化移植。对齐方式明确如下默认配置为modern system theme blue classic亮/暗截图验收时用固定主题避免跟随系统主题导致截图不一致对齐步骤先读取next/src/shared/styles/global.css的有效规则与页面组件再在相同客户区尺寸/字体/DPI/语言/数据下截图主窗口与导航宽度来自源码观察其他建议尺寸需结合 Electron 实测微调。同时规格强调了一个重要的设计原则现代化应提高文字清晰度、焦点可见性和操作一致性不能把全部工具改成大留白仪表盘、满屏卡片或手机页面必须保持桌面工具箱的高信息密度——工具导航在左、工作区主导、工具栏紧凑、输入/输出可直接编辑或复制用弱分隔组织层级避免堆叠厚边框、渐变和强阴影。2. 主窗口与导航架构2.1 布局骨架与尺寸规格给出目标外框尺寸主窗口默认1440×920、最小1080×720独立工具窗口默认1100×760、最小760×560。这些数值已经直接落在源码常量中见 MainWindow.javapublic static final double DEFAULT_WIDTH 1440; public static final double DEFAULT_HEIGHT 920; public static final double MIN_WIDTH 1080; public static final double MIN_HEIGHT 720;独立工具窗口的1100×760 / 760×560则在 ToolWindowCoordinator.java 中创建 Stage 时设置。规格同时要求系统工作区较小时夹取可见范围并启用窄布局不强行让最小尺寸把窗口推到屏幕外源码中的clampToVisible()正是这一约束的实现限制在Screen.getPrimary().getVisualBounds()内。整体骨架如下┌─────────────────────────────────────────────────────────────┐ │ 系统窗口装饰 / 经验证的HeaderBar │ ├─────────────┬───────────────────────────────────────────────┤ │ 搜索 │ 工具自身工具栏 / Tab / 文件状态 │ │ 首页 ├────────────┬────────────────────┬──────────────┤ │ 文本 │ 可选左侧库 │ 主编辑/结果/画布 │ 可选检查器 │ │ 开发 │ 或请求集合 │ │ /操作区 │ │ 网络 │ │ │ │ │ 编码 │ │ │ │ │ 日常 │ │ │ │ │ 系统 ├────────────┴────────────────────┴──────────────┤ │ 最近(可选) │ 文档/任务状态、必要统计 │ │ 设置/版本 │ │ └─────────────┴───────────────────────────────────────────────┘对应 JavaFX 侧MainWindow.java 使用BorderPane承载root.setLeft(sidebar)、root.setCenter(workspace)workspace 为StackPane以支持工具/设置/组件样本页的切换规格中提到的“底部状态栏”则在具体工具视图中用BorderPane.setBottom挂载。2.2 导航栏几何与交互左侧导航的关键几何参数源码实现见 NavigationLayout.java参数默认展开隐藏标题紧凑导航宽度248 逻辑单位84 逻辑单位行高3632图标尺寸16–18同左左右内边距12–16同左当前项圆角8同左分组标题字号12同左行间距4同左组间距12–16同左对应的源码常量即为EXPANDED_WIDTH 248、COMPACT_WIDTH 84、REGULAR_ROW_HEIGHT 36、COMPACT_ROW_HEIGHT 32并有 NavigationLayoutTest.java 断言这些数值。导航行为要点源码见 Sidebar.java顶部保留搜索框输入即过滤工具ToolRegistry.search匹配 id、标题 key 与关键字底部设置按钮稳定可达开发模式下额外显示组件样本页入口与版本号首页独立于六分组分组顺序严格为text/dev/network/encode/daily/system工具次序严格按注册表ToolRegistry.java 的GROUP_ORDER当前项不能只靠颜色区分源码中.mt-nav-item.selected通过accent-soft背景 文字/形状状态共同表达并保持键盘焦点.mt-nav-item:focused用 2 逻辑单位 accent 描边隐藏标题模式必须有 Tooltip、可访问名称和键盘焦点源码中每个导航项都设置了setTooltip(title)与setAccessibleText(title)支持 classic/card/grouped 三种导航风格、隐藏标题/工具、分隔线、紧凑模式、自定义组/顺序、最近 5 项自定义组不改变 Tool ID隐藏项仍可被命令搜索找到搜索走ToolRegistry与是否隐藏无关选择工具不重置其内容会话缓存右键或行末提供分离/收回键盘也能访问——ToolId除首页MOOTOOL外均detachable()ToolWindowCoordinatorTest.java 用 50 次分离/收回循环验证“同一 Node 往返移动且首页不可分离”。2.3 沉浸式工作区与设置除首页外全部工具使用沉浸工具工作区功能栏尽可能贴近顶部不额外增加一层“工具名说明卡片”的大标题。设置在主工作区内打开并带返回返回后恢复原工具不每次弹出新设置窗口——源码 MainWindow.java 中openSettings/closeSettings通过previousTool记录并在返回时openTool(previousTool)恢复。3. 设计 Token 体系3.1 Token 表颜色集中在ThemeSnapshot与 CSS 文件中。表中的强调操作色已针对小字对比度做了改进属于 FX 的主动改进项Electron 源色#4f83cc/#3f6fae可用于装饰或对齐截图时比对可在 next/src/shared/contracts/settings.ts 的accentColorPresets与 next/src/shared/styles/global.css 中找到这两个源色。Token浅色建议深色建议用途window#F7F7F8#18191C窗口底色sidebar#F1F2F4#202126导航区workspace#FBFBFB#1B1C20大工作区surface#FFFFFF#24262B输入/弹层/表面surface-soft#F4F5F7#2B2D33次级块/hovertext-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错误/危险动作这些 Token 在仓库中已逐项落地light.css 与 dark.css 通过-mt-*looked-up colors 定义ThemeSnapshot.java 在apply(Scene)中按顺序挂载tokens.css → base.css → light/dark.css并在 root 上添加theme-light/theme-dark与accent-name样式类来切换外观与强调色。3.2 对比度、间距、圆角与字体文本对比度目标普通文本 ≥4.5:1、大文本 ≥3:1重要图标、焦点及识别边界 ≥3:1。表内颜色仍须在实际叠加背景/透明度后测量弱分隔线不是唯一识别手段。规格明确这是项目验收标准不能据此宣称已经通过整套可访问性认证。间距使用 4、8、12、16、24、32常规页面内边距 16–24工具栏 8–12控件间距 8圆角输入/按钮 6–8、导航 8、对话框 12——在 tokens.css 中体现为-mt-radius-control: 8、-mt-radius-dialog: 12分隔线1 逻辑单位并考虑高 DPI 对齐禁止各控件随意使用不一致圆角字体默认系统 UI、13px正文可调 12–18说明最小 12代码等宽 14px、行高约 1.45–1.6重要文本不靠 10px 小字维持版面。CJK 字体回退需在三平台真机检查UI 英数与中文基线一致编辑器 emoji 不掉字用户选择不存在的字体时显示回退。源码中 tokens.css 的字体栈为SF Pro Text, PingFang SC, Hiragino Sans GB, Noto Sans CJK SC, Segoe UI, system编辑器字体栈在 base.css 中为Menlo, SF Mono, JetBrains Mono, monospace控件尺寸按钮/输入默认高 32主要动作 32–36紧凑 28仅工具栏桌面图标按钮命中区域至少 28×28常规 32×32小图标可 16px但不能把点击区也缩成 16px焦点描边 2 逻辑单位键盘/指针都可发现不可通过全局 CSS 去掉 focus。3.3 强调色与风格体系六强调色yellow/coral/blue/green/red/purple各自计算 on-accent 与 focus黄底不要白字。源码在 light.css 与 dark.css 中实现了每个强调色的-mt-accent / -mt-on-accent / -mt-accent-soft例如黄色浅色为#B78300 / #241C00、深色为#E7BC70 / #241C00确实避免黄底白字。六风格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 属性。规格给出的颜色/状态写法示例完整主题须覆盖控件皮肤和编辑器.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; }仓库的 base.css 正是按此模式实现.button.primary使用 accent 背景 on-accent 文字.button:focused用 2 逻辑单位 accent 描边导航选中用-mt-accent-soft.tool-bar使用 workspace 底 1px 底部 border-soft 分隔。同时用自有 pseudoClass 表达状态例如 JsonView.java 依据JsonEngine.validate结果切换:valid/:error样式在 base.css 中分别映射到 success/danger 文字色。规格还给出几条强制实现约定不要在每个页面散落setStyle使用语义 styleClass 与:invalid/:busy等自有 pseudoClass表格/树的 cell factory 要清理复用 cell 上的文字、图标、事件和 Tooltip避免滚动后显示上一行状态可折叠 pane 同时处理visible/managed以及SplitPane.items折叠后释放空间展开恢复比例给编辑器、表格和 ScrollPane 合适的min/pref/max与 grow防止长文本撑破窗口比例按 scene 布局完成后恢复并夹到有效范围拖动分隔条提供可见 hover 及更宽命中区base.css 中.split-pane-dividerpadding 为0 4扩大命中区主题变更覆盖主 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状态。源码中 ComponentGallery.java 已实现一个初级样本页主/危险按钮、搜索框、复选框、下拉、进度条、错误标签、富文本编辑器仅在开发模式identity.development()下从侧边栏进入。状态与交互约定规格原文要点每个工具只有一组清楚的主动作复制/导入/历史是次级动作不可将“清空”放成默认回车动作输入无效就近标原因、行列/字段可跳转出错保留输入和有标记的上次结果Toast 只提示短结果不代替必须读取的错误执行期间显示真实进度或明确不定进度取消后状态稳定迟到响应不可重新标成功空态说明此工具接受什么并给真实“粘贴/导入/填入示例”入口示例只有用户点击后进入输入不能伪装为执行结果历史/收藏用搜索列表 详情/恢复危险删除需确认对象清空可撤销则优先提供撤销右键动作也有键盘通路对话框焦点进入可操作控件Tab 不逃逸Esc 取消关闭后还给触发者owner 跟随当前宿主 Stage长内容自身滚动底部动作保持可见。6. 关键页面结构以下页面结构是规格的验收目标多数已在 Electron 基线中有实装FX 侧正按注册表与功能规格逐工具推进当前 AppServices.java 已实现 Home、JSON、编码、正则视图其余为占位视图。6.1 JSONF04SplitPaneVault 220–280 | 主编辑器 flex | 检查器 260–340默认约 240/flex/300工具栏 32–40 高。左树可搜索/折叠主编辑器占最大面积右侧转换/JSONPath 面板折叠但有常驻入口。格式化、压缩、字体/换行、复制、查找、导入/导出、历史、更多、清空按源码顺序核对。FX 侧的 JsonView.java 正是三栏SplitPane(vaultPanel, editor.view(), inspector)检查器prefWidth(300)、初始分隔比例0.18/0.72左侧 Vault 与右侧检查器setResizableWithParent(false)工具栏项依次为格式化primary、压缩、换行切换、复制、查找、保存、历史、更多、清空、分离buildToolbar与规格的核对顺序一一对应。状态条实时显示JsonEngine.validate的校验结果与错误定位JSONPath 面板支持表达式查询并持久化草稿600ms 防抖 SQLite 存储查找栏为可折叠 find barvisible/managed联动Ctrl/CmdS 保存到当前 Vault 文件。规格明确不能把原版三栏改成“格式化按钮 两个小文本框”。6.2 随手记F01Vault 240 | 编辑/预览 flex | 快速替换 220–280编辑/分栏/预览模式位置稳定。标题/文件路径、保存状态和字体动作在紧凑栏主要空间交给正文。附件拖放有落点提示保存中不闪烁重置光标快速替换按选区优先执行。6.3 HTTPF09请求集合 240 | 请求/响应工作区右上 MethodURL发送/取消一行URL 获得剩余宽度。请求 Tab 为 Params/Headers/Cookies/Body响应为 Body/Headers/Cookies请求/响应上下 SplitPane 可调。状态码、耗时、大小位于响应头参数表支持键盘增删/多行粘贴。分离至 760 宽仍可发送/取消次级项进入更多菜单。6.4 代码运行F05Java/Groovy、Python、Node.js 主 Tab首 Tab 内部选择 Java 或 Groovy上代码、下输出。运行/停止、执行路径、参数/工作目录入口和状态在工具栏错误流有明确标识、文字可选择。切语言不丢草稿运行时保持输出滚动控制。6.5 文本对比/转换F02/F06/F13 等优先保留左右输入/输出与中间方向动作窄窗口可以上下排列但方向标记同步变化。对比支持模式、差异计数与上下差异、同步滚动转换输出保留只读/可编辑语义复制不自动反写输入。6.6 图片、PDFF23/F24图片操作栏、左图库、中画布、底部缩放/尺寸图库可折叠多选批量动作明显。透明图棋盘只在画布显示不能误写到导出。PDF拆分/合并顺序、任务表、页码/范围/排序、进度/最近输出结果路径可打开不用全屏卡片隐藏批量任务。6.7 留言板与时钟F19/F18留言板左控制、右大字演示全屏隐藏编辑控件有键盘可退出的方式Esc 先退出演示。字号自适应不裁字保留选择主题和对齐防休眠状态与展示会话生命周期一致。时钟退出恢复原窗口 bounds/最大化状态。6.8 设置A01主工作区的返回 标题左类别 220 左右、右内容 flex右侧表单限宽约 760。11 类按功能表次序类别独立滚动设置更改确实生效持久化失败显示并回滚或标未保存实时设置与需要重启设置明确区分未实现项写原因不能做无效果开关。FX 侧的 SettingsView.java 与此完全对齐顶部“返回 标题”左ListView类别prefWidth 220右ScrollPane内容限宽 760SettingsCategory.java 定义了 11 个类别GENERAL/APPEARANCE/LAYOUT/EDITOR/NETWORK/DATA/VAULT/RUNTIME/TOOLS/SHORTCUTS/ABOUT其中 General语言 zh_CN/en_US/ja_JP、Appearancetheme/accent/fontSize 12–18、Layout最近/紧凑/分隔线/隐藏标题四开关、Editor自动换行、Data数据目录与 About 已有真实控件其余类别以 WIP 徽标 原因文字呈现对应规格“未实现项写原因”。持久化采用原子写写.tmp后 ATOMIC_MOVE见 SettingsStore.java。7. 窗口适配、键盘与可访问性7.1 响应式断点按可用工作区宽度而非物理屏幕判断≥1100常规三栏850–1099允许右辅助栏默认折叠850优先保留主编辑器将左库/右面板改为可打开抽屉/单面板切换。阈值是起始设计值逐工具在最小窗口验收后调整不改变用户主动保存的宽屏面板偏好。工具栏不足时次级动作进入有文字的更多菜单主动作/取消/返回不得消失任何尺寸下控件不得相互覆盖、出现不可达按钮或外框水平滚动表格和编辑器可在其内部合理滚动。7.2 快捷键表规格定义的快捷键Primary 为 macOS Cmd其他平台为 Ctrl快捷键作用PrimaryK命令搜索当前实际窗口可用Primary,设置返回不丢当前工具PrimaryF查找macOS CmdOptionFWindows/Linux CtrlH替换保留 macOS CmdH 的系统隐藏行为PrimaryS保存当前文档/方案不能隐式应用系统 hostsPrimaryZ / ShiftPrimaryZ撤销/重做Windows 可兼容 CtrlYPrimaryShiftF格式化当前支持内容PrimaryEnter适用工具的运行/发送输入法组合中不触发Esc先关闭搜索/菜单/对话框或退出演示再处理工具取消源码中的落地证据MainWindow.java 用 Scene Accelerators 注册了 PrimaryK聚焦搜索、Primary,打开设置、PrimaryF查找并监听 Esc 在设置打开时返回JsonView.java 注册了 PrimaryS 保存且通过sceneProperty在分离/收回时注册/注销 Accelerator避免一个键执行两次。规格还要求快捷键按焦点和 scope 路由编辑器复制/撤销优先独立窗口注册/注销对应 Scene accelerators不默认注册抢占其他产品的系统全局热键需要时允许用户自选且冲突可见。7.3 可访问性控件提供 Label 关联、accessibleText/role、结果/错误可读语义图标不做唯一说明更新状态避免高频读屏打扰以 Tab/ShiftTab/方向/Enter/Esc 完成搜索、换工具、编辑、运行、保存和返回。实际在 macOS VoiceOver、Windows 读屏/Java Access Bridge、Linux 目标环境验收并记录支持范围不因使用 JavaFX 就宣称全部可访问。源码层面 Sidebar.java 已为导航项设置setAccessibleText(title)Tooltip 同时服务于隐藏标题模式与读屏语义。8. 视觉验收标准必拍页面首页、JSON、随手记编辑/预览、HTTP、运行、图片、PDF、设置、搜索、工具独立窗口。必拍组合modern 浅/深、中文/英文/日文主窗口 1440×920 与 1080×720独立窗口 760×560另测系统缩放 100/125/150/200%。验收方法保存 Electron 与 FX 成对截图、设置及差异编号对齐客户区后分区域检查建议核心分栏/工具栏几何误差≤8 逻辑单位或区域尺寸 2%超出逐项说明字体栅格化/系统装饰另列不用一个整体像素相似分数判定全部通过。通过条件导航/面板/动作可对应无裁剪/溢出文本可读焦点和命中区达标暗色无残留亮色菜单主题/字号不丢状态截图中的按钮确实执行对应功能改造前后给同输入/同窗口对比主动改善写入 FX 差异记录。构建与截图环境可参考 next-fx/README.md 中的./mvnw javafx:run运行入口。小结这份 UI 规格的价值在于把“以 Electron 为基线、以 JavaFX 为落点”的移植目标量化成了可验收的尺寸、Token、状态与键盘约定从 248/84 的导航宽度、三栏 JSON 工作区、11 类设置到 PrimaryK/Esc 的快捷键路由每一层都有明确的源码对应MainWindow.java、ThemeSnapshot.java、base.css、ToolWindowCoordinator.java 等。后续按 P1–P7 推进时只要对照这份规格逐项截图、逐项记录 FX 差异就能稳定收敛出一套高信息密度、可访问、可适配窄屏的 JavaFX 桌面工具箱。赞分享桌面应用开发工具【免费下载链接】MooToolHandy tool set for developers项目地址https://gitcode.com/gh_mirrors/mo/MooTool点击查看免费下载相关推荐MooTool Next FX 源码基线解析以 Electron 版为对照的 JavaFX 桌面工具箱工程基线MooTool Next FX 源码基线解析以 Electron 版为对照的 JavaFX 桌面工具箱工程基线 导读 MooTool Next FX 产品桌面应用开发工具MooTool Next FX 技术架构解析OpenJDK JavaFX 桌面工具箱的分层、线程与编辑器契约MooTool Next FX 技术架构解析OpenJDK JavaFX 桌面工具箱的分层、线程与编辑器契约 本文围绕 next fx/docs/arch桌面应用开发工具MooTool Next FX基于 OpenJDK JavaFX 构建跨平台桌面工具箱独立产品线的工程指南MooTool Next FX基于 OpenJDK JavaFX 构建跨平台桌面工具箱独立产品线的工程指南 本文围绕开源仓库 gh_mirrors/mo/桌面应用开发工具上一篇终极数据可视化大屏指南实时监控与业务指标展示方案下一篇【亲测免费】 Mushroom Dashboard Strategy自动化你的Home Assistant仪表盘创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
