what-to-eat/src/components/RecipeCard.vue

<template>
    <div class="recipe-card bg-white">
        <!-- 菜谱头部 -->
        <div class="bg-pink-400 text-white p-4 md:p-6 border-b-2 border-black">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <h3 class="text-lg font-bold mb-1 line-clamp-2">{{ recipe.name }}</h3>
                    <div class="flex items-center gap-3 text-sm">
                        <span class="bg-white/20 px-2 py-1 rounded text-xs"> 👨‍🍳 {{ recipe.cuisine }} </span>
                        <span>⏱️ {{ formatTime(recipe.cookingTime) }}</span>
                        <span>📊 {{ difficultyText }}</span>
                    </div>
                </div>
                <div class="text-2xl ml-2">🍽️</div>
            </div>
        </div>

        <div class="p-2 md:p-6">
            <!-- 食材列表 -->
            <div class="mb-4">
                <h4 class="text-sm font-bold text-dark-800 mb-2 flex items-center gap-1">🥬 所需食材</h4>
                <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">
                        {{ ingredient }}
                    </span>
                </div>
            </div>

            <!-- 制作步骤预览 -->
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="text-sm font-bold text-dark-800 flex items-center gap-1">📝 制作步骤</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">
                        {{ isExpanded ? '收起' : '展开' }}
                    </button>
                </div>

                <!-- 简化步骤预览 -->
                <div v-if="!isExpanded" class="space-y-2">
                    <div v-for="step in recipe.steps.slice(0, 3)" :key="step.step" class="flex gap-2 p-2 bg-gray-50 rounded border border-gray-200">
                        <div class="flex-shrink-0 w-5 h-5 bg-dark-800 text-white rounded flex items-center justify-center font-bold text-xs">
                            {{ step.step }}
                        </div>
                        <p class="text-dark-700 text-xs line-clamp-2">{{ step.description }}</p>
                    </div>
                    <div v-if="recipe.steps.length > 3" class="text-center py-1">
                        <span class="text-gray-500 text-xs">还有 {{ recipe.steps.length - 3 }} 个步骤...</span>
                    </div>
                </div>

                <!-- 完整步骤 -->
                <div v-else class="space-y-2">
                    <div v-for="step in recipe.steps" :key="step.step" class="flex gap-3 p-3 bg-gray-50 rounded border border-gray-200">
                        <div class="flex-shrink-0 w-6 h-6 bg-dark-800 text-white rounded flex items-center justify-center font-bold text-xs">
                            {{ step.step }}
                        </div>
                        <div class="flex-1">
                            <p class="text-dark-800 mb-1 text-sm">{{ step.description }}</p>
                            <div v-if="step.time || step.temperature" class="flex gap-2 text-xs text-gray-600">
                                <span v-if="step.time" class="bg-white px-2 py-1 rounded border"> ⏱️ {{ formatTime(step.time) }} </span>
                                <span v-if="step.temperature" class="bg-white px-2 py-1 rounded border"> 🌡️ {{ step.temperature }} </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 烹饪技巧 -->
            <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>
                <div class="bg-yellow-100 border-l-4 border-yellow-400 p-3 rounded-r">
                    <ul class="space-y-1">
                        <li v-for="tip in recipe.tips" :key="tip" class="flex items-start gap-2 text-dark-700">
                            <span class="text-yellow-600 mt-1 text-xs">•</span>
                            <span class="text-xs">{{ tip }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 营养分析 -->
            <div v-if="isExpanded" class="mb-4">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="text-sm font-bold text-dark-800 flex items-center gap-1">📊 营养分析</h4>
                    <button
                        @click="fetchNutritionAnalysis"
                        :disabled="isFetchingNutrition"
                        class="bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200 disabled:cursor-not-allowed"
                    >
                        <span class="flex items-center gap-1">
                            <template v-if="isFetchingNutrition">
                                <div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
                                获取中...
                            </template>
                            <template v-else-if="recipe.nutritionAnalysis"> 🔄 重新获取 </template>
                            <template v-else> ✨ 获取营养分析 </template>
                        </span>
                    </button>
                </div>

                <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>
                    <h5 class="text-sm font-bold text-dark-800 mb-1">营养师正在分析中...</h5>
                    <p class="text-gray-600 text-xs">{{ nutritionLoadingText }}</p>
                </div>

                <div v-else-if="nutritionError" class="bg-red-100 border border-red-400 text-red-700 px-3 py-2 rounded text-xs mb-3">
                    {{ nutritionError }}
                </div>

                <NutritionAnalysis v-if="recipe.nutritionAnalysis" :nutritionAnalysis="recipe.nutritionAnalysis" />
                <div v-else-if="!isFetchingNutrition" class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                    <div class="text-gray-400 text-2xl mb-2">🥗</div>
                    <p class="text-gray-500 text-xs">点击上方按钮获取营养分析</p>
                </div>
            </div>

            <!-- 酒水搭配 -->
            <div v-if="isExpanded" class="mb-4">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="text-sm font-bold text-dark-800 flex items-center gap-1">🍷 酒水搭配</h4>
                    <button
                        @click="fetchWinePairing"
                        :disabled="isFetchingWine"
                        class="bg-purple-500 hover:bg-purple-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200 disabled:cursor-not-allowed"
                    >
                        <span class="flex items-center gap-1">
                            <template v-if="isFetchingWine">
                                <div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
                                获取中...
                            </template>
                            <template v-else-if="recipe.winePairing"> 🔄 重新获取 </template>
                            <template v-else> ✨ 获取酒水搭配 </template>
                        </span>
                    </button>
                </div>

                <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>
                    <h5 class="text-sm font-bold text-dark-800 mb-1">侍酒师正在推荐中...</h5>
                    <p class="text-gray-600 text-xs">{{ wineLoadingText }}</p>
                </div>

                <div v-else-if="wineError" class="bg-red-100 border border-red-400 text-red-700 px-3 py-2 rounded text-xs mb-3">
                    {{ wineError }}
                </div>

                <WinePairing v-if="recipe.winePairing" :winePairing="recipe.winePairing" />
                <div v-else-if="!isFetchingWine" class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                    <div class="text-gray-400 text-2xl mb-2">🍾</div>
                    <p class="text-gray-500 text-xs">点击上方按钮获取酒水搭配</p>
                </div>
            </div>

            <!-- 效果图区域 -->
            <div class="mt-4 pt-4 border-t border-gray-200">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="text-sm font-bold text-dark-800 flex items-center gap-1">🖼️ 菜品效果图</h4>
                    <button
                        @click="generateImage"
                        :disabled="isGeneratingImage"
                        class="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-xs font-medium border border-black transition-all duration-200 disabled:cursor-not-allowed"
                    >
                        <span class="flex items-center gap-1">
                            <template v-if="isGeneratingImage">
                                <div class="animate-spin w-3 h-3 border border-white border-t-transparent rounded-full"></div>
                                生成中...
                            </template>
                            <template v-else> ✨ 生成效果图 </template>
                        </span>
                    </button>
                </div>

                <!-- 加载状态 -->
                <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>
                    <h5 class="text-sm font-bold text-dark-800 mb-1">AI画师正在创作中...</h5>
                    <p class="text-gray-600 text-xs">{{ imageLoadingText }}</p>
                </div>

                <!-- 生成的图片 -->
                <div v-else-if="generatedImage" class="mb-3">
                    <img :src="generatedImage.url" :alt="`${recipe.name}效果图`" class="w-full h-[20rem] object-cover rounded-lg border-2 border-black" @error="handleImageError" />
                </div>

                <!-- 错误提示 -->
                <div v-else-if="imageError" class="bg-red-100 border border-red-400 text-red-700 px-3 py-2 rounded text-xs">
                    {{ imageError }}
                </div>

                <!-- 空状态 -->
                <div v-else class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-10 text-center">
                    <div class="text-gray-400 text-2xl mb-2">📷</div>
                    <p class="text-gray-500 text-xs">点击上方按钮生成菜品效果图</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, onUnmounted } from 'vue'
import type { Recipe } from '@/types'
import { generateRecipeImage, type GeneratedImage } from '@/services/imageService'
import { getNutritionAnalysis, getWinePairing } from '@/services/aiService'
import NutritionAnalysis from './NutritionAnalysis.vue'
import WinePairing from './WinePairing.vue'

interface Props {
    recipe: Recipe
}

const props = defineProps<Props>()
const isExpanded = ref(false)
const isGeneratingImage = ref(false)
const generatedImage = ref<GeneratedImage | null>(null)
const imageError = ref<string>('')
const imageLoadingText = ref('正在构思画面布局...')
const nutritionLoadingText = ref('营养师正在分析中...')
const wineLoadingText = ref('侍酒师正在推荐中...')
const isFetchingNutrition = ref(false)
const nutritionError = ref('')
const isFetchingWine = ref(false)
const wineError = ref('')

// 图片生成加载文字轮播
const imageLoadingTexts = [
    '正在构思画面布局...',
    '正在调配色彩搭配...',
    '正在绘制食材细节...',
    '正在优化光影效果...',
    '正在精修画面质感...',
    '正在添加最后润色...',
    '精美效果图即将完成...'
]

// 营养分析加载文字轮播
const nutritionLoadingTexts = [
    '营养师正在分析中...',
    '正在计算卡路里...',
    '正在分析蛋白质含量...',
    '正在评估维生素含量...',
    '正在生成健康建议...',
    '正在准备饮食建议...',
    '营养分析即将完成...'
]

// 酒水搭配加载文字轮播
const wineLoadingTexts = [
    '侍酒师正在推荐中...',
    '正在匹配风味特征...',
    '正在考虑酒体平衡...',
    '正在评估搭配效果...',
    '正在选择最佳温度...',
    '正在准备搭配理由...',
    '完美搭配即将呈现...'
]

let imageLoadingInterval: NodeJS.Timeout | null = null

const difficultyText = computed(() => {
    const difficultyMap = {
        easy: '简单',
        medium: '中等',
        hard: '困难'
    }
    return difficultyMap[props.recipe.difficulty] || '中等'
})

// 格式化时间显示
const formatTime = (minutes: number): string => {
    if (minutes < 60) {
        return `${minutes}分钟`
    }

    const days = Math.floor(minutes / (24 * 60))
    const hours = Math.floor((minutes % (24 * 60)) / 60)
    const remainingMinutes = minutes % 60

    let result = ''

    if (days > 0) {
        result += `${days}天`
    }

    if (hours > 0) {
        result += `${hours}小时`
    }

    if (remainingMinutes > 0) {
        result += `${remainingMinutes}分钟`
    }

    return result || '0分钟'
}

const toggleExpanded = () => {
    isExpanded.value = !isExpanded.value
}

const generateImage = async () => {
    if (isGeneratingImage.value) return

    isGeneratingImage.value = true
    imageError.value = ''

    // 开始图片生成加载文字轮播
    let textIndex = 0
    imageLoadingInterval = setInterval(() => {
        imageLoadingText.value = imageLoadingTexts[textIndex]
        textIndex = (textIndex + 1) % imageLoadingTexts.length
    }, 2000)

    try {
        const image = await generateRecipeImage(props.recipe)
        generatedImage.value = image
    } catch (error) {
        console.error('生成图片失败:', error)
        imageError.value = '生成图片失败，请稍后重试'
    } finally {
        isGeneratingImage.value = false
        if (imageLoadingInterval) {
            clearInterval(imageLoadingInterval)
            imageLoadingInterval = null
        }
    }
}

const handleImageError = () => {
    imageError.value = '图片加载失败'
    generatedImage.value = null
}

const fetchNutritionAnalysis = async () => {
    if (isFetchingNutrition.value) return

    isFetchingNutrition.value = true
    nutritionError.value = ''

    let textIndex = 0
    const interval = setInterval(() => {
        nutritionLoadingText.value = nutritionLoadingTexts[textIndex]
        textIndex = (textIndex + 1) % nutritionLoadingTexts.length
    }, 2000)

    try {
        const analysis = await getNutritionAnalysis(props.recipe)
        props.recipe.nutritionAnalysis = analysis
    } catch (error) {
        console.error('获取营养分析失败:', error)
        nutritionError.value = '获取营养分析失败，请稍后重试'
    } finally {
        isFetchingNutrition.value = false
        clearInterval(interval)
    }
}

const fetchWinePairing = async () => {
    if (isFetchingWine.value) return

    isFetchingWine.value = true
    wineError.value = ''

    let textIndex = 0
    const interval = setInterval(() => {
        wineLoadingText.value = wineLoadingTexts[textIndex]
        textIndex = (textIndex + 1) % wineLoadingTexts.length
    }, 2000)

    try {
        const pairing = await getWinePairing(props.recipe)
        props.recipe.winePairing = pairing
    } catch (error) {
        console.error('获取酒水搭配失败:', error)
        wineError.value = '获取酒水搭配失败，请稍后重试'
    } finally {
        isFetchingWine.value = false
        clearInterval(interval)
    }
}

onUnmounted(() => {
    if (imageLoadingInterval) {
        clearInterval(imageLoadingInterval)
    }
})
</script>

<style scoped>
.recipe-card {
    @apply transition-all duration-300 h-full;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>