Architecture Infographic · v2.0.0
Qwen Agent Lab
基于 Qwen 的本地优先 AI 智能体 · 真·Agent 工具调用循环 (ReAct) · 前后端分层架构
🏠 本地优先
🤖 真·Agent / ReAct
🔐 密钥不出后端
⚡ NDJSON 流式
Layer 1
前端 · 浏览器单页应用 (SPA)
原生 JS 模块化 · IndexedDB · 控制台式界面
入口编排
src/main.js
串联状态、渲染、仓库与流式请求，驱动整个应用生命周期
视图渲染
components/render.js · landing.js · icons.js
顶栏 / 左侧模式栏 / 输出区 / 底部输入坞 + 落地页
状态管理
state.js
UI 状态、布局宽度、当前模式与模型，本地持久化
本地数据层
data/conversationRepository.js
IndexedDB 存会话/消息/附件/档案，失败回退内存
对话工具
utils/conversation.js
上下文构建、本地标题、自动摘要判定
文件解析 / 快捷键
utils/fileParser.js · inputActions.js
txt/md/csv 读取、粘贴上传、发送/聚焦/复制快捷键
路由
utils/routing.js
落地页 / 控制台 (/app) 视图切换
▲ HTTP / JSON · NDJSON 流 ▼
Layer 2
后端 · Express 服务 (Node ≥ 18)
server/index.js · 路由 + 静态资源 + 密钥隔离
GET/api/health服务 & Qwen 配置状态
GET/api/models模型白名单
POST/api/qwen/plan回答规划
POST/api/qwen/chat结构化 JSON 回答
POST/api/qwen/chat/streamNDJSON 流式 (含工具事件)
POST/api/qwen/conversation-summary后台压缩历史
配置 / 模型
config.js · models.js
读取 .env、密钥、超时；7 个 Qwen 模型白名单
回答规划器
answerPlanner.js
识别任务类型与图表类型，决定输出结构
响应格式化
responseFormatter.js
统一 HTML 输出契约 + 标签白名单 / 净化
上下文管理
context.js
摘要 + 最近 8 轮，字符上限保护
▲ mode = agent 时进入 ▼
Layer 3 · 核心
Agent 引擎 · ReAct 工具调用循环
server/agentExecutor.js · async generator
模型思考→
tool_start→
执行工具→
tool_result / tool_error→
结果回填模型↻
上限 5 轮 / 8 步 · 超限强制收束
每一步通过 NDJSON 实时推送到前端「工具链时光轴」，并写入 IndexedDB，刷新后可恢复 ·
统一契约：step / tool / status / args / result / error / durationMs
▲ HTTPS API 调用 ▼
Layer 4
外部服务 & 网关
server/qwenClient.js · 重试 / 退避 / 流式
Qwen DashScope
OpenAI 兼容接口
对话、函数调用、enable_search 内置联网；指数退避重试
博查 Bocha (可选)
WEB_SEARCH_PROVIDER=bocha
返回结构化网页链接的真实搜索；留空回退 Mock
调用日志 / 错误
callLog.js · errors.js
请求审计与统一错误归一化
🔀 两条核心数据流
对话 / 文档 / CSV 模式
用户输入前端
→
/api/qwen/chat·streamExpress
→
planAnswer规划
→
callQwenDashScope
→
HTML 结构化回答净化 + 图表渲染
Agent 模式 (ReAct)
用户输入前端
→
runAgent 循环思考↔工具
→
tools.jscalc / file / web
→
NDJSON 事件tool_start/result
→
工具链时光轴实时 + 持久化