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

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/小程序）等

---

思考 / 笔记要点

• 想一想：如果明天换一个新业务线（比如 BI、中台、运营平台），你这套 hook + 组件能不能直接接一个新的 AI 后端就复用？缺什么？
• 把“这 30 天做过的所有 Demo/代码片段”里，前端可通用的部分单独拎一个 ai-frontend-starter 仓库/目录出来
• 可以写一篇总结：《前端开发 30 天自学 AI 的收获：我沉淀了这些可复用能力》