|
@@ -32,7 +32,7 @@
|
|
|
<div class="p-2 md:p-6">
|
|
<div class="p-2 md:p-6">
|
|
|
<!-- 食材列表 -->
|
|
<!-- 食材列表 -->
|
|
|
<div class="mb-4">
|
|
<div class="mb-4">
|
|
|
- <h4 class="text-sm font-bold text-dark-800 mb-2 flex items-center gap-1">🥬 所需食材</h4>
|
|
|
|
|
|
|
+ <h4 class="text-sm font-bold text-dark-800 mb-2 flex items-center gap-1">🥬 {{ t('recipeCard.sections.ingredients') }}</h4>
|
|
|
<div class="flex flex-wrap gap-1">
|
|
<div class="flex flex-wrap gap-1">
|
|
|
<span v-for="ingredient in recipe.ingredients" :key="ingredient" class="bg-yellow-400 text-dark-800 px-2 py-1 rounded text-xs font-medium border border-black">
|
|
<span v-for="ingredient in recipe.ingredients" :key="ingredient" class="bg-yellow-400 text-dark-800 px-2 py-1 rounded text-xs font-medium border border-black">
|
|
|
{{ ingredient }}
|
|
{{ ingredient }}
|
|
@@ -43,9 +43,9 @@
|
|
|
<!-- 制作步骤预览 -->
|
|
<!-- 制作步骤预览 -->
|
|
|
<div class="mb-4">
|
|
<div class="mb-4">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
- <h4 class="text-sm font-bold text-dark-800 flex items-center gap-1">📝 制作步骤</h4>
|
|
|
|
|
|
|
+ <h4 class="text-sm font-bold text-dark-800 flex items-center gap-1">📝 {{ t('recipeCard.sections.steps') }}</h4>
|
|
|
<button @click="toggleExpanded" class="bg-gray-100 hover:bg-gray-200 text-dark-800 text-xs px-2 py-1 rounded border border-black transition-colors">
|
|
<button @click="toggleExpanded" class="bg-gray-100 hover:bg-gray-200 text-dark-800 text-xs px-2 py-1 rounded border border-black transition-colors">
|
|
|
- {{ isExpanded ? '收起' : '展开' }}
|
|
|
|
|
|
|
+ {{ isExpanded ? t('recipeCard.buttons.collapse') : t('recipeCard.buttons.expand') }}
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -58,7 +58,7 @@
|
|
|
<p class="text-dark-700 text-xs line-clamp-2">{{ step.description }}</p>
|
|
<p class="text-dark-700 text-xs line-clamp-2">{{ step.description }}</p>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-if="recipe.steps.length > 3" class="text-center py-1">
|
|
<div v-if="recipe.steps.length > 3" class="text-center py-1">
|
|
|
- <span class="text-gray-500 text-xs">还有 {{ recipe.steps.length - 3 }} 个步骤...</span>
|
|
|
|
|
|
|
+ <span class="text-gray-500 text-xs">{{ t('recipeCard.stepsRemaining', { count: recipe.steps.length - 3 }) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -81,7 +81,7 @@
|
|
|
|
|
|
|
|
<!-- 烹饪技巧 -->
|
|
<!-- 烹饪技巧 -->
|
|
|
<div v-if="recipe.tips && recipe.tips.length > 0 && isExpanded" class="mb-4">
|
|
<div v-if="recipe.tips && recipe.tips.length > 0 && isExpanded" class="mb-4">
|
|
|
- <h4 class="text-sm font-bold text-dark-800 mb-2 flex items-center gap-1">💡 烹饪技巧</h4>
|
|
|
|
|
|
|
+ <h4 class="text-sm font-bold text-dark-800 mb-2 flex items-center gap-1">💡 {{ t('recipeCard.sections.tips') }}</h4>
|
|
|
<div class="bg-yellow-100 border-l-4 border-yellow-400 p-3 rounded-r">
|
|
<div class="bg-yellow-100 border-l-4 border-yellow-400 p-3 rounded-r">
|
|
|
<ul class="space-y-1">
|
|
<ul class="space-y-1">
|
|
|
<li v-for="tip in recipe.tips" :key="tip" class="flex items-start gap-2 text-dark-700">
|
|
<li v-for="tip in recipe.tips" :key="tip" class="flex items-start gap-2 text-dark-700">
|
|
@@ -94,11 +94,11 @@
|
|
|
|
|
|
|
|
<!-- 营养分析 -->
|
|
<!-- 营养分析 -->
|
|
|
<div v-if="isExpanded" class="mb-4">
|
|
<div v-if="isExpanded" class="mb-4">
|
|
|
- <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">📊 营养分析</h4>
|
|
|
|
|
|
|
+ <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">📊 {{ t('recipeCard.sections.nutrition') }}</h4>
|
|
|
|
|
|
|
|
<div v-if="isFetchingNutrition" class="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 text-center">
|
|
<div v-if="isFetchingNutrition" class="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 text-center">
|
|
|
<div class="w-12 h-12 border-4 border-gray-300 border-t-green-500 rounded-full animate-spin mx-auto mb-3"></div>
|
|
<div class="w-12 h-12 border-4 border-gray-300 border-t-green-500 rounded-full animate-spin mx-auto mb-3"></div>
|
|
|
- <h5 class="text-sm font-bold text-dark-800 mb-1">营养师正在分析中...</h5>
|
|
|
|
|
|
|
+ <h5 class="text-sm font-bold text-dark-800 mb-1">{{ t('recipeCard.loading.nutrition.title') }}</h5>
|
|
|
<p class="text-gray-600 text-xs">{{ nutritionLoadingText }}</p>
|
|
<p class="text-gray-600 text-xs">{{ nutritionLoadingText }}</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -111,7 +111,7 @@
|
|
|
<!-- 营养分析空状态 - 包含获取按钮 -->
|
|
<!-- 营养分析空状态 - 包含获取按钮 -->
|
|
|
<div v-else-if="!isFetchingNutrition" class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
|
|
<div v-else-if="!isFetchingNutrition" class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
|
|
|
<div class="text-gray-400 text-2xl mb-3">🥗</div>
|
|
<div class="text-gray-400 text-2xl mb-3">🥗</div>
|
|
|
- <p class="text-gray-500 text-xs mb-4">暂无营养分析数据</p>
|
|
|
|
|
|
|
+ <p class="text-gray-500 text-xs mb-4">{{ t('recipeCard.emptyState.nutrition') }}</p>
|
|
|
<button
|
|
<button
|
|
|
@click="fetchNutritionAnalysis"
|
|
@click="fetchNutritionAnalysis"
|
|
|
:disabled="isFetchingNutrition"
|
|
:disabled="isFetchingNutrition"
|
|
@@ -120,31 +120,21 @@
|
|
|
<span class="flex items-center gap-1">
|
|
<span class="flex items-center gap-1">
|
|
|
<template v-if="isFetchingNutrition">
|
|
<template v-if="isFetchingNutrition">
|
|
|
<div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
|
|
<div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
|
|
|
- 获取中...
|
|
|
|
|
|
|
+ {{ t('recipeCard.buttons.fetching') }}
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else> ✨ 获取营养分析 </template>
|
|
|
|
|
|
|
+ <template v-else> ✨ {{ t('recipeCard.buttons.getNutrition') }} </template>
|
|
|
</span>
|
|
</span>
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <!-- 重新获取按钮 - 当已有数据时显示 -->
|
|
|
|
|
- <!-- <div v-if="recipe.nutritionAnalysis && !isFetchingNutrition" class="mt-3 text-center">
|
|
|
|
|
- <button
|
|
|
|
|
- @click="fetchNutritionAnalysis"
|
|
|
|
|
- class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200"
|
|
|
|
|
- >
|
|
|
|
|
- 🔄 重新获取
|
|
|
|
|
- </button>
|
|
|
|
|
- </div> -->
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 饮品搭配 -->
|
|
<!-- 饮品搭配 -->
|
|
|
<div v-if="isExpanded" class="mb-4">
|
|
<div v-if="isExpanded" class="mb-4">
|
|
|
- <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">🥤 饮品搭配</h4>
|
|
|
|
|
|
|
+ <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">🥤 {{ t('recipeCard.sections.beverage') }}</h4>
|
|
|
|
|
|
|
|
<div v-if="isFetchingWine" class="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 text-center">
|
|
<div v-if="isFetchingWine" class="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 text-center">
|
|
|
<div class="w-12 h-12 border-4 border-gray-300 border-t-purple-500 rounded-full animate-spin mx-auto mb-3"></div>
|
|
<div class="w-12 h-12 border-4 border-gray-300 border-t-purple-500 rounded-full animate-spin mx-auto mb-3"></div>
|
|
|
- <h5 class="text-sm font-bold text-dark-800 mb-1">饮品师正在推荐中...</h5>
|
|
|
|
|
|
|
+ <h5 class="text-sm font-bold text-dark-800 mb-1">{{ t('recipeCard.loading.beverage.title') }}</h5>
|
|
|
<p class="text-gray-600 text-xs">{{ wineLoadingText }}</p>
|
|
<p class="text-gray-600 text-xs">{{ wineLoadingText }}</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -157,7 +147,7 @@
|
|
|
<!-- 饮品搭配空状态 - 包含获取按钮 -->
|
|
<!-- 饮品搭配空状态 - 包含获取按钮 -->
|
|
|
<div v-else-if="!isFetchingWine" class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
|
|
<div v-else-if="!isFetchingWine" class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
|
|
|
<div class="text-gray-400 text-2xl mb-3">🥤</div>
|
|
<div class="text-gray-400 text-2xl mb-3">🥤</div>
|
|
|
- <p class="text-gray-500 text-xs mb-4">暂无饮品搭配推荐</p>
|
|
|
|
|
|
|
+ <p class="text-gray-500 text-xs mb-4">{{ t('recipeCard.emptyState.beverage') }}</p>
|
|
|
<button
|
|
<button
|
|
|
@click="fetchWinePairing"
|
|
@click="fetchWinePairing"
|
|
|
:disabled="isFetchingWine"
|
|
:disabled="isFetchingWine"
|
|
@@ -166,32 +156,22 @@
|
|
|
<span class="flex items-center gap-1">
|
|
<span class="flex items-center gap-1">
|
|
|
<template v-if="isFetchingWine">
|
|
<template v-if="isFetchingWine">
|
|
|
<div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
|
|
<div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
|
|
|
- 获取中...
|
|
|
|
|
|
|
+ {{ t('recipeCard.buttons.fetching') }}
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else> ✨ 获取饮品搭配 </template>
|
|
|
|
|
|
|
+ <template v-else> ✨ {{ t('recipeCard.buttons.getBeverage') }} </template>
|
|
|
</span>
|
|
</span>
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <!-- 重新获取按钮 - 当已有数据时显示 -->
|
|
|
|
|
- <!-- <div v-if="recipe.winePairing && !isFetchingWine" class="mt-3 text-center">
|
|
|
|
|
- <button
|
|
|
|
|
- @click="fetchWinePairing"
|
|
|
|
|
- class="bg-purple-500 hover:bg-purple-600 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200"
|
|
|
|
|
- >
|
|
|
|
|
- 🔄 重新获取
|
|
|
|
|
- </button>
|
|
|
|
|
- </div> -->
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 效果图区域 -->
|
|
<!-- 效果图区域 -->
|
|
|
<div class="mt-4 pt-4 border-t border-gray-200">
|
|
<div class="mt-4 pt-4 border-t border-gray-200">
|
|
|
- <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">🖼️ 菜品效果图</h4>
|
|
|
|
|
|
|
+ <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">🖼️ {{ t('recipeCard.sections.image') }}</h4>
|
|
|
|
|
|
|
|
<!-- 加载状态 -->
|
|
<!-- 加载状态 -->
|
|
|
<div v-if="isGeneratingImage" class="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 text-center">
|
|
<div v-if="isGeneratingImage" class="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 text-center">
|
|
|
<div class="w-12 h-12 border-4 border-gray-300 border-t-blue-500 rounded-full animate-spin mx-auto mb-3"></div>
|
|
<div class="w-12 h-12 border-4 border-gray-300 border-t-blue-500 rounded-full animate-spin mx-auto mb-3"></div>
|
|
|
- <h5 class="text-sm font-bold text-dark-800 mb-1">AI画师正在创作中...</h5>
|
|
|
|
|
|
|
+ <h5 class="text-sm font-bold text-dark-800 mb-1">{{ t('recipeCard.loading.image.title') }}</h5>
|
|
|
<p class="text-gray-600 text-xs">{{ imageLoadingText }}</p>
|
|
<p class="text-gray-600 text-xs">{{ imageLoadingText }}</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -204,7 +184,7 @@
|
|
|
<div v-else-if="generatedImage" class="mb-3">
|
|
<div v-else-if="generatedImage" class="mb-3">
|
|
|
<img
|
|
<img
|
|
|
:src="generatedImage.url"
|
|
:src="generatedImage.url"
|
|
|
- :alt="`${recipe.name}效果图`"
|
|
|
|
|
|
|
+ :alt="t('recipeCard.imageAlt', { name: recipe.name })"
|
|
|
class="w-full object-cover rounded-lg border-2 border-[#0A0910] cursor-pointer transition-all duration-300 hover:brightness-110 hover:scale-[1.02]"
|
|
class="w-full object-cover rounded-lg border-2 border-[#0A0910] cursor-pointer transition-all duration-300 hover:brightness-110 hover:scale-[1.02]"
|
|
|
@error="handleImageError"
|
|
@error="handleImageError"
|
|
|
@click="openImageModal"
|
|
@click="openImageModal"
|
|
@@ -214,7 +194,7 @@
|
|
|
<!-- 效果图空状态 - 包含生成按钮 -->
|
|
<!-- 效果图空状态 - 包含生成按钮 -->
|
|
|
<div v-else class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-10 text-center hover:bg-gray-50 transition-colors">
|
|
<div v-else class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-10 text-center hover:bg-gray-50 transition-colors">
|
|
|
<div class="text-gray-400 text-2xl mb-3">📷</div>
|
|
<div class="text-gray-400 text-2xl mb-3">📷</div>
|
|
|
- <p class="text-gray-500 text-xs mb-4">暂无菜品效果图</p>
|
|
|
|
|
|
|
+ <p class="text-gray-500 text-xs mb-4">{{ t('recipeCard.emptyState.image') }}</p>
|
|
|
<button
|
|
<button
|
|
|
@click="generateImage"
|
|
@click="generateImage"
|
|
|
:disabled="isGeneratingImage"
|
|
:disabled="isGeneratingImage"
|
|
@@ -223,9 +203,9 @@
|
|
|
<span class="flex items-center gap-1">
|
|
<span class="flex items-center gap-1">
|
|
|
<template v-if="isGeneratingImage">
|
|
<template v-if="isGeneratingImage">
|
|
|
<div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
|
|
<div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
|
|
|
- 生成中...
|
|
|
|
|
|
|
+ {{ t('recipeCard.buttons.generating') }}
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else> ✨ 生成效果图 </template>
|
|
|
|
|
|
|
+ <template v-else> ✨ {{ t('recipeCard.buttons.generateImage') }} </template>
|
|
|
</span>
|
|
</span>
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
@@ -236,7 +216,7 @@
|
|
|
@click="generateImage"
|
|
@click="generateImage"
|
|
|
class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200"
|
|
class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200"
|
|
|
>
|
|
>
|
|
|
- 🔄 重新生成
|
|
|
|
|
|
|
+ 🔄 {{ t('recipeCard.buttons.regenerate') }}
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -249,6 +229,7 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { computed, ref, onUnmounted } from 'vue'
|
|
import { computed, ref, onUnmounted } from 'vue'
|
|
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
import type { Recipe } from '@/types'
|
|
import type { Recipe } from '@/types'
|
|
|
import { generateRecipeImage, type GeneratedImage } from '@/services/imageService'
|
|
import { generateRecipeImage, type GeneratedImage } from '@/services/imageService'
|
|
|
import { getNutritionAnalysis, getWinePairing } from '@/services/aiService'
|
|
import { getNutritionAnalysis, getWinePairing } from '@/services/aiService'
|
|
@@ -258,6 +239,8 @@ import NutritionAnalysis from './NutritionAnalysis.vue'
|
|
|
import WinePairing from './WinePairing.vue'
|
|
import WinePairing from './WinePairing.vue'
|
|
|
import ImageModal from './ImageModal.vue'
|
|
import ImageModal from './ImageModal.vue'
|
|
|
|
|
|
|
|
|
|
+const { t, locale } = useI18n()
|
|
|
|
|
+
|
|
|
interface Props {
|
|
interface Props {
|
|
|
recipe: Recipe
|
|
recipe: Recipe
|
|
|
showFavoriteButton?: boolean
|
|
showFavoriteButton?: boolean
|
|
@@ -274,57 +257,19 @@ const isExpanded = ref(false)
|
|
|
const isGeneratingImage = ref(false)
|
|
const isGeneratingImage = ref(false)
|
|
|
const generatedImage = ref<GeneratedImage | null>(null)
|
|
const generatedImage = ref<GeneratedImage | null>(null)
|
|
|
const imageError = ref<string>('')
|
|
const imageError = ref<string>('')
|
|
|
-const imageLoadingText = ref('正在构思画面布局...')
|
|
|
|
|
-const nutritionLoadingText = ref('营养师正在分析中...')
|
|
|
|
|
-const wineLoadingText = ref('侍酒师正在推荐中...')
|
|
|
|
|
|
|
+const imageLoadingText = ref(t('recipeCard.loading.image.texts.0'))
|
|
|
|
|
+const nutritionLoadingText = ref(t('recipeCard.loading.nutrition.texts.0'))
|
|
|
|
|
+const wineLoadingText = ref(t('recipeCard.loading.beverage.texts.0'))
|
|
|
const isFetchingNutrition = ref(false)
|
|
const isFetchingNutrition = ref(false)
|
|
|
const nutritionError = ref('')
|
|
const nutritionError = ref('')
|
|
|
const isFetchingWine = ref(false)
|
|
const isFetchingWine = ref(false)
|
|
|
const wineError = ref('')
|
|
const wineError = ref('')
|
|
|
const showImageModal = ref(false)
|
|
const showImageModal = ref(false)
|
|
|
|
|
|
|
|
-// 图片生成加载文字轮播
|
|
|
|
|
-const imageLoadingTexts = [
|
|
|
|
|
- '正在构思画面布局...',
|
|
|
|
|
- '正在调配色彩搭配...',
|
|
|
|
|
- '正在绘制食材细节...',
|
|
|
|
|
- '正在优化光影效果...',
|
|
|
|
|
- '正在精修画面质感...',
|
|
|
|
|
- '正在添加最后润色...',
|
|
|
|
|
- '精美效果图即将完成...'
|
|
|
|
|
-]
|
|
|
|
|
-
|
|
|
|
|
-// 营养分析加载文字轮播
|
|
|
|
|
-const nutritionLoadingTexts = [
|
|
|
|
|
- '营养师正在分析中...',
|
|
|
|
|
- '正在计算卡路里...',
|
|
|
|
|
- '正在分析蛋白质含量...',
|
|
|
|
|
- '正在评估维生素含量...',
|
|
|
|
|
- '正在生成健康建议...',
|
|
|
|
|
- '正在准备饮食建议...',
|
|
|
|
|
- '营养分析即将完成...'
|
|
|
|
|
-]
|
|
|
|
|
-
|
|
|
|
|
-// 饮品搭配加载文字轮播
|
|
|
|
|
-const wineLoadingTexts = [
|
|
|
|
|
- '饮品师正在推荐中...',
|
|
|
|
|
- '正在匹配口味特征...',
|
|
|
|
|
- '正在考虑饮品平衡...',
|
|
|
|
|
- '正在评估搭配效果...',
|
|
|
|
|
- '正在选择最佳温度...',
|
|
|
|
|
- '正在准备搭配理由...',
|
|
|
|
|
- '完美搭配即将呈现...'
|
|
|
|
|
-]
|
|
|
|
|
-
|
|
|
|
|
let imageLoadingInterval: ReturnType<typeof setTimeout> | null = null
|
|
let imageLoadingInterval: ReturnType<typeof setTimeout> | null = null
|
|
|
|
|
|
|
|
const difficultyText = computed(() => {
|
|
const difficultyText = computed(() => {
|
|
|
- const difficultyMap = {
|
|
|
|
|
- easy: '简单',
|
|
|
|
|
- medium: '中等',
|
|
|
|
|
- hard: '困难'
|
|
|
|
|
- }
|
|
|
|
|
- return difficultyMap[props.recipe.difficulty] || '中等'
|
|
|
|
|
|
|
+ return t(`recipeCard.difficulty.${props.recipe.difficulty}`) || t('recipeCard.difficulty.medium')
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 格式化时间显示
|
|
// 格式化时间显示
|
|
@@ -372,8 +317,8 @@ const generateImage = async () => {
|
|
|
// 开始图片生成加载文字轮播
|
|
// 开始图片生成加载文字轮播
|
|
|
let textIndex = 0
|
|
let textIndex = 0
|
|
|
imageLoadingInterval = setInterval(() => {
|
|
imageLoadingInterval = setInterval(() => {
|
|
|
- imageLoadingText.value = imageLoadingTexts[textIndex]
|
|
|
|
|
- textIndex = (textIndex + 1) % imageLoadingTexts.length
|
|
|
|
|
|
|
+ imageLoadingText.value = t(`recipeCard.loading.image.texts.${textIndex}`)
|
|
|
|
|
+ textIndex = (textIndex + 1) % 7
|
|
|
}, 2000)
|
|
}, 2000)
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
@@ -382,11 +327,16 @@ const generateImage = async () => {
|
|
|
|
|
|
|
|
// 将生成的图片添加到图库
|
|
// 将生成的图片添加到图库
|
|
|
const { GalleryService } = await import('@/services/galleryService')
|
|
const { GalleryService } = await import('@/services/galleryService')
|
|
|
- const prompt = `一道精美的${props.recipe.cuisine.replace('大师', '').replace('菜', '')}菜肴:${props.recipe.name}`
|
|
|
|
|
|
|
+
|
|
|
|
|
+ const prompt = locale.value === 'en'
|
|
|
|
|
+ ? `An exquisite ${props.recipe.cuisine} dish: ${props.recipe.name}`
|
|
|
|
|
+ : `一道精美的${props.recipe.cuisine}菜肴:${props.recipe.name}`
|
|
|
|
|
+
|
|
|
|
|
+ // const prompt = `一道精美的${props.recipe.cuisine.replace('大师', '').replace('菜', '')}菜肴:${props.recipe.name}`
|
|
|
GalleryService.addToGallery(props.recipe, image.url, image.id, prompt)
|
|
GalleryService.addToGallery(props.recipe, image.url, image.id, prompt)
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('生成图片失败:', error)
|
|
console.error('生成图片失败:', error)
|
|
|
- imageError.value = 'AI画师表示这道菜太有艺术挑战性了,哈哈!'
|
|
|
|
|
|
|
+ imageError.value = t('recipeCard.errors.imageGeneration')
|
|
|
} finally {
|
|
} finally {
|
|
|
isGeneratingImage.value = false
|
|
isGeneratingImage.value = false
|
|
|
if (imageLoadingInterval) {
|
|
if (imageLoadingInterval) {
|
|
@@ -397,7 +347,7 @@ const generateImage = async () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const handleImageError = () => {
|
|
const handleImageError = () => {
|
|
|
- imageError.value = '图片加载失败'
|
|
|
|
|
|
|
+ imageError.value = t('recipeCard.errors.imageLoad')
|
|
|
generatedImage.value = null
|
|
generatedImage.value = null
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -409,8 +359,8 @@ const fetchNutritionAnalysis = async () => {
|
|
|
|
|
|
|
|
let textIndex = 0
|
|
let textIndex = 0
|
|
|
const interval = setInterval(() => {
|
|
const interval = setInterval(() => {
|
|
|
- nutritionLoadingText.value = nutritionLoadingTexts[textIndex]
|
|
|
|
|
- textIndex = (textIndex + 1) % nutritionLoadingTexts.length
|
|
|
|
|
|
|
+ nutritionLoadingText.value = t(`recipeCard.loading.nutrition.texts.${textIndex}`)
|
|
|
|
|
+ textIndex = (textIndex + 1) % 7
|
|
|
}, 2000)
|
|
}, 2000)
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
@@ -418,7 +368,7 @@ const fetchNutritionAnalysis = async () => {
|
|
|
props.recipe.nutritionAnalysis = analysis
|
|
props.recipe.nutritionAnalysis = analysis
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('获取营养分析失败:', error)
|
|
console.error('获取营养分析失败:', error)
|
|
|
- nutritionError.value = '获取营养分析失败,请稍后重试'
|
|
|
|
|
|
|
+ nutritionError.value = t('recipeCard.errors.nutritionFetch')
|
|
|
} finally {
|
|
} finally {
|
|
|
isFetchingNutrition.value = false
|
|
isFetchingNutrition.value = false
|
|
|
clearInterval(interval)
|
|
clearInterval(interval)
|
|
@@ -433,8 +383,8 @@ const fetchWinePairing = async () => {
|
|
|
|
|
|
|
|
let textIndex = 0
|
|
let textIndex = 0
|
|
|
const interval = setInterval(() => {
|
|
const interval = setInterval(() => {
|
|
|
- wineLoadingText.value = wineLoadingTexts[textIndex]
|
|
|
|
|
- textIndex = (textIndex + 1) % wineLoadingTexts.length
|
|
|
|
|
|
|
+ wineLoadingText.value = t(`recipeCard.loading.beverage.texts.${textIndex}`)
|
|
|
|
|
+ textIndex = (textIndex + 1) % 7
|
|
|
}, 2000)
|
|
}, 2000)
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
@@ -442,7 +392,7 @@ const fetchWinePairing = async () => {
|
|
|
props.recipe.winePairing = pairing
|
|
props.recipe.winePairing = pairing
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('获取饮品搭配失败:', error)
|
|
console.error('获取饮品搭配失败:', error)
|
|
|
- wineError.value = '获取饮品搭配失败,请稍后重试'
|
|
|
|
|
|
|
+ wineError.value = t('recipeCard.errors.beverageFetch')
|
|
|
} finally {
|
|
} finally {
|
|
|
isFetchingWine.value = false
|
|
isFetchingWine.value = false
|
|
|
clearInterval(interval)
|
|
clearInterval(interval)
|
|
@@ -472,7 +422,9 @@ const getModalImageData = (): GalleryImage | null => {
|
|
|
recipeId: props.recipe.id,
|
|
recipeId: props.recipe.id,
|
|
|
cuisine: props.recipe.cuisine,
|
|
cuisine: props.recipe.cuisine,
|
|
|
ingredients: props.recipe.ingredients,
|
|
ingredients: props.recipe.ingredients,
|
|
|
- prompt: `一道精美的${props.recipe.cuisine.replace('大师', '').replace('菜', '')}菜肴:${props.recipe.name}`,
|
|
|
|
|
|
|
+ prompt: locale.value === 'en'
|
|
|
|
|
+ ? `An exquisite ${props.recipe.cuisine} dish: ${props.recipe.name}`
|
|
|
|
|
+ : `一道精美的${props.recipe.cuisine}菜肴:${props.recipe.name}`,
|
|
|
generatedAt: new Date().toISOString()
|
|
generatedAt: new Date().toISOString()
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|