当前位置：首页 > news >正文

《60天AI学习计划启动 | Day 30: 前端 + AI 组件化封装能力盘点》

news 2026/6/11 6:25:40

Day 30：前端 + AI 组件化封装 & 能力盘点

学习目标

把这 30 天的能力抽象成一套前端可复用“AI 基础设施”
梳理前端侧需要沉淀的 hook/组件/工具函数
形成一份「以后接任何 AI 能力，前端这几块直接复用」的清单

核心知识点

1. 前端 AI 能力抽象层
- 通用模型：
  - Message 模型：{ id, role, content, createdAt, status, meta }
  - ChatState：messages, loading, error, currentTool, sessionId
- 能力层（不依赖具体后端实现）：
  - useChat / useStreamingChat hook
  - 统一的 sendMessage / abort / retry 接口
  - 统一错误结构：{ type: 'network' | 'timeout' | 'server' | 'biz', message }
2. UI 组件抽象
- 基础组件：
  - ChatWindow（消息列表 + 输入框）
  - MessageBubble（支持 Markdown / 代码块 / 引用）
  - LoadingBubble（打字中 / 正在思考）
  - HistoryList（会话列表）
- 设计注意：
  - 完全不关心“AI 用的是哪家服务 / 哪种 RAG / 哪种 Agent”，只消费统一的 hook 数据
  - 主题/布局通过 props 或 CSS variables 配置，方便在不同项目复用

3. 与 AI 后端的接口契约

前端只关心：
- 是否流式（EventSource / fetch + reader）
- 请求/响应格式（统一成自己的 DTO）

推荐契约（示意）：

// 请求
{ "sessionId": "...", "messages": [...], "meta": { "locale": "zh-CN" } }// 流式片段
{ "type": "delta", "content": "..." }
{ "type": "final", "content": "...", "usage": {...} }
{ "type": "error", "message": "..." }

4. 前端 + AI 的“工程化 checklist”
- 必做：
  - 请求超时 & 重试策略
  - 统一错误提示组件
  - 简单日志（前端打点 + 埋点事件），便于后面分析“哪些问题问得多 / 哪些回答不满意”
- 可选但推荐：
  - 本地缓存最近一两次会话（localStorage / IndexedDB）
  - 简单的 prompt 模板管理（例如快捷插入「帮我总结一下：{{text}}」）

实战作业（建议）

作业 1：设计一个通用的 useChat API（只写 TS 接口即可）

示例：

interface UseChatOptions {api: (payload: ChatPayload) => Promise<ChatResponse> | AsyncIterable<ChatChunk>initialMessages?: Message[]
}function useChat(opts: UseChatOptions) {return {messages,loading,error,sendMessage,abort,retryLast}
}

不要带任何“项目名/业务名”，保持通用

作业 2：列出你要沉淀的前端 AI 基础模块清单
- 按功能分组，例如：
  - hooks/：useChat, useStreaming, useHistory
  - components/：ChatWindow, MessageList, MarkdownRenderer
  - utils/：eventSourceClient, streamReader, errorNormalize
作业 3：写一段“30 天总结 + 下一个 30 天计划”（偏前端视角）
- 内容建议包含：
  - 现在已经能自己从 0 搭一套：前端聊天界面 + 简单 RAG + Function Calling 的应用
  - 接下来 30 天要在前端侧补的：性能优化（虚拟列表）、状态管理（Redux/Pinia）、跨端（H5/小程序）等