root/Neo-ZQYY
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Neo
2026-03-15 10:15:02 +08:00
parent 2dd217522c
commit 72bb11b34f
916 changed files with 65306 additions and 16102803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
docs/miniprogram-dev/New/appendix_a_spacing_and_sizing_dictionary_v3.md Normal file
View File

@@ -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`

266
docs/miniprogram-dev/New/appendix_b_typography_and_text_dictionary_v3.md Normal file
View File

@@ -0,0 +1,266 @@
# 附录B：字体与文本字典 v3.1
> 角色：文本层映射字典
> 用途：处理 Tailwind `text-*`、`leading-*`、`font-*`、文本对齐、省略、装饰、字距等
> 核心原则：**标准字号可表驱动；arbitrary 字号不得拍脑袋推导行高**
> **v3.1 更新**：补充微信小程序 text 组件的 line-height 设置规则
---
## B.1 使用边界
### B.1.1 本附录可以直接用于
- 标准 `text-xs/sm/base/lg/xl/2xl/3xl`
- 标准 `font-normal / medium / semibold / bold`
- `text-left / center / right`
- `truncate`
- `whitespace-nowrap`
- `underline / line-through`
- 常见 `leading-*`
- 常见 `tracking-*`
### B.1.2 本附录不能直接替代视觉提取的场景
- arbitrary `text-[Npx]`
- 多层嵌套文本组合
- 特殊数字对齐
- 自定义字体族
- 同时依赖字重、字距、行高的标题排版
- 富文本渲染
---
## B.2 核心规则
### B.2.1 标准字号类：必须同时写字号与行高
Tailwind 标准字号 utility 自带默认 `line-height`。
因此，迁移到 WXSS 时，**不能只写 `font-size`，遗漏 `line-height`**。
### B.2.2 Arbitrary 字号：不允许按"1.2 倍"硬猜
对 `text-[10px]`、`text-[11px]` 这类 arbitrary 字号：
- 不允许在项目规范中统一假定其 `line-height = 1.2 × font-size`
- 必须优先读取原型计算样式，或以页面实际视觉高度为准
- 若确实拿不到计算样式，可先给"临时候选值"，但必须标记为待复核
### B.2.3 微信小程序 text 组件的 line-height 设置规则 ⚠️
**关键发现**：微信小程序的 `<text>` 组件不能直接设置 `line-height`，必须通过外层 `<view>` 设置。
#### 正确做法
**全局设置：**
```wxss
page {
line-height: 1.5; /* Tailwind 默认行高 */
}
view {
line-height: inherit; /* view 继承 page 的 line-height */
}
/* text 会自动继承外层 view 的 line-height，不需要额外设置 */
```
**局部覆盖：**
```wxss
.section-title {
font-size: 26rpx;
line-height: 36rpx; /* 在 view 的 class 上设置，text 会继承 */
font-weight: 600;
}
```
```wxml
<view class="section-title">
<text>标题文本</text>
</view>
```
#### 错误做法
```wxss
/* ❌ 直接在 text 上设置 line-height 无效 */
text {
line-height: 36rpx; /* 不会生效 */
}
/* ❌ 添加 display: inline-block 也无效 */
text {
display: inline-block;
line-height: 36rpx; /* 仍然不会生效 */
}
```
#### 原因
- 微信小程序的 `<text>` 是特殊的内联组件
- 直接在 `<text>` 上设置 `line-height` 不生效
- 必须在外层 `<view>` 上设置，text 会自动继承
- 这是平台限制，不是 CSS 问题
#### 验证方法
- 在开发者工具的 Computed 面板中，text 元素不会显示 `line-height` 属性
- 但外层 view 的 `height` 值会包含行高效果
- 以真机视觉效果为准
---
## B.3 标准字号 → WXSS 对照表
> 以下表格可作为**硬映射白名单**使用。
| Tailwind class | font-size | line-height | H5 px | WXSS 建议写法 | 备注 |
|---|---:|---:|---:|---|---|
| `text-xs` | `0.75rem` | `1rem` | 12 / 16 | `font-size: 22rpx; line-height: 29rpx;` | 可直接使用 |
| `text-sm` | `0.875rem` | `1.25rem` | 14 / 20 | `font-size: 26rpx; line-height: 36rpx;` | 可直接使用 |
| `text-base` | `1rem` | `1.5rem` | 16 / 24 | `font-size: 30rpx; line-height: 44rpx;` | 可直接使用 |
| `text-lg` | `1.125rem` | `1.75rem` | 18 / 28 | `font-size: 33rpx; line-height: 51rpx;` | 可直接使用 |
| `text-xl` | `1.25rem` | `1.75rem` | 20 / 28 | `font-size: 36rpx; line-height: 51rpx;` | 可直接使用 |
| `text-2xl` | `1.5rem` | `2rem` | 24 / 32 | `font-size: 44rpx; line-height: 58rpx;` | 可直接使用 |
| `text-3xl` | `1.875rem` | `2.25rem` | 30 / 36 | `font-size: 54rpx; line-height: 66rpx;` | 可直接使用 |
**换算公式**：
```
font-size(rpx) = font-size(px) × 1.8204
line-height(rpx) = line-height(px) × 1.8204
```
**示例**：
- `text-sm` 的 font-size = 14px × 1.8204 = 25.49rpx ≈ **26rpx**
- `text-sm` 的 line-height = 20px × 1.8204 = 36.41rpx ≈ **36rpx**
---
## B.4 Arbitrary 字号候选表（仅候选，不是硬规则）
> 来源：旧桥文档中项目高频小字号总结。
> 这些值可用于**初始落地**，但必须经过真机视觉复核。
| Tailwind class | font-size(px) | WXSS 候选 `font-size` | `line-height` 处理规则 | 风险级别 |
|---|---:|---:|---|---|
| `text-[9px]` | 9 | 16rpx | 禁止硬猜，需按原型提取或视觉校准 | 高 |
| `text-[10px]` | 10 | 18rpx | 同上 | 高 |
| `text-[11px]` | 11 | 20rpx | 同上 | 高 |
| `text-[12px]` | 12 | 22rpx | 同上 | 高 |
| `text-[13px]` | 13 | 24rpx | 同上 | 高 |
### B.4.1 若拿不到原型计算样式时的临时占位策略
仅用于**先产出页面、后做复核**的场景：
- 单行文本：可先不显式写 `line-height`，由真实内容撑开后观察
- 双行及以上文本：先给一个略宽松的 `line-height` 候选，再做真机校正
- 一旦发现文本块高度、裁切、对齐异常，必须回到原型测量
> 这条是应急策略，不是长期规范。
---
## B.5 Font Weight 映射表
| Tailwind class | CSS font-weight | WXSS 写法 | 备注 |
|---|---:|---|---|
| `font-normal` | 400 | `font-weight: 400;` | 可直接使用 |
| `font-medium` | 500 | `font-weight: 500;` | 注意不是 600 |
| `font-semibold` | 600 | `font-weight: 600;` | 可直接使用 |
| `font-bold` | 700 | `font-weight: 700;` | 可直接使用 |
---
## B.6 Font Family / 字体族处理规则
| Tailwind class | 默认含义 | 小程序迁移建议 |
|---|---|---|
| `font-sans` | 系统无衬线字体栈 | 允许省略，交由系统默认字体；若页面强依赖，则单独定义字体栈 |
| `font-serif` | 系统衬线字体栈 | 本项目一般不建议使用 |
| `font-mono` | 等宽字体栈 | 仅在数字/代码块等特殊场景使用 |
| `font-[...]` | 自定义字体族 | 必须单独评估是否可在小程序端稳定落地 |
### 建议
- 业务正文、列表、表单：优先使用系统默认字体策略
- 若页面依赖特定数字对齐效果，再单独处理数字字体
---
## B.7 其他文本属性映射表
### B.7.1 文本对齐
| Tailwind class | WXSS |
|---|---|
| `text-left` | `text-align: left;` |
| `text-center` | `text-align: center;` |
| `text-right` | `text-align: right;` |
### B.7.2 溢出与省略
| Tailwind class | WXSS 建议写法 | 备注 |
|---|---|---|
| `truncate` | `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` | 可直接使用 |
| `whitespace-nowrap` | `white-space: nowrap;` | 可直接使用 |
| `line-clamp-2` | `display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;` | 条件能力，需实测 |
| `line-clamp-3` | 同上，`-webkit-line-clamp: 3` | 条件能力，需实测 |
### B.7.3 Line-height 工具类
| Tailwind class | CSS | WXSS |
|---|---|---|
| `leading-none` | `line-height: 1` | `line-height: 1;` |
| `leading-tight` | `line-height: 1.25` | `line-height: 1.25;` |
| `leading-snug` | `line-height: 1.375` | `line-height: 1.375;` |
| `leading-normal` | `line-height: 1.5` | `line-height: 1.5;` |
| `leading-relaxed` | `line-height: 1.625` | `line-height: 1.625;` |
| `leading-loose` | `line-height: 2` | `line-height: 2;` |
### B.7.4 Letter-spacing / 字距
| Tailwind class | CSS | WXSS |
|---|---|---|
| `tracking-tight` | `letter-spacing: -0.025em` | `letter-spacing: -0.025em;` |
| `tracking-normal` | `letter-spacing: 0` | `letter-spacing: 0;` |
| `tracking-wide` | `letter-spacing: 0.025em` | `letter-spacing: 0.025em;` |
| `tracking-wider` | `letter-spacing: 0.05em` | `letter-spacing: 0.05em;` |
| `tracking-widest` | `letter-spacing: 0.1em` | `letter-spacing: 0.1em;` |
### B.7.5 文本装饰
| Tailwind class | WXSS |
|---|---|
| `underline` | `text-decoration: underline;` |
| `line-through` | `text-decoration: line-through;` |
| `italic` | `font-style: italic;` |
| `not-italic` | `font-style: normal;` |
### B.7.6 数字排版
| Tailwind class | 处理建议 |
|---|---|
| `tabular-nums` | 若小程序端表现不稳定，不作为硬依赖；涉及金额/绩效表格时优先真机验证 |
| `lining-nums` / `oldstyle-nums` | 同上，不建议直接作为项目硬规范 |
---
## B.8 文本层 AI 执行准则
1. 标准字号表可直接用。
2. arbitrary 字号不许猜固定行高。
3. **line-height 必须在外层 view 上设置，不能直接在 text 上设置。**
4. 单行截断可直接迁移；多行截断需列入"条件能力"。
5. 文字高度不对时，优先检查：`line-height`、字重、padding、容器 `align-items`。
6. 小字号（9~13px）是本项目高频区，必须留足复核预算。
---
## B.9 附录结论
本表最重要的价值是：
- 让标准字号稳定落地
- 避免 AI 漏掉 line-height
- 防止 arbitrary 字号被机械"1.2 倍化"
- **明确 text 组件的 line-height 设置规则，避免无效设置**

198
docs/miniprogram-dev/New/appendix_c_color_dictionary_v3.md Normal file
View File

@@ -0,0 +1,198 @@
# 附录C：颜色字典 v3.0
> 角色：颜色 token 字典
> 用途：把 H5 原型中的 Tailwind 颜色、项目自定义颜色、透明度变体，整理为可查表的颜色事实层
> 核心原则：**先保留颜色事实，再决定项目实现形式**
---
## C.1 使用边界
### C.1.1 本附录可以直接用于
- `text-*`
- `bg-*`
- `border-*`
- `from-*` / `to-*`
- 透明度修饰符 `/N`
- 阴影颜色的基色解析
### C.1.2 本附录不直接决定的内容
- 是否落成 CSS 变量
- 是否落成 JS 常量
- 是否抽成 theme token 文件
- 深色模式方案
- 主题切换机制
---
## C.2 项目自定义颜色（优先级最高）
> 以下颜色来自旧桥文档整理出的项目自定义色。
> 主规范执行时，优先使用这些颜色表达业务语义。
| Tailwind 名称 | 色值 | 推荐语义 | 备注 |
|---|---|---|---|
| `primary` | `#0052d9` | 主品牌色 / 主按钮 / 主高亮 | 高频 |
| `primary-light` | `#ecf2fe` | 主色浅底 | 高频 |
| `success` | `#00a870` | 成功 / 完成 / 正向状态 | 高频 |
| `warning` | `#ed7b2f` | 警示 / 提醒 | 高频 |
| `error` | `#e34d59` | 错误 / 危险 / 删除 | 高频 |
| `gray-1` | `#f3f3f3` | 极浅背景 | 高频 |
| `gray-2` | `#eeeeee` | 背景 / 分割区 | 高频 |
| `gray-3` | `#e7e7e7` | 分割线 / 描边 | 高频 |
| `gray-4` | `#dcdcdc` | 弱描边 | 高频 |
| `gray-5` | `#c5c5c5` | 弱文字 / icon | 常用 |
| `gray-6` | `#a6a6a6` | 次弱文字 | 常用 |
| `gray-7` | `#8b8b8b` | 次级文字 | 高频 |
| `gray-8` | `#777777` | 次级文字深一档 | 高频 |
| `gray-9` | `#5e5e5e` | 正文偏弱 | 高频 |
| `gray-10` | `#4b4b4b` | 正文 | 高频 |
| `gray-11` | `#393939` | 正文偏重 | 高频 |
| `gray-12` | `#2c2c2c` | 强文字 | 高频 |
| `gray-13` | `#242424` | 标题 / 强对比文本 | 高频 |
### C.2.1 实现建议
默认实现建议：
- 先在 WXSS 中直接写十六进制 / `rgba()`
- 后续若项目确认 theme token 方案稳定，再抽到公共变量层
- 不把 `var(--color-xxx)` 当成唯一前提
---
## C.3 Tailwind 内置 palette（项目中已出现 / 允许引用）
> 下表保留旧桥文档中的“项目实际使用 palette 范围”，用于 AI 查表。
> 不是 Tailwind 全宇宙 palette 的完整镜像，而是**对本项目迁移足够用的字典层**。
| 色阶 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| `red` | `#fef2f2` | `#fee2e2` | `#fecaca` | `#fca5a5` | `#f87171` | `#ef4444` | `#dc2626` | `#b91c1c` | `#991b1b` | `#7f1d1d` |
| `orange` | `#fff7ed` | `#ffedd5` | `#fed7aa` | `#fdba74` | `#fb923c` | `#f97316` | `#ea580c` | `#c2410c` | — | — |
| `amber` | `#fffbeb` | `#fef3c7` | `#fde68a` | `#fcd34d` | `#fbbf24` | `#f59e0b` | `#d97706` | `#b45309` | — | — |
| `yellow` | `#fefce8` | `#fef9c3` | `#fef08a` | `#fde047` | `#facc15` | `#eab308` | `#ca8a04` | `#a16207` | — | — |
| `green` | `#f0fdf4` | `#dcfce7` | `#bbf7d0` | `#86efac` | `#4ade80` | `#22c55e` | `#16a34a` | `#15803d` | — | — |
| `emerald` | `#ecfdf5` | `#d1fae5` | — | `#6ee7b7` | — | — | `#059669` | `#047857` | — | — |
| `teal` | `#f0fdfa` | — | `#99f6e4` | `#5eead4` | `#2dd4bf` | `#14b8a6` | — | — | — | — |
| `cyan` | — | `#cffafe` | — | — | `#22d3ee` | `#06b6d4` | — | `#0e7490` | — | — |
| `sky` | — | — | — | `#7dd3fc` | `#38bdf8` | `#0ea5e9` | — | — | — | — |
| `blue` | `#eff6ff` | `#dbeafe` | — | `#93c5fd` | `#60a5fa` | `#3b82f6` | — | `#1d4ed8` | — | — |
| `indigo` | — | — | — | `#a5b4fc` | `#818cf8` | — | — | — | — | — |
| `violet` | — | — | — | `#c4b5fd` | `#a78bfa` | — | — | — | — | — |
| `purple` | — | `#f3e8ff` | — | — | — | `#a855f7` | `#9333ea` | `#7e22ce` | — | — |
| `fuchsia` | — | — | — | `#f0abfc` | `#e879f9` | — | — | — | — | — |
| `pink` | — | `#fce7f3` | — | `#f9a8d4` | `#f472b6` | `#ec4899` | `#db2777` | `#be185d` | — | — |
| `rose` | — | — | — | `#fda4af` | `#fb7185` | — | — | — | — | — |
### C.3.1 常用基础色补充
| 名称 | 色值 | 备注 |
|---|---|---|
| `white` | `#ffffff` | 高频 |
| `black` | `#000000` | 高频 |
| `transparent` | `transparent` | 高频 |
| `current` | `currentColor` | 条件使用 |
---
## C.4 透明度变体字典（/N）
> Tailwind 的 `/N` 修饰符在小程序侧统一落为 `rgba()`。
> 原则：**先把基础色解析成 RGB，再套 alpha。**
| 透明度后缀 | alpha | 示例转换 |
|---|---:|---|
| `/5` | 0.05 | `bg-primary/5` → `rgba(0, 82, 217, 0.05)` |
| `/10` | 0.10 | `bg-primary/10` → `rgba(0, 82, 217, 0.10)` |
| `/15` | 0.15 | `bg-white/15` → `rgba(255, 255, 255, 0.15)` |
| `/20` | 0.20 | `bg-white/20` → `rgba(255, 255, 255, 0.20)` |
| `/25` | 0.25 | `bg-white/25` → `rgba(255, 255, 255, 0.25)` |
| `/30` | 0.30 | `bg-primary/30` → `rgba(0, 82, 217, 0.30)` |
| `/40` | 0.40 | `bg-primary/40` → `rgba(0, 82, 217, 0.40)` |
| `/50` | 0.50 | `bg-black/50` → `rgba(0, 0, 0, 0.50)` |
| `/60` | 0.60 | `text-white/60` → `rgba(255, 255, 255, 0.60)` |
| `/70` | 0.70 | `text-white/70` → `rgba(255, 255, 255, 0.70)` |
| `/80` | 0.80 | `bg-white/80` → `rgba(255, 255, 255, 0.80)` |
| `/85` | 0.85 | `text-white/85` → `rgba(255, 255, 255, 0.85)` |
| `/90` | 0.90 | `text-white/90` → `rgba(255, 255, 255, 0.90)` |
| `/95` | 0.95 | `bg-white/95` → `rgba(255, 255, 255, 0.95)` |
### C.4.1 通用生成公式
```text
TailwindColor/Opacity
→ 先解析 TailwindColor 对应的 RGB
→ 再生成 rgba(r, g, b, opacity)
```
---
## C.5 渐变颜色处理规则
| Tailwind 写法 | 小程序侧处理 |
|---|---|
| `bg-gradient-to-r from-X to-Y` | `background: linear-gradient(to right, X, Y)` |
| `bg-gradient-to-br from-X to-Y` | `background: linear-gradient(to bottom right, X, Y)` |
| `from-primary to-primary-light` | 直接填入十六进制 / rgba |
| 带透明度的渐变端点 | 先把端点解析成 `rgba()`，再写入渐变 |
### 示例
```css
background: linear-gradient(to bottom right, #60a5fa, #3b82f6);
background: linear-gradient(to right, rgba(0,82,217,0.9), rgba(0,82,217,0.2));
```
---
## C.6 阴影色与描边色规则
### C.6.1 阴影色
如果 H5 使用：
- `shadow-primary/20`
- `shadow-error/30`
- `shadow-orange-500/30`
则迁移时：
1. 先解析底色
2. 再套透明度
3. 保留阴影 offset / blur / spread 的结构
4. 不要求阴影参数也一律转成 `rpx`
### C.6.2 描边色
边框与分割线应优先使用：
- `gray-2` / `gray-3` / `gray-4`
- 或项目中已使用的 Tailwind 浅色阶
---
## C.7 AI 执行准则
1. 优先匹配项目自定义色。
2. 匹配不到时，再查内置 palette。
3. 透明度一律显式展开成 `rgba()`。
4. 不要把 `var(--color-xxx)` 写成唯一实现。
5. 同一业务语义颜色必须全项目一致，不允许页面内随意漂移。
---
## C.8 附录结论
本附录保留的是：
- 颜色**事实层**
- 透明度**计算规则**
- 渐变和阴影的基色映射
本附录不替你决定：
- 最终工程变量命名
- 主题系统架构

204
docs/miniprogram-dev/New/appendix_d_layout_class_mapping_dictionary_v3.md Normal file
View File

@@ -0,0 +1,204 @@
# 附录D：布局类映射字典 v3.0
> 角色：布局白名单映射表
> 用途：把 Tailwind 中与布局相关的 class 映射到 WXSS / WXML
> 核心原则：**分级映射，不做“浏览器 CSS 全等价”假设**
---
## D.1 分级说明
### A 类：可直接映射
在当前项目中，通常可直接从 Tailwind 写法转换到 WXSS。
### B 类：条件映射
可以用，但必须结合页面结构、滚动容器、设备表现或降级方案。
### C 类：禁止机械映射
不能把 H5 的做法直接搬过去，必须改成小程序的数据驱动实现或结构性改写。
---
## D.2 Flexbox 映射表（A 类）
| Tailwind class | CSS 含义 | WXSS / WXML 写法 | 级别 | 备注 |
|---|---|---|---|---|
| `flex` | `display: flex` | `display: flex;` | A | 可直接使用 |
| `inline-flex` | `display: inline-flex` | `display: inline-flex;` | A | 条件使用，视组件而定 |
| `flex-col` | `flex-direction: column` | `flex-direction: column;` | A | 可直接使用 |
| `flex-row` | `flex-direction: row` | 默认即可 / 显式写出 | A | 可直接使用 |
| `flex-1` | `flex: 1 1 0%` | `flex: 1;` | A | 项目中可简化 |
| `flex-[2]` | `flex: 2` | `flex: 2;` | A | arbitrary 数值可保留 |
| `flex-wrap` | `flex-wrap: wrap` | `flex-wrap: wrap;` | A | 可直接使用 |
| `flex-nowrap` | `flex-wrap: nowrap` | `flex-wrap: nowrap;` | A | 可直接使用 |
| `shrink-0` / `flex-shrink-0` | `flex-shrink: 0` | `flex-shrink: 0;` | A | 高频 |
| `grow` | `flex-grow: 1` | `flex-grow: 1;` | A | 若出现可直接映射 |
| `items-center` | `align-items: center` | `align-items: center;` | A | 高频 |
| `items-start` | `align-items: flex-start` | `align-items: flex-start;` | A | 可直接使用 |
| `items-end` | `align-items: flex-end` | `align-items: flex-end;` | A | 可直接使用 |
| `items-baseline` | `align-items: baseline` | `align-items: baseline;` | A | 需注意文本基线差异 |
| `justify-between` | `justify-content: space-between` | `justify-content: space-between;` | A | 高频 |
| `justify-center` | `justify-content: center` | `justify-content: center;` | A | 高频 |
| `justify-end` | `justify-content: flex-end` | `justify-content: flex-end;` | A | 可直接使用 |
| `justify-start` | `justify-content: flex-start` | `justify-content: flex-start;` | A | 可直接使用 |
---
## D.3 Grid 映射表（B 类）
| Tailwind class | CSS 含义 | WXSS 写法 | 级别 | 执行规则 |
|---|---|---|---|---|
| `grid` | `display: grid` | `display: grid;` | B | 必须真机验证 |
| `grid-cols-2` | `repeat(2, minmax(0, 1fr))` | `grid-template-columns: repeat(2, minmax(0, 1fr));` | B | 简单均分可用 |
| `grid-cols-3` | 同上三列 | 同上 | B | 简单均分可用 |
| `grid-cols-4` | 同上四列 | 同上 | B | 简单均分可用 |
| `col-span-*` | 跨列 | 条件实现 | B | 出现时单独验证 |
### D.3.1 Grid 使用限制
- 仅用于简单卡片宫格、图标宫格、均分布局
- 一旦出现复杂响应、自适应内容挤压、滚动嵌套，应优先改为 `flex + wrap`
- 不把 `grid` 写成项目硬依赖
---
## D.4 Gap 映射表（A/B 混合）
> `gap` 本身可映射，但在复杂容器和兼容边界上应视为条件项。
| Tailwind class | CSS | WXSS | 级别 | 备注 |
|---|---|---|---|---|
| `gap-0.5` | `gap: 2px` | `gap: 4rpx;` | A | 简单容器可用 |
| `gap-1` | `gap: 4px` | `gap: 8rpx;` | A | 可直接使用 |
| `gap-1.5` | `gap: 6px` | `gap: 12rpx;` | A | 可直接使用 |
| `gap-2` | `gap: 8px` | `gap: 14rpx;` | A | 可直接使用 |
| `gap-2.5` | `gap: 10px` | `gap: 18rpx;` | A | 可直接使用 |
| `gap-3` | `gap: 12px` | `gap: 22rpx;` | A | 可直接使用 |
| `gap-4` | `gap: 16px` | `gap: 30rpx;` | A | 高频 |
| `gap-5` | `gap: 20px` | `gap: 36rpx;` | A | 可直接使用 |
| `gap-6` | `gap: 24px` | `gap: 44rpx;` | A | 高频 |
| `gap-x-4` | `column-gap: 16px` | `column-gap: 30rpx;` | B | 需结合容器测试 |
| `gap-y-1` | `row-gap: 4px` | `row-gap: 8rpx;` | B | 需结合容器测试 |
---
## D.5 定位与层级（A/B 混合）
| Tailwind class | CSS | WXSS | 级别 | 备注 |
|---|---|---|---|---|
| `relative` | `position: relative` | `position: relative;` | A | 可直接使用 |
| `absolute` | `position: absolute` | `position: absolute;` | A | 可直接使用 |
| `fixed` | `position: fixed` | `position: fixed;` | A | 需关注安全区 |
| `sticky` | `position: sticky` | `position: sticky; top: ...` | B | 仅页面自然滚动中优先使用 |
| `inset-0` | `top/right/bottom/left: 0` | 拆成四个方向 | A | 直接拆写 |
| `top-0` / `right-0` / `bottom-0` / `left-0` | 0 定位 | 同名属性 | A | 可直接使用 |
| `top-1/2` / `left-1/2` | 50% 定位 | 保持百分比 | A | 不转 `rpx` |
| `-translate-x-1/2` | `transform: translateX(-50%)` | 同左 | A | 可直接使用 |
| `-translate-y-1/2` | `transform: translateY(-50%)` | 同左 | A | 可直接使用 |
| `z-10` / `z-20` / `z-50` / `z-[100]` | `z-index` | `z-index` | A | 可直接使用 |
### D.5.1 Sticky 额外规则
- 页面滚动优先于 `scroll-view`
- `scroll-view` 内 sticky 一律列为高风险
- 多层 sticky 不要叠加，优先保留最外层
---
## D.6 尺寸类映射（A/B 混合）
| Tailwind class | CSS | WXSS | 级别 | 备注 |
|---|---|---|---|---|
| `w-full` | `width: 100%` | `width: 100%;` | A | 可直接使用 |
| `h-full` | `height: 100%` | `height: 100%;` | A | 可直接使用 |
| `w-1/2` | `width: 50%` | `width: 50%;` | A | 可直接使用 |
| `min-w-0` | `min-width: 0` | `min-width: 0;` | A | 文本截断场景常用 |
| `min-h-screen` | `min-height: 100vh` | `min-height: 100vh;` | B | 条件能力，需考虑导航/安全区 |
| `max-w-sm` | `max-width: 384px` | `max-width: 700rpx;` | B | 仅限内容容器 |
| `max-w-xs` | `max-width: 320px` | `max-width: 582rpx;` | B | 仅限内容容器 |
> 其他固定尺寸参照《附录A：Spacing 与尺寸字典》。
---
## D.7 显示、隐藏与溢出（A/B 混合）
| Tailwind class | CSS | WXSS | 级别 | 备注 |
|---|---|---|---|---|
| `block` | `display: block` | `display: block;` | A | 可直接使用 |
| `inline-block` | `display: inline-block` | `display: inline-block;` | A | 可直接使用 |
| `hidden` | `display: none` | `display: none;` | A | 与 `wx:if` / `hidden` 结合使用 |
| `overflow-hidden` | `overflow: hidden` | `overflow: hidden;` | A | 可直接使用 |
| `overflow-x-auto` | `overflow-x: auto` | 条件使用 | B | 小程序组件层需实测 |
| `overflow-y-auto` | `overflow-y: auto` | 条件使用 | B | 整页滚动优先自然滚动 |
---
## D.8 `space-y-*` 映射（B 类）
> `space-y` 本质是对子元素间距的语法糖。
> Tailwind 官方也说明，它并不适合复杂 DOM 顺序、换行布局、网格混排等场景。
| Tailwind class | 视觉含义 | 默认迁移方式 | 级别 | 推荐顺序 |
|---|---|---|---|---|
| `space-y-0` | 相邻子元素无间距 | 子元素首项外其余 `margin-top: 0` | B | 子项显式 class 优先 |
| `space-y-1` | 4px | `margin-top: 8rpx` | B | 子项显式 class 优先 |
| `space-y-1.5` | 6px | `margin-top: 12rpx` | B | 同上 |
| `space-y-2` | 8px | `margin-top: 14rpx` | B | 同上 |
| `space-y-2.5` | 10px | `margin-top: 18rpx` | B | 同上 |
| `space-y-3` | 12px | `margin-top: 22rpx` | B | 同上 |
| `space-y-4` | 16px | `margin-top: 30rpx` | B | 同上 |
### D.8.1 推荐实现顺序
1. **首选**：对子项显式加 class 或动态 class
2. **次选**：在 `wx:for` 中通过 `index > 0` 加样式
3. **末选**：组合选择器实现，例如 `.parent > .item + .item`
### D.8.2 不推荐
- 默认写死 `.parent > view + view`
- 把 `space-y` 用在复杂组件树、条件渲染、混合节点类型场景中
---
## D.9 `divide-y` 映射（B 类）
| Tailwind class | 视觉含义 | 小程序实现 | 级别 | 备注 |
|---|---|---|---|---|
| `divide-y` | 子项之间有分割线 | 子项首项外其余加 `border-top` | B | 推荐在 item 上显式控制 |
| `divide-gray-100` | 浅灰分割线 | `border-color: #f3f4f6;` | B | 需结合颜色字典 |
---
## D.10 WXML 结构改写规则（C 类约束）
以下不是单纯 WXSS 问题，而是布局迁移时最容易出错的点：
| H5 写法 | 小程序处理 |
|---|---|
| 用 DOM 选择器动态插入 / 删除 class | 改为 `data` + 条件 class |
| 用 `innerHTML` 渲染布局块 | 改为 WXML 结构和数据驱动 |
| 用浏览器滚动容器联动布局 | 改为页面滚动 + `onPageScroll` / 查询 API |
| 用 `history.back()` 控制返回 | 改为 `wx.navigateBack()` |
| 用 `window.scrollTo()` 定位 | 改为页面滚动接口或锚点方案 |
---
## D.11 AI 执行准则
1. Flex 相关优先直接映射。
2. Grid、sticky、vh、space-y 一律视为条件项。
3. 映射失败时，优先结构改写，不要硬凑 CSS。
4. 布局问题优先从 WXML 层级和滚动容器检查，不要只盯着样式。
5. 任何需要依赖 DOM 关系链才能成立的 Tailwind 技巧，都不要默认当成稳态能力。
---
## D.12 附录结论
本附录的目的不是证明“Tailwind 布局类都能 1:1 翻译”，而是：
- 给 AI 一个**白名单映射表**
- 把高风险布局点提前分级
- 降低批量迁移时的误判率

140
docs/miniprogram-dev/New/h5_to_wechat_miniprogram_migration_bridge_appendix_index_v3.md Normal file
View File

@@ -0,0 +1,140 @@
# H5 原型 → 微信小程序迁移桥接规范（附录/字典层索引 v3.1）
> 作用：作为《H5到微信小程序迁移桥接规范_可执行版_v2》和《h5-to-mp-bridge.md》配套的查表层、token 层、机器可读字典层。
> 适用对象：AI 批量迁移、人工迁移、代码审查、样式回归。
> 适用范围：本项目上传的 H5 原型页面，尤其是基于 Tailwind CDN Play 模式编写的页面。
> **v3.1 更新**：补充微信小程序 text 组件的 line-height 设置规则
---
## 1. 与主规范的关系
本附录不是替代主规范，而是补齐以下四类"高频查表能力"：
1. Spacing / 尺寸 token 的默认换算表
2. 字号、行高、字重、文本属性的映射表
3. 颜色字典与透明度变体映射
4. 布局类的白名单映射表
**主规范文档**：
- `docs/miniprogram-dev/h5-to-mp-bridge-v3.md` - 主规范（v3.0，合并版）
**执行优先级：**
- 主规范优先于附录。
- 当附录中的表格与页面真实视觉冲突时，以页面视觉验收结果为准。
- 当附录中的表格与微信小程序能力边界冲突时，以主规范中的能力分级和降级规则为准。
---
## 2. AI / 开发使用方式
### 2.1 推荐顺序
1. 先按主规范完成页面拆解、状态梳理、交互改写。
2. 再用本附录进行样式 token 替换和布局 class 映射。
3. 最后回到真机对照 H5 验收图做微调。
### 2.2 严禁机械照抄的部分
以下内容**只能当候选表，不是绝对硬规则**：
- arbitrary `font-size` 的 `line-height`
- `space-y-*` 的结构选择器实现
- `grid` / `sticky` / `vh` / `line-clamp` 的条件映射
- 任何需要保留 `px` 质感的细节尺寸
- 任何依赖滚动容器、父子层级、组件边界的 CSS 技巧
---
## 3. 文件清单
1. [附录A：Spacing 与尺寸字典](./appendix_a_spacing_and_sizing_dictionary_v3.md)
2. [附录B：字体与文本字典 v3.1](./appendix_b_typography_and_text_dictionary_v3.md) ⭐ 已更新
3. [附录C：颜色字典](./appendix_c_color_dictionary_v3.md)
4. [附录D：布局类映射字典](./appendix_d_layout_class_mapping_dictionary_v3.md)
---
## 4. 附录级共识
### 4.1 单位策略
本项目仍然采用：
- **`rpx` 为主**
- **`px` 为辅**
- **以 412 CSS px 验收宽度为基准换算**
换算公式：
```text
rpx = H5_CSS_px × (750 / 412)
≈ H5_CSS_px × 1.8204
```
默认规则：
- 布局型尺寸：优先映射成整数 `rpx`
- 发丝线、阴影、微位移、小图标：优先保留 `px`
- 对视觉敏感值：允许偏离公式，以真机视觉为准
### 4.2 行高策略 ⚠️ v3.1 新增
**关键发现**：微信小程序的 `<text>` 组件不能直接设置 `line-height`，必须通过外层 `<view>` 设置。
**全局设置（推荐）：**
```wxss
page {
line-height: 1.5; /* Tailwind 默认行高 */
}
view {
line-height: inherit;
}
```
**局部覆盖：**
```wxss
.section-title {
font-size: 26rpx;
line-height: 36rpx; /* 在 view 的 class 上设置 */
font-weight: 600;
}
```
**详细说明**：参见附录 B.2.3 和主规范 §2.1.1
### 4.3 颜色策略
- 颜色表优先保留**原始十六进制 / rgba 值**
- 不把 `var()` 写法作为唯一实现前提
- 是否额外建立 `theme token`，由项目后续工程层决定
### 4.4 频次信息说明
若附录表格中出现"频次"字段，其含义为：
- 来源于旧桥文档中的项目扫描结论
- 在本次附录中未重新逐文件复跑扫描
- 可用于判断优先级，但**不得作为强约束或验收依据**
---
## 5. 参考依据
- 微信小程序 WXSS 文档
- 微信小程序页面 / 动画 / 查询 API 文档
- Tailwind CSS v3 官方文档（spacing、font size、font weight、gap、space、width 等）
- 技术文章：
- CSDN：《小程序 · text设置line-height无效》
- 博客园：《微信小程序出现 text 设置行高 line-height 无效的问题》
- 掘金：《小程序文字行高，text 设置 line-height 行高无效的解决办法》
本索引文件不重复展开官方说明，具体说明已在主规范和各附录内以执行规则形式固化。
---
## 6. 更新记录
- **v3.0**：初始版本，建立附录索引和四个附录字典
- **v3.1**：补充微信小程序 text 组件的 line-height 设置规则（2026-03-14）

153
docs/miniprogram-dev/README-migration-docs.md Normal file
View File

@@ -0,0 +1,153 @@
# H5→微信小程序迁移文档结构说明
## 📚 文档体系
### 主规范文档（1个）
**`docs/miniprogram-dev/h5-to-mp-bridge-v3.md`** - 主规范 v3.0（合并版）
- **第一部分（§1-4）**：执行规程
- 输入输出契约
- 项目级强制决策
- 能力分级（A/B/C 类）
- Tailwind CSS 行为说明
- **第二部分（§5-9）**：技术换算
- Spacing 换算表
- 字号与行高换算（含 line-height 关键发现）
- 颜色映射
- 布局类映射
- 装饰类映射
- **第三部分（§10-12）**：交互改造
- HTML→WXML 映射
- DOM 操作→数据驱动
- 浏览器 API→小程序 API
- **第四部分（§13-14）**：执行流程
- 10 步标准流程
- 附录文档索引
### 附录文档（5个）
位于 `docs/miniprogram-dev/New/`：
1. **`h5_to_wechat_miniprogram_migration_bridge_appendix_index_v3.md`** - 附录索引（v3.1）
2. **`appendix_a_spacing_and_sizing_dictionary_v3.md`** - 附录 A：Spacing 与尺寸字典
3. **`appendix_b_typography_and_text_dictionary_v3.md`** - 附录 B：字体与文本字典（v3.1）
4. **`appendix_c_color_dictionary_v3.md`** - 附录 C：颜色字典
5. **`appendix_d_layout_class_mapping_dictionary_v3.md`** - 附录 D：布局类映射字典
---
## 🎯 使用指南
### 对于 AI
**加载顺序**：
1. 加载主规范 `h5-to-mp-bridge-v3.md`（完整规范）
2. 加载附录索引 `h5_to_wechat_miniprogram_migration_bridge_appendix_index_v3.md`
3. 按需加载具体附录（A/B/C/D）
**执行流程**：
1. 按 §13 的 10 步标准流程执行迁移
2. 查表时参考 §5-9 和附录 A/B/C/D
3. 交互改造时参考 §10-12
4. 确保输出符合 §1.2 的要求
### 对于开发者
**快速上手**：
1. 先读主规范 §1-4 了解规则和决策
2. 需要时查阅 §5-12 的换算表和附录
3. 按 §13 的流程逐步完成迁移
4. 问题排查时回到对应章节
---
## 🔑 核心要点
### 1. 单位策略
- **rpx 为主**：布局、容器、间距
- **px 为辅**：发丝线、阴影、小图标
- **换算公式**：`rpx = px × 1.8204`
### 2. line-height 关键发现 ⚠️
- 微信小程序的 `<text>` 组件不能直接设置 `line-height`
- 必须在外层 `<view>` 上设置，text 会自动继承
- 详见主规范 §2.6 和 §6.2
### 3. 数据驱动
- 禁止使用 DOM 操作（`document.*`、`element.classList.*`）
- 所有交互改为 `setData` + 条件渲染
- 详见主规范 §11
### 4. 能力分级
- **A 类**：可直接使用（flex、transition、animation 等）
- **B 类**：有条件使用（sticky、grid、backdrop-filter 等）
- **C 类**：禁止直迁（DOM API、浏览器 API 等）
- 详见主规范 §3
---
## 📝 版本历史
### v3.0（2026-03-14）
- 合并 v1.0 技术换算基础和 v2.0 执行规范
- 补充 line-height 关键发现
- 统一文档结构，便于 AI 和开发者使用
### v2.0
- 执行规范，强化输入输出契约和能力分级
### v1.0
- 技术换算基础，建立完整的映射表
---
## 🗂️ 旧版文档（已归档）
以下文档已被 v3.0 主规范替代，保留作为参考：
- `docs/miniprogram-dev/h5-to-mp-bridge.md` - v1.0 技术换算基础
- `docs/prd/H5到微信小程序迁移桥接规范_可执行版_v2.md` - v2.0 执行规范
**建议**：新的迁移工作请使用 v3.0 主规范。
---
## 📊 文档统计
- **主规范**：约 1000+ 行，包含完整的执行规程、技术换算、交互改造、执行流程
- **附录 A**：181 行，Spacing 与尺寸字典
- **附录 B**：267 行，字体与文本字典（含 line-height 规则）
- **附录 C**：199 行，颜色字典
- **附录 D**：205 行，布局类映射字典
---
## 🚀 快速开始
### 第一次使用
1. 阅读主规范 `h5-to-mp-bridge-v3.md` 的 §1-4
2. 了解输入输出契约和强制决策
3. 查看 §13 的 10 步标准流程
### 执行迁移
1. 按 §13 的流程逐步执行
2. 查表时参考 §5-9 和附录
3. 交互改造时参考 §10-12
4. 验证输出符合 §1.2 的要求
### 问题排查
1. Y 轴高度不对 → 检查 line-height（§2.6、§6.2）
2. 交互不工作 → 检查是否改为数据驱动（§11）
3. 样式不对 → 检查单位换算（§2.3、§5-9）
4. 页面跳转失败 → 检查 TabBar 页面是否用 switchTab（§11.7）
---
**文档完整，可以开始迁移！** 🎉

173
docs/miniprogram-dev/ai-icon-color-system.md Normal file
View File

@@ -0,0 +1,173 @@
# AI 图标配色系统
> 文档版本：2026-03-14
> 对应 H5 原型：`docs/h5_ui/css/ai-icons.css`
> 小程序实现：`app.wxss`（全局样式）+ 2 个标准组件
---
## 一、概览
AI 图标系统包含 **2 个标准组件** × **6 种配色**，共 12 种组合。
| 组件 | 路径 | 用途 | 图标文件 |
|------|------|------|----------|
| `ai-inline-icon` | `/components/ai-inline-icon/` | 卡片行首小图标（30rpx 容器） | `ai-robot-inline.svg` |
| `ai-title-badge` | `/components/ai-title-badge/` | 标题行右侧徽章（胶囊形态） | `ai-robot-sm.svg` |
| 配色值 | 主色 | 辅色 | 深色（文字） | 适用场景 |
|--------|------|------|-------------|----------|
| `red` | #e74c3c | #f39c9c | #c0392b | 高优先召回 |
| `orange` | #e67e22 | #f5c77e | #ca6c17 | 优先召回 |
| `yellow` | #d4a017 | #f7dc6f | #b8860b | 激励/奖励 |
| `blue` | #2980b9 | #7ec8e3 | #1a5276 | 信息/数据 |
| `indigo` | #667eea | #a78bfa | #4a5fc7 | 默认/通用（AI 标准色） |
| `purple` | #764ba2 | #c084fc | #5b3080 | 关系构建 |
---
## 二、组件注册
在页面的 `.json` 文件中按需注册：
```json
{
"usingComponents": {
"ai-inline-icon": "/components/ai-inline-icon/ai-inline-icon",
"ai-title-badge": "/components/ai-title-badge/ai-title-badge"
}
}
```
---
## 三、ai-inline-icon（行首嵌入小图标）
### 外观
- 尺寸：30rpx × 30rpx，圆角 6rpx
- 背景：淡色渐变（主色 ~8% 透明度）
- 内部图标：`ai-robot-inline.svg`（白色机身）
- 动效：微光扫过（12s 周期）
### WXML 用法
```wxml
<!-- 固定配色 —— indigo（默认） -->
<ai-inline-icon />
<!-- 固定配色 —— orange -->
<ai-inline-icon color="orange" />
<!-- 页面随机配色（推荐） -->
<ai-inline-icon color="{{aiColor}}" />
```
### 属性
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `color` | String | `indigo` | 配色：`red` \| `orange` \| `yellow` \| `blue` \| `indigo` \| `purple` |
### 典型场景
- 任务卡片第三行 AI 建议文字行首（`task-list`）
- 话术气泡行首标识（`task-detail`）
---
## 四、ai-title-badge（标题行 AI 徽章）
### 外观
- 形态：胶囊，`padding: 4rpx 14rpx 4rpx 6rpx`，圆角 18rpx
- 背景：主色 ~8% 透明度渐变 + 主色 35% 边框
- 文字：深色主色，20rpx，font-weight 500
- 动效：呼吸脉冲（3s）+ 高光扫过（14s）
### WXML 用法
```wxml
<!-- 默认配色 + 默认文字「AI智能洞察」 -->
<ai-title-badge />
<!-- 指定配色 -->
<ai-title-badge color="blue" />
<!-- 自定义文字 -->
<ai-title-badge color="orange" label="AI 建议" />
<!-- 页面随机配色（推荐） -->
<ai-title-badge color="{{aiColor}}" />
```
### 属性
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `color` | String | `indigo` | 配色：`red` \| `orange` \| `yellow` \| `blue` \| `indigo` \| `purple` |
| `label` | String | `AI智能洞察` | 徽章文字 |
### 典型场景
- 任务详情各区块标题右侧（`task-detail`）
- 业绩分析区块标题（`performance`）
---
## 五、页面随机配色方案（推荐）
每个页面在 `onLoad` 时随机选取一种配色，全页所有 AI 图标统一使用同一配色。
### TS 实现（复制到各页面）
```typescript
const AI_COLORS = ['red', 'orange', 'yellow', 'blue', 'indigo', 'purple'] as const
type AiColor = typeof AI_COLORS[number]
Page({
data: {
aiColor: 'indigo' as AiColor,
},
onLoad() {
const aiColor = AI_COLORS[Math.floor(Math.random() * AI_COLORS.length)]
this.setData({ aiColor })
},
})
```
### WXML 绑定
```wxml
<!-- 行首图标 -->
<ai-inline-icon color="{{aiColor}}" />
<!-- 标题徽章 -->
<ai-title-badge color="{{aiColor}}" />
```
---
## 六、各页面配色建议（可选固定配色）
如不使用随机方案，可按以下建议固定配色：
| 页面 | 建议配色 | 原因 |
|------|---------|------|
| `task-list` | 随机 | 每日新鲜感 |
| `task-detail` | `indigo` | 通用默认 |
| `task-detail-callback` | `orange` | 与 banner 主题色呼应 |
| `task-detail-relationship` | `purple` | 与 banner 粉色系呼应 |
| `performance` | `blue` | 数据分析感 |
| `customer-detail` | `yellow` | 黑金页面，黄色点缀 |
| `coach-detail` | `red` | coral banner 配红色 AI |
---
## 七、文件索引
| 文件 | 说明 |
|------|------|
| `app.wxss` | 全局样式：`.ai-inline-icon`、`.ai-title-badge`、`.ai-color-*` |
| `components/ai-inline-icon/` | 行首图标标准组件 |
| `components/ai-title-badge/` | 标题徽章标准组件 |
| `assets/icons/ai-robot-inline.svg` | 行首图标 SVG（白色） |
| `assets/icons/ai-robot-sm.svg` | 徽章图标 SVG |
| `docs/h5_ui/css/ai-icons.css` | H5 原型参考源文件 |

1080
docs/miniprogram-dev/h5-to-mp-bridge-v3.md Normal file
View File

File diff suppressed because it is too large Load Diff