你打开 worldmonitor.app，发生了什么？

想象一下：你打开网站，眼前是一个旋转的 3D 地球，上面闪烁着数百个事件标记——一场正在进行的军事演习、一个飙升的股票指数异常、一场森林火灾的热点图……

这些实时数据来自 65+ 个外部数据源，经过聚合、AI 分析、缓存，在你打开页面的 3 秒内全部呈现。这背后是一套精密的工程系统。

五个专业变体，一套代码库

WorldMonitor 最聪明的产品设计之一：一套代码，五个不同的专业版本。

技术栈一览

WorldMonitor 选择了一套非常现代、但也挺"反潮流"的技术栈：

8 阶段启动：一次打开的背后

当你访问 worldmonitor.app，App.init() 按顺序执行 8 个阶段，每个阶段有特定的职责：

Panel 类：86 个面板的父亲

WorldMonitor 最核心的设计模式：所有面板都继承自一个基类 Panel，就像一个模板。每个专业面板只需要实现"我显示什么内容"，其他都由基类处理。

// 基类 Panel 处理所有通用逻辑
class Panel {
  setContent(html) { /* 防抖 150ms 渲染 */ }
  refresh()    { /* 子类实现具体刷新逻辑 */ }
  resize()     { /* 响应大小变化，持久化到 localStorage */ }
}

// 每个专业面板只关心自己的数据逻辑
class ConflictPanel extends Panel {
  refresh() {
    const data = getHydratedData('acled-events')
    this.setContent(renderConflictList(data))
  }
}
            

双地图引擎：平面与球形

WorldMonitor 同时维护两套地图：

数据从哪里来，怎么到达你眼前

全球数据到达你的浏览器，要经过一条完整的流水线。理解这条流水线，你就能判断"为什么这个数据是 1 分钟前的"或者"为什么加载慢了"。

Bootstrap：一次请求，所有数据

WorldMonitor 最聪明的性能优化之一：Bootstrap 端点把所有缓存数据一次性批量读出，避免几十个串行请求。

// 同时发两个请求，不等对方
const [fast, slow] = await Promise.allSettled([
  fetchBootstrap({ timeout: 3000 }),  // 3 秒超时
  fetchBootstrap({ timeout: 5000 }),  // 5 秒超时
])
// Redis 批量读取所有缓存键
const all_data = await redis.mget(allBootstrapKeys)
            

健康监控：数据是否新鲜？

每次往 Redis 写数据，WorldMonitor 同时写一条 seed-meta 记录，记录写入时间和条目数量：

四层缓存：从快到慢

缓存是 WorldMonitor 能处理大量用户访问的关键。它用了四层嵌套缓存，每层都有自己的 TTL（生存时间）：

缓存分级：数据有多"鲜"很重要

不同类型的数据"新鲜度要求"不同——飞机位置每秒都在变，历史灾难数据几天才更新一次。WorldMonitor 据此分了 6 个缓存级别：

ETag：省流量的聪明设计

WorldMonitor 的 API 网关有个精妙的优化：ETag 协商缓存。

缓存机制知识测试

为什么要做桌面应用？

WorldMonitor 既是网页应用，也是桌面应用。一套前端代码，两种运行环境。Tauri 2 让这成为可能：

三层架构：Rust 壳 → Node.js 旁载 → 前端

桌面版有三个独立进程，各司其职：

fetch 补丁：一行改变请求目的地

桌面版最精妙的设计：前端代码不需要改动，只在启动时打一个 fetch 补丁，把云端 API 请求无缝切换到本地：

const originalFetch = window.fetch
window.fetch = async (url, options) => {
  if (url.startsWith('/api/')) {
    // 把 /api/markets 重定向到本地旁载
    const localUrl = `http://127.0.0.1:${port}${url}`
    return originalFetch(localUrl, {
      ...options,
      headers: { 'Authorization': `Bearer ${jwt}` }
    })
  }
  return originalFetch(url, options) // 其他请求不变
}
            

启动握手：旁载服务器怎么和前端建立信任

五变体系统：同一套代码，五种专业版

WorldMonitor 通过检测域名决定激活哪个变体——变体系统在代码加载后第一时间运行：

桌面端与变体系统知识测试