完成tab2设计，重构登录功能

E-Cover-app/src/app/app.routes.ts

@@ -36,4 +36,9 @@ export const routes: Routes = [
     loadComponent:()=>
       import('./send-post/send-post.component').then((m)=>m.SendPostComponent),
   },
+  {
+    path:'postDetail',
+    loadComponent:()=>
+      import('../lib/component/post-detail/post-detail.component').then((m)=>m.PostDetailComponent),
+  },
 ];

E-Cover-app/src/app/generate-option/generate-option.component.html

@@ -1,5 +1,5 @@
 <!--头部内容，包含标题和返回按钮-->
-<app-custom-header [param]="['个性化生成','text','    ',]"></app-custom-header>
+<app-custom-header [param]="['个性化生成','    ',]"></app-custom-header>
 <!--正文部分-->
 <ion-content>
   <!--性别选择，包含两个卡片-->

E-Cover-app/src/app/tab1/tab1.page.html

@@ -51,7 +51,7 @@
     </ion-card>
     <!--人气推荐段设置-->
     <div style="display: flex;justify-content: space-between;width: 90%;margin:0 5%;">
-        <ion-segment [swipe-gesture]="false">
+        <ion-segment>
             <ion-segment-button value="first" content-id="first">
                 <ion-label>人气热度</ion-label>
             </ion-segment-button>
@@ -69,7 +69,7 @@
     <ion-segment-view>
         <ion-segment-content id="first">
             <div class="segment-content">
-                First1231231231321231231231312312112312313123132123132132132
+                <img *ngFor="let item of items" [src]="item?.get('image')" />
             </div>
         </ion-segment-content>
         <ion-segment-content id="second">Second</ion-segment-content>

E-Cover-app/src/app/tab1/tab1.page.scss

@@ -121,13 +121,24 @@ ion-segment {
     --box-shadow: none;
 }
 
-#first{
-    width: 200vw;
+#first {
+    width: 100vw;
 }
-.segment-content{
-    width: 200vw;
+
+.segment-content {
+    width: 95vw;
     margin-left: 5%;
     height: 200px;
-    --background:gray;
     overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+    display: flex;
+    align-items: center;
+
+    img{
+        display: inline-block;
+        height: 90%;
+        border-radius: 20px !important;
+        margin-right: 10px;
+    }
 }

E-Cover-app/src/app/tab1/tab1.page.ts

@@ -7,24 +7,39 @@ import { register } from 'swiper/element/bundle';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { CommonModule } from '@angular/common';
 import { IonButton, IonCard, IonContent, IonImg, IonLabel, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonText } from '@ionic/angular/standalone';
-addIcons({ caretDownOutline,chevronForwardOutline});
+addIcons({ caretDownOutline, chevronForwardOutline });
 register();
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [ExploreContainerComponent, CommonModule,IonButton,IonImg,IonContent,IonCard,
-    IonSegment,IonSegmentButton,IonSegmentContent,IonLabel,IonSegmentView,IonText,IonSearchbar
+  imports: [ExploreContainerComponent, CommonModule, IonButton, IonImg, IonContent, IonCard,
+    IonSegment, IonSegmentButton, IonSegmentContent, IonLabel, IonSegmentView, IonText, IonSearchbar
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 
 export class Tab1Page {
   constructor(private router: Router) { }
-  ngOnInit() {}
+  ngOnInit() { }
+  ionViewWillEnter() { 
+    this.getHotItem();
+  }
   //转到GenerateOption页面
   goGenerateOption() {
     this.router.navigate(['generateOption']);
   }
+  /**
+   * @读取热门item
+   */
+  items: CloudObject[] | any = [];
+  async getHotItem() {
+    let query = new CloudQuery("ItemInfo");
+    this.items = await query.find();
+    this.items.sort((a: { get: (arg0: string) => number; }, b: { get: (arg0: string) => number; }) => b.get('click') - a.get('click'));
+    this.items = this.items.slice(0, 7);
+    console.log("获取热门item的top7成功：")
+    console.log(this.items);
+  }
 }

E-Cover-app/src/app/tab2/tab2.page.html

@@ -54,14 +54,6 @@
                         </ion-card>
                         <ion-card id="rolling-3">你卡上，到那时打开拉萨的那棵树的那是肯定</ion-card>
                   </div>
-                  <!-- <ion-button (click)="shuaxin()">刷新</ion-button>
-                  <div *ngFor="let post of posts; else noPosts">
-                        发帖用户：{{ post?.get('UserID')?.name }}<br />
-                        发帖标题：{{ post?.get('UserID')?.avatar }}<br />
-                        发帖内容：{{ post?.get('content') }}<br />
-                        发帖图片：{{ post?.get('image') }}<br />
-                        发帖标签：{{ post?.get('tag') }}<br />
-                  </div> -->
                   <app-post-list></app-post-list>
             </ion-segment-content>
       </ion-segment-view>

E-Cover-app/src/app/tab2/tab2.page.ts

@@ -16,7 +16,7 @@ addIcons({ addOutline, chevronForwardCircle })
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonButton,
     IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonIcon, IonText, IonLabel,
-    IonCard, IonImg, CommonModule,PostListComponent
+    IonCard, IonImg, CommonModule, PostListComponent
   ]
 })
 export class Tab2Page {
@@ -30,19 +30,12 @@ export class Tab2Page {
   tags: Array<CloudObject> = [];
   async getTop3Tag() {
     let query = new CloudQuery("tag");
-    try {
-      //query.orderByDescending("click");
-      //query.setLimit(3);
-      let tags = await query.find();
-      this.tags = tags;
-      // tags.sort((a, b) => b.get('click') - a.get('click'));
-      // this.tags = this.tags.slice(0, 3);
-      console.log("查询top3话题结果如下：")
-      console.log(this.tags);
-    } catch (error) {
-      console.error("查询失败:", error);
-      this.tags = []; // 确保即使查询失败，posts 也被初始化为一个空数组
-    }
+    let tags = await query.find();
+    this.tags = tags;
+    tags.sort((a, b) => b.get('click') - a.get('click'));
+    this.tags = this.tags.slice(0, 3);
+    console.log("查询top3话题结果如下：")
+    console.log(this.tags);
   }
   // 格式化数字的方法
   formatNumber(num: number): string {
@@ -74,7 +67,5 @@ export class Tab2Page {
       console.error("查询失败:", error);
       this.posts = []; // 确保即使查询失败，posts 也被初始化为一个空数组
     }
-
-    this.getTop3Tag();
   }
 }

E-Cover-app/src/app/tab3/tab3.page.scss

@@ -179,11 +179,13 @@ ion-content {
     }
 
     p {
-        display: inline-block;
+        display: block;
         margin: 0;
         width: 100%;
         color: gray;
         font-size: 15px;
         text-align: center;
+        break-inside: avoid; // 确保p标签不会被分割到两列中
+        column-span: all; // 让p标签跨越所有列
     }
 }

E-Cover-app/src/app/tab3/tab3.page.ts

@@ -13,29 +13,18 @@ addIcons({ personAddOutline, cardOutline, flameOutline, chevronForwardOutline })
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonicModule,CommonModule],
+  imports: [IonicModule, CommonModule],
 })
 export class Tab3Page {
   currentUser: CloudUser | undefined;
-  constructor(private modalCtrl: ModalController, private router: Router) {}
-  // 格式化数字的方法
-  formatNumber(num: number): string {
-    if (num >= 10000) {
-      return (num / 10000).toFixed(1) + 'w';
-    } else if (num >= 1000) {
-      return (num / 1000).toFixed(1) + 'k';
-    } else {
-      return num + '';
-    }
-  }
+  constructor(private modalCtrl: ModalController, private router: Router) { }
   async ionViewWillEnter() {
-    console.log("验证用户是否登录");
+    console.warn("-------------------------\n" + "进入tab3界面，执行ionViewWillEnter\n" + "验证用户是否登录")
     let user: any = new CloudUser();
-    user.current();
     if (user?.id == null) {
-      console.log("用户未登录,跳转到登录页面")
+      console.error("用户未登录,即将跳转到登录页面")
       user = await openUserLoginModal(this.modalCtrl);
-      console.log("登录用户信息:");
+      console.log("接受到来自login模态的登录用户信息:");
       console.log(user);
     }
     else {
@@ -46,18 +35,25 @@ export class Tab3Page {
       console.log("当前用户信息:");
       console.log(user);
     }
-    console.log("进入到我的界面，准备更新数据");
+    console.log("进入到我的界面，准备实例化currentUser对象");
     this.currentUser = new CloudUser();
     this.getPosts();
   }
-
-  async signup() {
-    //弹窗注册
-    //let user=await openUserLoginModal(this.modalCtrl,"signup");
-    //if(user?.id){
-    // this.currentUser = user;
-    //}
+  /**
+   * @格式化为带单位的数字
+   */
+  formatNumber(num: number): string {
+    if (num >= 10000) {
+      return (num / 10000).toFixed(1) + 'w';
+    } else if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'k';
+    } else {
+      return num + '';
+    }
   }
+  /**
+   * @跳转到设置页面
+   */
   goSetting() {
     this.router.navigate(["/settings"]);
   }

E-Cover-app/src/app/user-info/user-info.component.html

@@ -8,6 +8,7 @@
 <!--正文部分-->
 <ion-content>
   <div class="container">
+
     <div class="row">
       <div class="info-item">
         <span class="fontSize">头像</span>
@@ -17,6 +18,7 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
+
     <div class="row" (click)="edit('name')">
       <div class="info-item">
         <span class="fontSize">昵称</span>
@@ -26,9 +28,11 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
+
   </div>
 
   <div class="container">
+
     <div class="row">
       <div class="info-item">
         <span class="fontSize">手机号</span>
@@ -38,7 +42,8 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
-    <div class="row">
+
+    <div class="row" (click)="edit('gender')">
       <div class="info-item">
         <span class="fontSize">性别</span>
       </div>
@@ -47,6 +52,7 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
+
     <div class="row">
       <div class="info-item">
         <span class="fontSize">所在地</span>
@@ -56,6 +62,7 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
+
     <div class="row">
       <div class="info-item">
         <span class="fontSize">生日</span>
@@ -65,7 +72,8 @@
         <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
       </div>
     </div>
-    <div class="row">
+
+    <div class="row" (click)="edit('signature')">
       <div class="info-item">
         <span class="fontSize">个性签名</span>
       </div>

E-Cover-app/src/app/user-info/user-info.component.ts

@@ -15,12 +15,12 @@ addIcons({ arrowBackOutline, chevronForwardOutline });
 
 })
 export class UserInfoComponent implements OnInit {
-  currentUser: CloudUser | undefined;
+  currentUser: any;
   constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
     this.currentUser = new CloudUser();
   }
   async ionViewWillEnter() {
-    //await this.currentUser?.updateCache();
+    this.currentUser.readCache();
   }
   ngOnInit() { }
 
@@ -28,7 +28,7 @@ export class UserInfoComponent implements OnInit {
     this.navCtrl.back();
   }
 
-  edit(option: string) {
-    let user = openUserEditModal(this.modalCtrl, option);
+  async edit(option: string) {
+    this.currentUser =await openUserEditModal(this.modalCtrl, option);
   }
 }

E-Cover-app/src/lib/component/custom-header/custom-header.component.html

@@ -3,6 +3,6 @@
   <div class="header-container">
     <ion-icon name="chevron-back-outline" size="large" (click)="goBack()"></ion-icon>
     <p class="header-title">{{ param[0] }}</p>
-    <p class="right-text">{{param[2]}}</p>
+    <p class="right-text">{{param[1]}}</p>
   </div>
 </ion-header>

E-Cover-app/src/lib/component/custom-header/custom-header.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { IonButton, IonHeader, IonIcon, NavController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { chevronBackOutline } from 'ionicons/icons';
-addIcons({ chevronBackOutline });
+import { chevronBackOutline, ellipsisHorizontal } from 'ionicons/icons';
+addIcons({ chevronBackOutline,ellipsisHorizontal });
 @Component({
   selector: 'app-custom-header',
   templateUrl: './custom-header.component.html',

E-Cover-app/src/lib/component/post-detail/post-detail.component.html

@@ -0,0 +1,2 @@
+<!--头部-->
+<app-custom-header [param]="['帖子详情','    ']"></app-custom-header>

E-Cover-app/src/lib/component/post-detail/post-detail.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PostDetailComponent } from './post-detail.component';
+
+describe('PostDetailComponent', () => {
+  let component: PostDetailComponent;
+  let fixture: ComponentFixture<PostDetailComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PostDetailComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

E-Cover-app/src/lib/component/post-detail/post-detail.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { CustomHeaderComponent } from '../custom-header/custom-header.component';
+
+@Component({
+  selector: 'app-post-detail',
+  templateUrl: './post-detail.component.html',
+  styleUrls: ['./post-detail.component.scss'],
+  standalone: true,
+  imports:[CustomHeaderComponent]
+})
+export class PostDetailComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

E-Cover-app/src/lib/component/post-detail/post.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PostService {
+  private apiUrl = 'https://localhost:8100/posts'; // 替换为你的API地址
+
+  constructor(private http: HttpClient) {}
+
+  getPostById(id: string): Observable<any> {
+    return this.http.get(`${this.apiUrl}/${id}`);
+  }
+}

E-Cover-app/src/lib/component/post-list/post-list.component.html

@@ -1,9 +1,9 @@
-<div class="post" *ngFor="let post of posts">
+<div class="post" *ngFor="let post of posts" (click)="goPostDetail()">
   <div class="post-header">
     <div class="avatar">
-      <img
-        [src]="post.get('UserID')?.avatar || 'https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain'"
-        alt="User Avatar" class="avatar-image">
+      <ion-img
+        [src]="post.get('UserID')?.avatar || 'assets/icon/default-avatar.png'"
+        alt="User Avatar" class="avatar-image" />
     </div>
     <div class="user-info">
       <span class="username">{{ post.get('user')?.username || "该用户还没有名字" }}</span>

E-Cover-app/src/lib/component/post-list/post-list.component.scss

@@ -0,0 +1,111 @@
+.post {
+    padding: 10px; /* 设置内边距 */
+    background-color: white; /* 背景色 */
+    border-radius: 8px; /* 圆角效果 */
+    margin-bottom: 20px; /* 帖子之间的间距 */
+  }
+  
+  .post-header {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+    margin-bottom: 10px; /* 标题与用户信息之间的间距 */
+  }
+  
+  .avatar {
+    width: 45px; /* 头像宽度 */
+    height: 45px; /* 头像高度 */
+    border-radius: 50%; /* 圆形头像 */
+    overflow: hidden; /* 隐藏超出部分 */
+    margin-right: 10px; /* 头像与用户名之间的间距 */
+    border: black 1px solid; /* 边框 */
+
+  }
+  
+  .avatar-image {
+    width: 100%; /* 头像宽度100% */
+    height: 100%; /* 头像高度100% */
+    object-fit: cover; /* 保持比例填充 */
+  }
+  
+  .user-info {
+    flex: 1; /* 让用户名部分占用剩余空间 */
+    display: flex;
+    justify-content: space-between; /* 用户名和三个点之间的间距 */
+    align-items: center; /* 垂直居中 */
+  }
+  
+  .username {
+    font-weight: bold; /* 加粗用户名 */
+    font-size: 22px; /* 用户名字体大小 */
+  }
+  
+  .more-icon {
+    font-size: 25px; /* 三个点图标大小 */
+    color: gray;
+    margin-right: 10px;
+  }
+  
+  .post-title {
+    font-size: 18px; /* 标题字体大小 */
+    margin: 10px 5px; /* 标题上下间距 */
+    font-weight: bold;
+  }
+  
+  //标签
+.tag-container {
+    display: flex;
+    justify-content: flex-start; /* 标签靠左对齐 */
+    margin-bottom: 10px; /* 将标签容器推到底部 */
+  }
+  
+  .tag {
+    background-color: #f0f0f0; // 灰色背景
+    color: black; // 黑色字体
+    border-radius: 20px; // 椭圆形效果
+    padding: 5px 10px; // 标签内边距
+    margin-right: 17px; // 标签之间的间距
+    font-size: 14px; // 标签字体大小
+    display: inline-flex; // 让标签内容居中
+    align-items: center; // 垂直居中
+  }
+  
+  .tagpicture{
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  
+  .post-content-text {
+    font-size: 18px; /* 帖子内容字体大小 */
+    margin-bottom: 10px; /* 内容与图片之间的间距 */
+  }
+  
+  .image-gallery {
+    display: flex; /* 使用 Flexbox 布局 */
+    flex-wrap: wrap; /* 允许换行 */
+  }
+  
+  .post-image {
+    width: 32%; /* 每张图片占用32%的宽度 */
+    height: auto; /* 高度自适应 */
+    border-radius: 5px; /* 图片圆角 */
+    margin-bottom: 5px; /* 图片与下一张图片之间的间距 */
+    margin-right: 5px; /* 图片与下一张图片之间的间距 */
+    overflow: hidden;
+  }
+
+  .button-container {
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: space-between; /* 按钮之间的间距 */
+  }
+  
+  .action-button {
+    flex: 1; /* 每个按钮占用相同的空间 */
+    font-size: 17px; /* 按钮字体大小 */
+    align-items: center; // 垂直居中
+    color: black; // 字体颜色
+  }
+  
+  .action-button ion-icon {
+    font-size: 20px; /* 图标大小 */
+    margin-right: 5px; /* 图标与文本之间的间距 */
+  }

E-Cover-app/src/lib/component/post-list/post-list.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { IonButton, IonContent, IonIcon } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
+import { IonButton, IonContent, IonIcon, IonImg } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { bookmarkOutline, chatbubbleOutline, ellipsisHorizontal, heart, heartOutline, shareSocialOutline, } from 'ionicons/icons';
 import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
@@ -11,10 +12,10 @@ addIcons({ ellipsisHorizontal, bookmarkOutline, shareSocialOutline, chatbubbleOu
   templateUrl: './post-list.component.html',
   styleUrls: ['./post-list.component.scss'],
   standalone: true,
-  imports: [IonContent, IonIcon, IonButton, CommonModule]
+  imports: [IonContent, IonIcon, IonButton, CommonModule,IonImg]
 })
 export class PostListComponent implements OnInit {
-  constructor() { }
+  constructor(private router:Router) { }
 
   posts: CloudObject[] = []; // 存储帖子
   resultUser: any;
@@ -35,4 +36,7 @@ export class PostListComponent implements OnInit {
   toggleLike() {
     this.isLiked = !this.isLiked; // 切换状态
   }
+  goPostDetail() {
+    this.router.navigate(['postDetail']);
+  }
 }

E-Cover-app/src/lib/ncloud.ts

@@ -2,8 +2,8 @@
 export class CloudObject {
     className: string;
     id: string | null = null;
-    createdAt:any;
-    updatedAt:any;
+    createdAt: any;
+    updatedAt: any;
     data: Record<string, any> = {};
 
     constructor(className: string) {
@@ -88,7 +88,7 @@ export class CloudQuery {
         this.className = className;
     }
 
-    include(...fileds:string[]) {
+    include(...fileds: string[]) {
         this.queryParams["include"] = fileds;
     }
     greaterThan(key: string, value: any) {
@@ -138,23 +138,23 @@ export class CloudQuery {
         return null
     }
 
-    async find():Promise<Array<CloudObject>> {
+    async find(): Promise<CloudObject[]> {
         let url = `http://1.94.237.145:1337/parse/classes/${this.className}?`;
 
         let queryStr = ``
-        Object.keys(this.queryParams).forEach(key=>{
+        Object.keys(this.queryParams).forEach(key => {
             let paramStr = JSON.stringify(this.queryParams[key]);
-            if(key=="include"){
+            if (key == "include") {
                 paramStr = this.queryParams[key]?.join(",")
             }
-            if(queryStr) {
+            if (queryStr) {
                 url += `${key}=${paramStr}`;
-            }else{
+            } else {
                 url += `&${key}=${paramStr}`;
             }
         })
         // if (Object.keys(this.queryParams["where"]).length) {
-            
+
         // }
 
         const response = await fetch(url, {
@@ -170,7 +170,7 @@ export class CloudQuery {
 
         const json = await response?.json();
         let list = json?.results || []
-        let objList = list.map((item:any)=>this.dataToObj(item))
+        let objList = list.map((item: any) => this.dataToObj(item))
         return objList || [];
     }
 
@@ -203,7 +203,7 @@ export class CloudQuery {
         return null
     }
 
-    dataToObj(exists:any):CloudObject{
+    dataToObj(exists: any): CloudObject {
         let existsObject = new CloudObject(this.className);
         existsObject.set(exists);
         existsObject.id = exists.objectId;
@@ -215,45 +215,48 @@ export class CloudQuery {
 
 // CloudUser.ts
 export class CloudUser extends CloudObject {
-    constructor() {
-        super("_User"); // 假设用户类在Parse中是"_User"
-        // 读取用户缓存信息
+    /**
+     * @读取用户缓存信息
+     */
+    readCache() {
+        console.warn("-------------------------")
+        console.warn("正在执行readCache方法：");
         let userCacheStr = localStorage.getItem("NCloud/dev/User")
-        if(userCacheStr){
-            let userData = JSON.parse(userCacheStr)
-            // 设置用户信息
+        console.log("用户缓存信息：", userCacheStr);
+        if (userCacheStr) {
+            let userData = JSON.parse(userCacheStr);
+            console.log("缓存信息转换JSON：")
+            console.log(userData);
             this.id = userData?.objectId;
             this.sessionToken = userData?.sessionToken;
             this.data = userData; // 保存用户数据
+            console.log("缓存信息已保存至用户数据中，用户数据如下：")
+            console.log(this);
+            console.warn("-------------------------")
         }
     }
 
-    sessionToken:string|null = ""
-    /** 获取当前用户信息 */
+    constructor() {
+        super("_User"); // 假设用户类在Parse中是"_User"
+        this.readCache(); // 读取用户缓存信息
+    }
+
+    /**
+     * @获取用户当前信息
+     */
+    sessionToken: string | null = ""
     async current() {
         if (!this.sessionToken) {
             console.error("用户未登录");
             return null;
         }
         return this;
-        // const response = await fetch(`http://1.94.237.145:1337/parse/users/me`, {
-        //     headers: {
-        //         "x-parse-application-id": "hcx",
-        //         "x-parse-session-token": this.sessionToken // 使用sessionToken进行身份验证
-        //     },
-        //     method: "GET"
-        // });
-
-        // const result = await response?.json();
-        // if (result?.error) {
-        //     console.error(result?.error);
-        //     return null;
-        // }
-        // return result;
     }
 
     /** 登录 */
-    async loginByUsername(username: string, password: string):Promise<CloudUser|null> {
+    async loginByUsername(username: string, password: string): Promise<CloudUser | null> {
+        console.warn("-------------------------");
+        console.warn("正在执行ncloud中的登录方法：开始验证");
         const response = await fetch(`http://1.94.237.145:1337/parse/login`, {
             headers: {
                 "x-parse-application-id": "hcx",
@@ -262,20 +265,21 @@ export class CloudUser extends CloudObject {
             body: JSON.stringify({ username, password }),
             method: "POST"
         });
-
         const result = await response?.json();
+        console.log("请求返回结果：\n", result);
         if (result?.error) {
             console.error(result?.error);
             return null;
         }
-        
-        // 设置用户信息
+        console.log("正在读取并设置用户信息...");
         this.id = result?.objectId;
         this.sessionToken = result?.sessionToken;
         this.data = result; // 保存用户数据
-        // 缓存用户信息
-        console.log(result)
-        localStorage.setItem("NCloud/dev/User",JSON.stringify(result))
+        console.log("设置完毕，您的信息如下：")
+        console.log(this);
+        localStorage.setItem("NCloud/dev/User", JSON.stringify(result))// 缓存用户信息
+        console.warn("验证流程结束！")
+        console.warn("-------------------------");
         return this;
     }
 
@@ -298,7 +302,7 @@ export class CloudUser extends CloudObject {
 
         if (result?.error) {
             console.error(result?.error);
-            if(result?.error=="Invalid session token"){
+            if (result?.error == "Invalid session token") {
                 this.clearUserCache()
                 return true;
             }
@@ -308,7 +312,7 @@ export class CloudUser extends CloudObject {
         this.clearUserCache()
         return true;
     }
-    clearUserCache(){
+    clearUserCache() {
         // 清除用户信息
         localStorage.removeItem("NCloud/dev/User")
         this.id = null;
@@ -342,30 +346,33 @@ export class CloudUser extends CloudObject {
         // 设置用户信息
         // 缓存用户信息
         console.log(result)
-        localStorage.setItem("NCloud/dev/User",JSON.stringify(result))
+        localStorage.setItem("NCloud/dev/User", JSON.stringify(result))
         this.id = result?.objectId;
         this.sessionToken = result?.sessionToken;
         this.data = result; // 保存用户数据
         return this;
     }
-
+    /**
+     * 用户重写save方法，用于更新用户信息
+     */
     override async save() {
+        console.warn("-----------------\n" + "准备执行save方法更新用户信息...")
         let method = "POST";
         let url = `http://1.94.237.145:1337/parse/users`;
-    
+
         // 更新用户信息
         if (this.id) {
             url += `/${this.id}`;
             method = "PUT";
         }
-    
-        let data:any = JSON.parse(JSON.stringify(this.data))
+        console.log("正在发送请求：" + url)
+        let data: any = JSON.parse(JSON.stringify(this.data))
         delete data.createdAt
         delete data.updatedAt
         delete data.ACL
         delete data.objectId
         const body = JSON.stringify(data);
-        let headersOptions:any = {
+        let headersOptions: any = {
             "content-type": "application/json;charset=UTF-8",
             "x-parse-application-id": "hcx",
             "x-parse-session-token": this.sessionToken, // 添加sessionToken以进行身份验证
@@ -377,26 +384,29 @@ export class CloudUser extends CloudObject {
             mode: "cors",
             credentials: "omit"
         });
-    
+
         const result = await response?.json();
+        console.log("请求返回结果：\n", result);
         if (result?.error) {
             console.error(result?.error);
         }
         if (result?.objectId) {
             this.id = result?.objectId;
         }
-        localStorage.setItem("NCloud/dev/User",JSON.stringify(this.data))
+        localStorage.setItem("NCloud/dev/User", JSON.stringify(this.data))
+        console.log("重新设置用户缓存中...")
+        console.warn("更新流程结束！"+"\n-----------------\n")
         return this;
     }
 }
 
-export class CloudApi{
-    async fetch(path:string,body:any,options?:{
-        method:string
-        body:any
-    }){
+export class CloudApi {
+    async fetch(path: string, body: any, options?: {
+        method: string
+        body: any
+    }) {
 
-        let reqOpts:any =  {
+        let reqOpts: any = {
             headers: {
                 "x-parse-application-id": "hcx",
                 "Content-Type": "application/json"
@@ -405,15 +415,15 @@ export class CloudApi{
             mode: "cors",
             credentials: "omit"
         }
-        if(body||options?.body){
+        if (body || options?.body) {
             reqOpts.body = JSON.stringify(body || options?.body);
             reqOpts.json = true;
         }
         let host = `http://1.94.237.145:1337`
         // host = `http://127.0.0.1:1337`
-        let url = `${host}/api/`+path
-        console.log(url,reqOpts)
-        const response = await fetch(url,reqOpts);
+        let url = `${host}/api/` + path
+        console.log(url, reqOpts)
+        const response = await fetch(url, reqOpts);
         let json = await response.json();
         return json
     }

E-Cover-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -3,11 +3,11 @@
     <div class="header-container">
         <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
         <p class="header-title">编辑{{ option }}</p>
-        @if(option=='name'){
+        @if(option=='name' || option=='signature'){
         <p (click)="goToSave(option)" class="header-title">完成</p>
         }
         @else{
-        <p class="header-title">    </p>
+        <p class="header-title"> </p>
         }
     </div>
 </ion-header>
@@ -17,4 +17,14 @@
     <ion-input style="width: 100%;--background:white;color: black;--padding-start: 10px;
         height: 70px;font-size: large;" type="text" placeholder="请输入" [(ngModel)]="name"></ion-input>
     }
+    @if(option=='signature'){
+    <ion-textarea [autoGrow]="true" placeholder="请输入" [(ngModel)]="name" style="width: 100%;--background:white;color: black;--padding-start: 10px;
+    "></ion-textarea>
+    }
+    @if(option=='gender'){
+    <div class="container">
+        <ion-action-sheet backdrop-dismiss="false" isOpen="true" [buttons]="genderButtons"
+            (didDismiss)="logResult($event)"></ion-action-sheet>
+    </div>
+    }
 </ion-content>

E-Cover-app/src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -11,7 +11,7 @@ addIcons({ arrowBackOutline })
   templateUrl: './modal-user-edit.component.html',
   styleUrls: ['./modal-user-edit.component.scss'],
   standalone: true,
-  imports: [IonicModule, FormsModule],
+  imports: [IonicModule, FormsModule,],
 
 })
 export class ModalUserEditComponent implements OnInit {
@@ -25,17 +25,51 @@ export class ModalUserEditComponent implements OnInit {
   goBack() {
     this.modalCtrl.dismiss(null, 'cancel');
   }
-
+  /**
+   * @保存当前字段信息
+   * 适用于：昵称，个性签名
+   */
   goToSave(option: string) {
-    console.log("即将保存" + option + "字段");
+    console.warn("------------------\n" + "即将保存" + option + "字段");
     if (this.currentUser?.id) {
       this.currentUser.data[option] = this.name;
     }
     console.log("已保存字段，对象如下：");
     console.log(this.currentUser);
+    console.log("即将保存对象到云端...");
     this.currentUser?.set(this.currentUser?.data)
     this.currentUser?.save();
+    console.log("保存对象到云端完成")
+    console.warn("方法执行完毕" + "\n------------------");
+    this.modalCtrl.dismiss(this.currentUser, 'confirm');
+  }
+  /**
+   * @操作选择表样式
+   * 适用于：性别
+   */
+  public genderButtons = [
+    {
+      text: '男', data:'男',
+    },
+    {
+      text: '女', data: '女',
+    },
+    {
+      text: '取消', data: '取消',
+    },
+  ];
+  logResult(ev: { detail: any; }) {
+    console.warn("-------------\n"+"触发点击事件");
+    console.log(JSON.stringify(ev.detail, null, 2));
+    let gender = ev.detail.data;
+    this.currentUser?.set({gender: gender});
+    console.log("保存对象如下:")
+    console.log(this.currentUser);
+    this.currentUser?.save();
+    this.modalCtrl.dismiss(this.currentUser, 'confirm');
+    console.warn("方法执行完毕"+"\n-------------")
   }
+  
 
 }
 

E-Cover-app/src/lib/user/modal-user-login-main/modal-user-login-main.component.ts

@@ -90,22 +90,27 @@ export class ModalUserLoginMainComponent implements OnInit {
   username: string = "";
   password: string = "";
   async loginByUsername() {
-    console.log("登录被点击：用户名登录");
+    console.warn("-------------------------");
+    console.warn("登录被点击：用户尝试使用用户名登录");
     if (!this.username || !this.password) {
-      console.log("请输入完整用户名和密码")
+      console.error("请输入完整用户名和密码！")
       return
     }
     let user:any = new CloudUser();
-    user = await user.loginByUsername(this.username, this.password);
+    await user.loginByUsername(this.username, this.password);
+    console.log("已收到验证结果，如下：");
+    console.log(user);
     if (user?.id) {
       console.log("登录成功，关闭模态loginByUsername");
       this.modalCtrl.dismiss(user, "confirm")
       console.log("loginMain传递信息如下：")
       console.log(user)
-      console.log("已关闭")
+      console.log("loginMain模态已关闭")
     } else {
       console.log("登录失败");
     }
+    console.warn("loginMain模态已关闭");
+    console.warn("-------------------------")
   }
 }
 

E-Cover-app/src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -33,18 +33,22 @@ export class ModalUserLoginComponent implements OnInit {
   }
 
   async goUsernameLoginPage() {
+    console.warn("-------------------------");
+    console.warn("即将打开loginMain模态");
     const user: CloudUser | null = await openUserLoginMainModal(this.modalCtrl, 'username');
-    console.log("已接受返回数据，如下：");
+    console.log("已接受来自loginMain的返回数据，如下：");
     console.log(user);
     if (user?.id) {
-      console.log("即将关闭goUsernameLoginPage模态并返回用户");
+      console.log("即将关闭loginMain模态并返回用户");
       setTimeout(async () => {
         await this.modalCtrl.dismiss(user, "confirm");
-        console.log("模态已关闭");
+        
       }, 500); // 延迟500毫秒
     } else {
       await this.modalCtrl.dismiss(null, "cancel"); // 关闭主模态
     }
+    console.warn("模态已关闭，结束login模态流程");
+    console.warn("-------------------------")
   }
 }