fuwari/src/pages/expenses.astro

---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";

// --- 1. 固定支出项目配置 (用于顶部概览) ---
const fixedExpenses = [
    {
        name: "Cloudflare Argo Smart Routing",
        price: "5.00",
        cycle: "每月",
        isYearly: false,
        desc: "智能路由加速，优化全球访问速度"
    },
    {
        name: "域名 (mckero.com)",
        price: "10.00", 
        cycle: "每年",
        isYearly: true, 
        desc: "域名的持有成本"
    },
    {
        name: "Cloudflare Pages",
        price: "0.00",
        cycle: "每月",
        isYearly: false,
        desc: "静态页面托管 (Free Plan)"
    },
];

// 自动计算每月固定预估 (顶部大数字)
const totalMonthly = fixedExpenses.reduce((acc, item) => {
    let price = parseFloat(item.price);
    if (item.isYearly) {
        price = price / 12;
    }
    return acc + price;
}, 0).toFixed(2);


// --- 2. 历史详细账单 (在这里添加每月的实际数据) ---
// 格式：{ date: 'YYYY/MM', cost: '支出金额', income: '赞助金额', items: '消费内容' }
const historyData = [
    { 
        date: "2025/11", 
        cost: "5.00", 
        income: "0.00", // 示例：没有赞助的情况
        items: "Argo 订阅费" 
    },
    { 
        date: "2025/11", 
        cost: "0.80", 
        income: "0.00", // 示例：有赞助的情况
        items: "Argo 流量费" 
    },
    // 可以在这里继续添加...
];
---

<MainGridLayout title="运行成本" description="本博客的运行成本明细，包括域名、CDN 等固定支出记录。">
    <div class="card-base p-6 md:p-8">
        
        <div class="flex items-center gap-2 mb-6">
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
                <Icon name="material-symbols:account-balance-wallet" class="text-[1.5rem]" />
            </div>
            <h1 class="text-2xl font-bold text-black dark:text-white">运行成本</h1>
        </div>

        <div class="mb-8 p-4 rounded-xl bg-[var(--btn-regular-bg)] border border-black/5 dark:border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
            <div class="text-center md:text-left">
                <div class="text-sm text-black/50 dark:text-white/50">每月预估固定支出</div>
                <div class="text-3xl font-bold text-[var(--primary)]">${totalMonthly} <span class="text-base font-normal text-black/40 dark:text-white/40">/ 月</span></div>
            </div>
            <div class="text-xs text-black/40 dark:text-white/40 max-w-xs text-center md:text-right">
                为了追求极致的访问速度与稳定性，这是必要的投入。
            </div>
        </div>
     
        <div class="w-full overflow-x-auto mb-10">
            <h2 class="text-lg font-bold text-black dark:text-white mb-4 flex items-center gap-2">
                <Icon name="material-symbols:list-alt-outline" /> 固定支出项目
            </h2>
            <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 hidden md:table-cell">用途说明</th>
                        <th class="py-3 px-2 font-medium text-right">费用 (USD)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-black/5 dark:divide-white/5">
                    {fixedExpenses.map((item) => (
                        <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 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 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>
                        </tr>
                    ))}
                </tbody>
            </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 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">
                你的支持是我持续更新的最大动力！哪怕是一杯咖啡的钱，也能让我开心很久。非常感谢！
            </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="w-full">
            <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="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-4 text-center">
                * 收支数据通常在次月月初更新
            </div>
        </div>

    </div>
</MainGridLayout>