# 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 淡入，标题居中淡入，无返回按钮
- [ ] 浅色/深色主题均正常