优化界面

src/components/GlobalNavigation.vue

@@ -21,7 +21,7 @@
                     <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'"
+                        :class="$route.path === '/' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🏠</span>
                         <span>主页</span>
@@ -29,7 +29,7 @@
                     <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'"
+                        :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>
@@ -37,7 +37,7 @@
                     <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'"
+                        :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>
@@ -45,7 +45,7 @@
                     <router-link
                         to="/favorites"
                         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 === '/favorites' ? 'bg-red-400 text-white' : 'bg-red-100 text-red-700 hover:bg-red-200'"
+                        :class="$route.path === '/favorites' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>❤️</span>
                         <span>我的收藏</span>
@@ -53,7 +53,7 @@
                     <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'"
+                        :class="$route.path === '/about' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>📖</span>
                         <span>简介</span>
@@ -89,7 +89,7 @@
                         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'"
+                        :class="$route.path === '/' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>🏠</span>
                         <span>主页</span>
@@ -98,7 +98,7 @@
                         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'"
+                        :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>
@@ -107,7 +107,7 @@
                         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'"
+                        :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>
@@ -116,7 +116,7 @@
                         to="/favorites"
                         @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 === '/favorites' ? 'bg-red-400 text-white' : 'bg-red-100 text-red-700 hover:bg-red-200'"
+                        :class="$route.path === '/favorites' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>❤️</span>
                         <span>我的收藏</span>
@@ -125,7 +125,7 @@
                         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'"
+                        :class="$route.path === '/about' ? 'bg-yellow-400 text-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                     >
                         <span>📖</span>
                         <span>简介</span>

src/views/Favorites.vue

@@ -10,7 +10,7 @@
                     <span class="font-bold">我的收藏</span>
                 </div>
                 <div class="bg-white border-2 border-black rounded-lg rounded-tl-none p-4 md:p-6">
-                    <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center justify-between">
                         <div class="flex items-center gap-3">
                             <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center">
                                 <span class="text-white text-2xl">❤️</span>
@@ -126,7 +126,7 @@
                             </div>
                             <div class="flex items-center gap-2">
                                 <button @click="editNotes(favorite)" class="text-blue-500 hover:text-blue-600 text-sm" title="编辑备注">📝</button>
-                                <button @click="removeFavorite(favorite.recipe.id)" class="text-red-500 hover:text-red-600 text-sm" title="取消收藏">🗑️</button>
+                                <button @click="confirmRemoveFavorite(favorite.recipe.id)" class="text-red-500 hover:text-red-600 text-sm" title="取消收藏">🗑️</button>
                             </div>
                         </div>
 
@@ -145,7 +145,7 @@
             </div>
 
             <!-- 空状态 -->
-            <div v-else-if="favorites.length === 0" class="text-center py-16">
+            <div v-else-if="favorites.length === 0" class="text-center py-6">
                 <div class="bg-white border-2 border-black rounded-lg p-8">
                     <div class="text-6xl mb-4">🤍</div>
                     <h3 class="text-xl font-bold text-gray-800 mb-2">还没有收藏任何菜谱</h3>
@@ -188,6 +188,9 @@
             @cancel="showClearConfirm = false"
         />
 
+        <!-- 单个删除确认弹窗 -->
+        <ConfirmModal v-if="removingRecipeId" title="确认取消收藏" message="确定要取消收藏这道菜谱吗？" @confirm="removeFavorite" @cancel="removingRecipeId = null" />
+
         <!-- 底部 -->
         <GlobalFooter />
     </div>
@@ -310,14 +313,23 @@ const saveNotes = (notes: string) => {
 }
 
 // 移除收藏
-const removeFavorite = (recipeId: string) => {
-    const success = FavoriteService.removeFavorite(recipeId)
+const removingRecipeId = ref<string | null>(null)
+
+const confirmRemoveFavorite = (recipeId: string) => {
+    removingRecipeId.value = recipeId
+}
+
+const removeFavorite = () => {
+    if (!removingRecipeId.value) return
+
+    const success = FavoriteService.removeFavorite(removingRecipeId.value)
     if (success) {
         refreshFavorites()
         showToast('已取消收藏', 'info')
     } else {
         showToast('取消收藏失败', 'error')
     }
+    removingRecipeId.value = null
 }
 
 // 清空所有收藏