👋 你好！欢迎来到 AI Agent 工作台前端实战教程。
这是一份从零开始的实战教程，即使你是前端小白，也能跟着一步步学会搭建一个企业级的 AI Agent 工作台。
📖 这份教程适合谁？
| 人群 | 是否适合 |
|---|---|
| 刚学完 React 基础，想做项目的同学 | ✅ 非常适合 |
| 前端开发 1-3 年，想学习企业级架构 | ✅ 非常适合 |
| 想了解 AI 产品前端怎么实现的同学 | ✅ 非常适合 |
| 完全零基础，连 HTML/CSS 都不会 | ⚠️ 建议先学基础再来看 |
你需要具备的基础知识
- ✅ HTML / CSS 基础
- ✅ JavaScript 基础（ES6+）
- ✅ React 基础（组件、Hooks、状态）
- ❌ 不需要会 Node.js 后端
- ❌ 不需要懂 AI 算法
🗂️ 教程目录（学习顺序）
建议按照编号顺序学习，每一章都建立在前一章的基础上。
| 序号 | 章节 | 难度 | 预计学习时间 |
|---|---|---|---|
| 00 | 👉 你在这里 · 新手入门指南 | ⭐ | 5 分钟 |
| 01 | 项目概述与环境搭建 | ⭐ | 30 分钟 |
| 02 | 整体架构设计入门 | ⭐⭐ | 40 分钟 |
| 03 | 工程化与项目初始化 | ⭐⭐ | 1 小时 |
| 04 | MobX 状态管理入门 | ⭐⭐⭐ | 2 小时 |
| 05 | 网关层与通信基础 | ⭐⭐⭐ | 1.5 小时 |
| 06 | WebSocket 实时通信实战 | ⭐⭐⭐⭐ | 2 小时 |
| 07 | 聊天会话模块实现 | ⭐⭐⭐ | 2 小时 |
| 08 | 执行面板与工具调用 | ⭐⭐⭐ | 1.5 小时 |
| 09 | 审批与安全机制 | ⭐⭐ | 1 小时 |
| 10 | 更多业务模块扩展 | ⭐⭐⭐ | 2 小时 |
| 11 | 最佳实践与进阶 | ⭐⭐⭐⭐ | 1.5 小时 |
🎯 学完你能做什么？
完成全部教程后，你将能够：
- 🏗️ 独立设计一个企业级 AI 对话产品的前端架构
- 💬 实现流式 AI 对话功能（就像 ChatGPT 那样的打字效果）
- 🔌 搭建WebSocket 实时通信系统，支持重连、心跳
- 📦 组织模块化的 MobX 状态管理
- 🛡️ 设计审批流程和安全机制
- ⚡ 优化实时应用的性能
💡 怎么使用这份教程？
学习方法
- 先读概念，再看代码：每章先理解为什么这么设计，再看怎么实现
- 动手跟着敲：光看不练假把式，建议边看边写代码
- 遇到不懂先查：遇到陌生的术语，先 Google 一下基础概念
- 完成每章练习：每章末尾都有小练习，检验你是否真的懂了
记号说明
教程里会用到一些记号，帮你快速识别内容类型：
| 记号 | 含义 |
|---|---|
| 💡 小贴士 | 实用的小技巧，能让你少走弯路 |
| ⚠️ 注意 | 容易踩坑的地方，特别留意 |
| 🎯 核心概念 | 必须掌握的重点知识 |
| ✏️ 动手练习 | 建议动手写一写的小练习 |
| 📌 一句话总结 | 这一节的核心要点 |