wechat_wc/docs/页面设计规范/C类/通用规范.md

C 类 - 沉浸式全屏页通用规范

页面列表

页面	路由
商品详情（沉浸式）	pages/shop/detail

组件调用

• TabBar：不显示。
• TopMask：调用，showBack；标题为“商品详情”。
• useStatusBar / ThemedPageMeta：使用 darkTop 模式，顶部沉浸深色。

设计规范

• 顶部不套用普通「状态栏 + 固定间距」规则，保留页面自己的滚动 Hero 设计：
  • 主图全屏滚动、顶部裁切、Hero 信息渐隐、内容透明过渡与返回按钮渐隐。
• 沉浸期自带深色遮罩与 back button；滚动进入内容区后 TopMask 负责承接层级感。
• 返回按钮：页面 Hero 自带 + TopMask 圆形毛玻璃返回按钮双保险，行为均为返回上一页。
• 底部：避让手势条 env(safe-area-inset-bottom)。

验收清单

• Hero 沉浸滚动效果未受影响
• 滚动后 TopMask 淡入，返回按钮可用
• 深色主题下状态栏文字清晰