企业官网建设流程全解析

• 桌面应用
• 开发工具

导读

本文解析 MooTool 下一代 Compose 桌面版（next-compose）中「P5 工具工作区外壳」的样式对齐设计与实现（对应技术文档 DIFF-091）。它解决的核心问题是：如何在跨平台 UI 重写中，让网络/IP（F11）、环境变量（F08）、HTTP（F09）、Host（F10）、系统信息（F25）这五类 P5 工具保持与 Electron 原版.p5-tool .local-tool-shell一致的视觉外壳——包括柔和投影、圆角边框、内边距，以及不同界面主题下的阴影与圆角差异。读完本文，你将掌握mooToolShell修饰器的完整参数语义、p5=true模式的渲染路径、五个 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-workspace（HTTP）、host-editor（Host），以及hardware-workspace（系统信息），它们整体都位于local-tool-shell之内。

此外，Electron 侧还存在工作区模式的扁平化变体：root .tool-page.tool-page--workspace > .local-tool-shell（见 global.css），这类壳不再以卡片投影呈现，而是贴合工作区边缘。这一「普通卡片壳」与「扁平工作区壳」的二分法，正是 Compose 侧mooToolShell中flatten分支的对应来源。

mooToolShell：Compose 侧的等价实现

Compose 桌面版在ui/components/Controls.kt中提供了等价的Modifier.mooToolShell扩展函数，源码位于 Controls.kt：

@Composable 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）。

p5=true 的渲染路径

当p5 = true时，函数跳过扁平化分支，直接走「卡片壳」路径：

1. padding(4.dp)提供壳内边距；
2. shadow(elevation, shape, ambientColor = colors.shadowSoft, spotColor = colors.shadowSoft)绘制柔和投影，其中投影高度在p5模式下固定为8.dp，而非普通壳的MooTheme.dimens.shellElevation；
3. clip(shape)与background(fill ?: colors.workspace)裁切圆角并填充工作区底色；
4. border(1.dp, stroke, shape)绘制 1dp 描边，描边颜色按主题风格差异化：smartisan/miui-v5使用colors.borderControl，hero使用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 工具中均已落地，但壳的覆盖范围因工具布局而异。逐一对应源码验证如下。

Net（F11 网络/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）与溢出操作区仍在壳外。

环境变量（F08）：Tab/搜索/表/脚栏单壳

环境变量工具把「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之外。

HTTP（F09）：集合右侧请求/响应列单壳

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分隔。这与文档描述「集合右侧请求/响应列单壳」完全一致。

Host（F10）：方案列表右侧编辑列单壳

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-088（Net/环境/硬件 P5 输入密度与标题栏）、DIFF-089（本地地址/HTTP 正文壳）、DIFF-090（P5 输出壳边影、Host 正文、HTTP 响应字号） 与 DIFF-092（翻译 P5 壳与环境作用域下拉），共同构成 P5 工具工作区样式对齐的完整脉络。

未做与后续计划

DIFF-091 明确记录了该差异的剩余工作：翻译工具（F20）的 P5 壳与环境作用域处理尚未完成，将由 DIFF-092 跟进（其"翻译 Tab + 三页内容套mooToolShell(p5=true)"的目标，从后续文档看已完成）；此外，系统 IME、托盘 TCC、产品窗 Tab 焦点帧、三平台安装验证仍未测试。环境作用域的密集样式（26 dense）则交由 DIFF-093 继续。这些"未做"条目体现了该系列差异文档以渐进切片方式推进样式对齐的工程方法，对需要移植相似双栏工具壳到 Compose 的读者同样具有参考价值。

• 桌面应用
• 开发工具