From bcbdf647bee74d8b0e3cb832579b2c1a693d7521 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sat, 26 Sep 2026 11:22:44 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=E9=9D=A2=E6=9D=BF=E7=9A=84?=
 =?UTF-8?q?=20UI=20=E5=B8=83=E5=B1=80=E4=B8=8E=E6=96=87=E6=9C=AC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/AnalyticsPanel.svelte    | 49 +++++++++++++------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/admin/AnalyticsPanel.svelte b/src/lib/components/admin/AnalyticsPanel.svelte
index 09be29b..22d6ca2 100644
--- a/src/lib/components/admin/AnalyticsPanel.svelte
+++ b/src/lib/components/admin/AnalyticsPanel.svelte
@@ -311,7 +311,7 @@
 			<div class="quota-item">
 				<div class="quota-header">
 					<div class="quota-title">
-						D1 数据库日均读取 <span class="badge">基于近30天平均</span>
+						D1 读取 <span class="badge">日均</span>
 					</div>
 					<div class="quota-numbers">
 						{d1Data.length > 0 ? formatNumber(d1ReadDaily) : '-'}
@@ -329,7 +329,7 @@
 					></div>
 				</div>
 				<div class="quota-footer">
-					<span>{d1ReadPercent < 1 ? '当前用量极低，非常健康' : '状态健康'}</span>
+					<span>{d1ReadPercent < 1 ? '极度充裕' : '健康'}</span>
 					<span
 						>{d1ReadPercent < 0.01 && d1Data.length > 0
 							? '< 0.01'
@@ -342,7 +342,7 @@
 			<div class="quota-item">
 				<div class="quota-header">
 					<div class="quota-title">
-						D1 数据库日均写入 <span class="badge">基于近30天平均</span>
+						D1 写入 <span class="badge">日均</span>
 					</div>
 					<div class="quota-numbers">
 						{d1Data.length > 0 ? formatNumber(d1WriteDaily) : '-'}
@@ -360,7 +360,7 @@
 					></div>
 				</div>
 				<div class="quota-footer">
-					<span>{d1WritePercent < 1 ? '日常管理几乎不消耗额度' : '状态健康'}</span>
+					<span>{d1WritePercent < 1 ? '极度充裕' : '健康'}</span>
 					<span
 						>{d1WritePercent < 0.01 && d1Data.length > 0
 							? '< 0.01'
@@ -372,7 +372,7 @@
 			<!-- R2 Storage -->
 			<div class="quota-item">
 				<div class="quota-header">
-					<div class="quota-title">R2 存储空间用量 <span class="badge">当前峰值</span></div>
+					<div class="quota-title">R2 存储 <span class="badge">峰值</span></div>
 					<div class="quota-numbers">
 						{r2Data.length > 0 ? formatBytes(r2PayloadSize) : '-'}
 						<span class="quota-max">/ 10 GB</span>
@@ -385,7 +385,7 @@
 					></div>
 				</div>
 				<div class="quota-footer">
-					<span>{r2Percent < 1 ? '距离10GB免费上限还有海量空间' : '状态健康'}</span>
+					<span>{r2Percent < 1 ? '空间海量' : '健康'}</span>
 					<span>{r2Percent < 0.01 && r2Data.length > 0 ? '< 0.01' : r2Percent.toFixed(2)}%</span>
 				</div>
 			</div>
@@ -468,11 +468,13 @@
 	}
 
 	.metric-item {
-		padding: 20px 16px; /* 减小内边距，适应更窄的宽度 */
+		padding: 20px 16px;
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
 		justify-content: center;
+		align-items: center;
+		text-align: center;
 		min-width: 0;
 	}
 
@@ -508,6 +510,7 @@
 		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 		display: flex;
 		align-items: center;
+		justify-content: center;
 	}
 
 	.metric-icon {
@@ -532,28 +535,44 @@
 		font-size: 0.7rem;
 		color: var(--text-muted, rgba(0, 0, 0, 0.4));
 		margin-top: 2px;
+		text-align: center;
 	}
 
 	.quota-container {
 		border: 2px solid var(--text-color, #000);
 		background: transparent;
-		display: flex;
-		flex-direction: column;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
 	}
 
 	.quota-item {
-		padding: 24px;
-		border-bottom: 2px solid var(--text-color, #000);
+		padding: 24px 20px;
+		border-right: 2px solid var(--text-color, #000);
 	}
 	.quota-item:last-child {
-		border-bottom: none;
+		border-right: none;
+	}
+
+	@media (max-width: 768px) {
+		.quota-container {
+			grid-template-columns: 1fr;
+		}
+		.quota-item {
+			border-right: none;
+			border-bottom: 2px solid var(--text-color, #000);
+		}
+		.quota-item:last-child {
+			border-bottom: none;
+		}
 	}
 
 	.quota-header {
 		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-		margin-bottom: 12px;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		gap: 8px;
+		margin-bottom: 16px;
 	}
 
 	.quota-title {