# 页面设计规范 - 总览

> 本目录定义智绘微刻小程序的页面架构、页面分类与每类页面的统一设计规范。

## 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 类各页面文档