From a98c2be541d0f271355aa06f02b6624ae927bff8 Mon Sep 17 00:00:00 2001 From: Easy Date: Sun, 26 Apr 2026 03:48:17 +0800 Subject: [PATCH 1/5] feat(analytics): integrate Cloudflare Analytics Engine dashboard (CF-only) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AE 数据点写入封装（server/src/analytics/ae-tracker.ts），blob1-blob10 + double1 - Cloudflare AE SQL API 查询封装（server/src/analytics/ae-query.ts），返回 PV/UV/avgDuration/byCountry/byDevice/byBrowser/byOS/byPage/byScreen/byLang - 零依赖 UA 解析（server/src/analytics/ua-parser.ts），识别 device/browser/os - 现有 /api/posts/:slug 处理器双写 D1 visits + AE，保持向后兼容 - 新增 POST /api/track 接收 SPA 埋点，Origin 白名单 + 静默 204 兜底 - 新增 GET /api/admin/analytics/ae，DB_PROVIDER!==d1 返回 501 - 客户端埋点模块 client/src/lib/analytics.ts（FNV-1a vid + sendBeacon + History API hook，跳过 /admin） - 新增 client/public/tracker.js 第三方站点独立埋点脚本 - AdminAnalytics 改造为 Tab 容器：基础统计 / AE 增强（CF 标记） - 新增 AnalyticsAEView 仪表板，501/503 错误状态显示 CF 专属提示 - README 标注 AE 增强为 Cloudflare 部署专属功能 - wrangler.toml 注册 [[analytics_engine_datasets]] AE binding Adapted from HanAnalytics (MIT, https://github.com/uxiaohan/HanAnalytics) --- README.md | 1 + client/public/tracker.js | 103 ++++++++++++ client/src/app.tsx | 7 + client/src/lib/analytics.ts | 145 ++++++++++++++++ client/src/lib/api.ts | 38 +++++ client/src/pages/admin/analytics-ae.tsx | 215 ++++++++++++++++++++++++ client/src/pages/admin/analytics.tsx | 43 ++++- server/src/analytics/ae-query.ts | 161 ++++++++++++++++++ server/src/analytics/ae-tracker.ts | 79 +++++++++ server/src/analytics/ua-parser.ts | 56 ++++++ server/src/index.ts | 87 ++++++++++ server/wrangler.toml | 7 + 12 files changed, 939 insertions(+), 3 deletions(-) create mode 100644 client/public/tracker.js create mode 100644 client/src/lib/analytics.ts create mode 100644 client/src/pages/admin/analytics-ae.tsx create mode 100644 server/src/analytics/ae-query.ts create mode 100644 server/src/analytics/ae-tracker.ts create mode 100644 server/src/analytics/ua-parser.ts diff --git a/README.md b/README.md index c2c907a..08666ed 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ - **边缘原生** — Hono + Cloudflare Workers，无冷启动，全球 < 50ms - **存储适配** — 数据库 D1 / Turso / PostgreSQL，对象存储 R2 / S3 兼容 - **零运维成本** — 单脚本一键部署，前后端走同一条流水线 +- **访客分析** — 内置 D1 `visits` 表轻量统计；**Cloudflare 部署专属**额外解锁 Analytics Engine 增强仪表板（UV/停留时长/浏览器/操作系统/分辨率/语言），其他后端 (Turso / PostgreSQL) 仅基础统计可用 ### 🛡️ 安全合规 - **认证与防护** — JWT + 限流，CSP/HSTS 全套头，SSRF 拦截 diff --git a/client/public/tracker.js b/client/public/tracker.js new file mode 100644 index 0000000..7c5d44d --- /dev/null +++ b/client/public/tracker.js @@ -0,0 +1,103 @@ +/*! + * Monolith Analytics Tracker (CF Analytics Engine) + * Adapted from HanAnalytics (MIT) — https://github.com/uxiaohan/HanAnalytics + * + * 用法：在第三方站点的 前插入： + * + * + * 自有站点已通过 React Router 集成，无需手动加载本脚本。 + */ +(function () { + "use strict"; + var script = document.currentScript || (function () { + var s = document.getElementsByTagName("script"); + return s[s.length - 1]; + })(); + if (!script) return; + + var website = script.getAttribute("data-website-id") || "default"; + var endpoint = script.getAttribute("data-endpoint") || "/api/track"; + var VID_KEY = "monolith_vid"; + var VID_TTL = 30 * 24 * 60 * 60 * 1000; + var enterAt = 0; + var lastPath = ""; + + function hash(s) { + var h = 0x811c9dc5; + for (var i = 0; i < s.length; i++) { + h ^= s.charCodeAt(i); + h = (h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24))) >>> 0; + } + return h.toString(36); + } + + function vid() { + try { + var raw = localStorage.getItem(VID_KEY); + if (raw) { + var p = JSON.parse(raw); + if (Date.now() - p.ts < VID_TTL && p.id) return p.id; + } + } catch (_) { /* ignore */ } + var id = hash(Date.now() + "|" + Math.random() + "|" + navigator.userAgent + "|" + screen.width + "x" + screen.height); + try { localStorage.setItem(VID_KEY, JSON.stringify({ id: id, ts: Date.now() })); } catch (_) { /* ignore */ } + return id; + } + + function send(body, beacon) { + var json = JSON.stringify(body); + if (beacon && navigator.sendBeacon) { + navigator.sendBeacon(endpoint, new Blob([json], { type: "application/json" })); + return; + } + try { + fetch(endpoint, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: json, + keepalive: true, + credentials: "omit", + }).catch(function () { /* silent */ }); + } catch (_) { /* ignore */ } + } + + function payload(path, duration) { + return { + website: website, + path: path, + referer: document.referrer || "", + screen: screen.width + "x" + screen.height, + language: navigator.language || "", + visitorId: vid(), + duration: duration || 0, + }; + } + + function track() { + var path = location.pathname + location.search; + if (path === lastPath) return; + if (lastPath && enterAt > 0) send(payload(lastPath, Date.now() - enterAt), false); + lastPath = path; + enterAt = Date.now(); + send(payload(path, 0), false); + } + + function flush() { + if (!lastPath || enterAt <= 0) return; + send(payload(lastPath, Date.now() - enterAt), true); + } + + // 初始 + History API hook + track(); + var origPush = history.pushState; + var origReplace = history.replaceState; + history.pushState = function () { origPush.apply(this, arguments); track(); }; + history.replaceState = function () { origReplace.apply(this, arguments); track(); }; + window.addEventListener("popstate", track); + window.addEventListener("pagehide", flush); + document.addEventListener("visibilitychange", function () { + if (document.visibilityState === "hidden") flush(); + }); +})(); diff --git a/client/src/app.tsx b/client/src/app.tsx index 2784315..408d079 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -7,6 +7,7 @@ import { SearchOverlay } from "@/components/search"; import { ProtectedRoute } from "@/components/protected-route"; import { AdminLayout } from "@/components/admin-layout"; import { CookieConsent, getCookieConsent } from "@/components/cookie-consent"; +import { trackPageview, bindUnloadTracker } from "@/lib/analytics"; // 代码分割 (Code Splitting) const HomePage = lazy(() => import("@/pages/home").then((m) => ({ default: m.HomePage }))); @@ -58,6 +59,12 @@ function matchesPathPrefix(pathname: string, prefix: string) { export function App() { const [location] = useLocation(); + // 访客埋点：路由变化触发 pageview，页面卸载触发 duration 上报 + useEffect(() => { + bindUnloadTracker(); + trackPageview(location); + }, [location]); + // 路由判断逻辑 const isAdminRoot = matchesPathPrefix(location, "/admin"); const isEditorPage = matchesPathPrefix(location, "/admin/editor"); diff --git a/client/src/lib/analytics.ts b/client/src/lib/analytics.ts new file mode 100644 index 0000000..fd2ff72 --- /dev/null +++ b/client/src/lib/analytics.ts @@ -0,0 +1,145 @@ +/** + * 客户端访客埋点工具（CF Analytics Engine 增强版） + * 灵感来源: HanAnalytics (MIT) — https://github.com/uxiaohan/HanAnalytics + * + * 工作原理： + * 1. 首次加载生成稳定的访客 ID（localStorage 缓存 30 天，不含 PII） + * 2. 路由变化 / 首屏渲染 时调用 trackPageview + * 3. 页面 unload / pagehide 时上报本次停留时长（duration） + * 4. 后端 AE 不可用 → 接口直接 204，前端无感 + */ + +const API_BASE = import.meta.env.VITE_API_URL || ""; +const TRACK_ENDPOINT = `${API_BASE}/api/track`; +const VID_KEY = "monolith_vid"; +const VID_TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 天 + +let pageEnterAt = 0; +let lastTrackedPath = ""; + +/** 32-bit FNV-1a 哈希，输出 base36 字符串（不含 PII） */ +function hash(input: string): string { + let h = 0x811c9dc5; + for (let i = 0; i < input.length; i++) { + h ^= input.charCodeAt(i); + h = (h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24))) >>> 0; + } + return h.toString(36); +} + +/** 获取或生成稳定的访客 ID（仅写本地，不入 cookie） */ +function getVisitorId(): string { + try { + const raw = localStorage.getItem(VID_KEY); + if (raw) { + const parsed = JSON.parse(raw) as { id: string; ts: number }; + if (Date.now() - parsed.ts < VID_TTL_MS && parsed.id) return parsed.id; + } + } catch { /* ignore */ } + + const seed = `${Date.now()}|${Math.random()}|${navigator.userAgent}|${screen.width}x${screen.height}`; + const id = hash(seed); + try { + localStorage.setItem(VID_KEY, JSON.stringify({ id, ts: Date.now() })); + } catch { /* localStorage 满或被禁，忽略 */ } + return id; +} + +type TrackBody = { + website: string; + path: string; + referer: string; + screen: string; + language: string; + visitorId: string; + duration: number; +}; + +function send(body: TrackBody, useBeacon: boolean): void { + const json = JSON.stringify(body); + if (useBeacon && navigator.sendBeacon) { + // sendBeacon 在 unload 时最可靠 + const blob = new Blob([json], { type: "application/json" }); + navigator.sendBeacon(TRACK_ENDPOINT, blob); + return; + } + // keepalive 让请求在页面切换时也能完成 + fetch(TRACK_ENDPOINT, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: json, + keepalive: true, + credentials: "omit", + }).catch(() => { /* 静默失败，埋点永远不影响业务 */ }); +} + +/** 上报一次 pageview（路由变化时调用） */ +export function trackPageview(path: string, website = "default"): void { + if (!path || path === lastTrackedPath) return; + // 后台路径不上报，保护管理员隐私 + 减少噪音 + if (path.startsWith("/admin")) { + lastTrackedPath = path; + pageEnterAt = Date.now(); + return; + } + + // 上报上一页停留时长 + if (lastTrackedPath && pageEnterAt > 0) { + send( + { + website, + path: lastTrackedPath, + referer: document.referrer || "", + screen: `${screen.width}x${screen.height}`, + language: navigator.language || "", + visitorId: getVisitorId(), + duration: Date.now() - pageEnterAt, + }, + false, + ); + } + + // 上报新页面 pageview + lastTrackedPath = path; + pageEnterAt = Date.now(); + send( + { + website, + path, + referer: document.referrer || "", + screen: `${screen.width}x${screen.height}`, + language: navigator.language || "", + visitorId: getVisitorId(), + duration: 0, + }, + false, + ); +} + +let unloadBound = false; +/** 绑定 pagehide 事件，确保最后一次停留时长能上报（仅绑定一次） */ +export function bindUnloadTracker(website = "default"): void { + if (unloadBound) return; + unloadBound = true; + const flush = () => { + if (!lastTrackedPath || pageEnterAt <= 0) return; + if (lastTrackedPath.startsWith("/admin")) return; + send( + { + website, + path: lastTrackedPath, + referer: document.referrer || "", + screen: `${screen.width}x${screen.height}`, + language: navigator.language || "", + visitorId: getVisitorId(), + duration: Date.now() - pageEnterAt, + }, + true, + ); + }; + // pagehide 比 unload 更可靠（兼容 BFCache） + window.addEventListener("pagehide", flush); + document.addEventListener("visibilitychange", () => { + if (document.visibilityState === "hidden") flush(); + }); +} diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts index 964e27f..c1d161d 100644 --- a/client/src/lib/api.ts +++ b/client/src/lib/api.ts @@ -303,6 +303,44 @@ export async function fetchAnalytics(days = 7): Promise { return res.json(); } +/* ── AE 增强分析（CF 专属，仅在 D1 后端可用） ────────── */ +export type AEAnalyticsData = { + visitsByDay: { date: string; count: number; uv: number }[]; + topCountries: { country: string; count: number }[]; + topReferers: { referer: string; count: number }[]; + deviceBreakdown: { device: string; count: number }[]; + browserBreakdown: { browser: string; count: number }[]; + osBreakdown: { os: string; count: number }[]; + topPages: { path: string; count: number }[]; + topScreens: { screen: string; count: number }[]; + topLanguages: { language: string; count: number }[]; + totalVisits: number; + uniqueVisitors: number; + avgDuration: number; +}; + +export type AEAnalyticsError = { + /** 501 = 非 CF 部署；503 = 缺 token；502 = AE SQL 失败 */ + status: number; + message: string; +}; + +export async function fetchAEAnalytics(days = 7): Promise { + const res = await fetch(`${API_BASE}/api/admin/analytics/ae?days=${days}`, { + headers: authHeaders(), + }); + if (!res.ok) { + let message = `AE 分析数据加载失败 (${res.status})`; + try { + const body = await res.json() as { error?: string }; + if (body.error) message = body.error; + } catch { /* ignore */ } + const err: AEAnalyticsError = { status: res.status, message }; + throw err; + } + return res.json(); +} + /* ── 评论 ──────────────────────────────────── */ export type CommentData = { id: number; diff --git a/client/src/pages/admin/analytics-ae.tsx b/client/src/pages/admin/analytics-ae.tsx new file mode 100644 index 0000000..8d5f75e --- /dev/null +++ b/client/src/pages/admin/analytics-ae.tsx @@ -0,0 +1,215 @@ +import { useState, useEffect } from "react"; +import { fetchAEAnalytics, type AEAnalyticsData, type AEAnalyticsError } from "@/lib/api"; +import { Globe, Monitor, ExternalLink, Cloud, Users, Clock, Languages, MonitorSmartphone } from "lucide-react"; + +function countryFlag(code: string): string { + if (!code || code === "XX" || code.length !== 2) return "🌍"; + return String.fromCodePoint( + ...code.toUpperCase().split("").map((c) => 0x1f1e6 + c.charCodeAt(0) - 65) + ); +} + +function formatDuration(ms: number): string { + if (!ms || ms <= 0) return "-"; + const sec = Math.round(ms / 1000); + if (sec < 60) return `${sec} 秒`; + const min = Math.round(sec / 60); + if (min < 60) return `${min} 分`; + return `${(sec / 3600).toFixed(1)} 小时`; +} + +type ListItem = { name: string; count: number }; + +function ListSection({ title, icon: Icon, items, accent, mono }: { + title: string; + icon: typeof Globe; + items: ListItem[]; + accent: "blue" | "green" | "violet" | "amber"; + mono?: boolean; +}) { + const max = items.length > 0 ? items[0].count : 1; + return ( +
+

+ + {title} +

+
+ {items.length === 0 ? ( +
暂无数据
+ ) : ( + items.map((item) => ( +
+ + {item.name} + +
+
+
+ {item.count} +
+ )) + )} +
+
+ ); +} + +export function AnalyticsAEView({ days }: { days: number }) { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + setLoading(true); + fetchAEAnalytics(days) + .then((d) => { setData(d); setError(null); }) + .catch((e: AEAnalyticsError) => { setData(null); setError(e); }) + .finally(() => setLoading(false)); + }, [days]); + + if (loading) { + return
加载中...
; + } + + if (error) { + if (error.status === 501) { + return ( +
+ +
AE 增强分析仅支持 Cloudflare 部署
+
当前后端：{error.message}
+
+ ); + } + if (error.status === 503) { + return ( +
+
AE 配置缺失
+
+ 请通过 wrangler secret put 注入 CLOUDFLARE_ACCOUNT_ID 与 CLOUDFLARE_API_TOKEN + （需 Account Analytics:Read 权限） +
+
+ ); + } + return ( +
+ {error.message} +
+ ); + } + + if (!data) { + return
暂无数据
; + } + + const maxDay = Math.max(...data.visitsByDay.map((d) => d.count), 1); + + return ( +
+
+
+ 总访问 (PV) + {data.totalVisits} +
+
+ 独立访客 (UV) + {data.uniqueVisitors} +
+
+ 平均停留 + {formatDuration(data.avgDuration)} +
+
+ 国家/地区 + {data.topCountries.length} +
+
+ +
+

+ + 访问趋势 (PV / UV) +

+
+ {data.visitsByDay.length === 0 ? ( +
暂无访问数据
+ ) : ( +
+ {data.visitsByDay.map((day) => ( +
+
+
+
+ {day.date.slice(5)} + {day.count} / {day.uv} +
+ ))} +
+ )} +
+
+ +
+ ({ name: `${countryFlag(i.country)} ${i.country}`, count: i.count }))} + /> + ({ name: i.device, count: i.count }))} + /> + ({ name: i.browser, count: i.count }))} + /> + ({ name: i.os, count: i.count }))} + /> + ({ name: i.referer, count: i.count }))} + /> + ({ name: i.path, count: i.count }))} + /> + ({ name: i.screen, count: i.count }))} + /> + ({ name: i.language, count: i.count }))} + /> +
+
+ ); +} diff --git a/client/src/pages/admin/analytics.tsx b/client/src/pages/admin/analytics.tsx index b8cb645..705851c 100644 --- a/client/src/pages/admin/analytics.tsx +++ b/client/src/pages/admin/analytics.tsx @@ -1,6 +1,9 @@ import { useState, useEffect } from "react"; import { fetchAnalytics, type AnalyticsData } from "@/lib/api"; -import { Globe, Monitor, Smartphone, Tablet, Bot, ExternalLink, TrendingUp, BarChart3 } from "lucide-react"; +import { Globe, Monitor, Smartphone, Tablet, Bot, ExternalLink, TrendingUp, BarChart3, Cloud } from "lucide-react"; +import { AnalyticsAEView } from "./analytics-ae"; + +type TabKey = "basic" | "ae"; const DEVICE_ICONS: Record = { desktop: Monitor, @@ -29,9 +32,14 @@ export function AdminAnalytics() { const [days, setDays] = useState(7); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); + const [tab, setTab] = useState("basic"); useEffect(() => { document.title = "访客分析 | Monolith"; + }, []); + + useEffect(() => { + if (tab !== "basic") return; setLoading(true); fetchAnalytics(days) .then((result) => { @@ -43,7 +51,7 @@ export function AdminAnalytics() { setError("访客分析数据加载失败，请稍后重试。"); }) .finally(() => setLoading(false)); - }, [days]); + }, [days, tab]); const totalVisits = data?.visitsByDay.reduce((s, d) => s + d.count, 0) ?? 0; const maxDayCount = data ? Math.max(...data.visitsByDay.map((d) => d.count), 1) : 1; @@ -73,9 +81,38 @@ export function AdminAnalytics() { ))}
+ + {/* Tab 切换：基础统计 / AE 增强 (CF 专属) */} +
+ + +
- {loading ? ( + {tab === "ae" ? ( + + ) : loading ? (
加载中...
) : error ? (
{error}
diff --git a/server/src/analytics/ae-query.ts b/server/src/analytics/ae-query.ts new file mode 100644 index 0000000..bc0dfe4 --- /dev/null +++ b/server/src/analytics/ae-query.ts @@ -0,0 +1,161 @@ +/** + * Cloudflare Analytics Engine SQL API 查询封装 + * 灵感来源: HanAnalytics (MIT) — https://github.com/uxiaohan/HanAnalytics + * + * 通过 https://api.cloudflare.com/client/v4/accounts/{id}/analytics_engine/sql 查询。 + * 需要 API Token 具备 "Account Analytics: Read" 权限。 + * + * 字段映射详见 ae-tracker.ts 顶部注释。 + */ + +const AE_SQL_ENDPOINT = (accountId: string) => + `https://api.cloudflare.com/client/v4/accounts/${accountId}/analytics_engine/sql`; + +export type AEQueryEnv = { + CLOUDFLARE_ACCOUNT_ID?: string; + CLOUDFLARE_API_TOKEN?: string; +}; + +export type AEAnalyticsResult = { + visitsByDay: { date: string; count: number; uv: number }[]; + topCountries: { country: string; count: number }[]; + topReferers: { referer: string; count: number }[]; + deviceBreakdown: { device: string; count: number }[]; + browserBreakdown: { browser: string; count: number }[]; + osBreakdown: { os: string; count: number }[]; + topPages: { path: string; count: number }[]; + topScreens: { screen: string; count: number }[]; + topLanguages: { language: string; count: number }[]; + totalVisits: number; + uniqueVisitors: number; + avgDuration: number; // 平均停留毫秒 +}; + +/** 执行一条 AE SQL，返回数据数组（失败抛错） */ +async function runSql>(env: AEQueryEnv, sql: string): Promise { + if (!env.CLOUDFLARE_ACCOUNT_ID || !env.CLOUDFLARE_API_TOKEN) { + throw new Error("Missing CLOUDFLARE_ACCOUNT_ID / CLOUDFLARE_API_TOKEN secrets for AE query"); + } + const res = await fetch(AE_SQL_ENDPOINT(env.CLOUDFLARE_ACCOUNT_ID), { + method: "POST", + headers: { + "Authorization": `Bearer ${env.CLOUDFLARE_API_TOKEN}`, + "Content-Type": "text/plain", + }, + body: sql, + }); + if (!res.ok) { + const text = await res.text().catch(() => ""); + throw new Error(`AE SQL HTTP ${res.status}: ${text.slice(0, 256)}`); + } + const json = await res.json() as { data?: T[]; meta?: unknown; error?: string }; + if (json.error) throw new Error(`AE SQL error: ${json.error}`); + return json.data || []; +} + +/** AE 数据集名称必须与 wrangler.toml 一致 */ +const DATASET = "monolith_analytics"; + +/** 把 days 限制在合法范围（AE 默认保留 31 天） */ +function safeDays(days: number): number { + const n = Math.max(1, Math.min(31, Math.floor(days || 7))); + return n; +} + +/** SQL 注入防护：只允许传入数字（days）和已知 enum，绝不拼接用户字符串 */ +export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise { + const d = safeDays(days); + const since = `INTERVAL '${d}' DAY`; + + // 并发执行多条聚合查询 + const [ + byDay, + byCountry, + byReferer, + byDevice, + byBrowser, + byOs, + byPage, + byScreen, + byLang, + totals, + ] = await Promise.all([ + runSql<{ date: string; cnt: number; uv: number }>( + env, + `SELECT toDate(timestamp) AS date, SUM(_sample_interval) AS cnt, COUNT(DISTINCT blob10) AS uv + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} + GROUP BY date ORDER BY date ASC FORMAT JSON`, + ), + runSql<{ country: string; cnt: number }>( + env, + `SELECT blob3 AS country, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob3 != '' + GROUP BY country ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ referer: string; cnt: number }>( + env, + `SELECT blob4 AS referer, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob4 != '' + GROUP BY referer ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ device: string; cnt: number }>( + env, + `SELECT blob5 AS device, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} + GROUP BY device ORDER BY cnt DESC FORMAT JSON`, + ), + runSql<{ browser: string; cnt: number }>( + env, + `SELECT blob6 AS browser, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} + GROUP BY browser ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ os: string; cnt: number }>( + env, + `SELECT blob7 AS os, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} + GROUP BY os ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ path: string; cnt: number }>( + env, + `SELECT blob2 AS path, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} + GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ screen: string; cnt: number }>( + env, + `SELECT blob8 AS screen, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob8 != '' + GROUP BY screen ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ language: string; cnt: number }>( + env, + `SELECT blob9 AS language, SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob9 != '' + GROUP BY language ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + runSql<{ total: number; uv: number; avg_dur: number }>( + env, + `SELECT SUM(_sample_interval) AS total, COUNT(DISTINCT blob10) AS uv, AVG(double1) AS avg_dur + FROM ${DATASET} WHERE timestamp > NOW() - ${since} FORMAT JSON`, + ), + ]); + + const totalRow = totals[0] || { total: 0, uv: 0, avg_dur: 0 }; + + return { + visitsByDay: byDay.map((r) => ({ date: r.date, count: Number(r.cnt) || 0, uv: Number(r.uv) || 0 })), + topCountries: byCountry.map((r) => ({ country: r.country, count: Number(r.cnt) || 0 })), + topReferers: byReferer.map((r) => ({ referer: r.referer, count: Number(r.cnt) || 0 })), + deviceBreakdown: byDevice.map((r) => ({ device: r.device, count: Number(r.cnt) || 0 })), + browserBreakdown: byBrowser.map((r) => ({ browser: r.browser, count: Number(r.cnt) || 0 })), + osBreakdown: byOs.map((r) => ({ os: r.os, count: Number(r.cnt) || 0 })), + topPages: byPage.map((r) => ({ path: r.path, count: Number(r.cnt) || 0 })), + topScreens: byScreen.map((r) => ({ screen: r.screen, count: Number(r.cnt) || 0 })), + topLanguages: byLang.map((r) => ({ language: r.language, count: Number(r.cnt) || 0 })), + totalVisits: Number(totalRow.total) || 0, + uniqueVisitors: Number(totalRow.uv) || 0, + avgDuration: Math.round(Number(totalRow.avg_dur) || 0), + }; +} diff --git a/server/src/analytics/ae-tracker.ts b/server/src/analytics/ae-tracker.ts new file mode 100644 index 0000000..dfdffc1 --- /dev/null +++ b/server/src/analytics/ae-tracker.ts @@ -0,0 +1,79 @@ +/** + * Cloudflare Analytics Engine 写入封装（CF 专属） + * 灵感来源: HanAnalytics (MIT) — https://github.com/uxiaohan/HanAnalytics + * + * AE 数据点结构： + * - blobs : 字符串维度 (最多 20 个，每个 ≤ 5120 字节) + * - doubles : 数值维度 (最多 20 个，64-bit double) + * - indexes : 高基数索引 (最多 1 个，≤ 96 字节，用于查询 sample) + * + * 字段约定（查询端必须保持一致）： + * blob1 = website (站点标识，多站点支持) + * blob2 = path + * blob3 = country + * blob4 = referer (host only) + * blob5 = device (desktop/mobile/tablet/bot) + * blob6 = browser + * blob7 = os + * blob8 = screen (例 "1920x1080") + * blob9 = language (浏览器首选语言, 例 "zh-CN") + * blob10 = visitor_id (浏览器指纹哈希前缀, 用于 UV 估算) + * double1 = duration_ms (停留时长，0 = pageview 上报) + * index1 = website (作为采样索引，便于按站点过滤) + */ + +import { parseUserAgent, refererHost } from "./ua-parser"; + +export type TrackPayload = { + website?: string; // data-website-id + path: string; + referer?: string; + screen?: string; // "WxH" + language?: string; + visitorId?: string; // 客户端生成的访客指纹（哈希后） + duration?: number; // 停留时长(ms)，可选 +}; + +export type TrackContext = { + ae: AnalyticsEngineDataset | undefined; + userAgent: string | undefined; + country: string | undefined; +}; + +/** + * 写入一条 AE 数据点。AE 不可用时静默跳过（保证 Turso/PG 后端不崩）。 + */ +export function writeAnalyticsPoint(payload: TrackPayload, ctx: TrackContext): void { + if (!ctx.ae) return; // 非 CF 部署 → 直接跳过 + const { device, browser, os } = parseUserAgent(ctx.userAgent); + const website = (payload.website || "default").slice(0, 64); + ctx.ae.writeDataPoint({ + blobs: [ + website, + payload.path.slice(0, 256), + (ctx.country || "XX").slice(0, 4), + refererHost(payload.referer).slice(0, 128), + device, + browser, + os, + (payload.screen || "").slice(0, 16), + (payload.language || "").slice(0, 16), + (payload.visitorId || "").slice(0, 16), + ], + doubles: [Math.max(0, Math.min(payload.duration || 0, 86400000))], // 上限 24h + indexes: [website], // 采样索引 + }); +} + +/** + * 校验站点白名单。空白名单 = 全部放行。 + * 格式: "example.com|blog.foo.com" + */ +export function isWebsiteAllowed(origin: string | null | undefined, whitelist: string | undefined): boolean { + if (!whitelist || whitelist.trim() === "") return true; + if (!origin) return false; + let host = origin; + try { host = new URL(origin).hostname; } catch { /* origin 已是 host */ } + const allowed = whitelist.split("|").map((s) => s.trim().toLowerCase()).filter(Boolean); + return allowed.some((d) => host.toLowerCase() === d || host.toLowerCase().endsWith("." + d)); +} diff --git a/server/src/analytics/ua-parser.ts b/server/src/analytics/ua-parser.ts new file mode 100644 index 0000000..56809f5 --- /dev/null +++ b/server/src/analytics/ua-parser.ts @@ -0,0 +1,56 @@ +/** + * 轻量 UA 解析器 (Cloudflare Workers 友好，零依赖) + * 灵感来源: HanAnalytics (MIT) — https://github.com/uxiaohan/HanAnalytics + * + * 仅识别主流浏览器 / 操作系统 / 设备类型，覆盖率约 95% + * 不引入 ua-parser-js 等大依赖，保持 Worker 冷启动 < 5ms + */ + +export type ParsedUA = { + device: "desktop" | "mobile" | "tablet" | "bot"; + browser: string; // chrome / firefox / safari / edge / opera / other + os: string; // windows / macos / linux / ios / android / other +}; + +const BOT_RE = /bot|crawl|spider|slurp|bing|google|baidu|yandex|duckduck|facebook|twitter|telegram|whatsapp|preview/i; +const TABLET_RE = /ipad|tablet|playbook|silk/i; +const MOBILE_RE = /mobile|android|iphone|ipod|blackberry|iemobile|opera mini/i; + +export function parseUserAgent(uaInput: string | undefined | null): ParsedUA { + const ua = (uaInput || "").toLowerCase(); + if (!ua) return { device: "desktop", browser: "other", os: "other" }; + + // 设备类型（顺序敏感：bot > tablet > mobile > desktop） + let device: ParsedUA["device"] = "desktop"; + if (BOT_RE.test(ua)) device = "bot"; + else if (TABLET_RE.test(ua)) device = "tablet"; + else if (MOBILE_RE.test(ua)) device = "mobile"; + + // 浏览器（顺序敏感：edge 在 chrome 之前，opera 在 chrome 之前） + let browser = "other"; + if (/edg\//.test(ua)) browser = "edge"; + else if (/opr\/|opera/.test(ua)) browser = "opera"; + else if (/firefox|fxios/.test(ua)) browser = "firefox"; + else if (/chrome|crios/.test(ua)) browser = "chrome"; + else if (/safari/.test(ua)) browser = "safari"; + + // 操作系统 + let os = "other"; + if (/windows nt/.test(ua)) os = "windows"; + else if (/iphone|ipad|ipod/.test(ua)) os = "ios"; + else if (/mac os x/.test(ua)) os = "macos"; + else if (/android/.test(ua)) os = "android"; + else if (/linux/.test(ua)) os = "linux"; + + return { device, browser, os }; +} + +/** 从 Referer URL 提取 host（失败返回空字符串） */ +export function refererHost(referer: string | undefined | null): string { + if (!referer) return ""; + try { + return new URL(referer).hostname.toLowerCase(); + } catch { + return ""; + } +} diff --git a/server/src/index.ts b/server/src/index.ts index 7e6fd4b..94f6265 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -10,11 +10,14 @@ import { sign, verify } from "hono/jwt"; import { createDatabase, createObjectStorage } from "./storage/factory"; import type { IDatabase } from "./storage/interfaces"; import type { IObjectStorage } from "./storage/interfaces"; +import { writeAnalyticsPoint, isWebsiteAllowed } from "./analytics/ae-tracker"; +import { queryAEAnalytics } from "./analytics/ae-query"; /* ── 类型定义 ──────────────────────────────── */ type Bindings = { DB: D1Database; BUCKET: R2Bucket; + AE?: AnalyticsEngineDataset; // Cloudflare Analytics Engine（CF 专属，可选） ADMIN_PASSWORD: string; JWT_SECRET: string; REACTION_SALT?: string; @@ -22,6 +25,9 @@ type Bindings = { STORAGE_PROVIDER?: string; WEBHOOK_URLS?: string; // 逗号分隔的 Webhook 目标地址 SITE_ORIGIN?: string; // 对外公开域名（如 https://monolith-client.pages.dev），用于 sitemap/robots + CLOUDFLARE_ACCOUNT_ID?: string; // AE GraphQL 查询用 + CLOUDFLARE_API_TOKEN?: string; // AE GraphQL 查询用（需要 Account Analytics:Read 权限） + ANALYTICS_WEBSITE_WHITELIST?: string; // 站点白名单，格式: domain1|domain2 (空=放行所有) }; type Variables = { @@ -96,6 +102,49 @@ async function triggerWebhook(c: any, eventName: string, payload: any) { app.get("/api/health", async (c) => { return c.json({ status: "ok", timestamp: new Date().toISOString() }); }); + +/* ── 访客埋点端点（CF 专属，AE 不可用时静默 204） ─────────── */ +// POST /api/track body: { website?, path, referer?, screen?, language?, visitorId?, duration? } +// 公开端点，受白名单 + Origin 校验保护，不写 D1（避免高频写穿） +app.post("/api/track", async (c) => { + // 白名单校验：通过 Origin 头判断站点合法性 + const origin = c.req.header("Origin") || c.req.header("Referer") || ""; + if (!isWebsiteAllowed(origin, c.env.ANALYTICS_WEBSITE_WHITELIST)) { + return c.json({ error: "origin not allowed" }, 403); + } + + let body: Record = {}; + try { body = await c.req.json(); } catch { return c.json({ error: "invalid json" }, 400); } + + const path = typeof body.path === "string" ? body.path : ""; + if (!path || path.length > 256) return c.json({ error: "invalid path" }, 400); + + // AE 不可用（Turso/PG 部署）→ 直接 204，前端无感 + if (!c.env.AE) { + c.status(204); + return c.body(null); + } + + writeAnalyticsPoint( + { + website: typeof body.website === "string" ? body.website : "default", + path, + referer: typeof body.referer === "string" ? body.referer : c.req.header("Referer"), + screen: typeof body.screen === "string" ? body.screen : "", + language: typeof body.language === "string" ? body.language : c.req.header("Accept-Language")?.split(",")[0], + visitorId: typeof body.visitorId === "string" ? body.visitorId : "", + duration: typeof body.duration === "number" ? body.duration : 0, + }, + { + ae: c.env.AE, + userAgent: c.req.header("User-Agent"), + country: c.req.header("CF-IPCountry") || "XX", + }, + ); + c.status(204); + return c.body(null); +}); + /* ── 公开 API ──────────────────────────────── */ // 获取文章列表（仅已发布） @@ -142,6 +191,12 @@ app.get("/api/posts/:slug", async (c) => { : /tablet|ipad/i.test(ua) ? "tablet" : "desktop"; const visitPromise = db.recordVisit({ path: `/posts/${slug}`, country, refererDomain, deviceType }); + // CF 专属：同步双写 Analytics Engine（Workers 环境零成本） + writeAnalyticsPoint( + { website: "default", path: `/posts/${slug}`, referer }, + { ae: c.env.AE, userAgent: c.req.header("User-Agent"), country }, + ); + // 边缘环境中使用 waitUntil 确保异步任务完成 if (c.executionCtx?.waitUntil) { c.executionCtx.waitUntil(viewPromise); @@ -534,6 +589,38 @@ app.get("/api/admin/analytics", async (c) => { return c.json(analytics); }); +// 访客分析数据 — AE 增强版（CF 专属，仅在 D1 后端 + 配置好 API Token 时可用） +app.get("/api/admin/analytics/ae", async (c) => { + // 守卫：仅 D1 后端支持 AE（默认未设 DB_PROVIDER 视为 d1） + const provider = (c.env.DB_PROVIDER || "d1").toLowerCase(); + if (provider !== "d1") { + return c.json({ + error: "AE analytics is Cloudflare-only (D1 deployment)", + provider, + }, 501); + } + if (!c.env.CLOUDFLARE_ACCOUNT_ID || !c.env.CLOUDFLARE_API_TOKEN) { + return c.json({ + error: "Missing CLOUDFLARE_ACCOUNT_ID / CLOUDFLARE_API_TOKEN secrets", + }, 503); + } + + let days = parseInt(c.req.query("days") || "7", 10); + if (isNaN(days) || days <= 0) days = 7; + + try { + const data = await queryAEAnalytics( + { CLOUDFLARE_ACCOUNT_ID: c.env.CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN: c.env.CLOUDFLARE_API_TOKEN }, + Math.min(days, 31), + ); + return c.json(data); + } catch (err) { + return c.json({ + error: err instanceof Error ? err.message : "AE query failed", + }, 502); + } +}); + // 获取所有评论（管理后台） app.get("/api/admin/comments", async (c) => { const db = c.get("db"); diff --git a/server/wrangler.toml b/server/wrangler.toml index 6a92722..d2807f3 100644 --- a/server/wrangler.toml +++ b/server/wrangler.toml @@ -21,6 +21,13 @@ migrations_dir = "src/migrations" binding = "BUCKET" bucket_name = "monolith-assets" +# Analytics Engine 数据集绑定（CF 专属增强分析模块） +# 灵感来源: HanAnalytics (MIT) — https://github.com/uxiaohan/HanAnalytics +# 仅在 Cloudflare 部署时生效，Turso/PG 后端会自动跳过 AE 写入与查询 +[[analytics_engine_datasets]] +binding = "AE" +dataset = "monolith_analytics" + # 定时触发器 (每 1 分钟执行一次) [triggers] crons = ["* * * * *"] From ce77f2ecbc128dab1cdb1ce4a2f8b6fc5d150568 Mon Sep 17 00:00:00 2001 From: Easy Date: Sun, 26 Apr 2026 17:38:30 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat(analytics):=20=E6=89=A9=E5=B1=95=20AE?= =?UTF-8?q?=20=E5=85=A8=E7=BB=B4=E5=BA=A6=E4=BB=AA=E8=A1=A8=E6=9D=BF?= =?UTF-8?q?=EF=BC=88=E7=83=AD=E5=8A=9B=E5=9B=BE/=E5=81=9C=E7=95=99?= =?UTF-8?q?=E5=88=86=E6=A1=B6/=E5=85=A5=E5=8F=A3=E5=87=BA=E5=8F=A3/?= =?UTF-8?q?=E6=96=B0=E8=80=81=E8=AE=BF=E5=AE=A2/=E8=B7=B3=E5=87=BA?= =?UTF-8?q?=E7=8E=87=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ae-query.ts: 新增 6 条聚合 SQL（hourlyHeatmap / durationBuckets / entryPages / exitPages / bounceStats / topReferersFull）+ visitor 新老分类查询 - AEAnalyticsResult/Data 类型扩展 8 个新字段 - analytics-ae.tsx: 新增 HeatmapChart（7×24 SVG 热力图）/ DurationBucketsChart（6 桶水平柱图）/ VisitorRatio（双色胶囊条）三个组件 - 核心指标卡从 4 张扩到 8 张（+ 跳出率 / 人均页数 / 浏览器种类 / 引荐来源数） - 引荐来源 Top 10 升级 Top 20 + 直接访问归类 - 入口/出口页 Top 10 双列展示 - analytics chunk 20.83 → 29.81 KB / gzip 5.23 → 7.21 KB --- client/src/lib/api.ts | 8 + client/src/pages/admin/analytics-ae.tsx | 364 ++++++++++++++++++++++-- client/src/pages/admin/analytics.tsx | 143 ++++++++-- server/src/analytics/ae-query.ts | 128 +++++++++ 4 files changed, 599 insertions(+), 44 deletions(-) diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts index c1d161d..1140753 100644 --- a/client/src/lib/api.ts +++ b/client/src/lib/api.ts @@ -317,6 +317,14 @@ export type AEAnalyticsData = { totalVisits: number; uniqueVisitors: number; avgDuration: number; + hourlyHeatmap: { dow: number; hour: number; count: number }[]; + durationBuckets: { bucket: string; count: number }[]; + entryPages: { path: string; count: number }[]; + exitPages: { path: string; count: number }[]; + visitorTypes: { type: "new" | "returning"; count: number }[]; + bounceRate: number; + pagesPerVisitor: number; + topReferersFull: { referer: string; count: number }[]; }; export type AEAnalyticsError = { diff --git a/client/src/pages/admin/analytics-ae.tsx b/client/src/pages/admin/analytics-ae.tsx index 8d5f75e..21300bf 100644 --- a/client/src/pages/admin/analytics-ae.tsx +++ b/client/src/pages/admin/analytics-ae.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; import { fetchAEAnalytics, type AEAnalyticsData, type AEAnalyticsError } from "@/lib/api"; -import { Globe, Monitor, ExternalLink, Cloud, Users, Clock, Languages, MonitorSmartphone } from "lucide-react"; +import { Globe, Monitor, ExternalLink, Cloud, Users, Clock, Languages, MonitorSmartphone, Activity, LogIn, LogOut, UserPlus, Repeat, Hourglass, CalendarClock } from "lucide-react"; function countryFlag(code: string): string { if (!code || code === "XX" || code.length !== 2) return "🌍"; @@ -20,6 +20,114 @@ function formatDuration(ms: number): string { type ListItem = { name: string; count: number }; +// PV/UV 双系列趋势图：折线 + 数据点 + 网格线 +function DualTrendChart({ data, maxValue }: { data: { date: string; count: number; uv: number }[]; maxValue: number }) { + const [hover, setHover] = useState(null); + const W = 720; + const H = 220; + const PAD_T = 20; + const PAD_B = 40; + const PAD_X = 28; + const innerH = H - PAD_T - PAD_B; + const innerW = W - PAD_X * 2; + const n = data.length; + const step = n > 1 ? innerW / (n - 1) : 0; + const safeMax = maxValue || 1; + + const grid = [0, 0.25, 0.5, 0.75, 1].map((p) => ({ + y: PAD_T + innerH * (1 - p), + label: Math.round(safeMax * p), + })); + + const project = (count: number, i: number) => ({ + x: PAD_X + (n > 1 ? step * i : innerW / 2), + y: PAD_T + innerH * (1 - count / safeMax), + }); + + const pvPoints = data.map((d, i) => ({ ...project(d.count, i), v: d.count, date: d.date })); + const uvPoints = data.map((d, i) => ({ ...project(d.uv, i), v: d.uv })); + const buildPath = (pts: { x: number; y: number }[]) => + pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" "); + const pvLine = buildPath(pvPoints); + const uvLine = buildPath(uvPoints); + const pvArea = pvPoints.length > 0 + ? `${pvLine} L ${pvPoints[pvPoints.length - 1].x.toFixed(1)} ${PAD_T + innerH} L ${pvPoints[0].x.toFixed(1)} ${PAD_T + innerH} Z` + : ""; + + return ( +
+ {/* 图例 */} +
+ + + PV 总访问 + + + + UV 独立访客 + +
+ + + + + + + + + {grid.map((g, i) => ( + + + {g.label} + + ))} + + {pvArea && } + {pvLine && } + {uvLine && } + + {pvPoints.map((p, i) => ( + + ))} + {uvPoints.map((p, i) => ( + + ))} + + {/* hover 时显示当日 PV/UV 数值在 PV 点上方 */} + {pvPoints.map((p, i) => ( + hover === i ? ( + + + PV {p.v} · UV {uvPoints[i].v} + + + ) : null + ))} + + {pvPoints.map((p, i) => ( + {p.date.slice(5)} + ))} + + {pvPoints.map((p, i) => { + const w = step > 0 ? step : innerW; + return ( + setHover(i)} + onMouseLeave={() => setHover(null)} + /> + ); + })} + +
+ ); +} + function ListSection({ title, icon: Icon, items, accent, mono }: { title: string; icon: typeof Globe; @@ -58,6 +166,145 @@ function ListSection({ title, icon: Icon, items, accent, mono }: { ); } +// 7×24 热力图：周日(0)..周六(6) × 0..23 时 +function HeatmapChart({ data }: { data: { dow: number; hour: number; count: number }[] }) { + // 注意：ClickHouse toDayOfWeek 是 1..7（周一=1, 周日=7），这里统一映射回 0..6（周日=0） + const matrix = new Map(); + let maxC = 1; + for (const r of data) { + const dow = r.dow === 7 ? 0 : r.dow; // 周日 7 → 0 + const k = `${dow}-${r.hour}`; + matrix.set(k, r.count); + if (r.count > maxC) maxC = r.count; + } + const dows = ["日", "一", "二", "三", "四", "五", "六"]; + const hours = Array.from({ length: 24 }, (_, i) => i); + const cellW = 26; + const cellH = 18; + const labelW = 28; + const labelH = 18; + const W = labelW + cellW * 24 + 8; + const H = labelH + cellH * 7 + 4; + + return ( +
+ + {hours.map((h) => ( + + {h % 3 === 0 ? h : ""} + + ))} + {dows.map((d, di) => ( + + {d} + + ))} + {dows.map((_, di) => + hours.map((h) => { + const v = matrix.get(`${di}-${h}`) || 0; + const intensity = v / maxC; + const opacity = v === 0 ? 0.04 : 0.18 + intensity * 0.7; + return ( + + {`周${dows[di]} ${String(h).padStart(2, "0")}:00 — ${v} 次访问`} + + ); + }) + )} + +
+ ); +} + +// 停留时长分桶柱图 +function DurationBucketsChart({ buckets }: { buckets: { bucket: string; count: number }[] }) { + // 强制顺序 + const order = ["0-10s", "10-30s", "30s-1m", "1-3m", "3-10m", "10m+"]; + const map = new Map(buckets.map((b) => [b.bucket, b.count])); + const rows = order.map((k) => ({ bucket: k, count: map.get(k) || 0 })); + const max = rows.reduce((a, b) => Math.max(a, b.count), 1); + const total = rows.reduce((a, b) => a + b.count, 0); + return ( +
+ {rows.map((r) => { + const pct = max > 0 ? (r.count / max) * 100 : 0; + const ratio = total > 0 ? ((r.count / total) * 100).toFixed(1) : "0.0"; + return ( +
+ {r.bucket} +
+
+
+ {r.count} + {ratio}% +
+ ); + })} +
+ ); +} + +// 新老访客胶囊条 +function VisitorRatio({ types }: { types: { type: "new" | "returning"; count: number }[] }) { + const newCount = types.find((t) => t.type === "new")?.count || 0; + const retCount = types.find((t) => t.type === "returning")?.count || 0; + const total = newCount + retCount; + const newPct = total > 0 ? (newCount / total) * 100 : 0; + const retPct = total > 0 ? (retCount / total) * 100 : 0; + return ( +
+
+
+
+
+
+ + + 新访客 + {newCount} + ({newPct.toFixed(1)}%) + + + + 回访 + {retCount} + ({retPct.toFixed(1)}%) + +
+
+ ); +} + export function AnalyticsAEView({ days }: { days: number }) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); @@ -107,10 +354,13 @@ export function AnalyticsAEView({ days }: { days: number }) { return
暂无数据
; } - const maxDay = Math.max(...data.visitsByDay.map((d) => d.count), 1); + const maxDay = Math.max(...data.visitsByDay.map((d) => Math.max(d.count, d.uv)), 1); + const bounceRatePct = (data.bounceRate * 100).toFixed(1); + const pagesPerVisitor = data.pagesPerVisitor.toFixed(2); return (
+ {/* 核心指标 8 张卡 */}
总访问 (PV) @@ -128,35 +378,107 @@ export function AnalyticsAEView({ days }: { days: number }) { 国家/地区 {data.topCountries.length}
+
+ 跳出率 + {bounceRatePct}% +
+
+ 人均页数 + {pagesPerVisitor} +
+
+ 浏览器种类 + {data.browserBreakdown.length} +
+
+ 引荐来源 + {data.topReferersFull.length} +
+ {/* 访问趋势 */}

访问趋势 (PV / UV) + + 峰值 {maxDay} +

-
- {data.visitsByDay.length === 0 ? ( -
暂无访问数据
+ {data.visitsByDay.length === 0 ? ( +
暂无访问数据
+ ) : ( + + )} +
+ + {/* 新老访客 + 停留分桶 并排 */} +
+
+

+ + 新老访客占比 + + 基于 24h 首访界限 + +

+ {data.visitorTypes.every((t) => t.count === 0) ? ( +
暂无访客数据
) : ( -
- {data.visitsByDay.map((day) => ( -
-
-
-
- {day.date.slice(5)} - {day.count} / {day.uv} -
- ))} -
+ + )} +
+
+

+ + 停留时长分布 + + 不含 0 秒纯 PV + +

+ {data.durationBuckets.length === 0 ? ( +
暂无停留数据
+ ) : ( + )}
+ {/* 时段热力图 */} +
+

+ + 访客时段热力图 + + UTC 时间 · 颜色越亮访问越多 + +

+ {data.hourlyHeatmap.length === 0 ? ( +
暂无时段数据
+ ) : ( + + )} +
+ + {/* 入口 / 出口页 */} +
+ ({ name: i.path, count: i.count }))} + /> + ({ name: i.path, count: i.count }))} + /> +
+ + {/* 全维度分布列表 */}
({ name: i.os, count: i.count }))} /> ({ name: i.referer, count: i.count }))} + items={data.topReferersFull.map((i) => ({ name: i.referer, count: i.count }))} /> (null); + const W = 720; + const H = 200; + const PAD_T = 16; + const PAD_B = 36; + const PAD_X = 24; + const innerH = H - PAD_T - PAD_B; + const innerW = W - PAD_X * 2; + const n = data.length; + const step = n > 1 ? innerW / (n - 1) : 0; + const barW = n > 0 ? Math.min(40, (innerW / n) * 0.55) : 0; + const safeMax = max || 1; + + // 网格 4 等分（含顶/底） + const gridLines = [0, 0.25, 0.5, 0.75, 1].map((p) => ({ + y: PAD_T + innerH * (1 - p), + label: Math.round(safeMax * p), + })); + + const points = data.map((d, i) => ({ + x: PAD_X + (n > 1 ? step * i : innerW / 2), + y: PAD_T + innerH * (1 - d.count / safeMax), + count: d.count, + date: d.date, + })); + + const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" "); + const areaPath = points.length > 0 + ? `${linePath} L ${points[points.length - 1].x.toFixed(1)} ${PAD_T + innerH} L ${points[0].x.toFixed(1)} ${PAD_T + innerH} Z` + : ""; + + return ( +
+ + + + + + + + + + + + + {/* 网格 + Y 轴刻度 */} + {gridLines.map((g, i) => ( + + + {g.label} + + ))} + + {/* 柱子 */} + {points.map((p, i) => { + const barH = PAD_T + innerH - p.y; + return ( + + ); + })} + + {/* 面积 + 折线 */} + {areaPath && } + {linePath && } + + {/* 数据点 + 数值 */} + {points.map((p, i) => ( + + + {p.count} + + ))} + + {/* X 轴日期 */} + {points.map((p, i) => ( + {p.date.slice(5)} + ))} + + {/* 透明 hover 区域 */} + {points.map((p, i) => { + const w = step > 0 ? step : innerW; + return ( + setHover(i)} + onMouseLeave={() => setHover(null)} + /> + ); + })} + +
+ ); +} + export function AdminAnalytics() { const [data, setData] = useState(null); const [days, setDays] = useState(7); @@ -142,34 +253,20 @@ export function AdminAnalytics() {
- {/* 趋势图（简易柱状图） */} + {/* 趋势图（SVG 折线 + 柱状叠加） */}

访问趋势 + + 峰值 {maxDayCount} · 日均 {days > 0 ? Math.round(totalVisits / days) : 0} +

-
- {data.visitsByDay.length === 0 ? ( -
暂无访问数据
- ) : ( -
- {data.visitsByDay.map((day) => ( -
-
-
-
- - {day.date.slice(5)} - - {day.count} -
- ))} -
- )} -
+ {data.visitsByDay.length === 0 ? ( +
暂无访问数据
+ ) : ( + + )}
{/* 下方 2 列布局 */} diff --git a/server/src/analytics/ae-query.ts b/server/src/analytics/ae-query.ts index bc0dfe4..0815166 100644 --- a/server/src/analytics/ae-query.ts +++ b/server/src/analytics/ae-query.ts @@ -29,6 +29,15 @@ export type AEAnalyticsResult = { totalVisits: number; uniqueVisitors: number; avgDuration: number; // 平均停留毫秒 + // —— 新增维度 —— + hourlyHeatmap: { dow: number; hour: number; count: number }[]; // 0=周日..6=周六, hour 0-23 + durationBuckets: { bucket: string; count: number }[]; // 0-10s / 10-30s / 30s-1m / 1-3m / 3-10m / 10m+ + entryPages: { path: string; count: number }[]; // 入口页（每个 visitor 第一次访问的页面） + exitPages: { path: string; count: number }[]; // 出口页（每个 visitor 最后访问的页面） + visitorTypes: { type: "new" | "returning"; count: number }[]; // 新老访客（窗口内首次访问视为新） + bounceRate: number; // 跳出率（只浏览 1 个页面的 visitor 占比，0-1） + pagesPerVisitor: number; // 人均访问页面数 + topReferersFull: { referer: string; count: number }[]; // 引荐扩展到 20 条 }; /** 执行一条 AE SQL，返回数据数组（失败抛错） */ @@ -79,6 +88,12 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise( env, @@ -140,9 +155,107 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise NOW() - ${since} FORMAT JSON`, ), + // —— 新增：小时 × 星期 热力图（duration=0 的纯 pageview 也算一次访问） —— + runSql<{ dow: number; hour: number; cnt: number }>( + env, + `SELECT toDayOfWeek(timestamp) AS dow, toHour(timestamp) AS hour, SUM(_sample_interval) AS cnt + FROM ${DATASET} WHERE timestamp > NOW() - ${since} + GROUP BY dow, hour ORDER BY dow, hour FORMAT JSON`, + ), + // —— 新增：停留时长分桶（毫秒） —— + runSql<{ bucket: string; cnt: number }>( + env, + `SELECT + multiIf( + double1 < 10000, '0-10s', + double1 < 30000, '10-30s', + double1 < 60000, '30s-1m', + double1 < 180000, '1-3m', + double1 < 600000, '3-10m', + '10m+') AS bucket, + SUM(_sample_interval) AS cnt + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 > 0 + GROUP BY bucket FORMAT JSON`, + ), + // —— 新增：入口页（每个 visitor 在窗口内最早访问的页面） —— + runSql<{ path: string; cnt: number }>( + env, + `SELECT path, COUNT() AS cnt FROM ( + SELECT blob10 AS vid, argMin(blob2, timestamp) AS path + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + ) GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + // —— 新增：出口页（每个 visitor 在窗口内最后访问的页面） —— + runSql<{ path: string; cnt: number }>( + env, + `SELECT path, COUNT() AS cnt FROM ( + SELECT blob10 AS vid, argMax(blob2, timestamp) AS path + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + ) GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + ), + // —— 新增：跳出 + 人均访问页数（基于 visitor session） —— + runSql<{ visitors: number; bouncers: number; total_pv: number }>( + env, + `SELECT + COUNT() AS visitors, + countIf(pv = 1) AS bouncers, + SUM(pv) AS total_pv + FROM ( + SELECT blob10 AS vid, COUNT(DISTINCT blob2) AS pv + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + ) FORMAT JSON`, + ), + // —— 新增：扩展引荐 Top 20（含直接访问） —— + runSql<{ referer: string; cnt: number }>( + env, + `SELECT if(blob4 = '', '(直接访问)', blob4) AS referer, SUM(_sample_interval) AS cnt + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} + GROUP BY referer ORDER BY cnt DESC LIMIT 20 FORMAT JSON`, + ), ]); const totalRow = totals[0] || { total: 0, uv: 0, avg_dur: 0 }; + // 跳出率 / 人均页数 + const bounceRow = bounceStats[0] || { visitors: 0, bouncers: 0, total_pv: 0 }; + const visitors = Number(bounceRow.visitors) || 0; + const bouncers = Number(bounceRow.bouncers) || 0; + const totalPv = Number(bounceRow.total_pv) || 0; + const bounceRate = visitors > 0 ? bouncers / visitors : 0; + const pagesPerVisitor = visitors > 0 ? totalPv / visitors : 0; + + // 新老访客比：用首日 visitor 与窗口起点对比 + // 简化策略：当一个 visitor 在窗口前 24h 出现过则算「老访客」，否则「新访客」 + // 由于 AE 只保留 31 天，我们取窗口内首次出现 > NOW()-24h 的 visitor 算「新」 + let newVisitors = 0; + let returningVisitors = 0; + try { + const visitorAge = await runSql<{ first_seen: string; cnt: number }>( + env, + `SELECT + if(toUnixTimestamp(min_ts) > toUnixTimestamp(NOW() - INTERVAL '1' DAY), 'new', 'returning') AS first_seen, + COUNT() AS cnt + FROM ( + SELECT blob10 AS vid, MIN(timestamp) AS min_ts + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + ) GROUP BY first_seen FORMAT JSON`, + ); + for (const row of visitorAge) { + if (row.first_seen === "new") newVisitors = Number(row.cnt) || 0; + else returningVisitors = Number(row.cnt) || 0; + } + } catch { + // 静默降级：visitorAge 查询失败不影响主响应 + } return { visitsByDay: byDay.map((r) => ({ date: r.date, count: Number(r.cnt) || 0, uv: Number(r.uv) || 0 })), @@ -157,5 +270,20 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise ({ + dow: Number(r.dow) || 0, + hour: Number(r.hour) || 0, + count: Number(r.cnt) || 0, + })), + durationBuckets: durBuckets.map((r) => ({ bucket: r.bucket, count: Number(r.cnt) || 0 })), + entryPages: entryPagesRows.map((r) => ({ path: r.path, count: Number(r.cnt) || 0 })), + exitPages: exitPagesRows.map((r) => ({ path: r.path, count: Number(r.cnt) || 0 })), + visitorTypes: [ + { type: "new", count: newVisitors }, + { type: "returning", count: returningVisitors }, + ], + bounceRate, + pagesPerVisitor, + topReferersFull: referersFull.map((r) => ({ referer: r.referer, count: Number(r.cnt) || 0 })), }; } From be9827391e3453550d526461835a6d1eb7372efb Mon Sep 17 00:00:00 2001 From: Easy Date: Sun, 26 Apr 2026 17:42:50 +0800 Subject: [PATCH 3/5] fix(deploy): pin wrangler pages commit-message to ASCII to bypass CF UTF-8 validator --- scripts/deploy-cloudflare.mjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/deploy-cloudflare.mjs b/scripts/deploy-cloudflare.mjs index f58b9ff..232e6c7 100644 --- a/scripts/deploy-cloudflare.mjs +++ b/scripts/deploy-cloudflare.mjs @@ -153,6 +153,8 @@ if (!options.skipClient) { "--branch", options.branch, "--commit-dirty=true", + "--commit-message", + "monolith deploy", ], { cwd: clientRoot }); } From e1e8e13de35f3d9daf9d36186f52cd8ea8a3d77b Mon Sep 17 00:00:00 2001 From: Easy Date: Sun, 26 Apr 2026 18:01:36 +0800 Subject: [PATCH 4/5] fix(ae): replace unsupported SQL fns (multiIf/if/countIf/argMin) with CASE WHEN --- server/src/analytics/ae-query.ts | 52 +++++++++++++++++--------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/server/src/analytics/ae-query.ts b/server/src/analytics/ae-query.ts index 0815166..bf95239 100644 --- a/server/src/analytics/ae-query.ts +++ b/server/src/analytics/ae-query.ts @@ -166,47 +166,44 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise( env, `SELECT - multiIf( - double1 < 10000, '0-10s', - double1 < 30000, '10-30s', - double1 < 60000, '30s-1m', - double1 < 180000, '1-3m', - double1 < 600000, '3-10m', - '10m+') AS bucket, + CASE + WHEN double1 < 10000 THEN '0-10s' + WHEN double1 < 30000 THEN '10-30s' + WHEN double1 < 60000 THEN '30s-1m' + WHEN double1 < 180000 THEN '1-3m' + WHEN double1 < 600000 THEN '3-10m' + ELSE '10m+' + END AS bucket, SUM(_sample_interval) AS cnt FROM ${DATASET} WHERE timestamp > NOW() - ${since} AND double1 > 0 GROUP BY bucket FORMAT JSON`, ), - // —— 新增：入口页（每个 visitor 在窗口内最早访问的页面） —— + // —— 新增：入口页（referer 为空 = 直接访问/外链着陆的页面 Top） —— runSql<{ path: string; cnt: number }>( env, - `SELECT path, COUNT() AS cnt FROM ( - SELECT blob10 AS vid, argMin(blob2, timestamp) AS path - FROM ${DATASET} - WHERE timestamp > NOW() - ${since} AND blob10 != '' - GROUP BY vid - ) GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + `SELECT blob2 AS path, SUM(_sample_interval) AS cnt + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob4 = '' + GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, ), - // —— 新增：出口页（每个 visitor 在窗口内最后访问的页面） —— + // —— 新增：出口页（停留时间 > 0 但短的页面，近似为离开点） —— runSql<{ path: string; cnt: number }>( env, - `SELECT path, COUNT() AS cnt FROM ( - SELECT blob10 AS vid, argMax(blob2, timestamp) AS path - FROM ${DATASET} - WHERE timestamp > NOW() - ${since} AND blob10 != '' - GROUP BY vid - ) GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, + `SELECT blob2 AS path, SUM(_sample_interval) AS cnt + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 > 0 AND double1 < 5000 + GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, ), // —— 新增：跳出 + 人均访问页数（基于 visitor session） —— runSql<{ visitors: number; bouncers: number; total_pv: number }>( env, `SELECT COUNT() AS visitors, - countIf(pv = 1) AS bouncers, + SUM(CASE WHEN pv = 1 THEN 1 ELSE 0 END) AS bouncers, SUM(pv) AS total_pv FROM ( - SELECT blob10 AS vid, COUNT(DISTINCT blob2) AS pv + SELECT blob10 AS vid, SUM(_sample_interval) AS pv FROM ${DATASET} WHERE timestamp > NOW() - ${since} AND blob10 != '' GROUP BY vid @@ -215,7 +212,9 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise( env, - `SELECT if(blob4 = '', '(直接访问)', blob4) AS referer, SUM(_sample_interval) AS cnt + `SELECT + CASE WHEN blob4 = '' THEN '(直接访问)' ELSE blob4 END AS referer, + SUM(_sample_interval) AS cnt FROM ${DATASET} WHERE timestamp > NOW() - ${since} GROUP BY referer ORDER BY cnt DESC LIMIT 20 FORMAT JSON`, @@ -240,7 +239,10 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise( env, `SELECT - if(toUnixTimestamp(min_ts) > toUnixTimestamp(NOW() - INTERVAL '1' DAY), 'new', 'returning') AS first_seen, + CASE + WHEN toUnixTimestamp(min_ts) > toUnixTimestamp(NOW() - INTERVAL '1' DAY) THEN 'new' + ELSE 'returning' + END AS first_seen, COUNT() AS cnt FROM ( SELECT blob10 AS vid, MIN(timestamp) AS min_ts From 888b98fede2780d38d2f7e2d8f1ae50b40d3b388 Mon Sep 17 00:00:00 2001 From: Easy Date: Sun, 26 Apr 2026 18:15:12 +0800 Subject: [PATCH 5/5] fix(ae): drop CASE WHEN entirely, split bucket/bounce/visitor-age queries into parallel SUM/COUNT --- server/src/analytics/ae-query.ts | 172 +++++++++++++++++++++---------- 1 file changed, 115 insertions(+), 57 deletions(-) diff --git a/server/src/analytics/ae-query.ts b/server/src/analytics/ae-query.ts index bf95239..5e43438 100644 --- a/server/src/analytics/ae-query.ts +++ b/server/src/analytics/ae-query.ts @@ -89,11 +89,18 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise( env, @@ -162,22 +169,36 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise NOW() - ${since} GROUP BY dow, hour ORDER BY dow, hour FORMAT JSON`, ), - // —— 新增：停留时长分桶（毫秒） —— - runSql<{ bucket: string; cnt: number }>( + // —— 新增：停留时长分桶（毫秒）：6 条独立查询并发 —— + runSql<{ cnt: number }>( env, - `SELECT - CASE - WHEN double1 < 10000 THEN '0-10s' - WHEN double1 < 30000 THEN '10-30s' - WHEN double1 < 60000 THEN '30s-1m' - WHEN double1 < 180000 THEN '1-3m' - WHEN double1 < 600000 THEN '3-10m' - ELSE '10m+' - END AS bucket, - SUM(_sample_interval) AS cnt - FROM ${DATASET} - WHERE timestamp > NOW() - ${since} AND double1 > 0 - GROUP BY bucket FORMAT JSON`, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 > 0 AND double1 < 10000 FORMAT JSON`, + ), + runSql<{ cnt: number }>( + env, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 >= 10000 AND double1 < 30000 FORMAT JSON`, + ), + runSql<{ cnt: number }>( + env, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 >= 30000 AND double1 < 60000 FORMAT JSON`, + ), + runSql<{ cnt: number }>( + env, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 >= 60000 AND double1 < 180000 FORMAT JSON`, + ), + runSql<{ cnt: number }>( + env, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 >= 180000 AND double1 < 600000 FORMAT JSON`, + ), + runSql<{ cnt: number }>( + env, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND double1 >= 600000 FORMAT JSON`, ), // —— 新增：入口页（referer 为空 = 直接访问/外链着陆的页面 Top） —— runSql<{ path: string; cnt: number }>( @@ -195,70 +216,107 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise NOW() - ${since} AND double1 > 0 AND double1 < 5000 GROUP BY path ORDER BY cnt DESC LIMIT 10 FORMAT JSON`, ), - // —— 新增：跳出 + 人均访问页数（基于 visitor session） —— - runSql<{ visitors: number; bouncers: number; total_pv: number }>( + // —— 新增：跳出 + 人均访问页数（基于 visitor session）：拆 3 条 —— + runSql<{ visitors: number; total_pv: number }>( env, - `SELECT - COUNT() AS visitors, - SUM(CASE WHEN pv = 1 THEN 1 ELSE 0 END) AS bouncers, - SUM(pv) AS total_pv - FROM ( + `SELECT COUNT() AS visitors, SUM(pv) AS total_pv FROM ( SELECT blob10 AS vid, SUM(_sample_interval) AS pv FROM ${DATASET} WHERE timestamp > NOW() - ${since} AND blob10 != '' GROUP BY vid ) FORMAT JSON`, ), - // —— 新增：扩展引荐 Top 20（含直接访问） —— + runSql<{ bouncers: number }>( + env, + `SELECT COUNT() AS bouncers FROM ( + SELECT blob10 AS vid, SUM(_sample_interval) AS pv + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + HAVING pv = 1 + ) FORMAT JSON`, + ), + // —— 新增：扩展引荐 Top 20（仅非空 referer，直接访问单独算） —— runSql<{ referer: string; cnt: number }>( env, - `SELECT - CASE WHEN blob4 = '' THEN '(直接访问)' ELSE blob4 END AS referer, - SUM(_sample_interval) AS cnt + `SELECT blob4 AS referer, SUM(_sample_interval) AS cnt FROM ${DATASET} - WHERE timestamp > NOW() - ${since} + WHERE timestamp > NOW() - ${since} AND blob4 != '' GROUP BY referer ORDER BY cnt DESC LIMIT 20 FORMAT JSON`, ), + // —— 新增：直接访问总量（referer 为空） —— + runSql<{ cnt: number }>( + env, + `SELECT SUM(_sample_interval) AS cnt FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob4 = '' FORMAT JSON`, + ), ]); const totalRow = totals[0] || { total: 0, uv: 0, avg_dur: 0 }; // 跳出率 / 人均页数 - const bounceRow = bounceStats[0] || { visitors: 0, bouncers: 0, total_pv: 0 }; - const visitors = Number(bounceRow.visitors) || 0; - const bouncers = Number(bounceRow.bouncers) || 0; - const totalPv = Number(bounceRow.total_pv) || 0; + const visitorsRow = bounceVisitors[0] || { visitors: 0, total_pv: 0 }; + const bouncersRow = bounceBouncers[0] || { bouncers: 0 }; + const visitors = Number(visitorsRow.visitors) || 0; + const bouncers = Number(bouncersRow.bouncers) || 0; + const totalPv = Number(visitorsRow.total_pv) || 0; const bounceRate = visitors > 0 ? bouncers / visitors : 0; const pagesPerVisitor = visitors > 0 ? totalPv / visitors : 0; - // 新老访客比：用首日 visitor 与窗口起点对比 - // 简化策略：当一个 visitor 在窗口前 24h 出现过则算「老访客」，否则「新访客」 - // 由于 AE 只保留 31 天，我们取窗口内首次出现 > NOW()-24h 的 visitor 算「新」 + // 新老访客比：拆为两条查询并行（窗口内首访 > 24h 前 = old，否则 new） + // AE 不支持 CASE WHEN，改用两条 HAVING 过滤 let newVisitors = 0; let returningVisitors = 0; try { - const visitorAge = await runSql<{ first_seen: string; cnt: number }>( - env, - `SELECT - CASE - WHEN toUnixTimestamp(min_ts) > toUnixTimestamp(NOW() - INTERVAL '1' DAY) THEN 'new' - ELSE 'returning' - END AS first_seen, - COUNT() AS cnt - FROM ( - SELECT blob10 AS vid, MIN(timestamp) AS min_ts - FROM ${DATASET} - WHERE timestamp > NOW() - ${since} AND blob10 != '' - GROUP BY vid - ) GROUP BY first_seen FORMAT JSON`, - ); - for (const row of visitorAge) { - if (row.first_seen === "new") newVisitors = Number(row.cnt) || 0; - else returningVisitors = Number(row.cnt) || 0; - } + const [newRows, oldRows] = await Promise.all([ + runSql<{ cnt: number }>( + env, + `SELECT COUNT() AS cnt FROM ( + SELECT blob10 AS vid, MIN(timestamp) AS min_ts + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + HAVING min_ts > NOW() - INTERVAL '1' DAY + ) FORMAT JSON`, + ), + runSql<{ cnt: number }>( + env, + `SELECT COUNT() AS cnt FROM ( + SELECT blob10 AS vid, MIN(timestamp) AS min_ts + FROM ${DATASET} + WHERE timestamp > NOW() - ${since} AND blob10 != '' + GROUP BY vid + HAVING min_ts <= NOW() - INTERVAL '1' DAY + ) FORMAT JSON`, + ), + ]); + newVisitors = Number(newRows[0]?.cnt) || 0; + returningVisitors = Number(oldRows[0]?.cnt) || 0; } catch { // 静默降级：visitorAge 查询失败不影响主响应 } + // 拼接停留分桶（6 条独立查询 → 命名桶） + const durationBuckets = [ + { bucket: "0-10s", count: Number(durB1[0]?.cnt) || 0 }, + { bucket: "10-30s", count: Number(durB2[0]?.cnt) || 0 }, + { bucket: "30s-1m", count: Number(durB3[0]?.cnt) || 0 }, + { bucket: "1-3m", count: Number(durB4[0]?.cnt) || 0 }, + { bucket: "3-10m", count: Number(durB5[0]?.cnt) || 0 }, + { bucket: "10m+", count: Number(durB6[0]?.cnt) || 0 }, + ]; + + // 引荐 Top 20：把直接访问拼到首位（按数量重排） + const directCount = Number(directAccess[0]?.cnt) || 0; + const referersFullList = referersFull.map((r) => ({ + referer: r.referer, + count: Number(r.cnt) || 0, + })); + if (directCount > 0) { + referersFullList.push({ referer: "(直接访问)", count: directCount }); + referersFullList.sort((a, b) => b.count - a.count); + referersFullList.splice(20); + } + return { visitsByDay: byDay.map((r) => ({ date: r.date, count: Number(r.cnt) || 0, uv: Number(r.uv) || 0 })), topCountries: byCountry.map((r) => ({ country: r.country, count: Number(r.cnt) || 0 })), @@ -277,7 +335,7 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise ({ bucket: r.bucket, count: Number(r.cnt) || 0 })), + durationBuckets, entryPages: entryPagesRows.map((r) => ({ path: r.path, count: Number(r.cnt) || 0 })), exitPages: exitPagesRows.map((r) => ({ path: r.path, count: Number(r.cnt) || 0 })), visitorTypes: [ @@ -286,6 +344,6 @@ export async function queryAEAnalytics(env: AEQueryEnv, days: number): Promise ({ referer: r.referer, count: Number(r.cnt) || 0 })), + topReferersFull: referersFullList, }; }