第一章：项目概览与架构
01 — 项目概览与架构一句话描述dodo-agent 前端 是一个多 Agent AI 对话 Web 界面（类似 ChatGPT），用户可以选择 5 种 AI 助手（对话 / 文件问答 / PPT生成 / 深度研究 / 技能），进行流式多轮对话、上传文件、查看思考过程。支持 6 套主题切换和完整移动端适配。 技术栈 技术 版本 用途 为什么选它 React 18.3 UI 框架 组件化、生态丰富 TypeScript 5.5 类型系统 减少运行时错误 Vite 5.4 构建工具 极快的热更新 Zustand 4.5 状态管理 比 Redux 轻量得多 Immer 10.2 不可变数据中间件 让 Zustand 支持直接赋值语法 CSS Modules - 样式方案 天然避免样式冲突 Lucide React 0.460 图标 轻量、纯净 SVG react-markdown 9.0 Markdown 渲染 显示 AI 富文本回复 rehype-sanitize 6.0 HTML 安全过滤 防 X...
第二章：HTML 基础回顾
02 — HTML 基础回顾 你说你有 HTML 基础。本章不重复教 HTML，而是把项目里用到的、可能你没接触过的语法挑出来讲。大约 5-10 分钟读完。 1. 入口 HTML：项目里的 index.html文件：agent/dodo-agent-frontend/index.html 123456789101112131415161718<!doctype html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>豆豆 · 智能助理</title> <meta name="theme-color" content="#0c0b09&quo...
第三章：CSS 基础回顾
03 — CSS 基础回顾 你说你有 CSS 基础。本章不重复教 CSS，而是把项目里用到的、可能你没接触过的语法挑出来讲。大约 10 分钟读完。 1. CSS 变量（自定义属性）— 项目核心这是最重要的概念，项目所有颜色/间距/字体都用 CSS 变量统一管理。 1.1 定义与使用1234567/* src/styles/tokens.css */:root { --color-primary: #e8a548; /* 定义变量 */ --bg-surface: #141311; --space-4: 16px; --radius-md: 10px;} 123456/* 任何文件里都能用 */.button { background: var(--color-primary); padding: var(--space-4); border-radius: var(--radius-md);} 1.2 为什么要用变量？12345678910/* ❌ 不用变量：改主色要改 100 个地方...
第四章：JavaScript 基础回顾
04 — JavaScript 基础回顾 你说你有 JavaScript 基础。本章不重复教基础语法，而是把项目里频繁用到的、可能你不熟的现代 JS 语法挑出来讲。这一章对读懂 React 代码非常关键。 1. 解构赋值（Destructuring） — 项目里到处都用1.1 对象解构1234567// 你可能熟悉的写法：const props = someObject;const name = props.name;const age = props.age;// 解构写法（等价但更简洁）：const { name, age } = someObject; 项目里到处都这么用： 12345// ChatItem.tsxexport function ChatItem({ chat, active, onSelect, onDelete }: Props) {// ↑ 解构 Props，props.chat → chat return <div onClick={() =&...
第十二章：上下文压缩
12 - 上下文压缩一、定位context/ 包提供了长对话自动压缩机制，避免多轮 ReAct 循环导致上下文超出 LLM 限制。 二、双层压缩策略12345678910111213┌───────────────────────────────────────────────┐│ compact(messages) ││ ↓ ││ Layer 1: micro_compact (每轮自动执行) ││ - 替换旧 ToolResponse 为占位符 ││ - 截断长 ToolCall 参数 ││ ↓ ││ TokenEstimator.estimateTokens(messages) ││ ↓ > policy.tokenTh...
第七章：React 是什么与 JSX
07 — React 是什么与 JSX 这一章是整个 React 学习的核心。我会从问题出发讲：为什么要用 React → JSX 是什么 → 第一个组件。 1. 没有 React 时，你是怎么写网页的？假设要做一个简单的「聊天输入框」。 1.1 纯 HTML + JavaScript123456789101112131415<!-- index.html --><div id="app"></div><button id="btn">点击我</button><p id="count">0</p><script> let count = 0; const btn = document.getElementById('btn'); const countEl = document.getElementById('count'); btn.addEventListener(&#x...
第八章：组件与 Props
08 — 组件与 Props 这一章讲 React 中最重要的两个概念之一：组件（另一个是 State）。学完这章你就能读懂项目里 60% 的代码。 1. 组件是什么？1.1 一句话组件 = 一个返回 JSX 的函数。 1234// 这就是一个组件function Hello() { return <h1>你好</h1>;} 1.2 用组件就像用 HTML 标签123456789function App() { return ( <div> <Hello /> {/* 使用组件：HTML 风格 */} <Hello /> {/* 可以用多次 */} <Hello /> </div> );} 1.3 项目里所有「组件」长什么样123456789// 命名导出（import 时用 { Sidebar }）exp...
第五章：TypeScript 快速入门
05 — TypeScript 快速入门 30 分钟掌握 React 项目中用到的 TypeScript 语法。TypeScript = JavaScript + 类型系统。代码本身还是 JS，只是多了「类型标注」。 1. TypeScript 是什么？1234567891011// JavaScript（运行时才检查错误）function add(a, b) { return a + b;}add("5", 3) // "53"（字符串拼接，不会报错，但结果不是你想要的）// TypeScript（写代码时就报错）function add(a: number, b: number): number { return a + b;}add("5", 3) // ❌ 报错：Argument of type 'string' is not assignable to parameter of type 'number' ...
第六章：前端工具链 npm 与 Vite
06 — 前端工具链：npm 与 Vite 5 分钟理解 npm、node_modules、Vite、import 怎么解析、构建做了什么。这一章不算重要，但读源码时会遇到这些概念，不懂会卡住。 1. Node.js 与 npm 是什么？1.1 Node.jsNode.js = 让 JavaScript 能在电脑本地（不只是浏览器）运行的环境。 有了 Node.js，开发者可以用 JS： 跑本地脚本（构建工具、测试等） 起本地服务器 操作文件 下载安装：https://nodejs.org （装 LTS 版本即可）。 12node -v # 查看 Node 版本npm -v # 查看 npm 版本 1.2 npm（Node Package Manager）npm = Node 包管理器，类似于 Java 的 Maven、Python 的 pip。 每个 React 项目都有一个 package.json 文件，记录： 项目依赖的第三方库 可运行的脚本命令 项目里的 package.json（节选）： 1234567891011121...
第九章：State 与 useState
09 — State 与 useState 这一章讲 React 另一半核心：State — 组件内部会变化的数据。学完这章你就理解了 React 自动更新 UI 的机制。 1. 问题引入：为什么需要 State？1.1 普通变量不行吗？12345678910function Counter() { let count = 0; // 普通变量 return ( <div> <p>{count}</p> <button onClick={() => count++}>+1</button> </div> );} 问题：点按钮，count 确实变了，但页面不更新。 原因：React 不知道你改了 count，所以不会重新渲染。 1.2 解决方案：useState12345678910111213import { useState } from 're...
