MooTool Compose 桌面版 P5 工具工作区壳（local-tool-shell）样式对齐实现解析（DIFF-091）-北京尧图网络

桌面应用开发工具【免费下载链接】MooToolHandy tool set for developers项目地址https://gitcode.com/gh_mirrors/mo/MooTool点击查看免费下载导读本文解析 MooTool 下一代 Compose 桌面版next-compose中「P5 工具工作区外壳」的样式对齐设计与实现对应技术文档 DIFF-091。它解决的核心问题是如何在跨平台 UI 重写中让网络/IPF11、环境变量F08、HTTPF09、HostF10、系统信息F25这五类 P5 工具保持与 Electron 原版.p5-tool .local-tool-shell一致的视觉外壳——包括柔和投影、圆角边框、内边距以及不同界面主题下的阴影与圆角差异。读完本文你将掌握mooToolShell修饰器的完整参数语义、p5true模式的渲染路径、五个 P5 工具的壳应用范围以及从 Electron CSS 到 Compose 声明式样式的等价映射方法。Electron 侧的 P5 工作区壳基线在 Electron 版本next/中local-tool-shell是绝大多数工具页工作区的主容器。其基础样式定义于 next/src/shared/styles/global.css.local-tool-shell { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 34px var(--shadow-soft); overflow: hidden; }它采用纵向 Flex 布局撑满工作区背景使用--surface-elevated默认投影为0 16px 34px var(--shadow-soft)。P5 工具在此基础上进一步收紧投影见同一文件的.p5-tool .local-tool-shell.p5-tool .local-tool-shell { box-shadow: 0 8px 24px var(--shadow-soft); }即在默认壳上把投影改为0 8px 24px var(--shadow-soft)视觉上更贴近工具面板而非页面卡片。DIFF-091 明确列出受此壳约束的 P5 工作区variables-workspace环境变量、net-workspace网络/IP、http-workspaceHTTP、host-editorHost以及hardware-workspace系统信息它们整体都位于local-tool-shell之内。此外Electron 侧还存在工作区模式的扁平化变体root .tool-page.tool-page--workspace .local-tool-shell见 global.css这类壳不再以卡片投影呈现而是贴合工作区边缘。这一「普通卡片壳」与「扁平工作区壳」的二分法正是 Compose 侧mooToolShell中flatten分支的对应来源。mooToolShellCompose 侧的等价实现Compose 桌面版在ui/components/Controls.kt中提供了等价的Modifier.mooToolShell扩展函数源码位于 Controls.ktComposable fun Modifier.mooToolShell( fill: Color? null, flatten: Boolean? null, endBorder: Boolean true, p5: Boolean false ): Modifier四个参数分别控制自定义背景填充色fill默认取colors.workspace、是否强制扁平化flatten为空时回退到主题的flattenWorkspaceToolPanels()、是否绘制右侧 1dp 分隔线endBorder、以及是否启用 P5 专用 8dp 投影p5。p5true 的渲染路径当p5 true时函数跳过扁平化分支直接走「卡片壳」路径padding(4.dp)提供壳内边距shadow(elevation, shape, ambientColor colors.shadowSoft, spotColor colors.shadowSoft)绘制柔和投影其中投影高度在p5模式下固定为8.dp而非普通壳的MooTheme.dimens.shellElevationclip(shape)与background(fill ?: colors.workspace)裁切圆角并填充工作区底色border(1.dp, stroke, shape)绘制 1dp 描边描边颜色按主题风格差异化smartisan/miui-v5使用colors.borderControlhero使用colors.borderSoft其余风格使用colors.border。这正好对应 Electron.p5-tool .local-tool-shell的0 8px 24px阴影、8px 圆角与 1px 边框实现「P5 工具独立于普通壳的投影层级」。flatten 分支与主题联动当扁平化生效flattenPanels !colors.restoresWorkspaceChrome() !p5时壳退化为纯背景加右侧 1dp 边线不绘制投影与圆角对应 Electron 的.tool-page--workspace .local-tool-shell扁平工作区模式。是否启用扁平化由主题决定MooTheme.kt中restoresWorkspaceChrome()对hero、claude、smartisan三种风格返回true而flattenWorkspaceToolPanels()是其取反见 MooTheme.kt。也就是说现代modern/quiet风格下工作区工具面板采用扁平边缘而 hero/claude/smartisan 风格下恢复完整的「工作区 chrome」卡片外壳与投影。p5 true会绕过扁平化分支因此即便在默认扁平化的主题下P5 工具也会强制保留卡片投影。这一点与 Electron 行为一致.p5-tool的壳投影是独立于--workspace页面模式声明的。圆角与投影的数值本身也是主题化的。MooTheme.kt为各 interfaceStyle 定义了shellRadius与shellElevation默认8.dp / 5.dp各风格取值从8.dp到14.dp圆角、4.dp到8.dp投影不等见 MooTheme.kt 与各风格定义段。mooToolShell的普通路径读取MooTheme.dimens.shellRadius与shellElevation而 P5 路径固定8.dp投影恰好对齐 Electron P5 工具独立声明的0 8px 24px。五个 P5 工具的壳应用范围DIFF-091 的核心结论是mooToolShell(p5 true)在五个 P5 工具中均已落地但壳的覆盖范围因工具布局而异。逐一对应源码验证如下。NetF11 网络/IP整页双栏单壳Net 工具采用「输出列功能区」的双栏布局整个双栏区域被套在单个壳内。在 NetScreen.kt 中Box( Modifier .weight(1f) .fillMaxWidth() .padding(horizontal 12.dp, vertical 8.dp) .mooToolShell(p5 true, endBorder false) ) { Row(Modifier.fillMaxSize()) { Column(Modifier.width(outputWidth.dp).widthIn(min 340.dp).fillMaxHeight()) { /* 输出区 */ } VerticalPaneHandle(/* 可拖分栏 */) Column(Modifier.weight(1f).widthIn(min 300.dp)...) { /* IPv4↔Long 等功能区 */ } } }壳的上下 8dp、左右 12dp 外边距包裹整个双栏VerticalPaneHandle支持输出列与功能区之间的拖动分栏。文档特别强调「整页双栏输出功能区单壳」这正是该 Box 的作用范围页标题行MooPageTitle与溢出操作区仍在壳外。环境变量F08Tab/搜索/表/脚栏单壳环境变量工具把「Tab 作用域搜索数据表脚栏」作为一个整体放入单壳但页标题保留在壳外。在 VariablesScreen.kt 中Column( Modifier .weight(1f) .fillMaxSize() .padding(horizontal 12.dp, vertical 8.dp) .mooToolShell(p5 true, endBorder false) ) { Row(Modifier.mooEnvWorkspaceHeader()...) { /* EnvTab 作用域 MooCompactSearch */ } /* 数据表 / 脚栏 */ }壳内首先是mooEnvWorkspaceHeader工具条包含环境/运行时两个 Tab、作用域下拉10sp 标签 MooMenu下拉按钮见 DIFF-092 对分段按钮的替换以及widthIn(140–260)的紧凑搜索框其下是数据表与脚栏。工具页标题variables.title与新增/刷新/导出/分离按钮所在的顶栏则位于mooToolShell之外。HTTPF09集合右侧请求/响应列单壳HTTP 工具采用「左集合列表右侧编辑区」布局壳只包住右侧的请求/响应编辑列集合列表保持独立。在 HttpScreen.kt 中Column( Modifier .weight(1f) .fillMaxHeight() .padding(12.dp) .mooToolShell(p5 true, endBorder false), verticalArrangement Arrangement.spacedBy(8.dp) ) { Row(Modifier.fillMaxWidth().mooHttpUrlBar()) { /* Method 下拉 URL 发送 */ } /* 请求参数 / 响应面板 */ }壳内包含 Method 下拉、URL 输入栏、发送/停止按钮及 Params/Headers/Cookies/Body 编辑区与响应面板与左侧CollectionPane之间由VerticalPaneHandle分隔。这与文档描述「集合右侧请求/响应列单壳」完全一致。HostF10方案列表右侧编辑列单壳Host 工具同样是「方案列表右侧编辑列」双栏壳只包裹右侧编辑列。在 HostScreen.kt 中Column( Modifier .weight(1f) .fillMaxHeight() .padding(12.dp) .mooToolShell(p5 true, endBorder false) ) { Row(Modifier.fillMaxWidth().mooHostEditBar().mooToolbarBackground()...) { /* 方案名工具按钮 */ } /* 方案正文 mooEditorFrame(flatten) */ }壳内是 Host 方案编辑条与正文编辑区。正文本身使用mooEditorFrame(flatten)见 Controls.kt即扁平化编辑框无投影、无圆角、仅右侧 1dp 边线配合 12sp 等宽字体与 16/18 内边距DIFF-090。系统信息F25采集结果滚动区单壳系统信息工具把「采集结果滚动区」套入单壳但 Tab 仍并入页标题工具栏该布局来自 DIFF-088 的标题栏合并。在 HardwareScreen.kt 中Column( Modifier .weight(1f) .fillMaxSize() .padding(horizontal 12.dp, vertical 8.dp) .mooToolShell(p5 true, endBorder false) ) { when { session.error.isNotEmpty() - Text(...) session.loading snapshot null - Text(...) groups.isEmpty() - Text(...) else - Column(Modifier.fillMaxSize().verticalScroll(...)) { /* 分组两列统计项 */ } } }壳内是系统/CPU/内存/存储/网络各分组的「两列 dt/dd」统计行来自 DIFF-083 的双列布局与刷新/复制操作系统信息 Tab 与刷新按钮所在的标题工具栏保持在壳外。验证与证据该差异的验收证据统一记录于 next-compose/docs/acceptance.md其中明确P5 的 F08/F09/F10/F11/F25 均有引擎单测与 UI运行环境为 Zulu JDK 21.0.12.1、--offline模式桌面测试套件覆盖数千条用例。此外Compose 侧存在专门的ModernToolShellCaptureTest见 ModernToolShellCaptureTest.kt用于捕获非 P5 工具页在 modern/quiet 默认扁平化壳mooToolShell()下的渲染证据其中也包含mooToolShell(endBorder false)的变体断言可作为壳修饰器在不同页面的行为对照。与 DIFF-091 配套的相邻样式差异还包括DIFF-088Net/环境/硬件 P5 输入密度与标题栏、DIFF-089本地地址/HTTP 正文壳、DIFF-090P5 输出壳边影、Host 正文、HTTP 响应字号与 DIFF-092翻译 P5 壳与环境作用域下拉共同构成 P5 工具工作区样式对齐的完整脉络。未做与后续计划DIFF-091 明确记录了该差异的剩余工作翻译工具F20的 P5 壳与环境作用域处理尚未完成将由 DIFF-092 跟进其翻译 Tab 三页内容套mooToolShell(p5true)的目标从后续文档看已完成此外系统 IME、托盘 TCC、产品窗 Tab 焦点帧、三平台安装验证仍未测试。环境作用域的密集样式26 dense则交由 DIFF-093 继续。这些未做条目体现了该系列差异文档以渐进切片方式推进样式对齐的工程方法对需要移植相似双栏工具壳到 Compose 的读者同样具有参考价值。赞分享桌面应用开发工具【免费下载链接】MooToolHandy tool set for developers项目地址https://gitcode.com/gh_mirrors/mo/MooTool点击查看免费下载相关推荐MooTool Next Compose 环境 / 系统信息 / Protobuf 操作按钮 P5 工具栏样式对齐DIFF-099实现详解MooTool Next Compose 环境 / 系统信息 / Protobuf 操作按钮 P5 工具栏样式对齐DIFF 099实现详解导读本文深入解桌面应用开发工具seedance-2.0 韩语影视词汇表实战指南用 한국어 精准控制 Seedance 2.0 镜头、光影、动作与美学seedance 2.0 韩语影视词汇表实战指南用 한국어 精准控制 Seedance 2.0 镜头、光影、动作与美学本指南以 seedance 2.0 仓桌面应用开发工具MooTool next-compose 样式对齐翻译页 P5 壳、编辑列最小宽度与环境作用域下拉改造DIFF-092MooTool next compose 样式对齐翻译页 P5 壳、编辑列最小宽度与环境作用域下拉改造DIFF 092 导读本篇围绕 MooTool 新桌面应用开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

MooTool Compose 桌面版 P5 工具工作区壳（local-tool-shell）样式对齐实现解析（DIFF-091）

相关推荐

PCBA制程应力监测实战：破解MLCC电容裂纹沉默失效

CAS单点登录自定义密码认证实战：从Handler实现到遗留系统适配

基于51单片机的坐姿矫正系统：超声波测距与报警策略详解

更多资讯

Web自动化测试环境搭建指南：Selenium与Python实战

滚动时域最优视角规划：面向真实场景的3D探索决策系统

华为单板硬件机考实战指南：电源检查、信号诊断与故障注入法

华为硬件机考实操指南：供电验证、信号完整性与故障定位

HAPS原型验证调试全指南：从信号注入到Deep Trace实战

632流程变革框架：从分层架构到落地执行的全链路指南

今日更新

防关联浏览器哪个好？三款产品实测差异解析

2026钢铁行业AI转型系统选型对比：多基地排产、大宗原燃料采购与质量追溯，六家厂商能力差异在哪里

影刀RPA深度实战：大模型Fine-tuning定制RPA专用Prompt与指令生成

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？