技术栈方案（已选定：方案 C 全 Python）

已选定方案 C：Python FastAPI 全栈，AI 网关与业务后端统一使用 Python，前端使用 Next.js 14。

架构总览

┌─────────────────────────────────────────────────────────────────┐
│                        用户控制台                                │
│  Next.js 14 + TypeScript + shadcn/ui + TailwindCSS              │
│  Vercel AI SDK（流式对话）+ ECharts（用量仪表盘）                  │
│  NextAuth.js（OAuth）+ TanStack Query + Zustand                  │
├─────────────────────────────────────────────────────────────────┤
│                        平台管理端                                │
│  Next.js 14 + TypeScript + Ant Design Pro                        │
├──────────────────────┬──────────────────────────────────────────┤
│   Python 业务后端     │         Python AI 网关                   │
│   FastAPI + Celery   │         FastAPI + httpx                   │
│   SQLAlchemy + PG    │         openai/anthropic/dashscope SDK    │
│   支付宝/微信 SDK     │         Redis 优先级队列 + 滑动限流        │
│   JWT + RBAC         │         tenacity 熔断降级                 │
├──────────────────────┴──────────────────────────────────────────┤
│                          存储层                                  │
│  PostgreSQL 16（主业务）  Redis 7（缓存/队列/限流）               │
│  ClickHouse 24（Token 用量分析）  OSS（文件存储）                 │
├─────────────────────────────────────────────────────────────────┤
│                        消息与任务                                │
│  Kafka（服务间事件）  Celery（异步任务 + 定时任务）                │
├─────────────────────────────────────────────────────────────────┤
│                       基础设施                                   │
│  NGINX  Docker  Kubernetes + Helm                               │
│  Prometheus + Grafana  Loki  Jaeger  Alertmanager               │
└─────────────────────────────────────────────────────────────────┘

一、用户控制台前端

1.1 框架与工程化

1.2 状态管理

1.3 AI 对话与流式输出

1.4 数据可视化

1.5 表单与校验

1.6 认证与安全

1.7 支付集成（前端）

1.8 UI 交互与动效

1.9 国际化与其他

1.10 关键页面设计说明

主页（Landing Page / 首页）：

• 未登录态：品牌介绍 + 核心功能亮点卡片 + 定价套餐对比 + 注册/登录 CTA 按钮，SSG 静态生成，SEO 友好
• 已登录态：自动跳转控制台 Dashboard，展示今日用量摘要、余额状态、最近对话入口、系统公告横幅
• 导航栏：Logo + 功能导航 + 登录/注册按钮（未登录）/ 用户头像菜单 + 消息 Badge（已登录）
• 响应式布局，移动端优先，TailwindCSS 断点适配
• Framer Motion 入场动画（Hero 区域文字淡入 + 功能卡片依次滑入）

模型列表页：

• 顶部筛选栏：按提供商（OpenAI / 阿里云 / Anthropic…）、模型类型（对话 / 嵌入 / 图像）、是否支持流式、上下文长度区间多维筛选
• 卡片网格布局：每张模型卡片展示模型名、提供商 Logo、上下文窗口大小、input/output 定价、支持的能力标签（Function Calling / Vision / Code 等）
• 价格对比入口：点击任意模型卡片右上角「比价」图标，弹出与第三方的价格对比 Sheet（调用 GET /tokens/price-comparison/{model_id}）
• 快速发起对话：每个模型卡片有「立即对话」按钮，点击携带 model_id 跳转到对话页并预选该模型
• 当前会员等级价格高亮：根据用户会员等级（free / basic / premium）在卡片上显示对应档位的实际价格
• TanStack Query 缓存模型列表（5 分钟 stale time），搜索框使用防抖（300ms）

AI 对话页：

• 左侧历史列表 + 右侧对话区，useChat 流式逐字输出
• 消息气泡支持 Markdown + 代码高亮 + KaTeX 公式
• 右下角实时显示本次 Token 消耗与费用
• 流式输出时光标闪烁动画（Framer Motion）

Token 仪表盘：

• 顶部今日/本月用量卡片（数字跳动动效）
• 中间趋势折线图（ECharts，支持时间范围切换）
• 底部 Top 10 模型横向柱状图 + API Key 用量 Table
• TanStack Query 自动后台刷新

充值页：

• 金额快选按钮（50/100/200/500）+ 自定义输入
• 扫码/H5 跳转支付，useInterval 轮询支付状态
• 支付成功后 Framer Motion 庆祝动效 + 余额实时刷新

二、平台管理端前端

三、AI 网关服务（Python）

职责： 模型调用、SSE 流式输出、多提供商路由、优先级队列、限流、降级熔断。

优先级队列实现（Redis Sorted Set）：

# score = 时间戳 * 1000 - 优先级偏移（P0 偏移最大，最先出队）
priority_offset = {"P0": 4000, "P1": 3000, "P2": 2000, "P3": 1000}
score = time.time() * 1000 - priority_offset[priority]
await redis.zadd(f"model:{model_id}:queue", {request_id: score})
# 工作协程取出最高优先级
request_id = await redis.zpopmin(f"model:{model_id}:queue")

四、业务后端服务（Python）

职责： 用户、认证、支付、钱包、账务、会员、营销等业务逻辑。

项目结构（Monorepo 双服务）：

backend/
├── ai_gateway/           # AI 网关服务
│   ├── main.py
│   ├── routers/          # chat, models, providers
│   └── services/         # llm_router, rate_limiter, queue, fallback
│
├── business/             # 业务后端服务
│   ├── main.py
│   ├── routers/          # users, auth, wallet, orders, billing...
│   ├── services/         # user_service, payment_service...
│   ├── models/           # SQLAlchemy ORM 模型
│   └── tasks/            # Celery 异步任务
│
├── shared/               # 两个服务共享代码
│   ├── db.py             # 数据库连接池
│   ├── redis_client.py   # Redis 连接
│   ├── schemas/          # 共享 Pydantic schemas
│   └── middleware/       # 认证中间件、日志中间件
│
├── alembic/              # 统一数据库迁移
├── tests/                # 测试
└── requirements.txt

五、数据存储层

ClickHouse token_usage 表结构：

CREATE TABLE token_usage (
  request_id    String,
  user_id       String,
  api_key_id    String,
  model_id      String,
  provider_id   String,
  input_tokens  UInt32,
  output_tokens UInt32,
  total_tokens  UInt32,
  input_cost    Decimal(18,8),
  output_cost   Decimal(18,8),
  latency_ms    UInt32,
  created_at    DateTime
) ENGINE = MergeTree()
PARTITION BY toYYYYMM(created_at)
ORDER BY (user_id, model_id, created_at);

六、消息队列（Kafka）

七、基础设施与部署

docker-compose 服务清单（开发环境）：

services:
  business:       # 业务后端 FastAPI   :8000
  ai_gateway:     # AI 网关 FastAPI    :8001
  celery_worker:  # 异步任务执行
  celery_beat:    # 定时任务调度
  postgres:       # PostgreSQL 16     :5432
  redis:          # Redis 7           :6379
  clickhouse:     # ClickHouse 24     :8123
  kafka:          # Kafka             :9092
  zookeeper:      # Kafka 依赖        :2181
  nginx:          # 反向代理          :80/:443

八、服务拓扑图

用户浏览器 / 第三方 API 调用
  └── NGINX（SSL终止 + 静态资源）
        ├── /api/v1/chat/*    → Python AI 网关（FastAPI，模型调用/SSE流式）
        ├── /api/v1/*         → Python 业务后端（FastAPI，用户/支付/钱包/会员/营销）
        └── /admin/v1/*       → Python 业务后端（管理员接口，RBAC 鉴权）

Python 业务后端
  ├── PostgreSQL（用户/订单/钱包/会员/营销主业务数据）
  ├── Redis（JWT黑名单、API Key 缓存）
  ├── Celery Worker（发邮件/短信、发券、生成PDF）
  ├── Celery Beat（月度账单、会员到期检查、对账）
  └── Kafka（生产：user.registered / payment.success / notification.send）

Python AI 网关
  ├── Redis（优先级队列 Sorted Set、滑动窗口限流计数）
  ├── ClickHouse（Token 用量明细批量写入）
  ├── OpenAI / Anthropic / 阿里云百炼 / 百度 / 智谱...
  └── Kafka（生产：model.request.completed）