一、引言:为什么需要清晰的架构?
在开发 Token 分析平台时,我们面临的挑战包括:
- 如何高效处理大量日志写入?
- 如何快速查询和聚合数据?
- 如何让前端图表响应流畅?
- 如何保证系统的可扩展性?
回答这些问题,需要一个清晰的、分层的系统架构。本文将基于三层架构模型——前端/客户端层、应用层、核心逻辑与处理层,详细拆解每一层的职责、技术选型和交互方式。
二、整体架构概览
下图展示了平台的系统架构:
┌─────────────────────────────────────┐
│ FRONTEND / CLIENT LAYER │
│ ┌───────────────────────────────┐ │
│ │ Web UI Dashboard │ │
│ │ HTML/JS/Bootstrap │ │
│ │ 交互界面与图表展示 │ │
│ │ REST API (JSON) │ │
│ └───────────────┬───────────────┘ │
└───────────────────┬─────────────────┘
▼
┌─────────────────────────────────────┐
│ APPLICATION LAYER │
│ ┌───────────────────────────────┐ │
│ │ API Gateway │ │
│ │ FastAPI App │ │
│ │ 路由分发与请求验证 │ │
│ └───────────────┬───────────────┘ │
└───────────────────┬─────────────────┘
▼
┌─────────────────────────────────────┐
│ CORE LOGIC & PROCESSING LAYER │
│ ┌───────────────────────────────┐ │
│ │ Analysis Engine │ │
│ │ Tiktoken 集成 │ │
│ │ 成本计算与建议生成 │ │
│ └───────────────┬───────────────┘ │
│ ┌───────────────▼───────────────┐ │
│ │ Visualizer │ │
│ │ Matplotlib/Plotly │ │
│ │ 报表与图表渲染 │ │
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘
整个系统遵循清晰的分层设计:前端负责展示和用户交互,应用层负责请求路由和业务逻辑调度,核心层则封装了关键的分析能力和可视化生成。下面我们逐层深入。
三、前端/客户端层:直观的交互界面
3.1 职责
前端层直接面向管理员和开发者,提供可视化的成本监控面板。其主要功能包括:
- 展示实时成本曲线、服务占比、用户排行榜等图表。
- 提供日期范围选择、服务筛选等交互控件。
- 通过 REST API 与后端通信,获取聚合数据。
3.2 技术选型
- HTML/JS/Bootstrap:使用 Bootstrap 快速搭建响应式布局,确保在不同设备上都能良好显示。
- REST API (JSON):所有数据通过标准 REST 接口获取,前端使用 Fetch API 或 Axios 发起请求。
3.3 设计要点
- 图表交互性:采用 Plotly.js 或 ECharts 等库,支持缩放、悬停提示、数据导出,让用户能深入探索数据。
- 实时更新:通过定时轮询(如每分钟一次)获取最新成本数据,保持面板的实时性。
- 权限控制:前端根据登录用户的权限,显示不同的菜单和数据范围(如只允许查看自己部门的成本)。

