wx_pbzc/pages/records/records.wxml

<view class="container page-enter" style="{{themeStyle}}">
  <!-- 加载骨架屏 (200ms 最小显示) -->
  <block wx:if="{{loading}}">
    <ui-skeleton variant="card" />
    <view style="height: 24rpx;" />
    <ui-skeleton variant="card" />
  </block>

  <!-- 真实内容 (loading 时隐藏) -->
  <view hidden="{{loading}}">
  <!-- 首次空状态: 完全没训练记录时显示引导卡 -->
  <view class="first-train-prompt" wx:if="{{totalSessions === 0}}">
    <view class="empty-illus first-train-illus">
      <view class="empty-illus-body"></view>
      <view class="empty-illus-arm empty-illus-arm--l"></view>
      <view class="empty-illus-arm empty-illus-arm--r"></view>
      <view class="empty-illus-bubble">开始</view>
    </view>
    <text class="first-train-title">开始你的第一次训练</text>
    <text class="first-train-sub">每一次坚持都值得被记录</text>
    <view class="first-train-cta" bindtap="onStartTrain">
      <text>开始训练</text>
    </view>
  </view>

  <!-- 统计卡片 (有数据时才显示) -->
  <ui-card variant="in" hidden="{{totalSessions === 0}}">
    <view class="stats">
      <view class="stat-item">
        <image class="stat-icon" src="{{icons.rankFill}}" mode="aspectFit"></image>
        <text class="stat-num">{{totalSessions}}次</text>
        <text class="stat-label">训练次数</text>
      </view>
      <view class="stat-item">
        <image class="stat-icon" src="{{icons.timeFill}}" mode="aspectFit"></image>
        <text class="stat-num">{{totalDurationText}}</text>
        <text class="stat-label">累计时长</text>
      </view>
      <view class="stat-item">
        <image class="stat-icon" src="{{icons.crownFill}}" mode="aspectFit"></image>
        <text class="stat-num">{{maxDurationText}}</text>
        <text class="stat-label">最长记录</text>
      </view>
    </view>
  </ui-card>

  <!-- 日历热力图 -->
  <ui-card variant="in" hidden="{{totalSessions === 0}}">
    <view class="calendar-section">
      <view class="month-picker">
        <view class="month-arrow" bindtap="onPrevMonth">
          <image class="month-arrow-img" src="{{icons.back}}" mode="aspectFit"></image>
        </view>
        <view class="month-title-wrap">
          <image class="month-icon" src="{{icons.calendarFill}}" mode="aspectFit"></image>
          <text class="month-title">{{currentYear}}年 {{currentMonth}}月</text>
        </view>
        <view class="month-arrow" bindtap="onNextMonth">
          <image class="month-arrow-img" src="{{icons.right}}" mode="aspectFit"></image>
        </view>
      </view>
      <calendar-heatmap
        year="{{currentYear}}"
        month="{{currentMonth}}"
        records="{{monthRecords}}"
        primaryColor="{{theme.primary}}"
        binddaytap="onDayTap"
      ></calendar-heatmap>
    </view>
  </ui-card>

  <!-- 历史记录 -->
  <ui-card variant="in" hidden="{{totalSessions === 0}}">
    <view class="history-section">
      <view class="history-header">
        <view class="history-title-wrap">
          <image class="history-title-icon" src="{{icons.formFill}}" mode="aspectFit"></image>
          <text class="section-title">最近记录</text>
        </view>
        <text class="history-hint" wx:if="{{historyList.length > 0}}">长按可删除</text>
      </view>
      <view wx:if="{{historyList.length === 0}}" class="empty-state">
        <view class="empty-illus">
          <view class="empty-illus-body"></view>
          <view class="empty-illus-arm empty-illus-arm--l"></view>
          <view class="empty-illus-arm empty-illus-arm--r"></view>
          <view class="empty-illus-bubble">开始</view>
        </view>
        <text class="empty-text">还没有训练记录</text>
        <text class="empty-sub">完成第一次训练,开启你的坚持!</text>
      </view>
      <view class="history-list">
        <view class="history-item" wx:for="{{historyList}}" wx:key="id" data-id="{{item.id}}" bindlongpress="onLongPressDelete">
          <image class="history-item-icon"
            src="{{item.duration >= 120 ? icons.hotFill : item.duration >= 60 ? icons.likeFill : icons.roundCheckFill}}"
            mode="aspectFit"
          ></image>
          <view class="history-left">
            <text class="history-date">{{item.date}}</text>
            <text class="history-plan">{{item.day === 0 ? '自由训练' : '第 ' + item.day + ' 天'}}</text>
          </view>
          <view class="history-right">
            <text class="history-duration">{{item.duration}}s</text>
            <view class="history-delete-btn" catch:tap="onDeleteRecord" data-id="{{item.id}}">
              <image class="history-delete-icon" src="{{icons.deleteActive}}" mode="aspectFit"></image>
              <text class="history-delete-text">删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </ui-card>
  </view>
  <!-- /hidden wrapper -->

  <!-- 日期详情弹窗:普通 view 实现,不用 ui-modal。
       自定义组件根元素的 position: fixed 会被小程序运行时吞掉,叠加
       .page-enter 的 transform 会让 fixed 降级相对 .container,导致弹窗
       落到容器末尾而非视口居中。普通 view 的 fixed 100% 生效。 -->
  <view wx:if="{{showDayDetail}}" class="day-detail-mask" catchtouchmove="onNoop">
    <view class="day-detail-mask__bg" bindtap="onCloseDayDetail"></view>
    <view class="day-detail-body" catchtap="onNoop">
      <view class="detail-date-row">
        <image class="detail-icon" src="{{icons.calendarFill}}" mode="aspectFit"></image>
        <text class="detail-date">{{dayDetail.date}}</text>
      </view>
      <view class="detail-grid">
        <view class="detail-item">
          <image class="detail-item-icon" src="{{icons.rankFill}}" mode="aspectFit"></image>
          <text class="detail-num">{{dayDetail.sessions}}次</text>
          <text class="detail-label">训练次数</text>
        </view>
        <view class="detail-item">
          <image class="detail-item-icon" src="{{icons.timeFill}}" mode="aspectFit"></image>
          <text class="detail-num">{{dayDetail.durationText}}</text>
          <text class="detail-label">总时长</text>
        </view>
        <view class="detail-item">
          <image class="detail-item-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
          <text class="detail-num">{{dayDetail.calories}}</text>
          <text class="detail-label">约消耗 (千卡)</text>
        </view>
      </view>
      <view class="detail-close" bindtap="onCloseDayDetail">
        <text>关闭</text>
      </view>
    </view>
  </view>
</view>