lunar-mini/mini/pages/bazi/bazi.wxml

<view class="container">
  <!-- 文化声明 -->
  <view class="culture-card">
    <view class="culture-title">八字 · 传统历法文化</view>
    <view class="culture-text">八字（四柱）是中国传统文化的重要组成部分，源自古人观测天象、制定历法的干支纪时体系与五行哲学思想，属于传统民俗文化与历法知识范畴，不是封建迷信。本页面仅按传统历法规则进行排盘展示与知识科普，内容供传统文化学习与娱乐参考，不构成任何人生决策建议。</view>
  </view>

  <!-- 空态：示例提示 + 绑定入口 -->
  <block wx:if="{{isDemo}}">
    <view class="card empty-card">
      <view class="empty-title">你还没有绑定生辰信息</view>
      <view class="empty-desc">下方是一份示例排盘，帮助你了解八字页面的内容。在个人中心可免费绑定 3 个出生年月（本人、家人），绑定后即可查看专属排盘。</view>
      <view class="btn-primary text-center mt-2" bindtap="goSettings">去绑定我的生辰</view>
    </view>
    <view class="demo-banner">
      <text class="demo-tag">示例</text>
      <text class="demo-text">以下排盘基于虚构生辰（1990-08-08 10:30 男），仅演示页面效果</text>
    </view>
  </block>

  <!-- 已绑定：档案选择 -->
  <view class="card" wx:if="{{!isDemo}}">
    <view class="section-title">我的生辰</view>
    <view class="flex gap-2 profile-chips">
      <view
        class="profile-chip {{item.id === activeProfileId ? 'active' : ''}}"
        wx:for="{{profiles}}"
        wx:key="id"
        bindtap="selectProfile"
        data-id="{{item.id}}"
      >{{item.name}}</view>
      <view class="profile-chip add-chip" bindtap="goSettings">管理 ›</view>
    </view>
    <view class="text-xs text-muted mt-1">
      {{profile.name}} · {{profile.gender === 'female' ? '女' : '男'}} · 公历 {{profile.birthday}} {{profile.birthTime}}
    </view>
  </view>

  <!-- 四柱八字 -->
  <view class="card">
    <view class="section-title">四柱八字</view>
    <view class="grid grid-cols-4 gap-2">
      <view class="pillar" wx:for="{{pillars}}" wx:key="label">
        <text class="pillar-label">{{item.label}}</text>
        <text class="pillar-ten">{{item.tenStar}}</text>
        <text class="pillar-char {{item.stemClass}}">{{item.heavenStem}}</text>
        <text class="pillar-char {{item.branchClass}}">{{item.earthBranch}}</text>
        <text class="pillar-hide" wx:if="{{item.hideStems}}">藏 {{item.hideStems}}</text>
        <text class="pillar-nayin">{{item.nayin}}</text>
      </view>
    </view>
  </view>

  <!-- 命盘概览 -->
  <view class="card">
    <view class="section-title">命盘概览</view>
    <view class="meta-grid">
      <view class="meta-item">
        <text class="meta-label">日主</text>
        <text class="meta-value">{{bazi.eightChar.dayMaster}}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">五行旺</text>
        <text class="meta-value">{{elementAnalysis.dominant}}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">五行弱</text>
        <text class="meta-value">{{elementAnalysis.weakest}}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">空亡</text>
        <text class="meta-value">{{bazi.eightChar.emptyBranches[0]}}{{bazi.eightChar.emptyBranches[1]}}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">年柱纳音</text>
        <text class="meta-value">{{pillars[0].nayin}}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">五行均衡</text>
        <text class="meta-value">{{elementAnalysis.isBalanced ? '较均衡' : '有偏旺'}}</text>
      </view>
    </view>
  </view>

  <!-- 五行分析 -->
  <view class="card">
    <view class="section-title">五行分析</view>
    <view class="element-bar">
      <view class="element-item" wx:for="{{elements}}" wx:key="name">
        <text class="element-name">{{item.name}}</text>
        <view class="element-track">
          <view class="element-fill {{item.cls}}" style="width: {{item.percent}}%"></view>
        </view>
        <text class="element-count">{{item.count}}</text>
      </view>
    </view>
    <view class="mt-2 text-xs text-muted">按天干、地支计 1 分，藏干计 0.5 分；得分越高代表该五行在命盘中越突出。</view>
  </view>

  <!-- 大运 -->
  <view class="card">
    <view class="section-title">大运（十年一步）</view>
    <scroll-view scroll-x class="scroll-x">
      <view class="flex gap-2">
        <view class="fortune-item" wx:for="{{bazi.decadeFortunes}}" wx:key="index">
          <text class="text-sm text-muted">{{item.startAge}}-{{item.endAge}}岁</text>
          <text class="text-base font-medium">{{item.ganzhi}}</text>
          <text class="text-xs text-muted">{{item.startYear}}-{{item.endYear}}</text>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 流年 -->
  <view class="card">
    <view class="section-title">流年</view>
    <scroll-view scroll-x class="scroll-x">
      <view class="flex gap-2">
        <view class="fortune-item" wx:for="{{bazi.annualFortunes}}" wx:key="year">
          <text class="text-sm text-muted">{{item.age}}岁</text>
          <text class="text-base font-medium">{{item.ganzhi}}</text>
          <text class="text-xs text-muted">{{item.year}}</text>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 字段说明 -->
  <view class="card">
    <view class="glossary-header" bindtap="toggleGlossary">
      <text class="section-title glossary-title">这些字段是什么意思？</text>
      <text class="glossary-toggle">{{showGlossary ? '收起' : '展开'}}</text>
    </view>
    <block wx:if="{{showGlossary}}">
      <view class="glossary-item" wx:for="{{glossary}}" wx:key="term">
        <text class="glossary-term">{{item.term}}</text>
        <text class="glossary-desc">{{item.desc}}</text>
      </view>
    </block>
  </view>

  <!-- 底部操作 -->
  <view class="flex gap-2 mt-2 bottom-actions">
    <block wx:if="{{isDemo}}">
      <view class="btn-primary flex-1 text-center" bindtap="goSettings">绑定生辰，查看我的排盘</view>
    </block>
    <block wx:else>
      <view class="btn-outline flex-1 text-center" bindtap="goSettings">管理生辰</view>
      <view class="btn-primary flex-1 text-center" bindtap="goFortune">看今日运势</view>
    </block>
  </view>

  <!-- 底部免责声明 -->
  <view class="disclaimer">
    八字排盘为传统历法文化展示，内容仅供学习参考，请理性看待，切勿迷信。
  </view>
</view>