refactor: 优化后台管理面板中的流量统计和资源消耗展示

src/lib/components/admin/AnalyticsPanel.svelte

@@ -1,33 +1,60 @@
 <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) {
-				if (data && data.length > 0) {
+					trafficData = data.traffic || [];
-					data.forEach((day: any) => {
+					d1Data = data.d1 || [];
-						totalRequests += day.sum.requests;
+					r2Data = data.r2 || [];
-						totalCached += day.sum.cachedRequests;
+					missingEnvVars = data.missingEnvVars || false;
-						totalBytes += day.sum.bytes;
+
-					});
+					if (trafficData.length > 0) {
-					hitRate = totalRequests > 0 ? (totalCached / totalRequests) * 100 : 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;
 			})
@@ -39,8 +66,8 @@
 	});
 
 	$effect(() => {
-		if (chartCanvas && analyticsData && analyticsData.length > 0) {
+		if (chartCanvas && trafficData && trafficData.length > 0) {
-			renderChart(analyticsData);
+			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: '缓存命中数',
+						label: '页面浏览量 (PV)',
-						data: cached,
+						data: pvs,
-						borderColor: '#4caf50',
+						borderColor: '#2196F3',
-						backgroundColor: 'rgba(76, 175, 80, 0.1)',
+						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

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

@@ -321,7 +321,7 @@
 			</form>
 		</div>
 	{:else if activeTab === 'analytics'}
-		<AnalyticsPanel analyticsPromise={data.analytics} dbStats={data.dbStats} />
+		<AnalyticsPanel analyticsPromise={data.analytics} />
 	{/if}
 </div>