diff --git a/src/lib/components/admin/AnalyticsPanel.svelte b/src/lib/components/admin/AnalyticsPanel.svelte index 01160ec..fe44c0b 100644 --- a/src/lib/components/admin/AnalyticsPanel.svelte +++ b/src/lib/components/admin/AnalyticsPanel.svelte @@ -196,20 +196,104 @@
-
页面浏览 (PV)
+
+ + + + 页面浏览 (PV) +
{totalPV.toLocaleString()}
+
近 30 天累计访问量
-
独立访客 (UV)
+
+ + + + 独立访客 (UV) +
{totalUV.toLocaleString()}
+
近 30 天去重访客数
-
消耗总带宽
+
+ + + + 消耗总带宽 +
{formatBytes(totalBytes)}
+
包含网页及所有静态资源
-
缓存命中率
+
+ + + + 缓存命中率 +
{hitRate.toFixed(1)}%
+
由 Cloudflare CDN 成功拦截
@@ -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;