┌─────────────────────────────────────────────────────────────────┐
│                       用户浏览器                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────────────────────────────────────────────────┐      │
│  │         📍 Leaflet地图 (visitor-tracker.js)          │      │
│  │  - 加载OSM地图瓦片                                   │      │
│  │  - 绘制访问者位置标记                                │      │
│  │  - 聚合同城市访问者                                  │      │
│  └──────────────────────────────────────────────────────┘      │
│           ↓ 获取IP地理信息          ↓ 读取历史数据           │
│  ┌──────────────────┐        ┌──────────────────┐              │
│  │ ip-api.com API   │        │  GitHub Gist     │              │
│  │ (免费地理定位)   │        │ (公开访问读)     │              │
│  └──────────────────┘        └──────────────────┘              │
│           ↓                           ↓                        │
│       获取当前位置                  获取所有访问者数据         │
│                                                                  │
│  ┌──────────────────────────────────────────────────────┐      │
│  │  页面加载完成 → 发送POST请求到后端                  │      │
│  │  (country, city, latitude, longitude, ip)           │      │
│  └──────────────────────────────────────────────────────┘      │
│                           ↓                                      │
└──────────────────────────────────────────────────────────────────┘
                            │
                            │ HTTPS
                            ↓
┌──────────────────────────────────────────────────────────────────┐
│                    Vercel Edge Network                           │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────────────────────────────────────────────────┐      │
│  │    🚀 Serverless Function (/api/track-visitor.js)   │      │
│  │  - 验证请求数据                                     │      │
│  │  - 获取当前Gist内容                                 │      │
│  │  - 添加新访问记录                                   │      │
│  │  - 更新Gist                                         │      │
│  │  - 返回成功响应                                     │      │
│  └──────────────────────────────────────────────────────┘      │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘
         │ (使用GitHub Token)
         ↓
┌──────────────────────────────────────────────────────────────────┐
│                      GitHub API                                 │
├──────────────────────────────────────────────────────────────────┤
│  ┌────────────────────────────────────────────────────┐         │
│  │              🗂️ GitHub Gist (数据存储)           │         │
│  │                                                    │         │
│  │  {                                                 │         │
│  │    "visitors": [                                   │         │
│  │      {                                             │         │
│  │        "timestamp": "2025-10-22T10:30:00Z",      │         │
│  │        "country": "China",                         │         │
│  │        "city": "Hangzhou",                         │         │
│  │        "latitude": 30.2741,                        │         │
│  │        "longitude": 120.1551,                      │         │
│  │        "ip_hash": "a1b2c3d4"                       │         │
│  │      },                                            │         │
│  │      ...更多访问者...                            │         │
│  │    ],                                              │         │
│  │    "updated_at": "2025-10-22T10:30:00Z"           │         │
│  │  }                                                 │         │
│  └────────────────────────────────────────────────────┘         │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

用户打开网站
    ↓
footer加载Leaflet库
    ↓
执行visitor-tracker.js
    ↓
初始化地图（显示全球视图）
    ↓
并行执行三个操作：
    ├─ 获取用户IP地理信息 (ip-api.com)
    ├─ 读取历史访问数据 (Gist Raw URL)
    └─ 标记当前位置（红色虚线圆圈）
    ↓
聚合历史数据中的城市信息
    ↓
绘制圆形标记到地图
    ├─ 标记大小 ∝ 访问人数
    ├─ 标记颜色 从蓝→红（人数越多越红）
    └─ 弹窗显示城市名和访问数
    ↓
更新统计信息
    ├─ 总访问者数
    └─ 总国家数
    ↓
异步发送新访问记录到后端
    ↓
后端更新Gist
    ↓
完成

前端POST请求到 /api/track-visitor
    ↓
Vercel Function处理请求
    ├─ 验证HTTP方法（必须是POST）
    ├─ 验证必填字段
    └─ 检查环境变量
    ↓
成功 → 继续；失败 → 返回错误
    ↓
调用GitHub API获取当前Gist内容
    ├─ 使用 GITHUB_TOKEN 认证
    └─ 获取gist/{GIST_ID}
    ↓
解析Gist JSON数据
    ↓
新建访问者记录
    ├─ timestamp: 当前时间
    ├─ country: 国家
    ├─ city: 城市
    ├─ latitude: 纬度
    ├─ longitude: 经度
    └─ ip_hash: IP哈希（保护隐私）
    ↓
添加到visitors数组
    ↓
可选：如果超过1000条记录，删除最旧的
    ↓
调用GitHub API更新Gist
    ├─ 使用PATCH方法
    ├─ 发送新的JSON内容
    └─ 添加更新时间戳
    ↓
返回成功响应给前端
    ├─ success: true
    ├─ message: 描述信息
    └─ visitorCount: 当前总数
    ↓
完成

用户IP: 192.168.1.100
    ↓ (hashIP函数)
IP哈希: a1b2c3d4e5f6g7h8
    ↓
存储到Gist中

GitHub Token: ghp_xxx...xxx
    ↓
存储在 → Vercel Environment Variables
    ↓
仅服务器可访问 → 前端无法获取
    ↓
使用Bearer认证 → GitHub API

前端请求 → 后端Function
    ↓
检查HTTP方法（必须POST）
    ↓
检查必填字段：
    ├─ country: 国家
    ├─ city: 城市
    ├─ latitude: 纬度
    └─ longitude: 经度
    ↓
验证环境变量
    ↓
执行更新

用户访问
    ↓
1. 立即获取：IP地理信息
    └─ 来源：ip-api.com
    └─ 延迟：<100ms
    
2. 即时显示：当前位置标记
    └─ 在地图上标记用户
    └─ 无需等待后端
    
3. 加载历史数据：Gist内容
    └─ 来源：GitHub Gist（公开）
    └─ 缓存：1小时
    
4. 异步保存：新访问记录
    └─ 目标：GitHub Gist
    └─ 延迟：可接受（后台）
    
5. 用户体验：完全不受影响
    └─ 页面立即响应
    └─ 数据最终一致性

GET https://ip-api.com/json/?fields=status,country,countryCode,city,lat,lon,query

请求头：
无需认证

响应格式：
{
  "status": "success",
  "country": "China",
  "countryCode": "CN",
  "city": "Hangzhou",
  "lat": 30.2741,
  "lon": 120.1551,
  "query": "1.2.3.4"
}

限制：45请求/分钟

GET https://api.github.com/gists/{GIST_ID}
PATCH https://api.github.com/gists/{GIST_ID}

认证：Bearer {GITHUB_TOKEN}

响应：Gist内容+元数据

POST /api/track-visitor

请求体：
{
  "country": "China",
  "city": "Hangzhou",
  "latitude": 30.2741,
  "longitude": 120.1551,
  "ip": "1.2.3.4"
}

响应：
{
  "success": true,
  "message": "Visitor tracked successfully",
  "visitorCount": 123
}