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

refactor: 优化后台管理面板中的流量统计和资源消耗展示
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
seahi committed 2026-09-25 11:38:34 +08:00
1 parent 9ddcb04be9
commit 11e03d1bd7
3 files changed
+111 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/admin/AnalyticsPanel.svelte
+109 -35
View File
@@ -1,34 +1,61 @@
<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
let { analyticsPromise, dbStats } = $props<{
let { analyticsPromise } = $props<{
analyticsPromise: Promise<any>;
dbStats: { posts: number; pages: number; tags: number; categories: number };
}>();
let chartCanvas = $state<HTMLCanvasElement | undefined>(undefined);
let chartInstance: any = null;
let loading = $state(true);
let analyticsData: any = $state(null);
let trafficData: any[] = $state([]);
let d1Data: any[] = $state([]);
let r2Data: any[] = $state([]);
let missingEnvVars = $state(false);
let error = $state('');
let totalRequests = $state(0);
let totalCached = $state(0);
let totalBytes = $state(0);
let hitRate = $state(0);
let totalPV = $state(0);
let totalUV = $state(0);
let d1RowsRead = $state(0);
let d1RowsWritten = $state(0);
let r2PayloadSize = $state(0);
$effect(() => {
analyticsPromise
.then((data: any) => {
analyticsData = data;
if (data && data.length > 0) {
data.forEach((day: any) => {
totalRequests += day.sum.requests;
totalCached += day.sum.cachedRequests;
totalBytes += day.sum.bytes;
if (data) {
trafficData = data.traffic || [];
d1Data = data.d1 || [];
r2Data = data.r2 || [];
missingEnvVars = data.missingEnvVars || false;
if (trafficData.length > 0) {
trafficData.forEach((day: any) => {
totalRequests += day.sum.requests || 0;
totalCached += day.sum.cachedRequests || 0;
totalBytes += day.sum.bytes || 0;
totalPV += day.sum.pageViews || 0;
totalUV += day.uniq?.uniques || 0;
});
hitRate = totalRequests > 0 ? (totalCached / totalRequests) * 100 : 0;
}
if (d1Data.length > 0) {
d1Data.forEach((row: any) => {
d1RowsRead += row.sum.rowsRead || 0;
d1RowsWritten += row.sum.rowsWritten || 0;
});
}
if (r2Data.length > 0) {
r2PayloadSize = r2Data[0]?.sum?.payloadSize || 0;
}
}
loading = false;
})
.catch((err: unknown) => {
@@ -39,8 +66,8 @@
});
$effect(() => {
if (chartCanvas && analyticsData && analyticsData.length > 0) {
renderChart(analyticsData);
if (chartCanvas && trafficData && trafficData.length > 0) {
renderChart(trafficData);
}
});
@@ -52,7 +79,7 @@
const labels = data.map((d: any) => d.dimensions.date);
const requests = data.map((d: any) => d.sum.requests);
const cached = data.map((d: any) => d.sum.cachedRequests);
const pvs = data.map((d: any) => d.sum.pageViews);
if (chartInstance) {
chartInstance.destroy();
@@ -73,10 +100,10 @@
yAxisID: 'y'
},
{
label: '缓存命中数',
data: cached,
borderColor: '#4caf50',
backgroundColor: 'rgba(76, 175, 80, 0.1)',
label: '页面浏览量 (PV)',
data: pvs,
borderColor: '#2196F3',
backgroundColor: 'rgba(33, 150, 243, 0.1)',
tension: 0.3,
fill: true,
yAxisID: 'y1'
@@ -124,24 +151,15 @@
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
function formatNumber(num: number) {
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
return num.toString();
}
</script>
<div class="analytics-panel">
<div class="stats-row">
<div class="stat-card">
<div class="stat-title">文章总数</div>
<div class="stat-value">{dbStats.posts}</div>
</div>
<div class="stat-card">
<div class="stat-title">页面总数</div>
<div class="stat-value">{dbStats.pages}</div>
</div>
<div class="stat-card">
<div class="stat-title">分类 / 标签</div>
<div class="stat-value">{dbStats.categories} / {dbStats.tags}</div>
</div>
</div>
{#if loading}
<div class="loading-state">
<div class="spinner"></div>
@@ -151,18 +169,50 @@
<div class="error-state">
{error}
</div>
{:else if !analyticsData || analyticsData.length === 0}
{:else if !trafficData || trafficData.length === 0}
<div class="empty-state">
没有获取到有效的流量数据，请确保 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">总请求数 (30天)</div>
<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" 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>
<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">总下发流量 (30天)</div>
<div class="stat-title">总下发流量</div>
<div class="stat-value">{formatBytes(totalBytes)}</div>
</div>
<div class="stat-card">
@@ -175,7 +225,7 @@
</div>
<div class="chart-container">
<h3>流量与缓存趋势 (近30天)</h3>
<h3>流量趋势 (近30天)</h3>
<div class="canvas-wrapper">
<canvas bind:this={chartCanvas}></canvas>
</div>
@@ -190,6 +240,30 @@
gap: 24px;
}
.section-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-color);
margin-bottom: -10px;
}
.info-alert {
padding: 12px 16px;
background: rgba(33, 150, 243, 0.1);
border-left: 4px solid #2196f3;
border-radius: 4px;
font-size: 0.9rem;
color: var(--text-color);
margin-bottom: 5px;
}
.info-alert code {
background: rgba(0, 0, 0, 0.05);
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
src/routes/admin/settings/+page.server.ts
+1 -17
View File
@@ -8,29 +8,14 @@ export const load: PageServerLoad = async ({ locals, platform }) => {
const db = platform?.env?.DB;
const settings: Record<string, string> = {};
let dbStats = { posts: 0, pages: 0, tags: 0, categories: 0 };
if (db) {
try {
const { results } = await db.prepare('SELECT key, value FROM settings').all();
results.forEach((row: any) => {
settings[row.key] = row.value;
});
const [postsRes, pagesRes, tagsRes, categoriesRes] = await db.batch([
db.prepare('SELECT COUNT(*) as count FROM posts'),
db.prepare('SELECT COUNT(*) as count FROM pages'),
db.prepare('SELECT COUNT(*) as count FROM tags'),
db.prepare('SELECT COUNT(*) as count FROM categories')
]);
dbStats = {
posts: (postsRes.results[0] as any).count || 0,
pages: (pagesRes.results[0] as any).count || 0,
tags: (tagsRes.results[0] as any).count || 0,
categories: (categoriesRes.results[0] as any).count || 0
};
} catch (err: any) {
console.error('Failed to load settings or stats', err);
console.error('Failed to load settings', err);
}
}
@@ -38,7 +23,6 @@ export const load: PageServerLoad = async ({ locals, platform }) => {
user: locals.user,
platformEnv: db ? 'Cloudflare D1 (Connected)' : 'Local Mock',
settings,
dbStats,
analytics: fetchAnalytics(platform) // Streaming promise
};
};
src/routes/admin/settings/+page.svelte
+1 -1
View File
@@ -321,7 +321,7 @@
</form>
</div>
{:else if activeTab === 'analytics'}
<AnalyticsPanel analyticsPromise={data.analytics} dbStats={data.dbStats} />
<AnalyticsPanel analyticsPromise={data.analytics} />
{/if}
</div>