小程序迁移 静态页面完成！！！

docs/miniprogram-dev/h5-migration/appendix/spacing-dictionary.md

@@ -0,0 +1,180 @@
+# 附录A：Spacing 与尺寸字典 v3.0
+
+> 角色：默认尺寸 token 候选表  
+> 用途：把 Tailwind 的 spacing / size 类，转换成适合微信小程序的 `rpx` / `px` 实现  
+> 重要声明：本表是**默认候选表**，不是所有尺寸都必须机械套表
+
+---
+
+## A.1 使用边界
+
+### A.1.1 适用范围
+
+以下场景可优先使用本表：
+
+- 容器内外边距：`p-*`、`px-*`、`py-*`、`m-*`
+- 列表、卡片、模块之间的块级间距
+- 主容器宽高、卡片尺寸、按钮高度
+- Flex/Grid 间隙：`gap-*`
+- 一般性的 `top/right/bottom/left`
+- 来自 spacing scale 的固定 `w-*` / `h-*`
+
+### A.1.2 不适用范围
+
+以下场景不要机械套表：
+
+- `1px` 发丝线
+- 阴影 blur / spread
+- 小图标绘制尺寸
+- 小控件（星星、状态点、勾选框）尺寸
+- 绝对定位的 1~4px 微调
+- 安全区 / 状态栏补偿
+- 任何“在 412 宽真机上需要与 H5 绝对贴齐”的细节点
+
+---
+
+## A.2 换算基础
+
+项目验收基准宽度：**412 CSS px**
+
+换算公式：
+
+```text
+rpx = px × (750 / 412)
+    ≈ px × 1.8204
+```
+
+默认取值策略：
+
+- 默认四舍五入到整数 `rpx`
+- 同一 token 全项目保持一致
+- 真机视觉偏差明显时，允许修正 1~2rpx
+
+---
+
+## A.3 默认 spacing → rpx 映射表（26 个值）
+
+| Tailwind 值 | rem / px | CSS px | 项目默认 rpx token | 推荐用途 | 备注 |
+|---|---:|---:|---:|---|---|
+| `0.5` | `0.125rem` | 2 | 4rpx | 极小间距 | 仅限布局缝隙，不建议用于描边 |
+| `px` | `1px` | 1 | 2rpx | 极细尺寸 | 如需发丝线，优先直接保留 `1px` |
+| `1` | `0.25rem` | 4 | 8rpx | 极小 padding / gap | 常用 |
+| `1.5` | `0.375rem` | 6 | 12rpx | 小间距 | 常用 |
+| `2` | `0.5rem` | 8 | 14rpx | 小 padding / gap | 常用 |
+| `2.5` | `0.625rem` | 10 | 18rpx | 小间距 | 常用 |
+| `3` | `0.75rem` | 12 | 22rpx | 小按钮内边距 / 块间距 | 常用 |
+| `3.5` | `0.875rem` | 14 | 26rpx | 中小尺寸 | 常用 |
+| `4` | `1rem` | 16 | 30rpx | 主流 padding / gap | 高频 |
+| `5` | `1.25rem` | 20 | 36rpx | 中等间距 | 高频 |
+| `6` | `1.5rem` | 24 | 44rpx | 主模块间距 | 高频 |
+| `7` | `1.75rem` | 28 | 52rpx | 中等尺寸 | 次高频 |
+| `8` | `2rem` | 32 | 58rpx | 大 padding / 高度 | 高频 |
+| `9` | `2.25rem` | 36 | 66rpx | 中大尺寸 | 常用 |
+| `10` | `2.5rem` | 40 | 72rpx | 输入框 / 按钮高度候选 | 高频 |
+| `11` | `2.75rem` | 44 | 80rpx | 点击区域 / 高度 | 高频 |
+| `12` | `3rem` | 48 | 88rpx | 大按钮 / 模块高度 | 高频 |
+| `14` | `3.5rem` | 56 | 102rpx | 中大控件尺寸 | 常用 |
+| `16` | `4rem` | 64 | 116rpx | 卡片图标容器 / 大尺寸 | 常用 |
+| `20` | `5rem` | 80 | 146rpx | 大控件 / 空态图 | 常用 |
+| `24` | `6rem` | 96 | 174rpx | 大尺寸块 | 常用 |
+| `28` | `7rem` | 112 | 204rpx | 大图容器 | 次高频 |
+| `32` | `8rem` | 128 | 232rpx | 模块大尺寸 | 次高频 |
+| `40` | `10rem` | 160 | 292rpx | 大留白 / 偏移 | 仅布局层 |
+| `64` | `16rem` | 256 | 466rpx | 大容器高度 | 慎用 |
+| `72` | `18rem` | 288 | 524rpx | 宽容器 / 大图 | 慎用 |
+
+---
+
+## A.4 Arbitrary spacing / size 处理规则
+
+### A.4.1 基本规则
+
+当 H5 使用 arbitrary 值，例如：
+
+- `h-[38px]`
+- `top-[44px]`
+- `w-[86px]`
+- `px-[13px]`
+
+执行顺序如下：
+
+1. 先保留原始 `px` 数值  
+2. 判断它属于“可缩放布局尺寸”还是“需保留绝对质感的细节尺寸”  
+3. 前者按公式转 `rpx`，后者保留 `px`  
+4. 真机对照后再微调
+
+### A.4.2 已知项目中出现的 arbitrary 值（来自旧桥文档）
+
+| Tailwind class | 原始值 | 默认转换建议 | 类型判断 | 备注 |
+|---|---:|---|---|---|
+| `h-[38px]` / `w-[38px]` | 38px | `70rpx` | 可缩放布局尺寸 | 常用于按钮 / 图标外框 |
+| `top-[44px]` | 44px | `80rpx` | 条件项 | 若与导航/状态栏相关，优先保留 `px` 或走系统信息 |
+| `min-h-[2.5rem]` | 40px | `72rpx` | 可缩放布局尺寸 | 可直接转 |
+| `max-h-[70vh]` | 70vh | 保留 `70vh` | 条件项 | 仅在主规范允许使用 `vh` 的页面采用 |
+
+### A.4.3 遇到新 arbitrary 值时的处理模板
+
+```text
+若值用于横向/纵向布局比例 —— 优先转 rpx
+若值用于细节质感、边框、阴影、微位移 —— 优先保留 px
+若值与安全区/导航/系统尺寸有关 —— 不走公式，走系统信息
+```
+
+---
+
+## A.5 负值、分数、百分比
+
+### A.5.1 负值
+
+若出现：
+
+- `-mt-2`
+- `-top-1/2`
+- `-translate-x-1/2`
+
+规则：
+
+- spacing 负值：使用相同绝对值 token，加负号
+- 百分比 / transform：保持原表达式，不强行转成 `rpx`
+
+示例：
+
+```css
+margin-top: -14rpx;
+transform: translateX(-50%);
+```
+
+### A.5.2 百分比 / 分数
+
+以下值保持百分比表达：
+
+- `w-1/2` → `width: 50%`
+- `w-full` → `width: 100%`
+- `left-1/2` → `left: 50%`
+
+不要把这类值换算成固定 `rpx`。
+
+---
+
+## A.6 AI 执行准则
+
+1. 遇到 spacing scale 中已有的值，优先查本表。  
+2. 遇到 arbitrary 值，先判断“布局型”还是“质感型”。  
+3. 遇到疑似导航、安全区、浮层微调值，不要硬转 `rpx`。  
+4. 任何转换后若导致 412 宽真机对不上 H5，应以视觉验收为准做修正。
+
+---
+
+## A.7 附录结论
+
+本表的角色是：
+
+- **统一 token**
+- **减少页面间尺寸漂移**
+- **提高 AI 批量迁移的一致性**
+
+本表不是：
+
+- 取代视觉验收
+- 否定混合单位策略
+- 允许把所有 `px` 一刀切换成 `rpx`