面经策

你是如何实现 AI 超级智能体项目前端的？经历了哪些过程？ ​

  • 标签：前端、编程导航

🏛 业务架构师 ​

前端实现我经历了三个阶段，每步都由体验问题驱动：

1. 基础对话版：先跑通"输入框 + 消息列表 + SSE 流式渲染"——验证产品核心价值。早期踩的坑：答案一次性整段出现（没有逐字渲染），用户盯着白屏十几秒——流式打字机效果不是锦上添花，是 AI 产品的及格线；

2. 体验增强版：解决真实使用暴露的问题——

  • Markdown 渲染（代码高亮、表格、公式）——模型输出的主要形态；
  • 中断与重新生成：用户看到答案跑偏能立刻停止——止损按钮是成本控制也是体验刚需（继续生成=白烧钱）；
  • 工具调用的过程可视化（"正在搜索…"、"正在生成 PDF…"）——过程透明化对冲等待焦虑，用户理解"AI 在干活"而不是"卡死了"；
  • 会话管理（历史列表、多会话切换）；

3. 工程化版：虚拟滚动（长会话性能）、错误兜底（网络断开的续传提示）、移动端适配、深色模式。

业务架构的体会：AI 前端与传统前端的最大差异是——内容是流式且不可预测的（渲染时机、内容长度、格式都不定），状态管理的核心从"页面状态"变成"流的状态机"（连接中/接收中/完成/出错/已中断）。

另一个反直觉经验：前端价值占比远超传统产品——同样的模型能力，流式体验的打磨程度直接决定留存，AI 产品一半的竞争力在前端的"体感"上，别把它当次要工序。

🏗 系统架构师 ​

前端我分三个迭代阶段讲（过程也是架构演进）：

阶段一：最小可用（快速验证）：直接用现成 Chat UI 组件/模板搭对话页——输入框 + 消息气泡 + 流式打字机。目标是一周内跑通"提问 → SSE 流式回答"闭环，验证后端链路，不追求美观。

阶段二：功能完备（产品化）：基于 React + 组件库（AntD）重构：

  • 会话管理：会话列表（创建/切换/删除/重命名）、历史加载；
  • 流式渲染：fetch + ReadableStream 解析 SSE 分片，打字机效果 + Markdown 实时渲染（代码高亮）；
  • 智能体特性 UI：思考过程折叠展示（Agent 的 thought/observation 可视化）、工具调用卡片（搜索结果/图片/地图内嵌渲染）、回答操作（复制/重新生成/点赞反馈）；
  • 文件上传（RAG 文档管理页）、知识库管理界面。

阶段三：体验优化：

  • 多聊天室与多智能体切换、状态管理规范化（Pinia/Redux，会话状态与服务端同步）；
  • 移动端适配、暗色模式、首屏加载优化（懒加载/分包）；
  • 错误与重连处理（SSE 断线自动重连、生成中断恢复）。

工程要点：API 层统一封装（SSE 与普通请求）；环境变量管理多环境地址；组件层面消息渲染是核心复杂点（Markdown+流式+特殊块），值得单独抽象组件。

架构心得：AI 前端与普通前端的最大差异是**"流"与"异步状态机"**——消息有"生成中/完成/失败/已中断"状态，整个 UI 围绕状态机设计，这是与 CRUD 页面本质不同的心智模型。

💻 全栈开发专家 ​

经历三版迭代（这个演进过程本身就是答案）：

v1 验证期：直接用现成模板（OpenAI 风格 chat UI）调通后端——先让整条链路（登录→对话→流式输出）跑起来，不纠结样式。

v2 自研（React + TypeScript + Vite）：核心是 AI 应用的前端特有需求：

text
组件拆分：
 ├─ 会话侧边栏（会话列表/新建/切换/删除）
 ├─ 消息流（列表 + 自动滚底 + "加载更多"历史）
 │   ├─ Markdown 渲染（react-markdown + 代码高亮 highlight.js）
 │   └─ 工具调用卡片（搜索/图片/PDF 结果的富展示）
 ├─ 输入区（多行编辑 + 停止生成按钮）
 └─ 状态管理（Zustand：会话/消息/流式缓冲）

过程中最花时间的两块：

  1. 流式打字机效果：fetch 读取 SSE chunk → 逐字追加 → Markdown 增量渲染的性能（长回答每帧全量重渲会卡，做分段 memo + requestAnimationFrame 节流）；
  2. 流式中断与续传：停止按钮 abort fetch（后端要感知断开停止计费）、切换会话时流式缓冲的状态隔离。

v3 打磨：移动端适配、暗色模式、错误兜底（网络中断提示重试）、Token 用量展示。

给后端同学的忠告：前后端接口先写Mock 数据联调（定义好 SSE 事件协议：delta/done/error/tool），后端没就绪也不阻塞前端——这是我们前后端并行的关键。