feat: 在后台设置中新增 Cloudflare 流量统计与站点数据面板
This commit is contained in:
seahi committed
1 parent
f340258afd
commit
ad101e15a8
3 files changed
+291
-3
No files matched your search
@@ -0,0 +1,266 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
let { analyticsPromise, dbStats } = $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 error = $state('');
|
||||
|
||||
let totalRequests = $state(0);
|
||||
let totalCached = $state(0);
|
||||
let totalBytes = $state(0);
|
||||
let hitRate = $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;
|
||||
});
|
||||
hitRate = totalRequests > 0 ? (totalCached / totalRequests) * 100 : 0;
|
||||
renderChart(data);
|
||||
}
|
||||
loading = false;
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
console.error(err);
|
||||
error = '获取数据失败，请检查 Cloudflare 环境变量配置。';
|
||||
loading = false;
|
||||
});
|
||||
});
|
||||
|
||||
async function renderChart(data: any[]) {
|
||||
if (!chartCanvas) return;
|
||||
|
||||
const ChartJS = await import('chart.js/auto');
|
||||
const Chart = ChartJS.default;
|
||||
|
||||
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);
|
||||
|
||||
if (chartInstance) {
|
||||
chartInstance.destroy();
|
||||
}
|
||||
|
||||
chartInstance = new Chart(chartCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: '总请求数',
|
||||
data: requests,
|
||||
borderColor: '#333',
|
||||
backgroundColor: 'rgba(0,0,0,0.05)',
|
||||
tension: 0.3,
|
||||
fill: true
|
||||
},
|
||||
{
|
||||
label: '缓存命中数',
|
||||
data: cached,
|
||||
borderColor: '#4caf50',
|
||||
backgroundColor: 'rgba(76, 175, 80, 0.1)',
|
||||
tension: 0.3,
|
||||
fill: true
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
</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>
|
||||
<p>正在从 Cloudflare 获取最近 30 天流量数据...</p>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="error-state">
|
||||
{error}
|
||||
</div>
|
||||
{:else if !analyticsData || analyticsData.length === 0}
|
||||
<div class="empty-state">
|
||||
没有获取到有效的流量数据，请确保 CF_API_TOKEN 和 CF_ZONE_ID 配置正确，且网站已有访问。
|
||||
</div>
|
||||
{:else}
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-title">总请求数 (30天)</div>
|
||||
<div class="stat-value">{totalRequests.toLocaleString()}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-title">总下发流量 (30天)</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<h3>流量与缓存趋势 (近30天)</h3>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas bind:this={chartCanvas}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.analytics-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.error-state,
|
||||
.empty-state {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
border: 2px dashed var(--border-color, rgba(0, 0, 0, 0.2));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
color: #e53935;
|
||||
border-color: #e53935;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: var(--text-color, #000);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 15px auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,26 +2,44 @@
|
||||
|
||||
import { fail } from '@sveltejs/kit';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
import { fetchAnalytics } from '$lib/server/cloudflare';
|
||||
|
||||
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', err);
|
||||
console.error('Failed to load settings or stats', err);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user: locals.user,
|
||||
platformEnv: db ? 'Cloudflare D1 (Connected)' : 'Local Mock',
|
||||
settings
|
||||
settings,
|
||||
dbStats,
|
||||
analytics: fetchAnalytics(platform) // Streaming promise
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import DatePicker from '$lib/components/admin/DatePicker.svelte';
|
||||
import TextInput from '$lib/components/admin/TextInput.svelte';
|
||||
import Button from '$lib/components/admin/Button.svelte';
|
||||
import AnalyticsPanel from '$lib/components/admin/AnalyticsPanel.svelte';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
@@ -44,7 +45,8 @@
|
||||
tabs={[
|
||||
{ id: 'basic', label: '基础信息' },
|
||||
{ id: 'appearance', label: '外观与主页' },
|
||||
{ id: 'terms', label: '术语设定' }
|
||||
{ id: 'terms', label: '术语设定' },
|
||||
{ id: 'analytics', label: '数据统计' }
|
||||
]}
|
||||
bind:activeTab
|
||||
/>
|
||||
@@ -318,6 +320,8 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{:else if activeTab === 'analytics'}
|
||||
<AnalyticsPanel analyticsPromise={data.analytics} dbStats={data.dbStats} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user