feat: 优化管理员分析面板样式与核心指标展示

src/lib/components/admin/AnalyticsPanel.svelte

@@ -196,20 +196,104 @@
 			</div>
 			<div class="core-metrics">
 				<div class="metric-item">
-					<div class="metric-title">页面浏览 (PV)</div>
+					<div class="metric-title">
+						<span class="metric-icon" style="color: #2196F3; background: rgba(33,150,243,0.1)">
+							<svg
+								viewBox="0 0 24 24"
+								width="14"
+								height="14"
+								stroke="currentColor"
+								stroke-width="2"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle
+									cx="12"
+									cy="12"
+									r="3"
+								></circle></svg
+							>
+						</span>
+						页面浏览 (PV)
+					</div>
 					<div class="metric-value" style="color: #2196F3">{totalPV.toLocaleString()}</div>
+					<div class="metric-subtitle">近 30 天累计访问量</div>
 				</div>
 				<div class="metric-item">
-					<div class="metric-title">独立访客 (UV)</div>
+					<div class="metric-title">
+						<span class="metric-icon">
+							<svg
+								viewBox="0 0 24 24"
+								width="14"
+								height="14"
+								stroke="currentColor"
+								stroke-width="2"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle
+									cx="12"
+									cy="7"
+									r="4"
+								></circle></svg
+							>
+						</span>
+						独立访客 (UV)
+					</div>
 					<div class="metric-value">{totalUV.toLocaleString()}</div>
+					<div class="metric-subtitle">近 30 天去重访客数</div>
 				</div>
 				<div class="metric-item">
-					<div class="metric-title">消耗总带宽</div>
+					<div class="metric-title">
+						<span class="metric-icon">
+							<svg
+								viewBox="0 0 24 24"
+								width="14"
+								height="14"
+								stroke="currentColor"
+								stroke-width="2"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect
+									x="2"
+									y="14"
+									width="20"
+									height="8"
+									rx="2"
+									ry="2"
+								></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line
+									x1="6"
+									y1="18"
+									x2="6.01"
+									y2="18"
+								></line></svg
+							>
+						</span>
+						消耗总带宽
+					</div>
 					<div class="metric-value">{formatBytes(totalBytes)}</div>
+					<div class="metric-subtitle">包含网页及所有静态资源</div>
 				</div>
 				<div class="metric-item">
-					<div class="metric-title">缓存命中率</div>
+					<div class="metric-title">
+						<span class="metric-icon" style="color: #4caf50; background: rgba(76,175,80,0.1)">
+							<svg
+								viewBox="0 0 24 24"
+								width="14"
+								height="14"
+								stroke="currentColor"
+								stroke-width="2"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg
+							>
+						</span>
+						缓存命中率
+					</div>
 					<div class="metric-value" style="color: #4caf50">{hitRate.toFixed(1)}%</div>
+					<div class="metric-subtitle">由 Cloudflare CDN 成功拦截</div>
 				</div>
 			</div>
 		</div>
@@ -359,11 +443,14 @@
 
 	.chart-container {
 		padding: 20px;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.canvas-wrapper {
 		position: relative;
-		height: 300px;
+		flex: 1;
+		min-height: 300px;
 		width: 100%;
 	}
 
@@ -383,12 +470,13 @@
 	}
 
 	.metric-item {
-		padding: 20px;
+		padding: 24px 20px;
 		border-bottom: 2px solid var(--text-color, #000);
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 6px;
 		flex: 1;
+		justify-content: center;
 		min-width: 140px;
 	}
 
@@ -400,6 +488,20 @@
 		font-size: 0.85rem;
 		font-weight: 600;
 		color: var(--text-muted, rgba(0, 0, 0, 0.6));
+		display: flex;
+		align-items: center;
+	}
+
+	.metric-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		background: rgba(0, 0, 0, 0.06);
+		border-radius: 4px;
+		margin-right: 8px;
+		color: var(--text-color, #000);
 	}
 
 	.metric-value {
@@ -408,6 +510,12 @@
 		font-family: monospace;
 	}
 
+	.metric-subtitle {
+		font-size: 0.75rem;
+		color: var(--text-muted, rgba(0, 0, 0, 0.4));
+		margin-top: 2px;
+	}
+
 	.quota-container {
 		border: 2px solid var(--text-color, #000);
 		background: transparent;