跳转

.hintrc

@@ -10,6 +10,12 @@
           "backdrop-filter"
         ]
       }
+    ],
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
     ]
   }
 }

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

@@ -1,21 +1,17 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { PageDetailPage } from './page-detail.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: PageDetailPage
-  },
  {
-    path: 'page-type',
-    loadChildren: () => import('./page-type/page-type.module').then( m => m.PageTypePageModule)
-  }
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class PageDetailPageRoutingModule {}
+import { PageDetailPage } from './page-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PageDetailPage
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PageDetailPageRoutingModule {}

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

@@ -1,121 +1,13 @@
 <ion-header [translucent]="true">
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/"></ion-back-button>
-    </ion-buttons>
-    <ion-title>{{ recipe?.title }}</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="toggleFavorite()">
-        <ion-icon [name]="isFavorite ? 'heart' : 'heart-outline'"></ion-icon>
-      </ion-button>
-      <ion-button>
-        <ion-icon name="share-social-outline"></ion-icon>
-      </ion-button>
-    </ion-buttons>
+  <ion-toolbar>
+    <ion-title>page-detail</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <div class="recipe-container">
-    <!-- 食谱图片 -->
-    <div class="recipe-image-container">
-      <img [src]="recipe?.imageUrl" [alt]="recipe?.title" class="recipe-image">
-      <div class="image-overlay">
-        <ion-chip color="danger">{{ recipe?.category }}</ion-chip>
-        <ion-chip color="dark">{{ recipe?.difficulty }}</ion-chip>
-      </div>
-    </div>
-
-    <!-- 食谱元信息 -->
-    <ion-grid class="recipe-meta">
-      <ion-row>
-        <ion-col size="4" class="meta-item">
-          <ion-icon name="time-outline"></ion-icon>
-          <span>{{ recipe?.prepTime }} 准备</span>
-        </ion-col>
-        <ion-col size="4" class="meta-item">
-          <ion-icon name="flame-outline"></ion-icon>
-          <span>{{ recipe?.cookTime }} 烹饪</span>
-        </ion-col>
-        <ion-col size="4" class="meta-item">
-          <ion-icon name="people-outline"></ion-icon>
-          <span>{{ recipe?.servings }} 人份</span>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-
-    <!-- 食材部分 -->
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <ion-icon name="basket-outline" slot="start"></ion-icon>
-          食材
-        </ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list lines="none">
-          <ion-item *ngFor="let ingredient of recipe?.ingredients">
-            <ion-label>
-              <h3>{{ ingredient.name }}</h3>
-            </ion-label>
-            <ion-note slot="end" color="primary">{{ ingredient.amount }}</ion-note>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-
-    <!-- 制作步骤 -->
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <ion-icon name="restaurant-outline" slot="start"></ion-icon>
-          制作步骤
-        </ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list lines="none">
-          <ion-item *ngFor="let step of recipe?.instructions; let i = index">
-            <ion-avatar slot="start" class="step-number">
-              {{ i + 1 }}
-            </ion-avatar>
-            <ion-label class="ion-text-wrap">
-              <p>{{ step }}</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-
-    <!-- 营养信息 -->
-    <ion-card *ngIf="recipe?.nutrition">
-      <ion-card-header>
-        <ion-card-title>
-          <ion-icon name="nutrition-outline" slot="start"></ion-icon>
-          营养信息 (每份)
-        </ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6" size-md="3" class="nutrition-item">
-              <div class="nutrition-value">{{ recipe.nutrition.calories }}</div>
-              <div class="nutrition-label">卡路里</div>
-            </ion-col>
-            <ion-col size="6" size-md="3" class="nutrition-item">
-              <div class="nutrition-value">{{ recipe.nutrition.carbs }}g</div>
-              <div class="nutrition-label">碳水化合物</div>
-            </ion-col>
-            <ion-col size="6" size-md="3" class="nutrition-item">
-              <div class="nutrition-value">{{ recipe.nutrition.protein }}g</div>
-              <div class="nutrition-label">蛋白质</div>
-            </ion-col>
-            <ion-col size="6" size-md="3" class="nutrition-item">
-              <div class="nutrition-value">{{ recipe.nutrition.fat }}g</div>
-              <div class="nutrition-label">脂肪</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-card-content>
-    </ion-card>
-  </div>
-</ion-content>
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">page-detail</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

myapp/src/app/tab1/page-detail/page-detail.page.scss

@@ -1,112 +0,0 @@
-.recipe-container {
-    padding-bottom: 20px;
-  }
-  
-  .recipe-image-container {
-    position: relative;
-    width: 100%;
-    height: 250px;
-    overflow: hidden;
-    
-    .recipe-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .image-overlay {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-  }
-  
-  .recipe-meta {
-    padding: 15px 0;
-    text-align: center;
-    background: var(--ion-color-light);
-    
-    .meta-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 5px;
-      
-      ion-icon {
-        font-size: 24px;
-        color: var(--ion-color-primary);
-      }
-      
-      span {
-        font-size: 14px;
-        color: var(--ion-color-medium);
-      }
-    }
-  }
-  
-  ion-card {
-    margin: 15px;
-    
-    ion-card-header {
-      padding-bottom: 0;
-      
-      ion-card-title {
-        display: flex;
-        align-items: center;
-        font-size: 18px;
-        
-        ion-icon {
-          margin-right: 8px;
-          color: var(--ion-color-primary);
-        }
-      }
-    }
-    
-    ion-card-content {
-      padding-top: 0;
-    }
-  }
-  
-  .step-number {
-    --border-radius: 50%;
-    background: var(--ion-color-primary);
-    color: white;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 30px;
-    min-height: 30px;
-  }
-  
-  .nutrition-item {
-    text-align: center;
-    padding: 10px;
-    
-    .nutrition-value {
-      font-size: 18px;
-      font-weight: bold;
-      color: var(--ion-color-primary);
-    }
-    
-    .nutrition-label {
-      font-size: 12px;
-      color: var(--ion-color-medium);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-  }
-  
-  @media (min-width: 768px) {
-    .recipe-image-container {
-      height: 350px;
-    }
-    
-    ion-card {
-      margin: 20px auto;
-      max-width: 800px;
-    }
-  }

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

@@ -1,89 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonRow, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-
-interface Ingredient {
-  name: string;
-  amount: string;
-}
-
-interface Nutrition {
-  calories: string;
-  carbs: number;
-  protein: number;
-  fat: number;
-}
-
-interface Recipe {
-  title: string;
-  imageUrl: string;
-  prepTime: string;
-  cookTime: string;
-  servings: number;
-  category: string;
-  difficulty: string;
-  ingredients: Ingredient[];
-  instructions: string[];
-  nutrition?: Nutrition;
-}
 
 @Component({
   selector: 'app-page-detail',
   templateUrl: './page-detail.page.html',
   styleUrls: ['./page-detail.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton, IonButtons, IonButton, IonIcon, 
-            IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
-            IonList, IonItem, IonLabel, IonNote, IonChip]
 })
 export class PageDetailPage implements OnInit {
-  recipe: Recipe = {
-    title: '经典意大利肉酱面',
-    imageUrl: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
-    prepTime: '20分钟',
-    cookTime: '1小时',
-    servings: 4,
-    category: '意大利菜',
-    difficulty: '中等',
-    ingredients: [
-      { name: '意大利面', amount: '400g' },
-      { name: '牛肉末', amount: '300g' },
-      { name: '洋葱', amount: '1个' },
-      { name: '胡萝卜', amount: '1根' },
-      { name: '芹菜', amount: '1根' },
-      { name: '大蒜', amount: '3瓣' },
-      { name: '番茄酱', amount: '2汤匙' },
-      { name: '红酒', amount: '100ml' },
-      { name: '橄榄油', amount: '2汤匙' },
-      { name: '盐和黑胡椒', amount: '适量' },
-      { name: '帕玛森奶酪', amount: '装饰用' }
-    ],
-    instructions: [
-      '将洋葱、胡萝卜和芹菜切碎成小丁，大蒜切末备用。',
-      '在大锅中加热橄榄油，加入切碎的蔬菜炒至软化，约5分钟。',
-      '加入牛肉末，用中火翻炒至变色，约8-10分钟。',
-      '倒入红酒，煮至酒精挥发，约2分钟。',
-      '加入番茄酱和适量的水，调至小火慢炖45分钟，期间偶尔搅拌。',
-      '在另一个锅中煮意大利面，根据包装指示时间减1分钟。',
-      '将煮好的面条沥干，保留一杯面水。',
-      '将面条加入肉酱中，加入少量面水搅拌至酱汁浓稠裹满意面。',
-      '用盐和黑胡椒调味，撒上帕玛森奶酪即可享用。'
-    ],
-    nutrition: {
-      calories: '650kcal',
-      carbs: 75,
-      protein: 35,
-      fat: 22
-    }
-  };
-
-  isFavorite: boolean = false;
 
   constructor() { }
 
   ngOnInit() {
   }
 
-  toggleFavorite() {
-    this.isFavorite = !this.isFavorite;
-  }
 }

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

@@ -1,21 +1,13 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>{{ categoryName }}</ion-title>
+    <ion-title>page-type</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-list>
-    <ion-item 
-      *ngFor="let recipe of recipes" 
-      [routerLink]="['/page-detail', recipe.id]"
-      detail="true">
-      <ion-thumbnail slot="start">
-        <img [src]="recipe.imageUrl" [alt]="recipe.title">
-      </ion-thumbnail>
-      <ion-label>
-        <h2>{{ recipe.title }}</h2>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</ion-content>
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">page-type</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

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

@@ -1,22 +0,0 @@
-ion-thumbnail {
-    --size: 64px;
-    --border-radius: 8px;
-    overflow: hidden;
-    
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  ion-item {
-    --padding-start: 16px;
-    --padding-end: 16px;
-    --inner-padding-end: 0;
-    
-    h2 {
-      font-weight: 500;
-      margin-bottom: 4px;
-    }
-  }

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

@@ -1,16 +1,17 @@
-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)
-  },
  {
+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-detail',
     loadChildren: () => import('./page-detail/page-detail.module').then( m => m.PageDetailPageModule)
   },
@@ -19,10 +20,10 @@ const routes: Routes = [
     loadChildren: () => import('./page-type/page-type.module').then( m => m.PageTypePageModule)
   },
 
-];
-
-@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.module.ts

@@ -1,52 +1,20 @@
-import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonThumbnail, IonLabel } from '@ionic/angular/standalone';
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Tab1Page } from './tab1.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-interface Recipe {
-  id: number;
-  title: string;
-  imageUrl: string;
-}
+import { Tab1PageRoutingModule } from './tab1-routing.module';
 
-@Component({
-  selector: 'app-page-type',
-  templateUrl: './page-type.page.html',
-  styleUrls: ['./page-type.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonThumbnail, IonLabel]
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    Tab1PageRoutingModule
+  ],
+  declarations: [Tab1Page]
 })
-export class PageTypePage implements OnInit {
-  categoryName: string = '意大利菜';
-  
-  recipes: Recipe[] = [
-    {
-      id: 1,
-      title: '经典意大利肉酱面',
-      imageUrl: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb'
-    },
-    {
-      id: 2,
-      title: '奶油蘑菇意大利面',
-      imageUrl: 'https://images.unsplash.com/photo-1611270629569'
-    },
-    {
-      id: 3,
-      title: '海鲜意大利面',
-      imageUrl: 'https://images.unsplash.com/photo-1516100882582-96c3a05fe590'
-    },
-    {
-      id: 4,
-      title: '番茄罗勒意面',
-      imageUrl: 'https://images.unsplash.com/photo-1608755728476'
-    },
-    {
-      id: 5,
-      title: '千层面',
-      imageUrl: 'https://images.unsplash.com/photo-1611273426858'
-    }
-  ];
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-}
+export class Tab1PageModule {}

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

@@ -59,8 +59,8 @@ export class Tab1Page implements OnInit {
     }
   }
 
-  goToAIChat() {
-    this.navCtrl.navigateForward(["tabs","tab1","page-aichat"]);
-    console.log('Navigating to AI Chat');
+  goToDetail() {
+    this.navCtrl.navigateForward(["tabs","tab1","page-detail"]);
+    console.log('Navigating to page-detail');
   }
 }