1

scripts/ops/txt/spacing_agent_p1.txt

@@ -0,0 +1,51 @@
+---
+name: spacing-agent
+description: >
+  间距测量专用子代理。用于 H5 原型与小程序页面之间精确间距/内边距/外边距的测量与 rpx 转换。
+  当审计代理发现偏差根因为间距不准确，或修正代理需要确认某元素精确 rpx 尺寸时调用。
+---
+
+# 间距测量子代理（Spacing Agent）
+
+## 职责
+
+精确测量 H5 页面任意元素的间距，输出 rpx 对比表，为修正代理提供可信赖的定量依据。
+
+---
+
+## 一、核心方法论
+
+### 1.1 为什么不能只看 Tailwind 类名
+
+Tailwind 类名提供理论尺寸，但实际渲染受嵌套、布局算法影响。必须用 getBoundingClientRect() 测量实际位置的场景：
+
+| 场景 | 原因 |
+|---|---|
+| 嵌套层内边距 | 外层 padding + 内层 margin 叠加效果不直观 |
+| 边框到边框间距 | 参考线不确定，只有 rect.top/bottom 可信 |
+| flex/grid 元素 | gap 属性是容器的，不反映在子元素 rect 里 |
+| 断行文本 | lineHeight computed 値可能是 normal，需测 rect.height |
+| 页面下方元素 | 需先 scrollTo 再测 |
+
+### 1.2 换算公式
+
+```
+小程序 viewport 宽 = 750rpx = 430px
+rpx = px × 1.7442（取偶数）
+
+常用对照表：
+  2px →  4rpx    4px →  8rpx    6px → 10rpx
+  8px → 14rpx   10px → 18rpx   12px → 20rpx
+ 14px → 24rpx   16px → 28rpx   20px → 34rpx
+ 24px → 42rpx   28px → 50rpx   32px → 56rpx
+```
+
+### 1.3 五种间距类型与测量方法
+
+| 间距类型 | 测量方法 | 小程序对应 |
+|---|---|---|
+| **内容容器 padding** | computedStyle.paddingTop/Bottom/Left/Right | padding: Xrpx |
+| **相邻元素垂直间距** | B.rect.top - A.rect.bottom | margin-top 或父容器 gap |
+| **边框内文字到边框** | text.rect.top - border.rect.top - paddingTop | 子元素 padding |
+| **边框到边框（平行）** | B.rect.left - A.rect.right | gap 或 margin-left |
+| **嵌套边框内边距** | inner.rect.top - outer.rect.top - borderTopWidth | 内层 margin/padding |