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

2026-03-18 05:14:35 +08:00
parent 72bb11b34f
commit 075caf067f
124 changed files with 10407 additions and 2738 deletions
--- a/docs/miniprogram-dev/QUICK-REFERENCE.md
+++ b/docs/miniprogram-dev/QUICK-REFERENCE.md
@@ -0,0 +1,209 @@
+# H5→MP 迁移快速参考
+
+> **用途**：AI 代码生成时的快速查阅手册  
+> **更新**：2026-03-17  
+> **范围**：单位换算、颜色映射、类名对应、常见模式
+
+---
+
+## 📌 核心决策
+
+| 项目 | 规则 |
+|------|------|
+| **框架** | 微信原生小程序（WXML + WXSS + JS） |
+| **单位** | rpx 为主（布局、间距），px 为辅（发丝线、阴影） |
+| **交互** | 数据驱动（禁用 DOM API） |
+| **验收宽度** | 412 CSS px |
+| **能力分级** | A类直迁、B类条件迁、C类禁迁 |
+
+---
+
+## 🎨 颜色映射速查
+
+### 任务分类
+| 类型 | 颜色 | 渐变 |
+|------|------|------|
+| 高优先召回 | #dc2626 | #b91c1c → #dc2626 |
+| 优先召回 | #f97316 | #ea580c → #f97316 |
+| 客户回访 | #14b8a6 | #0d9488 → #14b8a6 |
+| 关系构建 | #f472b6 | #ec4899 → #f472b6 |
+
+### 客户标签
+| 标签 | 字体色 | 背景色 |
+|------|--------|--------|
+| 客户基础 | #0052d9 | #ecf2fe |
+| 消费习惯 | #00a870 | #e6f7f0 |
+| 玩法偏好 | #ed7b2f | #fff3e6 |
+| 促销偏好 | #d4a017 | #fffbeb |
+| 社交关系 | #764ba2 | #f3e8ff |
+| 重要反馈 | #e34d59 | #ffe6e8 |
+
+### 关系等级
+| 等级 | 渐变 | 分数 |
+|------|------|------|
+| 很好 | #e91e63 → #f472b6 | > 8.5 |
+| 良好 | #ea580c → #fb923c | 6-8.5 |
+| 一般 | #eab308 → #fbbf24 | 3.5-6 |
+| 待发展 | #64748b → #94a3b8 | < 3.5 |
+
+### AI 图标配色
+| 配色 | 主色 | 浅色 | 深色 |
+|------|------|------|------|
+| Red | #e74c3c | #f39c9c | #c0392b |
+| Orange | #e67e22 | #f5c77e | #ca6c17 |
+| Yellow | #d4a017 | #f7dc6f | #b8860b |
+| Blue | #2980b9 | #7ec8e3 | #1a5276 |
+| Indigo | #667eea | #a78bfa | #4a5fc7 |
+| Purple | #764ba2 | #c084fc | #5b3080 |
+
+---
+
+## 📏 单位换算速查
+
+### 公式
+```
+rpx = px × 1.8204
+px = rpx ÷ 1.8204
+```
+
+### 常用换算
+| px | rpx | 用途 |
+|----|----|------|
+| 4 | 7 | 发丝线、极小间距 |
+| 8 | 15 | 小间距 |
+| 12 | 22 | 标签、小组件 |
+| 16 | 29 | 标准间距 |
+| 24 | 44 | 卡片间距 |
+| 32 | 58 | 大间距 |
+| 48 | 87 | 区块间距 |
+
+### 字号换算
+| px | rpx | 用途 |
+|----|----|------|
+| 12 | 22 | 辅助文字 |
+| 14 | 26 | 小文字 |
+| 16 | 29 | 正文 |
+| 18 | 33 | 标题 |
+| 20 | 36 | 大标题 |
+
+---
+
+## 🏷️ 类名映射速查
+
+### 任务卡片
+```css
+.task-card--high_priority { border-left-color: #dc2626; }
+.task-card--priority_recall { border-left-color: #f97316; }
+.task-card--callback { border-left-color: #14b8a6; }
+.task-card--relationship { border-left-color: #f472b6; }
+.task-card--pinned { box-shadow: 0 5rpx 7rpx rgba(245,158,11,0.12), 0 0 0 8rpx rgba(245,158,11,0.08); }
+.task-card--abandoned { border-left-color: #d1d5db; opacity: 0.55; }
+```
+
+### 客户标签
+```css
+.clue-tag-primary { color: #0052d9; background: rgba(0,82,217,0.1); }
+.clue-tag-success { color: #00a870; background: rgba(0,168,112,0.1); }
+.clue-tag-orange { color: #ed7b2f; background: rgba(237,123,47,0.1); }
+.clue-tag-gold { color: #d4a017; background: rgba(212,160,23,0.1); }
+.clue-tag-purple { color: #764ba2; background: rgba(118,75,162,0.1); }
+.clue-tag-error { color: #e34d59; background: rgba(227,77,89,0.1); }
+```
+
+### 关系等级
+```css
+.rel-level-excellent { background: linear-gradient(135deg, #e91e63, #f472b6); }
+.rel-level-good { background: linear-gradient(135deg, #ea580c, #fb923c); }
+.rel-level-normal { background: linear-gradient(135deg, #eab308, #fbbf24); }
+.rel-level-poor { background: linear-gradient(135deg, #64748b, #94a3b8); }
+```
+
+### 助教等级
+```css
+.coach-level-junior { color: #0052d9; background: #ecf2fe; }
+.coach-level-middle { color: #ed7b2f; background: #fff3e6; }
+.coach-level-senior { color: #e91e63; background: #ffe6e8; }
+.coach-level-star { color: #fbbf24; background: #fffef0; }
+```
+
+---
+
+## 🔄 常见迁移模式
+
+### 模式1：Tailwind → WXSS
+```
+Tailwind: class="flex items-center gap-2 p-4"
+WXSS: display: flex; align-items: center; gap: 15rpx; padding: 29rpx;
+```
+
+### 模式2：DOM 交互 → 数据驱动
+```javascript
+// ❌ H5 写法（禁止）
+document.querySelector('.btn').classList.add('active');
+
+// ✅ 小程序写法
+this.setData({ isActive: true });
+```
+
+### 模式3：line-height 处理
+```wxml
+<!-- ❌ 错误：直接在 text 上设置 -->
+<text style="line-height: 1.5;">文字</text>
+
+<!-- ✅ 正确：在外层 view 上设置 -->
+<view style="line-height: 1.5;">
+  <text>文字</text>
+</view>
+```
+
+### 模式4：页面跳转
+```javascript
+// ❌ 错误：使用 history
+history.push('/pages/detail');
+
+// ✅ 正确：使用 wx.navigateTo
+wx.navigateTo({ url: '/pages/detail/detail' });
+
+// ✅ TabBar 页面用 switchTab
+wx.switchTab({ url: '/pages/task-list/task-list' });
+```
+
+---
+
+## ⚠️ 能力分级
+
+### A 类（可直迁）
+- flex、grid（基础）、position（relative/absolute）
+- transition、animation
+- border、box-shadow、border-radius
+- opacity、transform
+
+### B 类（条件迁）
+- position: sticky → 用 scroll-view 的 sticky-section
+- grid（复杂布局）→ 改为 flex
+- backdrop-filter → 用半透明背景替代
+- CSS 变量 → 改为 WXSS 变量或 JS 常量
+
+### C 类（禁迁）
+- document.*、window.*、localStorage
+- DOM 操作（classList、innerHTML、appendChild）
+- 浏览器事件（resize、scroll 等）
+- 第三方 JS 库（jQuery、lodash 等）
+
+---
+
+## 📖 详细文档位置
+
+| 需求 | 查阅文档 |
+|------|---------|
+| 完整迁移规范 | `h5-migration/h5-to-mp-bridge.md` |
+| Spacing 详细字典 | `h5-migration/appendix/spacing-dictionary.md` |
+| 字体/排版详细字典 | `h5-migration/appendix/typography-dictionary.md` |
+| 颜色详细字典 | `h5-migration/appendix/color-dictionary.md` |
+| 布局类详细字典 | `h5-migration/appendix/layout-dictionary.md` |
+| VI 设计系统完整版 | `design-system/VI-DESIGN-SYSTEM.md` |
+| VI 可视化指南 | `design-system/vi-guide.html` |
+
+---
+
+**版本**：1.0 | **最后更新**：2026-03-17