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

<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-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>