ai模块

myapp/src/app/app-routing.module.ts

@@ -5,7 +5,9 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  }
+  },
+ 
+  
 ];
 @NgModule({
   imports: [

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

@@ -8,7 +8,7 @@
     </ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="toggleTheme()">
-        <ion-icon [name]="isDark ? 'moon' : 'sun'"></ion-icon>
+        <ion-icon [name]="isDark ? 'moon' : 'sunny'"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -36,6 +36,46 @@
     </ion-grid>
   </ion-card>
 
+  <!-- AI训练计划生成器 -->
+  <ion-card class="plan-generator">
+    <ion-card-header>
+      <ion-card-title>AI训练计划</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-item>
+        <ion-textarea 
+          [(ngModel)]="userGoal" 
+          placeholder="输入您的训练目标，如：增肌10kg、减脂5kg等" 
+          rows="3"
+          autoGrow
+        ></ion-textarea>
+      </ion-item>
+      
+      <ion-button 
+        expand="block" 
+        (click)="generatePlan()" 
+        [disabled]="isLoading"
+        class="generate-button"
+      >
+        <ion-spinner *ngIf="isLoading" name="crescent"></ion-spinner>
+        <span *ngIf="!isLoading">生成计划</span>
+      </ion-button>
+      
+      <ion-button 
+        expand="block" 
+        fill="outline" 
+        (click)="goToTrainingPlan()"
+        class="mt-2"
+      >
+        查看详细训练计划
+      </ion-button>
+      
+      <div *ngIf="aiPlan" class="ai-plan-content">
+        <pre>{{ aiPlan }}</pre>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
   <!-- 智能推荐引擎 -->
   <ion-card class="recommendation-card">
     <ion-card-header>
@@ -76,7 +116,4 @@
       </ion-item>
     </ion-list>
   </ion-card>
-
-  <!-- 原有探索容器 -->
-  
 </ion-content>

myapp/src/app/tab1/tab1.page.scss

@@ -1,75 +1,149 @@
 ion-content {
-    --background: #f8f9fa;
-  
-    // 动态仪表盘样式
-    .dashboard-card {
-      margin: 16px;
-      border-radius: 16px;
+  --background: #f8f9fa;
+
+  // 动态仪表盘样式
+  .dashboard-card {
+    margin: 16px;
+    border-radius: 16px;
+    
+    .stats-grid {
+      padding: 16px;
       
-      .stats-grid {
-        padding: 16px;
+      .stat-card {
+        --background: rgba(38, 90, 129, 0.05);
+        text-align: center;
+        height: 100%;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         
-        .stat-card {
-          --background: rgba(38, 90, 129, 0.05);
-          text-align: center;
-          
-          .stat-value {
-            font-size: 2.5rem;
-            font-weight: bold;
-            color: var(--ion-color-primary);
-          }
-          
-          .stat-label {
-            color: #666;
-            font-size: 0.9rem;
-          }
+        .stat-value {
+          font-size: 2.5rem;
+          font-weight: bold;
+          color: var(--ion-color-primary);
+          margin-bottom: 8px;
+        }
+        
+        .stat-label {
+          color: #666;
+          font-size: 0.9rem;
         }
       }
     }
-  
-    // 智能推荐卡片
-    .recommendation-card {
-      margin: 16px;
+  }
+
+  // AI训练计划生成器
+  .plan-generator {
+    margin: 16px;
+    border-radius: 12px;
+    
+    ion-textarea {
+      --background: #f0f0f0;
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+    
+    .generate-button {
+      margin-top: 16px;
+      --background: var(--ion-color-primary);
+      --box-shadow: 0 4px 8px rgba(38, 90, 129, 0.2);
+    }
+    
+    .ai-plan-content {
+      margin-top: 16px;
+      padding: 12px;
+      background: rgba(38, 90, 129, 0.05);
+      border-radius: 8px;
+      border-left: 4px solid var(--ion-color-primary);
       
-      ion-fab-button {
-        --background: var(--ion-color-primary);
-        --box-shadow: 0 4px 8px rgba(38, 90, 129, 0.3);
+      pre {
+        white-space: pre-wrap;
+        font-family: inherit;
+        margin: 0;
+        line-height: 1.5;
       }
     }
-  
-    // 社交动态墙
-    .social-wall {
-      margin: 16px;
+  }
+
+  // 智能推荐卡片
+  .recommendation-card {
+    margin: 16px;
+    border-radius: 12px;
+    
+    ion-fab-button {
+      --background: var(--ion-color-primary);
+      --box-shadow: 0 4px 8px rgba(38, 90, 129, 0.3);
+    }
+  }
+
+  // 社交动态墙
+  .social-wall {
+    margin: 16px;
+    border-radius: 12px;
+    
+    ion-item {
+      --padding-start: 0;
+      --inner-padding-end: 0;
+      --border-color: rgba(0, 0, 0, 0.05);
       
-      .engagement-counts {
-        display: flex;
-        justify-content: flex-end;
-        gap: 16px;
-        margin-top: 8px;
-        
-        ion-icon {
-          font-size: 1.2em;
-          margin-right: 4px;
-        }
+      ion-avatar {
+        width: 48px;
+        height: 48px;
+        margin: 8px 16px 8px 0;
       }
     }
-  
-    // 暗色模式适配
-    .dark-mode {
-      --ion-color-primary: #488aff;
-      --background: #1a1a1a;
+    
+    .engagement-counts {
+      display: flex;
+      justify-content: flex-end;
+      gap: 16px;
+      margin-top: 8px;
+      color: #666;
       
-      .stat-value {
-        color: #8ab4f8;
+      ion-icon {
+        font-size: 1.2em;
+        margin-right: 4px;
+        color: var(--ion-color-medium);
       }
     }
   }
-  
-  // 微交互动画
-  .stat-card.interactive {
-    transition: transform 0.2s ease;
+
+  // 暗色模式适配
+  &.dark {
+    --background: #1a1a1a;
     
-    &:hover {
-      transform: translateY(-4px);
+    .stat-card {
+      --background: rgba(138, 180, 248, 0.1);
+      
+      .stat-label {
+        color: #aaa;
+      }
+    }
+    
+    .ai-plan-content {
+      background: rgba(138, 180, 248, 0.1);
+      border-left-color: var(--ion-color-primary);
     }
-  }
+    
+    ion-card {
+      --background: #2d2d2d;
+    }
+    
+    .engagement-counts {
+      color: #aaa;
+    }
+  }
+  
+  // 工具类
+  .mt-2 {
+    margin-top: 8px;
+  }
+}
+
+// 微交互动画
+.stat-card.interactive {
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: translateY(2px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}

myapp/src/app/tab1/tab1.page.ts

@@ -1,4 +1,53 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular/standalone';
+
+interface StatItem {
+  value: string;
+  label: string;
+}
+
+interface SocialPost {
+  user: {
+    avatar: string;
+    nickname: string;
+  };
+  content: string;
+  likes: number;
+  comments: number;
+}
+
+// 模拟AI服务
+class MockAIService {
+  async generatePlan(goal: string): Promise<string> {
+    // 模拟API调用延迟
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    // 返回模拟的训练计划(Markdown格式)
+    return `
+# ${goal} 训练计划
+
+## 第一周: 基础适应期
+- **周一**: 全身基础训练 (45分钟)
+  - 深蹲 3×12
+  - 俯卧撑 3×10
+  - 平板支撑 3×30秒
+- **周三**: 有氧运动 (30分钟)
+  - 慢跑或快走
+- **周五**: 核心训练 (30分钟)
+
+## 第二周: 强度提升期
+- 增加训练强度和时长
+- 加入HIIT训练
+
+## 饮食建议
+- 蛋白质摄入: 每公斤体重1.5-2g
+- 多喝水，保持水分
+- 多吃蔬菜水果
+
+> 注意: 根据自身情况调整训练强度
+`;
+  }
+}
 
 @Component({
   selector: 'app-tab1',
@@ -6,19 +55,25 @@ import { Component } from '@angular/core';
   styleUrls: ['tab1.page.scss'],
   standalone: false,
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
   isDark = false;
   currentTime = this.formatTime(new Date());
-  dynamicStats = [
+  isLoading = false;
+  userGoal = '';
+  aiPlan = '';
+  
+  dynamicStats: StatItem[] = [
     { value: '12h', label: '活跃时长' },
     { value: '7.5h', label: '深睡时长' },
     { value: '12.5km', label: '周跑量' }
   ];
+  
   smartRecommendation = '根据您的运动习惯，推荐进行HIIT训练';
-  socialFeed = [
+  
+  socialFeed: SocialPost[] = [
     { 
       user: { 
-        avatar: 'assets/avatars/avatar1.png', 
+        avatar: 'assets/icon/p1.png', 
         nickname: '健身达人' 
       }, 
       content: '完成今日挑战！#FitLife', 
@@ -27,7 +82,7 @@ export class Tab1Page {
     },
     { 
       user: { 
-        avatar: 'assets/avatars/avatar2.png', 
+        avatar: 'assets/icon/p2.png', 
         nickname: '运动小白' 
       }, 
       content: '第一次完成5公里！', 
@@ -36,12 +91,21 @@ export class Tab1Page {
     }
   ];
 
-  constructor() {
+  private aiService = new MockAIService();
+
+  constructor(private navCtrl: NavController) {
     setInterval(() => {
       this.currentTime = this.formatTime(new Date());
     }, 1000);
   }
 
+  ngOnInit() {
+    // 检查本地存储的主题偏好
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    this.isDark = prefersDark.matches;
+    document.body.classList.toggle('dark', this.isDark);
+  }
+
   private formatTime(date: Date): string {
     return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
   }
@@ -54,4 +118,27 @@ export class Tab1Page {
   startSmartPlan() {
     alert(`开始${this.smartRecommendation}`);
   }
+
+  async generatePlan() {
+    if (!this.userGoal.trim()) {
+      alert('请输入您的训练目标');
+      return;
+    }
+
+    this.isLoading = true;
+    this.aiPlan = '正在生成训练计划...';
+
+    try {
+      this.aiPlan = await this.aiService.generatePlan(this.userGoal);
+    } catch (err: any) {
+      this.aiPlan = "生成计划时出错，请稍后再试";
+      console.error(err);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  goToTrainingPlan() {
+    this.navCtrl.navigateForward('/tabs/demo/training');
+  }
 }

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

@@ -1,4 +1,4 @@
-<ion-app>
+<ion-app [class.dark-theme]="isDarkMode">
   <ion-header [translucent]="true">
     <ion-toolbar>
       <ion-title>我的</ion-title>
@@ -10,8 +10,12 @@
     <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>
+        @if (isLoggedIn) {
+          <h2>用户123</h2>
+          <p class="vip-tag">VIP 3</p>
+        } @else {
+          <h2>请先登录</h2>
+        }
         <ion-icon name="create-outline" class="edit-icon"></ion-icon>
       </div>
     </div>
@@ -44,7 +48,11 @@
           <ion-icon name="moon-outline" slot="start"></ion-icon>
           <ion-label>
             <h3>夜间模式</h3>
-            <ion-toggle slot="end"></ion-toggle>
+            <ion-toggle 
+              slot="end"
+              [checked]="isDarkMode"
+              (ionChange)="toggleTheme()">
+            </ion-toggle>
           </ion-label>
         </ion-item>
       </ion-list>
@@ -52,10 +60,17 @@
 
     <!-- 底部操作 -->
     <ion-footer class="action-footer">
-      <ion-button expand="block" class="logout-btn">
-        <ion-icon name="log-out-outline"></ion-icon>
-        退出登录
-      </ion-button>
+      @if (isLoggedIn) {
+        <ion-button expand="block" class="logout-btn" (click)="logout()">
+          <ion-icon name="log-out-outline"></ion-icon>
+          退出登录
+        </ion-button>
+      } @else {
+        <ion-button expand="block" class="login-btn" (click)="login()">
+          <ion-icon name="log-in-outline"></ion-icon>
+          登录
+        </ion-button>
+      }
     </ion-footer>
   </ion-content>
 </ion-app>

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

@@ -1,104 +1,148 @@
-// Ionic 核心变量覆盖
+/* 添加在 tab3.page.scss 文件底部 */
+
+/* 日间模式样式（默认） */
 :root {
-    --ion-color-primary: #2d8cf0;
-    --ion-color-primary-rgb: 45,140,240;
-    --ion-color-success: #1989fa;
+  --background-color: #f8f9fc;
+  --card-bg: #ffffff;
+  --text-color: #333333;
+  --primary-color: #2d8cf0;
+}
+
+/* 夜间模式样式 */
+.dark-theme {
+  --background-color: #121212;
+  --card-bg: #1e1e1e;
+  --text-color: #ffffff;
+  --primary-color: #4a8cff;
+
+  ion-title {
+    color: var(--text-color);
   }
-  
-  .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;
-      }
+    background: linear-gradient(135deg, #1a3a7a, #0a2144);
+  }
+
+  .action-footer {
+    background: var(--card-bg);
+  }
+}
+
+/* 应用主题变量 */
+.custom-content {
+  --offset-bottom: auto !important;
+  --overflow: hidden;
+  background: var(--background-color);
+}
+
+.feature-card {
+  background: var(--card-bg);
   
-      .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;
-      }
+  .card-item {
+    h3 {
+      color: var(--text-color);
     }
   }
-  
-  // 功能卡片
-  .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;
-      }
+}
+
+/* 登录按钮样式 */
+.login-btn {
+  --background: var(--primary-color);
+  --color: white;
+}
+
+/* 登出按钮样式 */
+.logout-btn {
+  --background: #ff3b30;
+  --color: white;
+}
+
+/* 其他原有样式保持不变 */
+.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;
     }
   }
-  
-  // 底部操作按钮
-  .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;
-      }
+}
+
+.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, .login-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/tab3/tab3.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
@@ -7,7 +8,51 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 export class Tab3Page {
+  isLoggedIn: boolean = false;
+  isDarkMode: boolean = false;
 
-  constructor() {}
+  constructor(private alertController: AlertController) {}
 
-}
+  // 登录函数
+  async login() {
+    const alert = await this.alertController.create({
+      header: '登录',
+      inputs: [
+        { name: 'username', type: 'text', placeholder: '账号' },
+        { name: 'password', type: 'password', placeholder: '密码' }
+      ],
+      buttons: [
+        { text: '取消', role: 'cancel' },
+        { 
+          text: '登录', 
+          handler: () => {
+            this.isLoggedIn = true;
+            return false; // 防止弹窗自动关闭
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  // 登出函数
+  logout() {
+    this.isLoggedIn = false;
+  }
+
+  // 切换主题
+  toggleTheme() {
+    this.isDarkMode = !this.isDarkMode;
+    // 保存主题偏好到本地存储
+    localStorage.setItem('theme', this.isDarkMode ? 'dark' : 'light');
+  }
+
+  // 初始化主题（如果之前有设置过）
+  ngOnInit() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+      this.isDarkMode = true;
+    }
+  }
+}