解决对话和编辑问题

myapp/src/app/tab1/page-type/page-type.page.html

@@ -14,7 +14,7 @@
   <!-- 食谱列表 -->
   <ion-list lines="none" class="recipe-list">
     <ion-item 
-      *ngFor="let recipe of recipeList" 
+      *ngFor="let recipe of categorieRecipes" 
       class="recipe-item"
       [routerLink]="['/recipe-detail', recipe.get('objectId')]"
       detail="false"
@@ -48,13 +48,13 @@
     </ion-item>
   </ion-list>
 
-  <!-- 导入按钮 -->
+  <!-- 导入按钮
   <div class="import-button-container">
     <ion-button expand="block" color="medium" (click)="importRecipeList()" class="import-button">
       <ion-icon slot="start" name="cloud-upload-outline"></ion-icon>
       导入食谱列表数据
     </ion-button>
-  </div>
+  </div> -->
 
   <!-- 空状态 -->
   <div class="empty-state" *ngIf="recipeList.length === 0">

myapp/src/app/tab1/page-type/page-type.page.ts

@@ -43,6 +43,8 @@ export class PageTypePage implements OnInit {
     // 加载该分类下的菜品数据
     //this.loadRecipes();
     this.loadRecipeList();
+    // this.CategoryRecipes();
+    this.ionViewWillEnter();
   }
 
   importRecipeList() {
@@ -58,6 +60,36 @@ export class PageTypePage implements OnInit {
     this.recipeCategoryList = await query1.find(); 
 
   }
+  categoryId: string | null = null; // 分类ID，从路由参数获取
+
+  async ionViewWillEnter() {
+    // 获取路由参数（方式1：路径参数）
+    this.categoryId = this.route.snapshot.paramMap.get('categoryId');
+    console.log("categoryId:"+this.categoryId);
+    
+    // 或者（方式2：queryParams）
+    // this.categoryId = this.route.snapshot.queryParamMap.get('categoryId');
+    
+    if (this.categoryId) {
+      await this.loadRecipesByCategory();
+    }
+  }
+
+  categorieRecipes : Array<CloudObject> = [];
+  categories:Array<CloudObject> = [];
+  async loadRecipesByCategory(){
+    let query1 = new CloudQuery("RecipeCategory");
+    this.categories = await query1.find();
+    let query = new CloudQuery("Recipe");
+    query.include("category"); // Include recipes in the query
+    console.log("id:"+this.categoryId);
+
+    query.equalTo("category", this.categoryId); // Filter by categoryId
+    this.categorieRecipes = await query.find();
+    console.log(this.categorieRecipes);
+  }
+
+  
   // loadRecipes() {
   //   // 模拟数据 - 实际应用中应该从API获取
   //   this.recipes = [

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

@@ -1,34 +1,35 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { Tab1Page } from './tab1.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: Tab1Page,
-  },
-  // {
-  //   path: 'page-aichat',
-  //   //loadChildren: () => import('./page-aichat/page-aichat.module').then( m => m.PageAichatPageModule)
-  // },
-  {
-    path: 'page-type',
-    loadChildren: () => import('./page-type/page-type.module').then( m => m.PageTypePageModule)
-  },
-  {
-    path: 'page-detail/:recipeId',
-    loadChildren: () => import('./page-detail/page-detail.module').then( m => m.PageDetailPageModule)
-  },
  {
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Tab1Page } from './tab1.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Tab1Page,
+  },
+  // {
+  //   path: 'page-aichat',
+  //   //loadChildren: () => import('./page-aichat/page-aichat.module').then( m => m.PageAichatPageModule)
+  // },
+  {
+    path: 'page-type/:categoryId',
+    loadChildren: () => import('./page-type/page-type.module').then( m => m.PageTypePageModule)
+  },
+  {
+    path: 'page-detail/:recipeId',
+    loadChildren: () => import('./page-detail/page-detail.module').then( m => m.PageDetailPageModule)
+  },
+  {
     path: 'page-selectlist',
     loadChildren: () => import('./page-selectlist/page-selectlist.module').then( m => m.PageSelectlistPageModule)
   },
 
-
-
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class Tab1PageRoutingModule {}
+
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class Tab1PageRoutingModule {}

myapp/src/app/tab1/tab1.page.html

@@ -45,15 +45,15 @@
           md="4" 
           lg="3" 
           *ngFor="let category of categories"
-          (click)="navigateToCategory()"
+          (click)="navigateToCategory(category)"
         >
           <ion-card class="category-card" >
             <ion-card-content class="category-content">
               <div class="category-icon-container">
-                <ion-icon [name]="category.icon" class="category-icon"></ion-icon>
-                <img style="width:64px;border-radius: 50px;" src="/assets/icon/{{category.name}}.jpg" alt="">
+                <ion-icon [name]="category?.get('icon')" class="category-icon"></ion-icon>
+                <img style="width:64px;border-radius: 50px;" src="/assets/icon/{{category.get('name')}}.jpg" alt="">
               </div>
-              <h3 class="category-title">{{ category.name }}</h3>
+              <h3 class="category-title">{{ category.get('name') }}</h3>
             </ion-card-content>
           </ion-card>
         </ion-col>

myapp/src/app/tab1/tab1.page.ts

@@ -12,14 +12,14 @@ import { IonicModule } from '@ionic/angular';
 })
 
 export class Tab1Page implements OnInit {
-  categories: any[] = [
-    { name: '中式菜系', icon: 'utensils' },
-    { name: '西式料理', icon: 'fork-knife' },
-    { name: '减脂轻食', icon: 'carrot' },
-    { name: '甜点烘焙', icon: 'cake' },
-    { name: '汤羹粥品', icon: 'bowl' },
-    { name: '素食主义', icon: 'leaf' },
-  ];
+  // categories: any[] = [
+  //   { name: '中式菜系', icon: 'utensils' },
+  //   { name: '西式料理', icon: 'fork-knife' },
+  //   { name: '减脂轻食', icon: 'carrot' },
+  //   { name: '甜点烘焙', icon: 'cake' },
+  //   { name: '汤羹粥品', icon: 'bowl' },
+  //   { name: '素食主义', icon: 'leaf' },
+  // ];
   recommendedRecipes: any[] = [
     { id: 1, title: '香煎鸡胸肉配时蔬', image: '/assets/food/jxr.jpg', time: 30, rating: 4.8 },
     { id: 2, title: '奶油蘑菇意面', image: '/assets/food/nymg.jpg', time: 45, rating: 4.9 },
@@ -37,8 +37,16 @@ export class Tab1Page implements OnInit {
       });
     }, 1000);
     this.loadDailyRecommendationList();
+    this.loadCategoryList();
   }
 
+  categories: Array<CloudObject> = [];
+  categorieRecipes: Array<CloudObject> = [];
+  async loadCategoryList() {
+      let query = new CloudQuery("RecipeCategory");
+      this.categories = await query.find();
+      console.log(this.categories);
+  }
 
   DailyRecommendationList: Array<CloudObject> = []; // 存储原始每日推荐记录
   filteredRecipes: Array<Array<CloudObject>> = []; // 二维数组：外层=DailyRecommendation，内层=对应的Recipe列表
@@ -98,8 +106,10 @@ export class Tab1Page implements OnInit {
     this.router.navigate(['/register']);
   }
 
-  navigateToCategory() {
-    this.navCtrl.navigateForward(["tabs", "tab1", "page-type"]);
+  navigateToCategory(category : CloudObject) {
+    // /tabs/tab1/page-type/r5xLA3gWLw
+    this.router.navigate(['/tabs/tab1/page-type', category.id]);
+    console.log(category.id);
     console.log('Navigating to page-detail');
   }
 
@@ -114,10 +124,11 @@ export class Tab1Page implements OnInit {
     }
   }
 
-  goToTypeList() {
-    this.navCtrl.navigateForward(["tabs", "tab1", "page-type"]);
-    console.log('Navigating to page-type');
-  }
+  // goToTypeList(category: CloudObject) {
+  //   this.navCtrl.navigateForward(["tabs", "tab1", "page-type",category.id]);
+  //   console.log(category.id);
+  //   console.log('Navigating to page-type');
+  // }
 
   goToDetail(recipe: CloudObject) {
     this.navCtrl.navigateForward(["tabs", "tab1", "page-detail", recipe.objectId]);

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

@@ -85,9 +85,9 @@
       <ion-grid>
         <ion-row>
           <ion-col size="12">
-            <ion-button (click)="openConsult()" expand="block" color="success" class="consult-button" 1>
+            <ion-button (click)="openConsult()" expand="block" color="success" class="consult-button">
               <ion-icon name="chatbubbles" slot="start" color = "light"></ion-icon>
-              立即咨询
+              <p color = "white">立即咨询</p>
             </ion-button>
           </ion-col>
           @if(!consultList?.length){

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

@@ -66,7 +66,7 @@ export class Tab2Page {
     localStorage.setItem("company","E4KpGvTEto")
     let options:ChatPanelOptions = {
       roleId:"2DXJkRsjXK", // 预设，无需更改
-      // chatId:chatId, // 若存在，则恢复会话。若不存在，则开启新会话
+      chatId:chatId, // 若存在，则恢复会话。若不存在，则开启新会话
       onChatInit:(chat:FmodeChat)=>{
         console.log("onChatInit");
         console.log("Chat类",chat);
@@ -183,6 +183,8 @@ export class Tab2Page {
          },
       ]
 
+
+
       },
       onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{
         console.log("onMessage",message)
@@ -211,11 +213,11 @@ export class Tab2Page {
       onChatSaved:async (chat:FmodeChat)=>{
         // chat?.chatSession?.id 本次会话的 chatId
         console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
-        let chatId = chat?.chatSession?.id;
+        let chatId = chat?.chatSession?.id; 
         console.log("chatId",chatId);
         let query = new CloudQuery("NutritionConsult");
         let nutritionConsult = await query.get(chatId);
-        console.log("nutritionConsult",nutritionConsult)
+        console.log("nutritionConsult1",nutritionConsult)
         //若无重复记录，则实例化一个新的咨询记录
         if(!nutritionConsult?.id){
          nutritionConsult = new CloudObject("NutritionConsult"); 
@@ -227,7 +229,7 @@ export class Tab2Page {
           "avatar":chat.role.get("avatar"),
         });
 
-        console.log("nutritionConsult",nutritionConsult);
+        console.log("nutritionConsult2",nutritionConsult);
         nutritionConsult.save();
       }
     }
@@ -238,6 +240,6 @@ export class Tab2Page {
   async loadConsult(){
     let query = new CloudQuery("NutritionConsult");
     this.consultList = await query.find();
-    console.log("consultList",this.consultList);
+    console.log("咨询记录",this.consultList);
   }
 }

myapp/src/app/tab3/tab3.page.ts

@@ -1,7 +1,8 @@
 // tab3.page.ts
 import { Component } from '@angular/core';
 import { ModalController, NavController } from '@ionic/angular';
-import { ModalUserLoginComponent } from 'fmode-ng';
+// import { ModalUserLoginComponent } from 'fmode-ng';
+import { ModalUserEditComponent } from '../../lib/user/modal-user-edit/modal-user-edit.component';
 import { CloudApi, CloudUser } from 'src/lib/ncloud';
 import { 
   IonHeader, 
@@ -108,7 +109,7 @@ export class Tab3Page {
   }
   async edit(){
     const modal = await this.modalCtrl.create({
-      component:ModalUserLoginComponent,
+      component:ModalUserEditComponent,
     });
     modal.present();
     const {data,role} = await modal.onWillDismiss();

myapp/src/app/tabs/tabs.page.html

@@ -1,20 +1,25 @@
+<!-- tabs.page.html -->
 <ion-tabs>
 
-  <ion-tab-bar slot="bottom">
+  <ion-tab-bar slot="bottom" class="custom-tab-bar">
+    <!-- 首页Tab -->
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-icon aria-hidden="true" name="home-outline"></ion-icon>
+      <ion-label>首页</ion-label>
+      <ion-badge *ngIf="homeBadgeCount > 0" color="danger" class="badge">{{homeBadgeCount}}</ion-badge>
     </ion-tab-button>
 
+    <!-- AI咨询Tab (修改为简约风格) -->
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-icon aria-hidden="true" name="chatbubble-outline"></ion-icon>
+      <ion-label>咨询</ion-label>
     </ion-tab-button>
 
+    <!-- 个人中心Tab -->
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
+      <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 
-</ion-tabs>
+</ion-tabs>

myapp/src/app/tabs/tabs.page.scss

@@ -1 +1,43 @@
-
+/* tabs.page.scss */
+.custom-tab-bar {
+    --background: #ffffff;
+    --color: #6d6d6d; // 未选中状态颜色
+    --color-selected: #3880ff; // 选中状态颜色
+    border-top: 1px solid #f0f0f0;
+    height: 56px;
+    padding-top: 6px;
+    padding-bottom: env(safe-area-inset-bottom);
+  
+    ion-tab-button {
+      position: relative;
+      transition: transform 0.2s ease;
+  
+      ion-icon {
+        font-size: 22px;
+        margin-bottom: 4px;
+        transition: all 0.2s ease;
+      }
+  
+      ion-label {
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+      }
+  
+      &.tab-selected {
+        ion-icon {
+          transform: translateY(-2px);
+        }
+      }
+    }
+  
+    .badge {
+      position: absolute;
+      top: 2px;
+      right: 20%;
+      font-size: 10px;
+      min-width: 16px;
+      height: 16px;
+      line-height: 16px;
+    }
+  }

myapp/src/app/tabs/tabs.page.ts

@@ -1,13 +1,14 @@
+// tabs.page.ts
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-tabs',
   templateUrl: 'tabs.page.html',
-  styleUrls: ['tabs.page.scss'],
-  standalone: false,
+  styleUrls: ['tabs.page.scss']
 })
 export class TabsPage {
+  // 示例数据，实际可从服务获取
+  homeBadgeCount = 0; // 首页角标数量
 
   constructor() {}
-
-}
+}