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 12:47:01 +08:00
1 parent 0132b3e991
commit c6b65adcaf
1 file changed
+261 -98
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/admin/AnalyticsPanel.svelte
+261 -98
View File
@@ -25,6 +25,14 @@
let d1RowsWritten = $state(0);
let r2PayloadSize = $state(0);
let d1ReadDaily = $derived(d1Data.length > 0 ? d1RowsRead / 30 : 0);
let d1ReadPercent = $derived(d1Data.length > 0 ? (d1ReadDaily / 5000000) * 100 : 0);
let d1WriteDaily = $derived(d1Data.length > 0 ? d1RowsWritten / 30 : 0);
let d1WritePercent = $derived(d1Data.length > 0 ? (d1WriteDaily / 100000) * 100 : 0);
let r2Percent = $derived(
r2Data.length > 0 ? (r2PayloadSize / (10 * 1024 * 1024 * 1024)) * 100 : 0
);
$effect(() => {
analyticsPromise
.then((data: any) => {
@@ -178,60 +186,124 @@
没有获取到有效的流量数据，请确保 CF_API_TOKEN 和 CF_ZONE_ID 配置正确，且网站已有访问。
</div>
{:else}
<div class="section-title">Cloudflare 资源消耗 (近30天)</div>
{#if missingEnvVars}
<div class="info-alert">
💡 提示：如需查看 D1 数据库读写和 R2 存储用量，请在系统环境变量中补充 <code
>CF_ACCOUNT_ID</code
>, <code>CF_D1_ID</code> 和 <code>CF_R2_BUCKET</code>。
</div>
{/if}
<div class="stats-row">
<div class="stat-card">
<div class="stat-title">D1 数据库读取行数</div>
<div class="stat-value">{d1Data.length > 0 ? formatNumber(d1RowsRead) : '-'}</div>
</div>
<div class="stat-card">
<div class="stat-title">D1 数据库写入行数</div>
<div class="stat-value">{d1Data.length > 0 ? formatNumber(d1RowsWritten) : '-'}</div>
</div>
<div class="stat-card">
<div class="stat-title">R2 存储空间用量</div>
<div class="stat-value">{r2Data.length > 0 ? formatBytes(r2PayloadSize) : '-'}</div>
</div>
</div>
<div class="section-title">30天访问流量</div>
<div class="section-title" style="margin-top: 10px;">网站流量统计 (近30天)</div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-title">页面浏览量 (PV)</div>
<div class="stat-value">{totalPV.toLocaleString()}</div>
<div class="dashboard-grid">
<div class="chart-container">
<div class="canvas-wrapper">
<canvas bind:this={chartCanvas}></canvas>
</div>
</div>
<div class="stat-card">
<div class="stat-title">独立访客 (UV)</div>
<div class="stat-value">{totalUV.toLocaleString()}</div>
</div>
<div class="stat-card">
<div class="stat-title">总请求数</div>
<div class="stat-value">{totalRequests.toLocaleString()}</div>
</div>
<div class="stat-card">
<div class="stat-title">总下发流量</div>
<div class="stat-value">{formatBytes(totalBytes)}</div>
</div>
<div class="stat-card">
<div class="stat-title">缓存命中率</div>
<div class="stat-value">{hitRate.toFixed(1)}%</div>
<div class="progress-bar">
<div class="progress-fill" style="width: {hitRate}%"></div>
<div class="core-metrics">
<div class="metric-item">
<div class="metric-title">页面浏览 (PV)</div>
<div class="metric-value" style="color: #2196F3">{totalPV.toLocaleString()}</div>
</div>
<div class="metric-item">
<div class="metric-title">独立访客 (UV)</div>
<div class="metric-value">{totalUV.toLocaleString()}</div>
</div>
<div class="metric-item">
<div class="metric-title">消耗总带宽</div>
<div class="metric-value">{formatBytes(totalBytes)}</div>
</div>
<div class="metric-item">
<div class="metric-title">缓存命中率</div>
<div class="metric-value" style="color: #4caf50">{hitRate.toFixed(1)}%</div>
</div>
</div>
</div>
<div class="chart-container">
<h3>流量趋势 (近30天)</h3>
<div class="canvas-wrapper">
<canvas bind:this={chartCanvas}></canvas>
<div class="section-title">Cloudflare 资源配额</div>
{#if missingEnvVars}
<div class="info-alert">
提示：如需正常获取 D1 和 R2 数据，请确保在环境变量中配置 <code>CF_ACCOUNT_ID</code>,
<code>CF_D1_ID</code>
和 <code>CF_R2_BUCKET</code>。
</div>
{/if}
<div class="quota-container">
<!-- D1 Read -->
<div class="quota-item">
<div class="quota-header">
<div class="quota-title">
D1 数据库日均读取 <span class="badge">基于近30天平均</span>
</div>
<div class="quota-numbers">
{d1Data.length > 0 ? formatNumber(d1ReadDaily) : '-'}
<span class="quota-max">/ 5M</span>
</div>
</div>
<div class="quota-bar-bg">
<div
class="quota-bar-fill {d1ReadPercent > 90
? 'danger'
: d1ReadPercent > 70
? 'warning'
: 'safe'}"
style="width: {Math.min(d1ReadPercent, 100)}%"
></div>
</div>
<div class="quota-footer">
<span>{d1ReadPercent < 1 ? '当前用量极低，非常健康' : '状态健康'}</span>
<span
>{d1ReadPercent < 0.01 && d1Data.length > 0
? '< 0.01'
: d1ReadPercent.toFixed(2)}%</span
>
</div>
</div>
<!-- D1 Write -->
<div class="quota-item">
<div class="quota-header">
<div class="quota-title">
D1 数据库日均写入 <span class="badge">基于近30天平均</span>
</div>
<div class="quota-numbers">
{d1Data.length > 0 ? formatNumber(d1WriteDaily) : '-'}
<span class="quota-max">/ 100K</span>
</div>
</div>
<div class="quota-bar-bg">
<div
class="quota-bar-fill {d1WritePercent > 90
? 'danger'
: d1WritePercent > 70
? 'warning'
: 'safe'}"
style="width: {Math.min(d1WritePercent, 100)}%"
></div>
</div>
<div class="quota-footer">
<span>{d1WritePercent < 1 ? '日常管理几乎不消耗额度' : '状态健康'}</span>
<span
>{d1WritePercent < 0.01 && d1Data.length > 0
? '< 0.01'
: d1WritePercent.toFixed(2)}%</span
>
</div>
</div>
<!-- R2 Storage -->
<div class="quota-item">
<div class="quota-header">
<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>
</div>
</div>
<div class="quota-bar-bg">
<div
class="quota-bar-fill {r2Percent > 90 ? 'danger' : r2Percent > 70 ? 'warning' : 'safe'}"
style="width: {Math.min(r2Percent, 100)}%"
></div>
</div>
<div class="quota-footer">
<span>{r2Percent < 1 ? '距离10GB免费上限还有海量空间' : '状态健康'}</span>
<span>{r2Percent < 0.01 && r2Data.length > 0 ? '< 0.01' : r2Percent.toFixed(2)}%</span>
</div>
</div>
</div>
{/if}
@@ -241,14 +313,17 @@
.analytics-panel {
display: flex;
flex-direction: column;
gap: 24px;
gap: 30px;
}
.section-title {
font-size: 1.2rem;
font-weight: 600;
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: -10px;
margin-bottom: -15px;
display: flex;
align-items: center;
gap: 8px;
}
.info-alert {
@@ -268,61 +343,22 @@
font-family: monospace;
}
.stats-row {
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.stat-card {
grid-template-columns: 3fr 1fr;
gap: 0;
border: 2px solid var(--text-color, #000);
padding: 20px;
background: transparent;
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-muted, rgba(0, 0, 0, 0.6));
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
font-size: 2rem;
font-weight: 800;
font-family: monospace;
}
.progress-bar {
width: 100%;
height: 6px;
background: rgba(0, 0, 0, 0.1);
margin-top: 8px;
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #4caf50;
transition: width 1s ease-out;
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
.chart-container {
border: 2px solid var(--text-color, #000);
padding: 20px;
background: transparent;
}
.chart-container h3 {
margin: 0 0 20px 0;
font-size: 1.1rem;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
padding-bottom: 10px;
}
.canvas-wrapper {
@@ -331,6 +367,133 @@
width: 100%;
}
.core-metrics {
display: flex;
flex-direction: column;
border-left: 2px solid var(--text-color, #000);
}
@media (max-width: 768px) {
.core-metrics {
border-left: none;
border-top: 2px solid var(--text-color, #000);
flex-direction: row;
flex-wrap: wrap;
}
}
.metric-item {
padding: 20px;
border-bottom: 2px solid var(--text-color, #000);
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 140px;
}
.metric-item:last-child {
border-bottom: none;
}
.metric-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted, rgba(0, 0, 0, 0.6));
}
.metric-value {
font-size: 1.8rem;
font-weight: 800;
font-family: monospace;
}
.quota-container {
border: 2px solid var(--text-color, #000);
background: transparent;
display: flex;
flex-direction: column;
}
.quota-item {
padding: 24px;
border-bottom: 2px solid var(--text-color, #000);
}
.quota-item:last-child {
border-bottom: none;
}
.quota-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px;
}
.quota-title {
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
}
.badge {
font-size: 0.75rem;
font-weight: 400;
background: rgba(0, 0, 0, 0.05);
border: 1px solid var(--text-color, #000);
padding: 2px 8px;
border-radius: 12px;
color: var(--text-muted, rgba(0, 0, 0, 0.6));
}
.quota-numbers {
font-size: 1.1rem;
font-weight: 700;
font-family: monospace;
}
.quota-max {
color: var(--text-muted, rgba(0, 0, 0, 0.5));
font-weight: 500;
font-size: 0.9rem;
}
.quota-bar-bg {
width: 100%;
height: 10px;
background: rgba(0, 0, 0, 0.1);
border: 1px solid var(--text-color, #000);
border-radius: 6px;
overflow: hidden;
}
.quota-bar-fill {
height: 100%;
transition: width 1s ease-out;
}
.quota-bar-fill.safe {
background: #4caf50;
}
.quota-bar-fill.warning {
background: #ff9800;
}
.quota-bar-fill.danger {
background: #e53935;
}
.quota-footer {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 0.85rem;
color: var(--text-muted, rgba(0, 0, 0, 0.6));
}
.loading-state,
.error-state,
.empty-state {