新增投喂区域

src/App.vue

@@ -1,11 +1,11 @@
 <template>
     <div id="app" class="min-h-screen">
         <router-view />
-        <FloatingChefAssistant />
+        <FloatingDonation />
     </div>
 </template>
 
 <script setup>
 // App组件
-import FloatingChefAssistant from './components/FloatingChefAssistant.vue'
+import FloatingDonation from './components/FloatingDonation.vue'
 </script>

src/components/FloatingDonation.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="fixed bottom-6 right-6 z-50">
+        <!-- 主按钮 -->
+        <div
+            @click="toggleModal"
+            class="group relative bg-gradient-to-br from-orange-400 via-red-400 to-pink-500 hover:from-orange-500 hover:via-red-500 hover:to-pink-600 text-white rounded-2xl shadow-2xl hover:shadow-orange-500/25 transition-all duration-500 cursor-pointer transform hover:scale-105 hover:-translate-y-1 border-2 border-white/20 backdrop-blur-sm"
+        >
+            <!-- 光晕效果 -->
+            <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-orange-300/30 to-pink-400/30 blur-xl group-hover:blur-2xl transition-all duration-500 -z-10"></div>
+
+            <!-- 按钮内容 -->
+            <div class="relative flex items-center gap-3 px-4 py-3 md:px-5 md:py-4">
+                <!-- 咖啡图标容器 -->
+                <div class="relative">
+                    <div class="text-2xl md:text-3xl filter drop-shadow-lg">☕</div>
+                    <!-- 蒸汽效果 -->
+                    <div class="absolute -top-1 left-1/2 transform -translate-x-1/2">
+                        <div class="w-1 h-2 bg-white/40 rounded-full animate-pulse"></div>
+                    </div>
+                    <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 translate-x-1">
+                        <div class="w-0.5 h-1.5 bg-white/30 rounded-full animate-pulse delay-150"></div>
+                    </div>
+                    <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 -translate-x-1">
+                        <div class="w-0.5 h-1.5 bg-white/30 rounded-full animate-pulse delay-300"></div>
+                    </div>
+                </div>
+
+                <!-- 文字 -->
+                <div class="hidden md:block">
+                    <div class="font-bold text-sm tracking-wide">投喂</div>
+                    <div class="text-xs opacity-90 -mt-0.5">支持开发</div>
+                </div>
+
+                <!-- 爱心装饰 -->
+                <div class="absolute -top-1 -right-1 text-xs animate-pulse">❤️</div>
+            </div>
+
+            <!-- 涟漪效果 -->
+            <div class="absolute inset-0 rounded-2xl overflow-hidden">
+                <div
+                    class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 skew-x-12"
+                ></div>
+            </div>
+        </div>
+
+        <!-- 提示气泡 -->
+        <div
+            v-if="!showModal"
+            class="absolute bottom-full right-0 mb-2 bg-gray-800 text-white text-xs px-3 py-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none"
+        >
+            点击支持开发者 ✨
+            <div class="absolute top-full right-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div>
+        </div>
+
+        <!-- 弹窗 -->
+        <div v-if="showModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50" @click="closeModal">
+            <div
+                @click.stop
+                class="bg-white rounded-3xl p-8 max-w-md mx-4 border-4 border-[#0A0910] shadow-2xl transform transition-all duration-500 relative overflow-hidden"
+                :class="showModal ? 'scale-100 opacity-100' : 'scale-95 opacity-0'"
+            >
+                <!-- 背景装饰 -->
+                <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-400 via-red-400 to-pink-500"></div>
+
+                <div class="text-center relative">
+                    <!-- 标题区域 -->
+                    <div class="mb-6">
+                        <div class="text-5xl mb-3 animate-bounce">☕</div>
+                        <h3 class="text-2xl font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent mb-2">支持开发者</h3>
+                        <p class="text-gray-600 text-sm leading-relaxed">
+                            🤖 AI需要成本，您的每一份支持<br />
+                            都让项目走得更远 ❤️
+                        </p>
+                    </div>
+
+                    <!-- 二维码区域 -->
+                    <div class="bg-gradient-to-br from-orange-50 to-red-50 border-3 border-orange-200 rounded-2xl p-6 mb-6 relative">
+                        <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs px-3 py-1 rounded-full">微信支付</div>
+                        <img src="/wx.jpg" alt="微信收款码" class="w-48 h-48 mx-auto border-4 border-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300" />
+                        <p class="text-xs text-gray-500 mt-3 flex items-center justify-center gap-1">
+                            <span>扫码支持开发者</span>
+                            <span class="animate-pulse">✨</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showModal = ref(false)
+
+const toggleModal = () => {
+    showModal.value = !showModal.value
+}
+
+const closeModal = () => {
+    showModal.value = false
+}
+
+const shareProject = () => {
+    if (navigator.share) {
+        navigator.share({
+            title: '一饭封神 - AI厨艺大师指导平台',
+            text: '发现这个超棒的AI美食平台，让每一餐都能达到封神级别！',
+            url: window.location.href
+        })
+    } else {
+        // 复制链接到剪贴板
+        navigator.clipboard.writeText(window.location.href)
+        alert('链接已复制到剪贴板！')
+    }
+    closeModal()
+}
+</script>

src/views/About.vue

@@ -53,18 +53,46 @@
                                 </div>
                             </div>
                             <div>
-                                <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">
-                                                <div class="text-3xl">☕</div>
-                                                <h4 class="font-bold text-dark-800 text-lg">投喂</h4>
+                                <!-- 打赏区域 - 优化版 -->
+                                <div
+                                    class="support-section bg-gradient-to-br from-orange-100 to-red-100 border-4 border-orange-300 rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02]"
+                                >
+                                    <div class="text-center mb-4">
+                                        <div class="inline-flex items-center gap-3 bg-gradient-to-r from-orange-500 to-red-500 text-white px-4 py-2 rounded-full mb-3">
+                                            <div class="text-2xl animate-bounce">☕</div>
+                                            <h4 class="font-bold text-lg">支持开发者</h4>
+                                        </div>
+                                        <p class="text-sm text-gray-700 font-medium mb-2">🤖 AI需要成本，您的支持让项目走得更远</p>
+                                        <p class="text-xs text-orange-600 bg-orange-50 px-3 py-1 rounded-full inline-block">每一份支持都是对开源精神的鼓励</p>
+                                    </div>
+
+                                    <div class="flex flex-col md:flex-row items-center gap-4">
+                                        <div class="flex-1 text-center md:text-left">
+                                            <div class="space-y-2 mb-4">
+                                                <div class="flex items-center justify-center md:justify-start gap-2">
+                                                    <span class="text-green-500">✓</span>
+                                                    <span class="text-sm">维持AI服务运行</span>
+                                                </div>
+                                                <div class="flex items-center justify-center md:justify-start gap-2">
+                                                    <span class="text-green-500">✓</span>
+                                                    <span class="text-sm">持续功能更新</span>
+                                                </div>
+                                                <div class="flex items-center justify-center md:justify-start gap-2">
+                                                    <span class="text-green-500">✓</span>
+                                                    <span class="text-sm">开源项目维护</span>
+                                                </div>
                                             </div>
-                                            <p class="text-sm text-gray-600 mb-2">AI需要成本，想要使本项目存活更久</p>
                                             <p class="text-xs text-gray-500">扫码支持开发者 →</p>
                                         </div>
                                         <div class="flex-shrink-0">
-                                            <img src="/wx.jpg" alt="微信收款码" class="w-40 h-40 border-2 border-gray-300 rounded-lg shadow-md" />
+                                            <div class="relative">
+                                                <img
+                                                    src="/wx.jpg"
+                                                    alt="微信收款码"
+                                                    class="w-32 h-32 md:w-40 md:h-40 border-4 border-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"
+                                                />
+                                                <div class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full animate-pulse">微信</div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -252,12 +280,33 @@
                                 </div>
                             </a>
                         </div>
-                        <div class="mt-6 p-4 bg-gradient-to-r from-purple-50 to-pink-50 border-2 border-purple-200 rounded-lg">
-                            <div class="flex items-center gap-3">
-                                <div class="text-2xl">✨</div>
-                                <div>
-                                    <p class="text-sm font-medium text-purple-800">持续更新中</p>
-                                    <p class="text-xs text-purple-600">更多AI工具正在开发，敬请期待！</p>
+                        <div class="mt-6 space-y-4">
+                            <div class="p-4 bg-gradient-to-r from-purple-50 to-pink-50 border-2 border-purple-200 rounded-lg">
+                                <div class="flex items-center gap-3">
+                                    <div class="text-2xl">✨</div>
+                                    <div>
+                                        <p class="text-sm font-medium text-purple-800">持续更新中</p>
+                                        <p class="text-xs text-purple-600">更多AI工具正在开发，敬请期待！</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="p-4 bg-gradient-to-r from-orange-50 to-red-50 border-2 border-orange-200 rounded-lg">
+                                <div class="flex items-center justify-between">
+                                    <div class="flex items-center gap-3">
+                                        <div class="text-2xl">☕</div>
+                                        <div>
+                                            <p class="text-sm font-medium text-orange-800">喜欢这些项目？</p>
+                                            <p class="text-xs text-orange-600">您的支持是最大的动力</p>
+                                        </div>
+                                    </div>
+                                    <a
+                                        href="#"
+                                        @click.prevent="scrollToSupport"
+                                        class="bg-orange-500 hover:bg-orange-600 text-white text-xs px-3 py-1 rounded-full transition-colors"
+                                    >
+                                        支持开发者
+                                    </a>
                                 </div>
                             </div>
                         </div>
@@ -276,6 +325,14 @@ import { ref } from 'vue'
 import GlobalNavigation from '@/components/GlobalNavigation.vue'
 import GlobalFooter from '@/components/GlobalFooter.vue'
 
+// 滚动到支持区域
+const scrollToSupport = () => {
+    const supportSection = document.querySelector('.support-section')
+    if (supportSection) {
+        supportSection.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+}
+
 // 中华八大菜系数据
 const chineseCuisines = ref([
     {