From 9121bc7022767fd23af2efe7d04ababc5b528e92 Mon Sep 17 00:00:00 2001
From: sylarchen1389 <sylarchen1389@github.com>
Date: Sun, 7 Dec 2025 23:11:37 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=AE=A1=E8=B4=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96=EF=BC=8C=E5=AE=BD=E5=BA=A6=E5=BA=94?=
 =?UTF-8?q?=E8=AF=A5=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/(app)/billing/+page.svelte | 52 +++++++++++++++------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/routes/(app)/billing/+page.svelte b/src/routes/(app)/billing/+page.svelte
index a2cead3d41..ff231349bf 100644
--- a/src/routes/(app)/billing/+page.svelte
+++ b/src/routes/(app)/billing/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, getContext } from 'svelte';
-	import { balance } from '$lib/stores';
+	import { balance, showSidebar } from '$lib/stores';
 	import { getBalance } from '$lib/apis/billing';
 	import BalanceDisplay from '$lib/components/billing/BalanceDisplay.svelte';
 	import BillingLogsTable from '$lib/components/billing/BillingLogsTable.svelte';
@@ -24,30 +24,38 @@
 	<title>{$i18n.t('计费中心')} | Cakumi</title>
 </svelte:head>
 
-<div class="billing-page max-w-7xl mx-auto px-4 py-6 space-y-6">
-	<!-- 页面标题 -->
-	<div class="page-header">
-		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{$i18n.t('计费中心')}</h1>
-		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-			查看您的余额、消费记录和统计信息
-		</p>
-	</div>
+<div
+	class="flex flex-col h-screen max-h-[100dvh] flex-1 transition-width duration-200 ease-in-out w-full max-w-full {$showSidebar
+		? 'md:max-w-[calc(100%-260px)]'
+		: 'md:max-w-[calc(100%-49px)]'}"
+>
+	<div class="flex-1 overflow-y-auto min-w-[320px]">
+		<div class="billing-page max-w-4xl mx-auto px-4 py-6 space-y-6 pb-16">
+			<!-- 页面标题 -->
+			<div class="page-header">
+				<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{$i18n.t('计费中心')}</h1>
+				<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+					{$i18n.t('查看您的余额、消费记录和统计信息')}
+				</p>
+			</div>
 
-	<!-- 余额不足警告 -->
-	<LowBalanceAlert />
+			<!-- 余额不足警告 -->
+			<LowBalanceAlert />
 
-	<!-- 余额卡片 -->
-	<div class="balance-section">
-		<BalanceDisplay />
-	</div>
+			<!-- 余额卡片 -->
+			<div class="balance-section">
+				<BalanceDisplay />
+			</div>
 
-	<!-- 统计图表 -->
-	<div class="stats-section">
-		<BillingStatsChart />
-	</div>
+			<!-- 统计图表 -->
+			<div class="stats-section">
+				<BillingStatsChart />
+			</div>
 
-	<!-- 消费记录 -->
-	<div class="logs-section">
-		<BillingLogsTable />
+			<!-- 消费记录 -->
+			<div class="logs-section">
+				<BillingLogsTable />
+			</div>
+		</div>
 	</div>
 </div>