# H5 到小程序样式检查工具

自动化检查 H5 到小程序迁移过程中的样式差异。

## 功能

- ✅ 自动提取 H5 中的 Tailwind 类
- ✅ 自动提取小程序中的样式
- ✅ 逐个对比每个属性
- ✅ 检查全局样式（line-height 等）
- ✅ 检查 font-size 和 line-height
- ✅ 检查 padding、margin、gap
- ✅ 检查 width、height
- ✅ 检查 border-radius
- ✅ 生成详细的 Markdown 报告

## 安装

```bash
# 无需安装依赖，使用 Python 3.6+ 即可
python --version  # 确保 Python 3.6+
```

## 使用方法

### 基本用法

```bash
python scripts/check_h5_to_mp.py \
  --h5 docs/h5_ui/pages/board-customer.html \
  --wxss apps/miniprogram/miniprogram/pages/board-customer/board-customer.wxss \
  --output report.md
```

### 参数说明

- `--h5`：H5 HTML 文件路径（必需）
- `--wxss`：小程序 WXSS 文件路径（必需）
- `--output`：输出报告路径（可选，默认 `report.md`）

## 输出示例

```markdown
# H5 到小程序样式对比报告

## 📊 问题统计

- ❌ 严重问题：5 个
- ⚠️ 警告：7 个
- ℹ️ 提示：3 个
- **总计**：15 个

## ❌ 严重问题

### ❌ 严重 page - line-height

- **位置**：page 全局样式
- **H5 值**：无全局设置
- **应该是**：无
- **实际是**：1.5
- **差异**：100.0%

### ❌ 严重 text-xs - line-height

- **位置**：.assistant-label
- **H5 值**：16px
- **应该是**：29rpx
- **实际是**：缺失
- **差异**：100.0%
```

## 检查项目

### 1. 全局样式

- [ ] page 的 line-height
- [ ] view 的 line-height
- [ ] 全局 font-size
- [ ] 全局 padding/margin

### 2. 文本类（text-xxx）

对每个 text-xxx 类：
- [ ] font-size
- [ ] line-height（必须检查）

### 3. 间距类（p-, m-, gap-）

对每个间距类：
- [ ] padding
- [ ] margin
- [ ] gap

### 4. 尺寸类（w-, h-）

对每个尺寸类：
- [ ] width
- [ ] height

### 5. 圆角类（rounded-）

对每个圆角类：
- [ ] border-radius

## 问题级别

- ❌ **严重**：差异 > 20%
- ⚠️ **警告**：差异 10-20%
- ℹ️ **提示**：差异 < 10%
- ✅ **正确**：差异 < 2%

## 扩展

### 添加自定义 Tailwind 配置

编辑 `check_h5_to_mp.py` 中的 `TAILWIND_CONFIG`：

```python
TAILWIND_CONFIG = {
    'text': {
        'text-xs': {'font-size': '12px', 'line-height': '16px'},
        # 添加更多...
    },
    'spacing': {
        'p-6': '24px',
        # 添加更多...
    },
}
```

### 调整换算比例

如果目标设备不是 412px，修改 `PX_TO_RPX`：

```python
# 375px 设备
PX_TO_RPX = 2.0

# 414px 设备
PX_TO_RPX = 1.8116
```

## 限制

1. 目前只检查类选择器（`.class`），不检查标签选择器
2. 不检查伪类和伪元素
3. 间距类的匹配逻辑需要根据实际情况调整
4. 不检查 JavaScript 动态样式

## 贡献

欢迎提交 Issue 和 Pull Request！

## 许可

MIT