File size: 23,047 Bytes
ad74240
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
# 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 模板(待废弃)
```