新增国际菜系+酒水推荐

src/components/RecipeCard.vue

@@ -83,6 +83,11 @@
                 <NutritionAnalysis :nutritionAnalysis="recipe.nutritionAnalysis" />
             </div>
 
+            <!-- 酒水搭配 -->
+            <div v-if="isExpanded" class="mb-4">
+                <WinePairing :winePairing="recipe.winePairing" />
+            </div>
+
             <!-- 效果图区域 -->
             <div class="mt-4 pt-4 border-t border-gray-200">
                 <div class="flex items-center justify-between mb-3">
@@ -134,6 +139,7 @@ import { computed, ref, onUnmounted } from 'vue'
 import type { Recipe } from '@/types'
 import { generateRecipeImage, type GeneratedImage } from '@/services/imageService'
 import NutritionAnalysis from './NutritionAnalysis.vue'
+import WinePairing from './WinePairing.vue'
 
 interface Props {
     recipe: Recipe

src/components/WinePairing.vue

@@ -0,0 +1,123 @@
+<template>
+    <div v-if="winePairing" class="wine-pairing">
+        <h4 class="text-sm font-bold text-dark-800 mb-3 flex items-center gap-1">🍷 酒水搭配</h4>
+
+        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
+            <!-- 酒水信息卡片 -->
+            <div class="bg-white rounded-lg p-4 border border-purple-300 mb-3">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="flex items-center gap-2">
+                        <span class="text-2xl">{{ getWineIcon(winePairing.type) }}</span>
+                        <div>
+                            <h5 class="font-bold text-purple-800">{{ winePairing.name }}</h5>
+                            <p class="text-xs text-gray-600">{{ getWineTypeText(winePairing.type) }}</p>
+                        </div>
+                    </div>
+                    <div v-if="winePairing.alcoholContent" class="text-right">
+                        <div class="text-sm font-bold text-purple-600">{{ winePairing.alcoholContent }}</div>
+                        <div class="text-xs text-gray-500">酒精度</div>
+                    </div>
+                </div>
+
+                <!-- 风味描述 -->
+                <div class="mb-3">
+                    <p class="text-sm text-gray-700 italic">"{{ winePairing.flavor }}"</p>
+                    <p v-if="winePairing.origin" class="text-xs text-gray-500 mt-1">产地：{{ winePairing.origin }}</p>
+                </div>
+
+                <!-- 搭配理由 -->
+                <div class="bg-purple-100 rounded-lg p-3 mb-3">
+                    <h6 class="text-xs font-bold text-purple-700 mb-1">🎯 搭配理由</h6>
+                    <p class="text-xs text-purple-800">{{ winePairing.reason }}</p>
+                </div>
+
+                <!-- 侍酒建议 -->
+                <div class="grid grid-cols-2 gap-3 text-xs">
+                    <div class="bg-blue-50 rounded p-2 border border-blue-200">
+                        <div class="flex items-center gap-1 mb-1">
+                            <span>🌡️</span>
+                            <span class="font-bold text-blue-700">侍酒温度</span>
+                        </div>
+                        <p class="text-blue-800">{{ winePairing.servingTemperature }}</p>
+                    </div>
+                    <div v-if="winePairing.glassType" class="bg-amber-50 rounded p-2 border border-amber-200">
+                        <div class="flex items-center gap-1 mb-1">
+                            <span>🥂</span>
+                            <span class="font-bold text-amber-700">推荐酒杯</span>
+                        </div>
+                        <p class="text-amber-800">{{ winePairing.glassType }}</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 小贴士 -->
+            <div class="bg-yellow-100 border border-yellow-300 rounded-lg p-3">
+                <div class="flex items-start gap-2">
+                    <span class="text-yellow-600 text-sm">💡</span>
+                    <div>
+                        <h6 class="text-xs font-bold text-yellow-700 mb-1">品鉴小贴士</h6>
+                        <p class="text-xs text-yellow-800">{{ getWineTip(winePairing.type) }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { WinePairing } from '@/types'
+
+interface Props {
+    winePairing: WinePairing | undefined
+}
+
+defineProps<Props>()
+
+const getWineIcon = (type: string): string => {
+    const iconMap: Record<string, string> = {
+        red_wine: '🍷',
+        white_wine: '🥂',
+        beer: '🍺',
+        sake: '🍶',
+        tea: '🍵',
+        cocktail: '🍸',
+        spirits: '🥃',
+        non_alcoholic: '🥤'
+    }
+    return iconMap[type] || '🍷'
+}
+
+const getWineTypeText = (type: string): string => {
+    const typeMap: Record<string, string> = {
+        red_wine: '红酒',
+        white_wine: '白酒',
+        beer: '啤酒',
+        sake: '清酒',
+        tea: '茶饮',
+        cocktail: '鸡尾酒',
+        spirits: '烈酒',
+        non_alcoholic: '无酒精饮品'
+    }
+    return typeMap[type] || '酒水'
+}
+
+const getWineTip = (type: string): string => {
+    const tipMap: Record<string, string> = {
+        red_wine: '红酒建议提前30分钟开瓶醒酒，让酒体充分接触空气，释放更丰富的香气。',
+        white_wine: '白酒应冰镇后饮用，开瓶后尽快享用以保持最佳口感和香气。',
+        beer: '啤酒最佳饮用温度为4-6°C，倒酒时应倾斜酒杯，形成适量泡沫。',
+        sake: '清酒可温饮或冷饮，温饮时加热至40-50°C，能更好地体现酒的层次感。',
+        tea: '茶水温度不宜过高，85°C左右最佳，可以多次冲泡，每次品味不同层次。',
+        cocktail: '鸡尾酒应现调现饮，注意冰块的使用和装饰的搭配。',
+        spirits: '烈酒可纯饮或加冰，小口品尝，感受酒体的复杂层次。',
+        non_alcoholic: '无酒精饮品同样注重温度和新鲜度，可根据个人喜好调整甜度。'
+    }
+    return tipMap[type] || '适量饮用，品味生活。'
+}
+</script>
+
+<style scoped>
+.wine-pairing {
+    @apply transition-all duration-300;
+}
+</style>

src/config/cuisines.ts

@@ -64,5 +64,62 @@ export const cuisines: CuisineType[] = [
         avatar: '👨‍🍳',
         specialty: '重油重色，醇厚朴实',
         prompt: `身为徽菜掌门，你掌握文火炖焖绝技。徽菜强调重油保色、火腿提鲜、山野本味。请针对用户食材设计徽州古韵菜，突出炭火慢炖与油色控制。回答需包含：徽派菜名、三阶段火功法、火腿吊味技巧、收汁成色要诀。`
+    },
+    // 国际菜系
+    {
+        id: 'japanese',
+        name: '日式料理大师',
+        description: '和食之道的极致美学',
+        avatar: '🍣',
+        specialty: '清淡本味，季节感强',
+        prompt: `作为和食职人，你深谙日本料理的精髓。日式料理追求食材本味、季节感、视觉美感和营养平衡。请基于用户食材创作正宗和食，突出umami鲜味与刀工技艺。回答需包含：雅致菜名、传统制作工艺、季节搭配理念、摆盘美学指导。`
+    },
+    {
+        id: 'korean',
+        name: '韩式料理大师',
+        description: '韩半岛的发酵智慧',
+        avatar: '🥢',
+        specialty: '发酵调味，营养均衡',
+        prompt: `身为韩食专家，你精通发酵调味精髓。韩式料理讲究发酵食品、营养搭配、辣椒调味和banchan小菜文化。请依据用户食材设计地道韩食，突出发酵风味与营养平衡。回答需包含：韩式菜名、发酵调料运用、营养搭配原理、banchan配菜建议。`
+    },
+    {
+        id: 'italian',
+        name: '意式料理大师',
+        description: '地中海的阳光味道',
+        avatar: '🍝',
+        specialty: '简约精致，橄榄油香',
+        prompt: `作为意大利厨师，你传承地中海饮食传统。意式料理崇尚简约、优质食材、橄榄油运用和区域特色。请根据用户食材创作authentic意式菜，突出食材品质与地域风味。回答需包含：意式菜名、橄榄油使用技巧、区域特色解析、pasta/risotto制作要点。`
+    },
+    {
+        id: 'french',
+        name: '法式料理大师',
+        description: '高卢雄鸡的优雅艺术',
+        avatar: '🥖',
+        specialty: '精致优雅，酱汁丰富',
+        prompt: `身为法餐主厨，你掌握经典法式烹饪技法。法式料理注重技法精湛、酱汁层次、食材搭配和presentation艺术。请基于用户食材设计经典法菜，突出烹饪技法与酱汁调制。回答需包含：法式菜名、经典技法运用、酱汁制作秘诀、摆盘艺术指导。`
+    },
+    {
+        id: 'indian',
+        name: '印度料理大师',
+        description: '香料王国的神秘魅力',
+        avatar: '🍛',
+        specialty: '香料丰富，层次复杂',
+        prompt: `作为印度香料大师，你精通masala调配艺术。印度料理以香料复合、层次丰富、素食友好和阿育吠陀养生为特色。请针对用户食材创作authentic印度菜，突出香料平衡与健康理念。回答需包含：印式菜名、香料配比秘方、烹饪技法详解、阿育吠陀养生原理。`
+    },
+    {
+        id: 'thai',
+        name: '泰式料理大师',
+        description: '暹罗王国的酸甜平衡',
+        avatar: '🌶️',
+        specialty: '酸甜辣鲜，香草丰富',
+        prompt: `身为泰菜专家，你深谙泰式风味平衡之道。泰式料理追求酸甜辣咸的完美平衡、新鲜香草运用和椰浆调味。请依据用户食材设计正宗泰菜，突出风味层次与香草搭配。回答需包含：泰式菜名、四味平衡技巧、香草使用指南、椰浆调味要诀。`
+    },
+    {
+        id: 'mexican',
+        name: '墨西哥料理大师',
+        description: '阿兹特克的火辣传承',
+        avatar: '🌮',
+        specialty: '辣椒丰富，玉米文化',
+        prompt: `作为墨西哥厨师，你传承古老的阿兹特克烹饪智慧。墨西哥料理以辣椒品种丰富、玉米文化、豆类蛋白和mole酱著称。请根据用户食材创作authentic墨西哥菜，突出辣椒运用与传统技法。回答需包含：墨式菜名、辣椒品种选择、玉米制品技巧、mole酱调制方法。`
     }
 ]

src/services/aiService.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import type { Recipe, CuisineType, NutritionAnalysis } from '@/types'
+import type { Recipe, CuisineType, NutritionAnalysis, WinePairing } from '@/types'
 
 // AI服务配置 - 智谱AI
 const AI_CONFIG = {
@@ -48,7 +48,7 @@ export const generateRecipe = async (ingredients: string[], cuisine: CuisineType
 
         prompt += `
 
-请按照以下JSON格式返回菜谱，包含营养分析：
+请按照以下JSON格式返回菜谱，包含营养分析和酒水搭配：
 {
   "name": "菜品名称",
   "ingredients": ["食材1", "食材2"],
@@ -80,6 +80,16 @@ export const generateRecipe = async (ingredients: string[], cuisine: CuisineType
     "balanceAdvice": ["建议搭配蔬菜沙拉增加维生素", "可适量减少盐分"],
     "dietaryTags": ["高蛋白", "低脂"],
     "servingSize": "1人份"
+  },
+  "winePairing": {
+    "name": "推荐酒水名称",
+    "type": "red_wine",
+    "reason": "搭配理由说明",
+    "servingTemperature": "16-18°C",
+    "glassType": "波尔多杯",
+    "alcoholContent": "13.5%",
+    "flavor": "风味描述",
+    "origin": "产地"
   }
 }`
 
@@ -126,7 +136,8 @@ export const generateRecipe = async (ingredients: string[], cuisine: CuisineType
             cookingTime: recipeData.cookingTime || 25,
             difficulty: recipeData.difficulty || 'medium',
             tips: recipeData.tips || ['注意火候控制', '调味要适中'],
-            nutritionAnalysis: recipeData.nutritionAnalysis || generateFallbackNutrition(ingredients)
+            nutritionAnalysis: recipeData.nutritionAnalysis || generateFallbackNutrition(ingredients),
+            winePairing: recipeData.winePairing || generateFallbackWinePairing(cuisine, ingredients)
         }
 
         return recipe
@@ -185,7 +196,7 @@ export const generateCustomRecipe = async (ingredients: string[], customPrompt:
 
 用户的特殊要求：${customPrompt}
 
-请按照以下JSON格式返回菜谱，包含营养分析：
+请按照以下JSON格式返回菜谱，包含营养分析和酒水搭配：
 {
   "name": "菜品名称",
   "ingredients": ["食材1", "食材2"],
@@ -217,6 +228,16 @@ export const generateCustomRecipe = async (ingredients: string[], customPrompt:
     "balanceAdvice": ["建议搭配蔬菜沙拉增加维生素", "可适量减少盐分"],
     "dietaryTags": ["高蛋白", "低脂"],
     "servingSize": "1人份"
+  },
+  "winePairing": {
+    "name": "推荐酒水名称",
+    "type": "red_wine",
+    "reason": "搭配理由说明",
+    "servingTemperature": "16-18°C",
+    "glassType": "波尔多杯",
+    "alcoholContent": "13.5%",
+    "flavor": "风味描述",
+    "origin": "产地"
   }
 }`
 
@@ -264,7 +285,8 @@ export const generateCustomRecipe = async (ingredients: string[], customPrompt:
             cookingTime: recipeData.cookingTime || 25,
             difficulty: recipeData.difficulty || 'medium',
             tips: recipeData.tips || ['根据个人口味调整', '注意火候控制'],
-            nutritionAnalysis: recipeData.nutritionAnalysis || generateFallbackNutrition(ingredients)
+            nutritionAnalysis: recipeData.nutritionAnalysis || generateFallbackNutrition(ingredients),
+            winePairing: recipeData.winePairing || generateFallbackWinePairing({ id: 'custom', name: '自定义' } as any, ingredients)
         }
 
         return recipe
@@ -325,5 +347,145 @@ const generateFallbackNutrition = (ingredients: string[]): NutritionAnalysis =>
     }
 }
 
+/**
+ * 生成后备酒水搭配数据
+ * @param cuisine 菜系信息
+ * @param ingredients 食材列表
+ * @returns WinePairing
+ */
+const generateFallbackWinePairing = (cuisine: CuisineType, ingredients: string[]): WinePairing => {
+    const hasSpicy = ingredients.some(ing => ['辣椒', '花椒', '胡椒', '姜', '蒜', '洋葱'].some(spice => ing.includes(spice)))
+    const hasMeat = ingredients.some(ing => ['肉', '鸡', '鱼', '虾', '蛋', '牛', '猪', '羊'].some(meat => ing.includes(meat)))
+    const hasSeafood = ingredients.some(ing => ['鱼', '虾', '蟹', '贝', '海带', '紫菜'].some(seafood => ing.includes(seafood)))
+    const isLight = ingredients.some(ing => ['菜', '瓜', '豆腐', '蛋'].some(light => ing.includes(light)))
+
+    // 根据菜系推荐酒水
+    const cuisineWineMap: Record<string, Partial<WinePairing>> = {
+        川菜大师: {
+            name: '德国雷司令',
+            type: 'white_wine',
+            reason: '雷司令的甜度和酸度能很好地平衡川菜的麻辣，清洁口腔',
+            servingTemperature: '8-10°C',
+            glassType: '雷司令杯',
+            alcoholContent: '11-12%',
+            flavor: '清新果香，微甜带酸',
+            origin: '德国莱茵河谷'
+        },
+        粤菜大师: {
+            name: '香槟',
+            type: 'white_wine',
+            reason: '香槟的气泡和酸度与粤菜的清淡鲜美完美搭配',
+            servingTemperature: '6-8°C',
+            glassType: '香槟杯',
+            alcoholContent: '12%',
+            flavor: '清爽气泡，柑橘香气',
+            origin: '法国香槟区'
+        },
+        日式料理大师: {
+            name: '清酒',
+            type: 'sake',
+            reason: '清酒的清淡甘甜与日式料理的鲜美本味相得益彰',
+            servingTemperature: '10-15°C',
+            glassType: '清酒杯',
+            alcoholContent: '15-16%',
+            flavor: '清香甘甜，口感顺滑',
+            origin: '日本'
+        },
+        法式料理大师: {
+            name: '勃艮第红酒',
+            type: 'red_wine',
+            reason: '勃艮第红酒的优雅单宁与法式料理的精致风味完美融合',
+            servingTemperature: '16-18°C',
+            glassType: '勃艮第杯',
+            alcoholContent: '13-14%',
+            flavor: '优雅果香，单宁柔顺',
+            origin: '法国勃艮第'
+        },
+        意式料理大师: {
+            name: '基安帝红酒',
+            type: 'red_wine',
+            reason: '基安帝的酸度和果香与意式料理的番茄和香草完美搭配',
+            servingTemperature: '16-18°C',
+            glassType: '波尔多杯',
+            alcoholContent: '12-13%',
+            flavor: '樱桃果香，酸度适中',
+            origin: '意大利托斯卡纳'
+        },
+        印度料理大师: {
+            name: '拉西酸奶饮',
+            type: 'non_alcoholic',
+            reason: '拉西的奶香和清凉感能很好地缓解印度香料的辛辣',
+            servingTemperature: '4-6°C',
+            glassType: '高脚杯',
+            alcoholContent: '0%',
+            flavor: '奶香浓郁，清凉甘甜',
+            origin: '印度'
+        }
+    }
+
+    // 获取菜系推荐，如果没有则根据食材特点推荐
+    let winePairing = cuisineWineMap[cuisine.name] || {}
+
+    // 如果没有菜系特定推荐，根据食材特点推荐
+    if (!winePairing.name) {
+        if (hasSpicy) {
+            winePairing = {
+                name: '德国雷司令',
+                type: 'white_wine',
+                reason: '甜白酒能很好地平衡辛辣食物，清洁口腔',
+                servingTemperature: '8-10°C',
+                glassType: '白酒杯',
+                alcoholContent: '11-12%',
+                flavor: '果香浓郁，微甜清新',
+                origin: '德国'
+            }
+        } else if (hasSeafood) {
+            winePairing = {
+                name: '长相思白酒',
+                type: 'white_wine',
+                reason: '白酒的酸度和矿物质感与海鲜的鲜味完美搭配',
+                servingTemperature: '8-10°C',
+                glassType: '白酒杯',
+                alcoholContent: '12-13%',
+                flavor: '清新草本，柑橘香气',
+                origin: '新西兰'
+            }
+        } else if (hasMeat && !isLight) {
+            winePairing = {
+                name: '赤霞珠红酒',
+                type: 'red_wine',
+                reason: '红酒的单宁与肉类的蛋白质结合，提升整体风味',
+                servingTemperature: '16-18°C',
+                glassType: '波尔多杯',
+                alcoholContent: '13-14%',
+                flavor: '浓郁果香，单宁丰富',
+                origin: '法国波尔多'
+            }
+        } else {
+            winePairing = {
+                name: '绿茶',
+                type: 'tea',
+                reason: '绿茶的清香淡雅与清淡菜品相得益彰，有助消化',
+                servingTemperature: '70-80°C',
+                glassType: '茶杯',
+                alcoholContent: '0%',
+                flavor: '清香淡雅，回甘甜美',
+                origin: '中国'
+            }
+        }
+    }
+
+    return {
+        name: winePairing.name || '绿茶',
+        type: winePairing.type || 'tea',
+        reason: winePairing.reason || '经典搭配，有助消化',
+        servingTemperature: winePairing.servingTemperature || '常温',
+        glassType: winePairing.glassType,
+        alcoholContent: winePairing.alcoholContent,
+        flavor: winePairing.flavor || '清香怡人',
+        origin: winePairing.origin
+    }
+}
+
 // 导出配置更新函数，供外部使用
 export { AI_CONFIG }

src/types/index.ts

@@ -26,6 +26,8 @@ export interface Recipe {
     difficulty: 'easy' | 'medium' | 'hard'
     tips: string[]
     nutritionAnalysis?: NutritionAnalysis // 营养分析
+    winePairing?: WinePairing // 酒水搭配
+    winePairing?: WinePairing // 酒水搭配
 }
 
 // 制作步骤
@@ -60,6 +62,30 @@ export interface NutritionAnalysis {
     servingSize: string // 建议份量
 }
 
+// 酒水搭配
+export interface WinePairing {
+    name: string // 酒水名称
+    type: 'red_wine' | 'white_wine' | 'beer' | 'sake' | 'tea' | 'cocktail' | 'spirits' | 'non_alcoholic' // 酒水类型
+    reason: string // 搭配理由
+    servingTemperature: string // 侍酒温度
+    glassType?: string // 推荐酒杯
+    alcoholContent?: string // 酒精度
+    flavor: string // 风味描述
+    origin?: string // 产地
+}
+
+// 酒水搭配类型
+export interface WinePairing {
+    name: string // 酒水名称
+    type: 'red_wine' | 'white_wine' | 'beer' | 'sake' | 'tea' | 'cocktail' | 'spirits' | 'non_alcoholic' // 酒水类型
+    reason: string // 搭配理由
+    flavor: string // 风味描述
+    servingTemperature: string // 侍酒温度
+    glassType?: string // 推荐酒杯
+    alcoholContent?: string // 酒精度
+    origin?: string // 产地
+}
+
 // AI响应类型
 export interface AIResponse {
     success: boolean

src/views/Home.vue

@@ -71,12 +71,22 @@
 
                         <!-- 快速选择食材 -->
                         <div class="mt-4">
-                            <button @click="toggleIngredientPicker" class="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors">
-                                <span class="transform transition-transform duration-200" :class="{ 'rotate-90': showIngredientPicker }">▶</span>
-                                快速选择食材
+                            <button
+                                @click="toggleIngredientPicker"
+                                class="flex items-center justify-between w-full p-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200"
+                            >
+                                <span class="flex items-center gap-2">
+                                    <span class="text-base">🥬</span>
+                                    <span class="font-medium">快速选择食材</span>
+                                </span>
+                                <span class="transform transition-transform duration-200 text-gray-400" :class="{ 'rotate-180': showIngredientPicker }">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                                    </svg>
+                                </span>
                             </button>
 
-                            <div v-if="showIngredientPicker" class="mt-3 border-2 border-gray-200 rounded-lg overflow-hidden bg-white">
+                            <div v-if="showIngredientPicker" class="mt-2 border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm">
                                 <!-- 食材展示区域 -->
                                 <div class="p-3 max-h-80 overflow-y-auto">
                                     <div class="space-y-4">
@@ -95,9 +105,9 @@
                                                     :key="item"
                                                     @click="quickAddIngredient(item)"
                                                     :disabled="ingredients.includes(item) || ingredients.length >= 10"
-                                                    class="px-2 py-1 text-xs rounded border border-gray-300 hover:border-pink-400 hover:bg-pink-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed disabled:border-gray-200 transition-all duration-200"
+                                                    class="px-3 py-1.5 text-xs font-medium rounded-full border border-gray-300 hover:border-pink-400 hover:bg-pink-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed disabled:border-gray-200 transition-all duration-200 hover:shadow-sm"
                                                     :class="{
-                                                        'bg-yellow-100 border-yellow-400 text-yellow-800': ingredients.includes(item),
+                                                        'bg-yellow-100 border-yellow-400 text-yellow-800 shadow-sm': ingredients.includes(item),
                                                         'hover:scale-105': !ingredients.includes(item) && ingredients.length < 10
                                                     }"
                                                 >
@@ -151,20 +161,47 @@
                             <p class="text-sm">已设置自定义要求，将忽略菜系选择</p>
                             <button @click="customPrompt = ''" class="text-blue-600 hover:text-blue-700 underline text-sm mt-2">清除自定义要求以选择菜系</button>
                         </div>
-                        <div v-else class="grid grid-cols-2 gap-3">
-                            <button
-                                v-for="cuisine in cuisines.slice(0, 10)"
-                                :key="cuisine.id"
-                                @click="selectCuisine(cuisine)"
-                                @mouseenter="showCuisineTooltip(cuisine, $event)"
-                                @mouseleave="hideCuisineTooltip"
-                                :class="[
-                                    'p-3 rounded-lg border-2 border-black font-medium text-sm transition-all duration-200 relative',
-                                    selectedCuisines.includes(cuisine.id) ? 'bg-yellow-400 text-dark-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                ]"
-                            >
-                                {{ cuisine.name.replace('大师', '') }}
-                            </button>
+                        <div v-else>
+                            <!-- 中华八大菜系 -->
+                            <div class="mb-4">
+                                <h5 class="text-xs font-bold text-gray-700 mb-2 flex items-center gap-1">🇨🇳 中华八大菜系</h5>
+                                <div class="grid grid-cols-2 gap-2">
+                                    <button
+                                        v-for="cuisine in cuisines.slice(0, 8)"
+                                        :key="cuisine.id"
+                                        @click="selectCuisine(cuisine)"
+                                        @mouseenter="showCuisineTooltip(cuisine, $event)"
+                                        @mouseleave="hideCuisineTooltip"
+                                        :class="[
+                                            'p-2 rounded-lg border-2 border-black font-medium text-xs transition-all duration-200 relative',
+                                            selectedCuisines.includes(cuisine.id) ? 'bg-yellow-400 text-dark-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        ]"
+                                    >
+                                        {{ cuisine.name.replace('大师', '') }}
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- 国际菜系 -->
+                            <div>
+                                <h5 class="text-xs font-bold text-gray-700 mb-2 flex items-center gap-1">🌍 国际菜系</h5>
+                                <div class="grid grid-cols-2 gap-2">
+                                    <button
+                                        v-for="cuisine in cuisines.slice(8)"
+                                        :key="cuisine.id"
+                                        @click="selectCuisine(cuisine)"
+                                        @mouseenter="showCuisineTooltip(cuisine, $event)"
+                                        @mouseleave="hideCuisineTooltip"
+                                        :class="[
+                                            'p-2 rounded-lg border-2 border-black font-medium text-xs transition-all duration-200 relative flex items-center gap-1',
+                                            selectedCuisines.includes(cuisine.id) ? 'bg-yellow-400 text-dark-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        ]"
+                                    >
+                                        <span>{{ cuisine.avatar }}</span>
+                                        <span>{{ cuisine.name.replace('料理大师', '').replace('大师', '') }}</span>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -175,19 +212,120 @@
                         <span class="font-bold">3. 或自定义要求</span>
                     </div>
                     <div class="bg-white border-2 border-black rounded-lg rounded-tl-none p-6 h-full flex flex-col">
+                        <!-- 快速预设选项 -->
+                        <div class="mb-4">
+                            <button
+                                @click="togglePresetPicker"
+                                class="flex items-center justify-between w-full p-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 mb-3"
+                            >
+                                <span class="flex items-center gap-2">
+                                    <span class="text-base">⚡</span>
+                                    <span class="font-medium">快速预设</span>
+                                </span>
+                                <span class="transform transition-transform duration-200 text-gray-400" :class="{ 'rotate-180': showPresetPicker }">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                                    </svg>
+                                </span>
+                            </button>
+
+                            <div v-if="showPresetPicker" class="space-y-3 mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200 shadow-sm">
+                                <!-- 场景预设 -->
+                                <div>
+                                    <h6 class="text-xs font-medium text-gray-700 mb-2 flex items-center gap-1">🎯 场景需求</h6>
+                                    <div class="flex flex-wrap gap-1.5">
+                                        <button
+                                            v-for="preset in scenePresets"
+                                            :key="preset.id"
+                                            @click="applyPreset(preset.prompt)"
+                                            class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-300 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 hover:scale-105 hover:shadow-sm"
+                                        >
+                                            {{ preset.name }}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- 口味偏好 -->
+                                <div>
+                                    <h6 class="text-xs font-medium text-gray-700 mb-2 flex items-center gap-1">👅 口味偏好</h6>
+                                    <div class="flex flex-wrap gap-1.5">
+                                        <button
+                                            v-for="preset in tastePresets"
+                                            :key="preset.id"
+                                            @click="applyPreset(preset.prompt)"
+                                            class="px-3 py-1.5 text-xs font-medium rounded-full border border-green-300 hover:border-green-400 hover:bg-green-50 hover:text-green-700 transition-all duration-200 hover:scale-105 hover:shadow-sm"
+                                        >
+                                            {{ preset.name }}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- 健康需求 -->
+                                <div>
+                                    <h6 class="text-xs font-medium text-gray-700 mb-2 flex items-center gap-1">💚 健康需求</h6>
+                                    <div class="flex flex-wrap gap-1.5">
+                                        <button
+                                            v-for="preset in healthPresets"
+                                            :key="preset.id"
+                                            @click="applyPreset(preset.prompt)"
+                                            class="px-3 py-1.5 text-xs font-medium rounded-full border border-purple-300 hover:border-purple-400 hover:bg-purple-50 hover:text-purple-700 transition-all duration-200 hover:scale-105 hover:shadow-sm"
+                                        >
+                                            {{ preset.name }}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- 烹饪方式 -->
+                                <div>
+                                    <h6 class="text-xs font-medium text-gray-700 mb-2 flex items-center gap-1">🔥 烹饪方式</h6>
+                                    <div class="flex flex-wrap gap-1.5">
+                                        <button
+                                            v-for="preset in cookingPresets"
+                                            :key="preset.id"
+                                            @click="applyPreset(preset.prompt)"
+                                            class="px-3 py-1.5 text-xs font-medium rounded-full border border-orange-300 hover:border-orange-400 hover:bg-orange-50 hover:text-orange-700 transition-all duration-200 hover:scale-105 hover:shadow-sm"
+                                        >
+                                            {{ preset.name }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 自定义输入区域 -->
                         <div class="flex-1">
-                            <label class="block text-sm font-bold text-dark-800 mb-2">描述你的需求：</label>
+                            <label class="block text-sm font-bold text-dark-800 mb-2">或自由描述：</label>
                             <textarea
                                 v-model="customPrompt"
-                                placeholder="例如：做一道清淡的汤，适合老人食用..."
-                                class="w-full p-4 border-2 border-gray-300 rounded-lg text-base resize-none focus:outline-none focus:border-blue-400 h-40"
+                                @input="limitCustomPrompt"
+                                placeholder="例如：做一道清淡的汤，适合老人食用，不要太咸..."
+                                class="w-full p-4 border-2 border-gray-300 rounded-lg text-base resize-none focus:outline-none focus:border-blue-400 h-32"
+                                maxlength="200"
                             ></textarea>
                             <div v-if="customPrompt.trim()" class="mt-2 flex justify-between items-center">
                                 <span class="text-xs text-green-600">✓ 已设置自定义要求</span>
                                 <button @click="customPrompt = ''" class="text-xs text-red-600 hover:text-red-700 underline">清除</button>
                             </div>
                         </div>
-                        <p class="text-xs text-gray-500 mt-auto">越具体越好！</p>
+
+                        <!-- 随机灵感 -->
+                        <div class="mt-3 mb-3">
+                            <button
+                                @click="getRandomInspiration"
+                                class="w-full py-2 px-3 bg-gradient-to-r from-purple-400 to-pink-400 hover:from-purple-500 hover:to-pink-500 text-white text-sm font-medium rounded-lg border-2 border-black transition-all duration-200 transform hover:scale-105"
+                            >
+                                ✨ 随机灵感
+                            </button>
+                        </div>
+
+                        <!-- 底部提示 -->
+                        <div class="mt-4 pt-3 border-t border-gray-200">
+                            <div class="flex items-center justify-between text-xs text-gray-500">
+                                <span>💡 提示：越具体越好！</span>
+                                <span :class="{ 'text-red-500': customPrompt.length > 180 }">{{ customPrompt.length }}/200</span>
+                            </div>
+                            <p class="text-xs text-gray-400 mt-1">可以组合多个预设，或完全自定义描述</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -296,6 +434,7 @@ const loadingText = ref('大师正在挑选食材...')
 const resultsSection = ref<HTMLElement | null>(null)
 const errorMessage = ref('')
 const showIngredientPicker = ref(false)
+const showPresetPicker = ref(false)
 const hoveredCuisine = ref<string | null>(null)
 const tooltipPosition = ref({ x: 0, y: 0 })
 
@@ -312,6 +451,43 @@ const loadingTexts = [
 
 let loadingInterval: NodeJS.Timeout | null = null
 
+// 预设选项数据
+const scenePresets = [
+    { id: 'family', name: '家庭聚餐', prompt: '适合全家人一起享用的家常菜，老少皆宜，营养均衡' },
+    { id: 'romantic', name: '浪漫晚餐', prompt: '适合情侣约会的精致菜品，卖相精美，氛围浪漫' },
+    { id: 'quick', name: '快手菜', prompt: '制作简单快速的菜品，15分钟内完成，适合忙碌时光' },
+    { id: 'party', name: '聚会小食', prompt: '适合朋友聚会的下酒菜或小食，方便分享' },
+    { id: 'breakfast', name: '营养早餐', prompt: '健康营养的早餐搭配，提供一天的活力' },
+    { id: 'lunch', name: '工作午餐', prompt: '适合上班族的午餐，营养丰富且不油腻' }
+]
+
+const tastePresets = [
+    { id: 'light', name: '清淡口味', prompt: '口味清淡，少油少盐，突出食材本味' },
+    { id: 'spicy', name: '香辣过瘾', prompt: '香辣刺激，层次丰富，适合喜欢辣味的人' },
+    { id: 'sweet', name: '微甜可口', prompt: '带有淡淡甜味，口感温和，老少皆宜' },
+    { id: 'sour', name: '酸爽开胃', prompt: '酸味突出，开胃解腻，适合夏天享用' },
+    { id: 'savory', name: '鲜香浓郁', prompt: '鲜味十足，香气浓郁，回味无穷' },
+    { id: 'crispy', name: '酥脆爽口', prompt: '口感酥脆，层次分明，嚼劲十足' }
+]
+
+const healthPresets = [
+    { id: 'lowfat', name: '低脂健康', prompt: '低脂肪制作，健康营养，适合减脂期间食用' },
+    { id: 'highprotein', name: '高蛋白', prompt: '富含优质蛋白质，适合健身人群和成长期儿童' },
+    { id: 'vegetarian', name: '素食主义', prompt: '纯素食制作，不含任何动物性食材，营养均衡' },
+    { id: 'diabetic', name: '控糖友好', prompt: '低糖低GI，适合糖尿病患者或需要控制血糖的人群' },
+    { id: 'elderly', name: '老人友好', prompt: '软烂易消化，营养丰富，适合老年人食用' },
+    { id: 'children', name: '儿童喜爱', prompt: '造型可爱，营养全面，适合儿童的口味偏好' }
+]
+
+const cookingPresets = [
+    { id: 'steam', name: '清蒸', prompt: '采用蒸制方法，保持食材原味和营养' },
+    { id: 'stirfry', name: '爆炒', prompt: '大火爆炒，锁住食材鲜味，口感脆嫩' },
+    { id: 'braise', name: '红烧', prompt: '红烧制作，色泽红亮，味道浓郁' },
+    { id: 'soup', name: '煲汤', prompt: '制作成汤品，清香鲜美，营养丰富' },
+    { id: 'cold', name: '凉拌', prompt: '凉拌制作，清爽开胃，适合夏季' },
+    { id: 'grill', name: '烧烤', prompt: '烧烤方式制作，香气四溢，口感独特' }
+]
+
 // 添加食材
 const addIngredient = () => {
     const ingredient = currentIngredient.value.trim()
@@ -341,6 +517,68 @@ const toggleIngredientPicker = () => {
     showIngredientPicker.value = !showIngredientPicker.value
 }
 
+// 切换预设选择器显示
+const togglePresetPicker = () => {
+    showPresetPicker.value = !showPresetPicker.value
+}
+
+// 应用预设
+const applyPreset = (presetPrompt: string) => {
+    if (customPrompt.value.trim()) {
+        // 如果已有内容，询问是否替换或追加
+        const newContent = customPrompt.value.trim() + '，' + presetPrompt
+        if (newContent.length <= 200) {
+            customPrompt.value = newContent
+        }
+    } else {
+        customPrompt.value = presetPrompt
+    }
+}
+
+// 限制自定义提示词长度
+const limitCustomPrompt = () => {
+    if (customPrompt.value.length > 200) {
+        customPrompt.value = customPrompt.value.substring(0, 200)
+    }
+}
+
+// 随机灵感数据
+const randomInspirations = [
+    '制作一道有故事的菜，让人回味童年',
+    '融合东西方口味，创新搭配',
+    '用最简单的方法，做出最温暖的味道',
+    '适合雨天享用的暖心料理',
+    '颜值超高的网红打卡菜品',
+    '妈妈味道的现代演绎',
+    '适合深夜的治愈系美食',
+    '带有节日氛围的特色菜',
+    '健康养生的药膳料理',
+    '适合野餐的便携美食',
+    '有仪式感的精致小食',
+    '适合看剧时享用的小零食',
+    '能够暖胃暖心的汤品',
+    '适合和朋友分享的下酒菜',
+    '充满创意的摆盘艺术菜',
+    '适合运动后补充能量的料理'
+]
+
+// 获取随机灵感
+const getRandomInspiration = () => {
+    const randomIndex = Math.floor(Math.random() * randomInspirations.length)
+    const inspiration = randomInspirations[randomIndex]
+
+    if (customPrompt.value.trim()) {
+        const newContent = customPrompt.value.trim() + '，' + inspiration
+        if (newContent.length <= 200) {
+            customPrompt.value = newContent
+        } else {
+            customPrompt.value = inspiration
+        }
+    } else {
+        customPrompt.value = inspiration
+    }
+}
+
 // 显示菜系tooltip
 const showCuisineTooltip = (cuisine: CuisineType, event: MouseEvent) => {
     hoveredCuisine.value = cuisine.id