页面优化

myapp/src/app/tab1/tab1-routing.module.ts

@@ -11,14 +11,15 @@ const routes: Routes = [
   //   path: 'page-aichat',
   //   //loadChildren: () => import('./page-aichat/page-aichat.module').then( m => m.PageAichatPageModule)
   // },
-  {
-    path: 'page-detail',
-    loadChildren: () => import('./page-detail/page-detail.module').then( m => m.PageDetailPageModule)
-  },
   {
     path: 'page-type',
     loadChildren: () => import('./page-type/page-type.module').then( m => m.PageTypePageModule)
   },
+  {
+    path: 'page-detail',
+    loadChildren: () => import('./page-detail/page-detail.module').then( m => m.PageDetailPageModule)
+  },
+
 
 ];
 

myapp/src/app/tab2/tab2.page.html

@@ -1,50 +1,105 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-title>
+      <ion-icon name="restaurant" class="ion-align-self-center"></ion-icon>
       营养搭配
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="ion-padding">
   <ion-card class="nutritionist-card">
-  <!-- Card Header with Image -->
-  <div class="card-header">
-    <img src="/assets/lin.jpg" alt="林舒窈营养师" class="profile-image">
-    <div class="header-overlay">
-      <ion-card-title class="name-title">林舒窈</ion-card-title>
-      <ion-card-subtitle class="professional-title">东方食养家</ion-card-subtitle>
+    <!-- Card Header with Image -->
+    <div class="card-header">
+      <img src="/assets/lin.jpg" alt="林舒窈营养师" class="profile-image">
+      <div class="header-overlay">
+        <ion-card-title class="name-title">林舒窈</ion-card-title>
+        <ion-card-subtitle class="professional-title">东方食养家</ion-card-subtitle>
+      </div>
     </div>
-  </div>
 
-  <!-- Card Content -->
-  <ion-card-content class="card-content">
-    <div class="specialty-tags">
-      <ion-chip color="primary">中医体质食疗</ion-chip>
-      <ion-chip color="secondary">古方新作</ion-chip>
-      <ion-chip color="tertiary">应季精准养生</ion-chip>
-    </div>
-    
-    <p class="profile-description">
-      北京中医药大学中医学+营养学双学位，融合传统中医理论与现代营养学，
-      为您定制四季养生膳食方案。
-    </p>
-    
-    <div class="credentials">
-      <ion-icon name="library" color="primary"></ion-icon>
-      <span>《本草厨房》作者</span>
-      <ion-icon name="tv" color="primary"></ion-icon>
-      <span>央视《健康中国》嘉宾</span>
-    </div>
-  </ion-card-content>
-
-  <!-- Card Footer with Button -->
-  <ion-footer class="card-footer">
-    <ion-button (click)="openConsult()" expand="block" color="primary" class="consult-button">
-      <ion-icon name="calendar" slot="start"></ion-icon>
-      立即咨询
-    </ion-button>
-  </ion-footer>
-</ion-card>
+    <!-- Card Content -->
+    <ion-card-content class="card-content">
+      <div class="specialty-tags">
+        <ion-chip color="primary">
+          <ion-icon name="leaf" slot="start"></ion-icon>
+          中医体质食疗
+        </ion-chip>
+        <ion-chip color="secondary">
+          <ion-icon name="flask" slot="start"></ion-icon>
+          古方新作
+        </ion-chip>
+        <ion-chip color="tertiary">
+          <ion-icon name="calendar" slot="start"></ion-icon>
+          应季精准养生
+        </ion-chip>
+      </div>
+      
+      <div class="profile-section">
+        <ion-icon name="school" color="medium" class="profile-icon"></ion-icon>
+        <p class="profile-description">
+          北京中医药大学中医学+营养学双学位，融合传统中医理论与现代营养学，
+          为您定制四季养生膳食方案。
+        </p>
+      </div>
+      
+      <div class="credentials">
+        <ion-item lines="none" class="credential-item">
+          <ion-icon slot="start" name="library" color="primary"></ion-icon>
+          <ion-label>《本草厨房》作者</ion-label>
+        </ion-item>
+        <ion-item lines="none" class="credential-item">
+          <ion-icon slot="start" name="tv" color="primary"></ion-icon>
+          <ion-label>央视《健康中国》嘉宾</ion-label>
+        </ion-item>
+      </div>
+    </ion-card-content>
 
-</ion-content>
+    <!-- 咨询历史列表 -->
+    @if(consultList?.length){
+      <ion-list class="consult-history">
+        <ion-list-header>
+          <ion-label>历史咨询记录</ion-label>
+        </ion-list-header>
+        @for(consult of consultList; track consult){
+          <ion-item button (click)="openConsult(consult.get('chatId'))" class="consult-item">
+            <ion-avatar slot="start">
+              @if(consult.get('avatar')){
+                <img [src]="consult.get('avatar')" alt="用户头像">
+              } @else {
+                <ion-icon name="person-circle" class="default-avatar"></ion-icon>
+              }
+            </ion-avatar>
+            <ion-label>
+              <h3>{{consult.get('name') || '无名氏'}}</h3>
+              <p>{{consult.updatedAt | date: 'yyyy-MM-dd HH:mm'}}</p>
+            </ion-label>
+            <ion-icon slot="end" name="chevron-forward" color="medium"></ion-icon>
+          </ion-item>
+        }
+      </ion-list>
+    }
+    
+    <!-- Card Footer with Button -->
+    <ion-footer class="card-footer">
+      <ion-grid>
+        <ion-row>
+          <ion-col size="12">
+            <ion-button (click)="openConsult()" expand="block" color="primary" class="consult-button">
+              <ion-icon name="chatbubbles" slot="start"></ion-icon>
+              立即咨询
+            </ion-button>
+          </ion-col>
+          @if(!consultList?.length){
+            <ion-col size="12">
+              <ion-button (click)="loadConsult()" expand="block" fill="outline" color="medium">
+                <ion-icon name="time" slot="start"></ion-icon>
+                查看历史记录
+              </ion-button>
+            </ion-col>
+          }
+        </ion-row>
+      </ion-grid>
+    </ion-footer>
+  </ion-card>
+</ion-content>

myapp/src/app/tab2/tab2.page.scss

@@ -6,7 +6,7 @@
 
 .card-header {
   position: relative;
-//   height: 200px;
+   //height: 340px;
 }
 
 .profile-image {
@@ -71,4 +71,119 @@
 .consult-button {
   --border-radius: 8px;
   font-weight: bold;
+}
+
+/* 添加到对应的SCSS文件中 */
+.nutritionist-card {
+  margin: 0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  
+  .card-header {
+    position: relative;
+    //height: 200px;
+    overflow: hidden;
+    
+    .profile-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .header-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 16px;
+      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+      
+      .name-title {
+        color: white;
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+      
+      .professional-title {
+        color: var(--ion-color-light);
+        font-size: 1rem;
+      }
+    }
+  }
+  
+  .card-content {
+    padding: 16px;
+    
+    .specialty-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    
+    .profile-section {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 16px;
+      
+      .profile-icon {
+        margin-right: 12px;
+        margin-top: 2px;
+      }
+      
+      .profile-description {
+        margin: 0;
+        color: var(--ion-color-medium);
+        line-height: 1.5;
+      }
+    }
+    
+    .credentials {
+      margin-top: 20px;
+      
+      .credential-item {
+        --padding-start: 0;
+        --inner-padding-end: 0;
+        margin-bottom: 8px;
+      }
+    }
+  }
+  
+  .consult-history {
+    margin: 0;
+    padding: 0;
+    
+    .consult-item {
+      --padding-start: 16px;
+      --padding-end: 16px;
+      --inner-padding-end: 0;
+      
+      .default-avatar {
+        font-size: 40px;
+        color: var(--ion-color-medium);
+      }
+      
+      ion-label {
+        h3 {
+          font-weight: 500;
+        }
+        
+        p {
+          color: var(--ion-color-medium);
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+  
+  .card-footer {
+    padding: 16px;
+    
+    .consult-button {
+      --border-radius: 8px;
+      height: 48px;
+      font-weight: 600;
+    }
+  }
 }

myapp/src/app/tab2/tab2.page.ts

@@ -4,19 +4,63 @@ import { ModalController } from '@ionic/angular/standalone';
 import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
 import Parse from "parse";
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent, 
+  IonCard, 
+  IonCardContent, 
+  IonCardTitle, 
+  IonCardSubtitle, 
+  IonChip, 
+  IonIcon, 
+  IonButton, 
+  IonFooter,
+  IonList,
+  IonListHeader,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonGrid,
+  IonRow,
+  IonCol
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { 
+  restaurant, 
+  leaf, 
+  flask, 
+  calendar, 
+  school, 
+  library, 
+  tv, 
+  chatbubbles, 
+  time, 
+  personCircle, 
+  chevronForward, 
+  refresh,
+  colorWandOutline
+} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: false,
+
 })
 export class Tab2Page {
 
   constructor(
     private modalCtrl:ModalController
   ) {
-
+    // 在这里添加图标
+    addIcons({
+      restaurant, leaf, flask, calendar, school,
+      library, tv, chatbubbles, time, personCircle,
+      chevronForward, refresh, colorWandOutline
+    });
   }
   openConsult(chatId?:string){
     localStorage.setItem("company","E4KpGvTEto")
@@ -189,4 +233,11 @@ export class Tab2Page {
     }
     openChatPanelModal(this.modalCtrl,options)
   }
+  consultList:Array<CloudObject> = [];
+  
+  async loadConsult(){
+    let query = new CloudQuery("NutritionConsult");
+    this.consultList = await query.find();
+    console.log("consultList",this.consultList);
+  }
 }