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

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 区域；无返回按钮。

接入示例

<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 淡入，标题居中淡入，无返回按钮
• 浅色/深色主题均正常