ZhiQiXiaoYuan/pages/dashboard/dashboard.wxml

<!--pages/dashboard/dashboard.wxml-->
<view class="dashboard-container">
  <!-- 顶部统计卡片 -->
  <view class="stats-header">
    <view class="stats-card">
      <view class="stat-value">{{stats.totalDays}}</view>
      <view class="stat-label">连续学习天数</view>
      <view class="stat-icon">🔥</view>
    </view>
    <view class="stats-card">
      <view class="stat-value">{{stats.totalHours}}</view>
      <view class="stat-label">累计学习小时</view>
      <view class="stat-icon">⏰</view>
    </view>
    <view class="stats-card">
      <view class="stat-value">{{stats.avgGPA}}</view>
      <view class="stat-label">平均绩点</view>
      <view class="stat-icon">📊</view>
    </view>
  </view>

  <!-- 学习画像雷达图 -->
  <view class="chart-section">
    <view class="section-header">
      <view class="section-title">
        <text class="title-icon">🎯</text>
        <text class="title-text">学习能力画像</text>
      </view>
      <view class="section-desc">6维度综合评估</view>
    </view>
    <view class="chart-container">
      <canvas canvas-id="radarChart" class="chart-canvas" id="radarChart"></canvas>
      <view class="chart-legend">
        <view class="legend-item" wx:for="{{radarData.indicators}}" wx:key="name">
          <view class="legend-dot" style="background: #667eea;"></view>
          <text class="legend-name">{{item.name}}</text>
          <text class="legend-value">{{radarData.values[index]}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- GPA趋势与预测 -->
  <view class="chart-section">
    <view class="section-header">
      <view class="section-title">
        <text class="title-icon">📈</text>
        <text class="title-text">GPA趋势预测</text>
      </view>
      <view class="section-desc">基于多项式回归分析</view>
    </view>
    <view class="chart-container">
      <canvas canvas-id="lineChart" class="chart-canvas" id="lineChart"></canvas>
      <view class="prediction-info">
        <view class="prediction-item">
          <text class="pred-label">预测下学期:</text>
          <text class="pred-value">{{prediction.nextSemester}}</text>
        </view>
        <view class="prediction-item">
          <text class="pred-label">趋势:</text>
          <text class="pred-value {{prediction.trend > 0 ? 'trend-up' : 'trend-down'}}">
            {{prediction.trend > 0 ? '上升' : '下降'}} {{prediction.trend}}%
          </text>
        </view>
      </view>
    </view>
  </view>

  <!-- 模块使用时长饼图 -->
  <view class="chart-section">
    <view class="section-header">
      <view class="section-title">
        <text class="title-icon">⏱️</text>
        <text class="title-text">时间分配</text>
      </view>
      <view class="section-desc">各功能使用占比</view>
    </view>
    <view class="chart-container">
      <canvas canvas-id="pieChart" class="chart-canvas pie-canvas" id="pieChart"></canvas>
      <view class="pie-legend">
        <view class="pie-legend-item" wx:for="{{pieData}}" wx:key="name">
          <view class="pie-dot" style="background: {{item.color}};"></view>
          <text class="pie-name">{{item.name}}</text>
          <text class="pie-percent">{{item.percent}}%</text>
          <text class="pie-time">{{item.time}}h</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 成绩对比柱状图 -->
  <view class="chart-section">
    <view class="section-header">
      <view class="section-title">
        <text class="title-icon">📊</text>
        <text class="title-text">成绩对比</text>
      </view>
      <view class="section-desc">个人 vs 班级平均</view>
    </view>
    <view class="chart-container">
      <canvas canvas-id="barChart" class="chart-canvas" id="barChart"></canvas>
      <view class="bar-summary">
        <view class="summary-item">
          <text class="summary-label">超过平均:</text>
          <text class="summary-value">{{barData.aboveAvg}}门课程</text>
        </view>
        <view class="summary-item">
          <text class="summary-label">排名:</text>
          <text class="summary-value">前{{barData.ranking}}%</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 数据来源说明 -->
  <view class="data-source">
    <view class="source-icon">ℹ️</view>
    <view class="source-text">
      <text class="source-title">数据说明</text>
      <text class="source-desc">以上数据基于您的学习记录自动生成，更新时间: {{updateTime}}</text>
    </view>
  </view>
</view>