update:tab3 page

soul-app/src/app/info-modal/info-modal.component.html

@@ -0,0 +1,48 @@
+<!-- 用户登录状态 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>
+      用户名：{{currentUser?.get("username")}}
+    </ion-card-title>
+   </ion-card-header>
+
+   <!--
+   <ion-card-content>
+   <ion-item>
+     <ion-input [value]="userData['realname']" (ionChange)="userDataChange('realname',$event)" label="姓名" ></ion-input>
+   </ion-item>
+   <ion-item>
+    <ion-input [value]="userData['username']" (ionChange)="userDataChange('username',$event)" label="昵称" ></ion-input>
+  </ion-item>
+   <ion-item>
+     <ion-input type="number" [value]="userData['age']" (ionChange)="userDataChange('age',$event)" label="年龄" ></ion-input>
+    </ion-item>
+  <ion-item>
+     <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" ></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像" ></ion-input>
+     </ion-item>
+  </ion-card-content>
+-->
+<ion-card-content>
+  <ion-item>
+    <ion-label>姓名: {{ userData['realname'] }}</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>昵称: {{ userData['username'] }}</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>年龄: {{ userData['age'] }}</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>性别: {{ userData['gender'] }}</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>邮箱: {{ userData['email'] }}</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-label>手机号: {{ userData['account'] }}</ion-label>
+  </ion-item>
+</ion-card-content>
+</ion-card>

soul-app/src/app/info-modal/info-modal.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { InfoModalComponent } from './info-modal.component';
+
+describe('InfoModalComponent', () => {
+  let component: InfoModalComponent;
+  let fixture: ComponentFixture<InfoModalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InfoModalComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InfoModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

soul-app/src/app/info-modal/info-modal.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonInput, IonItem } from '@ionic/angular/standalone';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-info-modal',
+  templateUrl: './info-modal.component.html',
+  styleUrls: ['./info-modal.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
+    IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    IonInput,IonItem,
+    IonSegment,IonSegmentButton,IonLabel
+  ],
+})
+export class InfoModalComponent  implements OnInit {
+
+  
+  currentUser:CloudUser|undefined
+  userData:any = {}
+  userDataChange(key:string,ev:any){
+    let value = ev?.detail?.value
+    if(value){
+      this.userData[key] = value
+    }
+  }
+  constructor(private modalCtrl: ModalController) {
+    this.currentUser = new CloudUser();
+    this.userData = this.currentUser.data;
+  }
+  ngOnInit() {}
+
+}
+export async function openInfoModal(modalCtrl:ModalController):Promise<CloudUser|null>{
+  const modal = await modalCtrl.create({
+    component: InfoModalComponent,
+    breakpoints:[0.7,1.0],
+    initialBreakpoint:0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null
+}

soul-app/src/app/tab3/tab3.page.html

@@ -43,12 +43,13 @@
     </ion-card-content>
   </ion-card>
   <!-- 功能列表 -->
+  <ion-card>
   <ion-list>
     <!-- 个人信息设置 -->
     <ion-item>
       <ion-icon name="person-outline" slot="start"></ion-icon>
       <ion-label>个人信息</ion-label>
-      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+      <ion-icon name="chevron-forward-outline" slot="end" (click)="presentInfoModal()"></ion-icon>
     </ion-item>
 
     <!-- 我的收藏 -->
@@ -79,5 +80,6 @@
       <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
     </ion-item>
   </ion-list>
+</ion-card>
 
 </ion-content>

soul-app/src/app/tab3/tab3.page.ts

@@ -6,6 +6,7 @@ import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { ModalController } from '@ionic/angular/standalone';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
+import { openInfoModal } from '../info-modal/info-modal.component';
 
 @Component({
   selector: 'app-tab3',
@@ -44,4 +45,7 @@ export class Tab3Page {
   editUser(){
     openUserEditModal(this.modalCtrl)
   }
+  presentInfoModal(){
+    openInfoModal(this.modalCtrl)
+  }
 }

soul-app/src/app/tabs/tabs.page.ts

@@ -1,7 +1,9 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonTitle,IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { home, chatbubbles, person,chevronBack, headset, } from 'ionicons/icons';
+import { home, chatbubbles, person,chevronBack, headset, personOutline, chevronForwardOutline, heartOutline, notificationsOutline,
+   settingsOutline,
+   informationCircleOutline, } from 'ionicons/icons';
 
 
 @Component({
@@ -15,7 +17,8 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ home, chatbubbles, person ,chevronBack,headset});
+    addIcons({ home, chatbubbles, person ,chevronBack,headset,personOutline,chevronForwardOutline,heartOutline,notificationsOutline,
+      settingsOutline,informationCircleOutline});
   }
 
 }

soul-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -8,21 +8,27 @@
    </ion-card-header>
  <ion-card-content>
 
-   <ion-item>
-     <ion-input [value]="userData['realname']" (ionChange)="userDataChange('realname',$event)" label="姓名" placeholder="请您输入真实姓名"></ion-input>
-   </ion-item>
-   <ion-item>
-    <ion-input [value]="userData['username']" (ionChange)="userDataChange('username',$event)" label="昵称" placeholder="请您输入用户网名"></ion-input>
-  </ion-item>
-   <ion-item>
-     <ion-input type="number" [value]="userData['age']" (ionChange)="userDataChange('age',$event)" label="年龄" placeholder="请您输入年龄"></ion-input>
+    <ion-item>
+      <ion-input [value]="userData['realname']" (ionChange)="userDataChange('realname',$event)" label="姓名" placeholder="请您输入真实姓名"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['username']" (ionChange)="userDataChange('username',$event)" label="昵称" placeholder="请您输入用户网名"></ion-input>
     </ion-item>
-  <ion-item>
-     <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" placeholder="请您输入男/女"></ion-input>
+    <ion-item>
+      <ion-input type="number" [value]="userData['age']" (ionChange)="userDataChange('age',$event)" label="年龄" placeholder="请您输入年龄"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" placeholder="请您输入男/女"></ion-input>
     </ion-item>
     <ion-item>
       <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像" placeholder="请您输入头像地址"></ion-input>
-     </ion-item>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['email']" (ionChange)="userDataChange('avatar',$event)" label="邮箱" placeholder="请您输入邮箱号"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['account']" (ionChange)="userDataChange('avatar',$event)" label="账号" placeholder="请您输入手机号"></ion-input>
+    </ion-item>
 
    <ion-button expand="block" color="danger" (click)="save()">保存</ion-button>
    <ion-button expand="block" color="danger" (click)="cancel()">取消</ion-button>

soul-app/src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -1,4 +1,4 @@
-import { Input, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonInput, IonItem, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';