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

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

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