wx_pbzc/pages/index/index.wxml

<view class="container page-enter" style="{{themeStyle}}">

  <!-- 顶部问候 -->
  <view class="greeting-row">
    <view class="greeting-text">
      <image class="greeting-icon" src="{{todayDone ? icons.successFill : icons.emojiFill}}" mode="aspectFit"></image>
      <text class="greeting-title">{{todayDone ? '太棒了！' : '准备好了吗？'}}</text>
    </view>
    <text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
  </view>

  <!-- 连续打卡卡片:火焰连胜 + 分段进度 -->
  <ui-card variant="gradient in" class="{{justCompleted ? 'just-completed' : ''}}">
    <view class="header-card">
      <!-- 上区:连胜视觉重心 + 计划徽章 -->
      <view class="streak-row">
        <view class="streak-section">
          <view class="streak-icon-wrap">
            <view class="streak-halo"></view>
            <image class="streak-icon" src="{{icons.hotWhite}}" mode="aspectFit"></image>
          </view>
          <view class="streak-text">
            <text class="streak-num">{{streakCount}}</text>
            <text class="streak-label">连续打卡</text>
          </view>
        </view>
        <view class="plan-badge">
          <image class="plan-badge-icon" src="{{icons.formWhite}}" mode="aspectFit"></image>
          <text class="plan-badge-text">{{planName}}</text>
        </view>
      </view>
      <!-- 下区:分段格子(<=10天)或里程碑连续条(>10天) -->
      <view class="segment-progress">
        <view class="segment-track" wx:if="{{useSegments}}">
          <view
            wx:for="{{planDays}}"
            wx:key="*this"
            class="segment-cell {{index < planDay - 1 ? 'done' : ''}} {{index === planDay - 1 ? 'current' : ''}}"
          ></view>
        </view>
        <view class="milestone-track" wx:else>
          <view class="milestone-bar">
            <view class="milestone-fill" style="width: {{planProgress}}%;"></view>
            <view class="milestone-node" style="left: 0%;"></view>
            <view class="milestone-node" style="left: 25%;"></view>
            <view class="milestone-node" style="left: 50%;"></view>
            <view class="milestone-node" style="left: 75%;"></view>
            <view class="milestone-node" style="left: 100%;"></view>
          </view>
        </view>
        <text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
      </view>
    </view>
  </ui-card>

  <!-- 今日目标卡片 -->
  <ui-card variant="in">
    <view class="target-section">
      <view class="target-header">
        <image class="section-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
        <text class="section-title">今日目标</text>
      </view>
      <view class="target-display">
        <view class="target-ring">
          <text class="target-time" style="font-size: {{targetTimeFontSize}}rpx;">{{todayTargetText}}</text>
        </view>
      </view>
      <view class="today-status">
        <block wx:if="{{todayDone}}">
          <view class="done-badge">
            <image class="done-icon" src="{{icons.successFill}}" mode="aspectFit"></image>
            <text class="done-text">今日已完成 {{todayDuration}} 秒</text>
          </view>
        </block>
        <block wx:else>
          <image class="pending-icon" src="{{icons.time}}" mode="aspectFit"></image>
          <text class="pending-text">还未开始训练</text>
        </block>
      </view>
    </view>
  </ui-card>

  <!-- 操作按钮区 -->
  <view class="action-buttons">
    <ui-btn
      variant="primary"
      size="xl"
      block
      text="{{todayDone ? '再次训练' : '开始训练'}}"
      icon-src="{{icons.playWhite}}"
      bindtap="onStartTrain"
    ></ui-btn>

    <ui-btn
      variant="ghost"
      size="md"
      block
      text="自由训练 · 自定义时长"
      icon-src="{{icons.timeFill}}"
      bindtap="onFreeTrain"
    ></ui-btn>
  </view>

  <!-- 时间选择弹窗 -->
  <ui-modal
    visible="{{showPicker}}"
    position="bottom"
    bind:close="onClosePicker"
  >
    <text class="picker-title">选择训练时长</text>
    <view class="preset-grid">
      <view
        class="preset-item {{customDuration === item ? 'selected' : ''}}"
        wx:for="{{presets}}"
        wx:key="*this"
        data-value="{{item}}"
        bindtap="onSelectPreset"
      >
        <text class="preset-num">{{item}}</text>
        <text class="preset-unit">秒</text>
      </view>
    </view>
    <view class="custom-input-row">
      <text class="custom-label">自定义：</text>
      <input
        class="custom-input"
        type="number"
        placeholder="输入秒数"
        value="{{customInput}}"
        focus="{{pickerInputFocus}}"
        bindinput="onCustomInput"
        bindfocus="onPickerInputFocus"
      />
      <text class="custom-label">秒</text>
    </view>
    <ui-btn
      variant="primary"
      size="lg"
      block
      text="开始自由训练"
      bindtap="onConfirmFree"
    ></ui-btn>
    <text class="picker-cancel" bindtap="onClosePicker">取消</text>
  </ui-modal>
</view>