feat: add scroll top mask, unify page top spacing and docs
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
# 商品 页面设计规范
|
||||
|
||||
## 基本信息
|
||||
|
||||
- 路由：`pages/shop/index`
|
||||
- 分类：`A类`
|
||||
- 标题文本：智绘精选
|
||||
- TabBar：是
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **ScrollTopMask**
|
||||
- `title="智绘精选"`
|
||||
- `targetSelector=".shop-header"`
|
||||
- `showBack`：`否`
|
||||
- **CustomTabBar**：自动显示，页面无需手动调用。
|
||||
|
||||
## 设计要点
|
||||
|
||||
- 顶部字距：statusBarHeight + 12px（已统一）。
|
||||
- 底部安全区：避让 TabBar + env(safe-area-inset-bottom)。
|
||||
- TopMask 出现阈值由 `.shop-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
|
||||
|
||||
## 页面特有说明
|
||||
|
||||
商品网格信息流；标题带副文案，副文案随主标题上移后保留。
|
||||
|
||||
## 验收要点
|
||||
|
||||
- [ ] 顶部字距符合 class 通用规范
|
||||
- [ ] TopMask 标题/返回按钮符合预期
|
||||
- [ ] 浅色/深色主题正常
|
||||
- [ ] iOS / Android 真机表现一致
|
||||
@@ -0,0 +1,33 @@
|
||||
# 我的 页面设计规范
|
||||
|
||||
## 基本信息
|
||||
|
||||
- 路由：`pages/profile/index`
|
||||
- 分类：`A类`
|
||||
- 标题文本：我的
|
||||
- TabBar：是
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **ScrollTopMask**
|
||||
- `title="我的"`
|
||||
- `targetSelector=".profile-header"`
|
||||
- `showBack`：`否`
|
||||
- **CustomTabBar**：自动显示，页面无需手动调用。
|
||||
|
||||
## 设计要点
|
||||
|
||||
- 顶部字距：statusBarHeight + 12px（已统一）。
|
||||
- 底部安全区：避让 TabBar + env(safe-area-inset-bottom)。
|
||||
- TopMask 出现阈值由 `.profile-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
|
||||
|
||||
## 页面特有说明
|
||||
|
||||
登录卡片/用户区；无大标题，TopMask 标题用“我的”。
|
||||
|
||||
## 验收要点
|
||||
|
||||
- [ ] 顶部字距符合 class 通用规范
|
||||
- [ ] TopMask 标题/返回按钮符合预期
|
||||
- [ ] 浅色/深色主题正常
|
||||
- [ ] iOS / Android 真机表现一致
|
||||
@@ -0,0 +1,33 @@
|
||||
# 订单 页面设计规范
|
||||
|
||||
## 基本信息
|
||||
|
||||
- 路由：`pages/orders/index`
|
||||
- 分类：`A类`
|
||||
- 标题文本：我的订单
|
||||
- TabBar：是
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **ScrollTopMask**
|
||||
- `title="我的订单"`
|
||||
- `targetSelector=".orders-page .page-header"`
|
||||
- `showBack`：`否`
|
||||
- **CustomTabBar**：自动显示，页面无需手动调用。
|
||||
|
||||
## 设计要点
|
||||
|
||||
- 顶部字距：statusBarHeight + 12px（已统一）。
|
||||
- 底部安全区：避让 TabBar + env(safe-area-inset-bottom)。
|
||||
- TopMask 出现阈值由 `.orders-page .page-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
|
||||
|
||||
## 页面特有说明
|
||||
|
||||
ScrollView 列表 + tab 筛选；当前为 marginTop，统一时保持布局起点一致。
|
||||
|
||||
## 验收要点
|
||||
|
||||
- [ ] 顶部字距符合 class 通用规范
|
||||
- [ ] TopMask 标题/返回按钮符合预期
|
||||
- [ ] 浅色/深色主题正常
|
||||
- [ ] iOS / Android 真机表现一致
|
||||
@@ -0,0 +1,33 @@
|
||||
# 设计清单 页面设计规范
|
||||
|
||||
## 基本信息
|
||||
|
||||
- 路由：`pages/designList/index`
|
||||
- 分类：`A类`
|
||||
- 标题文本：我的设计清单
|
||||
- TabBar：是
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **ScrollTopMask**
|
||||
- `title="我的设计清单"`
|
||||
- `targetSelector=".page-header.design-header"`
|
||||
- `showBack`：`否`
|
||||
- **CustomTabBar**：自动显示，页面无需手动调用。
|
||||
|
||||
## 设计要点
|
||||
|
||||
- 顶部字距：statusBarHeight + 12px（已统一）。
|
||||
- 底部安全区：避让 TabBar + env(safe-area-inset-bottom)。
|
||||
- TopMask 出现阈值由 `.page-header.design-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
|
||||
|
||||
## 页面特有说明
|
||||
|
||||
ScrollView 列表 + 顶部 tab 筛选；批量管理模式注意遮罩不影响顶部操作。
|
||||
|
||||
## 验收要点
|
||||
|
||||
- [ ] 顶部字距符合 class 通用规范
|
||||
- [ ] TopMask 标题/返回按钮符合预期
|
||||
- [ ] 浅色/深色主题正常
|
||||
- [ ] iOS / Android 真机表现一致
|
||||
@@ -0,0 +1,46 @@
|
||||
# A 类 - 根内容页（Tab）通用规范
|
||||
|
||||
## 页面列表
|
||||
|
||||
| 页面 | 路由 |
|
||||
|---|---|
|
||||
| 首页 | `pages/index/index` |
|
||||
| 商品 | `pages/shop/index` |
|
||||
| 设计清单 | `pages/designList/index` |
|
||||
| 订单 | `pages/orders/index` |
|
||||
| 我的 | `pages/profile/index` |
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **TabBar**：显示。由 `app.config.ts` 的 `tabBar.custom: true` 自动挂载，页面内不需要调用组件，也不要渲染自己的底部栏。
|
||||
- **TopMask**：调用，`showBack={false}`；标题使用页面左上角大标题文本。
|
||||
- **useStatusBar / ThemedPageMeta**：按现有页面模式保留。
|
||||
|
||||
## 设计规范
|
||||
|
||||
- 顶部字距：`paddingTop（或 marginTop）= statusBarHeight + 12px`，标题在左上角，不需要避开右上角胶囊。
|
||||
- 大标题：页面左上角，字重与字号遵循各页面现有样式，不做渐变/缩放/吸顶。
|
||||
- 底部：内容区必须为 TabBar 预留空间，滚动类页面底部保留 `padding-bottom`（含 `env(safe-area-inset-bottom)`）。
|
||||
- 遮罩：滚动后顶部出现分层模糊 + 渐变，标题淡入在遮罩下 1/4 区域；无返回按钮。
|
||||
|
||||
## 接入示例
|
||||
|
||||
```tsx
|
||||
<View className={`theme-${resolvedTheme}`}>
|
||||
<ThemedPageMeta />
|
||||
<ScrollTopMask title="页面标题" targetSelector=".xxx-header" />
|
||||
<View className="page">
|
||||
<View className="xxx-header" style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
|
||||
<Text className="page-title">页面标题</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
```
|
||||
|
||||
## 验收清单
|
||||
|
||||
- [ ] 顶部字距为 `statusBarHeight + 12px`，iOS/Android 视觉效果一致
|
||||
- [ ] TabBar 正常显示，内容底部不被遮挡
|
||||
- [ ] 滚动后 TopMask 淡入，标题居中淡入，无返回按钮
|
||||
- [ ] 浅色/深色主题均正常
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
# 首页 页面设计规范
|
||||
|
||||
## 基本信息
|
||||
|
||||
- 路由：`pages/index/index`
|
||||
- 分类：`A类`
|
||||
- 标题文本：智绘微刻
|
||||
- TabBar：是
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **ScrollTopMask**
|
||||
- `title="智绘微刻"`
|
||||
- `targetSelector=".home-header"`
|
||||
- `showBack`：`否`
|
||||
- **CustomTabBar**：自动显示，页面无需手动调用。
|
||||
|
||||
## 设计要点
|
||||
|
||||
- 顶部字距：statusBarHeight + 12px（已实现）。
|
||||
- 底部安全区：避让 TabBar + env(safe-area-inset-bottom)。
|
||||
- TopMask 出现阈值由 `.home-header` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
|
||||
|
||||
## 页面特有说明
|
||||
|
||||
大标题左上角；轮播/搜索/分类卡片内容流较长，滚动后 TopMask 淡入。
|
||||
|
||||
## 验收要点
|
||||
|
||||
- [ ] 顶部字距符合 class 通用规范
|
||||
- [ ] TopMask 标题/返回按钮符合预期
|
||||
- [ ] 浅色/深色主题正常
|
||||
- [ ] iOS / Android 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 一致
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
# 商品详情（沉浸式） 页面设计规范
|
||||
|
||||
## 基本信息
|
||||
|
||||
- 路由：`pages/shop/detail`
|
||||
- 分类：`C类`
|
||||
- 标题文本：商品详情
|
||||
- TabBar：否
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **ScrollTopMask**
|
||||
- `title="商品详情"`
|
||||
- `targetSelector=".shop-back-btn"`
|
||||
- `showBack`：`是`
|
||||
- **CustomTabBar**：不显示。
|
||||
|
||||
## 设计要点
|
||||
|
||||
- 顶部字距：不套用普通字距（保留滚动 Hero）。
|
||||
- 底部安全区：避让 env(safe-area-inset-bottom)。
|
||||
- TopMask 出现阈值由 `.shop-back-btn` 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。
|
||||
|
||||
## 页面特有说明
|
||||
|
||||
darkTop + 全屏 Hero；页面自带返回按钮与 TopMask 返回按钮双保险。
|
||||
|
||||
## 验收要点
|
||||
|
||||
- [ ] 顶部字距符合 class 通用规范
|
||||
- [ ] TopMask 标题/返回按钮符合预期
|
||||
- [ ] 浅色/深色主题正常
|
||||
- [ ] iOS / Android 真机表现一致
|
||||
@@ -0,0 +1,28 @@
|
||||
# C 类 - 沉浸式全屏页通用规范
|
||||
|
||||
## 页面列表
|
||||
|
||||
| 页面 | 路由 |
|
||||
|---|---|
|
||||
| 商品详情（沉浸式） | `pages/shop/detail` |
|
||||
|
||||
## 组件调用
|
||||
|
||||
- **TabBar**：不显示。
|
||||
- **TopMask**：调用，`showBack`；标题为“商品详情”。
|
||||
- **useStatusBar / ThemedPageMeta**：使用 `darkTop` 模式，顶部沉浸深色。
|
||||
|
||||
## 设计规范
|
||||
|
||||
- 顶部不套用普通「状态栏 + 固定间距」规则，保留页面自己的滚动 Hero 设计：
|
||||
- 主图全屏滚动、顶部裁切、Hero 信息渐隐、内容透明过渡与返回按钮渐隐。
|
||||
- 沉浸期自带深色遮罩与 back button；滚动进入内容区后 TopMask 负责承接层级感。
|
||||
- 返回按钮：页面 Hero 自带 + TopMask 圆形毛玻璃返回按钮双保险，行为均为返回上一页。
|
||||
- 底部：避让手势条 `env(safe-area-inset-bottom)`。
|
||||
|
||||
## 验收清单
|
||||
|
||||
- [ ] Hero 沉浸滚动效果未受影响
|
||||
- [ ] 滚动后 TopMask 淡入，返回按钮可用
|
||||
- [ ] 深色主题下状态栏文字清晰
|
||||
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 真机表现一致
|
||||
@@ -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 正常淡入
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
# 页面设计规范 - 总览
|
||||
|
||||
> 本目录定义智绘微刻小程序的页面架构、页面分类与每类页面的统一设计规范。
|
||||
|
||||
## 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 类各页面文档
|
||||
|
||||
Reference in New Issue
Block a user