47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
# A 类 - 根内容页（Tab）通用规范
|
||
|
||
## 页面列表
|
||
|
||
| 页面 | 路由 |
|
||
|---|---|
|
||
| 首页 | `pages/index/index` |
|
||
| 商品 | `pages/shop/index` |
|
||
| 设计清单 | `pages/designList/index` |
|
||
| 订单 | `pages/orders/index` |
|
||
| 我的 | `pages/profile/index` |
|
||
|
||
## 组件调用
|
||
|
||
- **TabBar**：显示。由 `app.config.ts` 的 `tabBar.custom: true` 自动挂载，页面内不需要调用组件，也不要渲染自己的底部栏。
|
||
- **TopMask**：调用，`showBack={false}`；标题使用页面左上角大标题文本。
|
||
- **useStatusBar / ThemedPageMeta**：按现有页面模式保留。
|
||
|
||
## 设计规范
|
||
|
||
- 顶部字距：`paddingTop（或 marginTop）= statusBarHeight + 12px`，标题在左上角，不需要避开右上角胶囊。
|
||
- 大标题：页面左上角，字重与字号遵循各页面现有样式，不做渐变/缩放/吸顶。
|
||
- 底部：内容区必须为 TabBar 预留空间，滚动类页面底部保留 `padding-bottom`（含 `env(safe-area-inset-bottom)`）。
|
||
- 遮罩：滚动后顶部出现分层模糊 + 渐变，标题淡入在遮罩下 1/4 区域；无返回按钮。
|
||
|
||
## 接入示例
|
||
|
||
```tsx
|
||
<View className={`theme-${resolvedTheme}`}>
|
||
<ThemedPageMeta />
|
||
<ScrollTopMask title="页面标题" targetSelector=".xxx-header" />
|
||
<View className="page">
|
||
<View className="xxx-header" style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||
<Text className="page-title">页面标题</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
```
|
||
|
||
## 验收清单
|
||
|
||
- [ ] 顶部字距为 `statusBarHeight + 12px`，iOS/Android 视觉效果一致
|
||
- [ ] TabBar 正常显示，内容底部不被遮挡
|
||
- [ ] 滚动后 TopMask 淡入，标题居中淡入，无返回按钮
|
||
- [ ] 浅色/深色主题均正常
|
||
|