From e5c52769d3554cb4da63f28c5f2b9aa673f9c916 Mon Sep 17 00:00:00 2001
From: QIU SHENGMING <Kero64@126.com>
Date: Mon, 1 Dec 2025 13:00:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=8A=E8=B4=A2=E5=8A=A1=E6=8A=A5=E8=A1=A8?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AF=A6=E7=BB=86=E8=AE=B0=E5=BD=95=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/expenses.astro | 63 ++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/pages/expenses.astro b/src/pages/expenses.astro
index a2292f1..11712ae 100644
--- a/src/pages/expenses.astro
+++ b/src/pages/expenses.astro
@@ -43,13 +43,13 @@ const historyData = [
     { 
         date: "2025/11", 
         cost: "5.00", 
-        income: "0.00", 
-        items: "Argo 订阅费" 
+        income: "0.00", // 示例：没有赞助的情况
+        items: "Argo 流量费 + 域名分摊" 
     },
     { 
-        date: "2025/11", 
-        cost: "0.8", 
-        income: "0.00", 
+        date: "2025/10", 
+        cost: "0.80", 
+        income: "0.00", // 示例：有赞助的情况
         items: "Argo 流量费" 
     },
     // 可以在这里继续添加...
@@ -110,6 +110,7 @@ const historyData = [
 
         <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 mb-10">
             <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">
                 你的支持是我持续更新的最大动力！哪怕是一杯咖啡的钱，也能让我开心很久。非常感谢！
@@ -125,31 +126,35 @@ const historyData = [
             <h2 class="text-lg font-bold text-black dark:text-white mb-4 flex items-center gap-2">
                 <Icon name="material-symbols:history" /> 历史收支明细
             </h2>
-            <div class="overflow-x-auto rounded-lg border border-black/5 dark:border-white/5">
-                <table class="w-full text-left border-collapse text-sm">
-                    <thead class="bg-black/5 dark:bg-white/5">
-                        <tr class="text-black/60 dark:text-white/60">
-                            <th class="py-3 px-4 font-medium whitespace-nowrap">日期</th>
-                            <th class="py-3 px-4 font-medium w-full">消费内容</th>
-                            <th class="py-3 px-4 font-medium text-right whitespace-nowrap">支出</th>
-                            <th class="py-3 px-4 font-medium text-right whitespace-nowrap text-green-600 dark:text-green-400">赞助</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-black/5 dark:divide-white/5">
-                        {historyData.map((row) => (
-                            <tr class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
-                                <td class="py-3 px-4 whitespace-nowrap font-medium text-black/80 dark:text-white/80">{row.date}</td>
-                                <td class="py-3 px-4 text-black/60 dark:text-white/60">{row.items}</td>
-                                <td class="py-3 px-4 text-right whitespace-nowrap font-mono text-black/70 dark:text-white/70">-${row.cost}</td>
-                                <td class="py-3 px-4 text-right whitespace-nowrap font-mono font-bold text-green-600 dark:text-green-400">
-                                    {parseFloat(row.income) > 0 ? `+$${row.income}` : '-'}
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
+            
+            <div class="flex flex-col gap-3">
+                {historyData.map((row) => (
+                    <div class="flex items-center justify-between p-4 rounded-xl bg-[var(--card-bg)] border border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
+                        <div class="flex flex-col gap-1">
+                            <div class="font-bold text-black dark:text-white text-base">
+                                {row.items}
+                            </div>
+                            <div class="text-xs text-black/50 dark:text-white/50 flex items-center gap-1">
+                                <Icon name="material-symbols:calendar-month" />
+                                {row.date}
+                            </div>
+                        </div>
+
+                        <div class="text-right flex flex-col gap-0.5">
+                            <div class="font-mono font-medium text-black/80 dark:text-white/80">
+                                -${row.cost}
+                            </div>
+                            {parseFloat(row.income) > 0 && (
+                                <div class="font-mono text-xs font-bold text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-1.5 py-0.5 rounded">
+                                    赞助 +${row.income}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                ))}
             </div>
-            <div class="text-xs text-black/30 dark:text-white/30 mt-2 text-right">
+
+            <div class="text-xs text-black/30 dark:text-white/30 mt-4 text-center">
                 * 收支数据通常在次月月初更新
             </div>
         </div>