桌面应用开发工具【免费下载链接】MooToolHandy tool set for developers项目地址https://gitcode.com/gh_mirrors/mo/MooTool点击查看免费下载本文基于 MooTool 下一代桌面端Compose for Desktop的设计差异记录 DIFF-086 展开讲述下一代产品如何以 Compose 组件与主题令牌逐一还原 Electron 版六类页面时间转换、正则测试、Cron 构建器、file-drop 行、计算器、Protobuf 定义区的视觉规格并解释源码中的实现证据。读完本文你将掌握这批布局令牌104dp 当前带、290px 正则结果列、65px 七字段、34dp file-drop 行、56dp 计算器结果、0.34/0.66 Protobuf 分栏在 Compose 中的落地方式与保留的交互语义。一、DIFF 编号体系与本文定位MooTool 下一代桌面端next-compose用「DIFF-xxxx」系列文档逐条记录与 Electron 版next/electron的行为差异格式统一为「原行为Electron」→「本产品行为」→「证据」→「未做」。DIFF-086 是其中一条典型的样式对齐差异style diff覆盖六个功能模块模块编号功能DIFF-086 关注点F18时间转换当前带、时区带去卡片壳F15正则三分栏布局与 flags 交互F16Cron七字段 compact 输入与运行区F14/F17/F03加密/二维码/格式化file-drop 行统一组件F21计算器结果与日志排版F07ProtobufJSON Tab 定义/转换 0.34/0.66 分栏配套文档还包括 DIFF-094FileDropRow与 P5 工具栏按钮、DIFF-085Protobuf Wire/转换中栏、色板分栏以及 DIFF-003、DIFF-004 等引擎类差异。二、时间转换当前带 104dp 最小高与「去卡片壳」Electron 原规格Electron 版时间页的 CSS 规格为.time-workspace圆角 8 边框.time-current-band最小高度 104px内边距 18/22标题 12px/600值区 10px faint 标签 18px 等宽值.time-zone-band内边距 16/2211px muted 标签快捷时区按钮 27px 高、分段式底色。Compose 实现下一代版本在 Controls.kt 中把关键尺寸抽为 Modifier 扩展/** Electron 时间工具「当前」带。 */ fun Modifier.mooTimeCurrentBand(): Modifier heightIn(min 104.dp) /** Electron 时间转换「转本地/转时间戳」操作行。 */ fun Modifier.mooTimeConvertActions(): Modifier heightIn(min 34.dp) /** Electron .time-quick-zones 快捷时区 segmented 容器。 */ fun Modifier.mooTimeQuickZones(): Modifier { return clip(RoundedCornerShape(7.dp)) .background(colors.control) // 27dp 快捷时区按钮 }在 TimeConvertScreen.kt 中CurrentBand按规格落地标题「当前」为12.spFontWeight.SemiBold颜色textMuted时间戳与本地时间值用18.spFontWeight.MediumFontFamily.Monospace单行省略TextOverflow.Ellipsis对应 Electron 的 18px 等宽 Medium值标签 10sp、每行带复制按钮值区最小高度 104dp「去卡片壳」体现在时区带与转换区DIFF-086 明确去掉 Electron 时区带/转换区的卡片壳改为在workspace底色上以1.dp borderSoft分隔线分层快捷时区则保留mooTimeQuickZones()的 7dp 圆角 segmented 容器。时区快捷按钮、转换区按钮仍使用primary expr语义详见下文第五节。三、正则测试weight(1)源文 290px 结果列flags 改 CheckboxElectron 原规格.regex-test-layout的布局是控件通栏 1fr源文 290px 固定结果列flags 为 10sp 勾选样式。Compose 实现RegexScreen.kt 的TestWorkspace直接复刻了这一结构顶栏表达式输入 测试/取消按钮内边距14.dpflags 行与表达式行之间以1.dp borderSoft分隔中部用BoxWithConstraints计算分栏源文列Modifier.width(sourceWidth.dp).widthIn(min 320.dp)默认宽度maxWidth * 0.71f可拖动分栏VerticalPaneHandle并持久化到settings.layout.pane结果列固定 290dp 语义在 Controls.kt 中定义为mooRegexResultsPane()即background(colors.surfaceSubtle).padding(14.dp)——surfaceSubtle底色成为结果区与源文区的「左缝」对应 Electron 的 290px 结果列外观匹配卡片MatchCard以 6dp 圆角 borderSoft边框列出序号、匹配值等宽、捕获组与命名组。flags 交互变更不再用primary闩锁按钮这是 DIFF-086 的一个关键交互差异Electron 版 flags 使用primary闩锁按钮选中即主色按钮下一代改为原生Checkbox 10sp muted 标签Composable private fun FlagButton(label: String, selected: Boolean, onClick: () - Unit) { Row(verticalAlignment Alignment.CenterVertically, horizontalArrangement Arrangement.spacedBy(6.dp)) { Checkbox(selected, { onClick() }) Text(label, color MooTheme.colors.textMuted, fontSize 10.sp) } }四个 flagsglobal / ignoreCase / multiline / dotAll以 14dp 间距横排状态写入session.options。底层匹配仍走 RegexEngine / RegexWorker 的 Java Pattern 引擎参见 DIFF-003worker 通过matchGeneration实现取消与竞态保护。四、Cron 构建器七字段 compact 输入 FlowRow 预设 两列运行区Electron 原规格.cron-fields七列minmax(65px, 1fr)、9sp 标签、32px 高输入表达式栏宽 340运行区通栏。Compose 实现CronScreen.kt 的构建器列逐项对应七字段second/minute/hour/day/month/week/year用FieldCell渲染Modifier.weight(1f).widthIn(min 65.dp) 9sp muted 标签 MooTextField(compact true)横排间距 7dp——正是minmax(65px, 1fr)的等价物预设区用FlowRowExperimentalLayoutApi水平/垂直间距均 5dp内联一个 9sp「预设」标签表达式栏右侧 pane用background(colors.surfaceSubtle).padding(18.dp)呈现输入框下方挂时区选择器ZonePicker与人类可读描述CronEngine.describe随语言自动刷新下次运行区两列排布session.runs.chunked(2)每个单元格mooCronRunCell()即heightIn(min 38.dp)Controls.kt序号 10sp 固定 24dp 宽运行时间 10sp 等宽表达式「解析」prominent 按钮支持 Enter 快捷键触发parseRuns成功后写入历史CronHistoryMetadata.encodeTimeZone。字段与表达式双向同步updateField通过CronEngine.build(fields)回写表达式输入表达式时CronEngine.split(it)反解字段构建与表达式编辑自动联动。五、file-drop 行统一FileDropRow组件与 11sp muted 文件名DIFF-086 中「摘要/二维码 Logo/格式化文件名 11 muted 单行省略」明确要求 file-drop 场景统一视觉组件落地于 Controls.ktfun FileDropRow( chooseLabel: String, fileName: String, emptyLabel: String, onChoose: () - Unit, modifier: Modifier Modifier, enabled: Boolean true, p5Toolbar: Boolean false, onDropFiles: ((Listjava.io.File) - Unit)? null, acceptMultiple: Boolean false, ) { // 行高 mooFileDropRow() heightIn(min 34.dp)10dp 间距 // MooButton(chooseLabel, p5Toolbar) 11sp muted 文件名maxLines1 Ellipsis }要点行高mooFileDropRow()定义为heightIn(min 34.dp)Controls.kt按钮与文件名之间 10dp 间距文件名 11sp muted、单行省略空态显示emptyLabel当传入onDropFiles时挂载desktopFileDropTarget见 FileDropDesktop.kt基于 ComposedragAndDropTarget读取DataFlavor.javaFileListFlavor拖拽悬停时显示 accent 色 6dp 边框按acceptMultiple决定取单文件或多文件当前消费者格式化文件 TabReformatScreen.ktonDropFiles直接loadSourceFile、摘要、二维码 Logo 等场景拖放区完整 drop 条在 DIFF-086 时点仍未测属于「未做」清单。按 DIFF-094行内按钮使用MooButton(p5Toolbar true)30dp 高、9/4 内边距、6dp 圆角、12sp 字号——这正是文件行中「选择」按钮的外观基准。六、计算器结果56dp 最小高 26sp 等宽 accent 10sp 日志CalculatorScreen.kt 右侧结果面板结果文本26.spFontFamily.Monospacecolors.accentmaxLines 3省略套mooCalculatorResultRow()heightIn(min 56.dp)Controls.kt 6dp 圆角 borderControl边框 14/8 内边距日志区每行 10sp 等宽、lineHeight 14.sp行与行之间以1.dp borderSoft分隔对应 Electron.calculator-output的底部分隔线每次运算成功会以$summary: $input $value写入日志头部并截断保留 12 条同时写入历史CalculatorHistoryMetadata.encode()。表达式行按 Enter 或点「」触发CalculatorWiringPresentation.runEvaluate错误码invalid-expression / non-finite / value-required 等映射为多语言错误文案。七、Protobuf JSON Tab0.34/0.66 分栏、消息名 10sp、104dp Hex/Base64ProtobufScreen.kt 的JsonTab使用通用双栏组件IoTwoPaneRowdefaultLeftFraction 0.34f即定义区 / 转换区按0.34 / 0.66分栏面板键protobuf-json可拖动并持久化左右最小宽 240 / 420左侧头部「定义」标题 11sp SemiBold格式化按钮走历史记录json|format消息名输入 10sp 标签 compact trueHex/Base64 选择区固定104dp 宽Hex/Base64两个按钮用primary session.format ...表达选中态保留闩锁语义右侧为 JSON 输入与二进制输出区操作按钮toBinary / toJson经ProtobufWiringPresentation.runJsonToBinary / runBinaryToJson走编译管线错误按 compile / missing-message / json / invalid-hex / invalid-base64 等错误码映射。Wire / Convert 两个 Tab 的中栏按钮沿用 DIFF-085 的 132px 中栏与mooProtobufConvertGrid()widthIn(min 120.dp).padding(horizontal 4.dp)规格。八、保留的语义约定primary expr、prominent 与 p5ToolbarDIFF-086 末尾强调一条全局约定时区快捷、Hex/Base64、工具栏「更多」仍用primary expr。在 Compose 实现中即「用表达式计算按钮选中态」primary session.zone zone、primary session.format Hex、primary open更多菜单收起态。MooButtonControls.kt同时提供prominent主操作、强底色与danger变体p5Toolbar true则切换到 30dp 高 / 9-4 内边距 / 6dp 圆角 / 12sp 的紧凑工具栏形态是全篇各模块共用的一致性基础。九、测试证据与「未做」边界DIFF-086 的证据约定为「desktopTest见docs/acceptance.md」即桌面端测试用例汇总在 next-compose/docs/acceptance.md且以Zulu 21.0.12.1、--offline模式运行验证。desktopTest 目录composeApp/src/desktopTest覆盖各引擎与 UI 逻辑若需构建运行可参考 next-compose/scripts/run.sh 与 next-compose/README.md 的 Gradle 命令。明确列入「未做」的部分包括翻译工具栏 30dp 与FileDropRow拖放区完整形态后续见 DIFF-094、DIFF-095Host 内嵌p5Toolbar系统 IME、托盘 TCC、产品窗 Tab 焦点帧、三平台安装验证。这些边界在后续 DIFF-0xx 系列中持续收敛阅读时可结合 feature-parity.md 与 ui-spec.md 对照整体进度。小结DIFF-086 是理解 MooTool 下一代桌面端「Electron 像素对齐 → Compose 组件抽象」的典型样本104dp 当前带、290px 正则结果列、65px 七字段、34dp file-drop 行、56dp 计算结果、0.34/0.66 Protobuf 分栏等全部沉淀为moo*系列 Modifier 扩展或FileDropRow/MooButton组件交互上则以「Checkbox 替代闩锁按钮」和「primary expr」两套约定完成了从 CSS 到 Compose 的语义迁移。赞分享桌面应用开发工具【免费下载链接】MooToolHandy tool set for developers项目地址https://gitcode.com/gh_mirrors/mo/MooTool点击查看免费下载相关推荐MooTool next-compose DIFF-051设置页 Electron 分组/分段/强调色色板与标题栏溢出的 Jetpack Compose 移植实现MooTool next compose DIFF 051设置页 Electron 分组/分段/强调色色板与标题栏溢出的 Jetpack Compose 移植桌面应用开发工具MooTool Next Compose 文本对比同步滚动、Git 前后分栏与 1080 工具栏溢出实现解析DIFF-043MooTool Next Compose 文本对比同步滚动、Git 前后分栏与 1080 工具栏溢出实现解析DIFF 043 导读 本文以 MooTool桌面应用开发工具MooTool next-compose1080 窄屏工具栏溢出与 compact 下拉实现DIFF-049MooTool next compose1080 窄屏工具栏溢出与 compact 下拉实现DIFF 049 本篇围绕 MooTool 仓库中 next桌面应用开发工具上一篇EXAONE 4.5-33B深度解析262K上下文视觉语言模型的技术实现与应用下一篇Godot Engine动画速度控制终极指南与实战技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考