VPS Monitor 改造记：Token 用量 + 访问分析 + GA 风格 UI

我在自己的 VPS（162.43.92.249）上跑了很多服务——PM2 应用、Docker 容器、k3s、Nginx、Tailscale。为了在浏览器里一眼看清服务器状态，我用 Next.js 16 + shadcn/ui 搭建了一个监控面板 VPS Monitor（端口 3003）。

这篇文章完整记录从「基础监控」到「GA 风格仪表盘」的开发过程，包含全部源代码和踩过的所有坑。

技术栈

项	内容
框架	Next.js 16.3.6（Turbopack）
UI	shadcn/ui + Tailwind CSS 4
图表	Recharts 3.8
地图	react-simple-maps 5.0
GeoIP	geoip-lite 2.0
UA 解析	ua-parser-js 2.0
数据库	node:sqlite（Node 24 内置）
部署	PM2
包管理	pnpm

项目结构

/root/vps-monitor/
├── src/app/
│   ├── page.tsx
│   └── api/
│       ├── visitors/route.ts
│       ├── oneapi-tokens/route.ts
│       └── vps/route.ts
├── src/components/
│   ├── monitor-tabs.tsx
│   ├── visitor-analytics.tsx
│   ├── visitor-map.tsx
│   ├── visitor-charts.tsx
│   ├── visitor-table.tsx
│   ├── token-monitor.tsx
│   └── ui/
└── src/lib/
    ├── utils.ts
    └── chart-theme.ts