wechat_wc/docs/页面设计规范/README.md

页面设计规范 - 总览

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

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