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

docs/页面设计规范/D类/定制协议.md

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

docs/页面设计规范/D类/用户数据库.md

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

docs/页面设计规范/D类/联系客服.md

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

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

@@ -0,0 +1,32 @@
+# D 类 - 工具/文字页通用规范
+
+## 页面列表
+
+| 页面 | 路由 |
+|---|---|
+| 联系客服 | `pages/service/index` |
+| 定制协议 | `pages/agreement/index` |
+| 用户数据库 | `pages/userDatabase/index` |
+
+## 组件调用
+
+- **TabBar**：不显示。
+- **TopMask**：调用；是否开启 `showBack` 按页面能力决定：
+  - 联系客服：本期补齐返回能力 → `showBack`。
+  - 定制协议 / 用户数据库：无返回入口 → `showBack={false}`。
+- **useStatusBar / ThemedPageMeta**：按现有页面模式保留。
+
+## 设计规范
+
+- 顶部字距：`paddingTop（或 marginTop）= statusBarHeight + 12px`。
+- 工具/文字页内容通常较短：TopMask 仍随滚动淡入，但触发阈值由 `targetSelector` 决定。
+- 底部：避让手势条 `env(safe-area-inset-bottom)`。
+- 文字页（协议）保证长文本阅读舒适，行距/字号遵循现有样式。
+
+## 验收清单
+
+- [ ] 顶部字距为 `statusBarHeight + 12px`
+- [ ] 有返回能力的页面（联系客服）存在返回入口，TopMask 显示返回按钮
+- [ ] 无返回能力的页面不显示返回按钮
+- [ ] 滚动时 TopMask 正常淡入
+