app-fitlife/myapp/src/app/tab1/tab1.page.html

<ion-header [translucent]="true" class="dynamic-header">
  <ion-toolbar>
    <!-- 状态概览栏 -->
    <ion-buttons slot="start">
      <ion-avatar>
        <img [src]="userData.avatar" (click)="openProfile()">
        <ion-badge *ngIf="unreadNotifications" color="danger" class="notification-badge"></ion-badge>
      </ion-avatar>
    </ion-buttons>

    <ion-title class="greeting-title">
      <h1>{{ timeBasedGreeting }}, {{ userData.name }}!</h1>
      <ion-note>今日目标完成 {{ dailyProgress }}%</ion-note>
    </ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="openNotifications()">
        <ion-icon slot="icon-only" name="notifications"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <!-- 天气状态栏 -->
  <ion-toolbar class="weather-bar">
    <ion-segment scrollable value="recommend" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="recommend">
        <ion-icon name="flash"></ion-icon>
        <ion-label>推荐</ion-label>
      </ion-segment-button>
      <ion-segment-button value="training">
        <ion-icon name="barbell"></ion-icon>
        <ion-label>训练</ion-label>
      </ion-segment-button>
      <ion-segment-button value="nutrition">
        <ion-icon name="nutrition"></ion-icon>
        <ion-label>营养</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding-horizontal">
  <!-- 智能推荐主卡 -->
  <div class="recommendation-slider">
    <!-- <swiper-container [slidesPerView]="1.1" [spaceBetween]="16" [centeredSlides]="true">
      <swiper-slide *ngFor="let program of recommendedPrograms" [class.highlight]="program.isTodayRecommended">
        <ion-card class="program-card" (click)="startWorkout(program)">
          <div class="program-badge" *ngIf="program.isTodayRecommended">今日推荐</div>
          <img [src]="program.coverImage" alt="训练封面">
          <ion-card-header>
            <ion-card-title>{{ program.name }}</ion-card-title>
            <ion-card-subtitle>
              <ion-chip outline color="primary">
                <ion-icon name="time"></ion-icon>
                <ion-label>{{ program.duration }}分钟</ion-label>
              </ion-chip>
              <ion-chip outline color="secondary">
                <ion-icon name="flame"></ion-icon>
                <ion-label>{{ program.calories }}千卡</ion-label>
              </ion-chip>
            </ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-progress-bar
              [value]="program.completionRate"
              [color]="program.completionRate > 0.7 ? 'success' : 'warning'">
            </ion-progress-bar>
            <p>{{ program.description }}</p>
          </ion-card-content>
        </ion-card>
      </swiper-slide>
    </swiper-container> -->
  </div>

  <!-- 健康数据仪表盘 -->
  <ion-card class="dashboard-card">
    <ion-card-header>
      <ion-card-title>健康数据看板</ion-card-title>
      <ion-card-subtitle>最近7天趋势</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <!-- <app-health-metrics
        [metrics]="healthMetrics"
        (metricSelected)="onMetricSelect($event)">
      </app-health-metrics> -->
    </ion-card-content>
  </ion-card>

  <!-- 快捷功能入口 -->
  <ion-grid class="quick-actions">
    <ion-row>
      <ion-col size="6" *ngFor="let action of quickActions">
        <ion-button
          expand="block"
          fill="outline"
          shape="round"
          [color]="action.color"
          (click)="handleQuickAction(action)">
          <ion-icon [name]="action.icon" slot="start"></ion-icon>
          {{ action.label }}
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 社区动态 -->
  <ion-list lines="none" class="community-feed">
    <ion-list-header>
      <ion-label>社区动态</ion-label>
      <ion-button fill="clear" size="small">查看全部</ion-button>
    </ion-list-header>

    <ion-item-sliding *ngFor="let post of communityPosts">
      <ion-item (click)="openPostDetail(post)">
        <ion-avatar slot="start">
          <img [src]="post.user.avatar">
        </ion-avatar>
        <ion-label>
          <h3>{{ post.user.name }}</h3>
          <p>{{ post.content }}</p>
          <ion-note color="medium">
            {{ post.timestamp }} ·
            <ion-icon name="heart" color="danger"></ion-icon> {{ post.likes }}
          </ion-note>
        </ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="primary" (click)="likePost(post)">
          <ion-icon slot="icon-only" name="heart"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

<!-- 底部导航栏 -->
<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="openCoach()">
        <div class="coach-avatar">
          <img src="assets/coach.png" alt="虚拟教练">
          <ion-badge *ngIf="hasNewMessage" color="danger" class="pulse"></ion-badge>
        </div>
      </ion-button>
    </ion-buttons>

    <ion-title>今日活动: {{ todaySteps | number }}步</ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="startWorkout()" color="primary" shape="round">
        <ion-icon name="play" slot="start"></ion-icon>
        开始训练
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>