style: 优化后台数据分析面板的 UI 布局与文本展示

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;
+		display: grid;
-		flex-direction: column;
+		grid-template-columns: repeat(3, 1fr);
 	}
 
 	.quota-item {
-		padding: 24px;
+		padding: 24px 20px;
-		border-bottom: 2px solid var(--text-color, #000);
+		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;
+		flex-direction: column;
-		align-items: flex-end;
+		justify-content: flex-start;
-		margin-bottom: 12px;
+		align-items: flex-start;
+		gap: 8px;
+		margin-bottom: 16px;
 	}
 
 	.quota-title {