Merge branch 'master' of codehub-cn-south-1.devcloud.huaweicloud.com:web3000003/web-0210402

app-angular/src/modules/lesson/community/community.component.html

@@ -5,7 +5,6 @@
             <ion-icon name="add-circle-outline" size="large" color="dark"></ion-icon>
             <ion-note>发布</ion-note>
         </ion-button>
-        
     </ion-toolbar>
 </ion-header>
 
@@ -40,7 +39,7 @@
                                     {{attention?.get('name')}}
                                 </ion-card-title>
                                 <ion-card-subtitle style="font-size:0.7rem;">
-                                    作者：{{attention?.get('user')?.get('name')||"无名"}}
+                                    作者：{{attention?.get('user')?.get('name') || "无名"}}
                                 </ion-card-subtitle>
                             </ion-card-header>
                             <div class="metadata-end-wrapper">
@@ -56,34 +55,17 @@
         </ion-grid>
     </ng-container>
 
-
     <!-- 关注 -->
     <ng-container *ngIf="cate=='关注'">
-        <ion-grid>
-            <ion-row>
-                <ng-container *ngFor="let attention of attentionList">
-                    <ion-col size="6">
-                        <ion-card class="roleCard" (click)="goAttentionDetail(attention)">
-                            <img alt="关注图" [src]="attention?.get('img')" />
-                            <ion-card-header>
-                                <ion-card-title>
-                                    {{attention?.get('name')}}
-                                </ion-card-title>
-                                <ion-card-subtitle style="font-size:0.7rem;">
-                                    作者：{{attention?.get('user')?.get('name')||"无名"}}
-                                </ion-card-subtitle>
-                            </ion-card-header>
-                            <div class="metadata-end-wrapper">
-                                <ion-button shape="round" size="small" color="danger">
-                                    <ion-icon name="heart-outline" size="small"></ion-icon>
-                                    {{attention?.get('like')}}
-                                </ion-button>
-                            </div>
-                        </ion-card>
-                    </ion-col>
-                </ng-container>
-            </ion-row>
-        </ion-grid>
+        <div class="carousel-container">
+            <div class="carousel">
+                <div class="card">Card 1</div>
+                <div class="card">Card 2</div>
+                <div class="card">Card 3</div>
+                <div class="card">Card 4</div>
+                <div class="card">Card 5</div>
+            </div>
+        </div>
     </ng-container>
 
     <!-- 科普 -->
@@ -93,7 +75,7 @@
                 <img alt="科普图" [src]="science?.get('img')" />
                 <ion-card-header>
                     <ion-card-title>{{science?.get('name')}}</ion-card-title>
-                    <ion-card-subtitle>{{science?.get('createdAt')| date: 'YYYY/MM/dd'||"发布时间"}}</ion-card-subtitle>
+                    <ion-card-subtitle>{{science?.get('createdAt') | date: 'YYYY/MM/dd' || "发布时间"}}</ion-card-subtitle>
                     <div class="metadata-end-wrapper">
                         <ion-button fill="clear" color="dark" size="small" class="see">
                             <ion-icon name="eye-outline" size="small"></ion-icon>
@@ -112,4 +94,4 @@
         </ng-container>
     </ng-container>
 
-</ion-content>
+</ion-content>

app-angular/src/modules/lesson/community/community.component.scss

@@ -1,28 +1,57 @@
 ion-content {
-    height: calc(100vh - 121px) !important;
+  height: calc(100vh - 121px) !important;
 }
 
 .foodContent {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .roleCard {
-    margin: 0px;
+  margin: 0;
 }
 
 .metadata-end-wrapper {
-    position: absolute;
+  position: absolute;
+  top: 3px;
+  inset-inline-end: 3px;
+  font-size: 0.6rem;
+  display: flex;
+  align-items: center;
+}
 
-    top: 3px;
-    inset-inline-end: 3px;
+.carousel-container {
+  width: 100%;
+  overflow: hidden;
+}
 
-    font-size: 0.6rem;
+.carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* 隐藏滚动条 Firefox */
+  -ms-overflow-style: none; /* 隐藏滚动条 IE/Edge */
+  -webkit-overflow-scrolling: touch; /* 兼容iOS的滚动效果 */
+}
 
-    display: flex;
-    align-items: center;
+.carousel::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条 Chrome/Safari */
+}
 
-}
+.card {
+  flex: 0 0 auto;
+  width: 200px;
+  height: 200px;
+  margin-right: 10px;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-content {
+  display: flex;
+  flex-wrap: nowrap; /* 防止换行 */
+}

app-angular/src/modules/lesson/community/community.component.ts

@@ -1,72 +1,102 @@
-import { Component } from '@angular/core';
-
-// 引用服务
+import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
-
-// 引入Parse第三方库
-import * as Parse from "parse"
-(Parse as any).serverURL = "http://web2023.fmode.cn:9999/parse"
-Parse.initialize("dev")
+import * as Parse from "parse";
 
 @Component({
   selector: 'app-community',
   templateUrl: './community.component.html',
   styleUrls: ['./community.component.scss']
 })
-export class CommunityComponent {
+export class CommunityComponent implements OnInit {
+
+  scienceList: Array<Parse.Object> = [];
+  recommendList: Array<Parse.Object> = [];
+  attentionList: Array<Parse.Object> = [];
+
+  startX: number = 0;
+  currentX: number = 0;
+  isDragging: boolean = false;
+  minTranslateX: number = 0; // 最小平移距离
+  maxTranslateX: number = 0;
 
-  scienceList: Array<Parse.Object> = []
-  recommendList: Array<Parse.Object> = []
-  attentionList: Array<Parse.Object> = []
+  @ViewChild('carousel', { static: true }) carousel!: ElementRef;
 
+  cate: string = 'all';
 
-  // 依赖注入
-  constructor(private router: Router) {
+  constructor(private router: Router, private renderer: Renderer2) {
     this.initPage();
   }
-  // 首次进入页面，默认加载首批数据
+
+  ngOnInit(): void {
+    this.renderer.listen(this.carousel.nativeElement, 'touchstart', this.onTouchStart.bind(this));
+    this.renderer.listen(this.carousel.nativeElement, 'touchmove', this.onTouchMove.bind(this));
+    this.renderer.listen(this.carousel.nativeElement, 'touchend', this.onTouchEnd.bind(this));
+  }
+
   async initPage() {
-    this.scienceList = await this.getScienceData()
-    this.recommendList = await this.gteRecommendData()
-    this.attentionList = await this.gteAttentionData()
+    this.scienceList = await this.getScienceData();
+    this.recommendList = await this.getRecommendData();
+    this.attentionList = await this.getAttentionData();
+    // 设置最大最小平移距离
+    this.maxTranslateX = this.carousel.nativeElement.offsetWidth - window.innerWidth;
   }
 
-  // 数据加载相关函数
   async getScienceData() {
     let query = new Parse.Query("PetScience");
     let list = await query.find();
-    return list
+    return list;
   }
-  async gteRecommendData() {
+
+  async getRecommendData() {
     let query = new Parse.Query("PetRecommend");
     let list = await query.find();
-    return list
+    return list;
   }
-  async gteAttentionData() {
+
+  async getAttentionData() {
     let query = new Parse.Query("PetAttention");
     let list = await query.find();
-    return list
+    return list;
   }
 
-  cate: string = "推荐"
-  // 跳转函数
   goScienceDetail(science: Parse.Object) {
     this.router.navigate(["/lesson/community/scienceDetail"], {
       queryParams: science
-    })
+    });
   }
 
   goRecommendDetail(recommend: Parse.Object) {
     this.router.navigate(["/lesson/community/recommendDetail"], {
       queryParams: recommend
-    })
+    });
   }
 
   goAttentionDetail(attention: Parse.Object) {
     this.router.navigate(["/lesson/community/attentionDetail"], {
       queryParams: attention
-    })
+    });
+  }
+
+  onTouchStart(event: TouchEvent): void {
+    this.startX = event.touches[0].clientX;
+    this.isDragging = true;
   }
 
+  onTouchMove(event: TouchEvent): void {
+    if (this.carousel && this.isDragging) {
+        const touch = event.touches[0];
+        const deltaX = touch.clientX - this.startX;
+        this.currentX = this.currentX + deltaX;
+
+        // 限制平移范围在最大最小值之间
+        this.currentX = Math.max(this.minTranslateX, Math.min(this.maxTranslateX, this.currentX));
 
+        this.renderer.setStyle(this.carousel.nativeElement, 'transform', `translateX(${-this.currentX}px)`);
+        this.startX = touch.clientX;
+    }
+}
+
+  onTouchEnd(): void {
+    this.isDragging = false;
+  }
 }

app-angular/src/modules/lesson/contact-detail/contact-detail.component.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>contact-detail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">contact-detail</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

app-angular/src/modules/lesson/contact-detail/contact-detail.component.scss

@@ -0,0 +1,31 @@
+ion-content {
+    height: calc(100vh - 121px) !important;
+}
+
+ion-item-divider {
+    ion-icon {
+        margin-right: 9px;
+    }
+}
+
+ion-label p {
+    display: block;
+    max-width: calc(100% - 60px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-label {
+    ion-text {
+        font-size: 0.9rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+ion-button {
+    ion-icon {
+        margin-right: 3px;
+    }
+}

app-angular/src/modules/lesson/contact-detail/contact-detail.component.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContactDetailPage } from './contact-detail.component';
+
+describe('ContactDetailPage', () => {
+  let component: ContactDetailPage;
+  let fixture: ComponentFixture<ContactDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/contact-detail/contact-detail.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-detail',
+  templateUrl: './contact-detail.component.html',
+  styleUrls: ['./contact-detail.component.scss'],
+})
+export class ContactDetailPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

app-angular/src/modules/lesson/contact-list/contact-list.component.html

@@ -0,0 +1,34 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>通讯录</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">通讯录</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-searchbar [(ngModel)]="searchName" (ionInput)="search()"></ion-searchbar>
+
+  <ion-list>
+    <ng-container *ngFor="let contact of contactList;let index = index;">
+      <!-- 分组：根据下标首个出现的元素显示分组分隔符 -->
+      <ion-item-divider *ngIf="charGroupIndex[contact.get('firstChar')] == index">
+        <ion-label>{{contact.get('firstChar')}}</ion-label>
+      </ion-item-divider>
+      <ion-item lines="none">
+        <ion-avatar slot="start">
+          <img [src]="contact.get('avatarUrl') || 'https://ionicframework.com/docs/img/demos/avatar.svg'">
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ contact.get('name') }}</h2>
+          <p>性别: {{ contact.get('gender') }}</p>
+          <p>手机: {{ contact.get('mobile') }}</p>
+        </ion-label>
+      </ion-item>
+    </ng-container>
+  </ion-list>
+</ion-content>

app-angular/src/modules/lesson/contact-list/contact-list.component.scss

@@ -0,0 +1,31 @@
+ion-content {
+    height: calc(100vh - 121px) !important;
+}
+
+ion-item-divider {
+    ion-icon {
+        margin-right: 9px;
+    }
+}
+
+ion-label p {
+    display: block;
+    max-width: calc(100% - 60px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-label {
+    ion-text {
+        font-size: 0.9rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+ion-button {
+    ion-icon {
+        margin-right: 3px;
+    }
+}

app-angular/src/modules/lesson/contact-list/contact-list.component.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContactListPage } from './contact-list.component';
+
+describe('ContactListPage', () => {
+  let component: ContactListPage;
+  let fixture: ComponentFixture<ContactListPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactListPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/contact-list/contact-list.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import * as Parse from "parse";
+@Component({
+  selector: 'app-contact-list',
+  templateUrl: './contact-list.component.html',
+  styleUrls: ['./contact-list.component.scss'],
+})
+export class ContactListPage implements OnInit {
+  searchName: string = '';
+  contactList: Array<Parse.Object> = [];
+
+  ngOnInit() {
+    this.loadContact();
+  }
+
+  charGroupIndex:any = {}
+  loadContact() {
+    const Contact = Parse.Object.extend('Contact');
+    const query = new Parse.Query(Contact);
+    query.ascending('firstChar');
+
+    if (this.searchName) {
+      query.contains('name', this.searchName);
+    }
+
+    query.find().then((results) => {
+      this.contactList = results;
+      this.contactList.forEach((contact,index)=>{
+        if(this.charGroupIndex[contact.get("firstChar")] == undefined){
+          this.charGroupIndex[contact.get("firstChar")] = index
+        }
+      })
+    }, (error) => {
+      console.error('Error while fetching contacts', error);
+    });
+  }
+
+  search() {
+    this.loadContact();
+  }
+
+}

app-angular/src/modules/lesson/explore-container/explore-container.component.html

@@ -0,0 +1,4 @@
+<div id="container">
+  <strong>{{ name }}</strong>
+  <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+</div>

app-angular/src/modules/lesson/explore-container/explore-container.component.scss

@@ -0,0 +1,27 @@
+#container {
+    text-align: center;
+  
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  
+  #container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+  
+  #container p {
+    font-size: 16px;
+    line-height: 22px;
+  
+    color: #8c8c8c;
+  
+    margin: 0;
+  }
+  
+  #container a {
+    text-decoration: none;
+  }

app-angular/src/modules/lesson/explore-container/explore-container.component.spec.ts

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

app-angular/src/modules/lesson/explore-container/explore-container.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-explore-container',
+  templateUrl: './explore-container.component.html',
+  styleUrls: ['./explore-container.component.scss'],
+})
+export class ExploreContainerComponent {
+
+  @Input() name?: string;
+
+}

app-angular/src/modules/lesson/lesson-routing.module.ts

@@ -14,6 +14,8 @@ import { authGuard } from '../user/guard-auth/auth.guard';
 import { PageLessonComponent } from './page-lesson/page-lesson.component';
 import { PageLessonDetailComponent } from './page-lesson-detail/page-lesson-detail.component';
 import { PageTestComponent } from './page-test/page-test.component';
+import { ContactListPage } from './contact-list/contact-list.component';
+import { ContactDetailPage } from './contact-detail/contact-detail.component';
 
 
 const routes: Routes = [
@@ -27,9 +29,11 @@ const routes: Routes = [
   { path: 'community/attentionDetail', component: AttentionDetailComponent },
   { path: 'community/recommendDetail', component: RecommendDetailComponent },
   { path: 'community/share', component: ShareComponent },
-  { path: "me/userFollow", component: UserFollowComponent },
+  { path: "me/userFollow", component: ContactListPage },
   { path: "me/userTag", component: UserTagComponent },
   { path: "me/userCollection", component: UserCollectionComponent },
+  { path: 'me/userFollow/list', component: ContactDetailPage},
+  { path: 'me/userFollow/detail/:id', component: ContactDetailPage },
 
 
 ];

app-angular/src/modules/lesson/lesson.module.ts

@@ -17,30 +17,36 @@ import { PageChatComponent } from './page-chat/page-chat.component';
 import { PageLessonDetailComponent } from './page-lesson-detail/page-lesson-detail.component';
 import { PageLessonComponent } from './page-lesson/page-lesson.component';
 import { PageTestComponent } from './page-test/page-test.component';
+import { ContactListPage } from './contact-list/contact-list.component';
+import { ContactDetailPage } from './contact-detail/contact-detail.component';
+ import { ExploreContainerComponent } from './explore-container/explore-container.component';
 
 @NgModule({
-  declarations: [
-    MeComponent,
-    CommunityComponent,
-    ScienceDetailComponent,
-    ShareComponent,
-    RecommendDetailComponent,
-    AttentionDetailComponent,
-    UserFollowComponent,
-    UserTagComponent,
-    UserCollectionComponent,
-    PageChatComponent,
+  declarations: [
+    MeComponent,
+    CommunityComponent,
+    ScienceDetailComponent,
+    ShareComponent,
+    RecommendDetailComponent,
+    AttentionDetailComponent,
+    UserFollowComponent,
+    UserTagComponent,
+    UserCollectionComponent,
+    PageChatComponent,
     PageLessonDetailComponent,
     PageLessonComponent,
     PageTestComponent,
-
-
-  ],
-  imports: [
-    CommonModule,
-    LessonRoutingModule,
-    FormsModule,
-    IonicModule
-  ]
+    ContactListPage,
+    ContactDetailPage,
+   ExploreContainerComponent,
+    
+  ],
+  imports: [
+    CommonModule,
+    LessonRoutingModule,
+    FormsModule,
+    IonicModule,
+    IonicModule.forRoot() // 导入 IonicModule.forRoot()
+  ]
 })
 export class LessonModule { }

app-angular/src/modules/lesson/me/me.component.html

@@ -76,6 +76,7 @@
                 <ion-icon name="people-sharp"></ion-icon>
                 <ion-label>
                     <ion-note>人物</ion-note>
+                   
                 </ion-label>
             </ion-item>
             <ion-item button detail="true" routerLink="/lesson/me/userTag">
@@ -149,7 +150,43 @@
           <ion-item slot="header" color="light">
             <ion-label class="larger-font">🎡功能</ion-label>
           </ion-item>
-          <div class="ion-padding" slot="content">Third Content</div>
+          <div class="ion-padding" slot="content">
+            <ion-item button detail="true" routerLink="/lesson/me/userFollow">
+                <ion-avatar slot="start">
+                    <img alt="" src="../../assets/2.jpg" />
+                </ion-avatar>
+                <ion-label><span class="bold-text2">记账</span> <br>  
+                    <span class="small-orange-text2">金钱往来</span><br>  
+                     </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                    <img alt="头像" src="../../assets/3.jpg" />
+                </ion-avatar>
+                <ion-label>  
+                    <span class="bold-text2">想法</span><br>  
+        <span class="small-orange-text2">看法，想法，畅所欲言</span><br>    
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                    <img alt="头像" src="../../assets/3.jpg" />
+                </ion-avatar>
+                <ion-label>  
+                    <span class="bold-text2">礼物</span><br>  
+        <span class="small-orange-text2">送出和收到的礼物</span><br>    
+                </ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-avatar slot="start">
+                    <img alt="头像" src="../../assets/3.jpg" />
+                </ion-avatar>
+                <ion-label>  
+                    <span class="bold-text2">技能&能力探索</span><br>  
+        <span class="small-orange-text2">检索人物的技能和能力</span><br>    
+                </ion-label>
+              </ion-item>
+          </div>
         </ion-accordion>
       </ion-accordion-group>
 

app-angular/src/modules/lesson/me/me.component.scss

@@ -70,7 +70,15 @@ ion-avatar img {
     font-size: 0.8em; /* 小一号字体 */  
     color: orange; /* 橘色 */  
 }  
+.bold-text2 {  
+    font-weight: bold; /* 加粗 */  
+    color: rgb(40, 133, 248); /* 黑色 */  
+}  
 
+.small-orange-text2 {  
+    font-size: 0.8em; /* 小一号字体 */  
+    color: rgb(145, 146, 146); /* 橘色 */  
+}  
 .small-red-text {  
     font-size: 0.8em; /* 小一号字体 */  
     color: red; /* 红色 */  
@@ -83,4 +91,6 @@ ion-avatar img {
   }  
  .ion-padding{
     background-color: #eff6f7 !important; 
- }
+ }
+
+ 

app-angular/src/modules/lesson/me/me.component.ts

@@ -9,11 +9,11 @@ import * as Parse from "parse"
   styleUrls: ['./me.component.scss']
 })
 export class MeComponent {
-  isReminderExpanded = false;  
+isReminderExpanded = false;  
   
-  toggleReminder() {  
-      this.isReminderExpanded = !this.isReminderExpanded;  
-  }  
+    toggleReminder() {  
+        this.isReminderExpanded = !this.isReminderExpanded;  
+    }  
   currentUser: Parse.User | undefined
   constructor(
     private toastCtrl: ToastController,

app-angular/src/modules/lesson/user-follow/user-follow.component.html

@@ -1,56 +1,18 @@
-<ion-header>
+<ion-header [translucent]="true">
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-button routerLink="/lesson/me" fill="clear" color="dark">
-                <ion-icon name="chevron-back-outline" size="small"></ion-icon>返回</ion-button>
-        </ion-buttons>
-        <ion-buttons slot="end">
-            <ion-button fill="clear" color="dark">
-                <ion-icon name="person-add-outline"></ion-icon>
-            </ion-button>
-
-        </ion-buttons>
+      <ion-title>
+通讯录
+    </ion-title>
     </ion-toolbar>
-</ion-header>
-<ion-content color="light">
-    <ion-list [inset]="true">
-        <ion-item-group>
-            <ion-item-divider>
-                <ion-icon name="people"></ion-icon>
-                <ion-label>关注列表：</ion-label>
-            </ion-item-divider>
-            <ng-container>
-                <ion-item button detail="false" lines="full">
-                    <ion-avatar slot="start">
-                        <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-                    </ion-avatar>
-                    <ion-label>
-                        <p>昵称</p>
-                        <ion-badge slot="start">标签</ion-badge>
-                    </ion-label>
-                    <ion-buttons slot="end">
-                        <ion-button fill="clear" color="dark">
-                            <ion-icon name="chatbox-ellipses-outline"></ion-icon>
-                            发消息
-                        </ion-button>
-                    </ion-buttons>
-                </ion-item>
-            </ng-container>
-            <ion-item button detail="false" lines="full">
-                <ion-avatar slot="start">
-                    <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-                </ion-avatar>
-                <ion-label>
-                    <p>昵称</p>
-                    <ion-badge slot="start">标签</ion-badge>
-                </ion-label>
-                <ion-buttons slot="end">
-                    <ion-button fill="clear" color="dark">
-                        <ion-icon name="chatbox-ellipses-outline"></ion-icon>
-                        发消息
-                    </ion-button>
-                </ion-buttons>
-            </ion-item>
-        </ion-item-group>
-    </ion-list>
-</ion-content>
+  </ion-header>
+  
+  <ion-content [fullscreen]="true">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title size="large">User-follow</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  
+    <app-explore-container name="User-follow page"></app-explore-container>
+  </ion-content>
+  

app-angular/src/modules/lesson/user-follow/user-follow.component.spec.ts

@@ -1,21 +1,29 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UserFollowComponent } from './user-follow.component';
+import { IonicModule } from '@ionic/angular';
 
 describe('UserFollowComponent', () => {
   let component: UserFollowComponent;
   let fixture: ComponentFixture<UserFollowComponent>;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [UserFollowComponent]
-    });
+  beforeEach(async() => {
+    // 配置测试模块，声明要测试的组件
+    await TestBed.configureTestingModule({
+      declarations: [UserFollowComponent],
+      imports: [IonicModule.forRoot() ] 
+    }).compileComponents();
+
+    // 创建组件实例
     fixture = TestBed.createComponent(UserFollowComponent);
     component = fixture.componentInstance;
+
+    // 执行变更检测
     fixture.detectChanges();
   });
 
   it('should create', () => {
+    // 断言组件实例存在
     expect(component).toBeTruthy();
   });
 });

app-angular/src/modules/lesson/user-follow/user-follow.component.ts

@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./user-follow.component.scss']
 })
 export class UserFollowComponent {
-
+  constructor() {
+    // 构造函数，用于初始化组件
+  }
 }