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

docs/页面设计规范/C类/商品详情-沉浸式.md

@@ -0,0 +1,33 @@
+# 商品详情（沉浸式） 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/shop/detail`
+- 分类：`C类`
+- 标题文本：商品详情
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="商品详情"`
+  - `targetSelector=".shop-back-btn"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：不套用普通字距（保留滚动 Hero）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.shop-back-btn` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+darkTop + 全屏 Hero；页面自带返回按钮与 TopMask 返回按钮双保险。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

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

@@ -0,0 +1,28 @@
+# C 类 - 沉浸式全屏页通用规范
+
+## 页面列表
+
+| 页面 | 路由 |
+|---|---|
+| 商品详情（沉浸式） | `pages/shop/detail` |
+
+## 组件调用
+
+- **TabBar**：不显示。
+- **TopMask**：调用，`showBack`；标题为“商品详情”。
+- **useStatusBar / ThemedPageMeta**：使用 `darkTop` 模式，顶部沉浸深色。
+
+## 设计规范
+
+- 顶部不套用普通「状态栏 + 固定间距」规则，保留页面自己的滚动 Hero 设计：
+  - 主图全屏滚动、顶部裁切、Hero 信息渐隐、内容透明过渡与返回按钮渐隐。
+- 沉浸期自带深色遮罩与 back button；滚动进入内容区后 TopMask 负责承接层级感。
+- 返回按钮：页面 Hero 自带 + TopMask 圆形毛玻璃返回按钮双保险，行为均为返回上一页。
+- 底部：避让手势条 `env(safe-area-inset-bottom)`。
+
+## 验收清单
+
+- [ ] Hero 沉浸滚动效果未受影响
+- [ ] 滚动后 TopMask 淡入，返回按钮可用
+- [ ] 深色主题下状态栏文字清晰
+