62 lines
2.6 KiB
Markdown
62 lines
2.6 KiB
Markdown
# 页面设计规范 - 总览
|
||
|
||
> 本目录定义智绘微刻小程序的页面架构、页面分类与每类页面的统一设计规范。
|
||
|
||
## 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 类各页面文档
|
||
|