描述你的更改

src/app/edit-profile/edit-profile.page.scss

@@ -59,7 +59,11 @@ ion-header ion-toolbar {
   ion-item input[type="file"] {
     margin-top: 35px; // 增加上边距
   }
-
+  
+  ion-button {
+    margin-top: 20px;
+    pointer-events: auto;
+  }
   
 
 

src/app/edit-profile/edit-profile.page.ts

@@ -2,6 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NavController } from '@ionic/angular';
+import { UserService } from '../services/user.service';
 
 @Component({
   selector: 'app-edit-profile',
@@ -12,7 +13,7 @@ export class EditProfilePage implements OnInit {
   // 在声明时初始化 profileForm
   profileForm: FormGroup = new FormGroup({});
 
-  constructor(private fb: FormBuilder, private navCtrl: NavController) {}
+  constructor(private fb: FormBuilder, private navCtrl: NavController,private userService: UserService) {}
 
   ngOnInit() {
     this.profileForm = this.fb.group({
@@ -34,8 +35,12 @@ export class EditProfilePage implements OnInit {
 
   saveProfile() {
     if (this.profileForm.valid) {
-      // 这里可以添加保存用户资料的逻辑，例如发送到后端
-      console.log('Profile saved:', this.profileForm.value);
+      const updatedUserInfo = this.profileForm.value;
+      console.log('Profile saved:', updatedUserInfo);
+      
+      // 更新全局用户信息
+      this.userService.updateUserInfo(updatedUserInfo);
+
       this.navCtrl.pop(); // 保存成功后返回上一页
     }
   }

src/app/feedback/feedback.page.html

@@ -1,29 +1,28 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button defaultHref="/tab3"></ion-back-button>
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
     </ion-buttons>
     <ion-title>意见反馈</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <form [formGroup]="feedbackForm" (ngSubmit)="submitFeedback()">
-    <ion-list>
-      <ion-item>
-        <ion-label position="floating">您的姓名</ion-label>
-        <ion-input formControlName="name" type="text" required></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label position="floating">您的电子邮件</ion-label>
-        <ion-input formControlName="email" type="email" required></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label position="floating">您的意见</ion-label>
-        <ion-textarea formControlName="message" rows="6" required></ion-textarea>
-      </ion-item>
-    </ion-list>
-
-    <ion-button expand="block" type="submit" [disabled]="!feedbackForm.valid">提交</ion-button>
+  <form [formGroup]="feedbackForm">
+    <ion-item>
+      <ion-label position="floating">姓名</ion-label>
+      <ion-input formControlName="name"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">电子邮件</ion-label>
+      <ion-input type="email" formControlName="email"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">反馈内容</ion-label>
+      <ion-textarea formControlName="message"></ion-textarea>
+    </ion-item>
+    <ion-button expand="block" [disabled]="!feedbackForm.valid" (click)="submitFeedback()">
+      提交
+    </ion-button>
   </form>
 </ion-content>

src/app/feedback/feedback.page.scss

@@ -16,4 +16,21 @@ ion-header {
   
   ion-button {
     margin-top: 20px;
-  }
+    pointer-events: auto;
+  }
+
+  /* 确保返回按钮有明显的颜色 */
+ion-back-button {
+  --color: #ffffff; /* 使用白色或其他浅色 */
+}
+
+/* 改进标题文字的颜色 */
+ion-title {
+  color: #ffffff; /* 使用白色或其他浅色 */
+}
+
+/* 如果需要进一步调整工具栏的背景色 */
+ion-toolbar {
+  --background: var(--ion-color-primary); /* 保持或改变为合适的背景颜色 */
+  --color: #ffffff; /* 工具栏内元素（如标题）的文字颜色 */
+}

src/app/feedback/feedback.page.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AlertController, NavController } from '@ionic/angular';
+import { AlertController, NavController, LoadingController } from '@ionic/angular';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-feedback',
@@ -8,12 +10,16 @@ import { AlertController, NavController } from '@ionic/angular';
   styleUrls: ['./feedback.page.scss'],
 })
 export class FeedbackPage implements OnInit {
-  feedbackForm: FormGroup = new FormGroup({});
+  feedbackForm!: FormGroup; // 使用非空断言操作符
+
+  private apiUrl = environment.apiUrl + '/feedback'; // 假设这是您的API端点
 
   constructor(
     private formBuilder: FormBuilder,
     private alertController: AlertController,
-    private navCtrl: NavController
+    private navCtrl: NavController,
+    private loadingController: LoadingController,
+    private http: HttpClient
   ) {}
 
   ngOnInit() {
@@ -25,26 +31,47 @@ export class FeedbackPage implements OnInit {
   }
 
   async submitFeedback() {
+    const loading = await this.loadingController.create({
+      message: '正在提交...'
+    });
+    await loading.present();
+
     if (this.feedbackForm.valid) {
       const { name, email, message } = this.feedbackForm.value;
 
-      // 在这里处理反馈提交的逻辑
-      // 例如，发送到服务器或显示成功消息
+      try {
+        // 发送POST请求到服务器
+        const response = await this.http.post(this.apiUrl, {
+          name,
+          email,
+          message
+        }).toPromise();
+
+        // 显示成功消息
+        const alert = await this.alertController.create({
+          header: '提交成功',
+          message: '感谢您的反馈！我们会尽快处理。',
+          buttons: ['确定']
+        });
 
-      // 显示成功消息
-      const alert = await this.alertController.create({
-        header: '提交成功',
-        message: '感谢您的反馈！我们会尽快处理。',
-        buttons: ['确定']
-      });
+        await alert.present();
+        this.feedbackForm.reset(); // 清空表单
+        this.navCtrl.back(); // 返回上一个页面
 
-      await alert.present();
+      } catch (error) {
+        console.error('提交失败:', error);
 
-      // 清空表单
-      this.feedbackForm.reset();
+        // 显示错误消息
+        const errorAlert = await this.alertController.create({
+          header: '提交失败',
+          message: '很遗憾，我们无法提交您的反馈。请稍后再试或联系支持团队。',
+          buttons: ['确定']
+        });
 
-      // 返回上一个页面
-      this.navCtrl.back();
+        await errorAlert.present();
+      } finally {
+        loading.dismiss();
+      }
     }
   }
 }

src/app/services/user.service.ts

@@ -0,0 +1,22 @@
+// src/app/services/user.service.ts
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private userSubject = new BehaviorSubject<any>({
+    username: '金以纯',
+    userAvatar: '../../assets/images/user-avatar.png',
+    userType: '普通用户'
+  });
+
+  getUserInfo$() {
+    return this.userSubject.asObservable();
+  }
+
+  updateUserInfo(userInfo: any) {
+    this.userSubject.next(userInfo);
+  }
+}

src/app/tab1/tab1.page.html

@@ -1,4 +1,3 @@
-
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
 <ion-header>
@@ -31,27 +30,41 @@
       <ion-toolbar>
         <ion-title>登录/注册</ion-title>
         <ion-buttons slot="end">
-          <ion-button (click)="closeLoginModal()">关闭</ion-button>
+          <ion-button (click)="closeLoginModal()" fill="clear">关闭</ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      <form (ngSubmit)="onLoginFormSubmit(loginForm.value)" #loginForm="ngForm">
+      <form #loginForm="ngForm" (ngSubmit)="onLoginFormSubmit(loginForm.value)" novalidate>
         <ion-item>
           <ion-label position="floating">用户名</ion-label>
-          <ion-input type="text" name="username" [(ngModel)]="user.username" required></ion-input>
+          <ion-input type="text" [(ngModel)]="user.username" name="username" required></ion-input>
+          <ion-text *ngIf="user.username.length > 0 && user.username.length < 3" color="danger" style="position: absolute; top: 50%; right: 16px; transform: translateY(-50%); opacity: 0.7;">
+            还差 {{ 3 - user.username.length }} 位
+          </ion-text>
         </ion-item>
         <ion-item>
           <ion-label position="floating">密码</ion-label>
-          <ion-input type="password" name="password" [(ngModel)]="user.password" required></ion-input>
+          <ion-input type="password" [(ngModel)]="user.password" name="password" required></ion-input>
+          <ion-text *ngIf="user.password.length > 0 && user.password.length < 6" color="danger" style="position: absolute; top: 50%; right: 16px; transform: translateY(-50%); opacity: 0.7;">
+            还差 {{ 6 - user.password.length }} 位
+          </ion-text>
         </ion-item>
-        <ion-button expand="block" type="submit">登录</ion-button>
-        <ion-button expand="block" fill="outline" (click)="registerUser()">注册</ion-button>
+        <ion-row>
+          <ion-col>
+            <ion-button expand="block" type="submit" [disabled]="!loginForm.form.valid">登录</ion-button>
+          </ion-col>
+          <ion-col>
+            <ion-button expand="block" (click)="registerUser()">注册</ion-button>
+          </ion-col>
+        </ion-row>
       </form>
+      <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
     </ion-content>
   </ng-template>
 </ion-modal>
 
+
 <ion-content>
   <div class="health-banner">
     <div class="banner-content">
@@ -97,14 +110,14 @@
         <img src="{{ doctor.avatar }}" alt="Doctor Avatar" class="avatar" />
         <div class="name">{{ doctor.name }}</div>
         <div class="specialty">{{ doctor.specialty }}</div>
-        <ion-button expand="block"  (click)="onlineConsultNow(doctor)">在线咨询</ion-button>
+        <ion-button expand="block" (click)="onlineConsultNow(doctor)">在线咨询</ion-button>
       </div>
     </ng-container>
   </div>
-  <div class="controls">
+  <!-- <div class="controls">
     <button (click)="prevSlide()">上一张</button>
     <button (click)="nextSlide()">下一张</button>
-  </div>
+  </div> -->
 </div>
 
 

src/app/tab1/tab1.page.ts

@@ -1,9 +1,15 @@
 import { Component, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { ModalController, NavController } from '@ionic/angular';
-import { HttpClient } from '@angular/common/http';
+import { ModalController, NavController, ToastController } from '@ionic/angular';
 import { Observable } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { throwError } from 'rxjs';
+
+interface User {
+  username: string;
+  password: string;
+}
 
 @Component({
   selector: 'app-tab1',
@@ -58,19 +64,35 @@ export class Tab1Page implements AfterViewInit {
   ];
 
   currentIndex = 0;
-  startX: number = 0; // 初始化 startX
-  endX: number = 0;   // 初始化 endX
-  isDragging: boolean = false; // 标记是否正在拖动
-  currentTranslate: number = 0; // 当前的平移值
+  startX: number = 0;
+  endX: number = 0;
+  isDragging: boolean = false;
+  currentTranslate: number = 0;
   cardWidth = 216; // 每个卡片的宽度加上间距 (200 + 16)
-  isCyclic: boolean = true; // 是否启用循环滑动
+  isCyclic: boolean = true;
+  errorMessage: string = ''; // 错误消息
+  isLoginModalOpen = false;
+  user: User = { username: '', password: '' };
 
-  ngAfterViewInit() {
-    this.updateCarousel(); // 确保初始状态正确
-    this.calculateCardWidth(); // 动态计算卡片宽度
+  constructor(
+    private router: Router,
+    private modalController: ModalController,
+    private navCtrl: NavController,
+    private http: HttpClient,
+    private toastController: ToastController // 添加 ToastController 注入
+  ) {}
+
+  // 实现 AfterViewInit 接口的 ngAfterViewInit 方法
+  ngAfterViewInit(): void {
+    this.ngAfterViewInitLogic();
+  }
+
+  // 将初始化逻辑移到单独的方法中，以保持代码清晰
+  private ngAfterViewInitLogic() {
+    this.updateCarousel();
+    this.calculateCardWidth();
   }
 
-  // 计算卡片宽度
   calculateCardWidth() {
     const container = document.getElementById('carousel');
     if (container && container.children.length > 0) {
@@ -79,13 +101,11 @@ export class Tab1Page implements AfterViewInit {
     }
   }
 
-  // 更新轮播位置
   updateCarousel() {
     this.currentTranslate = -this.currentIndex * this.cardWidth;
     this.updateCarouselPosition();
   }
 
-  // 更新轮播位置
   updateCarouselPosition() {
     const container = document.getElementById('carousel');
     if (container) {
@@ -93,20 +113,17 @@ export class Tab1Page implements AfterViewInit {
     }
   }
 
-  // 触摸开始
   onTouchStart(event: TouchEvent) {
     this.startX = event.touches[0].clientX;
     this.isDragging = true;
   }
 
-  // 触摸移动
   onTouchMove(event: TouchEvent) {
     if (this.isDragging) {
       const touchX = event.touches[0].clientX;
       const deltaX = touchX - this.startX;
-      this.currentTranslate = -this.currentIndex * this.cardWidth + deltaX; // 动态更新平移值
+      this.currentTranslate = -this.currentIndex * this.cardWidth + deltaX;
 
-      // 限制 currentTranslate 的值
       const maxTranslate = -(this.doctors.length - 1) * this.cardWidth;
       this.currentTranslate = Math.max(Math.min(this.currentTranslate, 0), maxTranslate);
 
@@ -114,101 +131,64 @@ export class Tab1Page implements AfterViewInit {
     }
   }
 
-  // 触摸结束
   onTouchEnd(event: TouchEvent) {
     this.endX = event.changedTouches[0].clientX;
     this.isDragging = false;
 
-    const swipeThreshold = 50; // 滑动阈值
+    const swipeThreshold = 50;
     const deltaX = this.startX - this.endX;
 
     if (deltaX > swipeThreshold) {
-      // 向左滑动
       this.nextSlide();
     } else if (deltaX < -swipeThreshold) {
-      // 向右滑动
       this.prevSlide();
     } else {
-      // 如果滑动距离不够，则恢复到原来的位置
       this.snapToNearestCard();
     }
   }
 
-  // 上一张
   prevSlide() {
     if (this.isCyclic) {
-      if (this.currentIndex === 0) {
-        this.currentIndex = this.doctors.length - 1;
-      } else {
-        this.currentIndex--;
-      }
-    } else {
-      if (this.currentIndex > 0) {
-        this.currentIndex--;
-      }
+      this.currentIndex = (this.currentIndex - 1 + this.doctors.length) % this.doctors.length;
+    } else if (this.currentIndex > 0) {
+      this.currentIndex--;
     }
     this.updateCarousel();
   }
 
-  // 下一张
   nextSlide() {
     if (this.isCyclic) {
-      if (this.currentIndex === this.doctors.length - 1) {
-        this.currentIndex = 0;
-      } else {
-        this.currentIndex++;
-      }
-    } else {
-      if (this.currentIndex < this.doctors.length - 1) {
-        this.currentIndex++;
-      }
+      this.currentIndex = (this.currentIndex + 1) % this.doctors.length;
+    } else if (this.currentIndex < this.doctors.length - 1) {
+      this.currentIndex++;
     }
     this.updateCarousel();
   }
 
-  // 快照到最近的卡片
   snapToNearestCard() {
     const cardIndex = Math.round(-this.currentTranslate / this.cardWidth);
     this.currentIndex = Math.max(0, Math.min(cardIndex, this.doctors.length - 1));
     this.updateCarousel();
   }
-  // 在线咨询按钮点击事件
+
   onConsultNow() {
     console.log(`立即咨询`);
     this.router.navigate(['/consultation']);
   }
 
-  // 在线咨询按钮点击事件
   onlineConsultNow(doctor: any) {
     console.log(`在线咨询: ${doctor.name}`);
-    // 跳转到 ConsultationPage 并传递医生信息
     this.router.navigate(['/consultation'], { state: { doctor: doctor } });
   }
 
-  // 导航到指定路由
   navigateTo(route: string) {
     this.router.navigate([route]);
   }
 
-  // 发布求医信息
   publishHealthInfo() {
-    // 这里可以添加发布求医信息的逻辑
     console.log('发布求医信息');
   }
 
-  isLoginModalOpen = false; // 声明 isLoginModalOpen 属性
-  user = {
-    username: '',
-    password: ''
-  };
-
-  constructor(
-    private router: Router,
-    private modalController: ModalController,
-    private navCtrl: NavController,
-    private http: HttpClient // 注入 HttpClient
-  ) {}
-
   openLoginModal() {
     this.isLoginModalOpen = true;
     console.log('打开登录/注册模态框');
@@ -224,60 +204,91 @@ export class Tab1Page implements AfterViewInit {
     console.log('登录/注册模态框已关闭');
   }
 
-  onLoginFormSubmit(formValue: any) {
-    // 处理登录逻辑
+  async onLoginFormSubmit(formValue: any) {
     console.log('登录表单提交:', formValue);
 
-    // 发送登录请求
+    // 验证用户名和密码长度
+    if (formValue.username.length < 3) {
+      await this.presentToast('用户名至少需要3位字符', 'danger');
+      return;
+    }
+
+    if (formValue.password.length < 6) {
+      await this.presentToast('密码至少需要6位字符', 'danger');
+      return;
+    }
+
     this.loginUser(formValue.username, formValue.password)
       .subscribe(
-        (response) => {
+        async (response) => {
           console.log('登录成功:', response);
-          // 这里可以处理登录成功的逻辑，例如跳转到主页
+          await this.presentToast('登录成功', 'success');
           this.closeLoginModal();
         },
-        (error) => {
+        async (error) => {
           console.error('登录失败:', error);
-          // 这里可以处理登录失败的逻辑，例如显示错误消息
-          this.closeLoginModal();
+          await this.presentToast('登录失败，请检查用户名和密码', 'danger');
         }
       );
   }
 
   registerUser() {
-    // 处理注册逻辑
-    console.log('注册用户:', this.user);
+    if (!this.user.username || !this.user.password) {
+      console.error('用户名或密码为空');
+      this.presentToast('用户名和密码不能为空，请输入完整信息', 'danger');
+      return;
+    }
+
+    // 验证用户名和密码长度
+    if (this.user.username.length < 3) {
+      this.presentToast('用户名至少需要3位字符', 'danger');
+      return;
+    }
 
-    // 发送注册请求
-    this.registerNewUser(this.user.username, this.user.password)
+    if (this.user.password.length < 6) {
+      this.presentToast('密码至少需要6位字符', 'danger');
+      return;
+    }
+
+    console.log('注册用户:', JSON.stringify(this.user, null, 2));
+
+    this.registerNewUser(this.user)
       .subscribe(
-        (response) => {
+        async (response) => {
           console.log('注册成功:', response);
-          // 这里可以处理注册成功的逻辑，例如跳转到登录页面
+          await this.presentToast('注册成功', 'success');
           this.closeLoginModal();
         },
-        (error) => {
+        async (error) => {
           console.error('注册失败:', error);
-          // 这里可以处理注册失败的逻辑，例如显示错误消息
-          this.closeLoginModal();
+          if (error.error && error.error.message.includes('cannot be null')) {
+            await this.presentToast('密码不能为空，请输入密码', 'danger');
+          } else {
+            await this.presentToast('注册失败，请稍后再试', 'danger');
+          }
         }
       );
   }
 
   private loginUser(username: string, password: string): Observable<any> {
-    const loginUrl = 'YOUR_API_ENDPOINT/login'; // 替换为你的登录 API 端点
-    return this.http.post(loginUrl, { username, password })
-      .pipe(
-        map(response => response),
-        catchError(error => {
-          throw error;
-        })
-      );
+    const loginUrl = 'http://localhost:8080/api/login'; // 替换为你的登录 API 端点
+    return this.http.post(loginUrl, { username, password }, {
+      withCredentials: true,
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    }).pipe(
+      map(response => response),
+      catchError(error => {
+        console.error('登录请求出错:', error);
+        return throwError(() => new Error('登录失败'));
+      })
+    );
   }
 
-  private registerNewUser(username: string, password: string): Observable<any> {
-    const registerUrl = 'YOUR_API_ENDPOINT/register'; // 替换为你的注册 API 端点
-    return this.http.post(registerUrl, { username, password })
+  private registerNewUser(user: User): Observable<any> {
+    const registerUrl = 'http://localhost:8080/api/register'; // 替换为你的注册 API 端点
+    return this.http.post(registerUrl, user)
       .pipe(
         map(response => response),
         catchError(error => {
@@ -286,9 +297,20 @@ export class Tab1Page implements AfterViewInit {
       );
   }
 
-  // 新增方法：处理“点击了解更多”按钮点击事件
   onLearnMore() {
-    // 跳转到详情页面
     this.navCtrl.navigateForward('/details');
   }
-}
+
+  async presentToast(message: string, color: string) {
+    const toast = await this.toastController.create({
+      message: message,
+      duration: 2000,
+      color: color,
+      position: 'top',
+    });
+    toast.present();
+  }
+}
+
+
+

src/app/tab2/tab2.page.html

@@ -26,6 +26,12 @@
       </div>
     </ion-item>
   </ion-list>
+  
+  <!-- 显示连接状态 -->
+  <div *ngIf="!isSocketOpen" class="connection-status">
+    <ion-spinner name="crescent"></ion-spinner>
+    正在尝试连接...
+  </div>
 </ion-content>
 
 <ion-footer>
@@ -36,7 +42,9 @@
           <ion-input [(ngModel)]="userInput" placeholder="请输入您的问题..." (keyup.enter)="sendMessage()"></ion-input>
         </ion-col>
         <ion-col size="2" class="send-button-container">
-          <ion-button (click)="sendMessage()" expand="block" [disabled]="isLoading">发送</ion-button>
+          <ion-button (click)="sendMessage()" expand="block" [disabled]="isLoading || !userInput.trim()">
+            发送
+          </ion-button>
           <ion-spinner *ngIf="isLoading" name="crescent"></ion-spinner>
         </ion-col>
       </ion-row>

src/app/tab2/tab2.page.scss

@@ -51,7 +51,7 @@
   }
   
   .ai-message .message-text {
-    text-align: right; /* AI 消息右对齐 */
+    tetext-align: left; /* AI 消息左对齐 */
     margin-right: 10px; /* 文本和头像之间的间距 */
     color: #333; /* AI 医生消息的文字颜色 */
   }

src/app/tab2/tab2.page.ts

@@ -1,21 +1,73 @@
-// src/app/tab2/tab2.page.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface IServerMessage {
+  header?: {
+    code?: number;
+    message?: string;
+    sid?: string;
+    status?: number;
+    type?: 'heartbeat_ack' | 'normal'; // 在header中定义类型字段
+  };
+  payload?: {
+    type?: 'heartbeat_ack' | 'normal'; // 在payload中也定义类型字段
+    choices?: {
+      text?: Array<{
+        content: string;
+        role: 'user' | 'assistant';
+        index?: number;
+      }>;
+    };
+  };
+}
 
 @Component({
   selector: 'app-tab2',
   templateUrl: './tab2.page.html',
   styleUrls: ['./tab2.page.scss'],
 })
-export class Tab2Page implements OnInit {
+export class Tab2Page implements OnInit, OnDestroy {
   messages: any[] = [];
   userInput: string = '';
   isLoading: boolean = false;
+  private socket: WebSocket | null = null;
+  private messageBuffers: Map<string, { content: string[], status: number }> = new Map();
+  private activeSessions: Set<string> = new Set();
+  private heartbeatInterval: number = 30000; // 每30秒发送一次心跳
+  private heartbeatTimer: any;
+  private serverAcknowledgeTimeout: any;
 
   constructor(private http: HttpClient) {}
 
   ngOnInit() {
-    // 页面加载时自动发送一条随机的欢迎消息
+    this.sendMessageFromAI(this.getRandomWelcomeMessage());
+    this.initWebSocket();
+  }
+
+  ngOnDestroy() {
+    // 不要在这里手动关闭连接
+    // if (this.socket) {
+    //   if (this.activeSessions.size > 0) {
+    //     console.warn('There are active sessions, attempting graceful shutdown...');
+    //     setTimeout(() => {
+    //       if (this.socket) {
+    //         this.socket.close();
+    //       }
+    //     }, 5000); // 假设5秒足够让服务器处理完所有请求
+    //   } else {
+    //     console.log('No active sessions, closing WebSocket immediately.');
+    //     this.socket.close();
+    //   }
+    // }
+  }
+
+  get isSocketOpen(): boolean {
+    return Boolean(this.socket && this.socket.readyState === WebSocket.OPEN);
+  }
+
+  getRandomWelcomeMessage(): string {
     const welcomeMessages = [
       '我是您的AI医生小爱，有什么可以帮到您的吗？',
       '今天天气不错，可以出去散步哦。',
@@ -23,32 +75,266 @@ export class Tab2Page implements OnInit {
       '很高兴见到您！请告诉我您需要什么帮助。',
       '欢迎您！请问有什么健康方面的问题需要咨询吗？'
     ];
+    return welcomeMessages[Math.floor(Math.random() * welcomeMessages.length)];
+  }
+
+  async initWebSocket() {
+    try {
+      const response = await this.http.get(environment.apiUrl + '/api/v1/getWebSocketUrl', { responseType: 'text' }).toPromise();
+      const wsUrl = response as string;
+
+      if (!wsUrl || wsUrl.trim().length === 0) {
+        throw new Error('Received an empty or undefined WebSocket URL');
+      }
+
+      console.log('Fetched WebSocket URL:', wsUrl);
+
+      this.socket = new WebSocket(wsUrl);
+
+      this.socket.onopen = () => {
+        console.log('WebSocket connection opened');
+        this.startHeartbeat();
+      };
+
+      this.socket.onmessage = (event) => {
+        try {
+          const message: IServerMessage = JSON.parse(event.data);
+          console.log('Parsed message:', message);
+
+          if (message.header?.code === 0) {
+            // 检查心跳确认消息
+            if (message.header?.type === 'heartbeat_ack' || message.payload?.type === 'heartbeat_ack') {
+              this.resetHeartbeat();
+              return; // 如果是心跳确认消息，不再继续处理其他逻辑
+            }
+
+            // 继续处理正常消息...
+            if (
+              message.payload &&
+              message.payload.choices &&
+              Array.isArray(message.payload.choices.text)
+            ) {
+              const sid = message.header?.sid || ''; // 提供默认值
+              const status = message.header?.status || 0; // 提供默认值
+
+              // 初始化或获取当前对话的缓冲区
+              let buffer = this.messageBuffers.get(sid) || { content: [], status: 0 };
+              buffer.status = status;
+
+              // 累积所有非空文本内容，并去除前后空白字符
+              buffer.content.push(
+                ...message.payload.choices.text
+                  .filter(item => typeof item.content === 'string' && item.content.trim() !== '')
+                  .map(item => item.content.trim())
+              );
+
+              // 如果是最后一条消息，则合并并显示
+              if (buffer.status === 2) {
+                const combinedContent = buffer.content.join(' ');
+                const cleanedContent = combinedContent.replace(/\s+/g, ' ').trim();
+
+                this.sendMessageFromAI(cleanedContent); // 一次性发送合并后的内容
+                this.messageBuffers.delete(sid); // 清除已完成会话的缓冲区
+                this.activeSessions.delete(sid); // 从活跃会话中移除
+
+                // 检查是否还有活跃会话
+                if (this.activeSessions.size === 0) {
+                  this.isLoading = false;
+                }
+              } else {
+                // 更新缓冲区
+                this.messageBuffers.set(sid, buffer);
+              }
+            } else {
+              console.error('Invalid or unexpected message format:', message);
+              this.sendMessageFromAI('收到的消息格式无效，请检查服务器配置。');
+              this.isLoading = false;
+            }
+          } 
+        } catch (error) {
+          console.error('Error parsing message:', error);
+          this.sendMessageFromAI('抱歉，系统出现错误，请稍后再试。');
+          this.isLoading = false;
+        }
+      };
+
+      this.socket.onerror = (event) => {
+        console.error('WebSocket error observed:', event);
+        this.sendMessageFromAI('抱歉，系统出现错误，请稍后再试。');
+        this.isLoading = false;
+      };
+
+      this.socket.onclose = (event) => {
+        console.log('WebSocket connection closed:', event);
+        this.reconnectWebSocket(); // 尝试重新连接
+        this.isLoading = false;
+      };
+    } catch (error) {
+      console.error('Failed to fetch WebSocket URL:', error);
+      this.sendMessageFromAI('无法获取WebSocket连接信息，请检查网络设置。');
+    }
+  }
+
+  private startHeartbeat() {
+    this.stopHeartbeat(); // 确保只有一个心跳计时器运行
+
+    this.heartbeatTimer = setInterval(() => {
+      if (this.isSocketOpen) {
+        this.sendHeartbeat();
+      } else {
+        this.stopHeartbeat();
+      }
+    }, this.heartbeatInterval);
+
+    this.serverAcknowledgeTimeout = setTimeout(() => {
+      console.warn('No heartbeat acknowledgment received from the server.');
+      this.reconnectWebSocket(); // 尝试重新连接
+    }, this.heartbeatInterval * 2); // 设置两倍的心跳间隔作为等待服务器回应的时间
+  }
+
+  private sendHeartbeat() {
+    const heartbeatMessage = {
+      header: {
+        type: 'heartbeat'
+      },
+      payload: {}
+    };
+    console.log('Sending heartbeat...');
+    this.socket!.send(JSON.stringify(heartbeatMessage));
+  }
 
-    const randomMessage = welcomeMessages[Math.floor(Math.random() * welcomeMessages.length)];
-    this.sendMessageFromAI(randomMessage);
+  private resetHeartbeat() {
+    clearTimeout(this.serverAcknowledgeTimeout);
+    this.serverAcknowledgeTimeout = setTimeout(() => {
+      console.warn('No heartbeat acknowledgment received from the server.');
+      this.reconnectWebSocket(); // 尝试重新连接
+    }, this.heartbeatInterval * 2); // 再次设置两倍的心跳间隔作为等待服务器回应的时间
+  }
+
+  private stopHeartbeat() {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = undefined;
+    }
+    if (this.serverAcknowledgeTimeout) {
+      clearTimeout(this.serverAcknowledgeTimeout);
+      this.serverAcknowledgeTimeout = undefined;
+    }
+  }
+
+  private reconnectWebSocket() {
+    console.log('Attempting to reconnect WebSocket...');
+    this.stopHeartbeat();
+    if (this.socket) {
+      this.socket.close();
+    }
+    this.initWebSocket();
+  }
+
+  private handleIncomingMessage(event: MessageEvent<string>) {
+    try {
+      const message: IServerMessage = JSON.parse(event.data);
+      console.log('Parsed message:', message);
+
+      if (
+        message.header &&
+        message.header.code === 0 &&
+        message.payload &&
+        message.payload.choices &&
+        Array.isArray(message.payload.choices.text)
+      ) {
+        const sid = message.header.sid || ''; // 提供默认值
+        const status = message.header.status || 0; // 提供默认值
+
+        // 初始化或获取当前对话的缓冲区
+        let buffer = this.messageBuffers.get(sid) || { content: [], status: 0 };
+        buffer.status = status;
+
+        // 累积所有非空文本内容，并去除前后空白字符
+        buffer.content.push(
+          ...message.payload.choices.text
+            .filter(item => typeof item.content === 'string' && item.content.trim() !== '')
+            .map(item => item.content.trim())
+        );
+
+        // 如果是最后一条消息，则合并并显示
+        if (buffer.status === 2) {
+          // 使用单个空格作为分隔符连接文本片段，或者根据需要选择其他分隔符
+          const combinedContent = buffer.content.join(' ');
+
+          // 去除最终结果中的多余空白字符
+          const cleanedContent = combinedContent.replace(/\s+/g, ' ').trim();
+
+          this.sendMessageFromAI(cleanedContent); // 一次性发送合并后的内容
+          this.messageBuffers.delete(sid); // 清除已完成会话的缓冲区
+          this.activeSessions.delete(sid); // 从活跃会话中移除
+
+          // 检查是否还有活跃会话
+          if (this.activeSessions.size === 0) {
+            this.isLoading = false;
+          }
+        } else {
+          // 更新缓冲区
+          this.messageBuffers.set(sid, buffer);
+        }
+      } else {
+        console.error('Invalid or unexpected message format:', message);
+        this.sendMessageFromAI('收到的消息格式无效，请检查服务器配置。');
+        this.isLoading = false;
+      }
+    } catch (error) {
+      console.error('Error parsing message:', error);
+      this.sendMessageFromAI('抱歉，系统出现错误，请稍后再试。');
+      this.isLoading = false;
+    }
   }
 
   sendMessage() {
-    if (this.userInput.trim() === '') return;
+    const trimmedInput = this.userInput.trim();
+    if (!trimmedInput) {
+      alert('请输入您的问题或消息'); 
+      return;
+    }
 
-    this.messages.push({ text: this.userInput, sender: 'user' });
+    this.messages.push({ text: trimmedInput, sender: 'user' });
     this.isLoading = true;
     this.userInput = '';
 
-    // 发送请求到 AI 服务
-    this.http.post('https://your-ai-service-endpoint.com/api/chat', { message: this.userInput })
-      .subscribe((response: any) => {
-        this.messages.push({ text: response.message, sender: 'ai' });
-        this.isLoading = false;
-      }, (error) => {
-        console.error('Error:', error);
-        this.messages.push({ text: '抱歉，系统出现错误，请稍后再试。', sender: 'ai' });
-        this.isLoading = false;
-      });
+    if (this.isSocketOpen) {
+      const uid = localStorage.getItem('user_id') || uuidv4();
+      localStorage.setItem('user_id', uid);
+
+      const sendMessage = {
+        header: {
+          app_id: "c907b21b",
+          uid,
+        },
+        parameter: {
+          chat: {
+            domain: "generalv3.5",
+            temperature: 0.5,
+            max_tokens: 4096,
+          }
+        },
+        payload: {
+          message: {
+            text: [{
+              content: trimmedInput,
+              role: 'user'
+            }]
+          }
+        }
+      };
+
+      this.socket!.send(JSON.stringify(sendMessage));
+      this.activeSessions.add(uid);
+    } else {
+      this.sendMessageFromAI('WebSocket 连接已断开，请稍后再试。');
+      this.isLoading = false;
+    }
   }
 
-  // 定义 sendMessageFromAI 方法
-  sendMessageFromAI(message: string) {
-    this.messages.push({ text: message, sender: 'ai' });
+  private sendMessageFromAI(content: string) {
+    this.messages.push({ text: content, sender: 'ai' });
   }
 }

src/app/tab3/tab3.page.ts

@@ -1,23 +1,38 @@
 // src/app/tab3/tab3.page.ts
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
-
+import { UserService } from '../services/user.service';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss']
 })
-export class Tab3Page {
-  username: string = '金以纯'; // 示例用户名
-  userAvatar: string = '../../assets/images/user-avatar.png'; // 示例头像URL
-  userType: string = '普通用户'; // 示例用户类型
+export class Tab3Page{
+
+  username: string = ''; // 使用空字符串作为初始值
+  userAvatar: string = '';
+  userType: string = '';
+
+  private userInfoSubscription!: Subscription;
 
-  constructor(private navCtrl: NavController) {}
+  constructor(private navCtrl: NavController, private userService: UserService) {}
 
+  ngOnInit() {
+    this.userInfoSubscription = this.userService.getUserInfo$().subscribe(userInfo => {
+      this.username = userInfo.username || this.username; // 确保不会覆盖已有的值
+      this.userAvatar = userInfo.userAvatar || this.userAvatar;
+      this.userType = userInfo.userType || this.userType;
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.userInfoSubscription) {
+      this.userInfoSubscription.unsubscribe();
+    }
+  }
   editProfile() {
-    // 处理编辑用户资料的逻辑
     console.log('编辑用户资料');
-    // 可以导航到编辑资料页面
     this.navCtrl.navigateForward('/edit-profile');
   }
 

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  apiUrl: 'https://your-production-api-url.com', // 生产环境下的API基础URL
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: 'http://localhost:8080' // 开发环境下的API基础URL
 };
 
 /*