feat: 在后台设置中新增 Cloudflare 流量统计与站点数据面板

src/lib/components/admin/AnalyticsPanel.svelte

@@ -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>

src/routes/admin/settings/+page.server.ts

@@ -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
 	};
 };
 

src/routes/admin/settings/+page.svelte

@@ -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>