From 80f2796c76fee41e3958cf097352302d0d4a3d49 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Fri, 25 Sep 2026 20:59:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=B8=83=E5=B1=80=EF=BC=8C=E5=B0=86=E6=A0=B8?=
 =?UTF-8?q?=E5=BF=83=E6=8C=87=E6=A0=87=E6=94=B9=E4=B8=BA=202x2=20=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E5=B9=B6=E8=B0=83=E6=95=B4=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E6=96=AD=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/AnalyticsPanel.svelte    | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/admin/AnalyticsPanel.svelte b/src/lib/components/admin/AnalyticsPanel.svelte
index fe44c0b..80b0d00 100644
--- a/src/lib/components/admin/AnalyticsPanel.svelte
+++ b/src/lib/components/admin/AnalyticsPanel.svelte
@@ -429,13 +429,13 @@
 
 	.dashboard-grid {
 		display: grid;
-		grid-template-columns: 3fr 1fr;
+		grid-template-columns: 5fr 4fr; /* 调整比例，给右边 2x2 网格留足空间 */
 		gap: 0;
 		border: 2px solid var(--text-color, #000);
 		background: transparent;
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 900px) {
 		.dashboard-grid {
 			grid-template-columns: 1fr;
 		}
@@ -450,42 +450,60 @@
 	.canvas-wrapper {
 		position: relative;
 		flex: 1;
-		min-height: 300px;
+		min-height: 250px; /* 图表不再过高 */
 		width: 100%;
 	}
 
 	.core-metrics {
-		display: flex;
-		flex-direction: column;
+		display: grid;
+		grid-template-columns: 1fr 1fr; /* 2x2 网格 */
 		border-left: 2px solid var(--text-color, #000);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 900px) {
 		.core-metrics {
 			border-left: none;
 			border-top: 2px solid var(--text-color, #000);
-			flex-direction: row;
-			flex-wrap: wrap;
 		}
 	}
 
 	.metric-item {
 		padding: 24px 20px;
-		border-bottom: 2px solid var(--text-color, #000);
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
-		flex: 1;
 		justify-content: center;
-		min-width: 140px;
+		min-width: 0; /* 防止内容撑破网格 */
 	}
 
-	.metric-item:last-child {
-		border-bottom: none;
+	/* 为 2x2 网格绘制内部边框 */
+	.metric-item:nth-child(1),
+	.metric-item:nth-child(2) {
+		border-bottom: 2px solid var(--text-color, #000);
+	}
+
+	.metric-item:nth-child(1),
+	.metric-item:nth-child(3) {
+		border-right: 2px solid var(--text-color, #000);
+	}
+
+	@media (max-width: 600px) {
+		.core-metrics {
+			grid-template-columns: 1fr;
+		}
+		.metric-item:nth-child(1),
+		.metric-item:nth-child(3) {
+			border-right: none;
+		}
+		.metric-item:nth-child(1),
+		.metric-item:nth-child(2),
+		.metric-item:nth-child(3) {
+			border-bottom: 2px solid var(--text-color, #000);
+		}
 	}
 
 	.metric-title {
-		font-size: 0.85rem;
+		font-size: 0.8rem;
 		font-weight: 600;
 		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 		display: flex;
@@ -496,22 +514,22 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 24px;
-		height: 24px;
+		width: 22px;
+		height: 22px;
 		background: rgba(0, 0, 0, 0.06);
 		border-radius: 4px;
-		margin-right: 8px;
+		margin-right: 6px;
 		color: var(--text-color, #000);
 	}
 
 	.metric-value {
-		font-size: 1.8rem;
+		font-size: 1.6rem;
 		font-weight: 800;
 		font-family: monospace;
 	}
 
 	.metric-subtitle {
-		font-size: 0.75rem;
+		font-size: 0.7rem;
 		color: var(--text-muted, rgba(0, 0, 0, 0.4));
 		margin-top: 2px;
 	}