seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化管理员分析面板样式与核心指标展示
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
seahi committed 2026-09-25 20:55:19 +08:00
1 parent c6b65adcaf
commit a77add6abc
1 file changed
+115 -7
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/admin/AnalyticsPanel.svelte
+115 -7
View File
@@ -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;