fqsz/pages/index/index.wxml

<!--index.wxml-->
<view class="container" hidden='{{clockShow}}' style="{{containerStyle}}">

  <!-- 时间滑块 -->
  <view class="time-picker-container" style="{{containerStyle}}">
    <view class="time-picker-header">
      <text class="time-picker-title" style="{{containerStyle}}">专注时长</text>
      <view class="time-value-display">
        <text class="time-number">{{time}}</text>
        <text class="time-unit">分钟</text>
      </view>
    </view>
    
    <view class="slider-container" style="{{containerStyle}}">
      <slider 
        min="1" 
        max="120" 
        step="1" 
        value="{{time}}" 
        activeColor="{{sliderStyle || '#FF6B81'}}" 
        backgroundColor="#F0F0F0"
        block-color="{{sliderStyle || '#FF6B81'}}" 
        block-size="28"
        bindchange="slideChange"
      />
      
      <view class="slider-scale" style="{{containerStyle}}">
        <view class="scale-mark" style="left: 0%">
          <view class="scale-line"></view>
          <text class="scale-label">1</text>
        </view>
        <view class="scale-mark" style="left: 12.5%">
          <view class="scale-line"></view>
          <text class="scale-label">15</text>
        </view>
        <view class="scale-mark" style="left: 25%">
          <view class="scale-line"></view>
          <text class="scale-label">30</text>
        </view>
        <view class="scale-mark" style="left: 37.5%">
          <view class="scale-line"></view>
          <text class="scale-label">45</text>
        </view>
        <view class="scale-mark" style="left: 50%">
          <view class="scale-line major" style="background-color: {{sliderStyle || '#FF6B81'}}"></view>
          <text class="scale-label major-label" style="color: {{sliderStyle || '#FF6B81'}}">60</text>
        </view>
        <view class="scale-mark" style="left: 75%">
          <view class="scale-line"></view>
          <text class="scale-label">90</text>
        </view>
        <view class="scale-mark" style="left: 100%">
          <view class="scale-line major" style="background-color: {{sliderStyle || '#FF6B81'}}"></view>
          <text class="scale-label major-label" style="color: {{sliderStyle || '#FF6B81'}}">120</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 任务选择区域 -->
  <view class='content-section' style="{{containerStyle}}">
    <view class='section-header'>
      <text class="section-title" style="{{containerStyle}}">选择一个任务</text>
      <text class="section-subtitle" style="{{containerStyle}}">在接下来的{{time}}分钟内，你将专注做这件事</text>
    </view>

    <view class='task-categories' style="{{containerStyle}}">
      <view wx:for="{{cateArr}}" class='category-item' wx:key="cate" bindtap='clickCate' data-index="{{index}}">
        <view class='category-icon {{index == cateActive && !selectedPlan ? "active":""}}'>
          <image src='../../images/{{item.icon}}.png'></image>
        </view>
        <view class='category-name'>{{item.text}}</view>
      </view>
      <view class='category-item' bindtap='showCustomTaskInput'>
        <view class='category-icon {{showCustomInput && !selectedPlan ? "active":""}}'>
          <text class="custom-icon">+</text>
        </view>
        <view class='category-name'>自定义</view>
      </view>
    </view>

    <!-- 自定义任务输入区域 -->
    <view class='custom-task-section' wx:if="{{showCustomInput}}" style="{{containerStyle}}">
      <input placeholder="请输入任务内容..." style="{{containerStyle}}" placeholder-class="placeholder" 
             value="{{customTask}}" bindinput="inputCustomTask" class="task-input"/>
      <view class="action-buttons">
        <button bindtap="savePlan" class="save-btn">{{editMode ? '更新计划' : '保存计划'}}</button>
        <button bindtap="start" class="start-btn" wx:if="{{customTask}}">直接开始</button>
      </view>
    </view>

    <!-- 当前选择的任务展示 -->
    <view class="current-task-card" wx:if="{{selectedPlan || (cateActive !== null) || (showCustomInput && customTask)}}">
      <view class="task-card-header">
        <text class="card-title">当前任务</text>
        <view class="task-time-badge" style="{{containerStyle}}">{{time}}分钟</view>
      </view>
      <view class="task-content" style="{{containerStyle}}">
        {{selectedPlan ? selectedPlan.content : (cateActive !== null ? cateArr[cateActive].text : customTask)}}
      </view>
      <view class="task-actions" wx:if="{{selectedPlan}}">
        <view class='action-btn edit-btn' bindtap='editPlan' data-index="{{plans.indexOf(selectedPlan)}}" style="{{containerStyle}}">
          <image src="../../images/edit.png" class="action-icon"></image>
          <text>编辑</text>
        </view>
        <view class='action-btn delete-btn' bindtap='deletePlan' data-index="{{plans.indexOf(selectedPlan)}}" style="{{containerStyle}}">
          <image src="../../images/delete.png" class="action-icon"></image>
          <text>删除</text>
        </view>
      </view>
      <button bindtap="start" class="start-focus-btn" style="background-color: {{theme.primaryColor}}; color: {{theme.textColor}}">开始专注</button>
    </view>
  </view>

  <!-- 计划列表 -->
  <view class='content-section' wx:if="{{plans.length > 0}}" style="{{containerStyle}}">
    <view class='section-header'>
      <text class="section-title" style="{{containerStyle}}">我的计划</text>
      <text class="plan-count">共{{plans.length}}项任务</text>
    </view>
    
    <view wx:for="{{plans}}" wx:key="id" class='plan-card {{selectedPlan && selectedPlan.id == item.id ? "active":""}}'>
      <view class='plan-content' bindtap='selectPlan' data-index="{{index}}">
        <view class="plan-text" style="{{containerStyle}}">{{item.content}}</view>
        <view class="plan-meta">
          <text class="plan-time">{{item.time}}分钟</text>
          <text class="plan-date">{{util.formatDate(item.createdAt)}}</text>
        </view>
      </view>
      <view class='plan-actions'>
        <view class='action-btn edit-btn' bindtap='editPlan' data-index="{{index}}" style="{{containerStyle}}">
          <image src="../../images/edit.png" class="action-icon"></image>
          <text>编辑</text>
        </view>
        <view class='action-btn delete-btn' bindtap='deletePlan' data-index="{{index}}" style="{{containerStyle}}">
          <image src="../../images/delete.png" class="action-icon"></image>
          <text>删除</text>
        </view>
      </view>
    </view>
  </view>

 
  <!-- 开始按钮 -->
  <button class='primary-btn' bindtap='start' wx:if="{{!selectedPlan && cateActive === null && !showCustomInput}}" style="background-color: {{theme.primaryColor}}; color: {{theme.textColor}}">
    开始专注
  </button>
  <view class='back' style="{{containerStyle}}"></view>
</view>

<!-- 专注时钟界面 -->
<view class='focus-clock' hidden='{{!clockShow}}' style='height:{{clockHeight}}rpx'>
  <view class='progress-container'>
    <canvas canvas-id='progress_bg' class='progress-bg'></canvas>
    <canvas canvas-id='progress_active' class='progress-active'></canvas>
    <view class='time-display'>{{timeStr}}</view>
    <view class='task-name'>{{currentTask}}</view>
  </view>
  <view class='control-buttons'>
    <view class='action-button finish-btn' bindtap='ok' wx:if="{{okShow}}">
      <image src="../../images/check.png" class="btn-icon"></image>
      <text>完成</text>
    </view>
    <view class='action-button pause-btn' bindtap='pause' wx:if="{{pauseShow}}">
      <image src="../../images/pause.png" class="btn-icon"></image>
      <text>暂停</text>
    </view>
    <view class='action-buttons-group' wx:if="{{continueCancleShow}}">
      <view class='action-button continue-btn' bindtap='continue'>
        <image src="../../images/play.png" class="btn-icon"></image>
        <text>继续</text>
      </view>
      <view class='action-button cancel-btn' bindtap='cancle'>
        <image src="../../images/close.png" class="btn-icon"></image>
        <text>放弃</text>
      </view>
    </view>
  </view>

</view>