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">
          <ion-card-content class="text-center p-4">
            <ion-icon [name]="category.icon" class="category-icon"></ion-icon>
            <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.id)"
          >
            <ion-card class="recipe-card-hover">
              <ion-img [src]="recipe.image"></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.time }}分钟
                  <ion-icon name="star" class="icon-md text-primary"></ion-icon> {{ recipe.rating }}评分
                </div>
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 用户信息 -->
  <ion-card class="user-info-card">
    <ion-row class="align-items-center p-4 text-white">
      <ion-col>
        <p class="greeting">
          你好，<span class="username">小明</span>！<br>
          今天想尝试什么新料理呢？
        </p>
      </ion-col>
      <ion-col size="auto">
        <ion-avatar class="user-avatar" (click)="goToAIChat()">
          <ion-label>M</ion-label>
        </ion-avatar>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>