mckero/fuwari
1
0 Fork 0
mirror of https://github.com/MCKero6423/fuwari.git synced 2026-10-02 03:15:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

修改财务报表内容，并且把赞助页面迁过来。

Browse Source
This commit is contained in:
mckero authored and GitHub committed 2025-12-01 12:25:51 +08:00
1 parent f5add454b9
commit 840af41392
1 file changed
+33 -9
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/expenses.astro
+33 -9
View File
@@ -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]"/>