新增导航栏模式

src/components/GlobalFooter.vue

@@ -0,0 +1,39 @@
+<template>
+    <footer class="bg-white border-2 border-black max-w-7xl mx-auto px-2 rounded-lg p-4 text-center mt-8">
+        <div class="space-y-3">
+            <!-- 主要信息 -->
+            <div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
+                <p class="text-sm text-gray-600">
+                    © 2025 一饭封神 |
+                    <a href="https://github.com/liu-ziting/what-to-eat" target="_blank" class="text-blue-600 hover:text-blue-700 hover:underline transition-colors">
+                        Powered by Liuziting
+                    </a>
+                </p>
+                <div class="hidden md:block w-px h-4 bg-gray-300"></div>
+                <p class="text-xs text-gray-500">🚀 Vibe Coding with Kiro AI</p>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script setup lang="ts">
+// Footer组件，无需额外逻辑
+</script>
+
+<style scoped>
+/* 确保链接的悬停效果 */
+a {
+    transition: all 0.2s ease-in-out;
+}
+
+a:hover {
+    transform: translateY(-1px);
+}
+
+/* 响应式调整 */
+@media (max-width: 640px) {
+    .space-y-3 > * + * {
+        margin-top: 0.5rem;
+    }
+}
+</style>

src/components/GlobalNavigation.vue

@@ -0,0 +1,182 @@
+<template>
+    <nav class="bg-white border-2 border-black max-w-7xl mx-auto rounded-lg mb-4 shadow-lg">
+        <div class="px-4 py-3">
+            <!-- 桌面端导航 -->
+            <div class="hidden md:flex items-center justify-between">
+                <!-- Logo区域 -->
+                <router-link to="/" class="flex items-center gap-3 hover:scale-105 transition-transform duration-200">
+                    <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center border-2 border-black">
+                        <span class="text-white text-xl font-bold">饭</span>
+                    </div>
+                    <div>
+                        <div class="text-2xl font-black text-dark-800 tracking-wider">
+                            {{ pageTitle }}
+                        </div>
+                        <div class="text-xs text-gray-600 font-medium">{{ pageSubtitle }}</div>
+                    </div>
+                </router-link>
+
+                <!-- 导航菜单 -->
+                <div class="flex items-center gap-3">
+                    <router-link
+                        to="/"
+                        class="flex items-center gap-2 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
+                        :class="$route.path === '/' ? 'bg-yellow-400 text-dark-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+                    >
+                        <span>🏠</span>
+                        <span>主页</span>
+                    </router-link>
+                    <router-link
+                        to="/today-eat"
+                        class="flex items-center gap-2 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
+                        :class="$route.path === '/today-eat' ? 'bg-orange-400 text-white' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'"
+                    >
+                        <span>🎲</span>
+                        <span>今天吃什么？</span>
+                    </router-link>
+                    <router-link
+                        to="/table-design"
+                        class="flex items-center gap-2 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
+                        :class="$route.path === '/table-design' ? 'bg-purple-400 text-white' : 'bg-purple-100 text-purple-700 hover:bg-purple-200'"
+                    >
+                        <span>🍽️</span>
+                        <span>一桌菜设计</span>
+                    </router-link>
+                    <router-link
+                        to="/about"
+                        class="flex items-center gap-2 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
+                        :class="$route.path === '/about' ? 'bg-blue-400 text-white' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'"
+                    >
+                        <span>📖</span>
+                        <span>简介</span>
+                    </router-link>
+                </div>
+            </div>
+
+            <!-- 移动端导航 -->
+            <div class="md:hidden">
+                <!-- 顶部Logo和菜单按钮 -->
+                <div class="flex items-center justify-between mb-3">
+                    <router-link to="/" class="flex items-center gap-2">
+                        <div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center border-2 border-black">
+                            <span class="text-white text-lg font-bold">饭</span>
+                        </div>
+                        <div>
+                            <div class="text-lg font-black text-dark-800 font-['PingFangLiuAngLeTianTi'] tracking-wider">
+                                {{ pageTitle }}
+                            </div>
+                            <div class="text-xs text-gray-600 font-medium">{{ pageSubtitle }}</div>
+                        </div>
+                    </router-link>
+                    <button @click="showMobileMenu = !showMobileMenu" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg border-2 border-black transition-colors">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- 移动端菜单 -->
+                <div v-if="showMobileMenu" class="space-y-2 border-t-2 border-gray-200 pt-3">
+                    <router-link
+                        to="/"
+                        @click="showMobileMenu = false"
+                        class="flex items-center gap-2 w-full px-3 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm"
+                        :class="$route.path === '/' ? 'bg-yellow-400 text-dark-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+                    >
+                        <span>🏠</span>
+                        <span>主页</span>
+                    </router-link>
+                    <router-link
+                        to="/today-eat"
+                        @click="showMobileMenu = false"
+                        class="flex items-center gap-2 w-full px-3 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm"
+                        :class="$route.path === '/today-eat' ? 'bg-orange-400 text-white' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'"
+                    >
+                        <span>🎲</span>
+                        <span>今天吃什么？</span>
+                    </router-link>
+                    <router-link
+                        to="/table-design"
+                        @click="showMobileMenu = false"
+                        class="flex items-center gap-2 w-full px-3 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm"
+                        :class="$route.path === '/table-design' ? 'bg-purple-400 text-white' : 'bg-purple-100 text-purple-700 hover:bg-purple-200'"
+                    >
+                        <span>🍽️</span>
+                        <span>一桌菜设计</span>
+                    </router-link>
+                    <router-link
+                        to="/about"
+                        @click="showMobileMenu = false"
+                        class="flex items-center gap-2 w-full px-3 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm"
+                        :class="$route.path === '/about' ? 'bg-blue-400 text-white' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'"
+                    >
+                        <span>📖</span>
+                        <span>简介</span>
+                    </router-link>
+                </div>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const showMobileMenu = ref(false)
+const route = useRoute()
+
+// 根据当前路由显示不同的页面标题
+const pageTitle = computed(() => {
+    switch (route.path) {
+        case '/':
+            return '一饭封神'
+        case '/today-eat':
+            return '今天吃什么？'
+        case '/table-design':
+            return '一桌菜设计师'
+        case '/about':
+            return '关于一饭封神'
+        default:
+            return '一饭封神'
+    }
+})
+
+const pageSubtitle = computed(() => {
+    switch (route.path) {
+        case '/':
+            return '灶间有AI，顿顿米其林！'
+        case '/today-eat':
+            return "盲盒美食：'绝了！' or '寄了！'"
+        case '/table-design':
+            return '让每顿饭，都有剧本！'
+        case '/about':
+            return '算法烹万物，一键即封神！'
+        default:
+            return 'LEGENDARY STATUS FROM A SINGLE MEAL!'
+    }
+})
+</script>
+
+<style scoped>
+/* 确保导航链接的活跃状态样式 */
+.router-link-active {
+    /* 由于我们使用了动态class，这里不需要额外样式 */
+}
+
+/* 移动端菜单展开动画 */
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.space-y-2 {
+    animation: slideDown 0.3s ease-out;
+}
+</style>

src/views/About.vue

@@ -1,34 +1,7 @@
 <template>
     <div class="min-h-screen bg-yellow-400 px-2 md:px-4 py-6">
-        <!-- 头部导航 -->
-        <header class="bg-pink-400 border-4 border-black max-w-7xl mx-auto px-2 rounded-lg relative mb-6">
-            <!-- 桌面端布局 -->
-            <div class="hidden md:flex items-center justify-between py-4">
-                <router-link
-                    to="/"
-                    class="bg-white hover:bg-gray-100 text-dark-800 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105"
-                >
-                    ← 返回
-                </router-link>
-                <div class="text-center">
-                    <h1 class="text-3xl md:text-4xl font-black text-yellow-300 tracking-wider">关于一饭封神</h1>
-                </div>
-                <div class="w-24"></div>
-                <!-- 占位符保持居中 -->
-            </div>
-
-            <!-- 移动端布局 -->
-            <div class="md:hidden py-6">
-                <div class="text-center mb-4">
-                    <h1 class="text-2xl font-black text-yellow-300 tracking-wider">关于一饭封神</h1>
-                </div>
-                <div class="flex justify-center">
-                    <router-link to="/" class="bg-white hover:bg-gray-100 text-dark-800 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm">
-                        ← 返回
-                    </router-link>
-                </div>
-            </div>
-        </header>
+        <!-- 全局导航 -->
+        <GlobalNavigation />
 
         <div class="max-w-7xl mx-auto space-y-6">
             <!-- 项目简介 -->
@@ -36,12 +9,12 @@
                 <div class="bg-blue-500 text-white px-4 py-2 rounded-t-lg border-2 border-black border-b-0 inline-block mb-0">
                     <span class="font-bold text-lg">🎯 项目简介</span>
                 </div>
-                <div class="bg-white border-4 border-black rounded-lg rounded-tl-none p-6">
+                <div class="bg-white border-2 border-black rounded-lg rounded-tl-none p-6">
                     <div class="mt-4">
                         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center mb-8">
                             <div>
-                                <h2 class="text-2xl font-bold text-dark-800 mb-4">一饭封神 - AI厨艺大师指导平台</h2>
-                                <p class="text-gray-700 mb-4 leading-relaxed">
+                                <h2 class="text-xl font-bold text-dark-800 mb-4">一饭封神 - AI厨艺大师指导平台</h2>
+                                <p class="text-gray-700 text-sm mb-4 leading-relaxed">
                                     一饭封神是一个创新的AI厨艺指导平台，汇聚了中华八大菜系和国际料理的精华。 通过先进的人工智能技术，我们为每一位用户提供个性化的烹饪指导，
                                     让每一餐都能达到"封神"级别的美味体验。
                                 </p>
@@ -65,7 +38,7 @@
                                 </div>
                             </div>
                             <div class="text-center">
-                                <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg p-8 border-4 border-black">
+                                <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg p-8 border-2 border-black">
                                     <div class="text-6xl mb-4">👨‍🍳</div>
                                     <h3 class="text-xl font-bold text-white mb-2">LEGENDARY STATUS</h3>
                                     <p class="text-white text-sm">FROM A SINGLE MEAL!</p>
@@ -106,7 +79,7 @@
                 <div class="bg-gradient-to-r from-red-500 to-green-500 text-white px-4 py-2 rounded-t-lg border-2 border-black border-b-0 inline-block mb-0">
                     <span class="font-bold text-lg">👨‍🍳 大师介绍</span>
                 </div>
-                <div class="bg-white border-4 border-black rounded-lg rounded-tl-none p-6">
+                <div class="bg-white border-2 border-black rounded-lg rounded-tl-none p-6">
                     <div class="mt-4">
                         <!-- 中华八大菜系 -->
                         <div class="mb-8">
@@ -168,12 +141,12 @@
                 <div class="bg-indigo-500 text-white px-4 py-2 rounded-t-lg border-2 border-black border-b-0 inline-block mb-0">
                     <span class="font-bold text-lg">👨‍💻 关于作者</span>
                 </div>
-                <div class="bg-white border-4 border-black rounded-lg rounded-tl-none p-6">
+                <div class="bg-white border-2 border-black rounded-lg rounded-tl-none p-4 md:p-6">
                     <div class="mt-4">
                         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
                             <div>
                                 <div class="flex items-center gap-4 mb-4">
-                                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center border-4 border-black">
+                                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center border-2 border-black">
                                         <span class="text-white text-2xl font-bold">L</span>
                                     </div>
                                     <div>
@@ -181,7 +154,7 @@
                                         <p class="text-gray-600 text-sm">AI降临派</p>
                                     </div>
                                 </div>
-                                <p class="text-gray-700 mb-4 leading-relaxed">
+                                <p class="text-gray-700 mb-4 text-sm leading-relaxed">
                                     🚀 Vibe Coding 通过 Kiro 编辑器，实现了从需求分析、架构设计到代码实现的全流程开发。 致力于探索AI与传统开发的完美结合，让编程变得更加高效和有趣。
                                 </p>
                                 <div class="space-y-3">
@@ -212,7 +185,7 @@
                                 </div>
                             </div>
                             <div>
-                                <div class="bg-gradient-to-br from-orange-100 to-red-100 border-2 border-orange-200 rounded-lg p-6">
+                                <div class="bg-gradient-to-br from-orange-100 to-red-100 border-2 border-orange-200 rounded-lg p-2 md:p-6">
                                     <div class="flex items-center gap-6">
                                         <div class="flex-1">
                                             <div class="flex items-center gap-3 mb-3">
@@ -233,11 +206,16 @@
                 </div>
             </div>
         </div>
+
+        <!-- 底部 -->
+        <GlobalFooter />
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import GlobalNavigation from '@/components/GlobalNavigation.vue'
+import GlobalFooter from '@/components/GlobalFooter.vue'
 
 // 中华八大菜系数据
 const chineseCuisines = ref([

src/views/Home.vue

@@ -1,77 +1,9 @@
 <template>
     <div class="min-h-screen bg-yellow-400 px-2 md:px-4 py-6">
-        <!-- 头部 - 粉色区域 -->
-        <header class="bg-pink-400 border-4 border-black max-w-7xl mx-auto px-2 rounded-lg relative">
-            <!-- 桌面端导航 -->
-            <div class="hidden md:block absolute top-4 right-4">
-                <div class="flex gap-3">
-                    <router-link
-                        to="/today-eat"
-                        class="bg-orange-400 hover:bg-orange-500 text-white px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
-                    >
-                        🎲 今天吃什么？
-                    </router-link>
-                    <router-link
-                        to="/table-design"
-                        class="bg-purple-400 hover:bg-purple-500 text-white px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
-                    >
-                        🍽️ 一桌菜设计
-                    </router-link>
-                    <router-link
-                        to="/about"
-                        class="bg-white hover:bg-gray-100 text-dark-800 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
-                    >
-                        📖 简介
-                    </router-link>
-                </div>
-            </div>
-            <div class="text-center py-8">
-                <h1 class="text-5xl font-black text-yellow-300 mb-2 tracking-wider md:text-[5rem] font-['PingFangLiuAngLeTianTi']">一饭封神</h1>
-                <p class="text-white text-lg font-medium text-[12px] md:text-[1.5rem]">LEGENDARY STATUS FROM A SINGLE MEAL!</p>
-            </div>
-        </header>
-
-        <!-- 移动端导航 -->
-        <div class="md:hidden max-w-7xl mx-auto mt-4">
-            <div class="flex justify-center gap-2 flex-wrap">
-                <router-link
-                    to="/today-eat"
-                    class="bg-orange-400 hover:bg-orange-500 text-white px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm shadow-lg"
-                >
-                    🎲 今天吃什么？
-                </router-link>
-                <router-link
-                    to="/table-design"
-                    class="bg-purple-400 hover:bg-purple-500 text-white px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm shadow-lg"
-                >
-                    🍽️ 一桌菜设计
-                </router-link>
-                <router-link
-                    to="/about"
-                    class="bg-white hover:bg-gray-100 text-dark-800 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm shadow-lg"
-                >
-                    📖 简介
-                </router-link>
-            </div>
-        </div>
-
-        <!-- 使用量显示 -->
-        <!-- <div class="mx-4 mt-4">
-            <div class="bg-white border-2 border-black rounded-lg p-4 max-w-sm mx-auto">
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center gap-2">
-                        <span class="text-lg">⚡</span>
-                        <span class="font-bold text-dark-800">DAILY USAGE</span>
-                    </div>
-                    <span class="font-bold text-xl">0/5</span>
-                </div>
-                <div class="mt-2 bg-gray-200 rounded-full h-2">
-                    <div class="bg-dark-800 h-2 rounded-full" style="width: 0%"></div>
-                </div>
-            </div>
-        </div> -->
+        <!-- 全局导航 -->
+        <GlobalNavigation />
 
-        <div class="max-w-7xl mx-auto py-6">
+        <div class="max-w-7xl mx-auto">
             <!-- 步骤1: 输入食材 -->
             <div class="mb-6">
                 <div class="bg-pink-400 text-white px-4 py-2 rounded-t-lg border-2 border-black border-b-0 inline-block">
@@ -571,11 +503,7 @@
         </div>
 
         <!-- 底部 -->
-        <footer class="bg-white border-4 border-black max-w-7xl mx-auto px-2 rounded-lg p-4 text-center">
-            <p class="text-sm text-gray-600">
-                © 2025 一饭封神 | <a href="https://github.com/liu-ziting/what-to-eat" target="_blank" class="text-retro-blue hover:underline">Powered by Liuziting</a>
-            </p>
-        </footer>
+        <GlobalFooter />
     </div>
 </template>
 
@@ -631,6 +559,8 @@ import { ref, onUnmounted } from 'vue'
 import { cuisines } from '@/config/cuisines'
 import { ingredientCategories } from '@/config/ingredients'
 import RecipeCard from '@/components/RecipeCard.vue'
+import GlobalNavigation from '@/components/GlobalNavigation.vue'
+import GlobalFooter from '@/components/GlobalFooter.vue'
 import { generateMultipleRecipes, generateCustomRecipe, generateMultipleRecipesStream } from '@/services/aiService'
 import type { Recipe, CuisineType, NutritionAnalysis } from '@/types'
 

src/views/TableDesign.vue

@@ -1,41 +1,13 @@
 <template>
     <div class="min-h-screen bg-yellow-400 px-2 md:px-4 py-6">
-        <!-- 头部 - 粉色区域 -->
-        <header class="bg-pink-400 border-4 border-black max-w-7xl mx-auto px-2 rounded-lg relative">
-            <!-- 桌面端导航 -->
-            <div class="hidden md:block absolute top-4 right-4">
-                <div class="flex gap-3">
-                    <router-link
-                        to="/"
-                        class="bg-white hover:bg-gray-100 text-dark-800 px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
-                    >
-                        ← 回到一饭封神
-                    </router-link>
-                </div>
-            </div>
-            <div class="text-center py-8">
-                <h1 class="text-5xl font-black text-yellow-300 mb-2 tracking-wider md:text-[5rem] font-['PingFangLiuAngLeTianTi']">一桌菜设计师</h1>
-                <p class="text-white text-lg font-medium text-[12px] md:text-[1.5rem]">AI MASTER CHEF TABLE DESIGNER!</p>
-            </div>
-        </header>
-
-        <!-- 移动端导航 -->
-        <div class="md:hidden max-w-7xl mx-auto mt-4">
-            <div class="flex justify-center">
-                <router-link
-                    to="/"
-                    class="bg-white hover:bg-gray-100 text-dark-800 px-6 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm shadow-lg"
-                >
-                    ← 回到一饭封神
-                </router-link>
-            </div>
-        </div>
+        <!-- 全局导航 -->
+        <GlobalNavigation />
 
         <div class="max-w-7xl mx-auto">
             <!-- 步骤1和2: 左右布局 -->
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                 <!-- 左侧: 步骤1 菜品配置 -->
-                <div class="mt-6">
+                <div class="">
                     <div class="bg-gradient-to-r from-orange-400 to-pink-400 text-white px-4 py-2 rounded-t-lg border-2 border-black border-b-0 inline-block">
                         <span class="font-bold">1. 菜品配置</span>
                     </div>
@@ -201,7 +173,7 @@
                 </div>
 
                 <!-- 右侧: 步骤2 偏好设置（可选） -->
-                <div class="md:mt-6 mt-10">
+                <div class="mt-10">
                     <div class="bg-gradient-to-r from-green-400 to-blue-400 text-white px-4 py-2 rounded-t-lg border-2 border-black border-b-0 inline-block">
                         <span class="font-bold">2. 偏好设置（可选）</span>
                     </div>
@@ -224,7 +196,7 @@
                                 >
                                     <div class="flex items-center gap-2">
                                         <span class="text-lg">🍽️</span>
-                                        <span class="font-bold text-gray-800">口味和风格设置</span>
+                                        <span class="font-bold text-gray-800 text-sm">口味和风格设置</span>
                                     </div>
                                     <span class="text-gray-500 transform transition-transform" :class="{ 'rotate-180': showTasteSettings }">▼</span>
                                 </button>
@@ -299,7 +271,7 @@
                                 >
                                     <div class="flex items-center gap-2">
                                         <span class="text-lg">⚖️</span>
-                                        <span class="font-bold text-gray-800">营养和特殊要求</span>
+                                        <span class="font-bold text-gray-800 text-sm">营养和特殊要求</span>
                                     </div>
                                     <span class="text-gray-500 transform transition-transform" :class="{ 'rotate-180': showNutritionSettings }">▼</span>
                                 </button>
@@ -460,11 +432,7 @@
         </div>
 
         <!-- 底部 -->
-        <footer class="bg-white border-4 border-black max-w-7xl mx-auto px-2 rounded-lg p-4 text-center">
-            <p class="text-sm text-gray-600">
-                © 2025 一饭封神 | <a href="https://github.com/liu-ziting/what-to-eat" target="_blank" class="text-retro-blue hover:underline">Powered by Liuziting</a>
-            </p>
-        </footer>
+        <GlobalFooter />
     </div>
 
     <!-- 菜谱弹窗 -->
@@ -503,6 +471,8 @@
 import { ref, reactive, Teleport, Transition, onMounted, onUnmounted } from 'vue'
 import type { Recipe } from '@/types'
 import RecipeCard from '@/components/RecipeCard.vue'
+import GlobalNavigation from '@/components/GlobalNavigation.vue'
+import GlobalFooter from '@/components/GlobalFooter.vue'
 import { generateTableMenu, generateDishRecipe, testAIConnection } from '@/services/aiService'
 
 // 配置选项

src/views/TodayEat.vue

@@ -1,23 +1,12 @@
 <template>
-    <div class="min-h-screen bg-gradient-to-br from-orange-100 to-yellow-100 p-4">
-        <!-- 头部 -->
-        <div class="max-w-4xl mx-auto mb-8">
-            <div class="text-center mb-6">
-                <h1 class="text-4xl font-bold text-orange-800 mb-2">{{ randomDice }} 今天吃什么？</h1>
-                <p class="text-orange-600">盲盒美食：'绝了！' or '寄了！'</p>
-            </div>
-            <div class="text-center">
-                <router-link to="/" class="inline-flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow hover:shadow-md transition-shadow text-gray-700">
-                    <span>←</span>
-                    <span>回到一饭封神</span>
-                </router-link>
-            </div>
-        </div>
+    <div class="min-h-screen bg-yellow-400 px-2 md:px-4 py-6">
+        <!-- 全局导航 -->
+        <GlobalNavigation />
 
-        <div class="max-w-4xl mx-auto space-y-6">
+        <div class="max-w-7xl mx-auto space-y-6 border-2 border-black rounded-lg">
             <!-- 开始按钮 -->
             <div v-if="!isSelecting && selectedDishes.length === 0" class="text-center">
-                <div class="bg-white rounded-2xl shadow-lg p-8">
+                <div class="bg-white rounded-lg shadow-lg p-8">
                     <div class="text-6xl mb-4">🎲</div>
                     <h2 class="text-2xl font-bold text-gray-800 mb-4">准备好了吗？</h2>
 
@@ -174,6 +163,9 @@
                 </div>
             </div>
         </div>
+
+        <!-- 底部 -->
+        <GlobalFooter />
     </div>
 </template>
 
@@ -183,6 +175,8 @@ import { cuisines } from '@/config/cuisines'
 import { ingredientCategories } from '@/config/ingredients'
 import type { Recipe, CuisineType } from '@/types'
 import RecipeCard from '@/components/RecipeCard.vue'
+import GlobalNavigation from '@/components/GlobalNavigation.vue'
+import GlobalFooter from '@/components/GlobalFooter.vue'
 
 // 状态管理
 const isSelecting = ref(false)
@@ -472,11 +466,6 @@ const resetSelection = () => {
     animation: spin 1s linear infinite;
 }
 
-/* 卡片入场动画 */
-.bg-white {
-    animation: fadeIn 0.6s ease-out;
-}
-
 /* 按钮悬停效果 */
 button {
     transition: all 0.3s ease;