genealogy-min-program/pages/lineage/lineage.wxml

<wxs src="../../utils/helpers.wxs" module="helpers"/>
<view class="page">

  <!-- ── 搜索栏 ── -->
  <view class="search-bar">
    <view class="search-input-wrap">
      <text class="search-icon">🔍</text>
      <input
        class="search-input"
        placeholder="搜索成员姓名"
        value="{{searchKeyword}}"
        bindinput="onSearchInput"
        bindconfirm="searchMember"
      />
      <view class="clear-btn" wx:if="{{searchKeyword}}" bindtap="clearSearch">✕</view>
    </view>
    <button class="search-btn" bindtap="searchMember">查询</button>
  </view>

  <!-- ── 搜索结果下拉 ── -->
  <view class="search-dropdown" wx:if="{{searchResults.length > 0}}">
    <view
      class="search-item"
      wx:for="{{searchResults}}"
      wx:key="id"
      bindtap="selectMember"
      data-member="{{item}}"
    >
      <text class="si-name">{{item.name}}{{item.simplified_name ? ' (' + item.simplified_name + ')' : ''}}</text>
      <text class="si-gen">{{item.name_word_generation || ''}}</text>
    </view>
  </view>

  <!-- ── 空状态 ── -->
  <view class="empty-state" wx:if="{{!center && !loading && searchResults.length === 0}}">
    <view class="empty-icon">🌳</view>
    <text class="empty-title">世系查询</text>
    <text class="empty-desc">输入成员姓名，查看完整家族世系脉络</text>
  </view>

  <!-- ── 加载中 ── -->
  <view class="loading-state" wx:if="{{loading}}">
    <view class="loading-dot"></view>
    <text>加载中...</text>
  </view>

  <!-- ── 调试信息（有数据但不显示时排查用） ── -->
  <view class="debug-bar" wx:if="{{center && !loading}}">
    <text class="debug-text">✓ 已加载：{{center.name}} | 祖先{{reversedGenerations.length}}代 | 子女{{children.length}}人</text>
  </view>

  <!-- ══════════════════════════════════
       世系树主体
  ══════════════════════════════════ -->
  <scroll-view scroll-y class="tree-scroll" wx:if="{{center && !loading}}">
    <view class="tree-body">

      <!-- ── 祖先链（由远及近，从上到下） ── -->
      <block wx:for="{{reversedGenerations}}" wx:key="index" wx:for-item="gen">
        <view class="gen-row">
          <!-- 代际标签 -->
          <view class="gen-label">
            <text class="gen-label-text">{{helpers.getAncestorLabel(gen.depth)}}</text>
          </view>
          <!-- 本代：祖先 + 兄弟按 child_order 排序，scroll-left 精确居中 -->
          <scroll-view
            scroll-x
            class="gen-peer-scroll"
            scroll-left="{{gen.scrollLeft}}"
          >
            <view class="gen-peer-list">
              <view
                wx:for="{{gen.allPeers}}"
                wx:key="id"
                id="{{item.isAncestor ? 'anc-' + item.id : 'sib-' + item.id}}"
                class="card {{item.isAncestor ? 'ancestor-card' : 'sibling-card'}}"
                bindtap="viewDetail"
                data-member="{{item}}"
              >
                <view class="order-badge" wx:if="{{item.child_order}}">
                  <text class="order-badge-text">{{helpers.getChildOrderText(item.child_order)}}</text>
                </view>
                <view class="card-name-wrap">
                  <text class="card-name {{item.isAncestor ? '' : 'card-name-sm'}}">{{item.name}}</text>
                  <text class="card-simplified" wx:if="{{item.simplified_name && item.simplified_name !== item.name}}">({{item.simplified_name}})</text>
                </view>
                <text class="card-gen">{{item.name_word_generation || ''}}</text>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 竖向连接线 -->
        <view class="connector">
          <view class="connector-line"></view>
        </view>
      </block>

      <!-- ── 查询人物（含同辈，按第几子排序，center 居中） ── -->
      <view class="gen-row center-row">
        <view class="gen-label gen-label-center">
          <text class="gen-label-text">查询人物</text>
        </view>
        <scroll-view
          scroll-x
          class="peer-scroll"
          scroll-left="{{peerScrollLeft}}"
        >
          <view class="peer-list">
            <view
              wx:for="{{peers}}"
              wx:key="id"
              id="{{item.isCenter ? 'peer-center' : 'peer-' + item.id}}"
              class="card {{item.isCenter ? 'center-card' : 'sibling-card'}}"
              bindtap="viewDetail"
              data-member="{{item}}"
            >
              <!-- 排行标签 -->
              <view class="peer-order-badge {{item.isCenter ? 'order-badge-center' : ''}}">
                <text class="peer-order-text">{{helpers.getChildOrderText(item.child_order)}}</text>
              </view>
              <view class="card-name-wrap">
                <text class="card-name {{item.isCenter ? 'center-name' : 'card-name-sm'}}">{{item.name}}</text>
                <text class="card-simplified {{item.isCenter ? 'center-simplified' : ''}}"
                  wx:if="{{item.simplified_name && item.simplified_name !== item.name}}">
                  ({{item.simplified_name}})
                </text>
              </view>
              <text class="card-gen {{item.isCenter ? 'center-gen' : ''}}">{{item.name_word_generation || ''}}</text>
              <view class="center-badge" wx:if="{{item.isCenter}}">查询人</view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- ── 子女 ── -->
      <block wx:if="{{children.length > 0}}">
        <view class="connector">
          <view class="connector-line"></view>
        </view>
        <view class="children-section">
          <view class="children-label">
            <text class="children-label-text">子女</text>
          </view>
          <scroll-view scroll-x class="children-scroll" scroll-left="{{childrenScrollLeft}}">
            <view class="children-list">
              <view
                class="card child-card"
                wx:for="{{children}}"
                wx:key="id"
                bindtap="viewDetail"
                data-member="{{item}}"
              >
                <view class="order-badge">
                  <text class="order-badge-text">{{helpers.getChildOrderText(item.child_order)}}</text>
                </view>
                <view class="card-name-wrap">
                  <text class="card-name card-name-sm">{{item.name}}</text>
                  <text class="card-simplified" wx:if="{{item.simplified_name && item.simplified_name !== item.name}}">({{item.simplified_name}})</text>
                </view>
                <text class="card-gen">{{item.name_word_generation || ''}}</text>
                <view class="has-children-dot" wx:if="{{item.has_children}}">▼</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </block>

    </view>
  </scroll-view>

  <!-- ══════════════════════════════════
       成员详情弹窗
  ══════════════════════════════════ -->
  <view class="modal-mask" wx:if="{{showDetail}}" bindtap="closeDetail">
    <view class="modal-box" catchtap="stopProp">
      <view class="modal-header">
        <text class="modal-title">成员详情</text>
        <view class="modal-close" bindtap="closeDetail">✕</view>
      </view>
      <view class="modal-body" wx:if="{{detailMember}}">
        <view class="detail-row">
          <text class="dl">姓名</text>
          <text class="dv">{{detailMember.name}}{{detailMember.simplified_name && detailMember.simplified_name !== detailMember.name ? ' (' + detailMember.simplified_name + ')' : ''}}</text>
        </view>
        <view class="detail-row">
          <text class="dl">性别</text>
          <text class="dv">{{detailMember.sex === 1 ? '男' : '女'}}</text>
        </view>
        <view class="detail-row">
          <text class="dl">出生日期</text>
          <text class="dv">{{detailMember.birthday_date || '-'}}</text>
        </view>
        <view class="detail-row">
          <text class="dl">世系世代</text>
          <text class="dv">{{detailMember.name_word_generation || '-'}}</text>
        </view>
        <view class="detail-row">
          <text class="dl">堂内排行</text>
          <text class="dv">{{detailMember.family_rank || '-'}}</text>
        </view>
        <view class="detail-row">
          <text class="dl">婚姻状况</text>
          <text class="dv">{{helpers.getMaritalStatusText(detailMember.marital_status)}}</text>
        </view>
        <view class="detail-row">
          <text class="dl">是否过世</text>
          <text class="dv">{{detailMember.is_pass_away === 0 ? '健在' : (detailMember.is_pass_away === 1 ? '已故' : '未知')}}</text>
        </view>
      </view>
      <view class="modal-footer">
        <button class="modal-btn btn-switch" bindtap="switchCenter">以此人为中心</button>
        <button class="modal-btn btn-close" bindtap="closeDetail">关闭</button>
      </view>
    </view>
  </view>

</view>