feat: 新增用户健康数据看板

README.md

@@ -1,42 +1,124 @@
-#项目名称
-   FitLife - 你的智能运动与健康管理伙伴
+项目名称
+​​FitLife - 智能运动健康管理生态平台​​
 
-#项目描述
-   FitLife** 是一款专注于运动与健康管理的创新型APP，旨在帮助用户实现个性化的健康目标。通过结合人工智能技术和专业的运动科学，FitLife 为用户提供全面的健康管理服务，包括个性化的运动计划、实时健身指导、健康数据分析、营养建议以及社交互动功能。
+项目定位
+基于多维度健康数据融合的个性化运动干预系统，构建「数据驱动-科学指导-持续激励」的健康管理闭环
 
-主要功能包括：
-##个性化运动计划：根据用户的健康数据、体能水平、目标（如减脂、增肌、提高耐力等）以及时间安排，FitLife 提供量身定制的运动计划。
-##实时健身指导：通过APP内的虚拟教练功能，用户可以获得实时动作指导、纠正错误姿势，并提供鼓励和建议。
-##健康数据分析：FitLife 自动记录用户的运动数据（如步数、卡路里消耗、运动时长等），并结合健康数据（如心率、睡眠质量、体重等）进行分析，提供详细的健康报告。
-##营养建议：根据用户的运动计划和健康目标，FitLife 提供个性化的饮食建议和食谱推荐，帮助用户实现营养均衡。
-##社交互动功能：用户可以加入不同的运动社区，与其他用户分享经验、挑战自我、参加线上线下活动等。
-##虚拟挑战与奖励：用户可以参与各种虚拟挑战，完成任务后获得奖励和勋章，增加运动的趣味性和动力。
+核心架构升级
+1. 技术实现框架
+graph TD  
+A[数据采集层] --> B{中央处理引擎}  
+B --> C[运动科学算法库]  
+B --> D[生物力学模型]  
+B --> E[营养代谢预测]  
+C & D & E --> F[个性化方案生成]  
+F --> G[用户交互层]  
 
 
-#项目标语
-    FitLife - 运动不止，健康随行
 
-#政策调研
-1. 数据隐私与安全：
-   - 法规遵从：遵循《中华人民共和国个人信息保护法》（PIPL）、《通用数据保护条例》（GDPR）等相关法律法规，确保用户数据的隐私和安全。
-   - 数据加密：对用户数据进行加密存储和传输，防止数据泄露。
-   - 用户授权：在收集和使用用户数据前，必须获得用户的明确授权，并告知用户数据的使用目的和范围。
 
-2. **健康与医疗合规：
-   - 医疗建议限制：确保APP提供的健康建议和营养建议不构成医疗建议，避免与医疗法规冲突。
-   - 医疗器械认证：如果APP涉及心率监测等健康监测功能，需确保设备或功能获得相关医疗器械认证。
 
-3. 运动与健身行业标准：
-   - 专业认证：与专业的运动教练和营养师合作，确保提供的运动计划和营养建议的科学性和有效性。
-   - 行业标准：遵循国际和国内的运动与健身行业标准，如美国运动医学会（ACSM）的运动指导原则。
 
-4. 消费者权益保护：
-   - 透明收费：明确APP的收费模式和收费标准，避免隐性收费和误导性宣传。
-   - 用户反馈机制：建立用户反馈机制，及时处理用户投诉和建议，提升用户满意度。
 
-5. 广告与营销合规：
-   - 广告法遵从：遵循《中华人民共和国广告法》，确保广告内容的真实性和合法性，避免虚假宣传。
-   - 用户隐私保护：在广告投放和营销活动中，严格保护用户隐私，不滥用用户数据。
+2. 数据闭环设计
+​​健康数据流处理​​：
 
-通过详细的市场和政策调研，FitLife 可以确保在合规的前提下，为用户提供优质的运动与健康管理服务。
+class DataPipeline:
+    def process(self, raw_data):
+        # 多源数据校验（置信度>95%）
+        validated = self._cross_validate(raw_data)
+        # 特征工程（HRV时域/频域特征提取）
+        features = self._feature_engineering(validated)
+        # 生成动态健康画像
+        return self._generate_profile(features)
+核心功能深度解析
+1. 个性化运动计划系统
+​​技术实现​​：
 
+classDiagram
+    class PlanGenerator{
+        +用户健康档案 health_profile
+        +运动能力评估 fitness_assessment
+        +目标匹配算法 goal_alignment()
+        +风险预警机制 injury_prevention()
+    }
+    
+    PlanGenerator --> ExerciseDatabase : 调用标准动作库
+    PlanGenerator --> NutritionAPI : 关联营养数据
+
+
+
+
+
+
+
+
+
+2. 实时健身指导引擎
+​​动作捕捉算法​​：
+
+class MotionAnalysis:
+    def detect_error(self, skeleton_data):
+        # 使用OpenPose关键点检测
+        keypoints = self._openpose_process(skeleton_data)
+        # 计算关节角度偏差
+        angles = self._calculate_joint_angles(keypoints)
+        return self._generate_correction_suggestions(angles)
+政策合规体系
+1. 数据安全强化方案
+​​三级加密架构​​：
+
+层级	技术实现	合规标准
+传输层	AES-256+TLS 1.3	PIPL Article 32
+存储层	哈希加盐+冷热数据分离	GDPR Article 32
+使用层	联邦学习差分隐私	HIPAA §164.514
+2. 医疗合规保障
+​​功能边界控制​​：
+
+flowchart LR
+A[健康建议] --> B{医学验证}
+B -->|通过| C[显示为科学建议]
+B -->|未通过| D[标注为经验指导]
+D --> E[附加免责声明]
+
+
+
+
+
+
+
+技术演进路线
+1. 版本迭代规划
+    title 核心功能开发计划
+    section 基础功能
+    数据采集模块 :a1, 2024-01, 90d
+    实时反馈系统 :a2, after a1, 60d
+    section 高级功能
+    运动损伤预测 :a3, 2024-04, 120d
+    跨平台同步 :a4, after a3, 90d
+2. 性能优化指标
+模块	响应时间	准确率	资源占用
+动作识别	<200ms	98.7%	<50MB
+数据分析	<3s	92.4%	<200MB
+方案生成	<5s	89.1%	<1GB
+用户价值重构
+1. 健康收益模型
+​​量化评估体系​​：
+
+健康指数= 
+3
+1
+​
+ (运动完成度×0.4+数据连续性×0.3+目标达成率×0.3)
+2. 激励机制升级
+​​动态成就系统​​：
+
+class AchievementSystem {
+  constructor() {
+    this.rewardCurve = new ExponentialDecay(0.85); // 基于行为经济学的衰减曲线
+  }
+  
+  calculateReward(activity) {
+    return this.rewardCurve.apply(activity.persistence);
+  }
+}

myapp/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+//import { SmartAdvicePageModule } from './tab1/smart-advice/smart-advice.module';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';

myapp/src/app/tab1/smart-advice/smart-advice.module.ts​

@@ -0,0 +1,17 @@
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SmartAdvicePage } from './smart-advice.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    ExploreContainerComponentModule
+  ],
+  declarations: [SmartAdvicePage],
+  exports: [SmartAdvicePage]
+})
+export class SmartAdvicePageModule {}

myapp/src/app/tab1/smart-advice/smart-advice.page.html​

@@ -0,0 +1,140 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      <ion-text color="primary">
+        <ion-icon name="lightbulb-outline"></ion-icon>
+        智能建议
+      </ion-text>
+    </ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="toggleTheme()">
+        <ion-icon [name]="isDark ? 'moon' : 'sun'"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" scroll-y="true">
+  <!-- 建议分类导航 -->
+  <ion-segment value="training" (ionChange)="switchTab()">
+    <ion-segment-button value="training">
+      <ion-label>训练建议</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="nutrition">
+      <ion-label>营养建议</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="recovery">
+      <ion-label>恢复建议</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- 训练建议 -->
+  <ion-card *ngIf="currentTab === 'training'">
+    <ion-card-header>
+      <ion-card-title>今日HIIT训练计划</ion-card-title>
+      <ion-card-subtitle>燃脂效率：★★★★☆</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-icon name="flame"></ion-icon>
+          </ion-avatar>
+          <ion-label>
+            <h3>高强度间歇训练</h3>
+            <p>45分钟 | 消耗约500大卡</p>
+          </ion-label>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-label>
+            <h3>训练内容</h3>
+            <p>波比跳 40秒 → 休息20秒 → 深蹲跳 40秒 → 休息20秒（重复8组）</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button (click)="startTraining()">
+          <ion-icon name="play-circle"></ion-icon>
+          <ion-label>开始训练</ion-label>
+        </ion-fab-button>
+      </ion-fab>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 营养建议 -->
+  <ion-card *ngIf="currentTab === 'nutrition'">
+    <ion-card-header>
+      <ion-card-title>今日营养搭配</ion-card-title>
+      <ion-card-subtitle>蛋白质：80g | 碳水：200g</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid fixed>
+        <ion-row>
+          <ion-col size="4">
+            <ion-card class="nutrition-card">
+              <ion-card-content>
+                <ion-text color="primary">早餐</ion-text>
+                <div class="food-item">
+                  <ion-icon name="egg-outline"></ion-icon>
+                  <span>3个水煮蛋 + 全麦面包</span>
+                </div>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+          <ion-col size="4">
+            <ion-card class="nutrition-card">
+              <ion-card-content>
+                <ion-text color="primary">午餐</ion-text>
+                <div class="food-item">
+                  <ion-icon name="leaf-outline"></ion-icon>
+                  <span>鸡胸肉沙拉 + 糙米饭</span>
+                </div>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+          <ion-col size="4">
+            <ion-card class="nutrition-card">
+              <ion-card-content>
+                <ion-text color="primary">加餐</ion-text>
+                <div class="food-item">
+                  <ion-icon name="nutrition-outline"></ion-icon>
+                  <span>希腊酸奶 + 蓝莓</span>
+                </div>
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 恢复建议 -->
+  <ion-card *ngIf="currentTab === 'recovery'">
+    <ion-card-header>
+      <ion-card-title>深度恢复方案</ion-card-title>
+      <ion-card-subtitle>疲劳指数：78%</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-icon name="massage"></ion-icon>
+          </ion-avatar>
+          <ion-label>
+            <h3>筋膜放松训练</h3>
+            <p>20分钟 | 使用泡沫轴</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-icon name="sleep-outline"></ion-icon>
+          </ion-avatar>
+          <ion-label>
+            <h3>睡眠优化建议</h3>
+            <p>保证7.5小时深度睡眠</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

myapp/src/app/tab1/smart-advice/smart-advice.page.scss​

@@ -0,0 +1,74 @@
+ion-content {
+  --background: #f8f9fa;
+
+  // 建议卡片样式
+  ion-card {
+    margin: 16px;
+    border-radius: 16px;
+    
+    ion-card-header {
+      position: relative;
+      
+      ion-card-subtitle {
+        font-size: 0.9rem;
+        color: #666;
+        margin-top: 4px;
+      }
+    }
+    
+    ion-fab-button {
+      --background: var(--ion-color-primary);
+      --box-shadow: 0 4px 8px rgba(38, 90, 129, 0.3);
+    }
+  }
+
+  // 营养卡片布局
+  .nutrition-card {
+    text-align: center;
+    
+    .food-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 8px;
+      
+      ion-icon {
+        font-size: 1.5em;
+        color: var(--ion-color-primary);
+      }
+    }
+  }
+
+  // 恢复建议样式
+  .recovery-card {
+    ion-list {
+      --padding-start: 0;
+      
+      ion-item {
+        --border-color: #eee;
+        --border-width: 1px 0 0 0;
+      }
+    }
+  }
+
+  // 暗色模式适配
+  .dark-mode {
+    --ion-color-primary: #488aff;
+    --background: #1a1a1a;
+    
+    .nutrition-card {
+      background: rgba(72, 138, 255, 0.05);
+    }
+  }
+}
+
+// 标签页切换动画
+ion-segment-button {
+  transition: all 0.3s ease;
+  
+  &.segment-activated {
+    transform: scale(1.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+  }
+}

myapp/src/app/tab1/smart-advice/smart-advice.page.ts​

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-smart-advice',
+  templateUrl: './smart-advice.page.html',
+  styleUrls: ['./smart-advice.page.scss'],
+  standalone: false,
+})
+export class SmartAdvicePage {
+  isDark = false;
+  currentTab = 'training';
+  
+  // 训练建议数据
+  trainingPlans = [
+    {
+      name: 'HIIT训练',
+      duration: '45分钟',
+      calories: '500大卡',
+      intensity: '高强度',
+      description: '波比跳 40秒 → 休息20秒 → 深蹲跳 40秒 → 休息20秒（重复8组）'
+    }
+  ];
+
+  // 营养建议数据
+  nutritionPlans = [
+    {
+      meal: '早餐',
+      items: ['3个水煮蛋', '全麦面包'],
+      protein: '25g'
+    },
+    {
+      meal: '午餐',
+      items: ['鸡胸肉沙拉', '糙米饭'],
+      protein: '40g'
+    }
+  ];
+
+  switchTab() {
+    // 切换标签页逻辑
+  }
+
+  startTraining() {
+    alert('即将开始HIIT训练');
+  }
+}

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

@@ -78,5 +78,5 @@
   </ion-card>
 
   <!-- 原有探索容器 -->
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  
 </ion-content>

myapp/src/app/tab2/tab2.page.html

@@ -1,17 +1,107 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-app>
+  <ion-header [translucent]="true">
     <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
+      <ion-title>运动</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <ion-content fullscreen class="sport-content" scroll-y="true">
+    <!-- 统计卡片 -->
+    <ion-card class="stats-card">
+      <ion-grid fixed>
+        <ion-row class="stat-row">
+          <ion-col size="4">
+            <div class="stat-item">
+              <h2>8,523</h2>
+              <p>总步数</p>
+              <ion-icon name="walk-outline"></ion-icon>
+            </div>
+          </ion-col>
+          <ion-col size="4">
+            <div class="stat-item active">
+              <h2>128</h2>
+              <p>运动时长</p>
+              <ion-icon name="timer-outline"></ion-icon>
+            </div>
+          </ion-col>
+          <ion-col size="4">
+            <div class="stat-item">
+              <h2>4,256</h2>
+              <p>消耗卡路里</p>
+              <ion-icon name="flame-outline"></ion-icon>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card>
+
+    <!-- 功能模块 -->
+    <ion-card class="feature-card">
+      <ion-list lines="none">
+        <ion-item class="card-item">
+          <ion-icon name="fitness-outline" slot="start"></ion-icon>
+          <ion-label>
+            <h3>训练计划</h3>
+            <p>今日剩余：3组</p>
+          </ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item class="card-item">
+          <ion-icon name="stopwatch-outline" slot="start"></ion-icon>
+          <ion-label>
+            <h3>运动记录</h3>
+            <p>最近7天完成率 82%</p>
+          </ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+
+        <ion-item class="card-item">
+          <ion-icon name="map-outline" slot="start"></ion-icon>
+          <ion-label>
+            <h3>运动轨迹</h3>
+            <p>累计里程 128km</p>
+          </ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+      </ion-list>
+    </ion-card>
+
+    <!-- 训练日历 -->
+    <ion-card class="calendar-card">
+      <ion-toolbar>
+        <ion-title>本周训练日历</ion-title>
+      </ion-toolbar>
+      <ion-content class="calendar-body">
+        <ion-grid class="week-grid">
+          <ion-row>
+            <ion-col size="12" class="day-header">周一</ion-col>
+            <ion-col size="12" class="day-header">周二</ion-col>
+            <ion-col size="12" class="day-header">周三</ion-col>
+            <ion-col size="12" class="day-header">周四</ion-col>
+            <ion-col size="12" class="day-header">周五</ion-col>
+            <ion-col size="12" class="day-header">周六</ion-col>
+            <ion-col size="12" class="day-header">周日</ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col size="12" class="day active">3km</ion-col>
+            <ion-col size="12" class="day">休</ion-col>
+            <ion-col size="12" class="day">5km</ion-col>
+            <ion-col size="12" class="day active">骑行</ion-col>
+            <ion-col size="12" class="day">休</ion-col>
+            <ion-col size="12" class="day">游泳</ion-col>
+            <ion-col size="12" class="day">休</ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-content>
+    </ion-card>
+
+    <!-- 底部操作 -->
+    <ion-footer class="action-footer">
+      <ion-button expand="block" class="start-btn">
+        <ion-icon name="play-circle-outline"></ion-icon>
+        开始训练
+      </ion-button>
+    </ion-footer>
+  </ion-content>
+</ion-app>

myapp/src/app/tab2/tab2.page.scss

@@ -0,0 +1,152 @@
+// 运动主题色
+:root {
+    --ion-color-primary: #ff7f50;    // 活力橙
+    --ion-color-primary-rgb: 255,127,80;
+    --ion-color-success: #4CAF50;    // 完成绿
+  }
+  
+  .sport-content {
+    --offset-bottom: auto!important;
+    background: linear-gradient(135deg, #fff3e0, #fff8e1);
+    overflow-y: auto !important;
+    height: calc(100vh - 44px); // 适配iOS状态栏高度
+    contain: strict;
+  
+    // 滚动条样式
+    &::-webkit-scrollbar {
+      width: 6px;
+      &-thumb {
+        background: rgba(0,0,0,0.1);
+        border-radius: 3px;
+      }
+    }
+  }
+  
+  // 统计卡片
+  .stats-card {
+    padding: 16px;
+    background: linear-gradient(135deg, var(--ion-color-primary), #ffc107);
+    border-radius: 20px 20px 0 0;
+    color: white;
+  
+    .stat-row {
+      gap: 16px;
+  
+      .stat-item {
+        text-align: center;
+        padding: 16px;
+        border-radius: 12px;
+        background: rgba(255,255,255,0.1);
+        transition: transform 0.3s;
+  
+        h2 {
+          font-size: 2.4rem;
+          margin: 0;
+          color: inherit;
+        }
+  
+        p {
+          font-size: 0.9rem;
+          opacity: 0.8;
+          margin: 4px 0 0;
+        }
+  
+        ion-icon {
+          font-size: 2.4rem;
+          color: inherit;
+        }
+  
+        &.active {
+          background: rgba(76,175,80,0.2);
+          transform: scale(1.05);
+        }
+      }
+    }
+  }
+  
+  // 功能卡片
+  .feature-card {
+    margin: 16px;
+    border-radius: 16px;
+    overflow: hidden;
+  
+    .card-item {
+      padding: 16px;
+      border-bottom: 1px solid rgba(0,0,0,0.05);
+  
+      h3 {
+        margin: 0;
+        font-size: 16px;
+        color: #333;
+      }
+  
+      p {
+        margin: 4px 0 0;
+        font-size: 0.9rem;
+        color: #666;
+      }
+  
+      ion-icon {
+        color: #ff9800;
+        font-size: 1.8rem;
+      }
+    }
+  }
+  
+  // 训练日历
+  .calendar-card {
+    margin: 16px;
+    border-radius: 16px;
+    overflow: hidden;
+  
+    .calendar-body {
+      padding: 16px;
+  
+      .week-grid {
+        gap: 8px;
+  
+        .day-header {
+          text-align: center;
+          padding: 8px;
+          font-size: 0.8rem;
+          color: #999;
+        }
+  
+        .day {
+          aspect-ratio: 1;
+          background: rgba(0,0,0,0.05);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 8px;
+          font-weight: bold;
+  
+          &.active {
+            background: var(--ion-color-success);
+            color: white;
+          }
+        }
+      }
+    }
+  }
+  
+  // 底部按钮
+  .action-footer {
+    padding: 16px;
+    background: var(--ion-color-primary);
+  
+    .start-btn {
+      --background: white;
+      --color: var(--ion-color-primary);
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-radius: 24px;
+      height: 56px;
+  
+      ion-icon {
+        margin-right: 8px;
+        font-size: 1.4rem;
+      }
+    }
+  }

myapp/src/app/tab3/tab3.page.html

@@ -1,17 +1,61 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-app>
+  <ion-header [translucent]="true">
     <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
+      <ion-title>我的</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+  <ion-content fullscreen class="custom-content">
+    <!-- 用户信息区 -->
+    <div class="profile-card">
+      <div class="avatar-container">
+        <img src="https://via.placeholder.com/100" alt="头像" class="avatar">
+        <h2>用户123</h2>
+        <p class="vip-tag">VIP 3</p>
+        <ion-icon name="create-outline" class="edit-icon"></ion-icon>
+      </div>
+    </div>
+
+    <!-- 功能模块 -->
+    <ion-card class="feature-card">
+      <ion-list lines="none">
+        <!-- 消息中心 -->
+        <ion-item class="card-item">
+          <ion-icon name="notifications-outline" slot="start"></ion-icon>
+          <ion-label>
+            <h3>消息中心</h3>
+            <span class="badge">2</span>
+          </ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+
+        <!-- 账户安全 -->
+        <ion-item class="card-item">
+          <ion-icon name="shield-checkmark-outline" slot="start"></ion-icon>
+          <ion-label>
+            <h3>账户安全</h3>
+            <p>已绑定手机</p>
+          </ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+
+        <!-- 主题切换 -->
+        <ion-item class="card-item">
+          <ion-icon name="moon-outline" slot="start"></ion-icon>
+          <ion-label>
+            <h3>夜间模式</h3>
+            <ion-toggle slot="end"></ion-toggle>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card>
+
+    <!-- 底部操作 -->
+    <ion-footer class="action-footer">
+      <ion-button expand="block" class="logout-btn">
+        <ion-icon name="log-out-outline"></ion-icon>
+        退出登录
+      </ion-button>
+    </ion-footer>
+  </ion-content>
+</ion-app>

myapp/src/app/tab3/tab3.page.scss

@@ -0,0 +1,104 @@
+// Ionic 核心变量覆盖
+:root {
+    --ion-color-primary: #2d8cf0;
+    --ion-color-primary-rgb: 45,140,240;
+    --ion-color-success: #1989fa;
+  }
+  
+  .custom-content {
+    --offset-bottom: auto!important;
+    --overflow: hidden;
+    background: #f8f9fc;
+  }
+  
+  // 用户信息卡片
+  .profile-card {
+    padding: 24px;
+    background: linear-gradient(135deg, var(--ion-color-primary), #66e1ff);
+    border-radius: 20px 20px 0 0;
+    color: white;
+    text-align: center;
+  
+    .avatar-container {
+      position: relative;
+      
+      .avatar {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        object-fit: cover;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+      }
+  
+      .vip-tag {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        background: linear-gradient(45deg, #ffd04b, #ff9800);
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+      }
+  
+      .edit-icon {
+        position: absolute;
+        bottom: -8px;
+        right: -8px;
+        font-size: 24px;
+        background: rgba(255,255,255,0.2);
+        border-radius: 50%;
+        padding: 8px;
+        color: white;
+      }
+    }
+  }
+  
+  // 功能卡片
+  .feature-card {
+    margin: 16px;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  
+    .card-item {
+      padding: 16px 0;
+      border-bottom: 1px solid #eee;
+  
+      h3 {
+        margin: 0;
+        font-size: 16px;
+        color: #333;
+      }
+  
+      .badge {
+        background: var(--ion-color-success);
+        color: white;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-size: 12px;
+      }
+  
+      ion-icon {
+        color: #666;
+        font-size: 18px;
+      }
+    }
+  }
+  
+  // 底部操作按钮
+  .action-footer {
+    padding: 16px;
+    background: var(--ion-color-primary);
+  
+    .logout-btn {
+      --background: white;
+      --color: var(--ion-color-primary);
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+  
+      ion-icon {
+        margin-right: 8px;
+      }
+    }
+  }

myapp/src/app/tabs/tabs.page.html

@@ -3,17 +3,17 @@
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
       <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-label>主页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-label>运动</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
       <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>