From d98f5082a57e09ff7b36ac58228a9df37f81eed4 Mon Sep 17 00:00:00 2001 From: mtvpls-turso Date: Sat, 11 Jul 2026 18:47:11 +0000 Subject: [PATCH] feat: add traffic analytics configuration (Umami/GA/Custom) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add traffic analytics support to the admin panel with three provider options: - Umami (open-source, self-hosted) — script URL + website ID - Google Analytics 4 — Measurement ID (G-XXXXXXXXXX) - Custom — any third-party analytics script (百度统计, Plausible, 51la, etc.) Changes: - admin.types.ts: Add AnalyticsEnabled, AnalyticsProvider, AnalyticsScriptUrl, AnalyticsWebsiteId, AnalyticsCustomScript to SiteConfig interface - config.ts: Add default values in getInitConfig() and configSelfCheck() - api/admin/site/route.ts: Add analytics fields to destructuring, type validation, and SiteConfig update - admin/page.tsx: Add SiteConfig interface fields, state initialization, config sync, and analytics configuration UI with provider-specific input fields - layout.tsx: Inject analytics scripts into based on provider type (Umami: async script with data-website-id; GA: gtag.js + config; Custom: dangerouslySetInnerHTML) --- src/app/admin/page.tsx | 175 ++++++++++++++++++++++++++++++++ src/app/api/admin/site/route.ts | 25 ++++- src/app/layout.tsx | 42 ++++++++ src/lib/admin.types.ts | 6 ++ src/lib/config.ts | 22 ++++ 5 files changed, 269 insertions(+), 1 deletion(-) diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 43e202c..2490a27 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -24,6 +24,7 @@ import { CSS } from '@dnd-kit/utilities'; import { AlertCircle, AlertTriangle, + BarChart3, BookMarked, BookOpen, Bot, @@ -406,6 +407,11 @@ interface SiteConfig { OIDCClientId?: string; OIDCClientSecret?: string; OIDCButtonText?: string; + AnalyticsEnabled?: boolean; + AnalyticsProvider?: 'umami' | 'google' | 'custom'; + AnalyticsScriptUrl?: string; + AnalyticsWebsiteId?: string; + AnalyticsCustomScript?: string; } // 视频源数据类型 @@ -10198,6 +10204,11 @@ const SiteConfigComponent = ({ OIDCClientId: '', OIDCClientSecret: '', OIDCButtonText: '', + AnalyticsEnabled: false, + AnalyticsProvider: 'umami', + AnalyticsScriptUrl: '', + AnalyticsWebsiteId: '', + AnalyticsCustomScript: '', }); // 豆瓣数据源相关状态 @@ -11528,6 +11539,170 @@ const SiteConfigComponent = ({ + {/* 流量统计配置 */} +
+ + + + 流量统计 + + + +
+ {/* 启用开关 */} +
+
+ +

+ 开启后将在页面中注入统计脚本，支持 Umami、Google Analytics 和自定义代码 +

+
+ +
+ + {siteSettings.AnalyticsEnabled && ( + <> + {/* 统计服务提供商 */} +
+ + +
+ + {siteSettings.AnalyticsProvider === 'umami' && ( + <> +
+ + + setSiteSettings((prev) => ({ + ...prev, + AnalyticsScriptUrl: e.target.value, + })) + } + placeholder='https://your-umami-server.com/script.js' + className='mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200' + /> +

+ Umami 实例的 script.js 完整 URL +

+
+
+ + + setSiteSettings((prev) => ({ + ...prev, + AnalyticsWebsiteId: e.target.value, + })) + } + placeholder='e.g. 12345678-abcd-efgh-ijkl-1234567890ab' + className='mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200' + /> +

+ 在 Umami 后台添加网站后获取的 Website ID +

+
+ + )} + + {siteSettings.AnalyticsProvider === 'google' && ( +
+ + + setSiteSettings((prev) => ({ + ...prev, + AnalyticsWebsiteId: e.target.value, + })) + } + placeholder='G-XXXXXXXXXX' + className='mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200' + /> +

+ Google Analytics 4 的 Measurement ID，在 GA 后台「数据流」中获取 +

+
+ )} + + {siteSettings.AnalyticsProvider === 'custom' && ( +
+ +