blogflare/src/lib/components/admin/AnalyticsPanel.svelte

<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;
				}
				loading = false;
			})
			.catch((err: unknown) => {
				console.error(err);
				error = '获取数据失败，请检查 Cloudflare 环境变量配置。';
				loading = false;
			});
	});

	$effect(() => {
		if (chartCanvas && analyticsData && analyticsData.length > 0) {
			renderChart(analyticsData);
		}
	});

	async function renderChart(data: any[]) {
		if (!chartCanvas) return;

		const ChartJS = await import('chart.js/auto');
		const Chart = ChartJS.default || ChartJS;

		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>