From 840af41392a2b4b3a27ff9c82ad32189fd79ef7e Mon Sep 17 00:00:00 2001
From: QIU SHENGMING <Kero64@126.com>
Date: Mon, 1 Dec 2025 12:25:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=B4=A2=E5=8A=A1=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8=E5=86=85=E5=AE=B9=EF=BC=8C=E5=B9=B6=E4=B8=94=E6=8A=8A?=
 =?UTF-8?q?=E8=B5=9E=E5=8A=A9=E9=A1=B5=E9=9D=A2=E8=BF=81=E8=BF=87=E6=9D=A5?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/expenses.astro | 42 +++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/pages/expenses.astro b/src/pages/expenses.astro
index 15264c6..77c8160 100644
--- a/src/pages/expenses.astro
+++ b/src/pages/expenses.astro
@@ -2,31 +2,39 @@
 import MainGridLayout from "@layouts/MainGridLayout.astro";
 import { Icon } from "astro-icon/components";
 
-// --- 在这里配置你的支出项目 ---
+// --- 配置支出项目 ---
 const expenses = [
     {
         name: "Cloudflare Argo Smart Routing",
-        price: "5.00", // 基础费用，根据流量会有浮动
+        price: "5.00",
         cycle: "每月",
+        isYearly: false,
         desc: "智能路由加速，优化全球访问速度"
     },
     {
         name: "域名 (mckero.com)",
-        price: "10", // 假设约 $10.00/年，平均到每月
+        price: "10.00", 
         cycle: "每年",
+        isYearly: true, 
         desc: "域名的持有成本"
     },
     {
         name: "Cloudflare Pages",
         price: "0.00",
         cycle: "每月",
+        isYearly: false,
         desc: "静态页面托管 (Free Plan)"
     },
-    // 你可以在这里继续添加项目...
 ];
 
 // 自动计算总额
-const totalMonthly = expenses.reduce((acc, item) => acc + parseFloat(item.price), 0).toFixed(2);
+const totalMonthly = expenses.reduce((acc, item) => {
+    let price = parseFloat(item.price);
+    if (item.isYearly) {
+        price = price / 12;
+    }
+    return acc + price;
+}, 0).toFixed(2);
 ---
 
 <MainGridLayout title="运行成本">
@@ -48,12 +56,12 @@ const totalMonthly = expenses.reduce((acc, item) => acc + parseFloat(item.price)
             </div>
         </div>
      
-        <div class="w-full overflow-x-auto">
+        <div class="w-full overflow-x-auto mb-10">
             <table class="w-full text-left border-collapse">
                 <thead>
                     <tr class="border-b border-black/10 dark:border-white/10 text-black/60 dark:text-white/60 text-sm">
                         <th class="py-3 px-2 font-medium">项目名称</th>
-                        <th class="py-3 px-2 font-medium">用途说明</th>
+                        <th class="py-3 px-2 font-medium hidden md:table-cell">用途说明</th>
                         <th class="py-3 px-2 font-medium text-right">费用 (USD)</th>
                     </tr>
                 </thead>
@@ -62,11 +70,12 @@ const totalMonthly = expenses.reduce((acc, item) => acc + parseFloat(item.price)
                         <tr class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200">
                             <td class="py-4 px-2">
                                 <div class="font-bold text-black dark:text-white">{item.name}</div>
-                                <div class="text-xs text-black/40 dark:text-white/40 md:hidden">{item.desc}</div> </td>
+                                <div class="text-xs text-black/40 dark:text-white/40 md:hidden mt-1">{item.desc}</div>
+                            </td>
                             <td class="py-4 px-2 hidden md:table-cell">
                                 <div class="text-sm text-black/60 dark:text-white/60">{item.desc}</div>
                             </td>
-                            <td class="py-4 px-2 text-right">
+                            <td class="py-4 px-2 text-right whitespace-nowrap">
                                 <div class="font-bold text-black dark:text-white">${item.price}</div>
                                 <div class="text-xs text-black/40 dark:text-white/40 scale-90 origin-right">{item.cycle}</div>
                             </td>
@@ -76,6 +85,21 @@ const totalMonthly = expenses.reduce((acc, item) => acc + parseFloat(item.price)
             </table>
         </div>
 
+        <div class="rounded-xl bg-[var(--card-bg)] border border-black/5 dark:border-white/5 p-6 md:p-8 text-center relative overflow-hidden group">
+            <div class="absolute top-0 right-0 -mr-8 -mt-8 w-32 h-32 bg-[var(--primary)] opacity-10 blur-3xl rounded-full pointer-events-none"></div>
+            
+            <h3 class="text-xl font-bold text-black dark:text-white mb-3">支持我的创作</h3>
+            <p class="text-black/60 dark:text-white/60 mb-6 max-w-lg mx-auto leading-relaxed">
+                你的支持是我持续更新的最大动力！哪怕是一杯咖啡的钱，也能让我开心很久。非常感谢！
+            </p>
+            
+            <a href="https://afdian.com/a/MCKeroblog" target="_blank" rel="noopener noreferrer" 
+               class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-[#946ce6] text-white font-bold hover:brightness-110 active:scale-95 transition-all shadow-lg shadow-[#946ce6]/30">
+                <Icon name="material-symbols:favorite" class="text-[1.2rem]" />
+                前往爱发电赞助
+            </a>
+        </div>
+
         <div class="mt-8 pt-4 border-t border-black/5 dark:border-white/5">
         	<p class="text-sm text-black/40 dark:text-white/40 flex items-center gap-1">
                 <Icon name="material-symbols:info-outline" class="text-[1rem]"/>