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

docs/页面设计规范/B类/AI词云生成.md

@@ -0,0 +1,33 @@
+# AI词云生成 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/wordcloud/index`
+- 分类：`B类`
+- 标题文本：AI词云生成
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="AI词云生成"`
+  - `targetSelector=".page-header.cloud-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header.cloud-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+步骤式工具页，内容较长可滚动；返回按钮 + TopMask 返回按钮。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

docs/页面设计规范/B类/产品详情.md

@@ -0,0 +1,33 @@
+# 产品详情 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/product/index`
+- 分类：`B类`
+- 标题文本：商品详情
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="商品详情"`
+  - `targetSelector=".page-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+加载/未找到/正常三个分支都有 page-header；返回按钮 + TopMask 返回按钮。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

docs/页面设计规范/B类/收货地址.md

@@ -0,0 +1,33 @@
+# 收货地址 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/address/index`
+- 分类：`B类`
+- 标题文本：收货地址
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="收货地址"`
+  - `targetSelector=".page-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+列表 + 新增/编辑表单；返回按钮 + TopMask 返回按钮。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

docs/页面设计规范/B类/结算.md

@@ -0,0 +1,33 @@
+# 结算 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/checkout/index`
+- 分类：`B类`
+- 标题文本：设计效果确认
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="设计效果确认"`
+  - `targetSelector=".page-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+加载/正常两个分支都有 page-header；确认底部操作条避让手势条。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

docs/页面设计规范/B类/订单详情.md

@@ -0,0 +1,33 @@
+# 订单详情 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/orderDetail/index`
+- 分类：`B类`
+- 标题文本：订单详情
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="订单详情"`
+  - `targetSelector=".page-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+未找到/正常两个分支；返回按钮 + TopMask 返回按钮。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

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

@@ -0,0 +1,33 @@
+# 设置 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/settings/index`
+- 分类：`B类`
+- 标题文本：设置
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="设置"`
+  - `targetSelector=".page-header.settings-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header.settings-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+短内容页；TopMask 触发点由 .page-header 决定。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

docs/页面设计规范/B类/设计工作台.md

@@ -0,0 +1,33 @@
+# 设计工作台 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/diy/index`
+- 分类：`B类`
+- 标题文本：设计工作台
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="设计工作台"`
+  - `targetSelector=".page-header.surface-card"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.page-header.surface-card` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+画布操作页，页头为卡片式；滚动场景少但仍接入 TopMask。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

docs/页面设计规范/B类/贴纸编辑.md

@@ -0,0 +1,33 @@
+# 贴纸编辑 页面设计规范
+
+## 基本信息
+
+- 路由：`pages/diy/stickerEdit`
+- 分类：`B类`
+- 标题文本：编辑贴纸
+- TabBar：否
+
+## 组件调用
+
+- **ScrollTopMask**
+  - `title="编辑贴纸"`
+  - `targetSelector=".edit-header"`
+  - `showBack`：`是`
+- **CustomTabBar**：不显示。
+
+## 设计要点
+
+- 顶部字距：statusBarHeight + 12px（已统一）。
+- 底部安全区：避让 env(safe-area-inset-bottom)。
+- TopMask 出现阈值由 `.edit-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
+
+## 页面特有说明
+
+横滑滑块/画布页；返回按钮样式为 edit-back，TopMask 返回按钮保持圆形毛玻璃。
+
+## 验收要点
+
+- [ ] 顶部字距符合 class 通用规范
+- [ ] TopMask 标题/返回按钮符合预期
+- [ ] 浅色/深色主题正常
+- [ ] iOS / Android 真机表现一致

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