mirror of
https://github.com/MCKero6423/fuwari.git
synced 2026-10-02 03:15:35 +00:00
把财务报表历史详细记录表格更改
This commit is contained in:
mckero authored and 
GitHub committed
1 parent
9996d1be5b
commit
e5c52769d3
1 file changed
+34
-29
+34
-29
@@ -43,13 +43,13 @@ const historyData = [
|
|||||||
{
|
{
|
||||||
date: "2025/11",
|
date: "2025/11",
|
||||||
cost: "5.00",
|
cost: "5.00",
|
||||||
income: "0.00",
|
income: "0.00", // 示例：没有赞助的情况
|
||||||
items: "Argo 订阅费"
|
items: "Argo 流量费 + 域名分摊"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: "2025/11",
|
date: "2025/10",
|
||||||
cost: "0.8",
|
cost: "0.80",
|
||||||
income: "0.00",
|
income: "0.00", // 示例：有赞助的情况
|
||||||
items: "Argo 流量费"
|
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="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>
|
<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>
|
<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 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">
|
<h2 class="text-lg font-bold text-black dark:text-white mb-4 flex items-center gap-2">
|
||||||
<Icon name="material-symbols:history" /> 历史收支明细
|
<Icon name="material-symbols:history" /> 历史收支明细
|
||||||
</h2>
|
</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">
|
<div class="flex flex-col gap-3">
|
||||||
<thead class="bg-black/5 dark:bg-white/5">
|
{historyData.map((row) => (
|
||||||
<tr class="text-black/60 dark:text-white/60">
|
<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">
|
||||||
<th class="py-3 px-4 font-medium whitespace-nowrap">日期</th>
|
<div class="flex flex-col gap-1">
|
||||||
<th class="py-3 px-4 font-medium w-full">消费内容</th>
|
<div class="font-bold text-black dark:text-white text-base">
|
||||||
<th class="py-3 px-4 font-medium text-right whitespace-nowrap">支出</th>
|
{row.items}
|
||||||
<th class="py-3 px-4 font-medium text-right whitespace-nowrap text-green-600 dark:text-green-400">赞助</th>
|
</div>
|
||||||
</tr>
|
<div class="text-xs text-black/50 dark:text-white/50 flex items-center gap-1">
|
||||||
</thead>
|
<Icon name="material-symbols:calendar-month" />
|
||||||
<tbody class="divide-y divide-black/5 dark:divide-white/5">
|
{row.date}
|
||||||
{historyData.map((row) => (
|
</div>
|
||||||
<tr class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
|
</div>
|
||||||
<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>
|
<div class="text-right flex flex-col gap-0.5">
|
||||||
<td class="py-3 px-4 text-right whitespace-nowrap font-mono text-black/70 dark:text-white/70">-${row.cost}</td>
|
<div class="font-mono font-medium text-black/80 dark:text-white/80">
|
||||||
<td class="py-3 px-4 text-right whitespace-nowrap font-mono font-bold text-green-600 dark:text-green-400">
|
-${row.cost}
|
||||||
{parseFloat(row.income) > 0 ? `+$${row.income}` : '-'}
|
</div>
|
||||||
</td>
|
{parseFloat(row.income) > 0 && (
|
||||||
</tr>
|
<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}
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
)}
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user