Merge branch 'master' of http://git.fmode.cn:3000/4u/workspace

.history/soul-app/src/app/app.component_20241210113940.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  standalone: true,
+  imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {
+  constructor() {}
+}

.history/soul-app/src/app/app.component_20241218204121.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { RouterModule, Routes } from '@angular/router';
+import { PagePsysurveyComponent } from './page-psysurvey/page-psysurvey.component'; // 替换为你的实际路径
+import { PagePublishsurveyComponent } from './page-publishsurvey/page-publishsurvey.component'; // 替换为你的实际路径
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'tabs/tab1', pathMatch: 'full' },
+  { path: 'tabs/tab1', component: PagePsysurveyComponent },
+  { path: 'tabs/publishsurvey', component: PagePublishsurveyComponent },
+  // 添加其他路由
+];
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  standalone: true,
+  imports: [IonApp, IonRouterOutlet],
+})
+export class AppComponent {
+  constructor() {}
+}

.history/soul-app/src/app/app.component_20241218211037.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { RouterModule, Routes,provideRouter } from '@angular/router';
+import { PagePsysurveyComponent } from './page-psysurvey/page-psysurvey.component'; // 替换为你的实际路径
+import { PagePublishsurveyComponent } from './page-publishsurvey/page-publishsurvey.component'; // 替换为你的实际路径
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'tabs/tab1', pathMatch: 'full' },
+  { path: 'tabs/tab1', component: PagePsysurveyComponent },
+  { path: 'tabs/publishsurvey', component: PagePublishsurveyComponent },
+  // 添加其他路由
+];
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  standalone: true,
+  imports: [IonApp, IonRouterOutlet, RouterModule],
+  providers: [provideRouter(routes)] 
+})
+
+export class AppComponent {
+  constructor() {}
+}

.history/soul-app/src/app/app.component_20241218211138.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { RouterModule, Routes,provideRouter } from '@angular/router';
+import { PagePsysurveyComponent } from './page-psysurvey/page-psysurvey.component'; // 替换为你的实际路径
+import { PagePublishsurveyComponent } from './page-publishsurvey/page-publishsurvey.component'; // 替换为你的实际路径
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'tabs/tab1', pathMatch: 'full' },
+  { path: 'tabs/tab1', component: PagePsysurveyComponent },
+  { path: 'tabs/publishsurvey', component: PagePublishsurveyComponent },
+  // 添加其他路由
+];
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  standalone: true,
+  imports: [IonApp, IonRouterOutlet, RouterModule],
+  
+})
+
+export class AppComponent {
+  constructor() {}
+}

.history/soul-app/src/app/app.component_20241218212534.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { RouterModule, Routes,provideRouter } from '@angular/router';
+import { PagePsysurveyComponent } from './page-psysurvey/page-psysurvey.component'; // 替换为你的实际路径
+import { PagePublishsurveyComponent } from './page-publishsurvey/page-publishsurvey.component'; // 替换为你的实际路径
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'tabs/tab1', pathMatch: 'full' },
+  { path: 'tabs/tab1', component: PagePsysurveyComponent },
+  { path: 'tabs/publishsurvey', component: PagePublishsurveyComponent },
+  // 添加其他路由
+];
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  standalone: true,
+  imports: [IonApp, IonRouterOutlet, RouterModule],
+ 
+})
+
+export class AppComponent {
+  constructor() {}
+}

.history/soul-app/src/app/page-consult/page-consult.component_20241217151054.html

@@ -0,0 +1,35 @@
+
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理咨询
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <h1>类型</h1>
+    <ion-input [value]="leixing" (ionInput)="leixingInput($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>

soul-app/src/app/page-consult/page-consult.component.scss → .history/soul-app/src/app/page-consult/page-consult.component_20241217151331.scss

@@ -55,4 +55,7 @@ ion-input, ion-textarea, ion-button, div.response-msg, fm-markdown-preview {
     left: 65px;
     margin: auto;
     top: 10px;
-  }
+  }
+  ion-toolbar {
+    margin: auto;
+    }

.history/soul-app/src/app/page-consult/page-consult.component_20241217151411.scss

@@ -0,0 +1,54 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+  }
+/* 设置头部标题样式 */
+h1 {
+    color: #333333;
+    text-align: center;
+    margin: 20px 0;
+}
+ 
+/* 输入框和文本域的样式 */
+ion-input, ion-textarea {
+    width: 100%;
+    margin: 0 auto;
+    padding: 10px;
+    border: 1px solid #cccccc0c;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+ 
+/* 按钮样式 */
+ion-button {
+    font-size: 15px; /* 增大字体大小 */
+  margin-top: 8px; /* 上间距，仅在需要时添加 */
+  text-transform: none; /* 按钮文字不变形 */
+  height: 35px;
+}
+ 
+/* 特别为Markdown预览设置样式 */
+fm-markdown-preview {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333333;
+}
+ 
+/* 可选：增加一些过渡效果 */
+ion-input, ion-textarea, ion-button, div.response-msg, fm-markdown-preview {
+    transition: all 0.3s ease;
+}
+.title-text{
+    position: absolute;
+    display: flex;
+    left: 65px;
+    margin: auto;
+    top: 10px;
+  }
+  ion-toolbar {
+    margin: auto;
+    }

.history/soul-app/src/app/page-consult/page-consult.component_20241217151440.scss

@@ -0,0 +1,54 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+  }
+/* 设置头部标题样式 */
+h1 {
+    color: #333333;
+    text-align: center;
+    margin: 20px 0;
+}
+ 
+/* 输入框和文本域的样式 */
+ion-input, ion-textarea {
+    width: 100%;
+    margin: 0 auto;
+    padding: 10px;
+    border: 1px solid #cccccc0c;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+ 
+/* 按钮样式 */
+ion-button {
+    font-size: 15px; /* 增大字体大小 */
+  margin-top: 8px; /* 上间距，仅在需要时添加 */
+  text-transform: none; /* 按钮文字不变形 */
+  height: 35px;
+}
+ 
+/* 特别为Markdown预览设置样式 */
+fm-markdown-preview {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333333;
+}
+ 
+/* 可选：增加一些过渡效果 */
+ion-input, ion-textarea, ion-button, div.response-msg, fm-markdown-preview {
+    transition: all 0.3s ease;
+}
+.title-text{
+    position: absolute;
+    display: flex;
+    left: 165px;
+    margin: auto;
+    top: 10px;
+  }
+  ion-toolbar {
+    margin: auto;
+    }

.history/soul-app/src/app/page-consult/page-consult.component_20241217151448.scss

@@ -0,0 +1,54 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+  }
+/* 设置头部标题样式 */
+h1 {
+    color: #333333;
+    text-align: center;
+    margin: 20px 0;
+}
+ 
+/* 输入框和文本域的样式 */
+ion-input, ion-textarea {
+    width: 100%;
+    margin: 0 auto;
+    padding: 10px;
+    border: 1px solid #cccccc0c;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+ 
+/* 按钮样式 */
+ion-button {
+    font-size: 15px; /* 增大字体大小 */
+  margin-top: 8px; /* 上间距，仅在需要时添加 */
+  text-transform: none; /* 按钮文字不变形 */
+  height: 35px;
+}
+ 
+/* 特别为Markdown预览设置样式 */
+fm-markdown-preview {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333333;
+}
+ 
+/* 可选：增加一些过渡效果 */
+ion-input, ion-textarea, ion-button, div.response-msg, fm-markdown-preview {
+    transition: all 0.3s ease;
+}
+.title-text{
+    position: absolute;
+    display: flex;
+    left: 125px;
+    margin: auto;
+    top: 10px;
+  }
+  ion-toolbar {
+    margin: auto;
+    }

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217163938.html

@@ -0,0 +1,3 @@
+<p>
+  page-psysurvey works!
+</p>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217163938.ts

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

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217164909.scss

@@ -0,0 +1,39 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 65px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217164930.scss

@@ -0,0 +1,39 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217164931.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217165144.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader, IonTitle, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,ExploreContainerComponent,
+      IonList,IonListHeader,IonItem,
+      IonLabel,IonIcon,IonButton,
+      IonInput,IonSearchbar,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241217165208.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader, IonTitle, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,
+      IonLabel,IonIcon,IonButton,
+      IonInput,IonSearchbar,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218183550.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218183617.html

@@ -0,0 +1,41 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>热门话题</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let topic of topics">
+            <ion-label>
+              <h2>{{ topic.title }}</h2>
+              <p>{{ topic.description }}</p>
+            </ion-label>
+            <ion-buttons slot="end">
+            <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">
+              <span class="button-text">查看详情</span>
+            </ion-button>
+          </ion-buttons>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218183929.html

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218184007.html

@@ -0,0 +1,29 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>热门话题</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218184013.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,
+      IonLabel,IonIcon,IonButton,IonCardContent,
+      IonInput,IonSearchbar,IonCard,IonCardHeader,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218184057.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,IonCardTitle,
+      IonLabel,IonIcon,IonButton,IonCardContent,
+      IonInput,IonSearchbar,IonCard,IonCardHeader,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218184947.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>问卷通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>发布问卷</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218193359.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>心理问卷调查通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <div  style="display: flex; justify-content: center; margin-top: auto;">
+    <ion-button  expand="full">
+      发布问卷
+    </ion-button>
+  </div>
+
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218193717.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,IonCardTitle,
+      IonLabel,IonIcon,IonButton,IonCardContent,
+      IonInput,IonSearchbar,IonCard,IonCardHeader,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+   goPublishSurvey(){
+    this.router.navigate(['tabs/publishsurvey'])
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218193720.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>心理问卷调查通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <div  style="display: flex; justify-content: center; margin-top: auto;">
+    <ion-button (click)="goPublishSurvey()" expand="full">
+      发布问卷
+    </ion-button>
+  </div>
+
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218193742.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>心理问卷调查通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <div  style="display: flex; justify-content: center; margin-top: auto;">
+    <ion-button (click)="goPublishSurvey()" expand="full">
+      发布问卷
+    </ion-button>
+  </div>
+
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218194414.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>心理问卷调查通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  
+    <ion-button class="publish" (click)="goPublishSurvey()" expand="full">
+      发布问卷
+    </ion-button>
+  
+
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218194849.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,IonCardTitle,
+      IonLabel,IonIcon,IonButton,IonCardContent,
+      IonInput,IonSearchbar,IonCard,IonCardHeader,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+   goPublishSurvey(){
+    this.router.navigate(['tabs/page-publishsurvey'])
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218195200.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218203144.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>心理问卷调查通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <div  style="display: flex; justify-content: center; margin-top: auto;">
+    <ion-button (click)="goPublishSurvey()" expand="full">
+      发布问卷
+    </ion-button>
+  </div>
+
+
+</ion-content>

.history/soul-app/src/app/page-psysurvey/page-psysurvey.component_20241218205727.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,IonCardTitle,
+      IonLabel,IonIcon,IonButton,IonCardContent,
+      IonInput,IonSearchbar,IonCard,IonCardHeader,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+   goPublishSurvey(){
+    this.router.navigate(['tabs/publishsurvey'])
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218193709.html

@@ -0,0 +1,3 @@
+<p>
+  page-publishsurvey works!
+</p>

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218193709.ts

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

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218195206.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218195308.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-page-publishsurvey',
+  templateUrl: './page-publishsurvey.component.html',
+  styleUrls: ['./page-publishsurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+    IonList,IonListHeader,IonItem,IonCardTitle,
+    IonLabel,IonIcon,IonButton,IonCardContent,
+    IonInput,IonSearchbar,IonCard,IonCardHeader,
+    CommonModule
+  ]
+})
+export class PagePublishsurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218195312.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218195408.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        发布问卷
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218201016.html

@@ -0,0 +1,63 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        发布问卷
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-segment [(ngModel)]="category" (ionChange)="onCategoryChange()">
+    <ion-segment-button value="school">
+      学校
+    </ion-segment-button>
+    <ion-segment-button value="society">
+      社会
+    </ion-segment-button>
+  </ion-segment>
+
+  <div *ngIf="category === 'school'">
+    <ion-item>
+      <ion-label position="floating">问卷标题</ion-label>
+      <ion-input [(ngModel)]="surveyTitle"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">问卷链接</ion-label>
+      <ion-input [(ngModel)]="surveyLink"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>面向对象</ion-label>
+      <ion-select [(ngModel)]="targetAudience">
+        <ion-select-option value="all">全校学生</ion-select-option>
+        <ion-select-option value="software">软件学院</ion-select-option>
+        <ion-select-option value="music">音乐学院</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-button expand="full" (click)="publishSurvey()">发布问卷</ion-button>
+  </div>
+
+  <div *ngIf="category === 'society'">
+    <!-- 社会问卷设置格式 -->
+    <ion-item>
+      <ion-label position="floating">社会问卷标题</ion-label>
+      <ion-input [(ngModel)]="societySurveyTitle"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">社会问卷链接</ion-label>
+      <ion-input [(ngModel)]="societySurveyLink"></ion-input>
+    </ion-item>
+
+    <ion-button expand="full" (click)="publishSocietySurvey()">发布社会问卷</ion-button>
+  </div>
+</ion-content>

.history/soul-app/src/app/page-publishsurvey/page-publishsurvey.component_20241218203156.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit,NgModule } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { CommonModule } from '@angular/common';
+  import { BrowserModule } from '@angular/platform-browser';
+  import { FormsModule } from '@angular/forms';
+  import { IonicModule } from '@ionic/angular';
+
+
+@Component({
+  selector: 'app-page-publishsurvey',
+  templateUrl: './page-publishsurvey.component.html',
+  styleUrls: ['./page-publishsurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+    IonList,IonListHeader,IonItem,IonCardTitle,IonicModule,
+    IonLabel,IonIcon,IonButton,IonCardContent,
+    IonInput,IonSearchbar,IonCard,IonCardHeader,
+    CommonModule,FormsModule,BrowserModule
+  ]
+})
+
+
+export class PagePublishsurveyComponent  implements OnInit {
+  category: string = 'school'; // 默认类别
+  surveyTitle: string = '';
+  surveyLink: string = '';
+  targetAudience: string = 'all'; // 默认面向对象
+  societySurveyTitle: string = '';
+  societySurveyLink: string = '';
+
+  onCategoryChange() {
+    console.log(`当前选择的类别: ${this.category}`);
+  }
+
+  publishSurvey() {
+    console.log('发布学校问卷:');
+    console.log(`标题: ${this.surveyTitle}`);
+    console.log(`链接: ${this.surveyLink}`);
+    console.log(`面向对象: ${this.targetAudience}`);
+    // 这里可以添加逻辑将问卷发布到后端或其他处理
+  }
+
+  publishSocietySurvey() {
+    console.log('发布社会问卷:');
+    console.log(`标题: ${this.societySurveyTitle}`);
+    console.log(`链接: ${this.societySurveyLink}`);
+    // 这里可以添加逻辑将问卷发布到后端或其他处理
+  }
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/tab1/tab1.page_20241210113940.html

@@ -0,0 +1,85 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241210113940.scss

@@ -0,0 +1,69 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }

.history/soul-app/src/app/tab1/tab1.page_20241210113940.ts

@@ -0,0 +1,116 @@
+import { Component,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonLabel, IonList,
+   IonItem,IonIcon,IonInput,IonSearchbar} from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
+import {  TopicDetailComponent } from '../topic-detail/topic-detail.component';
+import { Router } from '@angular/router';
+import { TopicDetail2Component } from '../topic-detail2/topic-detail2.component';
+import { TopicDetail3Component } from '../topic-detail3/topic-detail3.component';
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,ExploreContainerComponent,
+    IonButtons,IonButton,IonIcon,
+    IonCard,IonCardContent,IonCardHeader,
+    IonLabel,IonList,IonItem,IonAvatar,
+    IonInput,IonSearchbar,
+    CommonModule,
+    TopicDetailComponent,TopicDetail2Component,TopicDetail3Component
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Tab1Page {
+  onSearch(event: any) {
+    const searchTerm = event.target.value; // 获取用户输入的搜索内容
+    console.log('搜索内容:', searchTerm);
+    // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
+  }
+  consultants = [
+    {
+      name: '智能心理咨询师',
+      avatar: '/assets/img/2.png',
+      fields: ['焦虑', '抑郁','压力','...']
+    }
+  ];
+  topics = [
+    {
+      id: 1,
+      title: '如何管理焦虑情绪',
+      description: '了解焦虑的来源及应对策略',
+      detailRoute: 'topic-detail',
+    },
+    {
+      id: 2,
+      title: '克服抑郁的有效方法',
+      description: '探索抑郁症的应对技巧',
+      detailRoute: 'topic-detail2'
+    },
+    {
+      id: 3,
+      title: '提升自信心的技巧',
+      description: '学习如何建立自信',
+      detailRoute: 'topic-detail2'
+    }
+  ];
+  reviews = [
+    {
+      avatar: '/assets/img/4.png',
+      content: '这款APP真的帮助了我，感谢陪聊师！',
+      rating: 4
+    },
+    {
+      avatar: '/assets/img/5.png',
+      content: '非常实用的心理咨询平台！',
+      rating: 5
+    },
+    {
+      avatar: '/assets/img/6.png',
+      content: '我喜欢这里的热门话题！',
+      rating: 4
+    }
+  ];
+
+  constructor(private router: Router) {
+    // 其他构造函数代码
+  }
+  
+  clickToConsult() {
+    // 点击咨询
+    this.router.navigate(['tabs/page-consult'])
+  }
+  
+  viewDetails(topicId: number): void {
+    let route: string;
+    switch (topicId) {
+      case 1:
+        route = 'topic-detail';
+        break;
+      case 2:
+        route = 'topic-detail2';
+        break;
+      case 3:
+        route = 'topic-detail3';
+        break;
+      default:
+        route = 'topic-detail'; // 默认路由
+    }
+    // 导航到指定的路由，并可以传递参数（如果需要）
+    this.router.navigate([`tabs/${route}`, { id: topicId }]);
+  }
+
+  evaluate() {
+    // 处理点击评价的逻辑
+    console.log('用户点击了“进入评价”按钮');
+    // 您可以导航到一个新的页面来让用户填写评价，或者显示一个模态框等。
+  }
+  review: any = { rating: 5 };  // 示例数据
+ 
+  // 创建一个方法，用于生成填充了 null 的数组
+  createFilledArray(length: number): any[] {
+    return Array(length).fill(null);
+  }
+  ngOnInit() {}
+}

.history/soul-app/src/app/tab1/tab1.page_20241217154644.html

@@ -0,0 +1,85 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<!-- <ion-content [fullscreen]="true">
+  <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217154659.html

@@ -0,0 +1,85 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217161345.scss

@@ -0,0 +1,74 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+  }

.history/soul-app/src/app/tab1/tab1.page_20241217161348.html

@@ -0,0 +1,97 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+
+      <!-- 添加功能方块按钮 -->
+      <ion-toolbar color="light" class="button-toolbar">
+        <ion-buttons slot="start">
+          <ion-button fill="outline" (click)="openPsychologicalSurvey()">心理普查</ion-button>
+          <ion-button fill="outline" (click)="openDriftBottle()">漂流瓶</ion-button>
+          <ion-button fill="outline" (click)="openHeartAssociation()">心协</ion-button>
+          <ion-button fill="outline" (click)="openMore()">更多</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      
+    </ion-card-content>
+  </ion-card>
+</section>
+
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217161419.html

@@ -0,0 +1,97 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+
+      <!-- 添加功能方块按钮 -->
+      <ion-toolbar color="light" class="button-toolbar">
+        <ion-buttons slot="start">
+          <ion-button fill="outline" (click)="">心理普查</ion-button>
+          <ion-button fill="outline" (click)="">漂流瓶</ion-button>
+          <ion-button fill="outline" (click)="">心协</ion-button>
+          <ion-button fill="outline" (click)="">更多</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      
+    </ion-card-content>
+  </ion-card>
+</section>
+
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217161441.html

@@ -0,0 +1,97 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+
+      <!-- 添加功能方块按钮 -->
+      <ion-toolbar color="light" class="button-toolbar">
+        <ion-buttons slot="start">
+          <ion-button fill="outline" >心理普查</ion-button>
+          <ion-button fill="outline" >漂流瓶</ion-button>
+          <ion-button fill="outline" >心协</ion-button>
+          <ion-button fill="outline" >更多</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      
+    </ion-card-content>
+  </ion-card>
+</section>
+
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217161528.html

@@ -0,0 +1,85 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217161745.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px;">
+  <ion-buttons slot="start">
+    <ion-button fill="outline" >心理普查</ion-button>
+    <ion-button fill="outline">漂流瓶</ion-button>
+    <ion-button fill="outline" >心协</ion-button>
+    <ion-button fill="outline" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217162052.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  
+  

.history/soul-app/src/app/tab1/tab1.page_20241217162053.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;" >
+  <ion-buttons slot="start">
+    <ion-button fill="outline" >心理普查</ion-button>
+    <ion-button fill="outline">漂流瓶</ion-button>
+    <ion-button fill="outline" >心协</ion-button>
+    <ion-button fill="outline" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217162357.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" >心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217162448.scss

@@ -0,0 +1,81 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163018.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" >心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217163113.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(131, 92, 40);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163124.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(48, 102, 211);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163141.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(240, 222, 143);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163152.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(180, 192, 232);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163204.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(108, 116, 144);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163221.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(88, 98, 133);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217163231.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(42, 50, 77);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217164037.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+<!-- (click)="PsySurvey()" -->
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" >心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217164522.ts

@@ -0,0 +1,116 @@
+import { Component,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonLabel, IonList,
+   IonItem,IonIcon,IonInput,IonSearchbar} from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
+import {  TopicDetailComponent } from '../topic-detail/topic-detail.component';
+import { Router } from '@angular/router';
+import { TopicDetail2Component } from '../topic-detail2/topic-detail2.component';
+import { TopicDetail3Component } from '../topic-detail3/topic-detail3.component';
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,ExploreContainerComponent,
+    IonButtons,IonButton,IonIcon,
+    IonCard,IonCardContent,IonCardHeader,
+    IonLabel,IonList,IonItem,IonAvatar,
+    IonInput,IonSearchbar,
+    CommonModule,
+    TopicDetailComponent,TopicDetail2Component,TopicDetail3Component
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Tab1Page {
+  onSearch(event: any) {
+    const searchTerm = event.target.value; // 获取用户输入的搜索内容
+    console.log('搜索内容:', searchTerm);
+    // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
+  }
+  consultants = [
+    {
+      name: '智能心理咨询师',
+      avatar: '/assets/img/2.png',
+      fields: ['焦虑', '抑郁','压力','...']
+    }
+  ];
+  topics = [
+    {
+      id: 1,
+      title: '如何管理焦虑情绪',
+      description: '了解焦虑的来源及应对策略',
+      detailRoute: 'topic-detail',
+    },
+    {
+      id: 2,
+      title: '克服抑郁的有效方法',
+      description: '探索抑郁症的应对技巧',
+      detailRoute: 'topic-detail2'
+    },
+    {
+      id: 3,
+      title: '提升自信心的技巧',
+      description: '学习如何建立自信',
+      detailRoute: 'topic-detail2'
+    }
+  ];
+  reviews = [
+    {
+      avatar: '/assets/img/4.png',
+      content: '这款APP真的帮助了我，感谢陪聊师！',
+      rating: 4
+    },
+    {
+      avatar: '/assets/img/5.png',
+      content: '非常实用的心理咨询平台！',
+      rating: 5
+    },
+    {
+      avatar: '/assets/img/6.png',
+      content: '我喜欢这里的热门话题！',
+      rating: 4
+    }
+  ];
+
+  constructor(private router: Router) {
+    // 其他构造函数代码
+  }
+  
+  clickToPsysurvey() {
+    
+    this.router.navigate(['tabs/page-psysurvey'])
+  }
+  
+  viewDetails(topicId: number): void {
+    let route: string;
+    switch (topicId) {
+      case 1:
+        route = 'topic-detail';
+        break;
+      case 2:
+        route = 'topic-detail2';
+        break;
+      case 3:
+        route = 'topic-detail3';
+        break;
+      default:
+        route = 'topic-detail'; // 默认路由
+    }
+    // 导航到指定的路由，并可以传递参数（如果需要）
+    this.router.navigate([`tabs/${route}`, { id: topicId }]);
+  }
+
+  evaluate() {
+    // 处理点击评价的逻辑
+    console.log('用户点击了“进入评价”按钮');
+    // 您可以导航到一个新的页面来让用户填写评价，或者显示一个模态框等。
+  }
+  review: any = { rating: 5 };  // 示例数据
+ 
+  // 创建一个方法，用于生成填充了 null 的数组
+  createFilledArray(length: number): any[] {
+    return Array(length).fill(null);
+  }
+  ngOnInit() {}
+}

.history/soul-app/src/app/tab1/tab1.page_20241217164526.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="PsySurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217164542.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="Psysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217164738.html

@@ -0,0 +1,94 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- <section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>心理咨询</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let consultant of consultants">
+          <ion-avatar slot="start">
+            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ consultant.name }}</h2>
+            <p>{{ consultant.fields.join(', ') }}</p>
+          </ion-label>
+          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section> -->
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217164740.ts

@@ -0,0 +1,115 @@
+import { Component,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonLabel, IonList,
+   IonItem,IonIcon,IonInput,IonSearchbar} from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
+import {  TopicDetailComponent } from '../topic-detail/topic-detail.component';
+import { Router } from '@angular/router';
+import { TopicDetail2Component } from '../topic-detail2/topic-detail2.component';
+import { TopicDetail3Component } from '../topic-detail3/topic-detail3.component';
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,ExploreContainerComponent,
+    IonButtons,IonButton,IonIcon,
+    IonCard,IonCardContent,IonCardHeader,
+    IonLabel,IonList,IonItem,IonAvatar,
+    IonInput,IonSearchbar,
+    CommonModule,
+    TopicDetailComponent,TopicDetail2Component,TopicDetail3Component
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Tab1Page {
+  onSearch(event: any) {
+    const searchTerm = event.target.value; // 获取用户输入的搜索内容
+    console.log('搜索内容:', searchTerm);
+    // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
+  }
+  consultants = [
+    {
+      name: '智能心理咨询师',
+      avatar: '/assets/img/2.png',
+      fields: ['焦虑', '抑郁','压力','...']
+    }
+  ];
+  topics = [
+    {
+      id: 1,
+      title: '如何管理焦虑情绪',
+      description: '了解焦虑的来源及应对策略',
+      detailRoute: 'topic-detail',
+    },
+    {
+      id: 2,
+      title: '克服抑郁的有效方法',
+      description: '探索抑郁症的应对技巧',
+      detailRoute: 'topic-detail2'
+    },
+    {
+      id: 3,
+      title: '提升自信心的技巧',
+      description: '学习如何建立自信',
+      detailRoute: 'topic-detail2'
+    }
+  ];
+  reviews = [
+    {
+      avatar: '/assets/img/4.png',
+      content: '这款APP真的帮助了我，感谢陪聊师！',
+      rating: 4
+    },
+    {
+      avatar: '/assets/img/5.png',
+      content: '非常实用的心理咨询平台！',
+      rating: 5
+    },
+    {
+      avatar: '/assets/img/6.png',
+      content: '我喜欢这里的热门话题！',
+      rating: 4
+    }
+  ];
+
+  constructor(private router: Router) {
+    // 其他构造函数代码
+  }
+  
+  goPsysurvey() {
+    this.router.navigate(['tabs/page-psysurvey'])
+  }
+  
+  viewDetails(topicId: number): void {
+    let route: string;
+    switch (topicId) {
+      case 1:
+        route = 'topic-detail';
+        break;
+      case 2:
+        route = 'topic-detail2';
+        break;
+      case 3:
+        route = 'topic-detail3';
+        break;
+      default:
+        route = 'topic-detail'; // 默认路由
+    }
+    // 导航到指定的路由，并可以传递参数（如果需要）
+    this.router.navigate([`tabs/${route}`, { id: topicId }]);
+  }
+
+  evaluate() {
+    // 处理点击评价的逻辑
+    console.log('用户点击了“进入评价”按钮');
+    // 您可以导航到一个新的页面来让用户填写评价，或者显示一个模态框等。
+  }
+  review: any = { rating: 5 };  // 示例数据
+ 
+  // 创建一个方法，用于生成填充了 null 的数组
+  createFilledArray(length: number): any[] {
+    return Array(length).fill(null);
+  }
+  ngOnInit() {}
+}

.history/soul-app/src/app/tab1/tab1.page_20241217170832.html

@@ -0,0 +1,73 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary"  (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217170837.html

@@ -0,0 +1,73 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">查看详情</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217171134.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 0px; /* 按钮之间的间距 */
+    color: rgb(42, 50, 77);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217171143.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    
+    color: rgb(42, 50, 77);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217171155.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(42, 50, 77);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217171209.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(42, 50, 77);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217171412.html

@@ -0,0 +1,73 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)"><span>查看详情</span></ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217171413.scss

@@ -0,0 +1,82 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #f9f9f9; /* 设置内容背景色 */
+  }
+  
+  /* 设置卡片的样式 */
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(42, 50, 77);
+}
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    padding: 10px; /* 内边距 */
+    border-radius: 4px; /* 圆角 */
+    font-size: 16px; /* 字体大小 */
+  }
+  
+  /* 设置用户评价星星的样式 */
+  ion-icon[name="star"] {
+    color: gold; /* 星星颜色 */
+    font-size: 1.2rem; /* 星星大小 */
+  }
+  ion-card-header {
+    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
+    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
+    position: relative; /* 设置相对定位 */
+  }
+   
+  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
+  ion-toolbar {
+    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
+  }
+   
+  /* 确保按钮的文本颜色是白色 */
+  .button-text {
+    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
+    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
+       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
+  }
+
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+   
+  ion-avatar img {
+    width: 100%; /* 让图片填满avatar */
+    height: auto; /* 保持图片比例 */
+  }
+  .header-image {
+    width: 100%;
+    height: auto; /* 保持图片比例 */
+    border-radius: 50%; /* 可选：将图片设置为圆形 */
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

.history/soul-app/src/app/tab1/tab1.page_20241217171434.html

@@ -0,0 +1,73 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)"><span class="button-text">查看详情</span></ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tab1/tab1.page_20241217171521.html

@@ -0,0 +1,77 @@
+<ion-header [translucent]="true">
+  <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>
+ 
+      <!-- 搜索框 -->
+      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>热门话题</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let topic of topics">
+          <ion-label>
+            <h2>{{ topic.title }}</h2>
+            <p>{{ topic.description }}</p>
+          </ion-label>
+          <ion-buttons slot="end">
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">
+            <span class="button-text">查看详情</span>
+          </ion-button>
+        </ion-buttons>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<section>
+  <ion-card>
+    <ion-card-header>
+      <ion-toolbar>
+      <ion-card-title>用户评价</ion-card-title>
+      <ion-buttons slot="end">
+        <ion-button (click)="evaluate()" color="primary" fill="solid">
+          <span class="button-text">进入评价</span>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let review of reviews">
+          <ion-avatar slot="start">
+            <img [src]="review.avatar" alt="用户头像"/>
+          </ion-avatar>
+          <ion-label>
+            <p>{{ review.content }}</p>
+            <!--<ion-icon name="star" *ngFor="let star of [].constructor(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>-->
+            <ion-icon name="star" *ngFor="let star of createFilledArray(review.rating); let i = index" [attr.aria-hidden]="true"></ion-icon>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</section>
+</ion-content>

.history/soul-app/src/app/tabs/tabs.routes_20241217164136.ts

@@ -0,0 +1,57 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+
+export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () =>
+          import('../tab3/tab3.page').then((m) => m.Tab3Page),
+      },
+      {
+        path: 'topic-detail',
+        loadComponent: () =>
+          import('../topic-detail/topic-detail.component').then((m) => m.TopicDetailComponent),
+      },
+      {
+        path: 'topic-detail2',
+        loadComponent: () =>
+          import('../topic-detail2/topic-detail2.component').then((m) => m.TopicDetail2Component),
+      },
+      {
+        path: 'topic-detail3',
+        loadComponent: () =>
+          import('../topic-detail3/topic-detail3.component').then((m) => m.TopicDetail3Component),
+      },
+     
+      {
+        path: 'consult-picture',
+        loadComponent: () =>
+          import('../consult-picture/consult-picture.component').then((m) => m.ConsultPictureComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];

.history/soul-app/src/app/tabs/tabs.routes_20241217164347.ts

@@ -0,0 +1,61 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+
+export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () =>
+          import('../tab3/tab3.page').then((m) => m.Tab3Page),
+      },
+      {
+        path: 'topic-detail',
+        loadComponent: () =>
+          import('../topic-detail/topic-detail.component').then((m) => m.TopicDetailComponent),
+      },
+      {
+        path: 'topic-detail2',
+        loadComponent: () =>
+          import('../topic-detail2/topic-detail2.component').then((m) => m.TopicDetail2Component),
+      },
+      {
+        path: 'topic-detail3',
+        loadComponent: () =>
+          import('../topic-detail3/topic-detail3.component').then((m) => m.TopicDetail3Component),
+      },
+      {
+        path: 'page-psysurvey',
+        loadComponent: () =>
+          import('../page-psysurvey/page-psysurvey.component').then((m) => m.PagePsysurveyComponent),
+      },
+      {
+        path: 'consult-picture',
+        loadComponent: () =>
+          import('../consult-picture/consult-picture.component').then((m) => m.ConsultPictureComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];

.history/soul-app/src/app/tabs/tabs.routes_20241218194012.ts

@@ -0,0 +1,66 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+
+export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () =>
+          import('../tab3/tab3.page').then((m) => m.Tab3Page),
+      },
+      {
+        path: 'topic-detail',
+        loadComponent: () =>
+          import('../topic-detail/topic-detail.component').then((m) => m.TopicDetailComponent),
+      },
+      {
+        path: 'topic-detail2',
+        loadComponent: () =>
+          import('../topic-detail2/topic-detail2.component').then((m) => m.TopicDetail2Component),
+      },
+      {
+        path: 'topic-detail3',
+        loadComponent: () =>
+          import('../topic-detail3/topic-detail3.component').then((m) => m.TopicDetail3Component),
+      },
+      {
+        path: 'page-psysurvey',
+        loadComponent: () =>
+          import('../page-psysurvey/page-psysurvey.component').then((m) => m.PagePsysurveyComponent),
+      },
+      {
+        path: 'page-publishsurvey',
+        loadComponent: () =>
+          import('../page-publishsurvey/page-publishsurvey.component').then((m) => m.PagePublishsurveyComponent),
+      },
+      {
+        path: 'consult-picture',
+        loadComponent: () =>
+          import('../consult-picture/consult-picture.component').then((m) => m.ConsultPictureComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full',
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];

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

@@ -1,12 +1,25 @@
 import { Component } from '@angular/core';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { RouterModule, Routes,provideRouter } from '@angular/router';
+import { PagePsysurveyComponent } from './page-psysurvey/page-psysurvey.component'; // 替换为你的实际路径
+import { PagePublishsurveyComponent } from './page-publishsurvey/page-publishsurvey.component'; // 替换为你的实际路径
+
+
+const routes: Routes = [
+  { path: '', redirectTo: 'tabs/tab1', pathMatch: 'full' },
+  { path: 'tabs/tab1', component: PagePsysurveyComponent },
+  { path: 'tabs/publishsurvey', component: PagePublishsurveyComponent },
+  // 添加其他路由
+];
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   standalone: true,
-  imports: [IonApp, IonRouterOutlet],
+  imports: [IonApp, IonRouterOutlet, RouterModule],
+ 
 })
+
 export class AppComponent {
   constructor() {}
 }

soul-app/src/app/page-consult/page-consult.component.ts

@@ -1,63 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
-  IonTextarea,IonInput,IonIcon} from '@ionic/angular/standalone';
-  /** 引用：从fmode-ng库引用FmodeChatCompletion类 */
-import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-page-consult',
-  templateUrl: './page-consult.component.html',
-  styleUrls: ['./page-consult.component.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
-    IonTextarea,IonInput,IonIcon,
-    MarkdownPreviewModule
-    ],
-})
-
-export class PageConsultComponent  implements OnInit {
-  constructor(private router: Router) {}
-  ngOnInit(): void {
-  }
-  // 用户输入提示词
-  leixing:string = "  心理问题类型:"
-  leixingInput(ev:any){
-    this.leixing = ev.detail.value;
-  }
-  // 用户输入提示词
-   userPrompt:string = "请详细描述你的情况:"
-  promptInput(ev:any){
-    this.userPrompt = ev.detail.value;
-  }
-  // 属性：组件内用于展示消息内容的变量
-  responseMsg:any = ""
-  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
-  isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
-  sendMessage(){
-    console.log("create")
-
-    let PromptTemplate = `
-    您作为一名专业的${this.leixing}智能心理咨询师，请您根据用户描述的情况，给出初步的判断，并给出一些详细的建议。'
-    以下是用户的口述：${this.userPrompt}
-    `
-
-    let completion = new FmodeChatCompletion([
-      {role:"system",content:""},
-      {role:"user",content:this.userPrompt}
-    ])
-    completion.sendCompletion().subscribe((message:any)=>{
-      // 打印消息体
-      console.log(message.content)
-      // 赋值消息内容给组件内属性
-      this.responseMsg = message.content
-      if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
-        this.isComplete = true
-      }
-    })
-  }
-
-goTab1(){
- this.router.navigate(['tabs/tab1']);
-}
-}

soul-app/src/app/page-psysurvey/page-psysurvey.component.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>心理问卷调查通知</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <div  style="display: flex; justify-content: center; margin-top: auto;">
+    <ion-button (click)="goPublishSurvey()" expand="full">
+      发布问卷
+    </ion-button>
+  </div>
+
+
+</ion-content>

soul-app/src/app/page-psysurvey/page-psysurvey.component.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

soul-app/src/app/page-consult/page-consult.component.spec.ts → soul-app/src/app/page-psysurvey/page-psysurvey.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { PageConsultComponent } from './page-consult.component';
+import { PagePsysurveyComponent } from './page-psysurvey.component';
 
-describe('PageConsultComponent', () => {
-  let component: PageConsultComponent;
-  let fixture: ComponentFixture<PageConsultComponent>;
+describe('PagePsysurveyComponent', () => {
+  let component: PagePsysurveyComponent;
+  let fixture: ComponentFixture<PagePsysurveyComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [PageConsultComponent],
+      imports: [PagePsysurveyComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(PageConsultComponent);
+    fixture = TestBed.createComponent(PagePsysurveyComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

soul-app/src/app/page-psysurvey/page-psysurvey.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-psysurvey',
+  templateUrl: './page-psysurvey.component.html',
+  styleUrls: ['./page-psysurvey.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+      IonList,IonListHeader,IonItem,IonCardTitle,
+      IonLabel,IonIcon,IonButton,IonCardContent,
+      IonInput,IonSearchbar,IonCard,IonCardHeader,
+      CommonModule
+    ]
+})
+export class PagePsysurveyComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+   goPublishSurvey(){
+    this.router.navigate(['tabs/publishsurvey'])
+   }
+  ngOnInit() {}
+
+}

soul-app/src/app/page-publishsurvey/page-publishsurvey.component.html

@@ -0,0 +1,63 @@
+<!-- <ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        发布问卷
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header> -->
+
+<ion-content [fullscreen]="true">
+  <ion-segment [(ngModel)]="category" (ionChange)="onCategoryChange()">
+    <ion-segment-button value="school">
+      学校
+    </ion-segment-button>
+    <ion-segment-button value="society">
+      社会
+    </ion-segment-button>
+  </ion-segment>
+
+  <div *ngIf="category === 'school'">
+    <ion-item>
+      <ion-label position="floating">问卷标题</ion-label>
+      <ion-input [(ngModel)]="surveyTitle"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">问卷链接</ion-label>
+      <ion-input [(ngModel)]="surveyLink"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>面向对象</ion-label>
+      <ion-select [(ngModel)]="targetAudience">
+        <ion-select-option value="all">全校学生</ion-select-option>
+        <ion-select-option value="software">软件学院</ion-select-option>
+        <ion-select-option value="music">音乐学院</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-button expand="full" (click)="publishSurvey()">发布问卷</ion-button>
+  </div>
+
+  <div *ngIf="category === 'society'">
+    <!-- 社会问卷设置格式 -->
+    <ion-item>
+      <ion-label position="floating">社会问卷标题</ion-label>
+      <ion-input [(ngModel)]="societySurveyTitle"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">社会问卷链接</ion-label>
+      <ion-input [(ngModel)]="societySurveyLink"></ion-input>
+    </ion-item>
+
+    <ion-button expand="full" (click)="publishSocietySurvey()">发布社会问卷</ion-button>
+  </div>
+</ion-content>

soul-app/src/app/page-publishsurvey/page-publishsurvey.component.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

soul-app/src/app/page-publishsurvey/page-publishsurvey.component.spec.ts

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

soul-app/src/app/page-publishsurvey/page-publishsurvey.component.ts

@@ -0,0 +1,59 @@
+import { Component, OnInit,NgModule } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+  import { CommonModule } from '@angular/common';
+  import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-page-publishsurvey',
+  templateUrl: './page-publishsurvey.component.html',
+  styleUrls: ['./page-publishsurvey.component.scss'],
+  standalone: true,
+  imports: [
+
+    IonHeader,IonToolbar,IonTitle,IonContent,IonSegment,IonSegmentButton,IonSelect,IonSelectOption,
+    IonList,IonListHeader,IonItem,IonCardTitle,
+    IonLabel,IonIcon,IonButton,IonCardContent,
+    IonInput,IonSearchbar,IonCard,IonCardHeader,
+    CommonModule,FormsModule,
+  ]
+})
+
+
+export class PagePublishsurveyComponent  implements OnInit {
+  category: string = 'school'; // 默认类别
+  surveyTitle: string = '';
+  surveyLink: string = '';
+  targetAudience: string = 'all'; // 默认面向对象
+  societySurveyTitle: string = '';
+  societySurveyLink: string = '';
+
+  onCategoryChange() {
+    console.log(`当前选择的类别: ${this.category}`);
+  }
+
+  publishSurvey() {
+    console.log('发布学校问卷:');
+    console.log(`标题: ${this.surveyTitle}`);
+    console.log(`链接: ${this.surveyLink}`);
+    console.log(`面向对象: ${this.targetAudience}`);
+    // 这里可以添加逻辑将问卷发布到后端或其他处理
+  }
+
+  publishSocietySurvey() {
+    console.log('发布社会问卷:');
+    console.log(`标题: ${this.societySurveyTitle}`);
+    console.log(`链接: ${this.societySurveyLink}`);
+    // 这里可以添加逻辑将问卷发布到后端或其他处理
+  }
+
+  constructor(private router: Router) { }
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+
+
+  ngOnInit() {}
+
+}

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

@@ -13,27 +13,6 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <section>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>心理咨询</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item *ngFor="let consultant of consultants">
-          <ion-avatar slot="start">
-            <img [src]="consultant.avatar" alt="{{ consultant.name }}"/>
-          </ion-avatar>
-          <ion-label>
-            <h2>{{ consultant.name }}</h2>
-            <p>{{ consultant.fields.join(', ') }}</p>
-          </ion-label>
-          <ion-button slot="end" (click)="clickToConsult()">点击咨询</ion-button>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-</section>
 
 <section>
   <ion-card>
@@ -47,13 +26,26 @@
             <h2>{{ topic.title }}</h2>
             <p>{{ topic.description }}</p>
           </ion-label>
-          <ion-button (click)="viewDetails(topic.id)">查看详情</ion-button>
+          <ion-buttons slot="end">
+          <ion-button color="primary" fill="solid" (click)="viewDetails(topic.id)">
+            <span class="button-text">查看详情</span>
+          </ion-button>
+        </ion-buttons>
         </ion-item>
       </ion-list>
     </ion-card-content>
   </ion-card>
 </section>
 
+<ion-toolbar color="light" class="button-toolbar" style="margin-top: 10px; padding: 0;">
+  <ion-buttons slot="start" class="button-container">
+    <ion-button expand="full" (click)="goPsysurvey()">心理普查</ion-button>
+    <ion-button expand="full" >漂流瓶</ion-button>
+    <ion-button expand="full" >心协</ion-button>
+    <ion-button expand="full" >更多</ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
 <section>
   <ion-card>
     <ion-card-header>

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

@@ -22,6 +22,9 @@ ion-content {
     margin-top: 8px; /* 上间距，仅在需要时添加 */
     text-transform: none; /* 按钮文字不变形 */
     height: 35px;
+    flex: 1; /* 每个按钮等分空间 */
+    margin: 0 5px; /* 按钮之间的间距 */
+    color: rgb(42, 50, 77);
 }
   /* 设置搜索框的样式 */
   ion-searchbar {
@@ -66,4 +69,14 @@ ion-content {
     width: 100%;
     height: auto; /* 保持图片比例 */
     border-radius: 50%; /* 可选：将图片设置为圆形 */
-  }
+  }
+  .button-toolbar {
+    display: flex;
+    justify-content: space-between; /* 均匀分布按钮 */
+  }
+  
+  .button-container {
+    display: flex;
+    width: 100%; /* 使按钮容器占满整个宽度 */
+  }
+  

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

@@ -77,9 +77,8 @@ export class Tab1Page {
     // 其他构造函数代码
   }
   
-  clickToConsult() {
-    // 点击咨询
-    this.router.navigate(['tabs/page-consult'])
+  goPsysurvey() {
+    this.router.navigate(['tabs/page-psysurvey'])
   }
   
   viewDetails(topicId: number): void {

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

@@ -37,9 +37,14 @@ export const routes: Routes = [
           import('../topic-detail3/topic-detail3.component').then((m) => m.TopicDetail3Component),
       },
       {
-        path: 'page-consult',
+        path: 'page-psysurvey',
         loadComponent: () =>
-          import('../page-consult/page-consult.component').then((m) => m.PageConsultComponent),
+          import('../page-psysurvey/page-psysurvey.component').then((m) => m.PagePsysurveyComponent),
+      },
+      {
+        path: 'page-publishsurvey',
+        loadComponent: () =>
+          import('../page-publishsurvey/page-publishsurvey.component').then((m) => m.PagePublishsurveyComponent),
       },
       {
         path: 'consult-picture',