页面设计规范 - 总览
本目录定义智绘微刻小程序的页面架构、页面分类与每类页面的统一设计规范。
1. 页面架构
小程序自定义导航（navigationStyle: custom），共 17 个页面。整体分两层：
- 一级页（Tab 根页）：5 个，底部显示自定义 TabBar。
- 二级页（详情/操作/工具页）：12 个，不显示 TabBar，通过
navigateBack返回。
页面路由见 src/app.config.ts。
2. 全局共用件
| 组件/工具 | 位置 | 用途 |
|---|---|---|
ScrollTopMask |
src/components/ScrollTopMask |
顶部滚动遮罩：分层模糊 + 渐变透明度 + 居中标题 + 可选返回按钮 |
CustomTabBar |
src/custom-tab-bar |
底部毛玻璃悬浮 TabBar，仅一级页显示 |
ThemedPageMeta |
src/components/ThemedPageMeta |
页面元信息与窗口背景主题 |
useSafeArea() |
src/hooks/useSafeArea |
状态栏/胶囊/安全区数据，全端自适应 |
useStatusBar() |
src/hooks/useStatusBar |
状态栏文字颜色 |
3. 通用规则
顶部字距
- 一级页与普通二级页使用
paddingTop / marginTop = statusBarHeight + 12px。 - 标题都在左上角，无需让开右上角胶囊按钮，因此不再使用旧的
headerPaddingTop（max(menuButtonTop + menuButtonHeight + 6, statusBarHeight + 44)）。 - 该公式随 iOS / Android 状态栏高度自动变化，两端通用，不写死像素。
- 沉浸式页（
shop/detail）除外，保留其滚动 Hero 设计。
顶部遮罩 ScrollTopMask
- 所有页面均调用。
- 一级页：
showBack={false}。 - 二级页带返回：
showBack，遮罩左上角显示圆形毛玻璃返回按钮。 - 工具/文字页无返回：
showBack={false}。
底部安全区
- 一级页：内容底部避让 TabBar（
padding-bottom含 TabBar 高度与安全区）。 - 二级页：底部避让手势条
env(safe-area-inset-bottom)。
4. 页面分类
| 分类 | 层级 | 页面 | 特点 |
|---|---|---|---|
| A 类 | 一级页 | 首页、商品、设计清单、订单、我的 | TabBar 根页，内容流 |
| B 类 | 二级页 | 产品详情、订单详情、设计工作台、贴纸编辑、结算、收货地址、设置、AI词云 | 详情/操作，带返回 |
| C 类 | 二级页 | 商品详情（hero） | 沉浸式全屏滚动 |
| D 类 | 二级页 | 联系客服、定制协议、用户数据库 | 工具/文字页 |
5. 文档索引
A类/通用规范.md+ A 类各页面文档B类/通用规范.md+ B 类各页面文档C类/通用规范.md+ C 类页面文档D类/通用规范.md+ D 类各页面文档