feat：

firm-app/src/app/page-personalized/page-personalized.component.html

@@ -1,3 +1,42 @@
-<p>
-  page-personalized works!
-</p>
+
+<ion-header [translucent]="true">
+  <ion-toolbar>
+   <ion-item lines="none">
+     <!-- 图片 -->
+     <ion-avatar slot="start">
+     <img src="/assets/img/3.png" alt="Your Image" class="header-image">
+   </ion-avatar>
+ </ion-item>
+</ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <h1>类型</h1>
+  <ion-input [value]="type" (ionInput)="typeInput($event)"></ion-input>
+
+<!-- 文本域：生成提示词 -->
+<h1>风格</h1>
+<ion-input [value]="style" (ionInput)="styleInput($event)"></ion-input>
+
+<h1>时长与节奏</h1>
+<ion-input [value]="time" (ionInput)="timeInput($event)"></ion-input>
+
+<h1>补充</h1>
+<ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+
+<!-- 按钮：执行消息生成函数 -->
+<ion-button (click)="sendMessage()" expand="block">内容推荐</ion-button>
+  
+ <!-- 展示：返回消息内容 -->
+  <!-- 消息传输过程中，实时预览 -->
+  @if(!isComplete){
+    <div>{{responseMsg}}</div>
+  }
+  <!-- 消息传输完成后，实时预览Markdown格式 -->
+  @if(isComplete){
+    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+  }
+
+
+</ion-content>

firm-app/src/app/page-personalized/page-personalized.component.scss

@@ -0,0 +1,38 @@
+
+    ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+     height: 50px; /* 保持宽高一致，避免变形 */
+    }
+    
+    ion-avatar img {
+     width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+    }
+    header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+     }
+    
+     ion-header {
+      background: #f8f9fa; // 设置头部背景色
+    }    
+      ion-item {
+        border-radius: 8px; // 设置列表项圆角
+        margin: 5px 0; // 添加列表项的上下外边距
+      }    
+    
+    ion-content {
+        background: #f8f9fa; // 设置背景色
+        margin:5px 0;
+      }
+    
+    h1{
+        width:95%;
+        height: 50px;
+     }
+     ino-input{
+        width:95%;
+        height:50;
+
+     }

firm-app/src/app/page-personalized/page-personalized.component.ts

@@ -1,15 +1,68 @@
 import { Component, OnInit } from '@angular/core';
+import { IonAvatar, IonButton, IonContent, IonHeader, IonInput, IonItem, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-page-personalized',
   templateUrl: './page-personalized.component.html',
   styleUrls: ['./page-personalized.component.scss'],
   standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
+    IonTextarea,IonInput,IonTextarea,IonItem,IonAvatar,MarkdownPreviewModule
+    ],
 })
 export class PagePersonalizedComponent  implements OnInit {
-
   constructor() { }
-
   ngOnInit() {}
+ // 用户输入提示词
+ type:string = "电视剧"
+ typeInput(ev:any){
+   this.type = ev.detail.value;
+ }
+ style:string = "暗黑"
+ styleInput(ev:any){
+   this.style = ev.detail.value;
+ }
+ time:string = "短剧，快节奏"
+ timeInput(ev:any){
+   this.time = ev.detail.value;
+ }
+ userPrompt:string = "剧情不拖拉"
+ promptInput(ev:any){
+   this.userPrompt = ev.detail.value;
+ }
+
+ // 属性：组件内用于展示消息内容的变量
+ responseMsg:any = ""
+ // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+ 
+ // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+ isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
+  
+ sendMessage(){
+   console.log("create")
+
+   let PromptTemplate = `
+   给我推荐一些剧情类型${this.style},剧集时长${this.time}
+   ,并且${this.userPrompt}的${this.type},并给出推荐理由
+   `
+
+   let completion = new FmodeChatCompletion([
+     {role:"system",content:""},
+     {role:"user",content:PromptTemplate}
+   ])
+   completion.sendCompletion().subscribe((message:any)=>{
+     // 打印消息体
+     console.log(message.content)
+     // 赋值消息内容给组件内属性
+     this.responseMsg = message.content
+     if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
+      this.isComplete = true
+    }
+   })
+ }
+
+
+
 
 }

firm-app/src/app/tab1/tab1.page.html

@@ -2,17 +2,19 @@
        <ion-toolbar>
         <ion-item lines="none">
           <!-- 图片 -->
-          <ion-avatar slot="start" class="image-container">
-          <img src="/assets/img/3.png" alt="Your Image" class="header-image">
+          <ion-avatar slot="start" >
+          <img src="/assets/img/3.png" alt="logo" >
         </ion-avatar>
-        <!-- 搜索框 -->
+        <!-- 搜索框 ,slot="end"：这个属性通常用于将 <ion-searchbar> 放置在某个容器(此处为<ion-item>)的末尾位置
+          expand="with-icon"：这个属性控制搜索栏的展开行为-->
          <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
       </ion-item>
     </ion-toolbar>
   </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content >
   <div class="scroll-container">
+    <!-- 创建一个分段控件，允许用户在不同的视图或选项之间切换 -->
  <ion-segment (ionChange)="segmentChanged($event)">
     <ion-segment-button value="popular">
       <ion-label>热门推荐</ion-label>
@@ -47,22 +49,39 @@
   <div *ngIf="selectedSegment === 'tv'" class="content-section">
     <h2>电视剧推荐</h2>
     <ion-list>
-      <ion-item *ngFor="let show of tvShows">
-        <ion-thumbnail slot="start">
-          <img [src]="show.coverImage" />
-        </ion-thumbnail>
-        <ion-label>
-          <h2>{{ show.title }}</h2>
-          <p>
-            <ion-icon name="star" *ngFor="let star of getStars(show.rating)"></ion-icon>
-            <span>{{ show.rating }}</span>
-          </p>
-          <!-- 简介块 -->
-          <p class="description">
-            {{ show.description }}
-          </p>
-        </ion-label>
-      </ion-item>
+     <!-- 使用*ngFor指令遍历tvShows数组，为每个电视节目创建一个ion-item -->
+<ion-item *ngFor="let show of tvShows">
+  <!-- ion-thumbnail用于显示电视节目的封面图片，它位于ion-item的开始位置 -->
+  <ion-thumbnail slot="start">
+    <!-- 使用Angular的属性绑定[src]来动态设置图片的源地址 -->
+    <img [src]="show.coverImage" />
+  </ion-thumbnail>
+  
+  <!-- ion-label用于包含电视节目的标题、评分和描述 -->
+  <ion-label>
+    <!-- 显示电视节目的标题 -->
+    <h2>{{ show.title }}</h2>
+    
+    <!-- 显示电视节目的评分，包括星星图标和具体的评分数字 -->
+    <p>
+      <!-- 使用*ngFor指令遍历getStars(show.rating)返回的星星数组 -->
+      <!-- let star表示当前遍历到的星星值（1表示全星，0.5表示半星，0表示空星） -->
+      <!-- let i表示当前星星的索引 -->
+      <span *ngFor="let star of getStars(show.rating); let i = index" 
+            [class]="getStarClass(star, i)">
+        <!-- 使用Unicode星星字符来表示星星 -->
+        ★
+      </span>
+      <!-- 显示具体的评分数字 -->
+      <span>{{ show.rating }}</span>
+    </p>
+    
+    <!-- 显示电视节目的描述 -->
+    <p class="description">
+      {{ show.description }}
+    </p>
+  </ion-label>
+</ion-item>
     </ion-list>
   </div>
   <div *ngIf="selectedSegment === 'movies'" class="content-section">

firm-app/src/app/tab1/tab1.page.scss

@@ -13,19 +13,13 @@ ion-avatar img {
  width: 100%; /* 让图片填满avatar */
 height: auto; /* 保持图片比例 */
 }
-header-image {
-width: 100%;
-height: auto; /* 保持图片比例 */
-border-radius: 50%; /* 可选：将图片设置为圆形 */
- }
+
 
  ion-header {
   background: #f8f9fa; // 设置头部背景色
 }
 
 
-
-
 .content-section {
   padding: 15px; // 设置内容区域的内边距
   background-color: #ffffff; // 设置内容区域背景色
@@ -79,4 +73,36 @@ ion-item {
     font-size: 0.9rem; // 设置评分字体大小
     color: #666; // 设置评分颜色
   }
-}
+}
+
+//星星
+/* styles.css 或 your-component.component.css */
+.star {
+  font-size: 24px;
+  color: gray; /* 默认颜色为灰色，表示未点亮 */
+}
+
+.star.full {
+  color: gold; /* 点亮的星星颜色为金色 */
+}
+
+.star.half {
+  position: relative;
+  color: gold; /* 半星的基础颜色为金色 */
+  z-index: 1; /* 确保半星显示在前面 */
+}
+
+.star.half::after {
+  content: '★'; /* 使用Unicode星星字符 */
+  color: gray; /* 半星未被点亮的部分颜色为灰色 */
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: scale(0.5); /* 缩小到50%以创建半星效果 */
+  z-index: -1; /* 确保灰色半星显示在金色半星下面 */
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 裁剪路径以只显示右半部分 */
+}
+
+/* 可选：使用伪元素来创建半星效果可能需要一些调整，具体取决于你的布局和字体大小 */
+/* 上面的clip-path方法可能不适用于所有情况，特别是如果星星图标不是简单的字符 */
+/* 如果可能的话，最好使用图像或SVG图标，并控制其透明度或亮度 */

firm-app/src/app/tab1/tab1.page.ts

@@ -48,8 +48,27 @@ export class Tab1Page {
 
   // 获取星星的数组
   getStars(rating: number): number[] {
-    return Array(rating).fill(0); // 返回一个包含指定数量星星的数组
+    const totalStars = 5;
+    const fullStars = Math.floor(rating);
+    const halfStar = rating % 1 > 0 ? 0.5 : 0;
+    const emptyStars = totalStars - fullStars - halfStar;
+    return Array(fullStars).fill(1).concat(halfStar ? 0.5 : [], Array(emptyStars).fill(0));
   }
+   
+  getStarClass(star: number, index: number): string {
+    if (star === 1) {
+      return 'star full';
+    } else if (star === 0.5 && index === this.getStars(this.tvShows[0].rating).findIndex(s => s === 0.5)) {
+      // 假设tvShows数组中只有一个元素，或者你需要根据索引来动态确定哪个是半星
+      // 这里我们简单地通过找到数组中的0.5值来确定半星的索引
+      return 'star half';
+    } else {
+      return 'star'; // 空星
+    }
+  }
+   
+  // 注意：这里的getStarClass方法假设tvShows数组中只有一个元素，或者你需要一个更复杂的逻辑来确定哪个索引对应半星。
+  // 在实际应用中，你可能需要更复杂的逻辑来处理多个tvShows元素和它们的评分。
 
   onSearch(event: any) {
   const searchTerm = event.target.value; // 获取用户输入的搜索内容

firm-app/src/app/tab2/tab2.page.html

@@ -1,17 +1,14 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
+    <ion-item lines="none">
+      <!-- 图片 -->
+      <ion-avatar slot="start">
+      <img src="/assets/img/3.png" alt="logo">
+    </ion-avatar>
+  </ion-item>
+ </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
 </ion-content>

firm-app/src/app/tab2/tab2.page.scss

@@ -0,0 +1,24 @@
+
+ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+     height: 50px; /* 保持宽高一致，避免变形 */
+    }
+    
+    ion-avatar img {
+     width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+    }
+
+    
+    ion-header {
+      background: #f8f9fa; // 设置头部背景色
+    }    
+    
+    ion-item {
+        border-radius: 8px; // 设置列表项圆角
+        margin: 5px 0; // 添加列表项的上下外边距
+      }    
+    
+      ion-content{
+       background: #f8f9fa; // 设置背景色
+    }

firm-app/src/app/tab2/tab2.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonItem } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -7,7 +7,9 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonAvatar,IonItem,
+  ]
 })
 export class Tab2Page {
 

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

@@ -1,12 +1,12 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-avatar slot="start" class="image-container">
-      <img src="/assets/img/3.png" alt="Your Image" class="header-image">
+    <ion-item lines="none" >
+      <!-- 图片 -->
+      <ion-avatar slot="start">
+      <img src="/assets/img/3.png" alt="logo">
     </ion-avatar>
-    <ion-buttons slot="start">
-      <ion-menu-button></ion-menu-button>
-    </ion-buttons>
-  </ion-toolbar>
+  </ion-item>
+ </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">

firm-app/src/app/tab3/tab3.page.scss

@@ -1,16 +1,27 @@
-ion-content {
-    --ion-background-color:  #f8f9fa;
+ion-avatar {
+  width: 50px; /* 或者你需要的任何尺寸 */
+   height: 50px; /* 保持宽高一致，避免变形 */
   }
-.image-container{
-    width: 50px; /* 或者你需要的任何尺寸 */
-     height: 50px; /* 保持宽高一致，避免变形 */
-    }
+  
+  ion-avatar img {
+   width: 100%; /* 让图片填满avatar */
+  height: auto; /* 保持图片比例 */
+  }
+
+   ion-header {
+    background: #f8f9fa; // 设置头部背景色
+  }    
 
-header-img {
-    width: 100%;
-    height: auto; /* 保持图片比例 */
-    border-radius: 50%; /* 可选：将图片设置为圆形 */
-    }
+    ion-toolbar{ 
+      ion-item{
+      border-radius: 8px; // 设置列表项圆角
+      margin: 5px 0; // 添加列表项的上下外边距
+    }   
+  }
+
+  ion-content{
+     background: #f8f9fa; // 设置背景色
+  }
     
       .chat-container {
         padding: 20px;

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonSegment, IonSegmentButton, IonLabel, IonIcon, IonMenuButton, IonAvatar, IonButton, IonInput, IonButtons } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonSegment, IonSegmentButton, IonLabel, IonIcon, IonMenuButton, IonAvatar, IonButton, IonInput, IonButtons, IonTab, IonTabButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { NgClass, NgFor } from '@angular/common';
 import { Router } from '@angular/router';
@@ -13,7 +13,7 @@ import { Router } from '@angular/router';
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonItem,IonSegment,IonSegmentButton,IonLabel,IonIcon,IonMenuButton,
-    IonAvatar,IonButton,NgFor,NgClass,IonButtons
+    IonAvatar,IonButton,NgFor,NgClass,IonButtons,IonTab,IonTabButton
   ]
 })
 export class Tab3Page {
@@ -54,8 +54,7 @@ export class Tab3Page {
  
   // 个性化推荐（模拟方法）
   personalizedRecommendations() {
-    // 这里可以添加逻辑来显示个性化推荐
-    this.router.navigate(['/tabs/page-personalized'])
+    this.router.navigate(['/tabs/personalized'])
   }
  
   // 剧情解读（模拟方法）

firm-app/src/app/tab4/tab4.page.html

@@ -1,21 +1,21 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-avatar slot="start" class="image-container">
-      <img src="/assets/img/3.png" alt="Your Image" class="header-image">
+    <ion-item lines="none">
+      <!-- 图片 -->
+      <ion-avatar slot="start">
+      <img src="/assets/img/3.png" alt="logo" >
     </ion-avatar>
-    <ion-buttons slot="start">
-      <ion-menu-button></ion-menu-button>
-    </ion-buttons>
-  </ion-toolbar>
+  </ion-item>
+ </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-grid>
     <ion-row>
-      <ion-col  class="ion-text-center">
-        <div class="avatar-container">
+      <ion-col>
+        <div class="avatar-container" >
         <ion-avatar>
-          <img src="assets/img/tx.jpg" alt="Avatar"class="avatar-img">
+          <img [src]="avatarUrl" alt="avatar" class="avatar">
         </ion-avatar>
         <ion-label class="username">{{ userInfo.username }}</ion-label>
       </div>
@@ -26,7 +26,7 @@
       <ion-col>
         <ion-item>
           <ion-label>历史记录</ion-label>
-          <ion-icon name="history" slot="end"></ion-icon>
+          <ion-icon name="footsteps-outline" slot="end"></ion-icon>
         </ion-item>
       </ion-col>
     </ion-row>
@@ -34,7 +34,7 @@
       <ion-col >
         <ion-item>
           <ion-label>收藏</ion-label>
-          <ion-icon name="bookmark" slot="end"></ion-icon>
+          <ion-icon name="bookmark-outline" slot="end"></ion-icon>
         </ion-item>
       </ion-col>
     </ion-row>
@@ -43,7 +43,7 @@
       <ion-col >
         <ion-item>
           <ion-label>隐私与安全设置</ion-label>
-          <ion-icon name="lock" slot="end"></ion-icon>
+          <ion-icon name="lock-closed-outline" slot="end"></ion-icon>
         </ion-item>
       </ion-col>
     </ion-row>
@@ -62,7 +62,7 @@
       <ion-col >
         <ion-item>
           <ion-label>通知与消息管理</ion-label>
-          <ion-icon name="bell" slot="end"></ion-icon>
+          <ion-icon slot="end" name="notifications-outline"></ion-icon>
         </ion-item>
       </ion-col>
     </ion-row>

firm-app/src/app/tab4/tab4.page.scss

@@ -1,46 +1,64 @@
-ion-content {
-    --ion-background-color:  #f8f9fa;
-  }
 ion-avatar {
-    width: 50px; /* 或者你需要的任何尺寸 */
-     height: 50px; /* 保持宽高一致，避免变形 */
-    }
-
-header-image {
-    width: 100%;
-    height: auto; /* 保持图片比例 */
-    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  width: 50px; /* 或者你需要的任何尺寸 */
+   height: 50px; /* 保持宽高一致，避免变形 */
+  }
+  
+  ion-avatar img {
+   width: 100%; /* 让图片填满avatar */
+  height: auto; /* 保持图片比例 */
+  }
+  
+  ion-header {
+    background: #f8f9fa; // 设置头部背景色
+   
+  }
+  
+    ion-item{
+      border-radius: 8px; // 设置列表项圆角
+      margin: 5px 0; // 添加列表项的上下外边距
     }
-    
 
-.avatar-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-      }
-      
-.avatar-img {
-        width: 50px; /* 或者您想要的任何尺寸 */
-        height: 50px; /* 或者您想要的任何尺寸 */
-        border-radius: 50%; /* 圆形头像 */
-      }
+  ion-content{
+     background: #f8f9fa; // 设置背景色
+  }
       
+  ion-col {
+    text-align: center;   /* 确保列内的内容居中（但这里可能由 .ion-text-center 类已经处理） */
+    .avatar-container {
+      display: flex;
+      flex-direction: column; /* 垂直排列子元素 */
+      align-items: center;    /* 垂直居中容器内的内容（对于图像来说可能不是必需的，但对于整体布局有帮助） */
+      margin-top: 20px;       /* 可选：为容器添加一些顶部间距 */
+
+      ion-avatar {
+        width: 100px;         /* 设置头像的宽度 */
+        height: 100px;        /* 设置头像的高度，与宽度相同以实现圆形 */
+        border-radius: 50%;   /* 将头像设置为圆形 */
+        overflow: hidden;     /* 确保图像不会溢出圆形框架 */
+
+        img {
+          width: 100%;        /* 让图像填满头像容器 */
+          height: auto; /* 保持图片比例 */
+          object-fit: cover;  /* 确保图像内容适应圆形框架，而不失真 */
+        }
+     }  
 
   .username {
     font-size: 40px;
     font-weight: bold;
     margin-top: 10px;
   }
-  
-  ion-item {
-    --ion-item-background-color: #ffffff;
-    --inner-border-width: 0;
-    margin: 2px 0;
-    padding: 2px;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-    text-align: left;
-    font-size: 15px;
-    width:100%;
-  }
-  
+     
+    }
+}
+    ion-col {
+      ion-item {
+        background-color: #ffffff;
+        margin: 2px 0;
+        padding: 2px;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+        text-align: left;
+        font-size: 15px;
+        width: 100%;
+      }
+    }

firm-app/src/app/tab4/tab4.page.ts

@@ -6,6 +6,8 @@ import { IonHeader, IonToolbar, IonTitle, IonContent,
      IonImg} from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import {  Router} from '@angular/router';
+import { addIcons } from 'ionicons';
+import { bookmarkOutline, footstepsOutline, helpCircle, lockClosedOutline, notificationsOutline, settings } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab4',
@@ -15,7 +17,7 @@ import {  Router} from '@angular/router';
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonItem,IonLabel,IonIcon,IonList,IonItemGroup,IonListHeader,
     IonGrid,IonAvatar,IonCol,IonRow,IonMenuButton,IonButtons,IonImg,
-    
+   
   ],
 })
 export class Tab4Page {
@@ -23,8 +25,12 @@ export class Tab4Page {
     username: 'yi',
     // 其他用户信息字段...
   };
-  constructor(private router: Router) {}
- 
+  avatarUrl: string = 'assets/img/tx.jpg'; // 默认头像路径
+  constructor(private router: Router) {
+      addIcons({helpCircle,notificationsOutline,settings,lockClosedOutline,bookmarkOutline,footstepsOutline});
+  
+  }
+
   editProfile() {
     // 跳转到编辑个人信息页面
     this.router.navigate(['/edit-profile']);

firm-app/src/app/tabs/tabs.routes.ts

@@ -10,6 +10,9 @@ export const routes: Routes = [
         path: 'tab1',
         loadComponent: () =>
           import('../tab1/tab1.page').then((m) => m.Tab1Page),
+        // loadComponent 是一个异步函数，用于动态加载组件
+        // 当这个路径被访问时，将会动态地导入 '../tab1/tab1.page' 模块
+        // 然后从这个模块中导出并返回 Tab1Page 组件
       },
       {
         path: 'tab2',
@@ -27,7 +30,7 @@ export const routes: Routes = [
           import('../tab4/tab4.page').then((m) => m.Tab4Page),
       },
       {
-        path: ' personalized',
+        path: 'personalized',
         loadComponent: () =>
           import('../page-personalized/page-personalized.component').then((m) => m.PagePersonalizedComponent),
       },