# TeachAgent 新前端迁移开发清单

> 本文档记录从旧版 Flask 模板前端迁移到新版 React 前端的完整开发任务。
> 更新日期：2026-04-13

---

## 一、项目架构概览

| 层级 | 技术栈 | 端口 |
|------|--------|------|
| 新前端 | React 19 + Vite + Ant Design + TailwindCSS + Redux | 3000 |
| 旧前端 | Flask Jinja2 + Bootstrap 5 + 原生JS | 7860（与后端同源） |
| 后端 API | Flask + Blueprint | 7860 |
| 数据库 | Elasticsearch 9.3.3 (向量+文档) + SQLite (用户) | 9200 |
| AI 服务 | SiliconFlow (Embedding/Rerank) + DeepSeek (Chat) | 外部API |

---

## 二、迁移状态总览

### 已完成模块

| 模块 | 新前端文件 | 状态 | 备注 |
|------|-----------|------|------|
| 登录 | `LoginPage.jsx` | ✅ 完成 | 邮箱/手机/密码三种方式 |
| 注册 | `RegisterPage.jsx` | ✅ 完成 | 用户名+密码 |
| 路由保护 | `ProtectedRoute.jsx` | ✅ 完成 | JWT + 角色校验 |
| 教师 Dashboard | `teacher/Dashboard.jsx` | ✅ 完成 | 统计卡片、快速入门 |
| Agent 列表 | `teacher/AgentList.jsx` | ✅ 完成 | CRUD、分发链接、详情查看 |
| Agent 创建 | `teacher/CreateAgent.jsx` | ✅ 完成 | 4步向导、AI工作流生成 |
| 工作流编辑器 | `components/common/WorkflowEditor.jsx` | ✅ 完成 | React Flow 可视化 |
| 知识库管理 | `teacher/KnowledgeBase.jsx` | ⚠️ 基本完成 | 缺批量上传、拖拽 |
| 学生管理 | `teacher/StudentManagement.jsx` | ✅ 完成 | CRUD、密码重置、进度 |
| 学生门户 | `student/StudentPortal.jsx` | ✅ 完成 | Agent列表、Token验证、活动记录 |
| Agent 对话 | `student/AgentChat.jsx` | ⚠️ 部分完成 | 流式对话可用，插件系统缺失 |
| 打字机 Hook | `hooks/useTypewriter.js` | ✅ 已实现 | 未接入使用 |

### 未实现模块

| 模块 | 旧版位置 | 优先级 |
|------|----------|--------|
| 代码执行插件（对话内嵌） | `student.html` 侧面板 | P0 |
| 3D 可视化插件（对话内嵌） | `student.html` 侧面板 | P1 |
| 思维导图插件（对话内嵌） | `student.html` 侧面板 | P1 |
| 独立代码执行页 | `code_execution.html` | P1 |
| Token 直接访问入口（登录页） | `login.html` | P2 |

---

## 三、关键 BUG 与问题

### 3.1 流式输出 SSE 实现问题（P0）

**当前实现**: `AgentChat.jsx` 使用 `fetch` + `ReadableStream reader` 手动解析 SSE

**后端发送格式**:
```
data: {"type": "start", "plugins": [...], "references": [...]}
data: {"type": "content", "content": "文本片段"}
data: {"type": "metadata", "content": {...}}
data: {"type": "done"}
```

**问题清单**:

| # | 问题 | 严重度 | 说明 |
|---|------|--------|------|
| 1 | `metadata` 事件未处理 | 中 | 前端只处理 start/content/done，metadata 被忽略 |
| 2 | 无 `error` 事件类型 | 高 | 后端出错时直接断流，前端会一直卡在"思考中" |
| 3 | `[DONE]` 哨兵检测无效 | 低 | 前端检查 `[DONE]` 但后端从不发送此标记 |
| 4 | 流结束时 buffer 未清空 | 中 | 如果流在 `\n\n` 结尾，最后一个事件可能丢失 |
| 5 | 断流时无 JSON 恢复 | 中 | 连接中断时 partial JSON 直接丢失 |
| 6 | 无超时/重连机制 | 中 | 网络波动时前端无法恢复 |

**建议重构方向**:
- 后端增加 `type: "error"` 事件
- 前端增加 metadata 事件处理
- 添加流超时检测（如 30s 无数据则提示）
- 清理无用的 `[DONE]` 检查

### 3.2 API 路径不一致（P0）

| 前端调用 | 后端实际路径 | 问题 |
|----------|-------------|------|
| `axios.post('/api/verify_token')` (AgentChat.jsx:84) | `/api/verify_token` | axios baseURL 是 `/api`，实际请求变成 `/api/api/verify_token`（双重前缀）|
| `getProgress(taskId)` → `/knowledge/progress/${taskId}` | `/api/progress/${taskId}`（在 app.py 主路由） | 路径不在 knowledge blueprint 下 |
| `getDistributions(agentId)` → `/agent/${agentId}/distributions` | 后端未实现此端点 | 404 |
| `authService.refreshToken()` → `/auth/refresh` | 后端未实现 | 404 |
| `authService.getCurrentUser()` → `/auth/me` | 后端未实现 | 404 |
| `authService.changePassword()` → `/auth/change_password` | 后端未实现 | 404 |

### 3.3 其他前端问题

| # | 问题 | 位置 | 说明 |
|---|------|------|------|
| 1 | Agent 编辑路由缺失 | `CreateAgent.jsx` | 编辑模式通过 localStorage 传参，无独立路由 |
| 2 | 知识库进度轮询路径错误 | `knowledgeService.js` | 应直接调 `/api/progress/` 而非通过 knowledge 前缀 |
| 3 | 学生 Dashboard 是空壳 | `StudentDashboard.jsx` | 只是路由容器，无独立内容 |

---

## 四、完整 API 端点对照表

### 4.1 认证模块 `/api/auth/*`

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/auth/login` | POST | ✅ 旧版密码登录 | ❌ 未使用 | 可废弃 |
| `/api/auth/login-password` | POST | ✅ | ✅ | 正常 |
| `/api/auth/login-email` | POST | ✅ | ✅ | 正常 |
| `/api/auth/login-phone` | POST | ✅ | ✅ | 正常 |
| `/api/auth/send-email-code` | POST | ✅ | ✅ | 正常（邮件服务不可用） |
| `/api/auth/send-phone-code` | POST | ✅ | ✅ | 正常（开发模式模拟） |
| `/api/auth/register` | POST | ✅ | ✅ | 正常 |
| `/api/auth/verify` | GET | ✅ | ❌ 未使用 | - |
| `/api/auth/logout` | POST | ✅ | ✅ | 正常 |
| `/api/auth/refresh` | POST | ❌ 未实现 | ✅ 有调用 | **需实现** |
| `/api/auth/me` | GET | ❌ 未实现 | ✅ 有调用 | **需实现** |
| `/api/auth/change_password` | POST | ❌ 未实现 | ✅ 有调用 | **需实现** |
| `/api/auth/check` | GET | ✅ session检查 | ❌ 未使用 | 旧版遗留 |

### 4.2 知识库模块 `/api/knowledge/*`

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/knowledge/` | GET | ✅ | ✅ | 正常 |
| `/api/knowledge/` | POST | ✅ 文件上传创建 | ✅ | 正常 |
| `/api/knowledge/<id>` | DELETE | ✅ | ✅ | 正常 |
| `/api/knowledge/<id>/documents` | GET | ✅ | ✅ | 正常 |
| `/api/knowledge/<id>/documents` | POST | ✅ | ✅ | 正常 |
| `/api/knowledge/<id>/documents/<file>` | DELETE | ✅ | ✅ | 正常 |
| `/api/progress/<task_id>` | GET | ✅（app.py主路由） | ⚠️ 路径可能错 | **需核实** |

### 4.3 Agent 模块 `/api/agent/*`

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/agent/create` | POST | ✅ | ✅ | 正常 |
| `/api/agent/list` | GET | ✅ | ✅ | 正常 |
| `/api/agent/<id>` | GET | ✅ | ✅ | 正常 |
| `/api/agent/<id>` | PUT | ✅ | ✅ | 正常 |
| `/api/agent/<id>` | DELETE | ✅ | ✅ | 正常 |
| `/api/agent/<id>/distribute` | POST | ✅ | ✅ | 正常 |
| `/api/agent/<id>/distributions` | GET | ❌ 未实现 | ✅ 有调用 | **需实现** |
| `/api/agent/ai-assist` | POST | ✅ | ✅ | 正常 |

### 4.4 代码执行模块 `/api/code/*`

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/code/execute` | POST | ✅ | ❌ 未接入 | **需前端实现** |
| `/api/code/input` | POST | ✅ | ❌ 未接入 | **需前端实现** |
| `/api/code/stop` | POST | ✅ | ❌ 未接入 | **需前端实现** |
| `/api/code/generate` | POST | ✅ | ❌ 未接入 | **需前端实现** |

### 4.5 可视化模块 `/api/visualization/*`

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/visualization/mindmap` | POST | ✅ | ❌ 未接入 | **需前端实现** |
| `/api/visualization/3d-surface` | POST | ✅ | ❌ 未接入 | **需前端实现** |

### 4.6 学生模块

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/student/agents` | GET | ✅ | ✅ | 正常 |
| `/api/student/activities` | GET | ✅ | ✅ | 正常 |
| `/api/student/chat/<id>` | POST (SSE) | ✅ | ✅ | ⚠️ 有解析问题 |
| `/api/verify_token` | POST | ✅ (app.py) | ⚠️ 路径双重前缀 | **需修复** |

### 4.7 学生管理模块 `/api/teacher/students/*`

| 端点 | 方法 | 后端 | 前端调用 | 状态 |
|------|------|------|---------|------|
| `/api/teacher/students` | GET | ✅ | ✅ | 正常 |
| `/api/teacher/students` | POST | ✅ | ✅ | 正常 |
| `/api/teacher/students/<id>` | PUT | ✅ | ✅ | 正常 |
| `/api/teacher/students/<id>` | DELETE | ✅ | ✅ | 正常 |
| `/api/teacher/students/<id>/reset-password` | POST | ✅ | ✅ | 正常 |
| `/api/teacher/students/<id>/progress` | GET | ✅ | ✅ | 正常 |

---

## 五、分阶段开发计划

### 第一阶段：基础修复（让现有功能跑通）

- [ ] **修复 API 路径双重前缀问题**
  - `AgentChat.jsx` 中 `axios.post('/api/verify_token')` 改为用 api 实例或去掉 `/api` 前缀
  - 排查所有直接使用 `axios` 而非 `api` 实例的调用

- [ ] **修复知识库进度轮询路径**
  - `knowledgeService.js` 中 `getProgress()` 路径对齐后端 `/api/progress/<task_id>`

- [ ] **修复 SSE 流式输出**
  - 前端增加 `metadata` 事件处理（至少不报错）
  - 后端增加 `type: "error"` 事件，出错时通知前端
  - 移除前端无用的 `[DONE]` 检查
  - 添加流超时检测（30s 无数据提示用户）
  - 修复流结束时 buffer 未清空问题

- [ ] **实现缺失的后端端点**
  - `GET /api/agent/<id>/distributions` — 获取 Agent 的分发链接列表
  - `GET /api/auth/me` — 返回当前登录用户信息
  - `POST /api/auth/refresh` — JWT token 刷新（或前端去掉此调用）
  - `POST /api/auth/change_password` — 修改密码（或前端暂时隐藏入口）

### 第二阶段：插件系统迁移（核心差异）

- [ ] **AgentChat 插件框架设计**
  - 在对话界面右侧增加可展开的插件面板（Ant Design Drawer 或自定义侧栏）
  - 根据后端 SSE `start` 事件返回的 `plugins` 字段决定显示哪些插件 Tab
  - 插件自动激活：后端检测到关键词后在 `start` 事件中标记 `suggested_plugins`
  - 插件面板状态：折叠/展开/全屏
  - 布局：左侧对话区 + 右侧插件面板，移动端改为底部抽屉

- [ ] **代码执行插件**
  - 使用 CodeMirror 6 (`@uiw/react-codemirror` + `@codemirror/lang-python`)
  - 上半区：代码编辑器（Python语法高亮、行号）
  - 下半区：终端输出面板（深色背景、绿色提示符、支持 ANSI 颜色）
  - 交互式输入：检测到 `input()` 时显示输入框
  - 控制按钮：运行 / 停止 / 清除
  - 对接 API：
    - `POST /api/code/execute` → 发送代码，轮询输出
    - `POST /api/code/input` → 发送用户输入
    - `POST /api/code/stop` → 终止执行
  - AI 回复中的代码块可一键复制到编辑器
  - AI 代码生成按钮 → `POST /api/code/generate`

- [ ] **3D 可视化插件**（保持旧版 Plotly iframe 方案）
  - 从 AI 回复中提取 Python 代码（包含 `create_3d_plot` 函数）
  - `POST /api/visualization/3d-surface` 发送代码
  - 返回 `html_url` 后在插件面板中用 `<iframe>` 加载
  - 支持全屏查看（Ant Design Modal 全屏模式）
  - 加载中显示 Spin 组件
  - Plotly 原生交互：旋转、缩放、平移、悬浮提示、导出

- [ ] **思维导图插件**（markmap 前端渲染，替代旧版 PlantUML）
  - 安装 `markmap-lib` + `markmap-view`
  - 从 AI 回复中提取 Markdown 层级结构
  - 使用 `Transformer.transform()` 解析为树结构
  - 使用 `Markmap.create()` 渲染到 SVG 容器
  - 交互支持：缩放、平移、节点展开/折叠
  - 支持全屏查看和导出为 SVG/PNG
  - 后端修改：让 LLM prompt 输出 Markdown 标题格式而非 PlantUML 语法

### 第三阶段：独立功能页面

- [ ] **独立代码执行页 `/code`**
  - 完整的 Python IDE 界面（编辑器 + 终端）
  - 语法高亮、行号、Tab 缩进
  - 运行/停止/清除控制按钮
  - 从旧版 `code_execution.html` 迁移逻辑

- [ ] **Token 直接访问入口**
  - 登录页增加"使用 Token 直接访问"选项
  - 输入 Token → 验证 → 跳转到对应 Agent 对话页

### 第四阶段：体验优化

- [ ] **打字机效果**
  - 将 `useTypewriter.js` hook 接入 AgentChat 的流式渲染
  - 支持暂停/继续/加速控制
  - 或直接在流式输出时模拟打字效果（当前逐 chunk 渲染已有类似效果，评估是否需要）

- [ ] **知识库批量上传**
  - 支持多文件选择和拖拽上传
  - 批量进度追踪

- [ ] **Agent 编辑流程优化**
  - 为编辑模式添加独立路由 `/teacher/agent/edit/:id`
  - 替换 localStorage 传参方式为 URL 参数 + API 获取

- [ ] **学生 Dashboard 充实内容**
  - 学习统计、最近活动、推荐 Agent 等

- [ ] **LaTeX 公式渲染**
  - 旧版使用 KaTeX，新版 AgentChat 的 Markdown 渲染中需集成
  - 支持行内公式 `$...$` 和块级公式 `$$...$$`

- [ ] **消息中的引用源展示优化**
  - 旧版有可折叠的引用卡片，显示文件名+摘要
  - 新版已有基础实现，但样式和交互可优化

### 第五阶段：后端优化

- [ ] **统一认证机制**
  - 旧版 app.py 中的硬编码用户和 session 装饰器与新版 JWT 并存，需要统一
  - 决策：全部迁移到 JWT，废弃 session 方式
  - 更新 `@login_required`、`@teacher_required`、`@student_required` 装饰器为 JWT 验证

- [ ] **密码哈希升级**
  - 当前使用 SHA256 直接哈希，建议升级为 bcrypt 或 argon2
  - 需要兼容迁移方案（登录时自动升级哈希）

- [ ] **插件检测逻辑优化**
  - 当前基于消息关键词匹配（如包含"代码"就触发代码插件），过于粗糙
  - 考虑让 LLM 在回复中标记是否需要插件，或使用更精确的意图识别

---

## 六、旧版功能对照清单

### 教师端功能

| 功能 | 旧版 | 新版 | 差距 |
|------|------|------|------|
| 统计面板 | 知识库数/Agent数/分发数 | ✅ 相同 | - |
| 知识库创建 | 多文件上传+进度条 | ⚠️ 单文件 | 缺批量 |
| 知识库文件管理 | 添加/删除文件 | ✅ | - |
| Agent 创建 | 基本信息+插件+知识库+工作流 | ✅ 4步向导 | - |
| Agent 工作流 | jsPlumb 可视化 | ✅ React Flow | 升级 |
| Agent 管理 | 列表+详情+编辑+删除 | ✅ | 编辑入口可优化 |
| 分发链接 | 创建+复制+过期设置 | ✅ | - |
| 学生管理 | CRUD+密码重置+进度 | ✅ | - |

### 学生端功能

| 功能 | 旧版 | 新版 | 差距 |
|------|------|------|------|
| 学生门户 | Agent列表+Token验证+活动记录 | ✅ | - |
| Agent 对话 | SSE流式+Markdown+代码高亮 | ✅ 基本可用 | SSE有bug |
| 打字机效果 | 暂停/加速控制 | ❌ Hook已写未接入 | 需接入 |
| LaTeX 公式 | KaTeX 渲染 | ❌ | 需集成 |
| 代码执行插件 | 侧面板内嵌 IDE | ❌ | **核心缺失** |
| 3D 可视化插件 | Plotly 侧面板 | ❌ | **核心缺失** |
| 思维导图插件 | PlantUML 侧面板 | ❌ | **核心缺失** |
| 引用源展示 | 可折叠卡片 | ⚠️ 基础实现 | 可优化 |
| 独立代码页 | 完整Python IDE | ❌ | 需新建页面 |

---

## 七、技术选型

### 7.1 思维导图：markmap（推荐）

**废弃旧方案**：旧版使用 PlantUML 语法 → 发送到外部 HuggingFace Space API → 返回 PNG 图片。问题：依赖外部服务、不可交互、渲染慢。

**新方案**：使用 markmap 在前端直接从 Markdown 生成交互式 SVG 思维导图。

| 对比项 | 旧方案 (PlantUML) | 新方案 (markmap) |
|--------|-------------------|------------------|
| 渲染位置 | 后端调外部API | 前端本地渲染 |
| 输出格式 | 静态 PNG | 交互式 SVG |
| 交互能力 | 无 | 缩放/平移/展开折叠 |
| 外部依赖 | HuggingFace Space | 无 |
| 延迟 | 3-10秒 | 毫秒级 |
| 输入格式 | PlantUML 专有语法 | Markdown 标题层级 |

**安装**：
```bash
npm install markmap-lib markmap-view d3@7
```

**核心用法**：
```jsx
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

// Markdown → 思维导图数据
const transformer = new Transformer();
const { root } = transformer.transform(markdownText);

// 渲染到 SVG 元素
Markmap.create(svgElement, null, root);
```

**后端改动**：
- 让 LLM 在回复中直接输出 Markdown 层级结构（而非 PlantUML 语法）
- 或者保留后端端点，改为返回 Markdown 文本而非图片 URL
- 前端从 AI 回复中提取 Markdown 标题结构，直接渲染

**备选库对比**：

| 库 | Stars | 特点 | 适合场景 |
|-----|-------|------|---------|
| markmap | 9k+ | Markdown原生、SVG交互、轻量 | ✅ 本项目（AI输出Markdown） |
| simple-mind-map | 11k+ | 功能最全、主题丰富、插件多 | 需要完整思维导图编辑器 |
| mind-elixir | 3k | 零依赖、有React组件 | 需要拖拽编辑节点 |
| React Flow | 24k+ | 项目已在用、高度可定制 | 已用于工作流，可复用 |

选择 markmap 的理由：
1. AI 天然输出 Markdown，无需格式转换
2. 纯前端渲染，不依赖外部服务
3. 交互体验远超静态图片
4. 包体积小，集成简单

---

### 7.2 3D 可视化：保持 Plotly iframe 方案

旧版方案已经很成熟，保持不变：

```
前端提取代码 → POST /api/visualization/3d-surface → 后端沙箱执行 Python
→ 生成 Plotly HTML（内嵌 plotly.js） → 返回 HTML 文件 URL → 前端 iframe 加载
```

**交互能力**（Plotly 原生支持）：
- 3D 旋转（鼠标拖拽）
- 缩放（滚轮）
- 平移（Shift+拖拽）
- 悬浮提示（坐标值）
- 图例切换
- 导出 PNG
- 双击重置视角

**React 迁移要点**：
- 不需要安装 `react-plotly.js`（图表在 iframe 中独立运行）
- 只需在 AgentChat 插件面板中嵌入 `<iframe src={htmlUrl} />`
- 添加全屏按钮和关闭按钮

**后端数据流**：
```
输入: { code: "def create_3d_plot():\n  return {'x':[], 'y':[], 'z':[], 'type':'surface'}" }
输出: { success: true, html_url: "/static/3d_plot_1713012345.html" }
```

---

### 7.3 代码编辑器：CodeMirror 6（推荐）

| 对比项 | Monaco Editor | CodeMirror 6 |
|--------|--------------|--------------|
| 包体积 | ~2.5MB (gzip) | ~150KB (gzip) |
| 加载速度 | 较慢 | 快 |
| 移动端 | 差 | 好 |
| Python 支持 | 完整 | 完整 |
| React 集成 | @monaco-editor/react | @uiw/react-codemirror |
| 适合场景 | 完整 IDE | 轻量代码片段编辑 |

选择 CodeMirror 的理由：
1. 本项目只需要 Python 代码编辑，不需要完整 IDE 功能
2. 包体积小 15 倍，对教育平台的加载速度至关重要
3. 移动端适配更好（学生可能用手机访问）

**安装**：
```bash
npm install @uiw/react-codemirror @codemirror/lang-python
```

---

### 7.4 LaTeX 公式：rehype-katex（推荐）

当前 AgentChat 已使用 `react-markdown` + `remark-gfm`，集成 KaTeX 只需加两个插件：

```bash
npm install remark-math rehype-katex katex
```

```jsx
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';

<ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
  {content}
</ReactMarkdown>
```

---

### 7.5 技术选型汇总

| 组件 | 选型 | npm 包 | 理由 |
|------|------|--------|------|
| 思维导图 | **markmap** | `markmap-lib` + `markmap-view` | Markdown原生、前端渲染、交互式 |
| 3D 可视化 | **Plotly iframe** | 无需前端安装 | 保持旧版成熟方案，后端生成HTML |
| 代码编辑器 | **CodeMirror 6** | `@uiw/react-codemirror` | 轻量、移动端友好 |
| LaTeX 公式 | **KaTeX** | `remark-math` + `rehype-katex` | 与现有 react-markdown 无缝集成 |
| 代码高亮 | **react-syntax-highlighter** | 已安装 | 项目已在用 |
| 工作流编辑 | **React Flow** | 已安装 | 项目已在用 |

---

## 八、文件结构参考

```
frontend/src/
├── App.jsx                          # 路由配置
├── index.css                        # 全局样式
├── services/
│   ├── api.js                       # axios 实例 + 拦截器
│   ├── authService.js               # 认证 API
│   ├── agentService.js              # Agent API
│   └── knowledgeService.js          # 知识库 API
├── store/
│   ├── store.js                     # Redux store
│   └── slices/
│       ├── authSlice.js             # 认证状态
│       ├── agentSlice.js            # Agent 状态
│       ├── chatSlice.js             # 对话状态
│       ├── workflowSlice.js         # 工作流状态
│       └── uiSlice.js               # UI 状态
├── pages/
│   ├── LoginPage.jsx                # 登录页
│   ├── RegisterPage.jsx             # 注册页
│   ├── teacher/
│   │   ├── TeacherDashboard.jsx     # 教师端框架
│   │   ├── Dashboard.jsx            # 概览页
│   │   ├── AgentList.jsx            # Agent 列表
│   │   ├── CreateAgent.jsx          # Agent 创建向导
│   │   ├── KnowledgeBase.jsx        # 知识库管理
│   │   └── StudentManagement.jsx    # 学生管理
│   └── student/
│       ├── StudentDashboard.jsx     # 学生端框架
│       ├── StudentPortal.jsx        # 学生门户
│       └── AgentChat.jsx            # Agent 对话
├── components/
│   └── common/
│       ├── ProtectedRoute.jsx       # 路由保护
│       └── WorkflowEditor.jsx       # 工作流编辑器
└── hooks/
    └── useTypewriter.js             # 打字机效果 hook

agent/                               # 后端
├── app.py                           # Flask 主应用 + 路由
├── config.py                        # 配置
├── auth.db                          # SQLite 用户库
├── student_management.py            # 学生管理路由
├── modules/
│   ├── auth/routes.py               # 认证路由
│   ├── knowledge_base/
│   │   ├── routes.py                # 知识库路由
│   │   ├── retriever.py             # ES 检索器
│   │   ├── reranker.py              # 重排序器
│   │   ├── generator.py             # LLM 生成器
│   │   ├── processor.py             # 文档处理器
│   │   └── vector_store.py          # ES 向量存储
│   ├── agent_builder/routes.py      # Agent 构建路由
│   ├── code_executor/routes.py      # 代码执行路由
│   └── visualization/routes.py      # 可视化路由
├── agents/                          # Agent JSON 配置存储
├── uploads/                         # 上传文件存储
└── templates/                       # 旧版 HTML 模板（待废弃）
```