54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# B 类 - 详情/操作二级页通用规范
|
||
|
||
## 页面列表
|
||
|
||
| 页面 | 路由 |
|
||
|---|---|
|
||
| 产品详情 | `pages/product/index` |
|
||
| 订单详情 | `pages/orderDetail/index` |
|
||
| 设计工作台 | `pages/diy/index` |
|
||
| 贴纸编辑 | `pages/diy/stickerEdit` |
|
||
| 结算 | `pages/checkout/index` |
|
||
| 收货地址 | `pages/address/index` |
|
||
| 设置 | `pages/settings/index` |
|
||
| AI词云生成 | `pages/wordcloud/index` |
|
||
|
||
## 组件调用
|
||
|
||
- **TabBar**：不显示。二级页无需处理。
|
||
- **TopMask**：调用，`showBack`；遮罩左上角显示圆形毛玻璃返回按钮，点击 `Taro.navigateBack()`。
|
||
- **useStatusBar / ThemedPageMeta**：按现有页面模式保留。
|
||
|
||
## 设计规范
|
||
|
||
- 顶部：返回按钮 + 标题同一行，`paddingTop（或 marginTop）= statusBarHeight + 12px`。
|
||
- 返回按钮：圆形毛玻璃，与 TabBar 同材质（`blur(32px) saturate(1.2)` + 半透明底 + 阴影），浅/深主题各一套。
|
||
- 遮罩标题：页面标题文本（如“商品详情”），滚动进度过半后淡入，位于遮罩下 1/4 区域。
|
||
- 底部：不避让 TabBar，但需避让手势条 `env(safe-area-inset-bottom)`。
|
||
- 页面内原生返回按钮与遮罩内返回按钮行为一致，均为返回上一页。
|
||
|
||
## 接入示例
|
||
|
||
```tsx
|
||
<View className={`theme-${resolvedTheme}`}>
|
||
<ThemedPageMeta />
|
||
<ScrollTopMask title="页面标题" targetSelector=".page-header" showBack />
|
||
<View className="page">
|
||
<View className="page-header" style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||
<View className="back-btn" onTap={() => Taro.navigateBack()}>
|
||
<Text>←</Text>
|
||
</View>
|
||
<Text className="nav-title">页面标题</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
```
|
||
|
||
## 验收清单
|
||
|
||
- [ ] 顶部字距为 `statusBarHeight + 12px`
|
||
- [ ] 页面顶部有返回入口；滚动后遮罩左上角圆形返回按钮仍可点击
|
||
- [ ] TopMask 标题与页面标题一致
|
||
- [ ] 浅色/深色主题下返回按钮材质与 TabBar 一致
|
||
|