feat: add scroll top mask, unify page top spacing and docs

docs/页面设计规范/B类/通用规范.md

@@ -0,0 +1,53 @@
+# 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 一致
+