5.1 KiB
5.1 KiB
Notes 页面迁移说明
迁移版本
- H5 原型基准：
docs/h5_ui/pages/notes.html - 桥文档版本：v3.0
- 迁移日期：2026-03-14
样式调整清单
1. 单位转换规则
遵循桥文档 §2.3 的混合单位策略：
- 主要使用
px：因为notes页面的尺寸需要与H5原型1:1对齐 - 换算基准：H5 CSS px → 小程序 px（412宽设备验收基准）
2. 导航栏（.custom-nav）
| 属性 | H5 值 | 小程序值 | 说明 |
|---|---|---|---|
| height | 44px | 44px | 标准导航栏高度 |
| padding | 0 16px | 0 16px | 左右内边距 |
| border-bottom | 1px solid | 1px solid #eeeeee | 分割线 |
icon 尺寸调整：
- H5:
w-5 h-5(20px) - 小程序:
size="24px"(考虑小程序点击区域最小44px)
3. 备注卡片（.note-card）
| 属性 | H5 值 | 小程序值 | 说明 |
|---|---|---|---|
| border-radius | rounded-2xl (16px) | 16px | 圆角 |
| padding | p-4 (16px) | 16px | 内边距 |
| box-shadow | shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | 阴影 |
| margin-bottom | mb-3 (12px) | 12px | 卡片间距 |
4. 文本样式
备注内容（.note-content）
| 属性 | H5 值 | 小程序值 | 说明 |
|---|---|---|---|
| font-size | text-sm (14px) | 14px | 正文字号 |
| line-height | leading-relaxed (1.625) | 20px | 行高（按附录B标准） |
| color | text-gray-13 | #242424 | 正文颜色 |
| margin-bottom | mb-3 (12px) | 12px | 下边距 |
line-height 设置规则（附录B.2.3）：
- 在外层
<view>的 class 上设置line-height <text>会自动继承，不需要额外设置
标签（.note-tag）
| 属性 | H5 值 | 小程序值 | 说明 |
|---|---|---|---|
| padding | px-2.5 py-1 (10px 4px) | 4px 10px | 标签内边距 |
| font-size | text-xs (12px) | 12px | 标签字号 |
| border-radius | rounded-lg (8px) | 8px | 圆角 |
| border | 1px solid | 1px solid | 边框 |
时间戳（.note-time）
| 属性 | H5 值 | 小程序值 | 说明 |
|---|---|---|---|
| font-size | text-xs (12px) | 12px | 时间字号 |
| color | text-gray-6 | #a6a6a6 | 次级文字颜色 |
5. 列表容器（.note-list）
| 属性 | H5 值 | 小程序值 | 说明 |
|---|---|---|---|
| padding | p-4 (16px) | 16px | 列表外边距 |
| gap | space-y-3 (12px) | 12px | 卡片间距 |
6. 颜色映射（附录C）
| 用途 | 色值 | 说明 |
|---|---|---|
| 主品牌色 | #0052d9 | primary |
| 成功色 | #00a870 | success |
| 背景色 | #f3f3f3 | gray-1 |
| 正文色 | #242424 | gray-13 |
| 次级文字 | #a6a6a6 | gray-6 |
| 分割线 | #eeeeee | gray-2 |
7. 标签渐变背景
客户标签：
background: linear-gradient(135deg, #ecf2fe, #e8eeff);
color: #0052d9;
border-color: #c5d4f7;
助教标签：
background: linear-gradient(135deg, #e8faf0, #e0f7ea);
color: #00a870;
border-color: #b3e6d0;
关键调整点
1. 全局 line-height 设置
page {
line-height: 1.5;
}
view {
line-height: inherit;
}
原因：微信小程序 <text> 组件不能直接设置 line-height，必须在外层 <view> 设置（附录B.2.3）
2. 单位统一为 px
- 原小程序版本混用
rpx和 CSS 变量 - 调整为直接使用
px，确保与H5原型1:1对齐 - 所有尺寸基于412宽设备验收基准
3. 移除 CSS 变量依赖
- 原：
var(--color-gray-2, #eeeeee) - 新：直接使用
#eeeeee - 原因：确保样式独立，不依赖全局变量
4. Icon 尺寸调整
- 原：
size="48rpx"(约88px) - 新：
size="24px"(标准导航栏icon尺寸) - 原因：与H5原型中的
w-5 h-5对齐
5. 加载态 icon 尺寸
- 原：
size="80rpx"(约146px) - 新：
size="40px"(适配小屏幕)
附录参考
使用的附录
-
附录A：Spacing 与尺寸字典 v3.0
- 间距换算：16px → 16px（px模式）
- 圆角：8px, 16px
-
附录B：字体与文本字典 v3.1
- text-sm: 14px / 20px
- text-xs: 12px / 16px
- 关键规则：line-height 必须在外层 view 上设置
-
附录C：颜色字典 v3.0
- 项目自定义颜色表
- 透明度变体处理
-
附录D：布局类映射字典 v3.0
- flex 布局
- gap 间距
验收清单
- 导航栏高度与H5对齐（44px）
- 卡片圆角与H5对齐（16px）
- 文字大小与H5对齐（14px/12px）
- 行高设置正确（在view上设置）
- 颜色值与H5对齐
- 间距与H5对齐（16px padding, 12px gap）
- 标签样式与H5对齐（渐变背景）
- 阴影效果与H5对齐（shadow-sm）
已知限制
- 安全区处理：使用
statusBarHeight动态计算，不使用env(safe-area-inset-*) - AI 悬浮按钮：bottom 值为 120px，需根据实际设备调整
- 页面滚动：使用页面自然滚动，未使用 scroll-view
后续维护
- 若真机测试发现尺寸偏差，优先检查 line-height 设置
- 若需要调整间距，参考附录A的spacing表
- 若需要调整字号，参考附录B的字体表
- 颜色调整参考附录C的颜色字典