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

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)。
• 页面内原生返回按钮与遮罩内返回按钮行为一致，均为返回上一页。

接入示例

<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 一致