zrd-nb666/campus_health_app/frontend/campus-health-app/src/app/modules/dashboard/dashboard.component.html

<div class="dashboard-container">
  <!-- 顶部标题栏 -->
  <div class="top-header" *ngIf="false">
    <header>
      <div class="title-group">
        <h1>校园健康仪表盘</h1>
        <p>在卡片式布局中快速查看体重、睡眠、饮食、运动、健康监测与校园服务，一屏掌握所有健康信息。</p>
      </div>
      <div class="quick-actions">
        <div class="user-actions">
          <button (click)="navigateTo('user-center')">👤 个人中心</button>
          <button class="ai-chat-button" (click)="openAiChatModal()" title="AI 聊天">
            <img src="/assets/images/black-cat.png?v=2" alt="AI" class="ai-icon">
            <span class="ai-chat-pulse"></span>
          </button>
        </div>
        <button class="primary">＋ 今日记录</button>
        <button (click)="logout()">退出登录</button>
      </div>
    </header>
  </div>

  <!-- 主内容区域 -->
  <div class="main-content">
    <div class="home-shell">
      <header class="home-header">
        <div>
          <p class="home-hello">
            <span>你好，郑同学</span>
            <span>今天感觉如何？</span>
          </p>
          <p class="home-sub">下面是你今天最重要的三个数字：体重 · 运动 · 饮食</p>
          <div class="recovery-banner" *ngIf="recovery" style="margin-top:8px; padding:8px 12px; border-radius:8px; font-size:13px; display:inline-flex; align-items:center; gap:8px;"
               [style.background]="recovery.status === 'good' ? '#e8f5e9' : recovery.status === 'fatigued' ? '#ffebee' : '#fff8e1'"
               [style.color]="recovery.status === 'good' ? '#2e7d32' : recovery.status === 'fatigued' ? '#c62828' : '#f57f17'">
            <span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:currentColor"></span>
            <span *ngIf="recovery.status === 'good'">✓ 恢复良好：HRV {{ recovery.hrv }}ms（比 30 天均值高 {{ (recovery.ratio*100 - 100).toFixed(0) }}%）</span>
            <span *ngIf="recovery.status === 'ok'">恢复一般：HRV {{ recovery.hrv }}ms，30 天均值 {{ recovery.baseline }}ms</span>
            <span *ngIf="recovery.status === 'fatigued'">⚠️ 身体疲劳：HRV {{ recovery.hrv }}ms（低于 30 天均值），建议低强度训练或休息</span>
          </div>
        </div>
        <div class="home-avatar" (click)="openAiChatModal()" style="cursor: pointer; padding: 0;">
          <img src="assets/images/black-cat.png" alt="AI Chat" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
        </div>
      </header>

      <section class="home-section">
        <p class="home-section-title">关键数字一览</p>

        <div class="home-kpi-row">
          <article class="home-kpi-card" (click)="navigateTo('weight')">
            <div class="home-kpi-label">
              <div class="home-kpi-icon">⚖️</div>
              <span>今日体重</span>
            </div>
            <div class="home-kpi-main">
              <span>{{ weightData.currentWeight ?? '—' }}</span>
              <span class="home-kpi-unit" *ngIf="weightData.currentWeight !== null">kg</span>
            </div>
            <div class="home-kpi-extra">
              @if (weightData.currentWeight !== null) {
                目标 {{ weightData.targetWeight }}kg · 差 {{ weightData.targetDiff }}kg
              } @else {
                目标 {{ weightData.targetWeight }}kg · 暂无测量记录
              }
            </div>
          </article>

          <article class="home-kpi-card" (click)="navigateTo('exercise/detail')">
            <div class="home-kpi-label">
              <div class="home-kpi-icon">🏃</div>
              <span>今日运动</span>
            </div>
            <div class="home-kpi-main">
              <span>{{ healthStats.exerciseMinutes }}</span>
              <span class="home-kpi-unit">分钟</span>
            </div>
            <div class="home-kpi-extra">
              {{ healthStats.steps }} 步 · 完成目标的 {{ healthStats.stepProgress }}%
            </div>
          </article>

          <article class="home-kpi-card" (click)="navigateTo('diet')">
            <div class="home-kpi-label">
              <div class="home-kpi-icon">🥗</div>
              <span>饮食热量</span>
            </div>
            <div class="home-kpi-main">
              <span>{{ dietData.calories }}</span>
              <span class="home-kpi-unit">kcal</span>
            </div>
            <div class="home-kpi-extra">
              目标 {{ dietData.targetCalories }}kcal · 剩余 {{ dietData.remainingCalories }}kcal
            </div>
          </article>
        </div>
      </section>

      <section class="home-ring-card" (click)="navigateTo('monitoring')" style="cursor: pointer;">
        <div class="home-ring-container">
          <div class="home-ring">
            <div class="home-ring-inner">
              <div class="home-ring-main">{{ healthStats.stepProgress }}%</div>
            </div>
          </div>
          <div class="home-ring-sub">今日进度</div>
        </div>
        <div>
          <div class="home-ring-text-title">今天的整体状态不错</div>
          <div class="home-ring-text-sub">结合体重 · 运动 · 饮食三个维度计算</div>
          <p class="home-ring-desc">如果在今晚前再<strong>完成 15 分钟中等强度运动</strong>，就可以点亮本周的健康勋章。</p>
          <div class="home-chips">
            <span class="home-chip">昨晚睡眠 {{ sleepCardData.sleepHours }} 小时 {{ sleepCardData.sleepMinutes }} 分</span>
            <span class="home-chip">饮水略少 · 再喝 400ml</span>
          </div>
        </div>
      </section>

      <section class="home-stack-section">
        <article class="home-stack-card" (click)="showSleepDetails()">
          <div class="home-stack-icon purple">💤</div>
          <div>
            <div class="home-stack-text-title">昨晚睡眠</div>
            <div class="home-stack-text-sub">
              {{ sleepCardData.sleepHours }} 小时 {{ sleepCardData.sleepMinutes }} 分 · 评分 {{ sleepCardData.sleepScore }} / 100
            </div>
          </div>
          <div class="home-stack-main-number">
            {{ sleepCardData.sleepStatus }}<span>睡眠</span>
          </div>
        </article>

        <article class="home-stack-card" (click)="navigateTo('exercise/fitness-summary')">
          <div class="home-stack-icon green">🔥</div>
          <div>
            <div class="home-stack-text-title">体能训练摘要</div>
            <div class="home-stack-text-sub">上一次训练消耗约 320 千卡 · 功能性力量训练</div>
          </div>
          <div class="home-stack-main-number">
            {{ exerciseData.duration }}<span>分钟</span>
          </div>
        </article>

        <article class="home-stack-card" (click)="navigateTo('exercise/steps')">
          <div class="home-stack-icon">
            <span>👣</span>
          </div>
          <div>
            <div class="home-stack-text-title">今日步数</div>
            <div class="home-stack-text-sub">总计步数</div>
          </div>
          <div class="home-stack-main-number">
            {{ healthStats.steps }}<span>步</span>
          </div>
        </article>
      </section>

    </div>
  </div>

  <footer *ngIf="false">
    校园健康管理系统 · 卡片总览布局：适合希望在一屏内快速浏览所有健康模块的用户。
  </footer>

  <!-- 睡眠详情模态框 -->
  <div *ngIf="showSleepDetailsModal" class="modal-overlay" (click)="closeSleepDetailsModal()">
    <div class="modal-content sleep-modal" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <button class="nav-back" (click)="closeSleepDetailsModal()">❮</button>
        <h3>睡眠</h3>
        <button class="close-btn" (click)="closeSleepDetailsModal()">×</button>
      </div>
      
      <div class="modal-body">
        <!-- 视图切换 Tabs -->
        <div class="view-tabs">
          <div class="tab-segment">
            <button [class.active]="sleepViewMode === 'day'" (click)="switchSleepView('day')">日</button>
            <button [class.active]="sleepViewMode === 'week'" (click)="switchSleepView('week')">周</button>
            <button [class.active]="sleepViewMode === 'month'" (click)="switchSleepView('month')">月</button>
          </div>
        </div>

        <!-- 睡眠时间概览 -->
        <div class="sleep-summary-header">
          <div class="summary-label">昨晚睡眠（来自 Apple Watch）</div>
          <div class="summary-time">
            <span class="time-value">{{ sleepCardData.sleepHours }}</span>
            <span class="time-unit">小时</span>
            <span class="time-value">{{ sleepCardData.sleepMinutes }}</span>
            <span class="time-unit">分</span>
          </div>
          <div class="summary-date">评分 {{ sleepCardData.sleepScore }}/100 · 深睡 {{ sleepCardData.deepSleepDuration }}h</div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-section">
          <div class="day-chart-container" *ngIf="sleepViewMode === 'day'">
            <div class="day-stats-grid">
              <div class="stat-box rem">
                <div class="label">快速眼动 REM</div>
                <div class="value">{{ sleepData.remSleepDuration }} 小时</div>
              </div>
              <div class="stat-box core">
                <div class="label">核心睡眠</div>
                <div class="value">{{ sleepData.lightSleepDuration }} 小时</div>
              </div>
              <div class="stat-box deep">
                <div class="label">深度睡眠</div>
                <div class="value">{{ sleepData.deepSleepDuration }} 小时</div>
              </div>
              <div class="stat-box awake">
                <div class="label">总睡眠</div>
                <div class="value">{{ sleepData.totalSleepTime }} 小时</div>
              </div>
            </div>
          </div>

          <!-- 周/月视图：Chart.js 堆叠柱状图 -->
          <div class="bar-chart-container" *ngIf="sleepViewMode !== 'day'">
            <canvas baseChart
              [data]="sleepChartData"
              [options]="sleepChartOptions"
              [type]="sleepChartType">
            </canvas>
          </div>
        </div>
        
        <!-- 底部信息 -->
        <div class="more-info">
          <button>显示更多睡眠数据</button>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="showAiChatModal" class="modal-overlay" (click)="closeAiChatModal()">
    <div class="modal-content ai-chat-modal" (click)="$event.stopPropagation()">
      <div class="modal-body ai-chat-modal-body">
        <app-ai-chat (close)="closeAiChatModal()"></app-ai-chat>
      </div>
    </div>
  </div>
</div>