ai-sport/src/app/tab4/tab4.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-avatar class="header-avatar" (click)="showLoginAlert()">
        <ion-icon name="person" class="avatar-icon"></ion-icon>
      </ion-avatar>
    </ion-buttons>

    <div class="header-user-info" (click)="showLoginAlert()">
      <div class="username">{{ username }}</div>
      <div class="user-stats" *ngIf="isLoggedIn">
        <span>关注0</span> | <span>粉丝0</span> | <span>加油0</span>
        <div class="secondary-stats">4 0 - ￥0 - ￥0</div>
      </div>
      <div *ngIf="!isLoggedIn">点击登录</div>
    </div>

    <ion-buttons slot="end">
      <ion-badge color="danger" class="challenge-badge">新挑战 2025.04</ion-badge>
      <ion-button fill="clear" class="settings-btn" *ngIf="isLoggedIn" (click)="logout()">
        <ion-icon slot="icon-only" name="settings"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 运动数据卡片 -->
  <ion-card class="data-card" (click)="goToDataDetails()">
    <ion-card-header>
      <ion-card-title>
        <span class="warning-text">
          <ion-icon name="cloud-upload"></ion-icon>
          待上传
        </span>
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-button fill="clear" expand="block">
        本周运动 <ion-icon name="chevron-forward"></ion-icon>
      </ion-button>
    </ion-card-content>
  </ion-card>

  <!-- 体重监控模块 -->
  <ion-card class="weight-card">
    <ion-card-header>
      <ion-card-title>体重监控</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="weight-content">
        <div class="weight-value">74.0<small>公斤</small></div>
        <div class="weight-controls">
          <ion-button fill="clear" class="chart-button">
            <ion-icon name="stats-chart"></ion-icon>
          </ion-button>
          <ion-select value="12" interface="popover">
            <ion-select-option value="1">近1个月</ion-select-option>
            <ion-select-option value="3">近3个月</ion-select-option>
            <ion-select-option value="12">近12个月</ion-select-option>
          </ion-select>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 会员服务 -->
  <ion-card class="vip-card">
    <ion-card-header (click)="toggleVipPanel()">
      <ion-card-title>
        <ion-icon name="diamond"></ion-icon> Svip·会员
        <span class="vip-action">立即开通 <ion-icon [name]="vipPanelOpen ? 'chevron-down' : 'chevron-forward'"></ion-icon></span>
      </ion-card-title>
    </ion-card-header>

    <ion-card-content *ngIf="vipPanelOpen">
      <div class="vip-item">
        <ion-icon name="calendar"></ion-icon> 7天瑜伽打卡计划 <ion-icon name="chevron-forward"></ion-icon>
      </div>
      <div class="vip-promo">
        <ion-icon name="alarm"></ion-icon> 会员大促最后
        <span class="countdown">23:59:59</span>
        <ion-icon name="chevron-down"></ion-icon>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 功能网格 -->
  <ion-grid class="function-grid">
    <ion-row>
      <ion-col (click)="goToFavorites()">
        <ion-icon name="star"></ion-icon>
        <div>收藏与加油</div>
      </ion-col>
      <ion-col (click)="goToCourses()">
        <ion-icon name="videocam"></ion-icon>
        <div>我的课程</div>
      </ion-col>
      <ion-col (click)="goToActivities()">
        <ion-icon name="trophy"></ion-icon>
        <div>我的活动</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="disabled" (click)="showLockedFeature()">
        <ion-icon name="nutrition"></ion-icon>
        <div>我的饮食</div>
      </ion-col>
      <ion-col (click)="goToOrders()">
        <ion-icon name="wallet"></ion-icon>
        <div>订单与钱包</div>
      </ion-col>
      <ion-col (click)="goToRewards()">
        <ion-icon name="gift"></ion-icon>
        <div>领福利</div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 发布按钮
  <div class="fab-container">
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button color="primary">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
      <ion-fab-list side="top">
        <ion-fab-button color="light" (click)="createSportRecord()">
          <ion-icon name="barbell"></ion-icon>
          <ion-label>运动打卡</ion-label>
        </ion-fab-button>
        <ion-fab-button color="light" (click)="createDietRecord()">
          <ion-icon name="restaurant"></ion-icon>
          <ion-label>饮食记录</ion-label>
        </ion-fab-button>
        <ion-fab-button color="light" (click)="shareMoment()">
          <ion-icon name="share-social"></ion-icon>
          <ion-label>动态分享</ion-label>
        </ion-fab-button>
      </ion-fab-list>
    </ion-fab>
  </div> -->
</ion-content>