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

<ion-header [translucent]="true">
  <ion-toolbar class="custom-header">
    <ion-title class="logo">
      🍳 <span>味知星厨</span>
    </ion-title>
    <ion-buttons slot="end">
      <ion-button class="nav-btn" (click)="login()">登录</ion-button>
      <ion-button class="nav-btn" (click)="register()">注册</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="bg-light">
  <!-- 搜索栏 -->
  <ion-card class="search-card">
    <ion-row class="search-row">
      <ion-col size="10">
        <ion-input 
          class="search-input" 
          type="text" 
          placeholder="搜索食谱（如：番茄炒蛋、低卡沙拉）"
          [(ngModel)]="searchQuery"
          autocomplete="food"
          spellcheck="false"
          aria-label="食谱搜索"
        ></ion-input>
      </ion-col>
      <ion-col size="2">
        <ion-button 
          class="search-btn" 
          shape="round" 
          (click)="performSearch()"
          aria-label="搜索食谱"
        >
          <ion-icon name="search" class="icon-md text-white"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-card>

  <!-- 分类网格 -->
  <ion-grid class="category-grid" fixed>
    <ion-row class="ion-justify-content-around">
      <ion-col 
        size="6" 
        md="4" 
        lg="3" 
        class="category-card" 
        *ngFor="let category of categories"
        (click)="navigateToCategory(category)"
        
      >
        <ion-card class="card-hover" (click)="goToTypeList()">
          <ion-card-content class="text-center p-4">
            <!-- <ion-icon [name]="category.icon" class="category-icon"></ion-icon> -->
             <img style="width:64px;border-radius: 10px;" src="/assets/icon/{{category.name}}.jpg" alt="">
            <p class="category-title">{{ category.name }}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 推荐食谱 -->
<ion-card class="recommend-card">
  <ion-card-header class="px-4 pt-4">
    <h2 class="section-title">今日推荐食谱</h2>
  </ion-card-header>
  <ion-card-content class="px-4">
    <ion-grid fixed>
      <ion-row class="ion-justify-content-around">
        <ion-col 
          size="12" 
          md="6" 
          lg="4" 
          class="recipe-card" 
          *ngFor="let recipe of recommendedRecipes"
          (click)="goToRecipeDetail(recipe.objectId)"
        >
          <ion-card class="recipe-card-hover" (click)="goToDetail()">
            <ion-img [src]="recipe.image?.url || '/assets/images/default-food.jpg'"></ion-img>
            <ion-card-content class="p-4">
              <h3 class="recipe-title">{{ recipe.title }}</h3>
              <div class="recipe-meta">
                <ion-icon name="time" class="icon-md"></ion-icon> {{ recipe.cookingTime || 30 }}分钟
                <ion-icon name="star" class="icon-md text-primary"></ion-icon> {{ recipe.rating || 4.5 }}评分
              </div>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card-content>
</ion-card>

  
</ion-content>