图表测试

2. 请求路由流程图

展示 HTTP 请求如何被分发到不同处理函数。

flowchart LR
    subgraph "入口"
        A["HTTP 请求"] --> B["fetch() 入口"]
    end

    subgraph "路由判定"
        B --> C{路径匹配}
    end

    subgraph "API 层 — handleAPI()"
        C -->|"/api/health"| D["健康检查<br>返回状态 + 账号数"]
        C -->|"/api/debug/env"| E["诊断接口<br>列出所有环境变量"]
        C -->|"/api/usage"| F["全部账号用量"]
        C -->|"/api/usage/:id"| G["指定账号用量"]
        C -->|"未知 /api/*"| X["404 兜底"]
    end

    subgraph "前端层"
        C -->|"/ 或 /index.html"| H["返回 FRONTEND_HTML<br>内嵌监控面板"]
    end

    C -->|"其他路径"| I["404 Not found"]

    F --> J["loadAccounts()<br>扫描 TOKEN_* 环境变量"]
    G --> J
    J --> K["gqlQuery()<br>POST Cloudflare GraphQL"]
    K --> L["queryDailyUsage()<br>聚合数据"]
    L --> M["jsonResponse() 输出 JSON"]
    L -->|"查询失败"| N["error 写入 accounts 数组"]

    F -.->|"无账号配置"| O["返回兜底响应"]
    G -.->|"账号不存在"| P["返回 404"]

---

3. 用量查询时序图

展示一次用量查询请求的完整生命周期，从浏览器到 Cloudflare 再返回。

sequenceDiagram
    autonumber
    participant B as "浏览器<br>(监控面板)"
    participant W as "Worker<br>(index.js)"
    participant E as "环境变量<br>(Wrangler Secrets)"
    participant G as "Cloudflare GraphQL API"

    B->>W: GET /api/usage?days=7
    W->>W: loadAccounts(env)
    W->>E: 读取 TOKEN_*, ACCOUNT_*, LABEL_*
    E-->>W: 返回账号列表

    loop 每个被监控账号
        W->>W: queryDailyUsage(account, 7)
        W->>G: POST GraphQL 查询<br>pagesFunctionsInvocationsAdaptiveGroups
        G-->>W: 返回 records (按日+按脚本)
        W->>W: 按日期聚合 (byDate)
        W->>W: 按项目聚合 (byProject)
        W->>W: 计算今日用量/峰值日/汇总
    end

    W->>W: 构建 accounts 数组
    W->>B: JSON 响应 (status: 200)
    B->>B: render() 渲染卡片视图

---

4. 数据聚合逻辑（数据处理流程）

展示 queryDailyUsage() 内部如何将原始 GraphQL 响应转换为结构化的用量报告。

flowchart TD
    A["GraphQL 响应<br>records 列表"] --> B["遍历每条 record"]

    B --> C["提取字段<br>date / scriptName / requests / errors / subrequests"]

    subgraph "按日期聚合 byDate (Map)"
        C --> D["byDate[date]<br>+requests, +errors, +subrequests"]
    end

    subgraph "按项目聚合 byProject (Map)"
        C --> E["byProject[scriptName]<br>+requests, +errors"]
    end

    subgraph "全局汇总"
        C --> F["totalRequests"]
        C --> G["totalErrors"]
        C --> H["totalSubrequests"]
    end

    D --> I["排序 → sortedDays[]<br>按日期升序"]
    E --> J["排序 → sortedProjects[]<br>按请求数降序"]
    F & G & H --> K["reduce → peakDay<br>找峰值日"]

    I & J & K & F & G & H --> L["组装返回对象<br>{today, days, projects, summary, limit}"]

---

5. 前端渲染流程（状态图）

展示前端面板从加载到展示数据的状态转换。

stateDiagram-v2
    [*] --> Loading: 页面打开

    Loading --> Fetching: 触发 refresh()
    Fetching --> FetchingError: HTTP 请求失败
    FetchingError --> DisplayError: 显示错误提示
    Fetching --> Success: 收到 JSON 数据

    Success --> RenderCards: render() 渲染
    RenderCards --> CardView: 展示卡片视图

    CardView --> TrendModal: 点击「趋势」按钮
    TrendModal --> CardView: 关闭弹窗

    CardView --> ProjectModal: 点击「项目」按钮
    ProjectModal --> CardView: 关闭弹窗

    CardView --> ExportJSON: 点击「JSON」按钮
    CardView --> DebugView: 点击「诊断」按钮

    DebugView --> CardView: 返回
    ExportJSON --> CardView: 下载完成

    CardView --> TimeRangeChange: 切换时间范围
    TimeRangeChange --> Fetching: 重新刷新

---

6. 用量阈值可视化（条件渲染逻辑）

展示前端如何根据用量百分比动态切换颜色。

flowchart LR
    A["今日请求数 N"] --> B{计算百分比<br>P = N / 100000 × 100}

    B --> C{P ≥ 90%?}
    C -->|"是"| D["红色 bar-danger<br>⚠️ 即将超限"]

    C -->|"否"| E{P ≥ 70%?}
    E -->|"是"| F["黄色 bar-warn<br>⚡ 注意用量"]
    E -->|"否"| G["绿色 bar-ok<br>✅ 安全"]

    D & F & G --> H["进度条宽度 = P%<br>显示 N / 100K 文本"]

---

8. 部署与运行架构

展示从部署到访问的整体架构。

flowchart TB
    subgraph "开发者"
        A["本地开发<br>wrangler deploy"]
    end

    subgraph "Cloudflare Workers"
        B["cf-pages-monitor Worker"]
        C["Wrangler Secrets<br>加密存储 API Tokens"]
        D["Cloudflare Edges<br>全球 CDN"]
    end

    subgraph "被监控账号"
        E["CF 账号 1<br>Pages Functions"]
        F["CF 账号 2<br>Pages Functions"]
        G["CF 账号 N<br>Pages Functions"]
    end

    subgraph "用户访问"
        H["浏览器<br>监控面板"]
        I["AI / curl<br>JSON API"]
    end

    A --> B
    B --> C
    H --> D
    I --> D
    D --> B
    B -->|"GraphQL 查询"| E
    B -->|"GraphQL 查询"| F
    B -->|"GraphQL 查询"| G
    E -->|"返回用量数据"| B
    F -->|"返回用量数据"| B
    G -->|"返回用量数据"| B
    B -->|"JSON / HTML"| H
    B -->|"JSON"| I