新增玄学厨房

.kiro/specs/fortune-cooking/design.md

@@ -0,0 +1,199 @@
+# 料理占卜师功能设计文档
+
+## 概述
+
+料理占卜师是一个结合占卜元素与美食推荐的娱乐化功能，通过AI生成有趣的菜品推荐和占卜解析，为用户提供独特的美食体验。
+
+## 架构设计
+
+### 技术栈
+- Vue 3 + TypeScript
+- Tailwind CSS（神秘主题色彩）
+- 复用现有的AI服务（智谱AI）
+- 本地存储（localStorage）
+
+### 页面结构
+```
+FortuneCooking.vue (主页面)
+├── 占卜师角色展示区域
+├── 占卜类型选择区域
+├── 占卜参数配置区域
+├── 占卜过程动画区域
+├── 占卜结果展示区域
+└── 历史记录区域
+```
+
+## 组件设计
+
+### 核心组件
+1. **FortuneCooking.vue** - 主页面组件
+2. **FortuneCard.vue** - 占卜结果卡片组件
+3. **ZodiacSelector.vue** - 星座生肖选择器
+4. **MoodSelector.vue** - 心情选择器
+5. **FortuneAnimation.vue** - 占卜过程动画
+6. **FortuneHistory.vue** - 历史记录组件
+
+## 数据模型
+
+### 占卜类型定义
+```typescript
+type FortuneType = 'daily' | 'mood' | 'couple' | 'number'
+
+interface FortuneRequest {
+  type: FortuneType
+  params: DailyFortuneParams | MoodFortuneParams | CoupleFortuneParams | NumberFortuneParams
+}
+
+interface DailyFortuneParams {
+  zodiac: string // 星座
+  animal: string // 生肖
+  date: string
+}
+
+interface MoodFortuneParams {
+  moods: string[] // 心情状态数组
+  intensity: number // 情绪强度 1-5
+}
+
+interface CoupleFortuneParams {
+  user1: PersonInfo
+  user2: PersonInfo
+}
+
+interface NumberFortuneParams {
+  number: number // 1-99
+  isRandom: boolean
+}
+
+interface FortuneResult {
+  id: string
+  type: FortuneType
+  date: string
+  dishName: string
+  reason: string
+  luckyIndex: number // 1-10
+  description: string
+  tips: string[]
+  difficulty: 'easy' | 'medium' | 'hard'
+  cookingTime: number
+  mysticalMessage: string // 神秘话语
+}
+```
+
+### 占卜师角色配置
+```typescript
+interface FortuneTeller {
+  name: string
+  avatar: string
+  greetings: string[]
+  phrases: {
+    [key in FortuneType]: {
+      opening: string[]
+      closing: string[]
+      processing: string[]
+    }
+  }
+  mysticalWords: string[]
+}
+```
+
+## AI服务扩展
+
+### 新增AI服务方法
+1. `generateDailyFortune(params: DailyFortuneParams)` - 生成今日运势菜
+2. `generateMoodCooking(params: MoodFortuneParams)` - 生成心情料理
+3. `generateCoupleCooking(params: CoupleFortuneParams)` - 生成缘分配菜
+4. `generateNumberFortune(params: NumberFortuneParams)` - 生成幸运数字菜
+
+## 用户界面设计
+
+### 色彩方案
+- 主色调：深紫色、神秘蓝、金色（营造神秘感）
+- 渐变背景：星空、水晶球、塔罗牌风格
+- 保持与现有平台的视觉协调
+
+### 交互流程
+1. 用户进入页面 → 占卜师欢迎语
+2. 选择占卜类型 → 显示对应参数配置
+3. 配置参数 → 开始占卜动画
+4. AI生成结果 → 展示占卜结果
+5. 支持分享、保存、重新占卜
+
+### 动画效果
+- 水晶球旋转效果
+- 卡牌翻转动画
+- 星座运行轨迹
+- 数字滚动效果
+- 结果揭晓的神秘感
+
+## 占卜逻辑设计
+
+### 今日运势菜逻辑
+```typescript
+// 基于星座特性 + 生肖属性 + 日期因子
+const getDailyFortune = (zodiac: string, animal: string, date: string) => {
+  const zodiacTraits = getZodiacTraits(zodiac) // 星座特性
+  const animalTraits = getAnimalTraits(animal) // 生肖属性
+  const dateEnergy = getDateEnergy(date) // 日期能量
+  
+  return combineFortuneFactors(zodiacTraits, animalTraits, dateEnergy)
+}
+```
+
+### 心情料理逻辑
+```typescript
+const moodCookingMap = {
+  happy: ['甜品类', '色彩丰富', '庆祝菜品'],
+  sad: ['温暖汤品', '治愈系', '家常菜'],
+  anxious: ['清淡菜品', '舒缓茶饮', '简单制作'],
+  tired: ['营养补充', '快手菜', '能量食物'],
+  // ...
+}
+```
+
+## 数据存储
+
+### 本地存储结构
+```typescript
+interface FortuneStorage {
+  history: FortuneResult[]
+  userPreferences: {
+    defaultZodiac?: string
+    defaultAnimal?: string
+    favoriteFortuneType?: FortuneType
+  }
+  feedback: {
+    [fortuneId: string]: 'accurate' | 'inaccurate'
+  }
+}
+```
+
+## 分享功能设计
+
+### 分享卡片内容
+- 占卜类型和日期
+- 推荐菜品和幸运指数
+- 神秘解析文案
+- 平台品牌水印
+- 邀请朋友体验的文案
+
+## 性能优化
+
+### 缓存策略
+- 同一天同一用户的运势菜结果缓存
+- 常用星座生肖组合预计算
+- 占卜师话语本地缓存
+
+### 动画优化
+- 使用CSS3动画减少JS计算
+- 懒加载复杂动画效果
+- 移动端简化动画
+
+## 扩展性考虑
+
+### 未来功能扩展
+- 节日特殊占卜（春节、情人节等）
+- 占卜师角色升级和解锁
+- 用户自定义占卜参数
+- 社交分享和比较功能
+- 占卜准确度统计和改进

.kiro/specs/fortune-cooking/requirements.md

@@ -0,0 +1,103 @@
+# 料理占卜师功能需求文档
+
+## 介绍
+
+料理占卜师是"一饭封神"平台的娱乐化功能，结合占卜元素与美食推荐，为用户提供有趣的个性化菜品建议。通过星座、生肖、心情、幸运数字等元素，AI为用户推荐"今日幸运菜"、"心情治愈菜"、"缘分配菜"等，增加平台的趣味性和用户粘性。
+
+## 需求
+
+### 需求 1：今日运势菜
+
+**用户故事：** 作为一个用户，我想要根据我的星座和生肖获得今日幸运菜推荐，以便为今天的用餐增添好运气。
+
+#### 验收标准
+
+1. WHEN 用户选择星座和生肖 THEN 系统 SHALL 生成今日幸运菜推荐
+2. 系统 SHALL 提供12个星座选择：白羊座、金牛座、双子座、巨蟹座、狮子座、处女座、天秤座、天蝎座、射手座、摩羯座、水瓶座、双鱼座
+3. 系统 SHALL 提供12个生肖选择：鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪
+4. 推荐结果 SHALL 包含菜品名称、幸运理由、制作难度、预计好运指数
+5. 系统 SHALL 每日更新运势内容，同一用户同一天获得相同推荐
+
+### 需求 2：心情料理师
+
+**用户故事：** 作为一个用户，我想要根据当前心情获得治愈系菜品推荐，以便通过美食调节情绪。
+
+#### 验收标准
+
+1. WHEN 用户选择当前心情状态 THEN 系统 SHALL 推荐对应的治愈菜品
+2. 系统 SHALL 提供多种心情选择：开心、难过、焦虑、疲惫、兴奋、平静、愤怒、思念
+3. 每种心情 SHALL 对应不同类型的菜品推荐逻辑
+4. 推荐结果 SHALL 包含心情分析、菜品功效说明、情感治愈指数
+5. 系统 SHALL 支持心情组合选择（如：疲惫+焦虑）
+
+### 需求 3：缘分配菜
+
+**用户故事：** 作为一个用户，我想要和朋友一起测试我们适合做什么菜，以便增进友谊和互动乐趣。
+
+#### 验收标准
+
+1. WHEN 用户输入自己和朋友的基本信息 THEN 系统 SHALL 分析配菜缘分
+2. 用户 SHALL 能够输入双方的星座、生肖、性格标签
+3. 系统 SHALL 分析双方的配菜默契度
+4. 推荐结果 SHALL 包含适合合作的菜品、分工建议、默契指数
+5. 系统 SHALL 提供有趣的缘分解析文案
+
+### 需求 4：幸运数字菜
+
+**用户故事：** 作为一个用户，我想要通过幸运数字获得菜品推荐，以便体验数字占卜的乐趣。
+
+#### 验收标准
+
+1. WHEN 用户输入或生成幸运数字 THEN 系统 SHALL 推荐对应菜品
+2. 系统 SHALL 支持用户手动输入1-99的数字
+3. 系统 SHALL 提供"随机生成"幸运数字功能
+4. 不同数字 SHALL 对应不同的菜品类型和寓意
+5. 推荐结果 SHALL 包含数字寓意解析、菜品象征意义
+
+### 需求 5：占卜历史记录
+
+**用户故事：** 作为一个用户，我想要查看我的占卜历史，以便回顾之前的推荐和验证准确性。
+
+#### 验收标准
+
+1. 系统 SHALL 自动保存用户的占卜记录
+2. 用户 SHALL 能够查看最近30天的占卜历史
+3. 历史记录 SHALL 包含占卜类型、日期、推荐结果、用户反馈
+4. 用户 SHALL 能够对历史推荐进行"准确"或"不准"的反馈
+5. 系统 SHALL 基于反馈优化后续推荐
+
+### 需求 6：占卜分享功能
+
+**用户故事：** 作为一个用户，我想要分享我的占卜结果，以便和朋友一起体验占卜乐趣。
+
+#### 验收标准
+
+1. 用户 SHALL 能够生成占卜结果的分享卡片
+2. 分享卡片 SHALL 包含占卜类型、结果、精美设计
+3. 系统 SHALL 支持保存图片到本地
+4. 系统 SHALL 支持复制分享文案
+5. 分享内容 SHALL 包含平台品牌信息
+
+### 需求 7：神秘占卜师角色
+
+**用户故事：** 作为一个用户，我想要与一个有趣的占卜师角色互动，以便获得更沉浸的体验。
+
+#### 验收标准
+
+1. 系统 SHALL 设计一个神秘占卜师角色形象
+2. 占卜师 SHALL 有独特的说话风格和用词习惯
+3. 不同占卜类型 SHALL 有不同的开场白和结束语
+4. 占卜师 SHALL 能够根据结果给出生动的解释
+5. 系统 SHALL 支持占卜师的随机"神秘话语"
+
+### 需求 8：响应式设计和用户体验
+
+**用户故事：** 作为一个移动设备用户，我想要在手机上也能流畅使用占卜功能，以便随时随地体验占卜乐趣。
+
+#### 验收标准
+
+1. 界面 SHALL 在移动设备上正确显示和操作
+2. 占卜过程 SHALL 有适当的动画效果和仪式感
+3. 系统 SHALL 提供神秘的视觉设计和音效（可选）
+4. 加载过程 SHALL 显示有趣的占卜相关提示
+5. 界面风格 SHALL 与现有平台保持一致但增加神秘元素

.kiro/specs/fortune-cooking/tasks.md

@@ -0,0 +1,110 @@
+# 料理占卜师功能实现任务清单
+
+- [x] 1. 扩展类型定义和AI服务
+
+
+  - 在types/index.ts中添加占卜相关的类型定义
+  - 在aiService.ts中添加占卜菜品生成的AI服务方法
+  - _Requirements: 1.1, 2.1, 3.1, 4.1_
+
+
+
+- [ ] 2. 创建占卜配置数据
+  - 创建星座、生肖、心情等基础配置文件
+  - 定义占卜师角色和话语数据
+
+
+  - 配置占卜逻辑映射关系
+  - _Requirements: 1.2, 1.3, 2.2, 7.2, 7.3_
+
+- [ ] 3. 实现主页面组件
+  - 创建FortuneCooking.vue主页面
+  - 实现占卜类型选择界面
+  - 添加神秘主题的视觉设计
+  - 集成占卜师角色展示
+  - _Requirements: 7.1, 7.4, 8.1, 8.5_
+
+- [ ] 4. 实现星座生肖选择器
+  - 创建ZodiacSelector.vue组件
+  - 实现12星座和12生肖的选择界面
+  - 添加星座生肖的图标和描述
+  - 实现选择状态的视觉反馈
+  - _Requirements: 1.2, 1.3_
+
+- [ ] 5. 实现心情选择器
+  - 创建MoodSelector.vue组件
+  - 实现多种心情状态的选择
+  - 支持心情组合和强度调节
+  - 添加心情对应的视觉元素
+  - _Requirements: 2.2, 2.5_
+
+- [ ] 6. 实现占卜过程动画
+  - 创建FortuneAnimation.vue组件
+  - 实现水晶球、卡牌等占卜动画效果
+  - 添加占卜过程的神秘音效（可选）
+  - 实现不同占卜类型的专属动画
+  - _Requirements: 8.2, 8.3_
+
+- [ ] 7. 实现占卜结果展示
+  - 创建FortuneCard.vue组件
+  - 展示菜品推荐和占卜解析
+  - 实现幸运指数和神秘话语显示
+  - 添加结果的分享和保存功能
+  - _Requirements: 1.4, 2.3, 3.4, 4.4, 6.1, 6.2_
+
+- [ ] 8. 实现今日运势菜功能
+  - 集成星座生肖选择器
+  - 实现基于日期的运势计算
+  - 调用AI服务生成运势菜推荐
+  - 确保同一天相同结果的缓存
+  - _Requirements: 1.1, 1.5_
+
+- [ ] 9. 实现心情料理师功能
+  - 集成心情选择器
+  - 实现心情到菜品类型的映射逻辑
+  - 调用AI服务生成治愈系菜品
+  - 添加情感治愈指数计算
+  - _Requirements: 2.1, 2.3, 2.4_
+
+- [ ] 10. 实现缘分配菜功能
+  - 创建双人信息输入界面
+  - 实现配菜默契度分析算法
+  - 生成合作菜品和分工建议
+  - 添加有趣的缘分解析文案
+  - _Requirements: 3.1, 3.2, 3.3, 3.5_
+
+- [ ] 11. 实现幸运数字菜功能
+  - 创建数字输入和随机生成界面
+  - 实现数字到菜品的映射逻辑
+  - 添加数字寓意和象征意义解析
+  - 实现数字滚动动画效果
+  - _Requirements: 4.1, 4.2, 4.3, 4.5_
+
+- [ ] 12. 实现历史记录功能
+  - 创建FortuneHistory.vue组件
+  - 实现占卜记录的本地存储
+  - 添加历史记录的查看和管理
+  - 实现用户反馈收集功能
+  - _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
+
+- [ ] 13. 实现分享功能
+  - 创建分享卡片生成功能
+
+
+  - 实现图片保存和文案复制
+  - 添加平台品牌水印
+  - 优化分享内容的视觉设计
+  - _Requirements: 6.3, 6.4, 6.5_
+
+- [ ] 14. 添加路由和导航集成
+  - 在main.ts中添加FortuneCooking路由
+  - 在GlobalNavigation中添加料理占卜师入口
+  - 确保页面间导航正常工作
+  - _Requirements: 8.5_
+
+- [ ] 15. 优化用户体验和测试
+  - 添加加载状态和错误处理
+  - 实现响应式设计优化
+  - 添加占卜过程的仪式感
+  - 进行功能测试和样式调整
+  - _Requirements: 8.1, 8.2, 8.4_

src/components/FortuneCard.vue

@@ -0,0 +1,213 @@
+<template>
+    <div class="bg-white rounded-lg border-2 border-[#333333] overflow-hidden">
+        <!-- 占卜结果标题 -->
+        <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h2 class="text-2xl font-bold mb-2">{{ fortune.dishName }}</h2>
+                    <div class="flex items-center gap-4 text-sm">
+                        <span class="flex items-center gap-1">
+                            <span>🔮</span>
+                            <span>{{ getFortuneTypeName(fortune.type) }}</span>
+                        </span>
+                        <span class="flex items-center gap-1">
+                            <span>⏱️</span>
+                            <span>{{ fortune.cookingTime }}分钟</span>
+                        </span>
+                        <span :class="[
+                            'px-2 py-1 rounded-full text-xs font-medium',
+                            getDifficultyStyle(fortune.difficulty)
+                        ]">
+                            {{ getDifficultyName(fortune.difficulty) }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 幸运指数 -->
+            <div class="mt-4 flex items-center gap-4">
+                <div class="text-center">
+                    <div class="text-xs opacity-80 mb-1">幸运指数</div>
+                    <div class="flex items-center gap-1">
+                        <span v-for="i in 10" :key="i" :class="[
+                            'text-lg',
+                            i <= fortune.luckyIndex ? 'text-yellow-300' : 'text-white/30'
+                        ]">⭐</span>
+                        <span class="ml-2 text-xl font-bold text-yellow-300">{{ fortune.luckyIndex }}/10</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="p-4 md:p-6">
+            <!-- 占卜理由 -->
+            <div class="mb-6 p-4 bg-purple-50 rounded-lg border border-purple-200">
+                <h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2">
+                    <span>🌟</span>
+                    <span>占卜理由</span>
+                </h3>
+                <p class="text-gray-700">{{ fortune.reason }}</p>
+            </div>
+
+            <!-- 详细描述 -->
+            <div class="mb-6 p-4 bg-pink-50 rounded-lg border border-pink-200">
+                <h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2">
+                    <span>✨</span>
+                    <span>神秘解析</span>
+                </h3>
+                <p class="text-gray-700">{{ fortune.description }}</p>
+            </div>
+
+            <!-- 食材清单 -->
+            <div v-if="fortune.ingredients && fortune.ingredients.length > 0" class="mb-6">
+                <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center gap-2">
+                    <span>🛒</span>
+                    <span>神秘食材</span>
+                </h3>
+                <div class="grid md:grid-cols-2 gap-2">
+                    <div
+                        v-for="(ingredient, index) in fortune.ingredients"
+                        :key="index"
+                        class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg"
+                    >
+                        <span class="w-2 h-2 bg-purple-400 rounded-full"></span>
+                        <span class="text-gray-700">{{ ingredient }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 制作步骤 -->
+            <div v-if="fortune.steps && fortune.steps.length > 0" class="mb-6">
+                <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center gap-2">
+                    <span>👨‍🍳</span>
+                    <span>神秘步骤</span>
+                </h3>
+                <div class="space-y-4">
+                    <div
+                        v-for="(step, index) in fortune.steps"
+                        :key="index"
+                        class="flex gap-4 p-4 bg-gray-50 rounded-lg border-l-4 border-purple-400"
+                    >
+                        <div class="flex-shrink-0">
+                            <div class="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold text-sm">
+                                {{ index + 1 }}
+                            </div>
+                        </div>
+                        <div class="flex-1">
+                            <p class="text-gray-800">{{ step }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 占卜建议 -->
+            <div v-if="fortune.tips.length > 0" class="mb-6">
+                <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center gap-2">
+                    <span>💡</span>
+                    <span>神秘建议</span>
+                </h3>
+                <div class="space-y-2">
+                    <div
+                        v-for="(tip, index) in fortune.tips"
+                        :key="index"
+                        class="flex items-start gap-2 p-3 bg-yellow-50 rounded-lg border border-yellow-200"
+                    >
+                        <span class="text-yellow-600 mt-0.5">💫</span>
+                        <span class="text-gray-700">{{ tip }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 神秘话语 -->
+            <div class="mb-6 p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border border-purple-200">
+                <h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2">
+                    <span>🔮</span>
+                    <span>占卜师的话</span>
+                </h3>
+                <p class="text-gray-700 italic text-center">{{ fortune.mysticalMessage }}</p>
+            </div>
+
+           
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { FortuneResult, FortuneType } from '@/types'
+
+interface Props {
+    fortune: FortuneResult
+    showActions?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    showActions: false
+})
+
+// 获取占卜类型名称
+const getFortuneTypeName = (type: FortuneType): string => {
+    const typeNames = {
+        daily: '今日运势',
+        mood: '心情占卜',
+        couple: '缘分配菜',
+        number: '数字占卜'
+    }
+    return typeNames[type] || '神秘占卜'
+}
+
+// 获取难度样式
+const getDifficultyStyle = (difficulty: 'easy' | 'medium' | 'hard'): string => {
+    const styles = {
+        easy: 'bg-green-100/20 text-green-300 border border-green-400/30',
+        medium: 'bg-yellow-100/20 text-yellow-300 border border-yellow-400/30',
+        hard: 'bg-red-100/20 text-red-300 border border-red-400/30'
+    }
+    return styles[difficulty]
+}
+
+// 获取难度名称
+const getDifficultyName = (difficulty: 'easy' | 'medium' | 'hard'): string => {
+    const names = {
+        easy: '简单',
+        medium: '中等',
+        hard: '困难'
+    }
+    return names[difficulty]
+}
+
+// 分享结果
+const shareResult = () => {
+    const shareText = `🔮 料理占卜师为我推荐了：${props.fortune.dishName}\n\n✨ ${props.fortune.reason}\n\n🌟 幸运指数：${props.fortune.luckyIndex}/10\n\n来"一饭封神"体验神秘的料理占卜吧！`
+    
+    if (navigator.share) {
+        navigator.share({
+            title: '料理占卜结果',
+            text: shareText,
+            url: window.location.href
+        })
+    } else {
+        navigator.clipboard.writeText(shareText).then(() => {
+            // 可以添加提示
+            console.log('占卜结果已复制到剪贴板')
+        })
+    }
+}
+
+// 保存结果
+const saveResult = () => {
+    try {
+        const savedResults = JSON.parse(localStorage.getItem('fortune_results') || '[]')
+        savedResults.unshift(props.fortune)
+        
+        // 只保留最近20个结果
+        if (savedResults.length > 20) {
+            savedResults.splice(20)
+        }
+        
+        localStorage.setItem('fortune_results', JSON.stringify(savedResults))
+        console.log('占卜结果已保存')
+    } catch (error) {
+        console.error('保存占卜结果失败:', error)
+    }
+}
+</script>

src/components/GlobalNavigation.vue

@@ -36,7 +36,7 @@
                         :class="$route.path === '/today-eat' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🎲</span>
-                        <span>今日吃啥</span>
+                        <span>美食盲盒</span>
                     </router-link>
                     <router-link
                         to="/table-design"
@@ -44,7 +44,7 @@
                         :class="$route.path === '/table-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🍽️</span>
-                        <span>一桌好菜</span>
+                        <span>满汉全席</span>
                     </router-link>
                     <router-link
                         to="/how-to-cook"
@@ -52,7 +52,7 @@
                         :class="$route.path === '/how-to-cook' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🍳</span>
-                        <span>菜谱指南</span>
+                        <span>厨神秘籍</span>
                     </router-link>
                     <router-link
                         to="/sauce-design"
@@ -60,7 +60,7 @@
                         :class="$route.path === '/sauce-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🥄</span>
-                        <span>酱料设计</span>
+                        <span>酱料大师</span>
                     </router-link>
                     
                     <!-- 更多菜单下拉 -->
@@ -101,6 +101,15 @@
                                 <span>🖼️</span>
                                 <span>封神图鉴</span>
                             </router-link>
+                            <router-link
+                                to="/fortune-cooking"
+                                @click="showMoreMenu = false"
+                                class="flex items-center gap-2 px-4 py-3 text-sm font-bold transition-colors duration-200 hover:bg-gray-100"
+                                :class="$route.path === '/fortune-cooking' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
+                            >
+                                <span>🔮</span>
+                                <span>玄学厨房</span>
+                            </router-link>
                             <router-link
                                 to="/about"
                                 @click="showMoreMenu = false"
@@ -158,7 +167,7 @@
                         :class="$route.path === '/today-eat' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🎲</span>
-                        <span>今日吃啥</span>
+                        <span>美食盲盒</span>
                     </router-link>
                     <router-link
                         to="/table-design"
@@ -167,7 +176,7 @@
                         :class="$route.path === '/table-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🍽️</span>
-                        <span>一桌好菜</span>
+                        <span>满汉全席</span>
                     </router-link>
                     <router-link
                         to="/how-to-cook"
@@ -176,7 +185,7 @@
                         :class="$route.path === '/how-to-cook' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🍳</span>
-                        <span>菜谱指南</span>
+                        <span>厨神秘籍</span>
                     </router-link>
                     <router-link
                         to="/sauce-design"
@@ -185,7 +194,16 @@
                         :class="$route.path === '/sauce-design' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🥄</span>
-                        <span>酱料设计</span>
+                        <span>酱料大师</span>
+                    </router-link>
+                    <router-link
+                        to="/fortune-cooking"
+                        @click="showMobileMenu = false"
+                        class="flex items-center gap-2 w-full px-3 py-2 rounded-lg font-bold border-2 border-[#0A0910] transition-all duration-200 text-sm"
+                        :class="$route.path === '/fortune-cooking' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+                    >
+                        <span>🔮</span>
+                        <span>玄学厨房</span>
                     </router-link>
                     <router-link
                         to="/favorites"
@@ -250,6 +268,8 @@ const pageTitle = computed(() => {
             return '菜谱指南'
         case '/sauce-design':
             return '酱料设计大师'
+        case '/fortune-cooking':
+            return '玄学厨房'
         case '/favorites':
             return '我的收藏'
         case '/gallery':
@@ -273,6 +293,8 @@ const pageSubtitle = computed(() => {
             return 'AI大师手把手教学！'
         case '/sauce-design':
             return '专业酱料制作，调味灵魂升华！'
+        case '/fortune-cooking':
+            return '星辰指引美食，占卜预见美味！'
         case '/favorites':
             return '珍藏美味，随时回味！'
         case '/gallery':
@@ -286,7 +308,7 @@ const pageSubtitle = computed(() => {
 
 // 检查更多菜单中的页面是否处于活跃状态
 const isMoreMenuActive = computed(() => {
-    return ['/favorites', '/gallery', '/about'].includes(route.path)
+    return ['/favorites', '/gallery', '/fortune-cooking', '/about'].includes(route.path)
 })
 
 // 处理鼠标进入事件

src/config/fortune.ts

@@ -0,0 +1,412 @@
+import type { ZodiacConfig, AnimalConfig, MoodConfig, FortuneTeller } from '@/types'
+
+// 十二星座配置
+export const zodiacConfigs: ZodiacConfig[] = [
+    {
+        id: 'aries',
+        name: '白羊座',
+        symbol: '♈',
+        element: '火',
+        traits: ['热情', '冲动', '勇敢', '直率'],
+        luckyColors: ['红色', '橙色'],
+        dates: '3.21-4.19'
+    },
+    {
+        id: 'taurus',
+        name: '金牛座',
+        symbol: '♉',
+        element: '土',
+        traits: ['稳重', '固执', '实际', '美食家'],
+        luckyColors: ['绿色', '粉色'],
+        dates: '4.20-5.20'
+    },
+    {
+        id: 'gemini',
+        name: '双子座',
+        symbol: '♊',
+        element: '风',
+        traits: ['机智', '多变', '好奇', '善交际'],
+        luckyColors: ['黄色', '银色'],
+        dates: '5.21-6.21'
+    },
+    {
+        id: 'cancer',
+        name: '巨蟹座',
+        symbol: '♋',
+        element: '水',
+        traits: ['温柔', '顾家', '敏感', '直觉强'],
+        luckyColors: ['白色', '银色'],
+        dates: '6.22-7.22'
+    },
+    {
+        id: 'leo',
+        name: '狮子座',
+        symbol: '♌',
+        element: '火',
+        traits: ['自信', '慷慨', '领导力', '戏剧性'],
+        luckyColors: ['金色', '橙色'],
+        dates: '7.23-8.22'
+    },
+    {
+        id: 'virgo',
+        name: '处女座',
+        symbol: '♍',
+        element: '土',
+        traits: ['完美主义', '细心', '实用', '分析力强'],
+        luckyColors: ['深蓝', '灰色'],
+        dates: '8.23-9.22'
+    },
+    {
+        id: 'libra',
+        name: '天秤座',
+        symbol: '♎',
+        element: '风',
+        traits: ['和谐', '优雅', '犹豫', '社交'],
+        luckyColors: ['粉色', '浅蓝'],
+        dates: '9.23-10.23'
+    },
+    {
+        id: 'scorpio',
+        name: '天蝎座',
+        symbol: '♏',
+        element: '水',
+        traits: ['神秘', '专注', '激情', '直觉'],
+        luckyColors: ['深红', '黑色'],
+        dates: '10.24-11.22'
+    },
+    {
+        id: 'sagittarius',
+        name: '射手座',
+        symbol: '♐',
+        element: '火',
+        traits: ['自由', '乐观', '冒险', '哲学'],
+        luckyColors: ['紫色', '深蓝'],
+        dates: '11.23-12.21'
+    },
+    {
+        id: 'capricorn',
+        name: '摩羯座',
+        symbol: '♑',
+        element: '土',
+        traits: ['务实', '有野心', '保守', '负责'],
+        luckyColors: ['黑色', '深绿'],
+        dates: '12.22-1.19'
+    },
+    {
+        id: 'aquarius',
+        name: '水瓶座',
+        symbol: '♒',
+        element: '风',
+        traits: ['独立', '创新', '人道主义', '理想'],
+        luckyColors: ['蓝色', '银色'],
+        dates: '1.20-2.18'
+    },
+    {
+        id: 'pisces',
+        name: '双鱼座',
+        symbol: '♓',
+        element: '水',
+        traits: ['梦幻', '同情心', '艺术', '直觉'],
+        luckyColors: ['海蓝', '紫色'],
+        dates: '2.19-3.20'
+    }
+]
+
+// 十二生肖配置
+export const animalConfigs: AnimalConfig[] = [
+    {
+        id: 'rat',
+        name: '鼠',
+        symbol: '🐭',
+        element: '水',
+        traits: ['机智', '灵活', '适应力强', '节俭'],
+        luckyNumbers: [2, 3],
+        years: [2020, 2008, 1996, 1984, 1972, 1960]
+    },
+    {
+        id: 'ox',
+        name: '牛',
+        symbol: '🐮',
+        element: '土',
+        traits: ['勤劳', '稳重', '诚实', '固执'],
+        luckyNumbers: [1, 9],
+        years: [2021, 2009, 1997, 1985, 1973, 1961]
+    },
+    {
+        id: 'tiger',
+        name: '虎',
+        symbol: '🐯',
+        element: '木',
+        traits: ['勇敢', '自信', '竞争', '冲动'],
+        luckyNumbers: [1, 3, 4],
+        years: [2022, 2010, 1998, 1986, 1974, 1962]
+    },
+    {
+        id: 'rabbit',
+        name: '兔',
+        symbol: '🐰',
+        element: '木',
+        traits: ['温和', '谨慎', '优雅', '善良'],
+        luckyNumbers: [3, 4, 6],
+        years: [2023, 2011, 1999, 1987, 1975, 1963]
+    },
+    {
+        id: 'dragon',
+        name: '龙',
+        symbol: '🐲',
+        element: '土',
+        traits: ['威严', '热情', '创新', '领导'],
+        luckyNumbers: [1, 6, 7],
+        years: [2024, 2012, 2000, 1988, 1976, 1964]
+    },
+    {
+        id: 'snake',
+        name: '蛇',
+        symbol: '🐍',
+        element: '火',
+        traits: ['智慧', '神秘', '直觉', '优雅'],
+        luckyNumbers: [2, 8, 9],
+        years: [2025, 2013, 2001, 1989, 1977, 1965]
+    },
+    {
+        id: 'horse',
+        name: '马',
+        symbol: '🐴',
+        element: '火',
+        traits: ['自由', '热情', '独立', '冒险'],
+        luckyNumbers: [2, 3, 7],
+        years: [2026, 2014, 2002, 1990, 1978, 1966]
+    },
+    {
+        id: 'goat',
+        name: '羊',
+        symbol: '🐐',
+        element: '土',
+        traits: ['温柔', '艺术', '同情', '和平'],
+        luckyNumbers: [3, 4, 5],
+        years: [2027, 2015, 2003, 1991, 1979, 1967]
+    },
+    {
+        id: 'monkey',
+        name: '猴',
+        symbol: '🐵',
+        element: '金',
+        traits: ['聪明', '机智', '活泼', '好奇'],
+        luckyNumbers: [1, 7, 8],
+        years: [2028, 2016, 2004, 1992, 1980, 1968]
+    },
+    {
+        id: 'rooster',
+        name: '鸡',
+        symbol: '🐓',
+        element: '金',
+        traits: ['勤奋', '准时', '诚实', '自信'],
+        luckyNumbers: [5, 7, 8],
+        years: [2029, 2017, 2005, 1993, 1981, 1969]
+    },
+    {
+        id: 'dog',
+        name: '狗',
+        symbol: '🐕',
+        element: '土',
+        traits: ['忠诚', '诚实', '负责', '公正'],
+        luckyNumbers: [3, 4, 9],
+        years: [2030, 2018, 2006, 1994, 1982, 1970]
+    },
+    {
+        id: 'pig',
+        name: '猪',
+        symbol: '🐷',
+        element: '水',
+        traits: ['善良', '慷慨', '诚实', '乐观'],
+        luckyNumbers: [2, 5, 8],
+        years: [2031, 2019, 2007, 1995, 1983, 1971]
+    }
+]
+
+// 心情配置
+export const moodConfigs: MoodConfig[] = [
+    {
+        id: 'happy',
+        name: '开心',
+        emoji: '😊',
+        color: 'text-yellow-500',
+        cookingStyle: ['甜品', '色彩丰富', '庆祝菜品', '轻松制作'],
+        description: '心情愉悦，适合制作色彩缤纷的美食'
+    },
+    {
+        id: 'sad',
+        name: '难过',
+        emoji: '😢',
+        color: 'text-blue-500',
+        cookingStyle: ['温暖汤品', '治愈系', '家常菜', '慢炖'],
+        description: '需要温暖治愈的食物来抚慰心灵'
+    },
+    {
+        id: 'anxious',
+        name: '焦虑',
+        emoji: '😰',
+        color: 'text-orange-500',
+        cookingStyle: ['清淡菜品', '舒缓茶饮', '简单制作', '健康'],
+        description: '选择简单清淡的食物，避免复杂制作'
+    },
+    {
+        id: 'tired',
+        name: '疲惫',
+        emoji: '😴',
+        color: 'text-gray-500',
+        cookingStyle: ['营养补充', '快手菜', '能量食物', '简便'],
+        description: '需要快速补充能量的营养食物'
+    },
+    {
+        id: 'excited',
+        name: '兴奋',
+        emoji: '🤩',
+        color: 'text-red-500',
+        cookingStyle: ['挑战菜品', '创新料理', '复杂制作', '实验'],
+        description: '精力充沛，适合尝试有挑战性的菜品'
+    },
+    {
+        id: 'calm',
+        name: '平静',
+        emoji: '😌',
+        color: 'text-green-500',
+        cookingStyle: ['素食', '清淡', '禅意料理', '慢节奏'],
+        description: '心境平和，适合制作清淡素雅的菜品'
+    },
+    {
+        id: 'angry',
+        name: '愤怒',
+        emoji: '😠',
+        color: 'text-red-600',
+        cookingStyle: ['辛辣菜品', '重口味', '发泄式烹饪', '刺激'],
+        description: '通过制作重口味食物来释放情绪'
+    },
+    {
+        id: 'nostalgic',
+        name: '思念',
+        emoji: '🥺',
+        color: 'text-purple-500',
+        cookingStyle: ['怀旧菜品', '家乡味', '传统料理', '回忆'],
+        description: '制作充满回忆的传统家乡菜'
+    }
+]
+
+// 占卜师角色配置
+export const fortuneTeller: FortuneTeller = {
+    name: '星月占卜师',
+    avatar: '🔮',
+    greetings: [
+        '欢迎来到神秘的料理占卜殿堂...',
+        '星辰指引着美食的方向，让我为你占卜...',
+        '水晶球中浮现出美味的预言...',
+        '命运之轮正在转动，你的专属料理即将揭晓...'
+    ],
+    phrases: {
+        daily: {
+            opening: [
+                '让我感应今日的星象能量...',
+                '星座与生肖的力量正在汇聚...',
+                '今日的宇宙能量将指引你的味蕾...'
+            ],
+            closing: [
+                '愿这道幸运料理为你带来好运...',
+                '星辰已为你选定了今日的美味...',
+                '按照星象的指引，享受这份美食吧...'
+            ],
+            processing: [
+                '正在解读星座的秘密...',
+                '生肖的智慧正在显现...',
+                '宇宙的能量正在汇聚...'
+            ]
+        },
+        mood: {
+            opening: [
+                '让我感受你内心的情感波动...',
+                '心灵的频率正在与美食共鸣...',
+                '情感的色彩将决定你的料理...'
+            ],
+            closing: [
+                '愿这道治愈料理抚慰你的心灵...',
+                '美食是最好的情感治愈师...',
+                '让味蕾带走你的烦恼...'
+            ],
+            processing: [
+                '正在分析你的情感能量...',
+                '心情的颜色正在显现...',
+                '治愈的力量正在汇聚...'
+            ]
+        },
+        couple: {
+            opening: [
+                '让我感应你们之间的缘分...',
+                '两颗心的频率正在共鸣...',
+                '默契的火花即将点燃美食...'
+            ],
+            closing: [
+                '愿这道缘分料理增进你们的感情...',
+                '在共同烹饪中发现彼此的美好...',
+                '美食见证你们的默契...'
+            ],
+            processing: [
+                '正在分析你们的星座配对...',
+                '缘分的丝线正在编织...',
+                '默契指数正在计算...'
+            ]
+        },
+        number: {
+            opening: [
+                '数字是宇宙的语言...',
+                '让我解读这个神秘数字的含义...',
+                '数字中隐藏着美食的秘密...'
+            ],
+            closing: [
+                '数字的力量将为你带来幸运...',
+                '在这个神秘数字的指引下享受美食...',
+                '数字与美味的完美结合...'
+            ],
+            processing: [
+                '正在解析数字的神秘力量...',
+                '数字的能量正在显现...',
+                '宇宙密码正在解锁...'
+            ]
+        }
+    },
+    mysticalWords: [
+        '星辰不会说谎，美食不会背叛...',
+        '在料理中寻找生活的真谛...',
+        '每一道菜都是命运的安排...',
+        '味蕾是通往心灵的桥梁...',
+        '美食中蕴含着宇宙的智慧...',
+        '烹饪是一种神圣的仪式...',
+        '在锅碗瓢盆中感受生活的节拍...',
+        '每一次品尝都是一次心灵的旅行...'
+    ]
+}
+
+// 获取星座配置
+export const getZodiacById = (id: string): ZodiacConfig | undefined => {
+    return zodiacConfigs.find(zodiac => zodiac.id === id)
+}
+
+// 获取生肖配置
+export const getAnimalById = (id: string): AnimalConfig | undefined => {
+    return animalConfigs.find(animal => animal.id === id)
+}
+
+// 获取心情配置
+export const getMoodById = (id: string): MoodConfig | undefined => {
+    return moodConfigs.find(mood => mood.id === id)
+}
+
+// 获取随机占卜师话语
+export const getRandomMysticalWord = (): string => {
+    const words = fortuneTeller.mysticalWords
+    return words[Math.floor(Math.random() * words.length)]
+}
+
+// 获取随机问候语
+export const getRandomGreeting = (): string => {
+    const greetings = fortuneTeller.greetings
+    return greetings[Math.floor(Math.random() * greetings.length)]
+}

src/main.ts

@@ -9,6 +9,7 @@ import Favorites from './views/Favorites.vue'
 import Gallery from './views/Gallery.vue'
 import HowToCook from './views/HowToCook.vue'
 import SauceDesign from './views/SauceDesign.vue'
+import FortuneCooking from './views/FortuneCooking.vue'
 import './style.css'
 
 const routes = [
@@ -19,7 +20,8 @@ const routes = [
     { path: '/favorites', component: Favorites },
     { path: '/gallery', component: Gallery },
     { path: '/how-to-cook', component: HowToCook },
-    { path: '/sauce-design', component: SauceDesign }
+    { path: '/sauce-design', component: SauceDesign },
+    { path: '/fortune-cooking', component: FortuneCooking }
 ]
 
 const router = createRouter({

src/services/aiService.ts

@@ -1,19 +1,19 @@
 import axios from 'axios'
-import type { Recipe, CuisineType, NutritionAnalysis, WinePairing, SauceRecipe, SaucePreference, CustomSauceRequest } from '@/types'
+import type { Recipe, CuisineType, NutritionAnalysis, WinePairing, SauceRecipe, SaucePreference, CustomSauceRequest, FortuneResult, DailyFortuneParams, MoodFortuneParams, CoupleFortuneParams, NumberFortuneParams } from '@/types'
 
 // AI服务配置 - 从环境变量读取
 const AI_CONFIG = {
-    baseURL: 'https://api.deepseek.com/v1/',
-    apiKey: import.meta.env.VITE_TEXT_GENERATION_API_KEY,
-    model: 'deepseek-chat',
-    temperature: 0.7,
-    timeout: 300000
-
-    // baseURL: 'https://open.bigmodel.cn/api/paas/v4/',
-    // apiKey: import.meta.env.VITE_IMAGE_GENERATION_API_KEY,
-    // model: 'glm-4-flash-250414',
+    // baseURL: 'https://api.deepseek.com/v1/',
+    // apiKey: import.meta.env.VITE_TEXT_GENERATION_API_KEY,
+    // model: 'deepseek-chat',
     // temperature: 0.7,
     // timeout: 300000
+
+    baseURL: 'https://open.bigmodel.cn/api/paas/v4/',
+    apiKey: import.meta.env.VITE_IMAGE_GENERATION_API_KEY,
+    model: 'GLM-4-Flash-250414',
+    temperature: 0.9,
+    timeout: 300000
 }
 
 // 创建axios实例
@@ -1177,5 +1177,326 @@ export const getSaucePairings = async (sauceName: string): Promise<string[]> =>
     }
 }
 
+/**
+ * 生成今日运势菜
+ * @param params 运势参数
+ * @returns Promise<FortuneResult>
+ */
+export const generateDailyFortune = async (params: DailyFortuneParams): Promise<FortuneResult> => {
+    try {
+        const prompt = `你是一位神秘的料理占卜师，请根据以下信息为用户推荐今日幸运菜：
+
+星座：${params.zodiac}
+生肖：${params.animal}
+日期：${params.date}
+
+请结合星座特性、生肖属性和今日能量，推荐一道能带来好运的菜品。
+
+请按照以下JSON格式返回占卜结果：
+{
+  "dishName": "菜品名称",
+  "reason": "选择这道菜的占卜理由",
+  "luckyIndex": 8,
+  "description": "详细的占卜解析和菜品介绍",
+  "tips": ["烹饪技巧1", "幸运提示2"],
+  "difficulty": "medium",
+  "cookingTime": 30,
+  "mysticalMessage": "神秘的占卜师话语",
+  "ingredients": ["主要食材1", "主要食材2"],
+  "steps": ["制作步骤1", "制作步骤2"]
+}`
+
+        const response = await aiClient.post('/chat/completions', {
+            model: AI_CONFIG.model,
+            messages: [
+                {
+                    role: 'system',
+                    content: '你是一位神秘而智慧的料理占卜师，精通星座学、生肖学和美食文化。你的话语充满神秘色彩，善于将占卜元素与美食完美结合。请严格按照JSON格式返回，不要包含任何其他文字。请务必用中文回答。'
+                },
+                {
+                    role: 'user',
+                    content: prompt
+                }
+            ],
+            temperature: 0.8,
+            stream: false
+        })
+
+        const aiResponse = response.data.choices[0].message.content
+        let cleanResponse = aiResponse.trim()
+        if (cleanResponse.startsWith('```json')) {
+            cleanResponse = cleanResponse.replace(/```json\s*/, '').replace(/```\s*$/, '')
+        } else if (cleanResponse.startsWith('```')) {
+            cleanResponse = cleanResponse.replace(/```\s*/, '').replace(/```\s*$/, '')
+        }
+
+        const fortuneData = JSON.parse(cleanResponse)
+
+        const fortune: FortuneResult = {
+            id: `daily-fortune-${Date.now()}`,
+            type: 'daily',
+            date: params.date,
+            dishName: fortuneData.dishName || '幸运料理',
+            reason: fortuneData.reason || '星座与生肖的神秘指引',
+            luckyIndex: fortuneData.luckyIndex || Math.floor(Math.random() * 3) + 7,
+            description: fortuneData.description || '这道菜将为您带来今日好运',
+            tips: fortuneData.tips || ['用心制作', '保持好心情'],
+            difficulty: fortuneData.difficulty || 'medium',
+            cookingTime: fortuneData.cookingTime || 30,
+            mysticalMessage: fortuneData.mysticalMessage || '命运之轮正在转动，美味即将降临...',
+            ingredients: fortuneData.ingredients || [],
+            steps: fortuneData.steps || []
+        }
+
+        return fortune
+    } catch (error) {
+        console.error('生成今日运势菜失败:', error)
+        throw new Error('占卜师暂时无法感应到星象，请稍后重试')
+    }
+}
+
+/**
+ * 生成心情料理
+ * @param params 心情参数
+ * @returns Promise<FortuneResult>
+ */
+export const generateMoodCooking = async (params: MoodFortuneParams): Promise<FortuneResult> => {
+    try {
+        const moodText = params.moods.join('、')
+        const intensityText = ['很轻微', '轻微', '一般', '强烈', '非常强烈'][params.intensity - 1]
+
+        const prompt = `你是一位擅长情感治愈的料理占卜师，请根据以下心情状态推荐治愈菜品：
+
+当前心情：${moodText}
+情绪强度：${intensityText}
+
+请推荐一道能够治愈这种心情的菜品，并给出温暖的情感分析。
+
+请按照以下JSON格式返回占卜结果：
+{
+  "dishName": "菜品名称",
+  "reason": "这道菜如何治愈当前心情",
+  "luckyIndex": 7,
+  "description": "详细的情感分析和菜品治愈功效",
+  "tips": ["情感治愈建议1", "烹饪心得2"],
+  "difficulty": "easy",
+  "cookingTime": 25,
+  "mysticalMessage": "温暖治愈的话语",
+  "ingredients": ["治愈食材1", "治愈食材2"],
+  "steps": ["治愈步骤1", "治愈步骤2"]
+}`
+
+        const response = await aiClient.post('/chat/completions', {
+            model: AI_CONFIG.model,
+            messages: [
+                {
+                    role: 'system',
+                    content: '你是一位温暖而智慧的情感治愈师，深谙美食与情感的关系。你善于通过菜品来抚慰人心，话语温暖治愈。请严格按照JSON���式返回，不要包含任何其他文字。请务必用中文回答。'
+                },
+                {
+                    role: 'user',
+                    content: prompt
+                }
+            ],
+            temperature: 0.7,
+            stream: false
+        })
+
+        const aiResponse = response.data.choices[0].message.content
+        let cleanResponse = aiResponse.trim()
+        if (cleanResponse.startsWith('```json')) {
+            cleanResponse = cleanResponse.replace(/```json\s*/, '').replace(/```\s*$/, '')
+        } else if (cleanResponse.startsWith('```')) {
+            cleanResponse = cleanResponse.replace(/```\s*/, '').replace(/```\s*$/, '')
+        }
+
+        const fortuneData = JSON.parse(cleanResponse)
+
+        const fortune: FortuneResult = {
+            id: `mood-fortune-${Date.now()}`,
+            type: 'mood',
+            date: new Date().toISOString().split('T')[0],
+            dishName: fortuneData.dishName || '治愈料理',
+            reason: fortuneData.reason || '这道菜能温暖你的心',
+            luckyIndex: fortuneData.luckyIndex || Math.floor(Math.random() * 3) + 6,
+            description: fortuneData.description || '美食是最好的情感治愈师',
+            tips: fortuneData.tips || ['慢慢品味', '感受温暖'],
+            difficulty: fortuneData.difficulty || 'easy',
+            cookingTime: fortuneData.cookingTime || 25,
+            mysticalMessage: fortuneData.mysticalMessage || '让美食抚慰你的心灵，一切都会好起来的...',
+            ingredients: fortuneData.ingredients || [],
+            steps: fortuneData.steps || []
+        }
+
+        return fortune
+    } catch (error) {
+        console.error('生成心情料理失败:', error)
+        throw new Error('情感占卜师暂时感应不到你的心情，请稍后重试')
+    }
+}
+
+/**
+ * 生成缘分配菜
+ * @param params 双人参数
+ * @returns Promise<FortuneResult>
+ */
+export const generateCoupleCooking = async (params: CoupleFortuneParams): Promise<FortuneResult> => {
+    try {
+        const prompt = `你是一位专门分析人际关系的料理占卜师，请分析两人的配菜缘分：
+
+第一人：
+- 星座：${params.user1.zodiac}
+- 生肖：${params.user1.animal}
+- 性格：${params.user1.personality.join('、')}
+
+第二人：
+- 星座：${params.user2.zodiac}
+- 生肖：${params.user2.animal}
+- 性格：${params.user2.personality.join('、')}
+
+请分析两人的配菜默契度，推荐适合合作制作的菜品。
+
+请按照以下JSON格式返回占卜结果：
+{
+  "dishName": "适合合作的菜品名称",
+  "reason": "为什么这道菜适合你们一起做",
+  "luckyIndex": 8,
+  "description": "详细的缘分分析和配菜建议",
+  "tips": ["合作建议1", "默契提升技巧2"],
+  "difficulty": "medium",
+  "cookingTime": 40,
+  "mysticalMessage": "关于缘分和合作的神秘话语",
+  "ingredients": ["需要合作的食材1", "需要合作的食材2"],
+  "steps": ["合作步骤1", "合作步骤2"]
+}`
+
+        const response = await aiClient.post('/chat/completions', {
+            model: AI_CONFIG.model,
+            messages: [
+                {
+                    role: 'system',
+                    content: '你是一位精通人际关系和美食文化的占卜师，善于分析人与人之间的默契和缘分。你的话语充满智慧和温暖。请严格按照JSON格式返回，不要包含任何其他文字。请务必用中文回答。'
+                },
+                {
+                    role: 'user',
+                    content: prompt
+                }
+            ],
+            temperature: 0.8,
+            stream: false
+        })
+
+        const aiResponse = response.data.choices[0].message.content
+        let cleanResponse = aiResponse.trim()
+        if (cleanResponse.startsWith('```json')) {
+            cleanResponse = cleanResponse.replace(/```json\s*/, '').replace(/```\s*$/, '')
+        } else if (cleanResponse.startsWith('```')) {
+            cleanResponse = cleanResponse.replace(/```\s*/, '').replace(/```\s*$/, '')
+        }
+
+        const fortuneData = JSON.parse(cleanResponse)
+
+        const fortune: FortuneResult = {
+            id: `couple-fortune-${Date.now()}`,
+            type: 'couple',
+            date: new Date().toISOString().split('T')[0],
+            dishName: fortuneData.dishName || '缘分料理',
+            reason: fortuneData.reason || '你们的星座组合很适合这道菜',
+            luckyIndex: fortuneData.luckyIndex || Math.floor(Math.random() * 3) + 7,
+            description: fortuneData.description || '这道菜将增进你们的默契',
+            tips: fortuneData.tips || ['互相配合', '享受过程'],
+            difficulty: fortuneData.difficulty || 'medium',
+            cookingTime: fortuneData.cookingTime || 40,
+            mysticalMessage: fortuneData.mysticalMessage || '缘分天注定，美食见真情...',
+            ingredients: fortuneData.ingredients || [],
+            steps: fortuneData.steps || []
+        }
+
+        return fortune
+    } catch (error) {
+        console.error('生成缘分配菜失败:', error)
+        throw new Error('缘分占卜师暂时无法感应到你们的默契，请稍后重试')
+    }
+}
+
+/**
+ * 生成幸运数字菜
+ * @param params 数字参数
+ * @returns Promise<FortuneResult>
+ */
+export const generateNumberFortune = async (params: NumberFortuneParams): Promise<FortuneResult> => {
+    try {
+        const numberSource = params.isRandom ? '随机生成' : '用户选择'
+        
+        const prompt = `你是一位精通数字占卜的料理大师，请根据幸运数字推荐菜品：
+
+幸运数字：${params.number}
+数字来源：${numberSource}
+
+请解析这个数字的寓意，并推荐对应的幸运菜品。
+
+请按照以下JSON格式返回占卜结果：
+{
+  "dishName": "与数字相关的菜品名称",
+  "reason": "数字寓意和选择理由",
+  "luckyIndex": 9,
+  "description": "数字占卜解析和菜品象征意义",
+  "tips": ["数字相关的幸运建议1", "制作要点2"],
+  "difficulty": "medium",
+  "cookingTime": 35,
+  "mysticalMessage": "关于数字和命运的神秘话语",
+  "ingredients": ["象征性食材1", "象征性食材2"],
+  "steps": ["制作步骤1", "制作步骤2"]
+}`
+
+        const response = await aiClient.post('/chat/completions', {
+            model: AI_CONFIG.model,
+            messages: [
+                {
+                    role: 'system',
+                    content: '你是一位精通数字学和美食文化的神秘占卜师，善于解读数字的深层含义并与菜品联系。你的话语充满神秘和智慧。请严格按照JSON格式返回，不要包含任何其他文字。请务必用中文回答。'
+                },
+                {
+                    role: 'user',
+                    content: prompt
+                }
+            ],
+            temperature: 0.8,
+            stream: false
+        })
+
+        const aiResponse = response.data.choices[0].message.content
+        let cleanResponse = aiResponse.trim()
+        if (cleanResponse.startsWith('```json')) {
+            cleanResponse = cleanResponse.replace(/```json\s*/, '').replace(/```\s*$/, '')
+        } else if (cleanResponse.startsWith('```')) {
+            cleanResponse = cleanResponse.replace(/```\s*/, '').replace(/```\s*$/, '')
+        }
+
+        const fortuneData = JSON.parse(cleanResponse)
+
+        const fortune: FortuneResult = {
+            id: `number-fortune-${Date.now()}`,
+            type: 'number',
+            date: new Date().toISOString().split('T')[0],
+            dishName: fortuneData.dishName || '数字料理',
+            reason: fortuneData.reason || `数字${params.number}带来的神秘指引`,
+            luckyIndex: fortuneData.luckyIndex || Math.floor(Math.random() * 3) + 7,
+            description: fortuneData.description || '数字中蕴含着美食的秘密',
+            tips: fortuneData.tips || ['相信数字的力量', '用心制作'],
+            difficulty: fortuneData.difficulty || 'medium',
+            cookingTime: fortuneData.cookingTime || 35,
+            mysticalMessage: fortuneData.mysticalMessage || '数字是宇宙的语言，美食是心灵的慰藉...',
+            ingredients: fortuneData.ingredients || [],
+            steps: fortuneData.steps || []
+        }
+
+        return fortune
+    } catch (error) {
+        console.error('生成幸运数字菜失败:', error)
+        throw new Error('数字占卜师暂时无法解读这个数字，请稍后重试')
+    }
+}
+
 // 导出配置更新函数，供外部使用
 export { AI_CONFIG }

src/types/index.ts

@@ -177,3 +177,111 @@ export interface FavoriteSauce {
     favoriteDate: string
     notes?: string
 }
+
+// 占卜类型
+export type FortuneType = 'daily' | 'mood' | 'couple' | 'number'
+
+// 占卜请求参数
+export interface DailyFortuneParams {
+    zodiac: string // 星座
+    animal: string // 生肖
+    date: string
+}
+
+export interface MoodFortuneParams {
+    moods: string[] // 心情状态数组
+    intensity: number // 情绪强度 1-5
+}
+
+export interface PersonInfo {
+    zodiac: string
+    animal: string
+    personality: string[]
+}
+
+export interface CoupleFortuneParams {
+    user1: PersonInfo
+    user2: PersonInfo
+}
+
+export interface NumberFortuneParams {
+    number: number // 1-99
+    isRandom: boolean
+}
+
+// 占卜结果
+export interface FortuneResult {
+    id: string
+    type: FortuneType
+    date: string
+    dishName: string
+    reason: string
+    luckyIndex: number // 1-10
+    description: string
+    tips: string[]
+    difficulty: 'easy' | 'medium' | 'hard'
+    cookingTime: number
+    mysticalMessage: string // 神秘话语
+    ingredients?: string[]
+    steps?: string[]
+}
+
+// 占卜师角色
+export interface FortuneTeller {
+    name: string
+    avatar: string
+    greetings: string[]
+    phrases: {
+        [key in FortuneType]: {
+            opening: string[]
+            closing: string[]
+            processing: string[]
+        }
+    }
+    mysticalWords: string[]
+}
+
+// 星座配置
+export interface ZodiacConfig {
+    id: string
+    name: string
+    symbol: string
+    element: string // 火、土、风、水
+    traits: string[]
+    luckyColors: string[]
+    dates: string
+}
+
+// 生肖配置
+export interface AnimalConfig {
+    id: string
+    name: string
+    symbol: string
+    element: string // 金、木、水、火、土
+    traits: string[]
+    luckyNumbers: number[]
+    years: number[]
+}
+
+// 心情配置
+export interface MoodConfig {
+    id: string
+    name: string
+    emoji: string
+    color: string
+    cookingStyle: string[]
+    description: string
+}
+
+// 占卜历史存储
+export interface FortuneStorage {
+    history: FortuneResult[]
+    userPreferences: {
+        defaultZodiac?: string
+        defaultAnimal?: string
+        favoriteFortuneType?: FortuneType
+    }
+    feedback: {
+        [fortuneId: string]: 'accurate' | 'inaccurate'
+    }
+}

src/views/FortuneCooking.vue

@@ -0,0 +1,408 @@
+<template>
+    <div class="min-h-screen bg-yellow-400 px-2 md:px-4 py-6">
+        <!-- 全局导航 -->
+        <GlobalNavigation />
+
+        <div class="max-w-7xl mx-auto">
+            <!-- 页面标题和占卜师 -->
+            <div class="text-center mb-8">
+                <div class="relative">
+                    <div class="relative bg-white/90 backdrop-blur-sm border-2 border-purple-400 rounded-2xl p-6 mb-6">
+                        <div class="text-6xl mb-4 animate-pulse">🔮</div>
+                        <h1 class="text-4xl md:text-5xl font-bold text-purple-600 mb-4">
+                            料理占卜师
+                        </h1>
+                     
+                        <div class="text-sm text-purple-600 italic">
+                            "{{ currentMysticalWord }}"
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 占卜类型选择 -->
+            <div class="mb-8">
+                <div class="bg-purple-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
+                    <span class="font-bold">✨ 选择占卜类型</span>
+                </div>
+                <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
+                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <button
+                            v-for="type in fortuneTypes"
+                            :key="type.id"
+                            @click="selectFortuneType(type.id)"
+                            :class="[
+                                'p-6 rounded-xl border-2 border-[#0A0910] transition-all duration-300 transform hover:scale-105',
+                                selectedType === type.id
+                                    ? 'bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-lg'
+                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                            ]"
+                        >
+                            <div class="text-3xl mb-3">{{ type.icon }}</div>
+                            <div class="font-bold text-lg mb-2">{{ type.name }}</div>
+                            <div class="text-sm opacity-80">{{ type.description }}</div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 占卜参数配置区域 -->
+            <div v-if="selectedType" class="mb-8">
+                <div class="bg-indigo-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
+                    <span class="font-bold">🎯 配置占卜参数</span>
+                </div>
+                <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
+                    <!-- 今日运势配置 -->
+                    <div v-if="selectedType === 'daily'" class="space-y-6 mb-4">
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <h3 class="text-lg font-bold text-gray-800 mb-4">选择你的星座</h3>
+                                <div class="grid grid-cols-3 gap-2">
+                                    <button
+                                        v-for="zodiac in zodiacConfigs"
+                                        :key="zodiac.id"
+                                        @click="dailyParams.zodiac = zodiac.id"
+                                        :class="[
+                                            'p-3 rounded-lg border-2 border-[#0A0910] transition-all duration-200 text-sm',
+                                            dailyParams.zodiac === zodiac.id
+                                                ? 'bg-purple-500 text-white'
+                                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        ]"
+                                    >
+                                        <div>{{ zodiac.symbol }}</div>
+                                        <div class="font-medium">{{ zodiac.name }}</div>
+                                    </button>
+                                </div>
+                            </div>
+                            <div>
+                                <h3 class="text-lg font-bold text-gray-800 mb-4">选择你的生肖</h3>
+                                <div class="grid grid-cols-3 gap-2">
+                                    <button
+                                        v-for="animal in animalConfigs"
+                                        :key="animal.id"
+                                        @click="dailyParams.animal = animal.id"
+                                        :class="[
+                                            'p-3 rounded-lg border-2 border-[#0A0910] transition-all duration-200 text-sm',
+                                            dailyParams.animal === animal.id
+                                                ? 'bg-purple-500 text-white'
+                                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        ]"
+                                    >
+                                        <div class="text-lg">{{ animal.symbol }}</div>
+                                        <div class="font-medium">{{ animal.name }}</div>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 心情料理配置 -->
+                    <div v-if="selectedType === 'mood'" class="space-y-6">
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800 mb-4">选择你的心情（可多选）</h3>
+                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                                <button
+                                    v-for="mood in moodConfigs"
+                                    :key="mood.id"
+                                    @click="toggleMood(mood.id)"
+                                    :class="[
+                                        'p-4 rounded-lg border-2 border-[#0A0910] transition-all duration-200',
+                                        moodParams.moods.includes(mood.id)
+                                            ? 'bg-purple-500 text-white'
+                                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                    ]"
+                                >
+                                    <div class="text-2xl mb-2">{{ mood.emoji }}</div>
+                                    <div class="font-medium text-sm">{{ mood.name }}</div>
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800 mb-4">情绪强度：{{ intensityLabels[moodParams.intensity - 1] }}</h3>
+                            <input
+                                v-model="moodParams.intensity"
+                                type="range"
+                                min="1"
+                                max="5"
+                                class="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer slider-purple"
+                            />
+                        </div>
+                    </div>
+
+                    <!-- 幸运数字配置 -->
+                    <div v-if="selectedType === 'number'" class="space-y-6">
+                        <div class="text-center">
+                            <h3 class="text-lg font-bold text-gray-800 mb-4">选择你的幸运数字</h3>
+                            <div class="flex items-center justify-center gap-4 mb-6">
+                                <input
+                                    v-model="numberParams.number"
+                                    type="number"
+                                    min="1"
+                                    max="99"
+                                    class="w-24 h-16 text-2xl font-bold text-center bg-white border-2 border-[#0A0910] rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-400"
+                                />
+                                <button
+                                    @click="generateRandomNumber"
+                                    class="px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-lg font-bold hover:from-pink-600 hover:to-purple-600 transition-all duration-200 border-2 border-[#0A0910]"
+                                >
+                                    🎲 随机生成
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 开始占卜按钮 -->
+                    <div class="text-center pt-6 border-t border-gray-200">
+                        <button
+                            @click="startFortune"
+                            :disabled="!canStartFortune || isLoading"
+                            class="w-full px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 disabled:from-gray-400 disabled:to-gray-400 text-white font-bold text-lg rounded-lg border-2 border-[#0A0910] transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:cursor-not-allowed shadow-lg"
+                        >
+                            <span class="flex items-center gap-3 justify-center">
+                                <template v-if="isLoading">
+                                    <div class="animate-spin w-6 h-6 border-2 border-white border-t-transparent rounded-full"></div>
+                                    <span>{{ currentProcessingText }}</span>
+                                </template>
+                                <template v-else>
+                                    <span>🔮</span>
+                                    <span>开始占卜</span>
+                                </template>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 占卜结果展示 -->
+            <div v-if="fortuneResult" class="mb-8" data-fortune-result>
+                <div class="bg-pink-500 text-white px-4 py-2 rounded-t-lg border-2 border-[#0A0910] border-b-0 inline-block">
+                    <span class="font-bold">🌟 占卜结果</span>
+                </div>
+                <div class="bg-white border-2 border-[#0A0910] rounded-lg rounded-tl-none p-4 md:p-6">
+                    <FortuneCard :fortune="fortuneResult" :show-actions="true" />
+                </div>
+            </div>
+        </div>
+
+        <!-- 全局底部 -->
+        <GlobalFooter />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { generateDailyFortune, generateMoodCooking, generateNumberFortune } from '@/services/aiService'
+import type { FortuneType, FortuneResult, DailyFortuneParams, MoodFortuneParams, NumberFortuneParams } from '@/types'
+import { zodiacConfigs, animalConfigs, moodConfigs, fortuneTeller, getRandomGreeting, getRandomMysticalWord } from '@/config/fortune'
+import FortuneCard from '@/components/FortuneCard.vue'
+import GlobalNavigation from '@/components/GlobalNavigation.vue'
+import GlobalFooter from '@/components/GlobalFooter.vue'
+
+// 占卜类型配置
+const fortuneTypes = [
+    {
+        id: 'daily' as FortuneType,
+        name: '今日运势菜',
+        icon: '⭐',
+        description: '根据星座生肖推荐幸运菜品'
+    },
+    {
+        id: 'mood' as FortuneType,
+        name: '心情料理师',
+        icon: '💝',
+        description: '根据心情推荐治愈菜品'
+    },
+    {
+        id: 'number' as FortuneType,
+        name: '幸运数字菜',
+        icon: '🔢',
+        description: '通过数字占卜推荐菜品'
+    }
+]
+
+// 响应式数据
+const selectedType = ref<FortuneType | null>(null)
+const isLoading = ref(false)
+const fortuneResult = ref<FortuneResult | null>(null)
+const currentGreeting = ref('')
+const currentMysticalWord = ref('')
+const currentProcessingText = ref('')
+
+// 占卜参数
+const dailyParams = ref<DailyFortuneParams>({
+    zodiac: '',
+    animal: '',
+    date: new Date().toISOString().split('T')[0]
+})
+
+const moodParams = ref<MoodFortuneParams>({
+    moods: [],
+    intensity: 3
+})
+
+const numberParams = ref<NumberFortuneParams>({
+    number: 1,
+    isRandom: false
+})
+
+// 情绪强度标签
+const intensityLabels = ['很轻微', '轻微', '一般', '强烈', '非常强烈']
+
+// 页面加载时初始化
+onMounted(() => {
+    currentGreeting.value = getRandomGreeting()
+    currentMysticalWord.value = getRandomMysticalWord()
+})
+
+// 检查是否可以开始占卜
+const canStartFortune = computed(() => {
+    switch (selectedType.value) {
+        case 'daily':
+            return dailyParams.value.zodiac && dailyParams.value.animal
+        case 'mood':
+            return moodParams.value.moods.length > 0
+        case 'number':
+            return numberParams.value.number >= 1 && numberParams.value.number <= 99
+        default:
+            return false
+    }
+})
+
+// 选择占卜类型
+const selectFortuneType = (type: FortuneType) => {
+    selectedType.value = type
+    fortuneResult.value = null
+}
+
+// 切换心情选择
+const toggleMood = (moodId: string) => {
+    const index = moodParams.value.moods.indexOf(moodId)
+    if (index > -1) {
+        moodParams.value.moods.splice(index, 1)
+    } else {
+        moodParams.value.moods.push(moodId)
+    }
+}
+
+// 生成随机数字
+const generateRandomNumber = () => {
+    numberParams.value.number = Math.floor(Math.random() * 99) + 1
+    numberParams.value.isRandom = true
+}
+
+// 开始占卜
+const startFortune = async () => {
+    if (!selectedType.value || isLoading.value) return
+
+    isLoading.value = true
+    fortuneResult.value = null
+
+    // 获取处理中的文本
+    const processingTexts = fortuneTeller.phrases[selectedType.value].processing
+    currentProcessingText.value = processingTexts[Math.floor(Math.random() * processingTexts.length)]
+
+    try {
+        let result: FortuneResult
+
+        switch (selectedType.value) {
+            case 'daily':
+                result = await generateDailyFortune(dailyParams.value)
+                break
+            case 'mood':
+                result = await generateMoodCooking(moodParams.value)
+                break
+            case 'number':
+                result = await generateNumberFortune(numberParams.value)
+                break
+            default:
+                throw new Error('未知的占卜类型')
+        }
+
+        // 添加延迟增加神秘感
+        await new Promise(resolve => setTimeout(resolve, 2000))
+        
+        fortuneResult.value = result
+
+        // 滚动到结果区域
+        setTimeout(() => {
+            const resultElement = document.querySelector('[data-fortune-result]')
+            if (resultElement) {
+                resultElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            }
+        }, 100)
+
+    } catch (error) {
+        console.error('占卜失败:', error)
+        // 可以添加错误提示
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>
+
+<style scoped>
+/* 星空背景动画 */
+.stars {
+    width: 1px;
+    height: 1px;
+    background: transparent;
+    box-shadow: 
+        1541px 1046px #fff, 1651px 1164px #fff, 1286px 1270px #fff,
+        1364px 1446px #fff, 1739px 1564px #fff, 1312px 1684px #fff,
+        1747px 1794px #fff, 1474px 1924px #fff, 1365px 2044px #fff,
+        1610px 2164px #fff, 1264px 2284px #fff, 1458px 2404px #fff;
+    animation: animStar 50s linear infinite;
+}
+
+.stars2 {
+    width: 2px;
+    height: 2px;
+    background: transparent;
+    box-shadow: 
+        679px 1506px #fff, 1717px 1626px #fff, 1157px 1746px #fff,
+        1222px 1866px #fff, 1695px 1986px #fff, 1590px 2106px #fff,
+        1652px 2226px #fff, 1458px 2346px #fff, 1517px 2466px #fff;
+    animation: animStar 100s linear infinite;
+}
+
+.stars3 {
+    width: 3px;
+    height: 3px;
+    background: transparent;
+    box-shadow: 
+        1042px 1306px #fff, 1537px 1426px #fff, 1923px 1546px #fff,
+        1687px 1666px #fff, 1854px 1786px #fff, 1431px 1906px #fff;
+    animation: animStar 150s linear infinite;
+}
+
+@keyframes animStar {
+    from {
+        transform: translateY(0px);
+    }
+    to {
+        transform: translateY(-2000px);
+    }
+}
+
+/* 自定义滑块样式 */
+.slider-purple::-webkit-slider-thumb {
+    appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #a855f7;
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.slider-purple::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #a855f7;
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+</style>