pure-todo/miniprogram/pages/statistics/statistics.wxml

<!--pages/statistics/statistics.wxml-->
<view class="container">
  <!-- 顶部标题 -->
  <view class="header-section">
    <text class="header-title">数据统计</text>
    <text class="header-subtitle">了解你的任务完成情况</text>
  </view>

  <!-- 总体统计 -->
  <view class="overview-section">
    <view class="overview-card">
      <view class="overview-header">
        <text class="overview-title">总体概览</text>
      </view>
      <view class="overview-grid">
        <view class="overview-item">
          <text class="overview-number">{{stats.total}}</text>
          <text class="overview-label">总任务</text>
        </view>
        <view class="overview-item">
          <text class="overview-number">{{stats.completed}}</text>
          <text class="overview-label">已完成</text>
        </view>
        <view class="overview-item">
          <text class="overview-number">{{stats.pending}}</text>
          <text class="overview-label">待完成</text>
        </view>
        <view class="overview-item">
          <text class="overview-number">{{stats.completionRate}}%</text>
          <text class="overview-label">完成率</text>
        </view>
      </view>
      <view class="progress-container">
        <t-progress 
          percentage="{{stats.completionRate}}" 
          color="#0052d9"
          stroke-width="4"
        />
      </view>
    </view>
  </view>

  <!-- 周数据统计 -->
  <view class="weekly-section">
    <view class="section-header">
      <text class="section-title">本周数据</text>
    </view>
    <view class="weekly-card">
      <view class="weekly-chart">
        <view wx:for="{{weeklyData}}" wx:key="date" class="chart-bar">
          <view class="bar-container">
            <view class="bar created" style="height: {{item.created * 8}}px;"></view>
            <view class="bar completed" style="height: {{item.completed * 8}}px;"></view>
          </view>
          <text class="chart-label">{{item.date}}</text>
          <text class="chart-value">{{item.created}}/{{item.completed}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 优先级统计 -->
  <view class="priority-section">
    <view class="section-header">
      <text class="section-title">优先级统计</text>
    </view>
    <view class="priority-list">
      <view wx:for="{{priorityData}}" wx:key="name" class="priority-item">
        <view class="priority-info">
          <view class="priority-header">
            <text class="priority-name">{{item.name}}</text>
            <text class="priority-rate">{{formatPercentage(item.rate)}}</text>
          </view>
          <view class="priority-stats">
            <text class="priority-count">已完成: {{item.completed}} / {{item.total}}</text>
          </view>
          <view class="progress-container">
            <t-progress 
              percentage="{{item.rate}}" 
              color="{{item.color}}"
              stroke-width="3"
            />
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 分类统计 -->
  <view class="category-section">
    <view class="section-header">
      <text class="section-title">分类统计</text>
    </view>
    <view class="category-list">
      <view wx:for="{{categoryData}}" wx:key="name" class="category-item">
        <view class="category-info">
          <text class="category-name">{{item.name}}</text>
          <text class="category-count">{{item.total}} 个任务</text>
        </view>
        <view class="category-stats">
          <text class="category-completed">已完成: {{item.completed}}</text>
          <text class="category-rate">{{formatPercentage(item.rate)}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 最近活动 -->
  <view class="activity-section">
    <view class="section-header">
      <text class="section-title">最近活动</text>
    </view>
    <view class="activity-list">
      <view wx:for="{{recentActivity}}" wx:key="id" class="activity-item">
        <view class="activity-content">
          <view class="activity-info">
            <text class="activity-text {{item.completed ? 'completed' : ''}}">{{item.text}}</text>
            <text class="activity-time">{{item.timeAgo}}</text>
          </view>
          <view class="activity-status">
            <t-tag 
              theme="{{item.priority === 'high' ? 'danger' : item.priority === 'medium' ? 'warning' : 'primary'}}"
              size="small"
            >
              {{item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}}
            </t-tag>
            <t-tag 
              theme="{{item.completed ? 'success' : 'default'}}"
              size="small"
            >
              {{getCompletionText(item.completed)}}
            </t-tag>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 数据管理 -->
  <view class="data-section">
    <view class="section-header">
      <text class="section-title">数据管理</text>
    </view>
    <view class="data-actions">
      <t-button 
        theme="primary" 
        size="large" 
        block 
        bind:tap="exportData"
        class="action-btn"
      >
        <t-icon name="download" slot="icon" />
        导出数据
      </t-button>
      <t-button 
        theme="danger" 
        size="large" 
        block 
        bind:tap="clearData"
        class="action-btn"
      >
        <t-icon name="delete" slot="icon" />
        清空数据
      </t-button>
    </view>
  </view>

  <!-- 自定义标签栏 -->
  <t-tab-bar value="{{activeTab}}" bind:change="onTabChange" t-class="custom-tab-bar">
    <t-tab-bar-item value="home" icon="home" aria-label="首页">首页</t-tab-bar-item>
    <t-tab-bar-item value="list" icon="bulletpoint" aria-label="任务">任务</t-tab-bar-item>
    <t-tab-bar-item value="statistics" icon="chart" aria-label="统计">统计</t-tab-bar-item>
    <t-tab-bar-item value="settings" icon="setting" aria-label="设置">设置</t-tab-bar-item>
  </t-tab-bar>
</view>