# 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 一致