Upload 139 files

.gitattributes

@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 uploads/496449c167344601ba87c24743701b99.pdf filter=lfs diff=lfs merge=lfs -text
 uploads/eb55dde866f64be4a1fdbc81d3d1df0e.pdf filter=lfs diff=lfs merge=lfs -text
+uploads/1a9b23e3e2d34305b0acdbd3693d276d.pdf filter=lfs diff=lfs merge=lfs -text
+uploads/1c64cc79a5694889ba38c29bd630746d.pdf filter=lfs diff=lfs merge=lfs -text

DEVELOPMENT_CHECKLIST.md

@@ -0,0 +1,539 @@
+# 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 模板（待废弃）
+```

Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# 安装系统依赖
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# 安装 Python 依赖
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制应用代码
+COPY . .
+
+# 确保目录存在
+RUN mkdir -p static uploads agents
+
+EXPOSE 7860
+
+# 使用 gunicorn 运行，支持 SSE 流式输出
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--threads", "4", "--timeout", "120", "app:app"]

README-local.md

@@ -0,0 +1,176 @@
+# TeachAgent - 智能教育助手平台
+
+AI 驱动的个性化学习平台，支持教师创建 AI Agent、管理知识库，学生通过对话式交互进行学习。
+
+## 功能特性
+
+- **教师端**：创建/管理 AI Agent、知识库管理、学生管理、分发链接、工作流编辑
+- **学生端**：与 AI Agent 对话、代码执行、3D 可视化、思维导图
+- **RAG 系统**：基于 Elasticsearch 的向量检索 + 重排序
+- **流式对话**：SSE 实时流式输出
+- **插件系统**：代码执行（CodeMirror）、3D 可视化（Plotly）、思维导图（markmap）
+
+## 项目结构
+
+```
+teachagent/
+├── ELASTIC/                   # Elasticsearch 容器（独立部署）
+│   └── Dockerfile
+├── teachagent-app/            # 主应用
+│   ├── app.py                 # Flask 入口
+│   ├── config.py              # 配置
+│   ├── requirements.txt       # Python 依赖
+│   ├── Dockerfile             # 应用容器
+│   ├── .env                   # 环境变量
+│   ├── modules/               # 后端模块
+│   │   ├── auth/              # 认证（JWT + 密码/邮箱/手机登录）
+│   │   ├── agent_builder/     # Agent 构建
+│   │   ├── code_executor/     # Python 代码执行
+│   │   ├── knowledge_base/    # RAG 知识库（检索/重排/生成）
+│   │   └── visualization/     # 3D 可视化 + 思维导图
+│   ├── frontend/              # React 源码（开发用）
+│   │   ├── src/
+│   │   ├── package.json
+│   │   └── vite.config.js
+│   ├── static/dist/           # React 构建产物（生产环境前端）
+│   ├── agents/                # Agent JSON 配置存储
+│   ├── uploads/               # 用户上传文件
+│   └── _archive/              # 旧版 Flask 模板归档
+└── docker-compose.yml         # 两容器编排
+```
+
+## 部署方式
+
+### 方式一：本地开发
+
+适合开发调试，前后端分离运行。
+
+```bash
+# 1. 启动 Elasticsearch（Docker 或本地安装）
+docker run -d --name es -p 9200:9200 \
+  -e discovery.type=single-node \
+  -e xpack.security.enabled=false \
+  elasticsearch:9.3.3
+
+# 2. 启动 Flask 后端
+cd teachagent-app
+pip install -r requirements.txt
+FLASK_ENV=development python app.py
+# 后端运行在 http://localhost:7860
+
+# 3. 启动 React 前端（开发模式，带热更新）
+cd frontend
+npm install
+npm run dev
+# 前端运行在 http://localhost:3000，API 请求代理到 7860
+```
+
+**本地开发特点**：
+- 前端 `localhost:3000`，后端 `localhost:7860`，通过 Vite 代理转发 API
+- SSE 流式输出需要直连后端（绕过 Vite 代理）
+- `FLASK_ENV=development` 开启 debug 模式和热重载
+- 修改前端代码即时生效（HMR）
+
+### 方式二：云端容器部署（生产环境）
+
+两个容器，一个端口。
+
+```bash
+# 在项目根目录（包含 docker-compose.yml 的目录）
+docker-compose up -d
+
+# 或分别构建
+docker-compose build
+docker-compose up -d
+```
+
+**生产环境特点**：
+- 单端口 `7860`：Flask 同时托管 API 和 React 静态文件
+- 无跨域问题：前端和 API 同源
+- SSE 流式直连：不经过代理，实时输出
+- gunicorn 多 worker 运行，性能更好
+- ES 通过 Docker 网络互通（`http://elasticsearch:9200`）
+
+### 方式三：HuggingFace Spaces 部署
+
+适用于 HuggingFace Spaces 平台。
+
+1. 将 `teachagent-app/` 作为 Space 仓库
+2. ES 单独部署为另一个 Space（`ELASTIC/`）
+3. `.env` 中配置 `ELASTICSEARCH_URL=https://your-es-space.hf.space`
+
+## 环境变量说明
+
+| 变量 | 说明 | 示例 |
+|------|------|------|
+| `ELASTICSEARCH_URL` | Elasticsearch 地址 | `http://localhost:9200` 或 `https://xxx.hf.space` |
+| `API_KEY` | SiliconFlow API Key（Embedding/Rerank） | `sk-xxx` |
+| `BASE_URL` | SiliconFlow API 地址 | `https://api.siliconflow.cn/v1` |
+| `STREAM_API_KEY` | DeepSeek API Key（对话生成） | `sk-xxx` |
+| `STREAM_BASE_URL` | DeepSeek API 地址 | `https://api.deepseek.com/v1` |
+| `STREAM_MODEL` | 对话模型 | `deepseek-chat` |
+| `SECRET_KEY` | Flask Session 密钥 | 随机字符串 |
+| `JWT_SECRET` | JWT 签名密钥 | 随机字符串 |
+| `FLASK_ENV` | 运行环境 | `development` 或 `production` |
+
+## 跨域与 HTTPS
+
+### 生产环境（推荐）
+
+- **无跨域问题**：前端构建产物由 Flask 直接托管，前端和 API 同源（同一个端口 7860）
+- **HTTPS**：由反向代理（Nginx/Cloudflare/HuggingFace Spaces）统一处理 SSL 终止，Flask 本身只需 HTTP
+- **SSE 流式**：同源直连，无需代理，数据实时到达
+
+### 本地开发
+
+- **跨域**：Vite 代理 (`localhost:3000` → `localhost:7860`) 处理 API 请求，SSE 直连后端
+- **HTTPS**：本地开发无需 HTTPS，全部 HTTP
+- **注意**：HTML 中不要加 `upgrade-insecure-requests` meta 标签（已移除）
+
+### 带 HTTPS 反向代理部署
+
+如果在自有服务器上通过 Nginx 反向代理：
+
+```nginx
+server {
+    listen 443 ssl;
+    server_name your-domain.com;
+
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+
+    location / {
+        proxy_pass http://127.0.0.1:7860;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+
+        # SSE 流式输出必须的配置
+        proxy_buffering off;
+        proxy_cache off;
+        proxy_set_header Connection '';
+        chunked_transfer_encoding on;
+    }
+}
+```
+
+关键配置：`proxy_buffering off` 确保 SSE 数据不被 Nginx 缓冲。
+
+## 演示账号
+
+| 角色 | 用户名 | 密码 |
+|------|--------|------|
+| 教师 | teacher | 123456 |
+| 学生 | student1 | 123456 |
+
+也可通过注册页面创建新账号。
+
+## 技术栈
+
+| 层 | 技术 |
+|----|------|
+| 前端 | React 19 + Vite + Ant Design 5 + TailwindCSS + Redux Toolkit |
+| 后端 | Flask + gunicorn |
+| 数据库 | Elasticsearch 9.x（向量检索） + SQLite（用户管理） |
+| AI | DeepSeek（对话） + SiliconFlow（Embedding/Rerank） |
+| 部署 | Docker + docker-compose |

_archive/templates/code_execution.html

@@ -0,0 +1,718 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI代码助手 - Python执行环境</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs2015.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
+    <style>
+        /* Base styles */
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --accent-color: #4cc9f0;
+            --success-color: #4caf50;
+            --warning-color: #ff9800;
+            --danger-color: #f44336;
+            --light-color: #f8f9fa;
+            --dark-color: #212529;
+            --border-color: #dee2e6;
+            --border-radius: 0.375rem;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            background-color: #f5f7fa;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        /* Layout structure */
+        .workspace {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            flex: 1;
+            padding: 16px;
+        }
+        
+        @media (max-width: 992px) {
+            .workspace {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        .section {
+            background: #fff;
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        }
+        
+        .section-header {
+            background: #f8f9fa;
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .section-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+        
+        /* Code editor styles */
+        .editor-content {
+            flex: 1;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .code-area {
+            position: absolute;
+            left: 40px;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            padding: 12px 16px;
+            color: #333;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            overflow: auto;
+        }
+        
+        .code-area pre {
+            margin: 0;
+            padding: 0;
+            background: none;
+            border: none;
+        }
+        
+        .code-area code {
+            display: block;
+            padding: 0;
+            tab-size: 4;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            outline: none;
+            position: relative;
+            min-height: 100%;
+            white-space: pre !important;
+            word-wrap: normal !important;
+        }
+        
+        .line-numbers {
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 40px;
+            padding: 12px 0;
+            background: #f5f7fa;
+            border-right: 1px solid #e9ecef;
+            text-align: center;
+            color: #6c757d;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            user-select: none;
+        }
+        
+        /* Terminal styles */
+        .output-content {
+            flex: 1;
+            background: #f8f9fa;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .terminal-window {
+            flex: 1;
+            overflow-y: auto;
+            background: #212529;
+            color: #f8f9fa;
+        }
+        
+        #output {
+            color: #f8f9fa;
+            margin: 0;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            line-height: 1.6;
+            font-size: 14px;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+        }
+        
+        .console-input-container {
+            display: flex;
+            align-items: center;
+            background: #343a40;
+            border-top: 1px solid #495057;
+            padding: 8px 12px;
+        }
+        
+        .console-prompt {
+            color: #4caf50;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            margin-right: 8px;
+            font-size: 14px;
+            user-select: none;
+        }
+        
+        .console-input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: #f8f9fa;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            padding: 4px 0;
+        }
+        
+        .console-input:focus {
+            outline: none;
+        }
+        
+        /* Chat section */
+        .chat-section {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+        }
+        
+        .message {
+            margin-bottom: 16px;
+            padding: 12px;
+            border-radius: var(--border-radius);
+            max-width: 85%;
+            position: relative;
+        }
+        
+        .message.user {
+            background-color: #e3f2fd;
+            color: #0d47a1;
+            align-self: flex-end;
+            margin-left: auto;
+        }
+        
+        .message.bot {
+            background-color: #f5f5f5;
+            color: #333;
+            align-self: flex-start;
+            border-left: 3px solid var(--primary-color);
+        }
+        
+        .chat-input-container {
+            padding: 16px;
+            border-top: 1px solid var(--border-color);
+            background-color: #f9f9f9;
+        }
+        
+        .input-row {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .chat-input {
+            flex: 1;
+            padding: 12px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius);
+            resize: none;
+            font-size: 14px;
+            height: 100px;
+        }
+        
+        .chat-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
+        }
+        
+        /* Button styles */
+        .btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.2s ease;
+        }
+        
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+        }
+        
+        .btn-secondary {
+            background-color: #6c757d;
+            color: white;
+        }
+        
+        .btn-secondary:hover {
+            background-color: #5a6268;
+        }
+        
+        .btn-danger {
+            background-color: var(--danger-color);
+            color: white;
+        }
+        
+        .btn-danger:hover {
+            background-color: #d32f2f;
+        }
+        
+        /* Utilities */
+        .loading {
+            display: none;
+            align-items: center;
+            gap: 8px;
+            color: #6c757d;
+            font-size: 14px;
+        }
+        
+        .loading.active {
+            display: flex;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        .loading i {
+            animation: spin 1s linear infinite;
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8;
+        }
+        
+        /* Terminal text styles */
+        .term-input {
+            color: #4caf50;
+        }
+        
+        .term-output {
+            color: #f8f9fa;
+        }
+        
+        .term-error {
+            color: #f44336;
+        }
+        
+        .term-warning {
+            color: #ff9800;
+        }
+        
+        .term-system {
+            color: #2196f3;
+        }
+        
+        /* Header */
+        .header {
+            background-color: #fff;
+            border-bottom: 1px solid var(--border-color);
+            padding: 1rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+        
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .header h1 {
+            margin: 0;
+            font-size: 1.5rem;
+            color: var(--primary-color);
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-content">
+            <h1>AI代码助手</h1>
+            <div>
+                <span class="badge bg-primary">Python编程环境</span>
+            </div>
+        </div>
+    </header>
+    
+    <div class="workspace">
+        <div class="section">
+            <div class="section-header">
+                <div class="section-title">
+                    <i class="bi bi-code-square"></i>
+                    代码编辑器
+                </div>
+                <div style="display: flex; gap: 8px;">
+                    <button class="btn btn-primary" id="runCode">
+                        <i class="bi bi-play-fill"></i>
+                        运行
+                    </button>
+                    <button class="btn btn-danger" id="stopCode" style="display: none;">
+                        <i class="bi bi-stop-fill"></i>
+                        停止
+                    </button>
+                    <button class="btn btn-secondary" id="clearCode">
+                        <i class="bi bi-trash"></i>
+                        清除
+                    </button>
+                </div>
+            </div>
+            <div class="editor-content">
+                <div class="line-numbers" id="lineNumbers">1</div>
+                <div class="code-area" id="codeArea">
+                    <pre><code class="language-python" contenteditable="true" spellcheck="false" autocorrect="off" autocapitalize="off"># 您的代码将在这里显示</code></pre>
+                </div>
+            </div>
+        </div>
+        
+        <div class="section">
+            <div class="section-header">
+                <div class="section-title">
+                    <i class="bi bi-terminal"></i>
+                    终端输出
+                </div>
+                <div style="display: flex; gap: 8px;">
+                    <button class="btn btn-secondary" id="clearTerminal">
+                        <i class="bi bi-eraser"></i>
+                        清除
+                    </button>
+                </div>
+            </div>
+            <div class="output-content">
+                <div class="terminal-window">
+                    <pre id="output"></pre>
+                </div>
+                <div class="console-input-container" id="consoleInputContainer" style="display: none;">
+                    <div class="console-prompt">>></div>
+                    <input type="text" id="consoleInput" class="console-input" autocomplete="off" spellcheck="false" />
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Terminal elements
+            const terminalOutput = document.getElementById('output');
+            const consoleInputContainer = document.getElementById('consoleInputContainer');
+            const consoleInput = document.getElementById('consoleInput');
+            const clearTerminalBtn = document.getElementById('clearTerminal');
+            const stopCodeBtn = document.getElementById('stopCode');
+            
+            // Editor elements
+            const codeArea = document.querySelector('#codeArea code');
+            const lineNumbers = document.getElementById('lineNumbers');
+            const runButton = document.getElementById('runCode');
+            const clearButton = document.getElementById('clearCode');
+            
+            // State variables
+            let executionContext = null;
+            let isExecuting = false;
+            let executionStartTime = null;
+            
+            // Initialize terminal
+            initializeTerminal();
+            
+            // Initialize editor
+            updateLineNumbers();
+            
+            // Function to update line numbers
+            function updateLineNumbers() {
+                const lines = codeArea.textContent.split('\n').length;
+                lineNumbers.innerHTML = Array.from({length: lines}, (_, i) => i + 1).join('<br>');
+            }
+            
+            // Initialize terminal with welcome message
+            function initializeTerminal() {
+                clearTerminalOutput();
+                appendToTerminal("欢迎使用Python交互式终端", "term-system");
+                appendToTerminal("使用'运行'按钮执行您的代码", "term-system");
+                appendToTerminal("", "term-system"); // 空行
+                appendToTerminal(">>> 准备执行代码...", "term-system");
+            }
+            
+            // Append text to terminal
+            function appendToTerminal(text, type = null) {
+                const lines = text.split('\n');
+                let html = '';
+                
+                for (const line of lines) {
+                    if (type) {
+                        html += `<span class="${type}">${escapeHtml(line)}</span>\n`;
+                    } else {
+                        html += escapeHtml(line) + '\n';
+                    }
+                }
+                
+                terminalOutput.innerHTML += html;
+                terminalOutput.scrollTop = terminalOutput.scrollHeight;
+            }
+            
+            // Clear terminal output
+            function clearTerminalOutput() {
+                terminalOutput.innerHTML = '';
+            }
+            
+            // Escape HTML to prevent XSS
+            function escapeHtml(text) {
+                return text
+                    .replace(/&/g, "&amp;")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/"/g, "&quot;")
+                    .replace(/'/g, "&#039;");
+            }
+            
+            // Run code
+            runButton.addEventListener('click', async () => {
+                if (isExecuting) return; // Prevent multiple executions
+                
+                const code = codeArea.textContent;
+                
+                // Clear terminal and show execution start
+                clearTerminalOutput();
+                appendToTerminal("开始执行Python代码...", "term-system");
+                
+                // Update UI state
+                isExecuting = true;
+                executionStartTime = performance.now();
+                runButton.style.display = 'none';
+                stopCodeBtn.style.display = 'flex';
+                
+                try {
+                    const response = await fetch('/api/code/execute', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ code })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        // Show output (if any)
+                        if (data.output && data.output.trim()) {
+                            appendToTerminal(data.output, "term-output");
+                        }
+                        
+                        if (data.needsInput) {
+                            // Code is waiting for input
+                            executionContext = data.context_id;
+                            consoleInputContainer.style.display = 'flex';
+                            consoleInput.focus();
+                        } else {
+                            // Code has completed, no input needed
+                            appendToTerminal("程序执行完成", "term-system");
+                            finishExecution();
+                        }
+                    } else {
+                        // Handle error
+                        appendToTerminal(`错误: ${data.error}`, "term-error");
+                        if (data.traceback) {
+                            appendToTerminal(data.traceback, "term-error");
+                        }
+                        appendToTerminal("执行失败", "term-system");
+                        finishExecution();
+                    }
+                } catch (error) {
+                    appendToTerminal(`系统错误: ${error.message}`, "term-error");
+                    appendToTerminal("执行失败", "term-system");
+                    finishExecution();
+                }
+            });
+            
+            // Submit console input
+            consoleInput.addEventListener('keydown', async (e) => {
+                if (e.key === 'Enter' && executionContext) {
+                    const input = consoleInput.value;
+                    consoleInput.value = '';
+                    
+                    // Add input to terminal
+                    appendToTerminal(`>> ${input}`, "term-input");
+                    
+                    try {
+                        // Send input to backend
+                        const response = await fetch('/api/code/input', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                input: input,
+                                context_id: executionContext
+                            })
+                        });
+                        
+                        const data = await response.json();
+                        
+                        if (data.success) {
+                            // Show new output
+                            if (data.output && data.output.trim()) {
+                                appendToTerminal(data.output, "term-output");
+                            }
+                            
+                            if (data.needsInput) {
+                                // Still waiting for more input
+                                consoleInput.focus();
+                            } else {
+                                // Execution completed
+                                appendToTerminal(">>> 程序执行完成", "term-system");
+                                finishExecution();
+                            }
+                        } else {
+                            // Handle error
+                            appendToTerminal(`错误: ${data.error}`, "term-error");
+                            if (data.traceback) {
+                                appendToTerminal(data.traceback, "term-error");
+                            }
+                            finishExecution();
+                        }
+                    } catch (error) {
+                        appendToTerminal(`系统错误: ${error.message}`, "term-error");
+                        finishExecution();
+                    }
+                }
+            });
+            
+            // Stop code execution
+            stopCodeBtn.addEventListener('click', async () => {
+                if (!executionContext) return;
+                
+                try {
+                    // Send stop request to server
+                    const response = await fetch('/api/code/stop', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ context_id: executionContext })
+                    });
+                    
+                    // Clean up UI regardless of response
+                    appendToTerminal("用户终止了执行", "term-warning");
+                    finishExecution();
+                } catch (error) {
+                    console.error('停止执行时出错:', error);
+                    finishExecution();
+                }
+            });
+            
+            // Clear code
+            clearButton.addEventListener('click', () => {
+                codeArea.textContent = '# 您的代码将在这里显示';
+                updateLineNumbers();
+                clearTerminalOutput();
+                initializeTerminal();
+                consoleInputContainer.style.display = 'none';
+                executionContext = null;
+                isExecuting = false;
+                runButton.style.display = 'flex';
+                stopCodeBtn.style.display = 'none';
+            });
+            
+            // Clear terminal
+            clearTerminalBtn.addEventListener('click', () => {
+                if (!isExecuting) {
+                    clearTerminalOutput();
+                    initializeTerminal();
+                } else {
+                    // If execution is in progress, just add a separator
+                    appendToTerminal("\n--- 已清除终端 ---\n", "term-system");
+                }
+            });
+            
+            // Update line numbers on code changes
+            codeArea.addEventListener('input', updateLineNumbers);
+            
+            // Handle tab key
+            codeArea.addEventListener('keydown', (e) => {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                    document.execCommand('insertText', false, '    ');
+                }
+            });
+            
+            // Function to clean up after execution completes
+            function finishExecution() {
+                consoleInputContainer.style.display = 'none';
+                executionContext = null;
+                isExecuting = false;
+                runButton.style.display = 'flex';
+                stopCodeBtn.style.display = 'none';
+            }
+            
+            // Check if code was provided via URL parameters
+            const urlParams = new URLSearchParams(window.location.search);
+            const initialCode = urlParams.get('code');
+            if (initialCode) {
+                try {
+                    codeArea.textContent = decodeURIComponent(initialCode);
+                    updateLineNumbers();
+                } catch (e) {
+                    console.error('Failed to decode initial code:', e);
+                }
+            }
+            
+            // Check for messages from parent frame
+            window.addEventListener('message', (event) => {
+                if (event.data && event.data.type === 'setCode') {
+                    codeArea.textContent = event.data.code;
+                    updateLineNumbers();
+                }
+            });
+        });
+    </script>
+</body>
+</html>

_archive/templates/login.html

@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>教育AI助手平台 - 登录</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        :root {
+            /* 优雅的配色方案 */
+            --primary-color: #0f2d49;
+            --primary-light: #234a70;
+            --secondary-color: #4a6cfd;
+            --secondary-light: #7b91ff;
+            --tertiary-color: #f7f9fe;
+            --success-color: #10b981;
+            --success-light: rgba(16, 185, 129, 0.1);
+            --warning-color: #f59e0b;
+            --warning-light: rgba(245, 158, 11, 0.1);
+            --info-color: #0ea5e9;
+            --info-light: rgba(14, 165, 233, 0.1);
+            --danger-color: #ef4444;
+            --danger-light: rgba(239, 68, 68, 0.1);
+            --neutral-50: #f9fafb;
+            --neutral-100: #f3f4f6;
+            --neutral-200: #e5e7eb;
+            --neutral-300: #d1d5db;
+            --neutral-400: #9ca3af;
+            --neutral-500: #6b7280;
+            --neutral-600: #4b5563;
+            --neutral-700: #374151;
+            --neutral-800: #1f2937;
+            --neutral-900: #111827;
+            
+            /* 样式变量 */
+            --border-radius-sm: 0.25rem;
+            --border-radius: 0.375rem;
+            --border-radius-lg: 0.5rem;
+            --border-radius-xl: 0.75rem;
+            --border-radius-2xl: 1rem;
+            --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
+            --card-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1);
+            --card-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --transition-base: all 0.2s ease-in-out;
+            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-family: 'Inter', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
+        }
+        
+        /* 基础样式 */
+        body {
+            font-family: var(--font-family);
+            background-color: var(--neutral-50);
+            color: var(--neutral-800);
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 600;
+            color: var(--neutral-900);
+        }
+        
+        .text-gradient {
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+        }
+        
+        /* 登录容器样式 */
+        .login-container {
+            width: 100%;
+            max-width: 450px;
+            padding: 2.5rem;
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--card-shadow-lg);
+            transition: var(--transition-smooth);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .login-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            border-radius: 4px 4px 0 0;
+        }
+        
+        .login-header {
+            text-align: center;
+            margin-bottom: 2.5rem;
+        }
+        
+        .login-header h1 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.01em;
+        }
+        
+        .login-header p {
+            color: var(--neutral-600);
+            margin-bottom: 0;
+            font-size: 0.95rem;
+        }
+        
+        .user-type-switch {
+            margin-bottom: 2rem;
+        }
+        
+        .user-type-switch .btn-group {
+            width: 100%;
+            box-shadow: var(--card-shadow);
+            border-radius: var(--border-radius-lg);
+            padding: 0.25rem;
+            background-color: var(--neutral-100);
+        }
+        
+        .user-type-switch .btn {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 0.75rem 1rem;
+            font-weight: 500;
+            color: var(--neutral-700);
+            border-radius: var(--border-radius);
+            transition: var(--transition-base);
+        }
+        
+        .user-type-switch .btn:hover {
+            color: var(--primary-color);
+        }
+        
+        .user-type-switch .btn.active {
+            background: white;
+            color: var(--secondary-color);
+            box-shadow: var(--card-shadow);
+        }
+        
+        /* 表单样式 */
+        .form-floating {
+            margin-bottom: 1.25rem;
+        }
+        
+        .form-floating > .form-control {
+            padding: 1rem 1rem;
+            height: calc(3.5rem + 2px);
+            border-radius: var(--border-radius-lg);
+            border: 1px solid var(--neutral-200);
+            font-size: 0.95rem;
+            transition: var(--transition-base);
+        }
+        
+        .form-floating > .form-control:focus {
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 3px rgba(74, 108, 253, 0.1);
+        }
+        
+        .form-floating > label {
+            padding: 1rem;
+            color: var(--neutral-500);
+        }
+        
+        .form-check {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        
+        .form-check-input {
+            width: 1.25em;
+            height: 1.25em;
+            margin-right: 0.75rem;
+            background-color: white;
+            border: 1px solid var(--neutral-300);
+            border-radius: 0.25em;
+            transition: all 0.15s ease-in-out;
+        }
+        
+        .form-check-input:checked {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        
+        .form-check-label {
+            color: var(--neutral-700);
+            font-size: 0.95rem;
+        }
+        
+        /* 按钮样式 */
+        .btn-primary {
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            border: none;
+            width: 100%;
+            padding: 0.85rem;
+            font-weight: 500;
+            border-radius: var(--border-radius-lg);
+            transition: var(--transition-base);
+        }
+        
+        .btn-primary:hover, .btn-primary:focus {
+            background: linear-gradient(to right, var(--secondary-light), var(--secondary-color));
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.3);
+            transform: translateY(-1px);
+        }
+        
+        .btn-outline-primary {
+            color: var(--secondary-color);
+            border-color: var(--secondary-color);
+            background-color: transparent;
+        }
+        
+        .btn-outline-primary:hover, .btn-outline-primary:focus {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+            color: white;
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.2);
+        }
+        
+        /* 学生说明部分 */
+        .student-instructions {
+            margin-top: 1.5rem;
+            padding: 1.25rem;
+            background-color: var(--neutral-50);
+            border-radius: var(--border-radius-lg);
+            border: 1px solid var(--neutral-200);
+            font-size: 0.95rem;
+            color: var(--neutral-700);
+            transition: var(--transition-smooth);
+        }
+        
+        .student-instructions p {
+            margin-bottom: 0.75rem;
+        }
+        
+        .student-instructions p:last-child {
+            margin-bottom: 0;
+        }
+        
+        .student-instructions strong {
+            color: var(--neutral-900);
+        }
+        
+        /* 页脚样式 */
+        .login-footer {
+            text-align: center;
+            margin-top: 2rem;
+            color: var(--neutral-500);
+            font-size: 0.85rem;
+        }
+        
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .fade-in {
+            opacity: 0;
+            animation: fadeIn 0.4s ease-out forwards;
+        }
+        
+        /* 输入组样式 */
+        .input-group {
+            position: relative;
+        }
+        
+        .input-group .form-control {
+            padding-right: 3.5rem;
+            border-radius: var(--border-radius-lg);
+        }
+        
+        .input-group .btn {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            z-index: 5;
+            border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+            color: var(--neutral-700);
+            background-color: var(--neutral-100);
+            border: 1px solid var(--neutral-200);
+            border-left: none;
+            transition: var(--transition-base);
+        }
+        
+        .input-group .btn:hover, .input-group .btn:focus {
+            background-color: var(--neutral-200);
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container fade-in">
+        <div class="login-header">
+            <h1>AI助教开发平台</h1>
+            <p id="login-subtitle">教师端登录</p>
+        </div>
+        
+        <div class="user-type-switch">
+            <div class="btn-group" role="group" id="user-type-buttons">
+                <button type="button" class="btn active" id="teacher-button">教师</button>
+                <button type="button" class="btn" id="student-button">学生</button>
+            </div>
+        </div>
+        
+        <form id="login-form">
+            <div class="form-floating">
+                <input type="text" class="form-control" id="username" placeholder="用户名" required>
+                <label for="username">用户名</label>
+            </div>
+            
+            <div class="form-floating">
+                <input type="password" class="form-control" id="password" placeholder="密码" required>
+                <label for="password">密码</label>
+            </div>
+            
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="remember-me">
+                <label class="form-check-label" for="remember-me">
+                    记住我
+                </label>
+            </div>
+            
+            <div id="student-instructions" class="student-instructions" style="display: none;">
+                <p><strong>学生登录说明：</strong></p>
+                <p>您也可以直接使用教师分享的链接访问AI助手，无需登录。</p>
+                <div class="input-group mt-3">
+                    <input type="text" class="form-control" id="access-token" placeholder="输入访问令牌">
+                    <button class="btn" type="button" id="access-button">
+                        <i class="bi bi-arrow-right"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <button type="submit" class="btn btn-primary mt-3">
+                <i class="bi bi-box-arrow-in-right me-2"></i>登录
+            </button>
+        </form>
+        
+        <div class="login-footer">
+            © 2025 教育AI助手开发平台 版权所有
+        </div>
+    </div>
+    
+    <script>
+        // 硬编码用户
+        const users = {
+            teachers: [
+                { username: 'teacher', password: '123456', name: '李志刚' },
+                { username: 'admin', password: 'admin123', name: '管理员' }
+            ],
+            students: [
+                { username: 'student1', password: '123456', name: '张三' },
+                { username: 'student2', password: '123456', name: '李四' }
+            ]
+        };
+        
+        // DOM元素
+        const teacherButton = document.getElementById('teacher-button');
+        const studentButton = document.getElementById('student-button');
+        const loginSubtitle = document.getElementById('login-subtitle');
+        const studentInstructions = document.getElementById('student-instructions');
+        const loginForm = document.getElementById('login-form');
+        const accessButton = document.getElementById('access-button');
+        
+        // 切换用户类型
+        teacherButton.addEventListener('click', function() {
+            teacherButton.classList.add('active');
+            studentButton.classList.remove('active');
+            loginSubtitle.textContent = '教师端登录';
+            studentInstructions.style.display = 'none';
+        });
+        
+        studentButton.addEventListener('click', function() {
+            studentButton.classList.add('active');
+            teacherButton.classList.remove('active');
+            loginSubtitle.textContent = '学生端登录';
+            studentInstructions.style.display = 'block';
+        });
+        
+        // 处理登录表单提交
+        // 处理登录表单提交
+loginForm.addEventListener('submit', async function(e) {
+    e.preventDefault();
+    
+    const username = document.getElementById('username').value;
+    const password = document.getElementById('password').value;
+    const isTeacher = teacherButton.classList.contains('active');
+    
+    try {
+        const response = await fetch('/api/auth/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: username,
+                password: password,
+                type: isTeacher ? 'teacher' : 'student'
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // 登录成功，重定向到相应页面
+            window.location.href = isTeacher ? '/index.html' : '/student_portal.html';
+        } else {
+            showAlert('用户名或密码错误', 'danger');
+        }
+    } catch (error) {
+        console.error('登录失败:', error);
+        showAlert('登录请求失败，请重试', 'danger');
+    }
+});
+        // 处理访问令牌
+        accessButton.addEventListener('click', function() {
+            const token = document.getElementById('access-token').value.trim();
+            
+            if (token) {
+                // 简单验证令牌格式
+                if (token.length >= 32) {
+                    // 这里应该向服务器验证令牌有效性，这里简化处理
+                    // 直接从URL中提取agent_id (假设格式为: [agent_id]?token=[token])
+                    if (token.includes('?token=')) {
+                        window.location.href = '/student/' + token;
+                    } else {
+                        // 假设这是一个纯token，需要输入Agent ID
+                        const agentId = prompt('请输入Agent ID');
+                        if (agentId) {
+                            window.location.href = `/student/${agentId}?token=${token}`;
+                        }
+                    }
+                } else {
+                    showAlert('无效的访问令牌格式', 'warning');
+                }
+            } else {
+                showAlert('请输入访问令牌', 'warning');
+            }
+        });
+        
+        // 显示提示信息
+        function showAlert(message, type) {
+            // 移除现有的提示
+            const existingAlert = document.querySelector('.alert');
+            if (existingAlert) {
+                existingAlert.remove();
+            }
+            
+            // 创建新提示
+            const alert = document.createElement('div');
+            alert.className = `alert alert-${type} fade-in`;
+            alert.role = 'alert';
+            alert.style.marginBottom = '1.5rem';
+            alert.innerHTML = `
+                <i class="bi ${type === 'danger' ? 'bi-exclamation-triangle' : 'bi-info-circle'} me-2"></i>
+                ${message}
+            `;
+            
+            // 添加到表单上方
+            loginForm.insertAdjacentElement('beforebegin', alert);
+            
+            // 3秒后自动移除
+            setTimeout(() => {
+                alert.style.opacity = '0';
+                setTimeout(() => alert.remove(), 300);
+            }, 3000);
+        }
+        
+        // 页面加载时检查是否已经登录
+        // window.addEventListener('DOMContentLoaded', function() {
+        //     const currentUser = localStorage.getItem('currentUser');
+            
+        //     if (currentUser) {
+        //         const userData = JSON.parse(currentUser);
+                
+        //         if (userData.type === 'teacher') {
+        //             window.location.href = '/index.html';
+        //         } else if (userData.type === 'student') {
+        //             window.location.href = '/student_portal.html';
+        //         }
+        //     }
+        // });
+    </script>
+</body>
+</html>

_archive/templates/student.html

@@ -0,0 +1,1651 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI学习助手</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <!-- KaTeX 用于渲染数学公式 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
+    <!-- Highlight.js 样式 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        :root {
+            /* 主要配色 */
+            --primary-color: #0f2d49;
+            --primary-light: #234a70;
+            --secondary-color: #4a6cfd;
+            --secondary-light: #7b91ff;
+            --tertiary-color: #f7f9fe;
+            
+            /* 功能颜色 */
+            --success-color: #10b981;
+            --success-light: #d1fae5;
+            --warning-color: #f59e0b;
+            --warning-light: #fef3c7;
+            --danger-color: #ef4444;
+            --danger-light: #fee2e2;
+            --info-color: #3b82f6;
+            --info-light: #dbeafe;
+            
+            /* 中性色 */
+            --neutral-50: #f9fafb;
+            --neutral-100: #f3f4f6;
+            --neutral-200: #e5e7eb;
+            --neutral-300: #d1d5db;
+            --neutral-400: #9ca3af;
+            --neutral-500: #6b7280;
+            --neutral-600: #4b5563;
+            --neutral-700: #374151;
+            --neutral-800: #1f2937;
+            --neutral-900: #111827;
+            
+            /* 界面元素 */
+            --border-radius-sm: 0.25rem;
+            --border-radius: 0.375rem;
+            --border-radius-lg: 0.5rem;
+            --border-radius-xl: 0.75rem;
+            --border-radius-xxl: 1rem;
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+            --transition-base: all 0.2s ease-in-out;
+            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        
+        body {
+            font-family: var(--font-family);
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            background-color: var(--neutral-50);
+            color: var(--neutral-800);
+            display: flex;
+            flex-direction: column;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        
+        /* 头部样式 */
+        .header {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            color: white;
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-md);
+            position: relative;
+            z-index: 10;
+        }
+        
+        .header-content {
+            max-width: 1600px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .header h1 {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: white;
+            display: flex;
+            align-items: center;
+        }
+        
+        .header h1 i {
+            margin-right: 0.75rem;
+            color: rgba(255, 255, 255, 0.8);
+        }
+        
+        .header .badge {
+            background-color: rgba(255, 255, 255, 0.15);
+            color: white;
+            font-weight: 500;
+            padding: 0.35em 0.75em;
+            font-size: 0.85rem;
+            border-radius: 9999px;
+        }
+        
+        /* 主容器样式 */
+        .main-container {
+            flex: 1;
+            display: flex;
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 1.5rem;
+            width: 100%;
+            box-sizing: border-box;
+            height: calc(100vh - 70px); /* Header height + padding */
+            overflow: hidden;
+        }
+        
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            height: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            transition: var(--transition-smooth);
+            position: relative;
+        }
+        
+        /* 聊天对话区域样式 */
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--neutral-50);
+            gap: 1rem;
+            scroll-behavior: smooth;
+        }
+        
+        /* 自定义滚动条 */
+        .chat-messages::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        
+        .chat-messages::-webkit-scrollbar-track {
+            background: var(--neutral-100);
+            border-radius: 10px;
+        }
+        
+        .chat-messages::-webkit-scrollbar-thumb {
+            background: var(--neutral-300);
+            border-radius: 10px;
+        }
+        
+        .chat-messages::-webkit-scrollbar-thumb:hover {
+            background: var(--neutral-400);
+        }
+        
+        /* 消息气泡样式 */
+        .message {
+            max-width: 85%;
+            border-radius: var(--border-radius-lg);
+            padding: 1rem;
+            position: relative;
+            line-height: 1.5;
+            box-shadow: var(--shadow-sm);
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            hyphens: auto;
+        }
+        
+        .message .message-content {
+            padding: 0 10px;
+            margin: 0;
+        }
+        
+        .user-message {
+            background: linear-gradient(135deg, #e9f5ff, #c2e4ff);
+            align-self: flex-end;
+            color: var(--primary-color);
+            border-bottom-right-radius: 0.2rem;
+            border-left: 1px solid rgba(74, 108, 253, 0.1);
+            border-top: 1px solid rgba(255, 255, 255, 0.5);
+        }
+        
+        .bot-message {
+            background-color: white;
+            align-self: flex-start;
+            color: var(--neutral-800);
+            border-bottom-left-radius: 0.2rem;
+            border-left: 3px solid var(--secondary-color);
+            box-shadow: var(--shadow);
+        }
+        
+        /* 输入区域样式 */
+        .input-container {
+            padding: 1rem 1.5rem;
+            border-top: 1px solid var(--neutral-200);
+            background-color: white;
+            position: relative;
+        }
+        
+        .input-row {
+            display: flex;
+            gap: 0.75rem;
+            position: relative;
+        }
+        
+        .input-field {
+            flex: 1;
+            padding: 0.85rem 1rem;
+            border: 1px solid var(--neutral-200);
+            border-radius: var(--border-radius-lg);
+            resize: none;
+            font-size: 0.95rem;
+            box-shadow: var(--shadow-inner);
+            transition: var(--transition-base);
+        }
+        
+        .input-field:focus {
+            outline: none;
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 3px rgba(74, 108, 253, 0.15);
+        }
+        
+        .send-button {
+            padding: 0 1.25rem;
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            color: white;
+            border: none;
+            border-radius: var(--border-radius-lg);
+            cursor: pointer;
+            font-weight: 500;
+            transition: var(--transition-base);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .send-button:hover {
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.25);
+            transform: translateY(-1px);
+        }
+        
+        .send-button:disabled {
+            background: var(--neutral-300);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        
+        /* 插件容器样式 */
+        .plugin-container {
+            display: none;
+            flex-direction: column;
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            height: 100%;
+            flex: 2;
+            margin-left: 1.5rem;
+            transition: var(--transition-smooth);
+        }
+        
+        .plugin-header {
+            padding: 0.85rem 1.25rem;
+            border-bottom: 1px solid var(--neutral-200);
+            background-color: var(--neutral-50);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .plugin-title {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+        }
+        
+        .plugin-title i {
+            margin-right: 0.5rem;
+            color: var(--secondary-color);
+        }
+        
+        .plugin-close {
+            width: 32px;
+            height: 32px;
+            background: var(--neutral-100);
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 0.85rem;
+            color: var(--neutral-700);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition-base);
+        }
+        
+        .plugin-close:hover {
+            background-color: var(--neutral-200);
+            color: var(--neutral-900);
+        }
+        
+        .plugin-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0;
+            background-color: var(--neutral-50);
+        }
+        
+        /* 当插件激活时的样式 */
+        .main-container.with-plugin .chat-container {
+            max-width: 380px;
+            margin: 0;
+        }
+        
+        /* 代码块样式 */
+        pre {
+            margin: 1rem 0;
+            padding: 1rem;
+            background-color: var(--neutral-800);
+            border-radius: var(--border-radius);
+            overflow-x: auto;
+            position: relative;
+        }
+        
+        pre code {
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.9rem;
+            color: #e5e7eb;
+            padding: 0;
+            background: none;
+        }
+        
+        .copy-button {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            padding: 0.25rem 0.5rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.6);
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-size: 0.75rem;
+            cursor: pointer;
+            transition: var(--transition-base);
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        
+        .copy-button:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: rgba(255, 255, 255, 0.9);
+        }
+        
+        /* 代码执行结果样式 */
+        .code-result {
+            margin-top: 0.5rem;
+            padding: 0.75rem;
+            background-color: var(--neutral-900);
+            border-radius: var(--border-radius);
+            color: white;
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.85rem;
+            white-space: pre-wrap;
+        }
+        
+        /* 内联代码样式 */
+        code:not(pre code) {
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.9em;
+            color: var(--primary-color);
+            background-color: var(--neutral-100);
+            padding: 0.2em 0.4em;
+            border-radius: 3px;
+        }
+        
+        /* 参考资料样式 */
+        .reference-container {
+            margin-top: 1rem;
+            border-top: 1px dashed var(--neutral-300);
+            padding-top: 0.75rem;
+        }
+        
+        .reference-toggle {
+            color: var(--neutral-600);
+            font-size: 0.85rem;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            transition: var(--transition-base);
+        }
+        
+        .reference-toggle:hover {
+            color: var(--secondary-color);
+        }
+        
+        .reference-toggle i {
+            margin-right: 0.35rem;
+            font-size: 0.9rem;
+        }
+        
+        .reference-content {
+            display: none;
+            margin-top: 0.75rem;
+            padding: 0.75rem;
+            background-color: var(--neutral-100);
+            border-radius: var(--border-radius);
+            font-size: 0.85rem;
+        }
+        
+        .reference-item {
+            margin-bottom: 0.75rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid var(--neutral-200);
+        }
+        
+        .reference-item:last-child {
+            margin-bottom: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+        
+        .reference-item-source {
+            color: var(--neutral-600);
+            font-size: 0.8rem;
+            margin-top: 0.25rem;
+        }
+        
+        /* 欢迎消息样式 */
+        .welcome-message {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+        
+        .welcome-icon {
+            width: 64px;
+            height: 64px;
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1rem;
+            color: white;
+            font-size: 2rem;
+            box-shadow: 0 4px 12px rgba(74, 108, 253, 0.25);
+        }
+        
+        .welcome-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--primary-color);
+        }
+        
+        .welcome-description {
+            color: var(--neutral-700);
+            max-width: 400px;
+            margin-bottom: 0;
+        }
+        
+        /* 思维导图和可视化插件内容样式 */
+        .visualization-result, .mindmap-result {
+            padding: 1.5rem;
+            text-align: center;
+        }
+        
+        .visualization-image, .mindmap-image {
+            max-width: 100%;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+        }
+        
+        /* 响应式样式 */
+        @media (max-width: 1200px) {
+            .main-container.with-plugin .chat-container {
+                max-width: 320px;
+            }
+        }
+        
+        @media (max-width: 992px) {
+            .main-container {
+                flex-direction: column;
+                padding: 1rem;
+            }
+            
+            .main-container.with-plugin .chat-container {
+                max-width: 100%;
+                margin-bottom: 1rem;
+                height: 40vh;
+            }
+            
+            .plugin-container {
+                margin-left: 0;
+                height: calc(60vh - 32px);
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .main-container {
+                padding: 0.75rem;
+            }
+            
+            .message {
+                max-width: 95%;
+            }
+        }
+        
+        /* 增强的卡塔赫和Markdown样式 */
+        .katex {
+            font-size: 1.1em;
+        }
+        
+        .message h1, .message h2, .message h3, 
+        .message h4, .message h5, .message h6 {
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+            line-height: 1.3;
+        }
+        
+        .message h1 {
+            font-size: 1.6em;
+            border-bottom: 1px solid var(--neutral-200);
+            padding-bottom: 0.3em;
+        }
+        
+        .message h2 {
+            font-size: 1.4em;
+            border-bottom: 1px solid var(--neutral-200);
+            padding-bottom: 0.3em;
+        }
+        
+        .message h3 {
+            font-size: 1.2em;
+        }
+        
+        .message h4 {
+            font-size: 1.1em;
+        }
+        
+        .message h5, .message h6 {
+            font-size: 1em;
+        }
+        
+        .message p {
+            margin: 0.5em 0;
+        }
+        
+        .message ul, .message ol {
+            margin: 0.5em 0;
+            padding-left: 1.5em;
+        }
+        
+        .message li {
+            margin: 0.25em 0;
+        }
+        
+        .message blockquote {
+            margin: 0.5em 0;
+            padding-left: 1em;
+            border-left: 4px solid var(--neutral-300);
+            color: var(--neutral-700);
+        }
+        
+        .message img {
+            max-width: 100%;
+            border-radius: var(--border-radius);
+        }
+        
+        .message table {
+            border-collapse: collapse;
+            margin: 1em 0;
+            width: 100%;
+        }
+        
+        .message table th,
+        .message table td {
+            border: 1px solid var(--neutral-300);
+            padding: 0.5em;
+        }
+        
+        .message table th {
+            background-color: var(--neutral-100);
+            font-weight: 600;
+        }
+        
+        .message table tr:nth-child(even) {
+            background-color: var(--neutral-50);
+        }
+        
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .message {
+            animation: fadeIn 0.3s ease forwards;
+        }
+        
+        /* 输入提示区域 */
+        .input-suggestions {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            right: 0;
+            background-color: white;
+            border-top-left-radius: var(--border-radius-lg);
+            border-top-right-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow-md);
+            padding: 0.75rem;
+            display: none;
+            border: 1px solid var(--neutral-200);
+            border-bottom: none;
+        }
+        
+        .suggestion-title {
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--neutral-700);
+            margin-bottom: 0.5rem;
+        }
+        
+        .suggestion-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+        
+        .suggestion-button {
+            padding: 0.5rem 0.75rem;
+            background-color: var(--neutral-100);
+            border: 1px solid var(--neutral-200);
+            border-radius: var(--border-radius);
+            font-size: 0.85rem;
+            color: var(--neutral-800);
+            cursor: pointer;
+            transition: var(--transition-base);
+        }
+        
+        .suggestion-button:hover {
+            background-color: var(--secondary-light);
+            color: white;
+            border-color: var(--secondary-light);
+        }
+        
+        /* 打字机效果 */
+        .typing-indicator {
+            display: inline-block;
+            margin-left: 5px;
+        }
+        
+        .typing-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: var(--neutral-500);
+            margin-right: 3px;
+            animation: typingDot 1.4s infinite ease-in-out;
+        }
+        
+        .typing-dot:nth-child(1) { animation-delay: 0s; }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        
+        @keyframes typingDot {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+
+        /* 打字机控制样式 */
+        .typewriter-controls {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        .typewriter-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: none;
+            background-color: var(--neutral-100);
+            color: var(--neutral-600);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition-base);
+        }
+
+        .typewriter-btn:hover {
+            background-color: var(--neutral-200);
+            color: var(--neutral-900);
+        }
+
+        .typewriter-btn.pause-btn {
+            color: var(--danger-color);
+        }
+
+        .typewriter-btn.continue-btn {
+            color: var(--success-color);
+        }
+
+        .typewriter-btn.speed-btn {
+            color: var(--warning-color);
+        }
+
+        /* 打字机光标效果 */
+        .typing-cursor {
+            display: inline-block;
+            width: 2px;
+            height: 1em;
+            background-color: var(--neutral-700);
+            margin-left: 2px;
+            vertical-align: middle;
+            animation: blink 1s infinite;
+        }
+
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+
+        /* 确保代码块内文本溢出有滚动条 */
+        pre {
+            position: relative;
+            white-space: pre;
+            word-wrap: normal;
+            overflow-x: auto;
+        }
+
+        /* 保证消息区内容正常显示 */
+        .message-content p {
+            word-break: break-word;
+        }
+
+        /* 确保代码复制按钮正确显示 */
+        .copy-button {
+            opacity: 0.8;
+            z-index: 10;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-content">
+            <h1><i class="bi bi-mortarboard"></i> {{ agent_name }}</h1>
+            <div>
+                <span class="badge">AI学习助手</span>
+            </div>
+        </div>
+    </header>
+    
+    <div class="main-container" id="main-container">
+        <div class="chat-container">
+            <div class="chat-messages" id="chat-messages">
+                <div class="welcome-message">
+                    <div class="welcome-icon">
+                        <i class="bi bi-robot"></i>
+                    </div>
+                    <h2 class="welcome-title">欢迎使用 {{ agent_name }}</h2>
+                    {% if agent_description %}
+                    <p class="welcome-description">{{ agent_description }}</p>
+                    {% else %}
+                    <p class="welcome-description">我是您的AI学习助手，有任何问题都可以随时向我提问</p>
+                    {% endif %}
+                </div>
+                
+                <div class="message bot-message">
+                    <div class="message-content">
+                        <p>您好！我是{{ agent_name }}，很高兴能够帮助您学习。请问有什么我可以协助您的问题吗？</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="input-container">
+                <div class="input-suggestions" id="input-suggestions">
+                    <div class="suggestion-title">推荐问题：</div>
+                    <div class="suggestion-buttons">
+                        <button class="suggestion-button">介绍一下这门课程的主要内容</button>
+                        <button class="suggestion-button">这门课程有哪些重点知识？</button>
+                        <button class="suggestion-button">请给我一些学习建议</button>
+                    </div>
+                </div>
+                <div class="input-row">
+                    <textarea class="input-field" id="user-input" placeholder="输入您的问题..." rows="2"></textarea>
+                    <button class="send-button" id="send-button">
+                        <i class="bi bi-send"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 代码执行插件 -->
+        <div class="plugin-container code-plugin" id="code-plugin">
+            <div class="plugin-header">
+                <h3 class="plugin-title"><i class="bi bi-code-square"></i> Python代码执行</h3>
+                <button class="plugin-close" id="close-code-plugin">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="plugin-content">
+                <iframe id="code-execution-frame" src="" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+        
+        <!-- 3D可视化插件 -->
+        <div class="plugin-container visualization-plugin" id="visualization-plugin">
+            <div class="plugin-header">
+                <h3 class="plugin-title"><i class="bi bi-graph-up"></i> 3D可视化</h3>
+                <button class="plugin-close" id="close-visualization-plugin">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="plugin-content">
+                <div class="visualization-result" id="visualization-result">
+                    <div class="text-center py-4">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">加载中...</span>
+                        </div>
+                        <p class="mt-3">正在准备3D可视化...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 思维导图插件 -->
+        <div class="plugin-container mindmap-plugin" id="mindmap-plugin">
+            <div class="plugin-header">
+                <h3 class="plugin-title"><i class="bi bi-diagram-3"></i> 思维导图</h3>
+                <button class="plugin-close" id="close-mindmap-plugin">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="plugin-content">
+                <div class="mindmap-result" id="mindmap-result">
+                    <div class="text-center py-4">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">加载中...</span>
+                        </div>
+                        <p class="mt-3">正在生成思维导图...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
+    <script>
+        // 全局变量
+        const agentId = "{{ agent_id }}";
+        const token = "{{ token }}";
+        let executionContext = null;
+        const mainContainer = document.getElementById('main-container');
+        let isTyping = false;
+        let typewriterInterval = null;
+        let typewriterPaused = false;
+        let currentMessageQueue = [];
+        let typewriterSpeed = 20; // 打字速度(ms)
+        let currentMessageElement = null;
+        
+        // DOM元素
+        const chatMessages = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+        const sendButton = document.getElementById('send-button');
+        
+        // 代码执行插件元素
+        const codePlugin = document.getElementById('code-plugin');
+        const closeCodePlugin = document.getElementById('close-code-plugin');
+        const codeExecutionFrame = document.getElementById('code-execution-frame');
+        
+        // 3D可视化插件元素
+        const visualizationPlugin = document.getElementById('visualization-plugin');
+        const closeVisualizationPlugin = document.getElementById('close-visualization-plugin');
+        const visualizationResult = document.getElementById('visualization-result');
+        
+        // 思维导图插件元素
+        const mindmapPlugin = document.getElementById('mindmap-plugin');
+        const closeMindmapPlugin = document.getElementById('close-mindmap-plugin');
+        const mindmapResult = document.getElementById('mindmap-result');
+        
+        // 输入建议
+        const inputSuggestions = document.getElementById('input-suggestions');
+        
+        // Markdown-it 实例
+        const md = window.markdownit({
+            html: false,
+            linkify: true,
+            typographer: true,
+            breaks: true,
+            highlight: function (str, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    try {
+                        const highlighted = hljs.highlight(str, { language: lang }).value;
+                        return `<pre><code class="hljs language-${lang}">${highlighted}</code><button class="copy-button" onclick="copyToClipboard(this)"><i class="bi bi-clipboard"></i> 复制</button></pre>`;
+                    } catch (__) {}
+                }
+                return `<pre><code class="hljs">${md.utils.escapeHtml(str)}</code><button class="copy-button" onclick="copyToClipboard(this)"><i class="bi bi-clipboard"></i> 复制</button></pre>`;
+            }
+        });
+        
+        // 页面加载完成后执行
+        document.addEventListener('DOMContentLoaded', function() {
+            // 初始化发送按钮事件
+            sendButton.addEventListener('click', sendMessage);
+            
+            // 初始化输入框回车事件
+            userInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            
+            // 初始化问题建议按钮
+            document.querySelectorAll('.suggestion-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    userInput.value = this.textContent;
+                    sendMessage();
+                });
+            });
+            
+            // 初始化插件关闭事件
+            closeCodePlugin.addEventListener('click', () => {
+                codePlugin.style.display = 'none';
+                // 清空iframe源以停止任何运行中的代码
+                codeExecutionFrame.src = '';
+                updateMainContainerLayout();
+            });
+            
+            closeVisualizationPlugin.addEventListener('click', () => {
+                visualizationPlugin.style.display = 'none';
+                updateMainContainerLayout();
+            });
+            
+            closeMindmapPlugin.addEventListener('click', () => {
+                mindmapPlugin.style.display = 'none';
+                updateMainContainerLayout();
+            });
+            
+            // 焦点事件
+            userInput.addEventListener('focus', function() {
+                // inputSuggestions.style.display = 'block';
+            });
+            
+            userInput.addEventListener('blur', function(e) {
+                // 延迟执行，以便点击建议按钮事件先触发
+                setTimeout(() => {
+                    // inputSuggestions.style.display = 'none';
+                }, 100);
+            });
+        });
+        
+        // 更新主容器布局
+        function updateMainContainerLayout() {
+            // 检查是否有任何插件处于显示状态
+            const isAnyPluginVisible = 
+                codePlugin.style.display === 'flex' || 
+                visualizationPlugin.style.display === 'flex' || 
+                mindmapPlugin.style.display === 'flex';
+            
+            // 更新主容器类名
+            if (isAnyPluginVisible) {
+                mainContainer.classList.add('with-plugin');
+            } else {
+                mainContainer.classList.remove('with-plugin');
+            }
+        }
+        
+        // 发送消息
+        async function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message || isTyping) return;
+            
+            // 添加用户消息
+            addMessage(message, true);
+            
+            // 清空输入框
+            userInput.value = '';
+            
+            // 禁用发送按钮
+            sendButton.disabled = true;
+            isTyping = true;
+            
+            // 添加机器人正在输入的指示
+            const typingIndicator = addTypingIndicator();
+            
+            try {
+                // 发送请求
+                const response = await fetch(`/api/student/chat/${agentId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        message: message,
+                        token: token
+                    })
+                });
+                
+                const data = await response.json();
+                
+                // 移除输入指示器
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                }
+                
+                if (data.success) {
+                    // 处理回复内容，移除参考来源部分
+                    const processedContent = processResponseContent(data.message);
+                    
+                    // 添加机器人回复（带打字机效果）
+                    const messageElement = addMessage(processedContent, false);
+                    
+                    // 添加参考信息（如果有）
+                    if (data.references && data.references.length > 0) {
+                        // 等待打字机效果完成后添加参考信息
+                        const checkTypewriterComplete = setInterval(() => {
+                            if (!typewriterInterval) {
+                                clearInterval(checkTypewriterComplete);
+                                addReferences(messageElement, data.references);
+                            }
+                        }, 100);
+                    }
+                    
+                    // 检查是否需要显示工具
+                    if (data.tools && data.tools.length > 0) {
+                        // 隐藏所有插件
+                        hideAllPlugins();
+                        
+                        // 使用新的插件激活函数
+                        activatePlugins(data.message, data.tools);
+                    }
+                } else {
+                    // 添加错误消息
+                    addMessage(`错误: ${data.message}`, false);
+                }
+            } catch (error) {
+                console.error('发送请求出错:', error);
+                // 移除输入指示器
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                }
+                addMessage('发送请求时出错，请重试', false);
+            } finally {
+                // 恢复发送按钮
+                sendButton.disabled = false;
+                isTyping = false;
+            }
+        }
+        
+        // 添加打字指示器
+        function addTypingIndicator() {
+            const botMessage = document.createElement('div');
+            botMessage.className = 'message bot-message';
+            
+            const content = document.createElement('div');
+            content.className = 'message-content';
+            content.innerHTML = `
+                <p>
+                    <span class="typing-indicator">
+                        <span class="typing-dot"></span>
+                        <span class="typing-dot"></span>
+                        <span class="typing-dot"></span>
+                    </span>
+                </p>
+            `;
+            
+            botMessage.appendChild(content);
+            chatMessages.appendChild(botMessage);
+            
+            // 滚动到底部
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            return botMessage;
+        }
+        
+        // 处理回复内容，移除参考来源部分
+        function processResponseContent(content) {
+            // 移除 "===参考来源开始===" 到 "===参考来源结束===" 之间的内容
+            return content.replace(/===参考来源开始===[\s\S]*?===参考来源结束===/, '');
+        }
+        
+        // 添加参考信息显示函数
+        function addReferences(messageElement, references) {
+            // 创建参考容器
+            const referenceContainer = document.createElement('div');
+            referenceContainer.className = 'reference-container';
+            
+            // 创建参考切换按钮
+            const toggleButton = document.createElement('div');
+            toggleButton.className = 'reference-toggle';
+            toggleButton.innerHTML = '<i class="bi bi-journal-text"></i> 参考来源';
+            
+            // 创建参考内容
+            const referenceContent = document.createElement('div');
+            referenceContent.className = 'reference-content';
+            
+            // 添加参考项
+            references.forEach(ref => {
+                const refItem = document.createElement('div');
+                refItem.className = 'reference-item';
+                
+                refItem.innerHTML = `
+                    <div><strong>[${ref.index}]</strong> ${ref.summary}</div>
+                    <div class="reference-item-source">来源: ${ref.file_name}</div>
+                `;
+                
+                referenceContent.appendChild(refItem);
+            });
+            
+            // 添加切换功能
+            toggleButton.addEventListener('click', () => {
+                if (referenceContent.style.display === 'block') {
+                    referenceContent.style.display = 'none';
+                    toggleButton.innerHTML = '<i class="bi bi-journal-text"></i> 参考来源';
+                } else {
+                    referenceContent.style.display = 'block';
+                    toggleButton.innerHTML = '<i class="bi bi-journal-arrow-up"></i> 收起参考来源';
+                }
+            });
+            
+            // 组装并添加到消息
+            referenceContainer.appendChild(toggleButton);
+            referenceContainer.appendChild(referenceContent);
+            messageElement.appendChild(referenceContainer);
+        }
+        
+        // 添加消息函数
+        function addMessage(content, isUser) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = isUser ? 'message user-message' : 'message bot-message';
+            
+            const messageContent = document.createElement('div');
+            messageContent.className = 'message-content';
+            
+            if (isUser) {
+                // 直接显示用户消息，仅替换换行符
+                messageContent.innerHTML = `<p>${content.replace(/\n/g, '<br>')}</p>`;
+            } else {
+                // 为AI消息添加打字机效果
+                messageContent.innerHTML = '<p></p>';
+                // 添加控制按钮
+                const controlsDiv = document.createElement('div');
+                controlsDiv.className = 'typewriter-controls';
+                controlsDiv.innerHTML = `
+                    <button class="typewriter-btn pause-btn" title="暂停"><i class="bi bi-pause-fill"></i></button>
+                    <button class="typewriter-btn continue-btn" style="display:none;" title="继续"><i class="bi bi-play-fill"></i></button>
+                    <button class="typewriter-btn speed-btn" title="加速"><i class="bi bi-lightning-fill"></i></button>
+                `;
+                messageContent.appendChild(controlsDiv);
+                
+                // 添加事件监听器
+                const pauseBtn = controlsDiv.querySelector('.pause-btn');
+                const continueBtn = controlsDiv.querySelector('.continue-btn');
+                const speedBtn = controlsDiv.querySelector('.speed-btn');
+                
+                pauseBtn.addEventListener('click', () => {
+                    pauseTypewriter();
+                    pauseBtn.style.display = 'none';
+                    continueBtn.style.display = 'inline-block';
+                });
+                
+                continueBtn.addEventListener('click', () => {
+                    continueTypewriter();
+                    continueBtn.style.display = 'none';
+                    pauseBtn.style.display = 'inline-block';
+                });
+                
+                speedBtn.addEventListener('click', () => {
+                    toggleTypewriterSpeed();
+                });
+                
+                // 开始打字机效果
+                startTypewriter(content, messageContent.querySelector('p'));
+            }
+            
+            messageDiv.appendChild(messageContent);
+            chatMessages.appendChild(messageDiv);
+            
+            // 滚动到底部
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            return messageDiv;
+        }
+        
+        // 打字机效果函数
+        function startTypewriter(text, element) {
+            // 清除之前的打字机效果（如果有）
+            if (typewriterInterval) {
+                clearInterval(typewriterInterval);
+            }
+            
+            // 保存当前消息元素引用
+            currentMessageElement = element;
+            
+            // 初始化
+            typewriterPaused = false;
+            let mdContent = md.render(text);
+            
+            // 将HTML内容转换为文本节点和元素节点的队列
+            parseHTMLToQueue(mdContent);
+            
+            // 开始逐字显示
+            typewriterInterval = setInterval(typeNextChar, typewriterSpeed);
+        }
+        
+        // 解析HTML到队列
+        function parseHTMLToQueue(html) {
+            // 清空队列
+            currentMessageQueue = [];
+            
+            // 创建临时容器
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = html;
+            
+            // 递归处理所有子节点
+            processNode(tempDiv);
+        }
+        
+        // 递归处理节点
+        function processNode(node) {
+            // 遍历节点的所有子节点
+            for (let i = 0; i < node.childNodes.length; i++) {
+                const child = node.childNodes[i];
+                
+                if (child.nodeType === Node.TEXT_NODE) {
+                    // 文本节点，将每个字符加入队列
+                    for (let j = 0; j < child.textContent.length; j++) {
+                        currentMessageQueue.push({
+                            type: 'text',
+                            content: child.textContent[j]
+                        });
+                    }
+                } else if (child.nodeType === Node.ELEMENT_NODE) {
+                    // 元素节点，将开始标签加入队列
+                    currentMessageQueue.push({
+                        type: 'element-start',
+                        tagName: child.tagName.toLowerCase(),
+                        attributes: Array.from(child.attributes)
+                    });
+                    
+                    // 递归处理子节点
+                    processNode(child);
+                    
+                    // 将结束标签加入队列
+                    currentMessageQueue.push({
+                        type: 'element-end',
+                        tagName: child.tagName.toLowerCase()
+                    });
+                }
+            }
+        }
+        
+        // 显示下一个字符
+        function typeNextChar() {
+            if (typewriterPaused || currentMessageQueue.length === 0 || !currentMessageElement) {
+                return;
+            }
+            
+            let item = currentMessageQueue.shift();
+            
+            if (item.type === 'text') {
+                // 处理文本
+                currentMessageElement.innerHTML += item.content;
+            } else if (item.type === 'element-start') {
+                // 处理元素开始标签
+                const el = document.createElement(item.tagName);
+                if (item.attributes) {
+                    item.attributes.forEach(attr => {
+                        el.setAttribute(attr.name, attr.value);
+                    });
+                }
+                currentMessageElement.appendChild(el);
+                // 更新当前元素引用
+                currentMessageElement = el;
+            } else if (item.type === 'element-end') {
+                // 处理元素结束标签
+                // 将当前元素引用更新为父元素
+                if (currentMessageElement.parentElement) {
+                    currentMessageElement = currentMessageElement.parentElement;
+                }
+            }
+            
+            // 滚动到底部
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // 如果队列为空，需要渲染数学公式
+            if (currentMessageQueue.length === 0) {
+                clearInterval(typewriterInterval);
+                typewriterInterval = null;
+                
+                // 找到最近添加的机器人消息
+                const botMessage = chatMessages.querySelector('.bot-message:last-child');
+                if (botMessage) {
+                    try {
+                        renderMathInElement(botMessage.querySelector('.message-content'), {
+                            delimiters: [
+                                {left: '$$', right: '$$', display: true},
+                                {left: '$', right: '$', display: false},
+                                {left: '\\(', right: '\\)', display: false},
+                                {left: '\\[', right: '\\]', display: true}
+                            ],
+                            throwOnError: false
+                        });
+                    } catch (e) {
+                        console.error('渲染LaTeX出错:', e);
+                    }
+                    
+                    // 为代码块添加复制按钮
+                    botMessage.querySelectorAll('pre').forEach(pre => {
+                        if (!pre.querySelector('.copy-button')) {
+                            const copyButton = document.createElement('button');
+                            copyButton.className = 'copy-button';
+                            copyButton.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
+                            copyButton.onclick = function() { copyToClipboard(this); };
+                            pre.appendChild(copyButton);
+                        }
+                    });
+                }
+            }
+        }
+        
+        // 暂停打字机效果
+        function pauseTypewriter() {
+            typewriterPaused = true;
+        }
+        
+        // 继续打字机效果
+        function continueTypewriter() {
+            typewriterPaused = false;
+            
+            // 如果之前的定时器已清除，重新启动
+            if (!typewriterInterval && currentMessageQueue.length > 0) {
+                typewriterInterval = setInterval(typeNextChar, typewriterSpeed);
+            }
+        }
+        
+        // 切换打字速度
+        function toggleTypewriterSpeed() {
+            if (typewriterSpeed === 20) {
+                typewriterSpeed = 5;  // 快速
+            } else {
+                typewriterSpeed = 20; // 正常速度
+            }
+            
+            // 如果正在运行，更新速度
+            if (typewriterInterval) {
+                clearInterval(typewriterInterval);
+                typewriterInterval = setInterval(typeNextChar, typewriterSpeed);
+            }
+        }
+        
+        // 复制代码到剪贴板
+        function copyToClipboard(button) {
+            const codeBlock = button.parentNode.querySelector('code');
+            const text = codeBlock.textContent;
+            
+            navigator.clipboard.writeText(text).then(() => {
+                button.innerHTML = '<i class="bi bi-check"></i> 已复制';
+                
+                setTimeout(() => {
+                    button.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
+                }, 2000);
+            }).catch(err => {
+                console.error('复制失败:', err);
+                button.innerHTML = '<i class="bi bi-exclamation-triangle"></i> 失败';
+                
+                setTimeout(() => {
+                    button.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
+                }, 2000);
+            });
+        }
+        
+        // 隐藏所有插件
+        function hideAllPlugins() {
+            codePlugin.style.display = 'none';
+            visualizationPlugin.style.display = 'none';
+            mindmapPlugin.style.display = 'none';
+            updateMainContainerLayout();
+        }
+        
+        // 提取代码块
+        function extractCodeBlocks(message) {
+            const codeBlocks = [];
+            const codeRegex = /```python\n([\s\S]*?)\n```/g;
+            
+            let match;
+            while ((match = codeRegex.exec(message)) !== null) {
+                codeBlocks.push(match[1]);
+            }
+            
+            return codeBlocks;
+        }
+        
+        // 提取3D可视化函数代码
+        function extract3DVisualizationCode(message) {
+            // 尝试提取函数代码块
+            const codeRegex = /```python\s*(import[\s\S]*?def create_3d_plot\(\):[\s\S]*?return[\s\S]*?})\s*```/i;
+            const match = codeRegex.exec(message);
+            
+            if (match) {
+                return match[1].trim();
+            }
+            
+            return null;
+        }
+        
+        // 提取思维导图内容
+        function extractMindmapContent(message) {
+            // 尝试提取@startmindmap和@endmindmap之间的内容
+            const mindmapRegex = /@startmindmap\n([\s\S]*?)@endmindmap/;
+            const match = mindmapRegex.exec(message);
+            
+            if (match) {
+                return `@startmindmap\n${match[1]}\n@endmindmap`;
+            }
+            
+            return null;
+        }
+        
+        // 激活代码执行插件
+        function activateCodePlugin(message) {
+            // 提取代码块
+            const codeBlocks = extractCodeBlocks(message);
+            
+            if (codeBlocks.length > 0) {
+                const isAlreadyVisible = codePlugin.style.display === 'flex';
+                
+                // 显示插件容器
+                codePlugin.style.display = 'flex';
+                updateMainContainerLayout();
+                
+                // 获取iframe
+                const iframe = document.getElementById('code-execution-frame');
+                
+                // 如果插件已经可见且iframe已加载
+                if (isAlreadyVisible && iframe.contentWindow) {
+                    // 发送新代码到现有iframe
+                    iframe.contentWindow.postMessage({
+                        type: 'setCode',
+                        code: codeBlocks[0]
+                    }, '*');
+                } else {
+                    // 设置iframe源
+                    let src = '/code_execution.html';
+                    if (codeBlocks.length > 0) {
+                        src += `?code=${encodeURIComponent(codeBlocks[0])}`;
+                    }
+                    
+                    iframe.src = src;
+                    
+                    // 设置iframe加载事件处理程序
+                    iframe.onload = function() {
+                        if (codeBlocks.length > 0) {
+                            iframe.contentWindow.postMessage({
+                                type: 'setCode',
+                                code: codeBlocks[0]
+                            }, '*');
+                        }
+                    };
+                }
+            }
+        }
+        
+        // 激活3D可视化插件
+        function activate3DVisualization(message) {
+            const code = extract3DVisualizationCode(message);
+            
+            if (code) {
+                // 显示插件容器
+                visualizationPlugin.style.display = 'flex';
+                updateMainContainerLayout();
+                
+                // 显示加载状态
+                visualizationResult.innerHTML = `
+                    <div class="text-center py-4">
+                        <div class="spinner-border" style="color: var(--secondary-color);" role="status">
+                            <span class="visually-hidden">生成中...</span>
+                        </div>
+                        <p class="mt-3">正在生成3D图形，请稍候...</p>
+                    </div>
+                `;
+                
+                // 自动生成可视化
+                fetch('/api/visualization/3d-surface', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ code: code })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // 直接嵌入HTML
+                        visualizationResult.innerHTML = `
+                            <div class="visualization-iframe-container" style="width:100%; height:500px;">
+                                <iframe src="${data.html_url}" style="width:100%; height:100%; border:none;"></iframe>
+                            </div>
+                            <div class="text-center mt-3">
+                                <p>3D图形生成成功</p>
+                                <a href="${data.html_url}" class="btn btn-sm btn-outline-primary" target="_blank">
+                                    <i class="bi bi-arrows-fullscreen"></i> 全屏查看
+                                </a>
+                            </div>
+                        `;
+                    } else {
+                        visualizationResult.innerHTML = `
+                            <div class="alert alert-danger">
+                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                                生成失败: ${data.message}
+                            </div>
+                        `;
+                    }
+                })
+                .catch(error => {
+                    console.error('生成3D图形出错:', error);
+                    visualizationResult.innerHTML = `
+                        <div class="alert alert-danger">
+                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                            生成3D图形时发生错误，请重试
+                        </div>
+                    `;
+                });
+            }
+        }
+        
+        // 激活思维导图插件
+        function activateMindmap(message) {
+            const content = extractMindmapContent(message);
+            
+            if (content) {
+                // 显示插件容器
+                mindmapPlugin.style.display = 'flex';
+                updateMainContainerLayout();
+                
+                // 显示加载状态
+                mindmapResult.innerHTML = `
+                    <div class="text-center py-4">
+                        <div class="spinner-border" style="color: var(--secondary-color);" role="status">
+                            <span class="visually-hidden">生成中...</span>
+                        </div>
+                        <p class="mt-3">正在生成思维导图，请稍候...</p>
+                    </div>
+                `;
+                
+                // 自动生成思维导图
+                fetch('/api/visualization/mindmap', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ content: content })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        mindmapResult.innerHTML = `
+                            <div class="text-center">
+                                <img src="${data.url}" class="mindmap-image" alt="思维导图">
+                                <p class="mt-3">生成成功！</p>
+                                <a href="${data.url}" class="btn btn-sm btn-outline-primary mt-2" target="_blank">
+                                    <i class="bi bi-download"></i> 下载图片
+                                </a>
+                            </div>
+                        `;
+                    } else {
+                        mindmapResult.innerHTML = `
+                            <div class="alert alert-danger">
+                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                                生成失败: ${data.message}
+                            </div>
+                        `;
+                    }
+                })
+                .catch(error => {
+                    console.error('生成思维导图出错:', error);
+                    mindmapResult.innerHTML = `
+                        <div class="alert alert-danger">
+                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                            生成思维导图时发生错误，请重试
+                        </div>
+                    `;
+                });
+            }
+        }
+        
+        // 根据消息内容激活适当的插件
+        function activatePlugins(message, tools) {
+            // 检查并激活代码执行插件
+            if (tools.includes('code') && message.includes('```python')) {
+                activateCodePlugin(message);
+            }
+            
+            // 检查并激活3D可视化插件
+            if (tools.includes('visualization') && 
+                (message.includes('def create_3d_plot') || 
+                 message.includes('3D') || message.includes('可视化'))) {
+                activate3DVisualization(message);
+            }
+            
+            // 检查并激活思维导图插件
+            if (tools.includes('mindmap') && 
+                (message.includes('@startmindmap') || 
+                 message.includes('思维导图'))) {
+                activateMindmap(message);
+            }
+        }
+    </script>
+    
+    <!-- 添加highlight.js用于代码高亮 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
+</body>
+</html>

_archive/templates/student_portal.html

@@ -0,0 +1,1004 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>学生端门户 - 教育AI助手平台</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        :root {
+            /* 优雅的配色方案 */
+            --primary-color: #0f2d49;
+            --primary-light: #234a70;
+            --secondary-color: #4a6cfd;
+            --secondary-light: #7b91ff;
+            --tertiary-color: #f7f9fe;
+            --success-color: #10b981;
+            --success-light: rgba(16, 185, 129, 0.1);
+            --warning-color: #f59e0b;
+            --warning-light: rgba(245, 158, 11, 0.1);
+            --info-color: #0ea5e9;
+            --info-light: rgba(14, 165, 233, 0.1);
+            --danger-color: #ef4444;
+            --danger-light: rgba(239, 68, 68, 0.1);
+            --neutral-50: #f9fafb;
+            --neutral-100: #f3f4f6;
+            --neutral-200: #e5e7eb;
+            --neutral-300: #d1d5db;
+            --neutral-400: #9ca3af;
+            --neutral-500: #6b7280;
+            --neutral-600: #4b5563;
+            --neutral-700: #374151;
+            --neutral-800: #1f2937;
+            --neutral-900: #111827;
+            
+            /* 样式变量 */
+            --border-radius-sm: 0.25rem;
+            --border-radius: 0.375rem;
+            --border-radius-lg: 0.5rem;
+            --border-radius-xl: 0.75rem;
+            --border-radius-2xl: 1rem;
+            --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
+            --card-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1);
+            --card-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --transition-base: all 0.2s ease-in-out;
+            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-family: 'Inter', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
+        }
+        
+        /* 基础样式 */
+        body {
+            font-family: var(--font-family);
+            background-color: var(--neutral-50);
+            color: var(--neutral-800);
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 600;
+            color: var(--neutral-900);
+        }
+        
+        .text-gradient {
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+        }
+        
+        /* 滚动条样式 */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: var(--neutral-100);
+            border-radius: 10px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--neutral-300);
+            border-radius: 10px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--neutral-400);
+        }
+        
+        /* 头部样式 */
+        .header {
+            background-color: white;
+            border-bottom: 1px solid var(--neutral-200);
+            padding: 1rem 1.5rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        
+        .header-content {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .header h1 {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.01em;
+        }
+        
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        
+        .user-info .badge {
+            font-size: 0.85rem;
+            padding: 0.4rem 0.75rem;
+            border-radius: var(--border-radius-lg);
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            color: white;
+            font-weight: 500;
+        }
+        
+        .user-info button {
+            color: var(--neutral-600);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: var(--transition-base);
+        }
+        
+        .user-info button:hover {
+            color: var(--secondary-color);
+        }
+        
+        /* 主容器样式 */
+        .main-container {
+            flex: 1;
+            max-width: 1400px;
+            margin: 2rem auto;
+            padding: 0 1.5rem;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        
+        /* 欢迎消息样式 */
+        .welcome-message {
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--card-shadow);
+            padding: 2rem;
+            margin-bottom: 2.5rem;
+            position: relative;
+            overflow: hidden;
+            border: none;
+            transition: var(--transition-smooth);
+        }
+        
+        .welcome-message:hover {
+            box-shadow: var(--card-shadow-hover);
+            transform: translateY(-3px);
+        }
+        
+        .welcome-message::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, var(--info-color), var(--secondary-light));
+            border-radius: 4px 0 0 4px;
+        }
+        
+        .welcome-message h2 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.6rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        
+        .welcome-message p {
+            color: var(--neutral-600);
+            margin-bottom: 0.75rem;
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+        
+        .welcome-message p:last-child {
+            margin-bottom: 0;
+        }
+        
+        /* 令牌输入样式 */
+        .token-input {
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--card-shadow);
+            padding: 2rem;
+            margin-bottom: 2.5rem;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition-smooth);
+        }
+        
+        .token-input:hover {
+            box-shadow: var(--card-shadow-hover);
+            transform: translateY(-3px);
+        }
+        
+        .token-input::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, var(--warning-color), var(--secondary-light));
+            border-radius: 4px 0 0 4px;
+        }
+        
+        .token-input h3 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.35rem;
+            font-weight: 600;
+            color: var(--neutral-900);
+        }
+        
+        .token-input p {
+            color: var(--neutral-600);
+            margin-bottom: 1.25rem;
+        }
+        
+        .token-input .input-group {
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+            border-radius: var(--border-radius-lg);
+            margin-bottom: 0;
+        }
+        
+        .token-input .form-control {
+            border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+            border: 1px solid var(--neutral-200);
+            padding: 0.75rem 1rem;
+            font-size: 0.95rem;
+        }
+        
+        .token-input .form-control:focus {
+            box-shadow: none;
+            border-color: var(--secondary-color);
+        }
+        
+        .token-input .btn {
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            color: white;
+            border: none;
+            border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+            padding: 0.75rem 1.25rem;
+            transition: var(--transition-base);
+        }
+        
+        .token-input .btn:hover {
+            background: linear-gradient(to right, var(--secondary-light), var(--secondary-color));
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.2);
+        }
+        
+        /* 标题样式 */
+        .section-header {
+            margin-bottom: 1.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .section-header h2 {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 0.5rem;
+        }
+        
+        .section-header p {
+            color: var(--neutral-600);
+            margin: 0;
+            font-size: 0.95rem;
+        }
+        
+        /* Agent卡片样式 */
+        .agent-card {
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            margin-bottom: 1.5rem;
+            box-shadow: var(--card-shadow);
+            overflow: hidden;
+            transition: var(--transition-smooth);
+            position: relative;
+            border: none;
+        }
+        
+        .agent-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--card-shadow-hover);
+        }
+        
+        .agent-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, var(--secondary-color), var(--secondary-light));
+            border-radius: 4px 0 0 4px;
+        }
+        
+        .agent-card-header {
+            padding: 1.5rem;
+            background-color: rgba(74, 108, 253, 0.03);
+            border-bottom: 1px solid var(--neutral-100);
+        }
+        
+        .agent-card-title {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+        }
+        
+        .agent-card-title i {
+            margin-right: 0.75rem;
+            font-size: 1.2rem;
+            color: var(--secondary-color);
+        }
+        
+        .agent-card-content {
+            padding: 1.5rem;
+        }
+        
+        .agent-card-description {
+            margin-bottom: 1.25rem;
+            color: var(--neutral-700);
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+        
+        .agent-meta {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 1.25rem;
+            gap: 1.5rem;
+        }
+        
+        .agent-meta-item {
+            display: flex;
+            align-items: center;
+            font-size: 0.9rem;
+            color: var(--neutral-600);
+        }
+        
+        .agent-meta-item i {
+            margin-right: 0.5rem;
+            font-size: 0.95rem;
+            color: var(--secondary-color);
+        }
+        
+        .agent-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+        
+        .agent-tag {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.35em 0.75em;
+            background-color: rgba(74, 108, 253, 0.1);
+            color: var(--secondary-color);
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+        
+        .agent-tag i {
+            margin-right: 0.4rem;
+        }
+        
+        .agent-actions {
+            display: flex;
+            justify-content: flex-end;
+        }
+        
+        .agent-actions .btn {
+            padding: 0.65em 1.25em;
+            font-weight: 500;
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            border: none;
+            color: white;
+            border-radius: var(--border-radius-lg);
+            transition: var(--transition-base);
+        }
+        
+        .agent-actions .btn:hover {
+            background: linear-gradient(to right, var(--secondary-light), var(--secondary-color));
+            transform: translateY(-2px);
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.2);
+        }
+        
+        .agent-actions .btn i {
+            margin-right: 0.5rem;
+        }
+        
+        /* 活动记录样式 */
+        .recent-activity {
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--card-shadow);
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition-smooth);
+        }
+        
+        .recent-activity:hover {
+            box-shadow: var(--card-shadow-hover);
+            transform: translateY(-3px);
+        }
+        
+        .recent-activity::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, var(--success-color), var(--secondary-light));
+            border-radius: 4px 0 0 4px;
+        }
+        
+        .recent-activity h3 {
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.35rem;
+            font-weight: 600;
+            color: var(--neutral-900);
+        }
+        
+        .activity-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        
+        .activity-item {
+            display: flex;
+            padding: 1rem 0;
+            border-bottom: 1px solid var(--neutral-100);
+            align-items: center;
+        }
+        
+        .activity-item:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+        
+        .activity-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: rgba(74, 108, 253, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            flex-shrink: 0;
+        }
+        
+        .activity-icon i {
+            color: var(--secondary-color);
+            font-size: 1.1rem;
+        }
+        
+        .activity-content {
+            flex: 1;
+        }
+        
+        .activity-title {
+            margin: 0;
+            margin-bottom: 0.35rem;
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: var(--neutral-800);
+        }
+        
+        .activity-time {
+            font-size: 0.85rem;
+            color: var(--neutral-500);
+        }
+        
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .fade-in {
+            opacity: 0;
+            animation: fadeIn 0.4s ease-out forwards;
+        }
+        
+        .animate-delay-1 { animation-delay: 0.1s; }
+        .animate-delay-2 { animation-delay: 0.2s; }
+        .animate-delay-3 { animation-delay: 0.3s; }
+        .animate-delay-4 { animation-delay: 0.4s; }
+        .animate-delay-5 { animation-delay: 0.5s; }
+        
+        /* 响应式样式 */
+        @media (max-width: 992px) {
+            .main-container {
+                padding: 0 1rem;
+            }
+            
+            .agent-meta {
+                flex-direction: column;
+                gap: 0.75rem;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.25rem;
+            }
+            
+            .welcome-message h2 {
+                font-size: 1.35rem;
+            }
+            
+            .agent-card-title {
+                font-size: 1.1rem;
+            }
+            
+            .section-header h2 {
+                font-size: 1.3rem;
+            }
+            
+            .recent-activity h3,
+            .token-input h3 {
+                font-size: 1.2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-content">
+            <h1>教育AI助手平台 - 学生端</h1>
+            <div class="user-info">
+                <span class="badge" id="user-name">张三</span>
+                <button class="btn btn-sm btn-link text-decoration-none" id="logout-btn">登出</button>
+            </div>
+        </div>
+    </header>
+    
+    <div class="main-container">
+        <div class="welcome-message fade-in">
+            <h2>欢迎回来，<span id="welcome-name">张三</span>！</h2>
+            <p>教育AI助手平台为您提供智能学习辅助工具，帮助您更高效地学习和解决问题。</p>
+            <p>下方是您的教师分享给您的AI助手，点击"开始对话"与它们互动。</p>
+        </div>
+        
+        <div class="token-input fade-in animate-delay-1">
+            <h3>访问新的AI助手</h3>
+            <p>输入教师分享的访问令牌，即可使用新的AI助手。</p>
+            <div class="input-group">
+                <input type="text" class="form-control" id="access-token" placeholder="输入访问令牌">
+                <button class="btn" id="access-button">
+                    <i class="bi bi-arrow-right-circle me-1"></i> 访问
+                </button>
+            </div>
+        </div>
+        
+        <div class="section-header fade-in animate-delay-2">
+            <h2>我的AI助手</h2>
+            <p>教师分享给您的智能学习助手</p>
+        </div>
+        
+        <div class="row" id="agents-container">
+            <!-- 代码将在JavaScript中动态生成 -->
+        </div>
+        
+        <div class="recent-activity fade-in animate-delay-4">
+            <h3>最近活动</h3>
+            <ul class="activity-list" id="activity-list">
+                <!-- 代码将在JavaScript中动态生成 -->
+            </ul>
+        </div>
+    </div>
+    
+    <script>
+        // DOM元素
+        const userNameElement = document.getElementById('user-name');
+        const welcomeNameElement = document.getElementById('welcome-name');
+        const logoutBtn = document.getElementById('logout-btn');
+        const accessButton = document.getElementById('access-button');
+        const agentsContainer = document.getElementById('agents-container');
+        const activityList = document.getElementById('activity-list');
+        
+        // 页面加载函数
+        document.addEventListener('DOMContentLoaded', function() {
+            // 检查登录状态
+            checkAuthStatus();
+            
+            // 加载用户的AI助手列表
+            loadAgents();
+            
+            // 初始化登出按钮
+            logoutBtn.addEventListener('click', logout);
+            
+            // 初始化访问令牌按钮
+            accessButton.addEventListener('click', accessWithToken);
+        });
+        
+        // 检查认证状态
+        async function checkAuthStatus() {
+            try {
+                const response = await fetch('/api/auth/check');
+                const data = await response.json();
+                
+                if (!data.success) {
+                    // 未登录，跳转到登录页面
+                    window.location.href = '/login.html';
+                    return;
+                }
+                
+                // 更新用户信息显示
+                userNameElement.textContent = data.user.name;
+                welcomeNameElement.textContent = data.user.name;
+                
+                // 如果不是学生，跳转到教师端
+                if (data.user.type !== 'student') {
+                    window.location.href = '/index.html';
+                }
+            } catch (error) {
+                console.error('验证登录状态出错:', error);
+                window.location.href = '/login.html';
+            }
+        }
+        
+        // 登出
+        async function logout() {
+            try {
+                const response = await fetch('/api/auth/logout', {
+                    method: 'POST'
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    window.location.href = '/login.html';
+                }
+            } catch (error) {
+                console.error('登出出错:', error);
+                alert('登出失败，请重试');
+            }
+        }
+        
+        // 加载Agent列表
+        async function loadAgents() {
+            try {
+                // 显示加载状态
+                agentsContainer.innerHTML = `
+                    <div class="col-12 text-center py-4">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">加载中...</span>
+                        </div>
+                        <p class="mt-3">正在加载AI助手列表...</p>
+                    </div>
+                `;
+                
+                // 获取Agent列表
+                const response = await fetch('/api/student/agents');
+                const result = await response.json();
+                
+                if (result.success) {
+                    const agents = result.agents || [];
+                    
+                    if (agents.length === 0) {
+                        agentsContainer.innerHTML = `
+                            <div class="col-12">
+                                <div class="alert alert-info">
+                                    <i class="bi bi-info-circle me-2"></i>
+                                    您还没有可用的AI助手。请向您的教师获取访问令牌。
+                                </div>
+                            </div>
+                        `;
+                        
+                        // 无Agent时，清空活动列表
+                        activityList.innerHTML = `
+                            <li class="text-center py-3 text-muted">
+                                暂无活动记录
+                            </li>
+                        `;
+                        
+                        return;
+                    }
+                    
+                    // 渲染Agent列表
+                    agentsContainer.innerHTML = '';
+                    
+                    agents.forEach(agent => {
+                        const col = document.createElement('div');
+                        col.className = 'col-lg-6 col-12 fade-in';
+                        
+                        // 格式化最后使用时间
+                        let lastUsedText = '从未使用';
+                        if (agent.last_used) {
+                            const lastUsedDate = new Date(agent.last_used * 1000);
+                            lastUsedText = lastUsedDate.toLocaleString();
+                        }
+                        
+                        // 构建插件标签
+                        let pluginsHtml = '';
+                        if (agent.plugins && agent.plugins.length > 0) {
+                            pluginsHtml = '<div class="agent-tags">';
+                            
+                            agent.plugins.forEach(plugin => {
+                                let pluginName = '未知插件';
+                                let pluginIcon = 'puzzle';
+                                
+                                if (plugin === 'code') {
+                                    pluginName = '代码执行';
+                                    pluginIcon = 'code-square';
+                                } else if (plugin === 'visualization') {
+                                    pluginName = '3D可视化';
+                                    pluginIcon = 'bar-chart';
+                                } else if (plugin === 'mindmap') {
+                                    pluginName = '思维导图';
+                                    pluginIcon = 'diagram-3';
+                                }
+                                
+                                pluginsHtml += `
+                                    <span class="agent-tag">
+                                        <i class="bi bi-${pluginIcon}"></i> ${pluginName}
+                                    </span>
+                                `;
+                            });
+                            
+                            pluginsHtml += '</div>';
+                        }
+                        
+                        // 构建主题和教师标签
+                        let metaHtml = '<div class="agent-meta">';
+                        
+                        if (agent.subject) {
+                            metaHtml += `
+                                <div class="agent-meta-item">
+                                    <i class="bi bi-book"></i> ${agent.subject}
+                                </div>
+                            `;
+                        }
+                        
+                        if (agent.instructor) {
+                            metaHtml += `
+                                <div class="agent-meta-item">
+                                    <i class="bi bi-person"></i> ${agent.instructor}
+                                </div>
+                            `;
+                        }
+                        
+                        metaHtml += `
+                            <div class="agent-meta-item">
+                                <i class="bi bi-clock"></i> 最后使用: ${lastUsedText}
+                            </div>
+                        </div>`;
+                        
+                        // 构建Agent卡片
+                        col.innerHTML = `
+                            <div class="agent-card">
+                                <div class="agent-card-header">
+                                    <h3 class="agent-card-title">
+                                        <i class="bi bi-robot"></i> ${agent.name}
+                                    </h3>
+                                </div>
+                                <div class="agent-card-content">
+                                    <div class="agent-card-description">
+                                        ${agent.description || '暂无描述'}
+                                    </div>
+                                    ${metaHtml}
+                                    ${pluginsHtml}
+                                    <div class="agent-actions">
+                                        <a href="/student/${agent.id}?token=${agent.token}" class="btn">
+                                            <i class="bi bi-chat-dots me-1"></i> 开始对话
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                        
+                        agentsContainer.appendChild(col);
+                    });
+                    
+                    // 生成简单的活动记录（实际中应从API获取）
+                    loadActivityRecords();
+                } else {
+                    agentsContainer.innerHTML = `
+                        <div class="col-12">
+                            <div class="alert alert-danger">
+                                <i class="bi bi-exclamation-triangle me-2"></i>
+                                加载Agent列表失败: ${result.message}
+                            </div>
+                        </div>
+                    `;
+                    
+                    // 加载失败时，清空活动列表
+                    activityList.innerHTML = `
+                        <li class="text-center py-3 text-muted">
+                            暂无活动记录
+                        </li>
+                    `;
+                }
+            } catch (error) {
+                console.error('加载Agent列表出错:', error);
+                agentsContainer.innerHTML = `
+                    <div class="col-12">
+                        <div class="alert alert-danger">
+                            <i class="bi bi-exclamation-triangle me-2"></i>
+                            加载Agent列表时发生错误，请刷新页面重试
+                        </div>
+                    </div>
+                `;
+            }
+        }
+        
+        // 加载活动记录（实际中应从API获取）
+        // 加载活动记录
+async function loadActivityRecords() {
+    try {
+        // 从API获取活动记录
+        const response = await fetch('/api/student/activities');
+        const result = await response.json();
+        
+        if (result.success) {
+            const activities = result.activities || [];
+            
+            if (activities.length === 0) {
+                activityList.innerHTML = `
+                    <li class="text-center py-3 text-muted">
+                        暂无活动记录
+                    </li>
+                `;
+                return;
+            }
+            
+            // 渲染活动记录
+            activityList.innerHTML = '';
+            
+            activities.forEach(activity => {
+                let iconClass = 'bi-activity';
+                
+                switch (activity.type) {
+                    case 'chat':
+                        iconClass = 'bi-chat-dots';
+                        break;
+                    case 'code':
+                        iconClass = 'bi-code-square';
+                        break;
+                    case 'viz':
+                        iconClass = 'bi-bar-chart';
+                        break;
+                    case 'mindmap':
+                        iconClass = 'bi-diagram-3';
+                        break;
+                }
+                
+                const li = document.createElement('li');
+                li.className = 'activity-item';
+                
+                // 如果有agent_id和token，添加链接
+                let titleHtml = `<h4 class="activity-title">${activity.title}</h4>`;
+                if (activity.agent_id) {
+                    // 查找对应Agent的token
+                    const agent = agents.find(a => a.id === activity.agent_id);
+                    if (agent && agent.token) {
+                        titleHtml = `
+                            <h4 class="activity-title">
+                                <a href="/student/${activity.agent_id}?token=${agent.token}">${activity.title}</a>
+                            </h4>
+                        `;
+                    }
+                }
+                
+                li.innerHTML = `
+                    <div class="activity-icon">
+                        <i class="bi ${iconClass}"></i>
+                    </div>
+                    <div class="activity-content">
+                        ${titleHtml}
+                        <div class="activity-time">${activity.time}</div>
+                    </div>
+                `;
+                
+                activityList.appendChild(li);
+            });
+        } else {
+            activityList.innerHTML = `
+                <li class="text-center py-3 text-muted">
+                    <i class="bi bi-exclamation-circle me-2"></i>
+                    无法加载活动记录
+                </li>
+            `;
+        }
+    } catch (error) {
+        console.error('加载活动记录出错:', error);
+        activityList.innerHTML = `
+            <li class="text-center py-3 text-muted">
+                <i class="bi bi-exclamation-circle me-2"></i>
+                加载活动记录时出错
+            </li>
+        `;
+    }
+}
+        // 使用令牌访问AI助手
+        async function accessWithToken() {
+            const token = document.getElementById('access-token').value.trim();
+            
+            if (!token) {
+                showMessage('请输入访问令牌', 'warning');
+                return;
+            }
+            
+            try {
+                // 验证令牌有效性
+                const response = await fetch('/api/verify_token', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ token })
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    // 令牌有效，重定向到Agent页面
+                    const agent = result.agent;
+                    window.location.href = `/student/${agent.id}?token=${token}`;
+                } else {
+                    showMessage(result.message || '无效的访问令牌', 'danger');
+                }
+            } catch (error) {
+                console.error('验证���牌出错:', error);
+                showMessage('验证令牌时发生错误，请重试', 'danger');
+            }
+        }
+        
+        // 显示提示消息
+        function showMessage(message, type) {
+            // 移除现有的提示
+            const existingAlert = document.querySelector('.token-input .alert');
+            if (existingAlert) {
+                existingAlert.remove();
+            }
+            
+            // 创建新提示
+            const alertDiv = document.createElement('div');
+            alertDiv.className = `alert alert-${type} mt-3`;
+            alertDiv.innerHTML = `
+                <i class="bi ${type === 'danger' ? 'bi-exclamation-triangle' : 'bi-info-circle'} me-2"></i>
+                ${message}
+            `;
+            
+            // 添加到令牌输入区域
+            document.querySelector('.token-input .input-group').insertAdjacentElement('afterend', alertDiv);
+            
+            // 3秒后自动移除
+            setTimeout(() => {
+                alertDiv.style.opacity = '0';
+                setTimeout(() => alertDiv.remove(), 300);
+            }, 3000);
+        }
+    </script>
+</body>
+</html>

_archive/templates/token_verification.html

@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>访问验证 - 教育AI助手平台</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        :root {
+            /* 优雅的配色方案 */
+            --primary-color: #0f2d49;
+            --primary-light: #234a70;
+            --secondary-color: #4a6cfd;
+            --secondary-light: #7b91ff;
+            --tertiary-color: #f7f9fe;
+            --success-color: #10b981;
+            --success-light: rgba(16, 185, 129, 0.1);
+            --warning-color: #f59e0b;
+            --warning-light: rgba(245, 158, 11, 0.1);
+            --info-color: #0ea5e9;
+            --info-light: rgba(14, 165, 233, 0.1);
+            --danger-color: #ef4444;
+            --danger-light: rgba(239, 68, 68, 0.1);
+            --neutral-50: #f9fafb;
+            --neutral-100: #f3f4f6;
+            --neutral-200: #e5e7eb;
+            --neutral-300: #d1d5db;
+            --neutral-400: #9ca3af;
+            --neutral-500: #6b7280;
+            --neutral-600: #4b5563;
+            --neutral-700: #374151;
+            --neutral-800: #1f2937;
+            --neutral-900: #111827;
+            
+            /* 样式变量 */
+            --border-radius-sm: 0.25rem;
+            --border-radius: 0.375rem;
+            --border-radius-lg: 0.5rem;
+            --border-radius-xl: 0.75rem;
+            --border-radius-2xl: 1rem;
+            --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
+            --card-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1);
+            --card-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --transition-base: all 0.2s ease-in-out;
+            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-family: 'Inter', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
+        }
+        
+        /* 基础样式 */
+        body {
+            font-family: var(--font-family);
+            background-color: var(--neutral-50);
+            color: var(--neutral-800);
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 600;
+            color: var(--neutral-900);
+        }
+        
+        .text-gradient {
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+        }
+        
+        /* 验证容器样式 */
+        .verification-container {
+            width: 100%;
+            max-width: 500px;
+            padding: 2.5rem;
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--card-shadow-lg);
+            transition: var(--transition-smooth);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .verification-container:hover {
+            box-shadow: var(--card-shadow-hover);
+        }
+        
+        .verification-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            border-radius: 4px 4px 0 0;
+        }
+        
+        .verification-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        
+        .verification-header h1 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.01em;
+        }
+        
+        .verification-header p {
+            color: var(--neutral-600);
+            margin-bottom: 0;
+            font-size: 0.95rem;
+        }
+        
+        /* 加载状态 */
+        .loading-container {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+        
+        .spinner-border {
+            width: 3rem;
+            height: 3rem;
+            color: var(--secondary-color);
+            margin-bottom: 1.5rem;
+        }
+        
+        .loading-container h2 {
+            margin-bottom: 0.75rem;
+            font-size: 1.4rem;
+            color: var(--primary-color);
+        }
+        
+        .loading-container p {
+            color: var(--neutral-600);
+            font-size: 0.95rem;
+        }
+        
+        /* Agent信息卡片 */
+        .agent-info {
+            padding: 1.5rem;
+            background-color: var(--neutral-50);
+            border-radius: var(--border-radius-lg);
+            margin-bottom: 1.75rem;
+            border: 1px solid var(--neutral-200);
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition-base);
+        }
+        
+        .agent-info:hover {
+            border-color: var(--secondary-color);
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.1);
+        }
+        
+        .agent-info::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, var(--secondary-color), var(--secondary-light));
+            border-radius: 4px 0 0 4px;
+        }
+        
+        .agent-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+        }
+        
+        .agent-title i {
+            margin-right: 0.75rem;
+            font-size: 1.1rem;
+            color: var(--secondary-color);
+        }
+        
+        .agent-description {
+            color: var(--neutral-700);
+            margin-bottom: 1rem;
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+        
+        .agent-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            font-size: 0.9rem;
+            color: var(--neutral-600);
+        }
+        
+        .agent-meta-item {
+            display: flex;
+            align-items: center;
+        }
+        
+        .agent-meta-item i {
+            margin-right: 0.5rem;
+            font-size: 0.95rem;
+            color: var(--secondary-color);
+        }
+        
+        /* 验证操作按钮 */
+        .verification-actions {
+            margin-bottom: 1.5rem;
+        }
+        
+        .btn {
+            font-weight: 500;
+            padding: 0.75rem 1.25rem;
+            border-radius: var(--border-radius-lg);
+            transition: var(--transition-base);
+        }
+        
+        .btn-primary {
+            background: linear-gradient(to right, var(--secondary-color), var(--secondary-light));
+            border: none;
+            color: white;
+        }
+        
+        .btn-primary:hover, .btn-primary:focus {
+            background: linear-gradient(to right, var(--secondary-light), var(--secondary-color));
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.3);
+            transform: translateY(-2px);
+        }
+        
+        .btn-outline-secondary {
+            color: var(--neutral-700);
+            border-color: var(--neutral-300);
+            background-color: white;
+        }
+        
+        .btn-outline-secondary:hover, .btn-outline-secondary:focus {
+            background-color: var(--neutral-100);
+            border-color: var(--neutral-400);
+            color: var(--neutral-900);
+        }
+        
+        /* 过期/错误状态 */
+        .expired-container {
+            text-align: center;
+            color: var(--danger-color);
+            margin-bottom: 1.5rem;
+        }
+        
+        .expired-container i {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: block;
+        }
+        
+        .expired-container h2 {
+            margin-bottom: 0.75rem;
+            font-size: 1.5rem;
+            color: var(--danger-color);
+        }
+        
+        .expired-container p {
+            color: var(--neutral-700);
+            margin-bottom: 1.5rem;
+        }
+        
+        /* 页脚样式 */
+        .verification-footer {
+            text-align: center;
+            margin-top: 2rem;
+            color: var(--neutral-500);
+            font-size: 0.85rem;
+        }
+        
+        .verification-footer a {
+            color: var(--secondary-color);
+            text-decoration: none;
+            transition: var(--transition-base);
+        }
+        
+        .verification-footer a:hover {
+            text-decoration: underline;
+            color: var(--secondary-light);
+        }
+        
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .fade-in {
+            opacity: 0;
+            animation: fadeIn 0.4s ease-out forwards;
+        }
+        
+        /* 响应式样式 */
+        @media (max-width: 576px) {
+            .verification-container {
+                padding: 1.5rem;
+                margin: 0 1rem;
+            }
+            
+            .verification-header h1 {
+                font-size: 1.5rem;
+            }
+            
+            .agent-title {
+                font-size: 1.15rem;
+            }
+            
+            .agent-meta {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="verification-container fade-in" id="main-container">
+        <div class="loading-container" id="loading-container">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">验证中...</span>
+            </div>
+            <h2>正在验证访问权限</h2>
+            <p class="text-muted">请稍候，我们正在验证您的访问令牌...</p>
+        </div>
+        
+        <div class="verification-header" id="verification-header" style="display: none;">
+            <h1>访问 AI 助手</h1>
+            <p>您正在使用访问令牌访问以下 AI 助手</p>
+        </div>
+        
+        <div class="agent-info" id="agent-info" style="display: none;">
+            <!-- 将由JavaScript填充 -->
+        </div>
+        
+        <div class="verification-actions" id="verification-actions" style="display: none;">
+            <div class="row g-3">
+                <div class="col-12">
+                    <button class="btn btn-primary w-100" id="access-btn">
+                        <i class="bi bi-robot me-2"></i>开始对话
+                    </button>
+                </div>
+                <div class="col-12">
+                    <button class="btn btn-outline-secondary w-100" id="back-btn">
+                        <i class="bi bi-arrow-left me-2"></i>返回
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="expired-container" id="expired-container" style="display: none;">
+            <i class="bi bi-exclamation-triangle"></i>
+            <h2>访问令牌无效</h2>
+            <p>您使用的访问令牌无效或已过期，请联系教师获取新的访问令牌。</p>
+            <button class="btn btn-outline-secondary mt-3" id="back-btn-expired">
+                <i class="bi bi-arrow-left me-2"></i>返回
+            </button>
+        </div>
+        
+        <div class="verification-footer" id="verification-footer" style="display: none;">
+            <p>教育 AI 助手平台 | <a href="/login.html">登录</a></p>
+        </div>
+    </div>
+    
+    <script>
+        // 解析URL参数
+        function getUrlParams() {
+            const queryString = window.location.search;
+            const urlParams = new URLSearchParams(queryString);
+            const pathParts = window.location.pathname.split('/');
+            
+            return {
+                agentId: pathParts[pathParts.length - 1] || '',
+                token: urlParams.get('token') || ''
+            };
+        }
+        
+        // 页面加载函数
+        document.addEventListener('DOMContentLoaded', async function() {
+            const { agentId, token } = getUrlParams();
+            
+            if (!token) {
+                showExpiredState('未提供访问令牌');
+                return;
+            }
+            
+            try {
+                // 验证令牌
+                const response = await fetch('/api/verify_token', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ 
+                        token: token,
+                        agent_id: agentId
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    // 显示Agent信息
+                    showAgentInfo(result.agent);
+                } else {
+                    showExpiredState(result.message);
+                }
+            } catch (error) {
+                console.error('验证出错:', error);
+                showExpiredState('验证过程中出错');
+            }
+        });
+        
+        // 显示Agent信息
+        function showAgentInfo(agent) {
+            // 隐藏加载区域
+            document.getElementById('loading-container').style.display = 'none';
+            
+            // 显示验证内容
+            document.getElementById('verification-header').style.display = 'block';
+            document.getElementById('agent-info').style.display = 'block';
+            document.getElementById('verification-actions').style.display = 'block';
+            document.getElementById('verification-footer').style.display = 'block';
+            
+            // 填充Agent信息
+            const agentInfoElement = document.getElementById('agent-info');
+            
+            // 构建主题和教师信息
+            let metaHtml = '<div class="agent-meta">';
+            
+            if (agent.subject) {
+                metaHtml += `
+                    <div class="agent-meta-item">
+                        <i class="bi bi-book"></i>
+                        ${agent.subject}
+                    </div>
+                `;
+            }
+            
+            if (agent.instructor) {
+                metaHtml += `
+                    <div class="agent-meta-item">
+                        <i class="bi bi-person"></i>
+                        ${agent.instructor}
+                    </div>
+                `;
+            }
+            
+            metaHtml += '</div>';
+            
+            agentInfoElement.innerHTML = `
+                <div class="agent-title">
+                    <i class="bi bi-robot"></i>${agent.name}
+                </div>
+                <div class="agent-description">
+                    ${agent.description || '暂无描述'}
+                </div>
+                ${metaHtml}
+            `;
+            
+            // 设置按钮链接
+            document.getElementById('access-btn').addEventListener('click', function() {
+                const { token } = getUrlParams();
+                window.location.href = `/student/${agent.id}?token=${token}`;
+            });
+            
+            document.getElementById('back-btn').addEventListener('click', function() {
+                // 检查是否从学生门户进入
+                const hasHistory = document.referrer.includes('student_portal.html');
+                if (hasHistory) {
+                    window.history.back();
+                } else {
+                    window.location.href = '/student_portal.html';
+                }
+            });
+        }
+        
+        // 显示过期状态
+        function showExpiredState(message) {
+            // 隐藏加载区域
+            document.getElementById('loading-container').style.display = 'none';
+            
+            // 显示过期内容
+            document.getElementById('expired-container').style.display = 'block';
+            document.getElementById('verification-footer').style.display = 'block';
+            
+            // 更新过期消息
+            const expiredContainer = document.getElementById('expired-container');
+            expiredContainer.querySelector('p').textContent = message || '您使用的访问令牌无效或已过期，请联系教师获取新的访问令牌。';
+            
+            // 设置返回按钮
+            document.getElementById('back-btn-expired').addEventListener('click', function() {
+                // 检查是否从学生门户进入
+                const hasHistory = document.referrer.includes('student_portal.html');
+                if (hasHistory) {
+                    window.history.back();
+                } else {
+                    window.location.href = '/login.html';
+                }
+            });
+        }
+    </script>
+</body>
+</html>

app.py

@@ -0,0 +1,987 @@
+from flask import Flask, request, jsonify, send_from_directory, redirect, url_for, session
+from student_management import register_student_routes
+from flask_cors import CORS
+import os
+import time
+import traceback
+import json
+import re
+import sys
+import io
+import threading
+import queue
+import contextlib
+import signal
+import psutil
+from dotenv import load_dotenv
+
+# 导入模块路由
+from modules.knowledge_base.routes import knowledge_bp
+from modules.code_executor.routes import code_executor_bp
+from modules.visualization.routes import visualization_bp
+from modules.agent_builder.routes import agent_builder_bp
+from modules.auth.routes import auth_bp
+
+# 加载环境变量
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+# 设置session密钥
+app.secret_key = os.getenv("SECRET_KEY", "your_secret_key_here")
+
+# 注册蓝图
+app.register_blueprint(knowledge_bp, url_prefix='/api/knowledge')
+app.register_blueprint(code_executor_bp, url_prefix='/api/code')
+app.register_blueprint(visualization_bp, url_prefix='/api/visualization')
+app.register_blueprint(agent_builder_bp, url_prefix='/api/agent')
+app.register_blueprint(auth_bp, url_prefix='/api/auth')
+
+# 确保目录存在
+os.makedirs('static', exist_ok=True)
+os.makedirs('uploads', exist_ok=True)
+os.makedirs('agents', exist_ok=True)
+
+# 用于代码执行的上下文
+execution_contexts = {}
+
+# 硬编码用户（仅用于演示）
+users = {
+    "teachers": [
+        {"username": "teacher", "password": "123456", "name": "李志刚"},
+        {"username": "admin", "password": "admin123", "name": "管理员"}
+    ],
+    "students": [
+        {"username": "student1", "password": "123456", "name": "张三"},
+        {"username": "student2", "password": "123456", "name": "李四"}
+    ]
+}
+
+# 学生活动记录存储（实际应用中应使用数据库）
+student_activities = {}
+
+def get_memory_usage():
+    """获取当前进程的内存使用情况"""
+    process = psutil.Process(os.getpid())
+    return f"{process.memory_info().rss / 1024 / 1024:.1f} MB"
+
+class CustomStdin:
+    def __init__(self, input_queue):
+        self.input_queue = input_queue
+        self.buffer = ""
+    
+    def readline(self):
+        if not self.buffer:
+            self.buffer = self.input_queue.get() + "\n"
+        
+        result = self.buffer
+        self.buffer = ""
+        return result
+
+class InteractiveExecution:
+    """管理Python代码的交互式执行"""
+    def __init__(self, code):
+        self.code = code
+        self.context_id = str(time.time())
+        self.is_complete = False
+        self.is_waiting_for_input = False
+        self.stdout_buffer = io.StringIO()
+        self.last_read_position = 0
+        self.input_queue = queue.Queue()
+        self.error = None
+        self.thread = None
+        self.should_terminate = False
+    
+    def run(self):
+        """在单独的线程中启动执行"""
+        self.thread = threading.Thread(target=self._execute)
+        self.thread.daemon = True
+        self.thread.start()
+        
+        # 给执行一点时间开始
+        time.sleep(0.1)
+        return self.context_id
+    
+    def _execute(self):
+        """执行代码，处理标准输入输出"""
+        try:
+            # 保存原始的stdin/stdout
+            orig_stdin = sys.stdin
+            orig_stdout = sys.stdout
+            
+            # 创建自定义stdin
+            custom_stdin = CustomStdin(self.input_queue)
+            
+            # 重定向stdin和stdout
+            sys.stdin = custom_stdin
+            sys.stdout = self.stdout_buffer
+            
+            try:
+                # 检查终止的函数
+                self._last_check_time = 0
+                
+                def check_termination():
+                    if self.should_terminate:
+                        raise KeyboardInterrupt("Execution terminated by user")
+                
+                # 设置一个模拟__main__模块的命名空间
+                shared_namespace = {
+                    "__builtins__": __builtins__,
+                    "_check_termination": check_termination,
+                    "time": time, 
+                    "__name__": "__main__"
+                }
+                
+                # 在这个命名空间中执行用户代码
+                try:
+                    exec(self.code, shared_namespace)
+                except KeyboardInterrupt:
+                    print("\nExecution terminated by user")
+                
+            except Exception as e:
+                self.error = {
+                    "error": str(e),
+                    "traceback": traceback.format_exc()
+                }
+            
+            finally:
+                # 恢复原始stdin/stdout
+                sys.stdin = orig_stdin
+                sys.stdout = orig_stdout
+                
+                # 标记执行完成
+                self.is_complete = True
+                
+        except Exception as e:
+            self.error = {
+                "error": str(e),
+                "traceback": traceback.format_exc()
+            }
+            self.is_complete = True
+    
+    def terminate(self):
+        """终止执行"""
+        self.should_terminate = True
+        
+        # 如果在等待输入，放入一些内容以解除阻塞
+        if self.is_waiting_for_input:
+            self.input_queue.put("\n")
+        
+        # 给执行一点时间终止
+        time.sleep(0.2)
+        
+        # 标记为完成
+        self.is_complete = True
+        
+        return True
+    
+    def provide_input(self, user_input):
+        """为运行的代码提供输入"""
+        self.input_queue.put(user_input)
+        self.is_waiting_for_input = False
+        return True
+    
+    def get_output(self):
+        """获取stdout缓冲区的当前内容"""
+        output = self.stdout_buffer.getvalue()
+        return output
+        
+    def get_new_output(self):
+        """只获取自上次读取以来的新输出"""
+        current_value = self.stdout_buffer.getvalue()
+        if self.last_read_position < len(current_value):
+            new_output = current_value[self.last_read_position:]
+            self.last_read_position = len(current_value)
+            return new_output
+        return ""
+
+# 记录活动函数（可在各个操作点调用）
+def record_student_activity(username, activity_type, title, agent_id=None, agent_name=None):
+    """记录学生活动"""
+    if username not in student_activities:
+        student_activities[username] = []
+    
+    # 创建活动记录
+    activity = {
+        "type": activity_type,  # 'chat', 'code', 'viz', 'mindmap'
+        "title": title,
+        "timestamp": int(time.time()),
+        "agent_id": agent_id,
+        "agent_name": agent_name
+    }
+    
+    # 添加到用户活动列表（最多保存20条记录）
+    student_activities[username].insert(0, activity)
+    if len(student_activities[username]) > 20:
+        student_activities[username] = student_activities[username][:20]
+    
+    return activity
+
+# 登录相关路由
+@app.route('/login.html')
+def login_page():
+    """登录页面"""
+    return render_template('login.html')
+
+@app.route('/api/auth/login', methods=['POST'])
+def login():
+    """处理登录请求"""
+    data = request.json
+    username = data.get('username')
+    password = data.get('password')
+    user_type = data.get('type', 'teacher')  # 默认为教师
+    
+    if user_type == 'teacher':
+        user_list = users['teachers']
+    else:
+        user_list = users['students']
+    
+    for user in user_list:
+        if user['username'] == username and user['password'] == password:
+            # 设置session
+            session['logged_in'] = True
+            session['username'] = username
+            session['user_type'] = user_type
+            session['user_name'] = user['name']
+            
+            return jsonify({
+                'success': True,
+                'user': {
+                    'name': user['name'],
+                    'type': user_type
+                }
+            })
+    
+    return jsonify({
+        'success': False,
+        'message': '用户名或密码错误'
+    }), 401
+
+@app.route('/api/auth/logout', methods=['POST'])
+def logout():
+    """处理登出请求"""
+    session.clear()
+    return jsonify({
+        'success': True
+    })
+
+@app.route('/api/auth/check', methods=['GET'])
+def check_auth():
+    """检查用户是否已登录"""
+    if session.get('logged_in'):
+        return jsonify({
+            'success': True,
+            'user': {
+                'name': session.get('user_name'),
+                'type': session.get('user_type')
+            }
+        })
+    
+    return jsonify({
+        'success': False
+    }), 401
+
+# 登录验证装饰器
+def login_required(f):
+    def decorated_function(*args, **kwargs):
+        if not session.get('logged_in'):
+            return redirect(url_for('login_page'))
+        return f(*args, **kwargs)
+    decorated_function.__name__ = f.__name__
+    return decorated_function
+
+# 教师角色验证装饰器
+def teacher_required(f):
+    def decorated_function(*args, **kwargs):
+        if not session.get('logged_in') or session.get('user_type') != 'teacher':
+            return jsonify({
+                'success': False,
+                'message': '需要教师权限'
+            }), 403
+        return f(*args, **kwargs)
+    decorated_function.__name__ = f.__name__
+    return decorated_function
+
+# 学生角色验证装饰器
+def student_required(f):
+    def decorated_function(*args, **kwargs):
+        if not session.get('logged_in') or session.get('user_type') != 'student':
+            return jsonify({
+                'success': False,
+                'message': '需要学生权限'
+            }), 403
+        return f(*args, **kwargs)
+    decorated_function.__name__ = f.__name__
+    return decorated_function
+
+# React 前端静态文件目录
+FRONTEND_DIST = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static', 'dist')
+
+# 首页路由 - 托管 React 前端
+@app.route('/')
+def root():
+    return send_from_directory(FRONTEND_DIST, 'index.html')
+
+@app.route('/api/progress/<task_id>', methods=['GET'])
+def get_progress(task_id):
+    """获取文档处理进度"""
+    try:
+        # 从知识库模块访问处理任务
+        from modules.knowledge_base.routes import processing_tasks
+        
+        progress_data = processing_tasks.get(task_id, {
+            'progress': 0,
+            'status': '未找到任务',
+            'error': True
+        })
+        
+        return jsonify({"success": True, "data": progress_data})
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({"success": False, "message": str(e)}), 500
+
+@app.route('/student/<agent_id>')
+def student_view(agent_id):
+    """学生访问Agent界面"""
+    token = request.args.get('token', '')
+    
+    # 验证Agent存在
+    agent_path = os.path.join('agents', f"{agent_id}.json")
+    if not os.path.exists(agent_path):
+        return render_template('error.html', 
+                              message="找不到指定的Agent",
+                              error_code=404)
+    
+    # 加载Agent配置
+    with open(agent_path, 'r', encoding='utf-8') as f:
+        try:
+            agent_config = json.load(f)
+        except:
+            return render_template('error.html', 
+                                  message="Agent配置无效",
+                                  error_code=500)
+    
+    # 验证访问令牌
+    if token:
+        valid_token = False
+        if "distributions" in agent_config:
+            for dist in agent_config["distributions"]:
+                if dist.get("token") == token:
+                    valid_token = True
+                    break
+        
+        if not valid_token:
+            return render_template('token_verification.html', 
+                                  message="访问令牌无效",
+                                  error_code=403)
+    
+    # 更新使用统计
+    if "distributions" in agent_config:
+        for dist in agent_config["distributions"]:
+            if dist.get("token") == token:
+                # 更新分发使用次数
+                dist["usage_count"] = dist.get("usage_count", 0) + 1
+                
+                # 更新Agent使用统计
+                if "stats" not in agent_config:
+                    agent_config["stats"] = {}
+                
+                agent_config["stats"]["usage_count"] = agent_config["stats"].get("usage_count", 0) + 1
+                agent_config["stats"]["last_used"] = int(time.time())
+                
+                # 保存更新后的Agent配置
+                with open(agent_path, 'w', encoding='utf-8') as f:
+                    json.dump(agent_config, f, ensure_ascii=False, indent=2)
+                
+                break
+    
+    # 渲染学生页面
+    return render_template('student.html', 
+                          agent_id=agent_id,
+                          agent_name=agent_config.get('name', 'AI学习助手'),
+                          agent_description=agent_config.get('description', ''),
+                          token=token)
+
+@app.route('/api/student/chat/<agent_id>', methods=['POST'])
+def student_chat(agent_id):
+    """学生与Agent聊天的API"""
+    try:
+        data = request.json
+        message = data.get('message', '')
+        token = data.get('token', '')
+        
+        if not message:
+            return jsonify({"success": False, "message": "消息不能为空"}), 400
+        
+        # 验证Agent和令牌
+        agent_path = os.path.join('agents', f"{agent_id}.json")
+        if not os.path.exists(agent_path):
+            return jsonify({"success": False, "message": "Agent不存在"}), 404
+        
+        with open(agent_path, 'r', encoding='utf-8') as f:
+            agent_config = json.load(f)
+        
+        # 验证令牌（如果提供）
+        if token and "distributions" in agent_config:
+            valid_token = False
+            for dist in agent_config["distributions"]:
+                if dist.get("token") == token:
+                    valid_token = True
+                    
+                    # 更新使用计数
+                    dist["usage_count"] = dist.get("usage_count", 0) + 1
+                    break
+            
+            if not valid_token:
+                return jsonify({"success": False, "message": "访问令牌无效"}), 403
+                
+        # 更新Agent使用统计
+        if "stats" not in agent_config:
+            agent_config["stats"] = {}
+        
+        agent_config["stats"]["usage_count"] = agent_config["stats"].get("usage_count", 0) + 1
+        agent_config["stats"]["last_used"] = int(time.time())
+        
+        # 保存更新后的Agent配置
+        with open(agent_path, 'w', encoding='utf-8') as f:
+            json.dump(agent_config, f, ensure_ascii=False, indent=2)
+        
+        # 获取Agent关联的知识库和插件
+        knowledge_bases = agent_config.get('knowledge_bases', [])
+        plugins = agent_config.get('plugins', [])
+        
+        # 获取学科和指导者信息
+        subject = agent_config.get('subject', agent_config.get('name', '通用学科'))
+        instructor = agent_config.get('instructor', '教师')
+        
+        # 创建Generator实例，传入学科和指导者信息
+        from modules.knowledge_base.generator import Generator
+        generator = Generator(subject=subject, instructor=instructor)
+        
+        # 检测需要使用的插件
+        suggested_plugins = []
+            
+        # 检测是否需要代码执行插件
+        if 'code' in plugins and ('代码' in message or 'python' in message.lower() or '编程' in message or 'code' in message.lower() or 'program' in message.lower()):
+            suggested_plugins.append('code')
+                
+        # 检测是否需要3D可视化插件
+        if 'visualization' in plugins and ('3d' in message.lower() or '可视化' in message or '图形' in message):
+            suggested_plugins.append('visualization')
+                
+        # 检测是否需要思维导图插件
+        if 'mindmap' in plugins and ('思维导图' in message or 'mindmap' in message.lower()):
+            suggested_plugins.append('mindmap')
+        
+        # 记录活动（添加此部分代码）
+        if session.get('logged_in'):
+            username = session.get('username')
+            # 记录对话活动
+            record_student_activity(
+                username=username,
+                activity_type='chat',
+                title=f'与 {agent_config.get("name", "AI助手")} 进行了对话',
+                agent_id=agent_id,
+                agent_name=agent_config.get('name')
+            )
+            
+            # 如果使用了插件，记录相应的插件活动
+            if 'code' in suggested_plugins:
+                record_student_activity(
+                    username=username,
+                    activity_type='code',
+                    title='执行了Python代码',
+                    agent_id=agent_id,
+                    agent_name=agent_config.get('name')
+                )
+            
+            if 'visualization' in suggested_plugins:
+                record_student_activity(
+                    username=username,
+                    activity_type='viz',
+                    title='查看了3D可视化图形',
+                    agent_id=agent_id,
+                    agent_name=agent_config.get('name')
+                )
+                
+            if 'mindmap' in suggested_plugins:
+                record_student_activity(
+                    username=username,
+                    activity_type='mindmap',
+                    title='生成了思维导图',
+                    agent_id=agent_id,
+                    agent_name=agent_config.get('name')
+                )
+        
+        # 检查是否有配置知识库
+        if not knowledge_bases:
+            # 没有知识库，直接使用模型进行回答
+            print(f"\n=== 处理查询: {message} (无知识库) ===")
+
+            # 创建SSE流式响应
+            def generate_sse():
+                try:
+                    # 发送开始事件
+                    yield f"data: {json.dumps({'type': 'start', 'plugins': suggested_plugins}, ensure_ascii=False)}\n\n"
+
+                    # 流式生成回答
+                    for chunk in generator.generate_stream(message, []):
+                        if isinstance(chunk, dict):
+                            yield f"data: {json.dumps({'type': 'metadata', 'content': chunk}, ensure_ascii=False)}\n\n"
+                        else:
+                            yield f"data: {json.dumps({'type': 'content', 'content': chunk}, ensure_ascii=False)}\n\n"
+
+                    # 发送结束事件
+                    yield f"data: {json.dumps({'type': 'done'}, ensure_ascii=False)}\n\n"
+                except Exception as e:
+                    yield f"data: {json.dumps({'type': 'error', 'content': str(e)}, ensure_ascii=False)}\n\n"
+
+            # 返回SSE响应
+            from flask import Response
+            return Response(
+                generate_sse(),
+                mimetype='text/event-stream',
+                headers={
+                    'Cache-Control': 'no-cache',
+                    'X-Accel-Buffering': 'no',
+                    'Access-Control-Allow-Origin': '*'
+                }
+            )
+        
+        # 有知识库配置，执行知识库查询流程
+        try:
+            # 导入RAG系统组件
+            from modules.knowledge_base.retriever import Retriever
+            from modules.knowledge_base.reranker import Reranker
+            
+            retriever = Retriever()
+            reranker = Reranker()
+            
+            # 构建工具定义 - 将所有知识库作为工具
+            tools = []
+            
+            # 创建工具名称到索引的映射
+            tool_to_index = {}
+            
+            for i, index in enumerate(knowledge_bases):
+                display_name = index[4:] if index.startswith('rag_') else index
+                
+                # 判断是否是视频知识库
+                is_video = "视频" in display_name or "video" in display_name.lower()
+                
+                # 根据内容类型生成适当的工具名称
+                if is_video:
+                    tool_name = f"video_knowledge_base_{i+1}"
+                    description = f"在'{display_name}'视频知识库中搜索，返回带时间戳的视频链接。适用于需要视频讲解的问题。"
+                else:
+                    tool_name = f"knowledge_base_{i+1}"
+                    description = f"在'{display_name}'知识库中搜索专业知识、概念和原理。适用于需要文本说明的问题。"
+                
+                # 添加工具名到索引的映射
+                tool_to_index[tool_name] = index
+                
+                tools.append({
+                    "type": "function",
+                    "function": {
+                        "name": tool_name,
+                        "description": description,
+                        "parameters": {
+                            "type": "object",
+                            "properties": {
+                                "keywords": {
+                                    "type": "array",
+                                    "items": {"type": "string"},
+                                    "description": "搜索的关键词列表"
+                                }
+                            },
+                            "required": ["keywords"],
+                            "additionalProperties": False
+                        },
+                        "strict": True
+                    }
+                })
+            
+            # 第一阶段：工具选择决策
+            print(f"\n=== 处理查询: {message} ===")
+            tool_calls = generator.extract_keywords_with_tools(message, tools)
+            
+            # 如果不需要调用工具，直接回答
+            if not tool_calls:
+                print("未检测到需要使用知识库，直接回答")
+
+                # 创建SSE流式响应
+                def generate_sse_no_tools():
+                    try:
+                        yield f"data: {json.dumps({'type': 'start', 'plugins': suggested_plugins}, ensure_ascii=False)}\n\n"
+
+                        for chunk in generator.generate_stream(message, []):
+                            if isinstance(chunk, dict):
+                                yield f"data: {json.dumps({'type': 'metadata', 'content': chunk}, ensure_ascii=False)}\n\n"
+                            else:
+                                yield f"data: {json.dumps({'type': 'content', 'content': chunk}, ensure_ascii=False)}\n\n"
+
+                        yield f"data: {json.dumps({'type': 'done'}, ensure_ascii=False)}\n\n"
+                    except Exception as e:
+                        yield f"data: {json.dumps({'type': 'error', 'content': str(e)}, ensure_ascii=False)}\n\n"
+
+                # 返回SSE响应
+                from flask import Response
+                return Response(
+                    generate_sse_no_tools(),
+                    mimetype='text/event-stream',
+                    headers={
+                        'Cache-Control': 'no-cache',
+                        'X-Accel-Buffering': 'no',
+                        'Access-Control-Allow-Origin': '*'
+                    }
+                )
+            
+            # 收集来自工具执行的所有文档
+            all_docs = []
+            
+            # 执行每个工具调用
+            for tool_call in tool_calls:
+                try:
+                    tool_name = tool_call["function"]["name"]
+                    actual_index = tool_to_index.get(tool_name)
+                    
+                    if not actual_index:
+                        print(f"找不到工具名称 '{tool_name}' 对应的索引")
+                        continue
+                    
+                    print(f"\n执行工具 '{tool_name}' -> 使用索引 '{actual_index}'")
+                    
+                    arguments = json.loads(tool_call["function"]["arguments"])
+                    keywords = " ".join(arguments.get("keywords", []))
+                    
+                    if not keywords:
+                        print("没有提供关键词，跳过检索")
+                        continue
+                    
+                    print(f"检索关键词: {keywords}")
+                    
+                    # 执行检索
+                    retrieved_docs, _ = retriever.retrieve(keywords, specific_index=actual_index)
+                    print(f"检索到 {len(retrieved_docs)} 个文档")
+                    
+                    # 重排序文档
+                    reranked_docs = reranker.rerank(message, retrieved_docs, actual_index)
+                    print(f"重排序完成，排序后有 {len(reranked_docs)} 个文档")
+                    
+                    # 添加结果
+                    all_docs.extend(reranked_docs)
+                    
+                except Exception as e:
+                    print(f"执行工具 '{tool_call.get('function', {}).get('name', '未知')}' 调用时出错: {str(e)}")
+                    import traceback
+                    traceback.print_exc()
+            
+            # 如果没有检索到任何文档，直接回答
+            if not all_docs:
+                print("未检索到任何相关文档，直接回答")
+
+                # 创建SSE流式响应（即使没有文档也要流式输出）
+                def generate_sse_no_docs():
+                    try:
+                        yield f"data: {json.dumps({'type': 'start', 'plugins': suggested_plugins}, ensure_ascii=False)}\n\n"
+
+                        for chunk in generator.generate_stream(message, []):
+                            if isinstance(chunk, dict):
+                                yield f"data: {json.dumps({'type': 'metadata', 'content': chunk}, ensure_ascii=False)}\n\n"
+                            else:
+                                yield f"data: {json.dumps({'type': 'content', 'content': chunk}, ensure_ascii=False)}\n\n"
+
+                        yield f"data: {json.dumps({'type': 'done'}, ensure_ascii=False)}\n\n"
+                    except Exception as e:
+                        yield f"data: {json.dumps({'type': 'error', 'content': str(e)}, ensure_ascii=False)}\n\n"
+
+                # 返回SSE响应
+                from flask import Response
+                return Response(
+                    generate_sse_no_docs(),
+                    mimetype='text/event-stream',
+                    headers={
+                        'Cache-Control': 'no-cache',
+                        'X-Accel-Buffering': 'no',
+                        'Access-Control-Allow-Origin': '*'
+                    }
+                )
+            
+            # 按相关性排序
+            all_docs.sort(key=lambda x: x.get('rerank_score', 0), reverse=True)
+            print(f"\n最终收集到 {len(all_docs)} 个文档用于生成回答")
+            
+            # 提取参考信息
+            references = []
+            for i, doc in enumerate(all_docs[:3], 1):  # 只展示前3个参考来源
+                file_name = doc['metadata'].get('file_name', '未知文件')
+                content = doc['content']
+
+                # 提取大约前100字符作为摘要
+                summary = content[:100] + ('...' if len(content) > 100 else '')
+
+                references.append({
+                    'index': i,
+                    'file_name': file_name,
+                    'content': content,
+                    'summary': summary
+                })
+
+            # 第二阶段：生成最终答案 - 流式响应
+            def generate_sse_with_kb():
+                try:
+                    yield f"data: {json.dumps({'type': 'start', 'plugins': suggested_plugins, 'references': references}, ensure_ascii=False)}\n\n"
+
+                    for chunk in generator.generate_stream(message, all_docs):
+                        if isinstance(chunk, dict):
+                            yield f"data: {json.dumps({'type': 'metadata', 'content': chunk}, ensure_ascii=False)}\n\n"
+                        else:
+                            yield f"data: {json.dumps({'type': 'content', 'content': chunk}, ensure_ascii=False)}\n\n"
+
+                    yield f"data: {json.dumps({'type': 'done'}, ensure_ascii=False)}\n\n"
+                except Exception as e:
+                    yield f"data: {json.dumps({'type': 'error', 'content': str(e)}, ensure_ascii=False)}\n\n"
+
+            # 返回SSE响应
+            from flask import Response
+            return Response(
+                generate_sse_with_kb(),
+                mimetype='text/event-stream',
+                headers={
+                    'Cache-Control': 'no-cache',
+                    'X-Accel-Buffering': 'no',
+                    'Access-Control-Allow-Origin': '*'
+                }
+            )
+            
+        except Exception as e:
+            import traceback
+            traceback.print_exc()
+            return jsonify({
+                "success": False, 
+                "message": f"处理查询时出错: {str(e)}"
+            }), 500
+            
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({"success": False, "message": str(e)}), 500
+
+# API端点：获取学生活动记录
+@app.route('/api/student/activities', methods=['GET'])
+@student_required
+def get_student_activities():
+    """获取学生活动记录"""
+    try:
+        username = session.get('username')
+        
+        # 获取该学生的活动记录
+        activities = student_activities.get(username, [])
+        
+        # 格式化输出
+        formatted_activities = []
+        for activity in activities:
+            # 格式化时间显示
+            timestamp = activity['timestamp']
+            current_time = int(time.time())
+            
+            if current_time - timestamp < 86400:  # 24小时内
+                if current_time - timestamp < 3600:  # 1小时内
+                    time_text = f"{(current_time - timestamp) // 60}分钟前"
+                else:
+                    time_text = f"今天 {time.strftime('%H:%M', time.localtime(timestamp))}"
+            elif current_time - timestamp < 172800:  # 48小时内
+                time_text = f"昨天 {time.strftime('%H:%M', time.localtime(timestamp))}"
+            else:
+                time_text = time.strftime('%m月%d日 %H:%M', time.localtime(timestamp))
+            
+            formatted_activities.append({
+                "type": activity['type'],
+                "title": activity['title'],
+                "time": time_text,
+                "agent_id": activity.get('agent_id'),
+                "agent_name": activity.get('agent_name')
+            })
+        
+        return jsonify({
+            "success": True,
+            "activities": formatted_activities
+        })
+    
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({
+            "success": False,
+            "message": str(e)
+        }), 500
+
+# API端点：验证访问令牌
+@app.route('/api/verify_token', methods=['POST'])
+def verify_token():
+    """验证访问令牌有效性"""
+    try:
+        data = request.json
+        token = data.get('token', '')
+        agent_id = data.get('agent_id', '')
+        
+        if not token:
+            return jsonify({
+                "success": False,
+                "message": "未提供访问令牌"
+            }), 400
+        
+        # 如果提供了agent_id，验证特定Agent的令牌
+        if agent_id:
+            agent_path = os.path.join('agents', f"{agent_id}.json")
+            if not os.path.exists(agent_path):
+                return jsonify({
+                    "success": False,
+                    "message": "Agent不存在"
+                }), 404
+            
+            with open(agent_path, 'r', encoding='utf-8') as f:
+                agent_config = json.load(f)
+            
+            # 验证令牌
+            if "distributions" in agent_config:
+                for dist in agent_config["distributions"]:
+                    if dist.get("token") == token:
+                        # 检查是否过期
+                        if dist.get("expires_at", 0) > 0 and dist.get("expires_at", 0) < time.time():
+                            return jsonify({
+                                "success": False,
+                                "message": "访问令牌已过期"
+                            })
+                        
+                        return jsonify({
+                            "success": True,
+                            "agent": {
+                                "id": agent_id,
+                                "name": agent_config.get('name', 'AI学习助手'),
+                                "description": agent_config.get('description', ''),
+                                "subject": agent_config.get('subject', ''),
+                                "instructor": agent_config.get('instructor', '教师')
+                            }
+                        })
+            
+            return jsonify({
+                "success": False,
+                "message": "访问令牌无效"
+            })
+        
+        # 如果没有提供agent_id，搜索所有Agent
+        valid_agent = None
+        
+        for filename in os.listdir('agents'):
+            if filename.endswith('.json'):
+                agent_path = os.path.join('agents', filename)
+                with open(agent_path, 'r', encoding='utf-8') as f:
+                    agent_config = json.load(f)
+                
+                # 验证令牌
+                if "distributions" in agent_config:
+                    for dist in agent_config["distributions"]:
+                        if dist.get("token") == token:
+                            # 检查是否过���
+                            if dist.get("expires_at", 0) > 0 and dist.get("expires_at", 0) < time.time():
+                                continue
+                            
+                            valid_agent = {
+                                "id": agent_config.get('id'),
+                                "name": agent_config.get('name', 'AI学习助手'),
+                                "description": agent_config.get('description', ''),
+                                "subject": agent_config.get('subject', ''),
+                                "instructor": agent_config.get('instructor', '教师')
+                            }
+                            break
+                
+                if valid_agent:
+                    break
+        
+        if valid_agent:
+            return jsonify({
+                "success": True,
+                "agent": valid_agent
+            })
+        
+        return jsonify({
+            "success": False,
+            "message": "未找到匹配的访问令牌"
+        })
+    
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({
+            "success": False,
+            "message": f"验证访问令牌时出错: {str(e)}"
+        }), 500
+
+# API端点：获取学生的Agent列表
+@app.route('/api/student/agents', methods=['GET'])
+@student_required
+def get_student_agents():
+    """获取学生可访问的Agent列表"""
+    try:
+        # 实际应用中应根据学生ID过滤
+        # 这里简化为获取所有Agent
+        agents = []
+        
+        for filename in os.listdir('agents'):
+            if filename.endswith('.json'):
+                agent_path = os.path.join('agents', filename)
+                with open(agent_path, 'r', encoding='utf-8') as f:
+                    agent_config = json.load(f)
+                
+                # 简化信息
+                agent_info = {
+                    "id": agent_config.get('id'),
+                    "name": agent_config.get('name', 'AI学习助手'),
+                    "description": agent_config.get('description', ''),
+                    "subject": agent_config.get('subject', ''),
+                    "instructor": agent_config.get('instructor', '教师'),
+                    "plugins": agent_config.get('plugins', []),
+                    "last_used": agent_config.get('stats', {}).get('last_used')
+                }
+                
+                # 添加TOKEN（实际应用中应严格控制令牌访问）
+                if "distributions" in agent_config and agent_config["distributions"]:
+                    # 仅添加第一个分发的令牌
+                    agent_info["token"] = agent_config["distributions"][0].get("token")
+                
+                agents.append(agent_info)
+        
+        # 按最后使用时间排序
+        agents.sort(key=lambda x: x.get('last_used', 0) or 0, reverse=True)
+        
+        return jsonify({
+            "success": True,
+            "agents": agents
+        })
+    
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({
+            "success": False,
+            "message": str(e)
+        }), 500
+
+# 注册学生管理路由
+register_student_routes(app)
+
+# React SPA catch-all：非 API 路径都返回 index.html（支持前端路由）
+@app.route('/<path:path>')
+def catch_all(path):
+    # 静态资源文件直接返回
+    file_path = os.path.join(FRONTEND_DIST, path)
+    if os.path.isfile(file_path):
+        return send_from_directory(FRONTEND_DIST, path)
+    # 其他路径返回 index.html，交给 React Router 处理
+    return send_from_directory(FRONTEND_DIST, 'index.html')
+
+if __name__ == '__main__':
+    debug = os.getenv('FLASK_ENV', 'production') == 'development'
+    app.run(debug=debug, host='0.0.0.0', port=7860)

config.py

@@ -0,0 +1,23 @@
+# config.py
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# API keys
+API_KEY = os.getenv("API_KEY")
+BASE_URL = os.getenv("BASE_URL")
+STREAM_API_KEY = os.getenv("STREAM_API_KEY")
+STREAM_BASE_URL = os.getenv("STREAM_BASE_URL")
+STREAM_MODEL = os.getenv("STREAM_MODEL")
+DEFAULT_MODEL = os.getenv("DEFAULT_MODEL")
+OPENAI_MODEL = os.getenv("OPENAI_MODEL", "gpt-4o-mini")
+
+# Knowledge base configuration
+EMBEDDING_MODEL = os.getenv("EMBEDDING_MODEL", "BAAI/bge-m3")
+RERANK_MODEL = os.getenv("RERANK_MODEL", "BAAI/bge-reranker-v2-m3")
+
+# System configuration
+UPLOAD_FOLDER = "uploads"
+AGENTS_FOLDER = "agents"
+MAX_CONTENT_LENGTH = 16 * 1024 * 1024  # 16MB

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@reduxjs/toolkit": "^2.10.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.19",
+    "@uiw/react-codemirror": "^4.25.9",
+    "antd": "^5.29.0",
+    "axios": "^1.13.2",
+    "dayjs": "^1.11.19",
+    "framer-motion": "^12.23.24",
+    "katex": "^0.16.45",
+    "markmap-lib": "^0.18.12",
+    "markmap-view": "^0.18.12",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^9.1.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.9.6",
+    "react-syntax-highlighter": "^15.6.6",
+    "reactflow": "^11.11.4",
+    "recharts": "^3.4.1",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "tailwindcss": "^3.4.18",
+    "vite": "^7.2.2"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { ConfigProvider, message } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import store from './store/store';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from './pages/RegisterPage';
+import TeacherDashboard from './pages/teacher/TeacherDashboard';
+import StudentDashboard from './pages/student/StudentDashboard';
+import AgentChat from './pages/student/AgentChat';
+import ProtectedRoute from './components/common/ProtectedRoute';
+import './index.css';
+
+// Ant Design 主题配置
+const theme = {
+  token: {
+    colorPrimary: '#10b981',
+    colorSuccess: '#10b981',
+    colorWarning: '#f97316',
+    colorError: '#f43f5e',
+    colorInfo: '#8b5cf6',
+    borderRadius: 8,
+    fontSize: 14,
+    fontFamily: "'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+  },
+  components: {
+    Button: {
+      controlHeight: 40,
+      fontWeight: 500,
+    },
+    Input: {
+      controlHeight: 40,
+    },
+    Select: {
+      controlHeight: 40,
+    },
+    Menu: {
+      itemBorderRadius: 8,
+      subMenuItemBorderRadius: 8,
+    },
+    Card: {
+      borderRadiusLG: 12,
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+    },
+  },
+};
+
+// 全局消息配置
+message.config({
+  top: 80,
+  duration: 3,
+  maxCount: 3,
+});
+
+function App() {
+  return (
+    <Provider store={store}>
+      <ConfigProvider theme={theme} locale={zhCN}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/register" element={<RegisterPage />} />
+
+            {/* Agent对话页面 - 不需要登录保护，通过token访问 */}
+            {/* 注意：这个路由必须在 /student/* 之前，否则会被捕获并要求登录 */}
+            <Route path="/student/chat/:agentId" element={<AgentChat />} />
+
+            {/* 教师端路由 */}
+            <Route
+              path="/teacher/*"
+              element={
+                <ProtectedRoute requiredRole="teacher">
+                  <TeacherDashboard />
+                </ProtectedRoute>
+              }
+            />
+
+            {/* 学生端路由 - 排除chat路径 */}
+            <Route
+              path="/student/*"
+              element={
+                <ProtectedRoute requiredRole="student">
+                  <StudentDashboard />
+                </ProtectedRoute>
+              }
+            />
+
+            {/* 默认重定向到登录 */}
+            <Route path="/" element={<Navigate to="/login" replace />} />
+            <Route path="*" element={<Navigate to="/login" replace />} />
+          </Routes>
+        </BrowserRouter>
+      </ConfigProvider>
+    </Provider>
+  );
+}
+
+export default App;

frontend/src/components/WorkflowEditor.jsx

@@ -0,0 +1,449 @@
+/**
+ * 工作流编辑器组件
+ * 使用React Flow实现可视化工作流编辑
+ */
+import { useState, useCallback, useRef } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  MiniMap,
+  Background,
+  Panel,
+  MarkerType
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import {
+  Card,
+  Button,
+  Drawer,
+  Form,
+  Input,
+  Select,
+  Space,
+  Typography,
+  message,
+  Modal,
+  Divider,
+  Tag
+} from 'antd';
+import {
+  PlusOutlined,
+  SaveOutlined,
+  ClearOutlined,
+  PlayCircleOutlined,
+  QuestionCircleOutlined,
+  CodeOutlined,
+  FileTextOutlined,
+  BranchesOutlined,
+  CheckCircleOutlined
+} from '@ant-design/icons';
+
+const { Title, Text } = Typography;
+const { TextArea } = Input;
+const { Option } = Select;
+
+// 节点类型定义
+const nodeTypes = {
+  start: {
+    label: '开始节点',
+    icon: <PlayCircleOutlined />,
+    color: '#52c41a'
+  },
+  question: {
+    label: '提问节点',
+    icon: <QuestionCircleOutlined />,
+    color: '#1890ff'
+  },
+  knowledge: {
+    label: '知识查询',
+    icon: <FileTextOutlined />,
+    color: '#722ed1'
+  },
+  code: {
+    label: '代码执行',
+    icon: <CodeOutlined />,
+    color: '#fa8c16'
+  },
+  condition: {
+    label: '条件分支',
+    icon: <BranchesOutlined />,
+    color: '#f5222d'
+  },
+  end: {
+    label: '结束节点',
+    icon: <CheckCircleOutlined />,
+    color: '#52c41a'
+  }
+};
+
+// 自定义节点组件
+const CustomNode = ({ data, selected }) => {
+  const nodeType = nodeTypes[data.type] || nodeTypes.question;
+
+  return (
+    <div
+      style={{
+        padding: '10px 15px',
+        borderRadius: '8px',
+        background: '#fff',
+        border: `2px solid ${selected ? nodeType.color : '#d9d9d9'}`,
+        boxShadow: selected ? `0 0 0 2px ${nodeType.color}20` : '0 2px 4px rgba(0,0,0,0.1)',
+        minWidth: '150px',
+        textAlign: 'center'
+      }}
+    >
+      <Space>
+        <span style={{ color: nodeType.color, fontSize: '16px' }}>
+          {nodeType.icon}
+        </span>
+        <Text strong>{data.label}</Text>
+      </Space>
+      {data.description && (
+        <div style={{ marginTop: '4px' }}>
+          <Text type="secondary" style={{ fontSize: '12px' }}>
+            {data.description}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// 初始节点
+const initialNodes = [
+  {
+    id: 'start',
+    type: 'custom',
+    position: { x: 250, y: 50 },
+    data: {
+      type: 'start',
+      label: '开始',
+      description: '工作流起点'
+    }
+  }
+];
+
+const WorkflowEditor = ({ value, onChange, onSave }) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(value?.nodes || initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(value?.edges || []);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [selectedNode, setSelectedNode] = useState(null);
+  const [nodeForm] = Form.useForm();
+  const reactFlowWrapper = useRef(null);
+  const reactFlowInstance = useRef(null);
+
+  // 连接节点
+  const onConnect = useCallback(
+    (params) => {
+      const newEdge = {
+        ...params,
+        type: 'smoothstep',
+        animated: true,
+        style: { stroke: '#1890ff', strokeWidth: 2 },
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          color: '#1890ff'
+        }
+      };
+      setEdges((eds) => addEdge(newEdge, eds));
+    },
+    [setEdges]
+  );
+
+  // 添加节点
+  const addNode = (type) => {
+    const newNode = {
+      id: `${type}_${Date.now()}`,
+      type: 'custom',
+      position: {
+        x: Math.random() * 400 + 100,
+        y: Math.random() * 300 + 100
+      },
+      data: {
+        type,
+        label: nodeTypes[type].label,
+        description: '',
+        config: {}
+      }
+    };
+
+    setNodes((nds) => nds.concat(newNode));
+    message.success(`已添加${nodeTypes[type].label}`);
+  };
+
+  // 选中节点
+  const onNodeClick = (event, node) => {
+    setSelectedNode(node);
+    nodeForm.setFieldsValue({
+      label: node.data.label,
+      description: node.data.description,
+      ...node.data.config
+    });
+    setDrawerVisible(true);
+  };
+
+  // 删除节点
+  const deleteNode = (nodeId) => {
+    setNodes((nds) => nds.filter((n) => n.id !== nodeId));
+    setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
+    message.success('节点已删除');
+  };
+
+  // 更新节点
+  const updateNode = (values) => {
+    setNodes((nds) =>
+      nds.map((node) => {
+        if (node.id === selectedNode.id) {
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              label: values.label,
+              description: values.description,
+              config: {
+                ...values,
+                label: undefined,
+                description: undefined
+              }
+            }
+          };
+        }
+        return node;
+      })
+    );
+    setDrawerVisible(false);
+    message.success('节点已更新');
+  };
+
+  // 清空画布
+  const clearCanvas = () => {
+    Modal.confirm({
+      title: '确认清空',
+      content: '确定要清空所有节点和连接吗？',
+      onOk: () => {
+        setNodes([initialNodes[0]]);
+        setEdges([]);
+        message.success('画布已清空');
+      }
+    });
+  };
+
+  // 保存工作流
+  const handleSave = () => {
+    const workflow = {
+      nodes,
+      edges,
+      timestamp: Date.now()
+    };
+
+    if (onChange) {
+      onChange(workflow);
+    }
+
+    if (onSave) {
+      onSave(workflow);
+    }
+
+    message.success('工作流已保存');
+  };
+
+  // 验证工作流
+  const validateWorkflow = () => {
+    if (nodes.length < 2) {
+      message.warning('工作流至少需要包含开始和结束节点');
+      return false;
+    }
+
+    const hasStart = nodes.some(n => n.data.type === 'start');
+    const hasEnd = nodes.some(n => n.data.type === 'end');
+
+    if (!hasStart || !hasEnd) {
+      message.warning('工作流必须包含开始和结束节点');
+      return false;
+    }
+
+    return true;
+  };
+
+  return (
+    <div style={{ width: '100%', height: '600px' }}>
+      <ReactFlowProvider>
+        <div ref={reactFlowWrapper} style={{ width: '100%', height: '100%' }}>
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            onNodeClick={onNodeClick}
+            onInit={(instance) => { reactFlowInstance.current = instance; }}
+            nodeTypes={{ custom: CustomNode }}
+            fitView
+          >
+            <Controls />
+            <MiniMap
+              nodeColor={node => nodeTypes[node.data.type]?.color || '#ccc'}
+              style={{
+                height: 120,
+                background: '#f0f2f5'
+              }}
+            />
+            <Background variant="dots" gap={12} size={1} />
+
+            {/* 工具面板 */}
+            <Panel position="top-left">
+              <Card size="small" style={{ minWidth: '200px' }}>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  <Text strong>添加节点</Text>
+                  <Space wrap>
+                    {Object.entries(nodeTypes).map(([key, type]) => (
+                      <Button
+                        key={key}
+                        size="small"
+                        icon={type.icon}
+                        onClick={() => addNode(key)}
+                        style={{ fontSize: '12px' }}
+                      >
+                        {type.label}
+                      </Button>
+                    ))}
+                  </Space>
+                </Space>
+              </Card>
+            </Panel>
+
+            {/* 操作按钮 */}
+            <Panel position="top-right">
+              <Space>
+                <Button
+                  type="primary"
+                  icon={<SaveOutlined />}
+                  onClick={handleSave}
+                  disabled={!validateWorkflow()}
+                >
+                  保存工作流
+                </Button>
+                <Button
+                  danger
+                  icon={<ClearOutlined />}
+                  onClick={clearCanvas}
+                >
+                  清空画布
+                </Button>
+              </Space>
+            </Panel>
+          </ReactFlow>
+        </div>
+      </ReactFlowProvider>
+
+      {/* 节点编辑抽屉 */}
+      <Drawer
+        title="编辑节点"
+        placement="right"
+        width={400}
+        open={drawerVisible}
+        onClose={() => setDrawerVisible(false)}
+        footer={
+          <Space>
+            <Button onClick={() => setDrawerVisible(false)}>取消</Button>
+            <Button
+              danger
+              onClick={() => {
+                deleteNode(selectedNode.id);
+                setDrawerVisible(false);
+              }}
+            >
+              删除节点
+            </Button>
+            <Button type="primary" onClick={() => nodeForm.submit()}>
+              保存
+            </Button>
+          </Space>
+        }
+      >
+        {selectedNode && (
+          <Form
+            form={nodeForm}
+            layout="vertical"
+            onFinish={updateNode}
+          >
+            <Form.Item
+              name="label"
+              label="节点名称"
+              rules={[{ required: true, message: '请输入节点名称' }]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              name="description"
+              label="节点描述"
+            >
+              <TextArea rows={2} />
+            </Form.Item>
+
+            <Divider />
+
+            {/* 根据节点类型显示不同的配置项 */}
+            {selectedNode.data.type === 'question' && (
+              <Form.Item
+                name="prompt"
+                label="提示词模板"
+              >
+                <TextArea rows={4} placeholder="输入提示词模板..." />
+              </Form.Item>
+            )}
+
+            {selectedNode.data.type === 'knowledge' && (
+              <Form.Item
+                name="knowledge_base"
+                label="知识库"
+              >
+                <Select placeholder="选择知识库">
+                  <Option value="default">默认知识库</Option>
+                </Select>
+              </Form.Item>
+            )}
+
+            {selectedNode.data.type === 'code' && (
+              <Form.Item
+                name="code"
+                label="代码"
+              >
+                <TextArea rows={6} placeholder="输入Python代码..." style={{ fontFamily: 'monospace' }} />
+              </Form.Item>
+            )}
+
+            {selectedNode.data.type === 'condition' && (
+              <>
+                <Form.Item
+                  name="condition"
+                  label="条件表达式"
+                >
+                  <Input placeholder="例如: score > 80" />
+                </Form.Item>
+                <Form.Item
+                  name="true_branch"
+                  label="满足条件时"
+                >
+                  <Input placeholder="跳转到节点..." />
+                </Form.Item>
+                <Form.Item
+                  name="false_branch"
+                  label="不满足条件时"
+                >
+                  <Input placeholder="跳转到节点..." />
+                </Form.Item>
+              </>
+            )}
+          </Form>
+        )}
+      </Drawer>
+    </div>
+  );
+};
+
+export default WorkflowEditor;

frontend/src/components/common/ProtectedRoute.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+const ProtectedRoute = ({ children, requiredRole }) => {
+  const { isAuthenticated, user } = useSelector(state => state.auth);
+
+  // 未登录，重定向到登录页
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  // 已登录但角色不匹配
+  if (requiredRole && user?.role !== requiredRole) {
+    // 根据用户角色重定向到对应页面
+    if (user?.role === 'teacher') {
+      return <Navigate to="/teacher" replace />;
+    } else if (user?.role === 'student') {
+      return <Navigate to="/student" replace />;
+    }
+    return <Navigate to="/login" replace />;
+  }
+
+  // 验证通过，渲染子组件
+  return children;
+};
+
+export default ProtectedRoute;

frontend/src/components/plugins/CodeExecutor.jsx

@@ -0,0 +1,251 @@
+/**
+ * 代码执行插件组件
+ * 使用 CodeMirror 编辑器 + 终端输出面板 + 交互式输入
+ */
+import { useState, useRef, useEffect } from 'react';
+import { Button, Space, Input, Typography } from 'antd';
+import {
+  PlayCircleOutlined,
+  StopOutlined,
+  ClearOutlined,
+  CodeOutlined
+} from '@ant-design/icons';
+import CodeMirror from '@uiw/react-codemirror';
+import { python } from '@codemirror/lang-python';
+import api from '../../services/api';
+
+const { Text } = Typography;
+
+const CodeExecutor = ({ initialCode = '' }) => {
+  const [code, setCode] = useState(initialCode);
+  const [output, setOutput] = useState([]);
+  const [isRunning, setIsRunning] = useState(false);
+  const [needsInput, setNeedsInput] = useState(false);
+  const [contextId, setContextId] = useState(null);
+  const [userInput, setUserInput] = useState('');
+  const outputEndRef = useRef(null);
+
+  useEffect(() => {
+    if (initialCode) setCode(initialCode);
+  }, [initialCode]);
+
+  useEffect(() => {
+    outputEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [output]);
+
+  const appendOutput = (type, text) => {
+    setOutput(prev => [...prev, { type, text }]);
+  };
+
+  const handleRun = async () => {
+    if (!code.trim()) return;
+    setIsRunning(true);
+    setNeedsInput(false);
+    setOutput([{ type: 'info', text: '>>> 运行中...' }]);
+
+    try {
+      const res = await api.post('/code/execute', { code });
+
+      if (!res.success) {
+        appendOutput('error', res.error || '执行失败');
+        if (res.traceback) appendOutput('error', res.traceback);
+        setIsRunning(false);
+        return;
+      }
+
+      // 显示初始输出
+      if (res.output) {
+        appendOutput('stdout', res.output);
+      }
+
+      if (res.needsInput) {
+        // 代码需要交互输入
+        setContextId(res.context_id);
+        setNeedsInput(true);
+      } else {
+        // 代码直接执行完了
+        appendOutput('info', '>>> 执行完成');
+        setIsRunning(false);
+      }
+    } catch (error) {
+      appendOutput('error', `错误: ${error.message}`);
+      setIsRunning(false);
+    }
+  };
+
+  const handleInput = async () => {
+    if (!contextId) return;
+
+    const inputText = userInput;
+    appendOutput('input', `<<< ${inputText}`);
+    setUserInput('');
+    setNeedsInput(false);
+
+    try {
+      const res = await api.post('/code/input', {
+        context_id: contextId,
+        input: inputText
+      });
+
+      if (!res.success) {
+        appendOutput('error', res.error || '输入处理失败');
+        if (res.traceback) appendOutput('error', res.traceback);
+        setIsRunning(false);
+        setContextId(null);
+        return;
+      }
+
+      if (res.output) {
+        appendOutput('stdout', res.output);
+      }
+
+      if (res.needsInput) {
+        // 还需要更多输入
+        setNeedsInput(true);
+      } else {
+        // 执行完成
+        appendOutput('info', '>>> 执行完成');
+        setIsRunning(false);
+        setContextId(null);
+      }
+    } catch (error) {
+      appendOutput('error', `错误: ${error.message}`);
+      setIsRunning(false);
+      setContextId(null);
+    }
+  };
+
+  const handleStop = async () => {
+    if (contextId) {
+      try {
+        const res = await api.post('/code/stop', { context_id: contextId });
+        if (res.output) {
+          appendOutput('stdout', res.output);
+        }
+      } catch (e) { /* ignore */ }
+    }
+    appendOutput('warning', '>>> 已终止');
+    setIsRunning(false);
+    setNeedsInput(false);
+    setContextId(null);
+  };
+
+  const handleClear = () => {
+    setOutput([]);
+  };
+
+  const getOutputColor = (type) => {
+    switch (type) {
+      case 'error': return '#ef4444';
+      case 'warning': return '#f59e0b';
+      case 'input': return '#10b981';
+      case 'info': return '#6b7280';
+      default: return '#e5e7eb';
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}>
+      {/* 工具栏 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Text strong style={{ fontSize: '13px' }}>
+          <CodeOutlined /> Python 编辑器
+        </Text>
+        <Space size="small">
+          {!isRunning ? (
+            <Button
+              type="primary"
+              size="small"
+              icon={<PlayCircleOutlined />}
+              onClick={handleRun}
+              style={{ background: '#10b981', borderColor: '#10b981' }}
+            >
+              运行
+            </Button>
+          ) : (
+            <Button
+              danger
+              size="small"
+              icon={<StopOutlined />}
+              onClick={handleStop}
+            >
+              停止
+            </Button>
+          )}
+          <Button
+            size="small"
+            icon={<ClearOutlined />}
+            onClick={handleClear}
+          >
+            清除
+          </Button>
+        </Space>
+      </div>
+
+      {/* 代码编辑器 */}
+      <div style={{
+        flex: '0 0 auto',
+        maxHeight: '45%',
+        overflow: 'auto',
+        borderRadius: '6px',
+        border: '1px solid rgba(0,0,0,0.1)'
+      }}>
+        <CodeMirror
+          value={code}
+          height="auto"
+          minHeight="120px"
+          maxHeight="300px"
+          extensions={[python()]}
+          onChange={(val) => setCode(val)}
+          theme="light"
+          basicSetup={{
+            lineNumbers: true,
+            highlightActiveLine: true,
+            foldGutter: true,
+          }}
+        />
+      </div>
+
+      {/* 终端输出 */}
+      <div style={{
+        flex: 1,
+        minHeight: '120px',
+        background: '#1e1e1e',
+        borderRadius: '6px',
+        padding: '12px',
+        overflow: 'auto',
+        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+        fontSize: '13px',
+      }}>
+        {output.map((line, i) => (
+          <div key={i} style={{ color: getOutputColor(line.type), lineHeight: '1.6', whiteSpace: 'pre-wrap' }}>
+            {line.text}
+          </div>
+        ))}
+        {needsInput && (
+          <div style={{ display: 'flex', gap: '8px', marginTop: '8px', alignItems: 'center' }}>
+            <span style={{ color: '#10b981', flexShrink: 0 }}>{'>>>'}</span>
+            <Input
+              size="small"
+              value={userInput}
+              onChange={e => setUserInput(e.target.value)}
+              onPressEnter={handleInput}
+              placeholder="输入内容后按回车..."
+              style={{
+                flex: 1,
+                background: '#2d2d2d',
+                border: '1px solid #444',
+                color: '#e5e7eb',
+                fontFamily: 'monospace'
+              }}
+              autoFocus
+            />
+          </div>
+        )}
+        <div ref={outputEndRef} />
+      </div>
+    </div>
+  );
+};
+
+export default CodeExecutor;

frontend/src/components/plugins/MindmapViewer.jsx

@@ -0,0 +1,135 @@
+/**
+ * 思维导图插件组件
+ * 使用 markmap 从 Markdown 文本渲染交互式 SVG 思维导图
+ */
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Button, Empty, Typography, Modal } from 'antd';
+import { ExpandOutlined, DownloadOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const MindmapViewer = ({ markdown = '' }) => {
+  const svgRef = useRef(null);
+  const markmapRef = useRef(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [hasContent, setHasContent] = useState(false);
+
+  const renderMap = useCallback(async (svgEl, md) => {
+    if (!svgEl || !md) return;
+
+    try {
+      // 动态导入 markmap（避免 SSR 问题）
+      const { Transformer } = await import('markmap-lib');
+      const { Markmap } = await import('markmap-view');
+
+      const transformer = new Transformer();
+      const { root } = transformer.transform(md);
+
+      // 清除旧内容
+      svgEl.innerHTML = '';
+
+      // 渲染
+      markmapRef.current = Markmap.create(svgEl, {
+        autoFit: true,
+        duration: 300,
+        maxWidth: 300,
+      }, root);
+
+      setHasContent(true);
+    } catch (e) {
+      console.error('Markmap 渲染失败:', e);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (markdown && svgRef.current) {
+      renderMap(svgRef.current, markdown);
+    }
+  }, [markdown, renderMap]);
+
+  const handleExport = () => {
+    if (!svgRef.current) return;
+    const svgData = new XMLSerializer().serializeToString(svgRef.current);
+    const blob = new Blob([svgData], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'mindmap.svg';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Text strong style={{ fontSize: '13px' }}>思维导图</Text>
+        <div>
+          {hasContent && (
+            <>
+              <Button
+                size="small"
+                icon={<ExpandOutlined />}
+                onClick={() => setFullscreen(true)}
+                style={{ marginRight: '8px' }}
+              >
+                全屏
+              </Button>
+              <Button
+                size="small"
+                icon={<DownloadOutlined />}
+                onClick={handleExport}
+              >
+                导出 SVG
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div style={{
+        flex: 1,
+        borderRadius: '6px',
+        border: '1px solid rgba(0,0,0,0.1)',
+        overflow: 'hidden',
+        background: '#fff',
+        minHeight: '300px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+        {markdown ? (
+          <svg
+            ref={svgRef}
+            style={{ width: '100%', height: '100%', minHeight: '300px' }}
+          />
+        ) : (
+          <Empty description="等待生成思维导图..." />
+        )}
+      </div>
+
+      {/* 全屏模态框 */}
+      <Modal
+        open={fullscreen}
+        onCancel={() => setFullscreen(false)}
+        footer={null}
+        width="90vw"
+        style={{ top: '5vh' }}
+        styles={{ body: { height: '80vh', padding: '12px' } }}
+        destroyOnClose
+        afterOpenChange={(open) => {
+          if (open && markdown) {
+            // 全屏模态框中重新渲染
+            setTimeout(() => {
+              const modalSvg = document.querySelector('.ant-modal-body svg');
+              if (modalSvg) renderMap(modalSvg, markdown);
+            }, 100);
+          }
+        }}
+      >
+        <svg style={{ width: '100%', height: '100%' }} />
+      </Modal>
+    </div>
+  );
+};
+
+export default MindmapViewer;

frontend/src/components/plugins/Visualization3D.jsx

@@ -0,0 +1,133 @@
+/**
+ * 3D 可视化插件组件
+ * 后端生成 Plotly HTML，前端通过 iframe 加载
+ */
+import { useState, useEffect } from 'react';
+import { Button, Spin, Typography, Modal, Empty } from 'antd';
+import {
+  ExpandOutlined,
+  ReloadOutlined
+} from '@ant-design/icons';
+import api from '../../services/api';
+
+const { Text } = Typography;
+
+const Visualization3D = ({ code = '' }) => {
+  const [htmlUrl, setHtmlUrl] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  const generate = async (codeToRun) => {
+    const targetCode = codeToRun || code;
+    if (!targetCode) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await api.post('/visualization/3d-surface', { code: targetCode });
+      if (response.success) {
+        // html_url 是相对于后端的路径，需要加上后端地址
+        setHtmlUrl(`http://localhost:7860${response.html_url}`);
+      } else {
+        setError(response.message || '生成失败');
+      }
+    } catch (e) {
+      setError(e.message || '请求失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 当 code 变化时自动生成
+  useEffect(() => {
+    if (code) generate(code);
+  }, [code]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: '8px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Text strong style={{ fontSize: '13px' }}>3D 可视化</Text>
+        <div>
+          {htmlUrl && (
+            <Button
+              size="small"
+              icon={<ExpandOutlined />}
+              onClick={() => setFullscreen(true)}
+              style={{ marginRight: '8px' }}
+            >
+              全屏
+            </Button>
+          )}
+          <Button
+            size="small"
+            icon={<ReloadOutlined />}
+            onClick={() => generate()}
+            disabled={!code || loading}
+          >
+            重新生成
+          </Button>
+        </div>
+      </div>
+
+      <div style={{
+        flex: 1,
+        borderRadius: '6px',
+        border: '1px solid rgba(0,0,0,0.1)',
+        overflow: 'hidden',
+        position: 'relative',
+        background: '#fff',
+        minHeight: '300px'
+      }}>
+        {loading ? (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <Spin tip="正在生成3D图形..."><div style={{ height: 80 }} /></Spin>
+          </div>
+        ) : error ? (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <Empty description={<Text type="danger">{error}</Text>} />
+          </div>
+        ) : htmlUrl ? (
+          <iframe
+            src={htmlUrl}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+            }}
+            title="3D Visualization"
+          />
+        ) : (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <Empty description="等待生成3D图形..." />
+          </div>
+        )}
+      </div>
+
+      {/* 全屏模态框 */}
+      <Modal
+        open={fullscreen}
+        onCancel={() => setFullscreen(false)}
+        footer={null}
+        width="90vw"
+        style={{ top: '5vh' }}
+        styles={{ body: { height: '80vh', padding: 0 } }}
+        destroyOnClose
+      >
+        {htmlUrl && (
+          <iframe
+            src={htmlUrl}
+            style={{ width: '100%', height: '80vh', border: 'none' }}
+            title="3D Visualization Fullscreen"
+          />
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default Visualization3D;

frontend/src/hooks/useTypewriter.js

@@ -0,0 +1,108 @@
+/**
+ * 打字机效果Hook
+ * 实现逐字显示文本的效果
+ */
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+const useTypewriter = (text, options = {}) => {
+  const {
+    speed = 30, // 打字速度（毫秒）
+    onComplete = () => {}, // 完成回调
+    enabled = true // 是否启用打字机效果
+  } = options;
+
+  const [displayText, setDisplayText] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const indexRef = useRef(0);
+  const intervalRef = useRef(null);
+
+  // 开始打字
+  const startTyping = useCallback(() => {
+    if (!enabled || !text) {
+      setDisplayText(text);
+      return;
+    }
+
+    setIsTyping(true);
+    setIsPaused(false);
+    indexRef.current = 0;
+    setDisplayText('');
+
+    intervalRef.current = setInterval(() => {
+      if (indexRef.current < text.length) {
+        setDisplayText(prev => prev + text[indexRef.current]);
+        indexRef.current++;
+      } else {
+        // 打字完成
+        clearInterval(intervalRef.current);
+        setIsTyping(false);
+        onComplete();
+      }
+    }, speed);
+  }, [text, speed, enabled, onComplete]);
+
+  // 暂停打字
+  const pauseTyping = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      setIsPaused(true);
+    }
+  }, []);
+
+  // 继续打字
+  const resumeTyping = useCallback(() => {
+    if (isPaused && indexRef.current < text.length) {
+      setIsPaused(false);
+      intervalRef.current = setInterval(() => {
+        if (indexRef.current < text.length) {
+          setDisplayText(prev => prev + text[indexRef.current]);
+          indexRef.current++;
+        } else {
+          clearInterval(intervalRef.current);
+          setIsTyping(false);
+          onComplete();
+        }
+      }, speed);
+    }
+  }, [isPaused, text, speed, onComplete]);
+
+  // 立即显示全部文本
+  const skipTyping = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    setDisplayText(text);
+    setIsTyping(false);
+    indexRef.current = text.length;
+    onComplete();
+  }, [text, onComplete]);
+
+  // 当文本改变时重新开始
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (text && enabled) {
+      startTyping();
+    } else {
+      setDisplayText(text);
+    }
+  }, [text, enabled]);
+
+  return {
+    displayText,
+    isTyping,
+    isPaused,
+    pauseTyping,
+    resumeTyping,
+    skipTyping
+  };
+};
+
+export default useTypewriter;

frontend/src/index.css

@@ -0,0 +1,189 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* 全局样式 */
+@layer base {
+  :root {
+    /* 主题色 */
+    --color-primary: #10b981;
+    --color-primary-light: #d1fae5;
+    --color-secondary: #f97316;
+    --color-secondary-light: #fed7aa;
+    --color-tertiary: #8b5cf6;
+    --color-tertiary-light: #ddd6fe;
+    --color-accent: #14b8a6;
+    --color-accent-light: #ccfbf1;
+    --color-danger: #f43f5e;
+    --color-danger-light: #fecdd3;
+
+    /* 中性色 */
+    --color-neutral-50: #fafbfc;
+    --color-neutral-100: #f3f4f6;
+    --color-neutral-200: #e5e7eb;
+    --color-neutral-300: #d1d5db;
+    --color-neutral-400: #9ca3af;
+    --color-neutral-500: #6b7280;
+    --color-neutral-600: #4b5563;
+    --color-neutral-700: #374151;
+    --color-neutral-800: #1f2937;
+    --color-neutral-900: #111827;
+
+    /* 阴影 */
+    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
+    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background-color: var(--color-neutral-50);
+    color: var(--color-neutral-800);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* 自定义滚动条 */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-neutral-100);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-neutral-400);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-500);
+  }
+}
+
+/* 卡片样式 */
+@layer components {
+  .card {
+    @apply bg-white rounded-lg p-6 transition-all duration-300;
+    box-shadow: var(--shadow-soft);
+  }
+
+  .card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-medium);
+  }
+
+  /* 按钮基础样式 */
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-300 inline-flex items-center justify-center;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-white hover:bg-primary/90;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-white hover:bg-secondary/90;
+  }
+
+  .btn-tertiary {
+    @apply bg-tertiary text-white hover:bg-tertiary/90;
+  }
+
+  .btn-outline {
+    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
+  }
+
+  /* 浮动背景球 */
+  .floating-ball {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    opacity: 0.15;
+    animation: float 20s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  .floating-ball-1 {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    top: -150px;
+    left: -150px;
+  }
+
+  .floating-ball-2 {
+    width: 400px;
+    height: 400px;
+    background: linear-gradient(135deg, var(--color-secondary), var(--color-tertiary));
+    bottom: -200px;
+    right: -200px;
+    animation-delay: 5s;
+  }
+
+  .floating-ball-3 {
+    width: 250px;
+    height: 250px;
+    background: linear-gradient(135deg, var(--color-tertiary), var(--color-primary));
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-delay: 10s;
+  }
+
+  /* 加载动画 */
+  .loading-spinner {
+    @apply inline-block w-8 h-8 border-4 border-primary border-t-transparent rounded-full;
+    animation: spin 1s linear infinite;
+  }
+}
+
+/* 动画 */
+@layer utilities {
+  @keyframes float {
+    0%, 100% {
+      transform: translate(0, 0) scale(1);
+    }
+    33% {
+      transform: translate(30px, -30px) scale(1.1);
+    }
+    66% {
+      transform: translate(-20px, 20px) scale(0.9);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+/* Ant Design 覆盖 */
+.ant-btn-primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.ant-btn-primary:hover {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  opacity: 0.9;
+}
+
+.ant-menu-item-selected {
+  color: var(--color-primary) !important;
+}
+
+.ant-menu-item-selected::after {
+  border-color: var(--color-primary) !important;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,497 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Form, Input, Button, Tabs, message, Divider, Space } from 'antd';
+import {
+  MailOutlined,
+  PhoneOutlined,
+  SafetyOutlined,
+  UserOutlined,
+  LockOutlined,
+} from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import authService from '../services/authService';
+import { loginSuccess } from '../store/slices/authSlice';
+
+const LoginPage = () => {
+  const [form] = Form.useForm();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState('email'); // 默认使用邮箱登录
+  const [userRole, setUserRole] = useState('student'); // 默认学生角色
+  const [countdown, setCountdown] = useState(0);
+
+  // 发送邮箱验证码
+  const handleSendEmailCode = async () => {
+    const email = form.getFieldValue('email');
+    if (!email) {
+      message.warning('请输入邮箱地址');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await authService.sendEmailCode(email);
+      message.success('验证码已发送到您的邮箱');
+
+      // 开始倒计时
+      let count = 60;
+      setCountdown(count);
+      const timer = setInterval(() => {
+        count--;
+        setCountdown(count);
+        if (count <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    } catch (error) {
+      message.error('发送验证码失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 发送手机验证码（模拟）
+  const handleSendPhoneCode = async () => {
+    const phone = form.getFieldValue('phone');
+    if (!phone) {
+      message.warning('请输入手机号');
+      return;
+    }
+
+    setLoading(true);
+    // 模拟发送
+    setTimeout(() => {
+      message.success('测试验证码：123456（开发模式）');
+      setLoading(false);
+
+      // 开始倒计时
+      let count = 60;
+      setCountdown(count);
+      const timer = setInterval(() => {
+        count--;
+        setCountdown(count);
+        if (count <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    }, 1000);
+  };
+
+  // 处理登录
+  const handleLogin = async (values) => {
+    try {
+      setLoading(true);
+      let response;
+
+      switch (activeTab) {
+        case 'email':
+          response = await authService.loginWithEmailCode(values.email, values.emailCode, userRole);
+          break;
+        case 'phone':
+          response = await authService.loginWithPhoneCode(values.phone, values.phoneCode, userRole);
+          break;
+        case 'password':
+          response = await authService.loginWithPassword(values.username, values.password);
+          break;
+        default:
+          break;
+      }
+
+      if (response.success) {
+        dispatch(loginSuccess({
+          user: response.data.user,
+          token: response.data.token,
+        }));
+        message.success('登录成功');
+
+        // 根据角色跳转
+        if (response.data.user.role === 'teacher') {
+          navigate('/teacher');
+        } else {
+          navigate('/student');
+        }
+      }
+    } catch (error) {
+      message.error(error.response?.data?.message || '登录失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const tabItems = [
+    {
+      key: 'email',
+      label: (
+        <span className="text-base font-medium">
+          邮箱登录
+        </span>
+      ),
+      children: (
+        <>
+          <Form.Item
+            name="email"
+            rules={[
+              { required: activeTab === 'email', message: '请输入邮箱' },
+              { type: 'email', message: '请输入有效的邮箱地址' },
+            ]}
+          >
+            <Input
+              prefix={<MailOutlined className="text-neutral-400" />}
+              placeholder="邮箱地址"
+              size="large"
+              className="rounded-lg"
+            />
+          </Form.Item>
+          <Form.Item
+            name="emailCode"
+            rules={[{ required: activeTab === 'email', message: '请输入验证码' }]}
+          >
+            <Space.Compact style={{ width: '100%' }}>
+              <Input
+                prefix={<SafetyOutlined className="text-neutral-400" />}
+                placeholder="验证码"
+                size="large"
+                className="rounded-l-lg"
+              />
+              <Button
+                size="large"
+                onClick={handleSendEmailCode}
+                disabled={countdown > 0}
+                className="rounded-r-lg px-6"
+                style={{
+                  backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                  borderColor: 'rgba(16, 185, 129, 0.3)',
+                  color: '#10b981'
+                }}
+              >
+                {countdown > 0 ? `${countdown}秒后重试` : '发送验证码'}
+              </Button>
+            </Space.Compact>
+          </Form.Item>
+        </>
+      ),
+    },
+    {
+      key: 'phone',
+      label: (
+        <span className="text-base font-medium">
+          手机登录
+        </span>
+      ),
+      children: (
+        <>
+          <Form.Item
+            name="phone"
+            rules={[
+              { required: activeTab === 'phone', message: '请输入手机号' },
+              { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' },
+            ]}
+          >
+            <Input
+              prefix={<PhoneOutlined className="text-neutral-400" />}
+              placeholder="手机号"
+              size="large"
+              className="rounded-lg"
+            />
+          </Form.Item>
+          <Form.Item
+            name="phoneCode"
+            rules={[{ required: activeTab === 'phone', message: '请输入验证码' }]}
+          >
+            <Space.Compact style={{ width: '100%' }}>
+              <Input
+                prefix={<SafetyOutlined className="text-neutral-400" />}
+                placeholder="验证码"
+                size="large"
+                className="rounded-l-lg"
+              />
+              <Button
+                size="large"
+                onClick={handleSendPhoneCode}
+                disabled={countdown > 0}
+                className="rounded-r-lg px-6"
+                style={{
+                  backgroundColor: 'rgba(249, 115, 22, 0.1)',
+                  borderColor: 'rgba(249, 115, 22, 0.3)',
+                  color: '#f97316'
+                }}
+              >
+                {countdown > 0 ? `${countdown}秒后重试` : '发送验证码'}
+              </Button>
+            </Space.Compact>
+          </Form.Item>
+        </>
+      ),
+    },
+    {
+      key: 'password',
+      label: (
+        <span className="text-base font-medium">
+          密码登录
+        </span>
+      ),
+      children: (
+        <>
+          <Form.Item
+            name="username"
+            rules={[{ required: activeTab === 'password', message: '请输入用户名' }]}
+          >
+            <Input
+              prefix={<UserOutlined className="text-neutral-400" />}
+              placeholder="用户名"
+              size="large"
+              className="rounded-lg"
+            />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            rules={[{ required: activeTab === 'password', message: '请输入密码' }]}
+          >
+            <Input.Password
+              prefix={<LockOutlined className="text-neutral-400" />}
+              placeholder="密码"
+              size="large"
+              className="rounded-lg"
+            />
+          </Form.Item>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <div className="min-h-screen flex relative overflow-hidden" style={{ backgroundColor: '#fafbfc' }}>
+      {/* 装饰性背景元素 - 使用单色极淡透明度 */}
+      <div
+        className="absolute top-20 left-20 w-96 h-96 rounded-full opacity-10"
+        style={{
+          background: '#10b981',
+          filter: 'blur(120px)'
+        }}
+      />
+      <div
+        className="absolute bottom-20 right-20 w-96 h-96 rounded-full opacity-10"
+        style={{
+          background: '#f97316',
+          filter: 'blur(120px)'
+        }}
+      />
+
+      {/* 左侧装饰区 */}
+      <div className="hidden lg:flex lg:w-1/2 relative p-12">
+        <div className="relative z-10 flex flex-col justify-center items-center w-full">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="w-full max-w-lg"
+          >
+            <h1 className="text-5xl font-bold mb-6">
+              <span style={{ color: '#10b981' }}>智能</span>
+              <span style={{ color: '#f97316' }} className="mx-2">教育</span>
+              <span style={{ color: '#8b5cf6' }}>助手</span>
+            </h1>
+            <p className="text-xl text-neutral-600 mb-12">
+              AI驱动的个性化学习平台
+            </p>
+
+            {/* 特色卡片 - 符合设计要求的卡片 */}
+            <div className="grid grid-cols-2 gap-6">
+              <motion.div
+                className="p-6 bg-white rounded-xl transition-all duration-300"
+                style={{
+                  border: '1px solid rgba(16, 185, 129, 0.2)',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+                }}
+                whileHover={{
+                  y: -4,
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+                  borderColor: 'rgba(16, 185, 129, 0.4)'
+                }}
+              >
+                <div className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
+                  style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
+                  <svg className="w-6 h-6" style={{ color: '#10b981' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-neutral-800 mb-2">个性化学习</h3>
+                <p className="text-sm text-neutral-600">根据学习进度智能调整</p>
+              </motion.div>
+
+              <motion.div
+                className="p-6 bg-white rounded-xl transition-all duration-300"
+                style={{
+                  border: '1px solid rgba(249, 115, 22, 0.2)',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+                }}
+                whileHover={{
+                  y: -4,
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+                  borderColor: 'rgba(249, 115, 22, 0.4)'
+                }}
+              >
+                <div className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
+                  style={{ backgroundColor: 'rgba(249, 115, 22, 0.1)' }}>
+                  <svg className="w-6 h-6" style={{ color: '#f97316' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-neutral-800 mb-2">AI助教</h3>
+                <p className="text-sm text-neutral-600">24小时在线答疑解惑</p>
+              </motion.div>
+
+              <motion.div
+                className="p-6 bg-white rounded-xl transition-all duration-300"
+                style={{
+                  border: '1px solid rgba(139, 92, 246, 0.2)',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+                }}
+                whileHover={{
+                  y: -4,
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+                  borderColor: 'rgba(139, 92, 246, 0.4)'
+                }}
+              >
+                <div className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
+                  style={{ backgroundColor: 'rgba(139, 92, 246, 0.1)' }}>
+                  <svg className="w-6 h-6" style={{ color: '#8b5cf6' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-neutral-800 mb-2">实时反馈</h3>
+                <p className="text-sm text-neutral-600">即时评估学习效果</p>
+              </motion.div>
+
+              <motion.div
+                className="p-6 bg-white rounded-xl transition-all duration-300"
+                style={{
+                  border: '1px solid rgba(20, 184, 166, 0.2)',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+                }}
+                whileHover={{
+                  y: -4,
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+                  borderColor: 'rgba(20, 184, 166, 0.4)'
+                }}
+              >
+                <div className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
+                  style={{ backgroundColor: 'rgba(20, 184, 166, 0.1)' }}>
+                  <svg className="w-6 h-6" style={{ color: '#14b8a6' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-neutral-800 mb-2">知识管理</h3>
+                <p className="text-sm text-neutral-600">系统化知识体系构建</p>
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* 右侧登录区 */}
+      <div className="flex-1 flex items-center justify-center p-8">
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+          className="w-full max-w-md"
+        >
+          <div
+            className="bg-white rounded-2xl p-8 transition-all duration-300"
+            style={{
+              border: '1px solid rgba(0, 0, 0, 0.08)',
+              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.04)'
+            }}
+          >
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-neutral-800">欢迎回来</h2>
+              <p className="text-neutral-500 mt-2">登录您的账户继续学习</p>
+            </div>
+
+            {/* 角色选择 */}
+            <div className="mb-6">
+              <div className="flex gap-3 p-1 bg-neutral-100 rounded-lg">
+                <button
+                  type="button"
+                  onClick={() => setUserRole('teacher')}
+                  className={`flex-1 py-2.5 px-4 rounded-lg font-medium transition-all duration-200 ${
+                    userRole === 'teacher'
+                      ? 'bg-white text-emerald-600 shadow-sm'
+                      : 'text-neutral-600 hover:text-neutral-800'
+                  }`}
+                >
+                  教师
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setUserRole('student')}
+                  className={`flex-1 py-2.5 px-4 rounded-lg font-medium transition-all duration-200 ${
+                    userRole === 'student'
+                      ? 'bg-white text-orange-600 shadow-sm'
+                      : 'text-neutral-600 hover:text-neutral-800'
+                  }`}
+                >
+                  学生
+                </button>
+              </div>
+            </div>
+
+            <Form
+              form={form}
+              onFinish={handleLogin}
+              layout="vertical"
+              size="large"
+            >
+              <Tabs
+                activeKey={activeTab}
+                onChange={setActiveTab}
+                items={tabItems}
+                className="mb-4"
+              />
+
+              <Form.Item className="mb-4">
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  loading={loading}
+                  block
+                  size="large"
+                  className="rounded-lg h-12 text-base font-medium"
+                  style={{
+                    backgroundColor: activeTab === 'email' ? '#10b981' : activeTab === 'phone' ? '#f97316' : '#8b5cf6',
+                    borderColor: activeTab === 'email' ? '#10b981' : activeTab === 'phone' ? '#f97316' : '#8b5cf6'
+                  }}
+                >
+                  登录
+                </Button>
+              </Form.Item>
+
+              <Divider className="text-neutral-400">或</Divider>
+
+              <div className="text-center">
+                <span className="text-neutral-500">还没有账号？</span>
+                <Button
+                  type="link"
+                  onClick={() => navigate('/register')}
+                  style={{ color: '#10b981' }}
+                  className="font-medium"
+                >
+                  立即注册
+                </Button>
+              </div>
+            </Form>
+          </div>
+
+          <div className="text-center mt-8 text-sm text-neutral-400">
+            © 2024 智能教育助手 - AI驱动的未来教育
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

frontend/src/pages/RegisterPage.jsx

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Form, Input, Button, message } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import authService from '../services/authService';
+
+const RegisterPage = () => {
+  const [form] = Form.useForm();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [userRole, setUserRole] = useState('student');
+
+  const handleRegister = async (values) => {
+    if (values.password !== values.confirmPassword) {
+      message.error('两次输入的密码不一致');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await authService.register({
+        username: values.username,
+        password: values.password,
+        role: userRole,
+      });
+
+      if (response.success) {
+        message.success('注册成功，请登录');
+        navigate('/login');
+      }
+    } catch (error) {
+      message.error(error.response?.data?.message || '注册失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex relative overflow-hidden" style={{ backgroundColor: '#fafbfc' }}>
+      <div
+        className="absolute top-20 left-20 w-96 h-96 rounded-full opacity-10"
+        style={{ background: '#8b5cf6', filter: 'blur(120px)' }}
+      />
+      <div
+        className="absolute bottom-20 right-20 w-96 h-96 rounded-full opacity-10"
+        style={{ background: '#10b981', filter: 'blur(120px)' }}
+      />
+
+      <div className="flex-1 flex items-center justify-center p-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="w-full max-w-md"
+        >
+          <div
+            className="bg-white rounded-2xl p-8 transition-all duration-300"
+            style={{
+              border: '1px solid rgba(0, 0, 0, 0.08)',
+              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.04)',
+            }}
+          >
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-neutral-800">创建账号</h2>
+              <p className="text-neutral-500 mt-2">注册一个新账号开始使用</p>
+            </div>
+
+            {/* 角色选择 */}
+            <div className="mb-6">
+              <div className="flex gap-3 p-1 bg-neutral-100 rounded-lg">
+                <button
+                  type="button"
+                  onClick={() => setUserRole('teacher')}
+                  className={`flex-1 py-2.5 px-4 rounded-lg font-medium transition-all duration-200 ${
+                    userRole === 'teacher'
+                      ? 'bg-white text-emerald-600 shadow-sm'
+                      : 'text-neutral-600 hover:text-neutral-800'
+                  }`}
+                >
+                  教师
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setUserRole('student')}
+                  className={`flex-1 py-2.5 px-4 rounded-lg font-medium transition-all duration-200 ${
+                    userRole === 'student'
+                      ? 'bg-white text-orange-600 shadow-sm'
+                      : 'text-neutral-600 hover:text-neutral-800'
+                  }`}
+                >
+                  学生
+                </button>
+              </div>
+            </div>
+
+            <Form form={form} onFinish={handleRegister} layout="vertical" size="large">
+              <Form.Item
+                name="username"
+                rules={[{ required: true, message: '请输入用户名' }]}
+              >
+                <Input
+                  prefix={<UserOutlined className="text-neutral-400" />}
+                  placeholder="用户名"
+                  size="large"
+                  className="rounded-lg"
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="password"
+                rules={[
+                  { required: true, message: '请输入密码' },
+                  { min: 6, message: '密码至少6位' },
+                ]}
+              >
+                <Input.Password
+                  prefix={<LockOutlined className="text-neutral-400" />}
+                  placeholder="密码"
+                  size="large"
+                  className="rounded-lg"
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="confirmPassword"
+                rules={[
+                  { required: true, message: '请确认密码' },
+                ]}
+              >
+                <Input.Password
+                  prefix={<LockOutlined className="text-neutral-400" />}
+                  placeholder="确认密码"
+                  size="large"
+                  className="rounded-lg"
+                />
+              </Form.Item>
+
+              <Form.Item className="mb-4">
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  loading={loading}
+                  block
+                  size="large"
+                  className="rounded-lg h-12 text-base font-medium"
+                  style={{ backgroundColor: '#8b5cf6', borderColor: '#8b5cf6' }}
+                >
+                  注册
+                </Button>
+              </Form.Item>
+
+              <div className="text-center">
+                <span className="text-neutral-500">已有账号？</span>
+                <Button
+                  type="link"
+                  onClick={() => navigate('/login')}
+                  style={{ color: '#10b981' }}
+                  className="font-medium"
+                >
+                  返回登录
+                </Button>
+              </div>
+            </Form>
+          </div>
+
+          <div className="text-center mt-8 text-sm text-neutral-400">
+            &copy; 2024 智能教育助手 - AI驱动的未来教育
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default RegisterPage;

frontend/src/pages/student/AgentChat.css

@@ -0,0 +1,159 @@
+/* 思考中动画 */
+.thinking-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.thinking-dots span {
+  width: 8px;
+  height: 8px;
+  background-color: #8b5cf6;
+  border-radius: 50%;
+  animation: thinking 1.4s ease-in-out infinite;
+}
+
+.thinking-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.thinking-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes thinking {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 打字光标 */
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 16px;
+  background-color: #8b5cf6;
+  animation: blink 1s infinite;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Markdown样式 */
+.markdown-body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #374151;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.markdown-body h1 {
+  font-size: 1.5em;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 8px;
+}
+
+.markdown-body h2 {
+  font-size: 1.3em;
+}
+
+.markdown-body h3 {
+  font-size: 1.15em;
+}
+
+.markdown-body pre {
+  margin: 12px 0;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 12px 0;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  border: 1px solid #e5e7eb;
+  padding: 8px 12px;
+}
+
+.markdown-body table th {
+  background-color: #f9fafb;
+  font-weight: 600;
+}
+
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 16px 0;
+}
+
+/* 消息样式 */
+.bot-message {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* 插件面板 Tabs 撑满高度 */
+.ant-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.ant-tabs-content-holder {
+  flex: 1;
+  overflow: hidden;
+}
+
+.ant-tabs-content {
+  height: 100%;
+}
+
+.ant-tabs-tabpane {
+  height: 100%;
+  padding: 12px 16px;
+  overflow: auto;
+}

frontend/src/pages/student/AgentChat.jsx

@@ -0,0 +1,854 @@
+/**
+ * 学生端 - Agent对话页面
+ * 支持SSE流式响应、参考文献显示、代码高亮、插件面板等功能
+ */
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import {
+  Layout,
+  Input,
+  Button,
+  Card,
+  Space,
+  Avatar,
+  Spin,
+  message,
+  Typography,
+  Tag,
+  Empty,
+  Tabs
+} from 'antd';
+import {
+  SendOutlined,
+  RobotOutlined,
+  UserOutlined,
+  CodeOutlined,
+  CopyOutlined,
+  BookOutlined,
+  FileTextOutlined,
+  AppstoreOutlined,
+  CloseOutlined,
+  BarChartOutlined,
+  BranchesOutlined
+} from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import api from '../../services/api';
+import CodeExecutor from '../../components/plugins/CodeExecutor';
+import Visualization3D from '../../components/plugins/Visualization3D';
+import MindmapViewer from '../../components/plugins/MindmapViewer';
+import './AgentChat.css';
+
+const { Content } = Layout;
+const { TextArea } = Input;
+const { Title, Text, Paragraph } = Typography;
+
+const AgentChat = () => {
+  const { agentId } = useParams();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token');
+
+  // 状态管理
+  const [agent, setAgent] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [inputMessage, setInputMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingAgent, setLoadingAgent] = useState(true);
+  const [error, setError] = useState(null);
+
+  // 插件面板状态
+  const [pluginPanelOpen, setPluginPanelOpen] = useState(false);
+  const [activePlugin, setActivePlugin] = useState('code');
+  const [availablePlugins, setAvailablePlugins] = useState([]);
+  const [pluginData, setPluginData] = useState({ code: '', vizCode: '', mindmapMd: '' });
+  const [panelRatio, setPanelRatio] = useState(4 / 7); // 插件面板占比 4/7（对话3:面板4）
+  const dragRef = useRef(null);
+
+  const messagesEndRef = useRef(null);
+
+  // 验证Token并加载Agent信息
+  useEffect(() => {
+    if (!agentId || !token) {
+      setError('无效的访问链接');
+      setLoadingAgent(false);
+      return;
+    }
+
+    verifyAndLoadAgent();
+  }, [agentId, token]);
+
+  // 自动滚动到底部
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  // 验证Token并加载Agent
+  const verifyAndLoadAgent = async () => {
+    try {
+      setLoadingAgent(true);
+      const response = await api.post('/verify_token', {
+        agent_id: agentId,
+        token: token
+      });
+
+      if (response.success) {
+        setAgent(response.agent);
+        // 添加欢迎消息
+        setMessages([{
+          id: Date.now(),
+          type: 'bot',
+          content: `你好！我是${response.agent.name}，${response.agent.description || '有什么可以帮助你的吗？'}`,
+          timestamp: new Date()
+        }]);
+      } else {
+        setError('访问令牌无效或已过期');
+      }
+    } catch (error) {
+      console.error('验证失败:', error);
+      setError('无法验证访问权限: ' + (error.message || '未知错误'));
+    } finally {
+      setLoadingAgent(false);
+    }
+  };
+
+  // 发送消息
+  const handleSendMessage = async () => {
+    if (!inputMessage.trim() || isLoading) return;
+
+    const userMessage = {
+      id: Date.now(),
+      type: 'user',
+      content: inputMessage,
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    const currentMessage = inputMessage;
+    setInputMessage('');
+    setIsLoading(true);
+
+    // 创建机器人消息占位
+    const botMessageId = Date.now() + 1;
+    const botMessage = {
+      id: botMessageId,
+      type: 'bot',
+      content: '',
+      timestamp: new Date(),
+      isStreaming: true,
+      references: []
+    };
+    setMessages(prev => [...prev, botMessage]);
+
+    try {
+      // 发送请求到后端（SSE流式响应）
+      // SSE 直连后端，绕过 Vite 代理避免缓冲
+      const SSE_BASE = window.location.hostname === 'localhost' ? 'http://localhost:7860' : '';
+      const response = await fetch(`${SSE_BASE}/api/student/chat/${agentId}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message: currentMessage,
+          token: token,
+          conversation_id: Date.now().toString()
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('发送失败');
+      }
+
+      // 读取SSE流
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let botContent = '';
+      let references = [];
+      let streamPlugins = [];
+      let pluginTriggered = false;
+      const STREAM_TIMEOUT = 60000; // 60秒无数据超时
+
+      const readWithTimeout = () => {
+        return Promise.race([
+          reader.read(),
+          new Promise((_, reject) =>
+            setTimeout(() => {
+              reader.cancel();
+              reject(new Error('响应超时，请重试'));
+            }, STREAM_TIMEOUT)
+          )
+        ]);
+      };
+
+      while (true) {
+        const { done, value } = await readWithTimeout();
+
+        if (done) {
+          // 处理 buffer 中可能残留的最后一条数据
+          if (buffer.trim()) {
+            const remaining = buffer.trim();
+            if (remaining.startsWith('data: ')) {
+              try {
+                const data = JSON.parse(remaining.slice(6));
+                if (data.type === 'content') {
+                  botContent += data.content;
+                }
+              } catch (e) { /* ignore partial JSON */ }
+            }
+          }
+          // 标记流结束
+          setMessages(prev => prev.map(msg =>
+            msg.id === botMessageId
+              ? { ...msg, content: botContent, isStreaming: false, references }
+              : msg
+          ));
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const dataStr = line.slice(6).trim();
+          if (!dataStr) continue;
+
+          try {
+            const data = JSON.parse(dataStr);
+
+            if (data.type === 'start') {
+              if (data.references) {
+                references = data.references;
+              }
+              // 记录可用插件
+              if (data.plugins && data.plugins.length > 0) {
+                streamPlugins = data.plugins;
+                setAvailablePlugins(data.plugins);
+              }
+            } else if (data.type === 'content') {
+              botContent += data.content;
+              setMessages(prev => prev.map(msg =>
+                msg.id === botMessageId
+                  ? { ...msg, content: botContent }
+                  : msg
+              ));
+
+              // 流式过程中实时检测代码块
+              if (streamPlugins.length > 0) {
+                // 阶段1：检测到代码块开头，打开面板并实时填充编辑器
+                const openBlock = botContent.match(/```(python|mindmap|markdown)\n([\s\S]*)$/);
+                if (openBlock && !pluginTriggered) {
+                  const lang = openBlock[1];
+                  const partial = openBlock[2];
+                  if (lang === 'python' && streamPlugins.includes('code') && !partial.includes('```')) {
+                    setPluginData(prev => ({ ...prev, code: partial }));
+                    setActivePlugin('code');
+                    setPluginPanelOpen(true);
+                  }
+                }
+
+                // 阶段2：代码块闭合，最终触发（3D渲染/思维导图等需要完整代码）
+                if (!pluginTriggered) {
+                  const completeBlock = botContent.match(/```(?:python|mindmap|markdown)\n[\s\S]+?```/);
+                  if (completeBlock) {
+                    pluginTriggered = true;
+                    extractPluginContent(botContent, streamPlugins);
+                  }
+                }
+              }
+            } else if (data.type === 'metadata') {
+              // 处理元数据（token 用量等），暂记录到 console
+              console.log('Stream metadata:', data.content);
+            } else if (data.type === 'error') {
+              // 后端报错
+              throw new Error(data.content || '服务端处理出错');
+            } else if (data.type === 'done') {
+              setMessages(prev => prev.map(msg =>
+                msg.id === botMessageId
+                  ? { ...msg, isStreaming: false, references }
+                  : msg
+              ));
+            }
+          } catch (e) {
+            if (e.message?.includes('超时') || e.message?.includes('服务端')) throw e;
+            console.warn('解析SSE数据失败:', dataStr, e);
+          }
+        }
+      }
+
+      // 流结束后，如果还没触发过插件，最终检测一次
+      if (!pluginTriggered) {
+        extractPluginContent(botContent, streamPlugins);
+      }
+
+    } catch (error) {
+      console.error('发送消息失败:', error);
+      message.error('发送失败，请重试');
+
+      // 更新错误状态
+      setMessages(prev => prev.map(msg =>
+        msg.id === botMessageId
+          ? { ...msg, content: '抱歉，我遇到了一些问题。请稍后再试。', isStreaming: false, isError: true }
+          : msg
+      ));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 拖拽调整面板宽度
+  const handleDragStart = useCallback((e) => {
+    e.preventDefault();
+    const container = e.target.parentElement;
+    const containerWidth = container.getBoundingClientRect().width;
+    setIsDragging(true);
+
+    const onMouseMove = (moveEvent) => {
+      const rect = container.getBoundingClientRect();
+      const x = moveEvent.clientX - rect.left;
+      const ratio = 1 - (x / containerWidth);
+      setPanelRatio(Math.min(0.7, Math.max(0.25, ratio)));
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      setIsDragging(false);
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, []);
+
+  // 从 AI 回复中提取插件相关内容
+  const extractPluginContent = useCallback((content, plugins) => {
+    if (!content) return;
+    const activePlugins = plugins || availablePlugins;
+
+    // 提取 3D 可视化代码（包含 create_3d_plot，优先匹配）
+    const vizMatch = content.match(/```python\n([\s\S]*?create_3d_plot[\s\S]*?)```/);
+    if (vizMatch && activePlugins.includes('visualization')) {
+      setPluginData(prev => ({ ...prev, vizCode: vizMatch[1].trim() }));
+      setActivePlugin('viz');
+      setPluginPanelOpen(true);
+      return; // 3D 优先，不再检查代码插件
+    }
+
+    // 提取 Python 代码块（用于代码执行插件）
+    const pythonMatch = content.match(/```python\n([\s\S]*?)```/);
+    if (pythonMatch && activePlugins.includes('code')) {
+      setPluginData(prev => ({ ...prev, code: pythonMatch[1].trim() }));
+      setActivePlugin('code');
+      setPluginPanelOpen(true);
+    }
+
+    // 提取思维导图内容
+    // 支持三种格式：```markdown 代码块、```mindmap 代码块、@startmindmap PlantUML
+    let mindmapMd = null;
+
+    // 格式1: markdown/mindmap 代码块
+    const mdBlockMatch = content.match(/```(?:markdown|mindmap)\n([\s\S]*?)```/);
+    if (mdBlockMatch) {
+      mindmapMd = mdBlockMatch[1].trim();
+    }
+
+    // 格式2: PlantUML @startmindmap 格式 → 转换为 Markdown 标题
+    if (!mindmapMd) {
+      const plantUmlMatch = content.match(/@startmindmap\s*\n([\s\S]*?)@endmindmap/);
+      if (plantUmlMatch) {
+        mindmapMd = plantUmlMatch[1]
+          .split('\n')
+          .filter(line => line.trim())
+          .map(line => {
+            // PlantUML: * = h1, ** = h2, *** = h3, ...
+            const match = line.match(/^(\*+)\s*(.*)/);
+            if (match) {
+              const level = match[1].length;
+              const text = match[2].replace(/^[:\s]+|;$/g, '').trim();
+              return '#'.repeat(level) + ' ' + text;
+            }
+            return line;
+          })
+          .join('\n');
+      }
+    }
+
+    if (mindmapMd && activePlugins.includes('mindmap')) {
+      setPluginData(prev => ({ ...prev, mindmapMd }));
+      setActivePlugin('mindmap');
+      setPluginPanelOpen(true);
+    }
+  }, [availablePlugins]);
+
+  // 复制代码
+  const copyCode = (code) => {
+    navigator.clipboard.writeText(code).then(() => {
+      message.success('代码已复制');
+    }).catch(() => {
+      message.error('复制失败');
+    });
+  };
+
+  // 渲染消息
+  const renderMessage = (msg) => {
+    const isBot = msg.type === 'bot';
+
+    // 处理参考来源（从消息内容中移除）
+    let displayContent = msg.content || '';
+
+    // 移除消息中的参考来源标记
+    displayContent = displayContent.replace(/===参考来源开始===[\s\S]*?===参考来源结束===/g, '').trim();
+
+    return (
+      <div
+        key={msg.id}
+        style={{
+          display: 'flex',
+          gap: '12px',
+          marginBottom: '24px',
+          flexDirection: isBot ? 'row' : 'row-reverse'
+        }}
+      >
+        <Avatar
+          icon={isBot ? <RobotOutlined /> : <UserOutlined />}
+          style={{
+            backgroundColor: isBot ? '#8b5cf6' : '#10b981',
+            flexShrink: 0,
+            border: `2px solid ${isBot ? 'rgba(139, 92, 246, 0.2)' : 'rgba(16, 185, 129, 0.2)'}`
+          }}
+        />
+
+        <div style={{ maxWidth: '70%', minWidth: '200px' }}>
+          <Card
+            style={{
+              border: `1px solid ${isBot ? 'rgba(139, 92, 246, 0.15)' : 'rgba(16, 185, 129, 0.2)'}`,
+              background: isBot ? '#ffffff' : 'rgba(16, 185, 129, 0.03)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+              borderRadius: '8px'
+            }}
+            styles={{ body: { padding: '12px 16px' } }}
+          >
+            {isBot ? (
+              <div className="bot-message">
+                {msg.isStreaming && !displayContent ? (
+                  // 只在没有内容时显示思考中
+                  <Space align="center">
+                    <div className="thinking-dots">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                    </div>
+                    <Text type="secondary" style={{ fontSize: '14px' }}>正在思考中</Text>
+                  </Space>
+                ) : (
+                  <>
+                    <ReactMarkdown
+                      className="markdown-body"
+                      remarkPlugins={[remarkGfm, remarkMath]}
+                      rehypePlugins={[rehypeKatex]}
+                      components={{
+                        code({ node, inline, className, children, ...props }) {
+                          const match = /language-(\w+)/.exec(className || '');
+                          const language = match ? match[1] : '';
+
+                          if (!inline && language) {
+                            return (
+                              <div style={{
+                                position: 'relative',
+                                marginTop: '12px',
+                                marginBottom: '12px',
+                                borderRadius: '6px',
+                                overflow: 'hidden',
+                                border: '1px solid rgba(139, 92, 246, 0.1)'
+                              }}>
+                                <div style={{
+                                  display: 'flex',
+                                  justifyContent: 'space-between',
+                                  alignItems: 'center',
+                                  padding: '8px 12px',
+                                  background: 'rgba(139, 92, 246, 0.05)',
+                                  borderBottom: '1px solid rgba(139, 92, 246, 0.1)'
+                                }}>
+                                  <Text style={{ fontSize: '12px', color: '#6b7280' }}>{language}</Text>
+                                  <Button
+                                    size="small"
+                                    type="text"
+                                    icon={<CopyOutlined />}
+                                    onClick={() => copyCode(String(children).replace(/\n$/, ''))}
+                                  >
+                                    复制
+                                  </Button>
+                                </div>
+                                <SyntaxHighlighter
+                                  language={language}
+                                  style={tomorrow}
+                                  PreTag="div"
+                                  customStyle={{
+                                    margin: 0,
+                                    background: '#fafbfc',
+                                    fontSize: '14px'
+                                  }}
+                                  {...props}
+                                >
+                                  {String(children).replace(/\n$/, '')}
+                                </SyntaxHighlighter>
+                              </div>
+                            );
+                          }
+
+                          return (
+                            <code
+                              style={{
+                                background: 'rgba(139, 92, 246, 0.08)',
+                                padding: '2px 6px',
+                                borderRadius: '4px',
+                                fontSize: '0.9em',
+                                color: '#8b5cf6'
+                              }}
+                              {...props}
+                            >
+                              {children}
+                            </code>
+                          );
+                        },
+                        p: ({ children }) => <p style={{ marginBottom: '12px', lineHeight: '1.6' }}>{children}</p>,
+                        ul: ({ children }) => <ul style={{ marginBottom: '12px', paddingLeft: '20px' }}>{children}</ul>,
+                        ol: ({ children }) => <ol style={{ marginBottom: '12px', paddingLeft: '20px' }}>{children}</ol>,
+                        li: ({ children }) => <li style={{ marginBottom: '4px' }}>{children}</li>,
+                        blockquote: ({ children }) => (
+                          <blockquote style={{
+                            borderLeft: '4px solid rgba(139, 92, 246, 0.3)',
+                            paddingLeft: '12px',
+                            marginLeft: 0,
+                            color: '#6b7280',
+                            fontStyle: 'italic'
+                          }}>
+                            {children}
+                          </blockquote>
+                        )
+                      }}
+                    >
+                      {displayContent}
+                    </ReactMarkdown>
+
+                    {msg.isStreaming && displayContent && (
+                      // 流式传输时的光标
+                      <span className="typing-cursor"></span>
+                    )}
+                  </>
+                )}
+              </div>
+            ) : (
+              <Text style={{ fontSize: '14px', lineHeight: '1.6' }}>{msg.content}</Text>
+            )}
+
+            {msg.isError && (
+              <div style={{ marginTop: '8px' }}>
+                <Text type="danger" style={{ fontSize: '12px' }}>
+                  ⚠ 发生错误
+                </Text>
+              </div>
+            )}
+          </Card>
+
+          {/* 参考文献卡片 */}
+          {isBot && msg.references && msg.references.length > 0 && (
+            <Card
+              size="small"
+              style={{
+                marginTop: '8px',
+                border: '1px solid rgba(139, 92, 246, 0.1)',
+                background: 'rgba(139, 92, 246, 0.02)',
+                borderRadius: '8px'
+              }}
+              title={
+                <Space>
+                  <FileTextOutlined style={{ color: '#8b5cf6' }} />
+                  <Text style={{ fontSize: '13px', fontWeight: 500 }}>参考来源</Text>
+                </Space>
+              }
+              styles={{ body: { padding: '12px' } }}
+            >
+              {msg.references.map((ref, index) => (
+                <div key={index} style={{
+                  marginBottom: index < msg.references.length - 1 ? '12px' : 0,
+                  paddingBottom: index < msg.references.length - 1 ? '12px' : 0,
+                  borderBottom: index < msg.references.length - 1 ? '1px solid rgba(139, 92, 246, 0.08)' : 'none'
+                }}>
+                  <Space align="start">
+                    <Tag color="purple" style={{ marginRight: 0 }}>{ref.index || index + 1}</Tag>
+                    <div>
+                      <Text style={{ fontSize: '13px', color: '#374151' }}>
+                        {ref.summary}
+                      </Text>
+                      <br />
+                      <Text type="secondary" style={{ fontSize: '12px' }}>
+                        来源: {ref.file_name}
+                      </Text>
+                    </div>
+                  </Space>
+                </div>
+              ))}
+            </Card>
+          )}
+
+          <Text type="secondary" style={{ fontSize: '12px', display: 'block', marginTop: '8px' }}>
+            {new Date(msg.timestamp).toLocaleTimeString()}
+          </Text>
+        </div>
+      </div>
+    );
+  };
+
+  // 显示加载状态
+  if (loadingAgent) {
+    return (
+      <div style={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: '#fafbfc'
+      }}>
+        <Spin size="large" tip="正在加载Agent信息...">
+          <div style={{ height: '100px' }} />
+        </Spin>
+      </div>
+    );
+  }
+
+  // 显示错误状态
+  if (error) {
+    return (
+      <div style={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: '#fafbfc'
+      }}>
+        <Card style={{ textAlign: 'center', padding: '20px' }}>
+          <Title level={4} type="danger">加载失败</Title>
+          <Text type="secondary">{error}</Text>
+          <br />
+          <Button
+            type="primary"
+            style={{ marginTop: '20px' }}
+            onClick={() => window.location.reload()}
+          >
+            重试
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!agent) {
+    return (
+      <div style={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: '#fafbfc'
+      }}>
+        <Empty description="Agent未找到" />
+      </div>
+    );
+  }
+
+  // 插件 Tab 配置
+  const pluginTabs = [
+    ...(availablePlugins.includes('code') ? [{
+      key: 'code',
+      label: <span><CodeOutlined /> 代码</span>,
+      children: <CodeExecutor initialCode={pluginData.code} />
+    }] : []),
+    ...(availablePlugins.includes('visualization') ? [{
+      key: 'viz',
+      label: <span><BarChartOutlined /> 3D</span>,
+      children: <Visualization3D code={pluginData.vizCode} />
+    }] : []),
+    ...(availablePlugins.includes('mindmap') ? [{
+      key: 'mindmap',
+      label: <span><BranchesOutlined /> 导图</span>,
+      children: <MindmapViewer markdown={pluginData.mindmapMd} />
+    }] : []),
+  ];
+
+  return (
+    <Layout style={{ height: '100vh', background: '#fafbfc' }}>
+      {/* 顶部栏 */}
+      <div style={{
+        height: '60px',
+        background: '#ffffff',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.08)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 24px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
+      }}>
+        <Space size="large">
+          <Avatar
+            size="large"
+            icon={<RobotOutlined />}
+            style={{ backgroundColor: '#8b5cf6' }}
+          />
+          <div>
+            <Title level={4} style={{ margin: 0 }}>{agent.name}</Title>
+            <Text type="secondary" style={{ fontSize: '12px' }}>{agent.description}</Text>
+          </div>
+        </Space>
+        {/* 插件面板切换按钮 */}
+        {availablePlugins.length > 0 && (
+          <Button
+            type={pluginPanelOpen ? 'primary' : 'default'}
+            icon={pluginPanelOpen ? <CloseOutlined /> : <AppstoreOutlined />}
+            onClick={() => setPluginPanelOpen(!pluginPanelOpen)}
+            style={pluginPanelOpen ? { background: '#8b5cf6', borderColor: '#8b5cf6' } : {}}
+          >
+            {pluginPanelOpen ? '关闭面板' : '插件面板'}
+          </Button>
+        )}
+      </div>
+
+      {/* 主体区域：对话 + 插件面板 */}
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        {/* 左侧对话区 */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+          <Content style={{
+            flex: 1,
+            padding: '24px',
+            overflowY: 'auto',
+            background: '#fafbfc'
+          }}>
+            <div style={{ maxWidth: '900px', margin: '0 auto' }}>
+              {messages.map(renderMessage)}
+              <div ref={messagesEndRef} />
+            </div>
+          </Content>
+
+          {/* 输入区域 */}
+          <div style={{
+            padding: '16px 24px',
+            background: '#ffffff',
+            borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+            boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.04)'
+          }}>
+            <div style={{ maxWidth: '900px', margin: '0 auto' }}>
+              <Space.Compact style={{ width: '100%' }}>
+                <TextArea
+                  value={inputMessage}
+                  onChange={e => setInputMessage(e.target.value)}
+                  onPressEnter={e => {
+                    if (!e.shiftKey) {
+                      e.preventDefault();
+                      handleSendMessage();
+                    }
+                  }}
+                  placeholder="输入你的问题... (Shift+Enter换行)"
+                  autoSize={{ minRows: 1, maxRows: 4 }}
+                  style={{
+                    borderRadius: '8px 0 0 8px',
+                    resize: 'none'
+                  }}
+                />
+                <Button
+                  type="primary"
+                  icon={<SendOutlined />}
+                  onClick={handleSendMessage}
+                  loading={isLoading}
+                  style={{
+                    height: 'auto',
+                    minHeight: '32px',
+                    borderRadius: '0 8px 8px 0',
+                    background: '#10b981'
+                  }}
+                >
+                  发送
+                </Button>
+              </Space.Compact>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：拖拽分隔条 + 插件面板 */}
+        {pluginPanelOpen && pluginTabs.length > 0 && (
+          <>
+            {/* 拖拽分隔条 */}
+            <div
+              ref={dragRef}
+              onMouseDown={handleDragStart}
+              style={{
+                width: '6px',
+                cursor: 'col-resize',
+                background: 'transparent',
+                position: 'relative',
+                flexShrink: 0,
+                zIndex: 10,
+              }}
+            >
+              <div style={{
+                position: 'absolute',
+                left: '2px',
+                top: 0,
+                bottom: 0,
+                width: '2px',
+                background: 'rgba(139, 92, 246, 0.2)',
+                transition: 'background 0.2s',
+              }} />
+            </div>
+            {/* 插件面板 */}
+            <div style={{
+              flex: `0 0 ${panelRatio * 100}%`,
+              minWidth: '300px',
+              maxWidth: '75%',
+              background: '#ffffff',
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+              position: 'relative'
+            }}>
+              {/* 拖拽时遮罩，阻止 iframe 捕获鼠标 */}
+              {isDragging && (
+                <div style={{
+                  position: 'absolute',
+                  inset: 0,
+                  zIndex: 100,
+                  cursor: 'col-resize',
+                }} />
+              )}
+              <Tabs
+                activeKey={activePlugin}
+                onChange={setActivePlugin}
+                items={pluginTabs}
+                style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+                tabBarStyle={{ padding: '0 16px', marginBottom: 0 }}
+                tabBarGutter={16}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </Layout>
+  );
+};
+
+export default AgentChat;

frontend/src/pages/student/StudentDashboard.jsx

@@ -0,0 +1,14 @@
+// 学生仪表板主路由组件
+import { Routes, Route, Navigate } from 'react-router-dom';
+import StudentPortal from './StudentPortal';
+
+const StudentDashboard = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<StudentPortal />} />
+      <Route path="*" element={<Navigate to="/student" replace />} />
+    </Routes>
+  );
+};
+
+export default StudentDashboard;

frontend/src/pages/student/StudentPortal.jsx

@@ -0,0 +1,389 @@
+/**
+ * 学生端 - 门户页面
+ * 基于 student_portal.html 的React实现
+ * 包含Agent列表、活动记录、访问令牌输入等功能
+ */
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Layout,
+  Card,
+  Row,
+  Col,
+  Input,
+  Button,
+  Space,
+  Typography,
+  Tag,
+  Empty,
+  message,
+  Spin,
+  Timeline,
+  Avatar,
+  Divider
+} from 'antd';
+import {
+  RobotOutlined,
+  ClockCircleOutlined,
+  CodeOutlined,
+  BarChartOutlined,
+  BulbOutlined,
+  LoginOutlined,
+  BookOutlined,
+  MessageOutlined,
+  ExperimentOutlined,
+  TeamOutlined,
+  CalendarOutlined
+} from '@ant-design/icons';
+import api from '../../services/api';
+import { motion } from 'framer-motion';
+
+const { Content } = Layout;
+const { Title, Text, Paragraph } = Typography;
+const { Search } = Input;
+
+const StudentPortal = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  const [agents, setAgents] = useState([]);
+  const [activities, setActivities] = useState([]);
+  const [accessToken, setAccessToken] = useState('');
+  const [loadingActivities, setLoadingActivities] = useState(false);
+
+  // 加载Agent列表和活动记录
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      // 并行加载Agent列表和活动记录
+      const [agentsRes, activitiesRes] = await Promise.all([
+        loadAgents(),
+        loadActivities()
+      ]);
+
+      setAgents(agentsRes || []);
+      setActivities(activitiesRes || []);
+    } catch (error) {
+      console.error('加载数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载学生可访问的Agent列表
+  const loadAgents = async () => {
+    try {
+      const response = await api.get('/student/agents');
+      if (response.success) {
+        return response.data || [];
+      }
+      return [];
+    } catch (error) {
+      console.error('加载Agent列表失败:', error);
+      return [];
+    }
+  };
+
+  // 加载活动记录
+  const loadActivities = async () => {
+    try {
+      setLoadingActivities(true);
+      const response = await api.get('/student/activities');
+      if (response.success) {
+        return response.activities || [];
+      }
+      return [];
+    } catch (error) {
+      console.error('加载活动记录失败:', error);
+      return [];
+    } finally {
+      setLoadingActivities(false);
+    }
+  };
+
+  // 使用访问令牌访问Agent
+  const handleAccessWithToken = async () => {
+    if (!accessToken.trim()) {
+      message.warning('请输入访问令牌');
+      return;
+    }
+
+    try {
+      // 验证令牌
+      const response = await api.post('/verify_token', {
+        token: accessToken
+      });
+
+      if (response.success) {
+        const agent = response.agent;
+        message.success('验证成功，正在跳转...');
+        // 跳转到聊天界面
+        navigate(`/student/chat/${agent.id}?token=${accessToken}`);
+      } else {
+        message.error('访问令牌无效或已过期');
+      }
+    } catch (error) {
+      console.error('验证失败:', error);
+      message.error('验证失败，请检查令牌是否正确');
+    }
+  };
+
+  // 访问Agent
+  const handleAccessAgent = (agent) => {
+    // 如果有token，使用token访问
+    if (agent.token) {
+      navigate(`/student/chat/${agent.id}?token=${agent.token}`);
+    } else {
+      message.warning('该Agent暂无可用的访问令牌');
+    }
+  };
+
+  // 获取活动图标
+  const getActivityIcon = (type) => {
+    const icons = {
+      chat: <MessageOutlined style={{ color: '#10b981' }} />,
+      code: <CodeOutlined style={{ color: '#3b82f6' }} />,
+      viz: <BarChartOutlined style={{ color: '#f59e0b' }} />,
+      mindmap: <BulbOutlined style={{ color: '#8b5cf6' }} />
+    };
+    return icons[type] || <ClockCircleOutlined style={{ color: '#6b7280' }} />;
+  };
+
+  // 获取插件标签颜色
+  const getPluginColor = (plugin) => {
+    const colors = {
+      code: 'blue',
+      visualization: 'orange',
+      mindmap: 'purple'
+    };
+    return colors[plugin] || 'default';
+  };
+
+  if (loading) {
+    return (
+      <div style={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f9fafb'
+      }}>
+        <Spin size="large" tip="正在加载..." />
+      </div>
+    );
+  }
+
+  return (
+    <Layout style={{ minHeight: '100vh', backgroundColor: '#f9fafb' }}>
+      <Content style={{ padding: '24px' }}>
+        {/* 欢迎区域 */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <Card
+            style={{
+              marginBottom: '24px',
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              border: 'none'
+            }}
+          >
+            <Row align="middle">
+              <Col span={18}>
+                <Title level={2} style={{ color: '#fff', marginBottom: '8px' }}>
+                  欢迎来到智能学习平台
+                </Title>
+                <Paragraph style={{ color: 'rgba(255, 255, 255, 0.9)', fontSize: '16px', marginBottom: 0 }}>
+                  探索AI驱动的个性化学习体验，与智能助教互动，提升学习效率
+                </Paragraph>
+              </Col>
+              <Col span={6} style={{ textAlign: 'right' }}>
+                <Avatar
+                  size={80}
+                  icon={<BookOutlined />}
+                  style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
+                />
+              </Col>
+            </Row>
+          </Card>
+        </motion.div>
+
+        {/* 快速访问区域 */}
+        <Card
+          title="快速访问"
+          style={{ marginBottom: '24px' }}
+          extra={
+            <Text type="secondary">
+              输入教师提供的访问令牌
+            </Text>
+          }
+        >
+          <Search
+            placeholder="请输入访问令牌"
+            enterButton={
+              <Button type="primary" icon={<LoginOutlined />}>
+                访问
+              </Button>
+            }
+            size="large"
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+            onSearch={handleAccessWithToken}
+            style={{ maxWidth: '600px' }}
+          />
+        </Card>
+
+        <Row gutter={[24, 24]}>
+          {/* Agent列表 */}
+          <Col xs={24} lg={16}>
+            <Card
+              title={
+                <Space>
+                  <RobotOutlined />
+                  <span>可用的AI助教</span>
+                </Space>
+              }
+              bordered={false}
+            >
+              {agents.length > 0 ? (
+                <Row gutter={[16, 16]}>
+                  {agents.map((agent, index) => (
+                    <Col xs={24} sm={12} key={agent.id}>
+                      <motion.div
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: index * 0.1 }}
+                      >
+                        <Card
+                          hoverable
+                          onClick={() => handleAccessAgent(agent)}
+                          style={{ height: '100%' }}
+                        >
+                          <Space direction="vertical" style={{ width: '100%' }}>
+                            <div>
+                              <Avatar
+                                size="large"
+                                icon={<RobotOutlined />}
+                                style={{
+                                  backgroundColor: '#8b5cf6',
+                                  marginRight: '12px'
+                                }}
+                              />
+                              <Text strong style={{ fontSize: '16px' }}>
+                                {agent.name}
+                              </Text>
+                            </div>
+
+                            <Text type="secondary">
+                              {agent.description || '智能学习助手'}
+                            </Text>
+
+                            <div>
+                              {agent.plugins && agent.plugins.map(plugin => (
+                                <Tag
+                                  key={plugin}
+                                  color={getPluginColor(plugin)}
+                                  style={{ marginRight: '8px' }}
+                                >
+                                  {plugin === 'code' && <CodeOutlined />}
+                                  {plugin === 'visualization' && <BarChartOutlined />}
+                                  {plugin === 'mindmap' && <BulbOutlined />}
+                                  <span style={{ marginLeft: '4px' }}>
+                                    {plugin === 'code' && '代码执行'}
+                                    {plugin === 'visualization' && '3D可视化'}
+                                    {plugin === 'mindmap' && '思维导图'}
+                                  </span>
+                                </Tag>
+                              ))}
+                            </div>
+
+                            <div style={{ marginTop: '8px' }}>
+                              <Space>
+                                <TeamOutlined />
+                                <Text type="secondary" style={{ fontSize: '12px' }}>
+                                  {agent.instructor || '教师'}
+                                </Text>
+                                <Divider type="vertical" />
+                                <CalendarOutlined />
+                                <Text type="secondary" style={{ fontSize: '12px' }}>
+                                  {agent.last_used || '未使用'}
+                                </Text>
+                              </Space>
+                            </div>
+                          </Space>
+                        </Card>
+                      </motion.div>
+                    </Col>
+                  ))}
+                </Row>
+              ) : (
+                <Empty
+                  description="暂无可用的AI助教"
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                >
+                  <Button
+                    type="primary"
+                    icon={<LoginOutlined />}
+                    onClick={() => document.querySelector('input').focus()}
+                  >
+                    使用访问令牌
+                  </Button>
+                </Empty>
+              )}
+            </Card>
+          </Col>
+
+          {/* 活动记录 */}
+          <Col xs={24} lg={8}>
+            <Card
+              title={
+                <Space>
+                  <ClockCircleOutlined />
+                  <span>最近活动</span>
+                </Space>
+              }
+              bordered={false}
+              loading={loadingActivities}
+            >
+              {activities.length > 0 ? (
+                <Timeline>
+                  {activities.map((activity, index) => (
+                    <Timeline.Item
+                      key={index}
+                      dot={getActivityIcon(activity.type)}
+                    >
+                      <div style={{ marginBottom: '12px' }}>
+                        <Text strong>{activity.title}</Text>
+                        <br />
+                        {activity.agent_name && (
+                          <Text type="secondary" style={{ fontSize: '12px' }}>
+                            {activity.agent_name}
+                          </Text>
+                        )}
+                        <br />
+                        <Text type="secondary" style={{ fontSize: '12px' }}>
+                          {activity.time}
+                        </Text>
+                      </div>
+                    </Timeline.Item>
+                  ))}
+                </Timeline>
+              ) : (
+                <Empty
+                  description="暂无活动记录"
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                />
+              )}
+            </Card>
+          </Col>
+        </Row>
+      </Content>
+    </Layout>
+  );
+};
+
+export default StudentPortal;

frontend/src/pages/teacher/AgentList.jsx

@@ -0,0 +1,660 @@
+/**
+ * 教师端 - Agent列表页面
+ * 对应原始 index.html 的 agent-list section
+ * 复用原始HTML的Agent列表展示和管理逻辑
+ */
+import { useState, useEffect } from 'react';
+import { Card, Row, Col, Button, Space, Tag, Modal, Form, Select, message, Input, Descriptions, Popconfirm } from 'antd';
+import {
+  RobotOutlined,
+  ShareAltOutlined,
+  EyeOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  ExclamationCircleOutlined,
+  CopyOutlined,
+  BookOutlined,
+  UserOutlined,
+  CodeOutlined,
+  BarChartOutlined,
+  BulbOutlined,
+} from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import agentService from '../../services/agentService';
+
+const { confirm } = Modal;
+
+const AgentList = () => {
+  const [agents, setAgents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [detailModalVisible, setDetailModalVisible] = useState(false);
+  const [distributionModalVisible, setDistributionModalVisible] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [distributionForm] = Form.useForm();
+  const [createdDistribution, setCreatedDistribution] = useState(null);
+
+  useEffect(() => {
+    loadAgents();
+  }, []);
+
+  // 加载Agent列表
+  const loadAgents = async () => {
+    try {
+      setLoading(true);
+      const res = await agentService.getAgents();
+      setAgents(res.data || []);
+    } catch (error) {
+      console.error('加载Agent列表失败:', error);
+      message.error('加载Agent列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 获取Agent类型文本
+  const getAgentTypeText = (type) => {
+    const typeMap = {
+      educational: '教育辅导',
+      programming: '编程辅助',
+      math: '数学辅导',
+      general: '通用助手',
+    };
+    return typeMap[type] || type;
+  };
+
+  // 获取Agent类型颜色
+  const getAgentTypeColor = (type) => {
+    const colorMap = {
+      educational: '#10b981',
+      programming: '#3b82f6',
+      math: '#f59e0b',
+      general: '#8b5cf6',
+    };
+    return colorMap[type] || '#6b7280';
+  };
+
+  // 获取插件图标
+  const getPluginIcon = (pluginId) => {
+    const iconMap = {
+      code: <CodeOutlined style={{ fontSize: '18px' }} />,
+      visualization: <BarChartOutlined style={{ fontSize: '18px' }} />,
+      mindmap: <BulbOutlined style={{ fontSize: '18px' }} />,
+    };
+    return iconMap[pluginId] || <RobotOutlined />;
+  };
+
+  // 获取插件名称
+  const getPluginName = (pluginId) => {
+    const nameMap = {
+      code: '代码执行',
+      visualization: '3D可视化',
+      mindmap: '思维导图',
+    };
+    return nameMap[pluginId] || pluginId;
+  };
+
+  // 查看Agent详情
+  const handleShowDetail = async (agent) => {
+    try {
+      const res = await agentService.getAgentDetail(agent.id);
+      setSelectedAgent(res.data);
+      setDetailModalVisible(true);
+    } catch (error) {
+      message.error('获取Agent详情失败');
+    }
+  };
+
+  // 编辑Agent
+  const handleEdit = (agent) => {
+    // 将agent数据保存到localStorage
+    localStorage.setItem('editingAgent', JSON.stringify(agent));
+    // 跳转到创建页面（编辑模式）
+    window.location.href = '/teacher/create-agent?mode=edit';
+  };
+
+  // 删除Agent
+  const handleDelete = async (agentId) => {
+    try {
+      await agentService.deleteAgent(agentId);
+      message.success('Agent已删除');
+      loadAgents();
+    } catch (error) {
+      console.error('删除失败:', error);
+      message.error('删除失败');
+    }
+  };
+
+  // 显示创建分发链接对话框
+  const handleShowDistribution = (agent) => {
+    setSelectedAgent(agent);
+    setDistributionModalVisible(true);
+    distributionForm.resetFields();
+  };
+
+  // 创建分发链接
+  const handleCreateDistribution = async (values) => {
+    try {
+      const res = await agentService.createDistribution(selectedAgent.id, values.expiresIn);
+
+      if (res.success) {
+        // 后端返回的是 distribution 对象
+        const distribution = res.distribution;
+        const origin = window.location.origin;
+        const fullLink = `${origin}/student/chat/${selectedAgent.id}?token=${distribution.token}`;
+        const accessToken = distribution.token;
+
+        setCreatedDistribution({
+          fullLink,
+          accessToken,
+        });
+
+        message.success('分发链接创建成功');
+        loadAgents(); // 刷新列表
+
+        // 刷新当前 Agent 详情，确保 distributions 数组更新
+        try {
+          const detail = await agentService.getAgentDetail(selectedAgent.id);
+          setSelectedAgent(detail.data);
+        } catch (e) { /* ignore */ }
+      } else {
+        message.error(res.message || '创建分发链接失败');
+      }
+    } catch (error) {
+      console.error('创建分发链接失败:', error);
+      message.error('创建分发链接失败');
+    }
+  };
+
+  // 复制到剪贴板
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      message.success('已复制到剪贴板');
+    }).catch(() => {
+      message.error('复制失败');
+    });
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 600, color: '#1f2937', margin: 0 }}>
+          Agent列表
+        </h1>
+        <p style={{ fontSize: '14px', color: '#6b7280', marginTop: '8px' }}>
+          管理您创建的所有AI教学助手
+        </p>
+      </div>
+
+      {loading ? (
+        <Card loading={loading} />
+      ) : agents.length > 0 ? (
+        <Row gutter={[24, 24]}>
+          {agents.map((agent) => (
+            <Col xs={24} md={12} lg={8} key={agent.id}>
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                whileHover={{ y: -4 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Card
+                  style={{
+                    border: `1px solid ${getAgentTypeColor(agent.type)}33`,
+                    borderRadius: '12px',
+                    height: '100%',
+                  }}
+                  bodyStyle={{ padding: '20px' }}
+                >
+                  {/* Agent头部 */}
+                  <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '16px' }}>
+                    <div
+                      style={{
+                        width: '48px',
+                        height: '48px',
+                        borderRadius: '12px',
+                        background: `${getAgentTypeColor(agent.type)}15`,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: '12px',
+                        flexShrink: 0,
+                      }}
+                    >
+                      <RobotOutlined
+                        style={{
+                          fontSize: '24px',
+                          color: getAgentTypeColor(agent.type),
+                        }}
+                      />
+                    </div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <h3
+                        style={{
+                          fontSize: '18px',
+                          fontWeight: 600,
+                          margin: 0,
+                          color: '#1f2937',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {agent.name}
+                      </h3>
+                      <Tag
+                        color={getAgentTypeColor(agent.type)}
+                        style={{ marginTop: '4px' }}
+                      >
+                        {getAgentTypeText(agent.type)}
+                      </Tag>
+                    </div>
+                  </div>
+
+                  {/* Agent描述 */}
+                  <p
+                    style={{
+                      fontSize: '14px',
+                      color: '#6b7280',
+                      marginBottom: '16px',
+                      lineHeight: '1.5',
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {agent.description || '暂无描述'}
+                  </p>
+
+                  {/* Agent标签信息 */}
+                  <div style={{ marginBottom: '16px' }}>
+                    {agent.subject && (
+                      <div style={{ fontSize: '13px', color: '#6b7280', marginBottom: '4px' }}>
+                        <BookOutlined style={{ marginRight: '6px' }} />
+                        {agent.subject}
+                      </div>
+                    )}
+                    {agent.instructor && (
+                      <div style={{ fontSize: '13px', color: '#6b7280' }}>
+                        <UserOutlined style={{ marginRight: '6px' }} />
+                        {agent.instructor}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 插件标签 */}
+                  {agent.plugins && agent.plugins.length > 0 && (
+                    <div style={{ marginBottom: '16px' }}>
+                      <Space size={[4, 4]} wrap>
+                        {agent.plugins.map((pluginId) => (
+                          <Tag
+                            key={pluginId}
+                            icon={getPluginIcon(pluginId)}
+                            style={{ fontSize: '12px' }}
+                          >
+                            {getPluginName(pluginId)}
+                          </Tag>
+                        ))}
+                      </Space>
+                    </div>
+                  )}
+
+                  {/* ���计信息 */}
+                  <div
+                    style={{
+                      paddingTop: '16px',
+                      borderTop: '1px solid #e5e7eb',
+                      marginBottom: '16px',
+                    }}
+                  >
+                    <Row gutter={16}>
+                      <Col span={12}>
+                        <div style={{ fontSize: '12px', color: '#9ca3af' }}>分发链接</div>
+                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#1f2937' }}>
+                          {agent.distribution_count || 0}
+                        </div>
+                      </Col>
+                      <Col span={12}>
+                        <div style={{ fontSize: '12px', color: '#9ca3af' }}>使用次数</div>
+                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#1f2937' }}>
+                          {agent.usageCount || 0}
+                        </div>
+                      </Col>
+                    </Row>
+                  </div>
+
+                  {/* 操作按钮 */}
+                  <Space size="small" style={{ width: '100%' }} wrap>
+                    <Button
+                      type="primary"
+                      size="small"
+                      icon={<ShareAltOutlined />}
+                      onClick={() => handleShowDistribution(agent)}
+                      style={{ backgroundColor: '#10b981' }}
+                    >
+                      分发
+                    </Button>
+                    <Button
+                      size="small"
+                      icon={<EyeOutlined />}
+                      onClick={() => handleShowDetail(agent)}
+                    >
+                      详情
+                    </Button>
+                    <Button
+                      size="small"
+                      icon={<EditOutlined />}
+                      onClick={() => handleEdit(agent)}
+                    >
+                      编辑
+                    </Button>
+                    <Popconfirm
+                      title="确认删除"
+                      description={`确定要删除Agent "${agent.name}" 吗？`}
+                      onConfirm={() => handleDelete(agent.id)}
+                      okText="删除"
+                      cancelText="取消"
+                      okButtonProps={{ danger: true }}
+                    >
+                      <Button
+                        danger
+                        size="small"
+                        icon={<DeleteOutlined />}
+                      >
+                        删除
+                      </Button>
+                    </Popconfirm>
+                  </Space>
+                </Card>
+              </motion.div>
+            </Col>
+          ))}
+        </Row>
+      ) : (
+        <Card>
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '60px 20px',
+              color: '#9ca3af',
+            }}
+          >
+            <RobotOutlined style={{ fontSize: '64px', marginBottom: '16px', opacity: 0.5 }} />
+            <div style={{ fontSize: '16px', marginBottom: '8px' }}>
+              还没有创建任何Agent
+            </div>
+            <div style={{ fontSize: '14px', marginBottom: '24px' }}>
+              创建您的第一个AI教学助手
+            </div>
+            <Button
+              type="primary"
+              size="large"
+              icon={<PlusOutlined />}
+              style={{ backgroundColor: '#10b981' }}
+            >
+              创建Agent
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {/* Agent详情对话框 */}
+      <Modal
+        title={<span style={{ fontSize: '20px', fontWeight: 600 }}>Agent详情</span>}
+        open={detailModalVisible}
+        onCancel={() => setDetailModalVisible(false)}
+        footer={null}
+        width={800}
+      >
+        {selectedAgent && (
+          <div>
+            <Descriptions column={2} bordered>
+              <Descriptions.Item label="名称" span={2}>
+                {selectedAgent.name}
+              </Descriptions.Item>
+              <Descriptions.Item label="描述" span={2}>
+                {selectedAgent.description}
+              </Descriptions.Item>
+              <Descriptions.Item label="类型">
+                <Tag color={getAgentTypeColor(selectedAgent.type)}>
+                  {getAgentTypeText(selectedAgent.type)}
+                </Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="学科">
+                {selectedAgent.subject || '-'}
+              </Descriptions.Item>
+              <Descriptions.Item label="指导教师">
+                {selectedAgent.instructor || '-'}
+              </Descriptions.Item>
+              <Descriptions.Item label="创建时间">
+                {selectedAgent.created_at || '-'}
+              </Descriptions.Item>
+            </Descriptions>
+
+            <div style={{ marginTop: '24px' }}>
+              <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '12px' }}>
+                启用的插件
+              </h4>
+              {selectedAgent.plugins && selectedAgent.plugins.length > 0 ? (
+                <Space size={[8, 8]} wrap>
+                  {selectedAgent.plugins.map((pluginId) => (
+                    <Tag
+                      key={pluginId}
+                      icon={getPluginIcon(pluginId)}
+                      style={{ fontSize: '14px', padding: '4px 12px' }}
+                    >
+                      {getPluginName(pluginId)}
+                    </Tag>
+                  ))}
+                </Space>
+              ) : (
+                <div style={{ color: '#9ca3af' }}>未启用任何插件</div>
+              )}
+            </div>
+
+            <div style={{ marginTop: '24px' }}>
+              <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '12px' }}>
+                关联的知识库
+              </h4>
+              {selectedAgent.knowledgeBases && selectedAgent.knowledgeBases.length > 0 ? (
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  {selectedAgent.knowledgeBases.map((kb) => (
+                    <div
+                      key={kb.id}
+                      style={{
+                        padding: '12px',
+                        background: '#f8fafc',
+                        borderRadius: '8px',
+                        border: '1px solid #e5e7eb',
+                      }}
+                    >
+                      {kb.name}
+                    </div>
+                  ))}
+                </Space>
+              ) : (
+                <div style={{ color: '#9ca3af' }}>未关联任何知识库</div>
+              )}
+            </div>
+
+            {/* 已创建的分发链接 */}
+            <div style={{ marginTop: '24px' }}>
+              <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '12px' }}>
+                已创建的分发链接 ({selectedAgent.distributions?.length || 0})
+              </h4>
+              {selectedAgent.distributions && selectedAgent.distributions.length > 0 ? (
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  {selectedAgent.distributions.map((dist) => (
+                    <div
+                      key={dist.id}
+                      style={{
+                        padding: '12px',
+                        background: '#f0f9ff',
+                        borderRadius: '8px',
+                        border: '1px solid #bae6fd',
+                      }}
+                    >
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <div>
+                          <div style={{ fontSize: '12px', color: '#6b7280' }}>
+                            Token: {dist.token}
+                          </div>
+                          <div style={{ fontSize: '12px', color: '#6b7280', marginTop: '4px' }}>
+                            创建时间: {new Date(dist.created_at * 1000).toLocaleString()}
+                          </div>
+                          {dist.expires_at > 0 && (
+                            <div style={{ fontSize: '12px', color: '#6b7280', marginTop: '4px' }}>
+                              过期时间: {new Date(dist.expires_at * 1000).toLocaleString()}
+                            </div>
+                          )}
+                          <div style={{ fontSize: '12px', color: '#6b7280', marginTop: '4px' }}>
+                            使用次数: {dist.usage_count || 0}
+                          </div>
+                        </div>
+                        <Space>
+                          <Button
+                            size="small"
+                            icon={<CopyOutlined />}
+                            onClick={() => {
+                              const link = `${window.location.origin}/student/chat/${selectedAgent.id}?token=${dist.token}`;
+                              copyToClipboard(link);
+                            }}
+                          >
+                            复制链接
+                          </Button>
+                          <Button
+                            size="small"
+                            type="link"
+                            onClick={() => {
+                              const link = `${window.location.origin}/student/chat/${selectedAgent.id}?token=${dist.token}`;
+                              window.open(link, '_blank');
+                            }}
+                          >
+                            测试
+                          </Button>
+                        </Space>
+                      </div>
+                    </div>
+                  ))}
+                </Space>
+              ) : (
+                <div style={{ color: '#9ca3af' }}>还没有创建分发链接</div>
+              )}
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* 创建分发链接对话框 */}
+      <Modal
+        title={<span style={{ fontSize: '20px', fontWeight: 600 }}>创建分发链接</span>}
+        open={distributionModalVisible}
+        onCancel={() => {
+          setDistributionModalVisible(false);
+          setCreatedDistribution(null);
+        }}
+        footer={null}
+        width={600}
+      >
+        {!createdDistribution ? (
+          <Form
+            form={distributionForm}
+            layout="vertical"
+            onFinish={handleCreateDistribution}
+          >
+            <Form.Item
+              label="链接有效期"
+              name="expiresIn"
+              rules={[{ required: true, message: '请选择有效期' }]}
+              initialValue={7}
+            >
+              <Select size="large">
+                <Select.Option value={7}>7天</Select.Option>
+                <Select.Option value={30}>30天</Select.Option>
+                <Select.Option value={90}>90天</Select.Option>
+                <Select.Option value={0}>永不过期</Select.Option>
+              </Select>
+            </Form.Item>
+
+            <Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                size="large"
+                block
+                style={{ backgroundColor: '#10b981' }}
+              >
+                生成分发链接
+              </Button>
+            </Form.Item>
+          </Form>
+        ) : (
+          <div>
+            <div
+              style={{
+                padding: '16px',
+                background: '#f0fdf4',
+                borderRadius: '8px',
+                border: '1px solid #86efac',
+                marginBottom: '16px',
+              }}
+            >
+              <div style={{ color: '#15803d', marginBottom: '8px', fontWeight: 500 }}>
+                ✓ 分发链接创建成功
+              </div>
+            </div>
+
+            <div style={{ marginBottom: '16px' }}>
+              <div style={{ fontSize: '14px', fontWeight: 500, marginBottom: '8px' }}>
+                完整链接：
+              </div>
+              <Input.TextArea
+                value={createdDistribution.fullLink}
+                readOnly
+                autoSize={{ minRows: 2 }}
+                style={{ marginBottom: '8px' }}
+              />
+              <Button
+                icon={<CopyOutlined />}
+                onClick={() => copyToClipboard(createdDistribution.fullLink)}
+                block
+                style={{ marginBottom: '8px' }}
+              >
+                复制完整链接
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => window.open(createdDistribution.fullLink, '_blank')}
+                block
+              >
+                测试链接
+              </Button>
+            </div>
+
+            <div>
+              <div style={{ fontSize: '14px', fontWeight: 500, marginBottom: '8px' }}>
+                访问令牌（学生可在登录页输入）：
+              </div>
+              <Input.TextArea
+                value={createdDistribution.accessToken}
+                readOnly
+                autoSize={{ minRows: 2 }}
+                style={{ marginBottom: '8px' }}
+              />
+              <Button
+                icon={<CopyOutlined />}
+                onClick={() => copyToClipboard(createdDistribution.accessToken)}
+                block
+              >
+                复制访问令牌
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default AgentList;

frontend/src/pages/teacher/CreateAgent.jsx

@@ -0,0 +1,696 @@
+/**
+ * 教师端 - 创建Agent页面
+ * 对应原始 index.html 的 create-agent section (4步向导)
+ * 复用原始HTML的4步表单逻辑
+ */
+import { useState, useEffect } from 'react';
+import { Steps, Card, Form, Input, Select, Button, Space, Checkbox, message, Row, Col, Modal } from 'antd';
+import {
+  InfoCircleOutlined,
+  AppstoreOutlined,
+  DatabaseOutlined,
+  BranchesOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CheckOutlined,
+} from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import knowledgeService from '../../services/knowledgeService';
+import agentService from '../../services/agentService';
+import WorkflowEditor from '../../components/WorkflowEditor';
+
+const { TextArea } = Input;
+
+const CreateAgent = () => {
+  const [form] = Form.useForm();
+  const [currentStep, setCurrentStep] = useState(0);
+  const [submitting, setSubmitting] = useState(false); // 创建Agent的loading
+  const [aiGenerating, setAiGenerating] = useState(false); // AI生成工作流的loading
+  const [selectedPlugins, setSelectedPlugins] = useState([]);
+  const [selectedKnowledgeBases, setSelectedKnowledgeBases] = useState([]);
+  const [knowledgeBases, setKnowledgeBases] = useState([]);
+  const [workflow, setWorkflow] = useState(null);
+  const [showWorkflowEditor, setShowWorkflowEditor] = useState(false);
+
+  // 检查是否是编辑模式
+  const urlParams = new URLSearchParams(window.location.search);
+  const isEditMode = urlParams.get('mode') === 'edit';
+  const [editingAgentId, setEditingAgentId] = useState(null);
+
+  // 保存每个步骤的数据
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    subject: '',
+    instructor: '',
+    type: 'general',
+  });
+
+  // 加载知识库列表和编辑数据
+  useEffect(() => {
+    loadKnowledgeBases();
+
+    // 如果是编辑模式，加载agent数据
+    if (isEditMode) {
+      const editingAgentStr = localStorage.getItem('editingAgent');
+      if (editingAgentStr) {
+        try {
+          const editingAgent = JSON.parse(editingAgentStr);
+          setEditingAgentId(editingAgent.id);
+
+          // 设置表单数据
+          setFormData({
+            name: editingAgent.name || '',
+            description: editingAgent.description || '',
+            subject: editingAgent.subject || '',
+            instructor: editingAgent.instructor || '',
+            type: editingAgent.type || 'general',
+          });
+
+          // 设置表单初始值
+          form.setFieldsValue({
+            name: editingAgent.name || '',
+            description: editingAgent.description || '',
+            subject: editingAgent.subject || '',
+            instructor: editingAgent.instructor || '',
+            type: editingAgent.type || 'general',
+          });
+
+          // 设置其他数据
+          setSelectedPlugins(editingAgent.plugins || []);
+          setSelectedKnowledgeBases(editingAgent.knowledgeBases || []);
+          setWorkflow(editingAgent.workflow || null);
+
+          // 清除localStorage
+          localStorage.removeItem('editingAgent');
+        } catch (error) {
+          console.error('加载编辑数据失败:', error);
+        }
+      }
+    }
+  }, [isEditMode]);
+
+  const loadKnowledgeBases = async () => {
+    try {
+      const res = await knowledgeService.getKnowledgeBases();
+      setKnowledgeBases(res.data || []);
+    } catch (error) {
+      console.error('加载知识库失败:', error);
+    }
+  };
+
+  // 可用插件列表（对应原始HTML的插件选项）
+  const availablePlugins = [
+    {
+      id: 'code',
+      name: '代码执行',
+      icon: '💻',
+      description: '允许学生编写和执行Python代码，实时获取结果',
+      color: '#10b981',
+    },
+    {
+      id: 'visualization',
+      name: '3D可视化',
+      icon: '📊',
+      description: '生成交互式3D图形，帮助学生理解数学概念',
+      color: '#f97316',
+    },
+    {
+      id: 'mindmap',
+      name: '思维导图',
+      icon: '🗺️',
+      description: '创建结构化的思维导图，帮助学生梳理知识点',
+      color: '#8b5cf6',
+    },
+  ];
+
+  // Agent类型选项
+  const agentTypes = [
+    { value: 'educational', label: '教育辅导' },
+    { value: 'programming', label: '编程辅助' },
+    { value: 'math', label: '数学辅导' },
+    { value: 'general', label: '通用助手' },
+  ];
+
+  // 步骤配置
+  const steps = [
+    {
+      title: '基本信息',
+      icon: <InfoCircleOutlined />,
+    },
+    {
+      title: '插件选择',
+      icon: <AppstoreOutlined />,
+    },
+    {
+      title: '知识库',
+      icon: <DatabaseOutlined />,
+    },
+    {
+      title: '工作流',
+      icon: <BranchesOutlined />,
+    },
+  ];
+
+  // 切换插件选择
+  const togglePlugin = (pluginId) => {
+    setSelectedPlugins((prev) =>
+      prev.includes(pluginId)
+        ? prev.filter((id) => id !== pluginId)
+        : [...prev, pluginId]
+    );
+  };
+
+  // 切换知识库���择
+  const toggleKnowledgeBase = (kbId) => {
+    setSelectedKnowledgeBases((prev) =>
+      prev.includes(kbId)
+        ? prev.filter((id) => id !== kbId)
+        : [...prev, kbId]
+    );
+  };
+
+  // 生成AI工作流
+  const handleGenerateAIWorkflow = async () => {
+    try {
+      setAiGenerating(true);
+      const values = form.getFieldsValue();
+      const res = await agentService.generateAIWorkflow({
+        name: values.name,
+        description: values.description,
+        type: values.type,
+        plugins: selectedPlugins,
+        knowledgeBases: selectedKnowledgeBases,
+      });
+
+      if (res.success) {
+        setWorkflow(res.data.workflow);
+        message.success('AI工作流生成成功');
+      }
+    } catch (error) {
+      message.error('生成工作流失败');
+    } finally {
+      setAiGenerating(false);
+    }
+  };
+
+  // 下一步
+  const handleNext = async () => {
+    try {
+      // 验证当前步骤的表单
+      if (currentStep === 0) {
+        await form.validateFields(['name', 'description', 'type']);
+        // 保存第一步的表单数据
+        const values = form.getFieldsValue();
+        setFormData({
+          name: values.name,
+          description: values.description,
+          subject: values.subject || '',  // subject 可能为空
+          instructor: values.instructor || '', // instructor 可能为空
+          type: values.type,
+        });
+      }
+
+      setCurrentStep(currentStep + 1);
+    } catch (error) {
+      message.error('请填写完整信息');
+    }
+  };
+
+  // 上一步
+  const handlePrev = () => {
+    setCurrentStep(currentStep - 1);
+    // 返回第一步时，恢复表单数据
+    if (currentStep === 1) {
+      setTimeout(() => {
+        form.setFieldsValue(formData);
+      }, 0);
+    }
+  };
+
+  // 提交创建或更新Agent
+  const handleSubmit = async () => {
+    try {
+      setSubmitting(true);
+
+      const agentData = {
+        name: formData.name,
+        description: formData.description,
+        subject: formData.subject,
+        instructor: formData.instructor,
+        type: formData.type,
+        plugins: selectedPlugins,
+        knowledgeBases: selectedKnowledgeBases,
+        workflow: workflow || {
+          nodes: [],
+          edges: [],
+        },
+      };
+
+      console.log('发送Agent数据:', agentData);
+
+      let res;
+      if (isEditMode && editingAgentId) {
+        // 更新Agent
+        res = await agentService.updateAgent(editingAgentId, agentData);
+        if (res.success) {
+          message.success('Agent更新成功！');
+          // 跳转回列表页
+          window.location.href = '/teacher/agents';
+        }
+      } else {
+        // 创建新Agent
+        res = await agentService.createAgent(agentData);
+        if (res.success) {
+          message.success('Agent创建成功！');
+          // 重置表单
+          form.resetFields();
+          setCurrentStep(0);
+          setSelectedPlugins([]);
+          setSelectedKnowledgeBases([]);
+          setWorkflow(null);
+          setFormData({
+            name: '',
+            description: '',
+            subject: '',
+            instructor: '',
+            type: 'general',
+          });
+        }
+      }
+
+      if (!res.success) {
+        message.error(res.message || '操作失败');
+      }
+    } catch (error) {
+      console.error('操作失败:', error);
+      message.error(error.response?.data?.message || '操作失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // 渲染步骤内容
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 0:
+        // 步骤1: 基本信息
+        return (
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <Form form={form} layout="vertical" size="large">
+              <Form.Item
+                label="Agent名称"
+                name="name"
+                rules={[{ required: true, message: '请输入Agent名称' }]}
+              >
+                <Input placeholder="例如：Python编程助手" />
+              </Form.Item>
+
+              <Form.Item
+                label="描述"
+                name="description"
+                rules={[{ required: true, message: '请输入描述' }]}
+              >
+                <TextArea
+                  rows={4}
+                  placeholder="简要描述这个Agent的功能和用途"
+                />
+              </Form.Item>
+
+              <Row gutter={16}>
+                <Col span={12}>
+                  <Form.Item label="学科/课程名称" name="subject">
+                    <Input placeholder="例如：计算机科学" />
+                  </Form.Item>
+                </Col>
+                <Col span={12}>
+                  <Form.Item label="指导教师" name="instructor">
+                    <Input placeholder="例如：张老师" />
+                  </Form.Item>
+                </Col>
+              </Row>
+
+              <Form.Item
+                label="Agent类型"
+                name="type"
+                rules={[{ required: true, message: '请选择Agent类型' }]}
+              >
+                <Select placeholder="选择Agent类型" options={agentTypes} />
+              </Form.Item>
+            </Form>
+          </motion.div>
+        );
+
+      case 1:
+        // 步骤2: 插件选择
+        return (
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <div style={{ marginBottom: '16px' }}>
+              <h3 style={{ fontSize: '16px', fontWeight: 600, color: '#1f2937' }}>
+                选择Agent可以使用的插件
+              </h3>
+              <p style={{ fontSize: '14px', color: '#6b7280' }}>
+                这些插件将增强Agent的能力，帮助学生更好地学习
+              </p>
+            </div>
+
+            <Row gutter={[16, 16]}>
+              {availablePlugins.map((plugin) => (
+                <Col span={24} key={plugin.id}>
+                  <motion.div
+                    whileHover={{ x: 4 }}
+                    style={{
+                      padding: '20px',
+                      background: selectedPlugins.includes(plugin.id)
+                        ? `${plugin.color}10`
+                        : '#f8fafc',
+                      border: selectedPlugins.includes(plugin.id)
+                        ? `2px solid ${plugin.color}`
+                        : '2px solid #e5e7eb',
+                      borderRadius: '12px',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s',
+                    }}
+                    onClick={() => togglePlugin(plugin.id)}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                      <div
+                        style={{
+                          fontSize: '32px',
+                          width: '56px',
+                          height: '56px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          background: `${plugin.color}15`,
+                          borderRadius: '12px',
+                        }}
+                      >
+                        {plugin.icon}
+                      </div>
+                      <div style={{ flex: 1 }}>
+                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#1f2937', marginBottom: '4px' }}>
+                          {plugin.name}
+                        </div>
+                        <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                          {plugin.description}
+                        </div>
+                      </div>
+                      <Checkbox checked={selectedPlugins.includes(plugin.id)} />
+                    </div>
+                  </motion.div>
+                </Col>
+              ))}
+            </Row>
+          </motion.div>
+        );
+
+      case 2:
+        // 步骤3: 知识库关联
+        return (
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <div style={{ marginBottom: '16px' }}>
+              <h3 style={{ fontSize: '16px', fontWeight: 600, color: '#1f2937' }}>
+                选择关联的知识库
+              </h3>
+              <p style={{ fontSize: '14px', color: '#6b7280' }}>
+                选择与此Agent相关的知识库，Agent将基于这些知识回答问题
+              </p>
+            </div>
+
+            {knowledgeBases.length > 0 ? (
+              <Row gutter={[16, 16]}>
+                {knowledgeBases.map((kb) => (
+                  <Col span={12} key={kb.id}>
+                    <motion.div
+                      whileHover={{ y: -4 }}
+                      style={{
+                        padding: '16px',
+                        background: selectedKnowledgeBases.includes(kb.id)
+                          ? 'rgba(16, 185, 129, 0.1)'
+                          : 'white',
+                        border: selectedKnowledgeBases.includes(kb.id)
+                          ? '2px solid #10b981'
+                          : '1px solid #e5e7eb',
+                        borderRadius: '12px',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s',
+                      }}
+                      onClick={() => toggleKnowledgeBase(kb.id)}
+                    >
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <div>
+                          <div style={{ fontSize: '16px', fontWeight: 600, color: '#1f2937' }}>
+                            {kb.name}
+                          </div>
+                          <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '4px' }}>
+                            {kb.fileCount || 0} 个文件
+                          </div>
+                        </div>
+                        <Checkbox checked={selectedKnowledgeBases.includes(kb.id)} />
+                      </div>
+                    </motion.div>
+                  </Col>
+                ))}
+              </Row>
+            ) : (
+              <div style={{ textAlign: 'center', padding: '40px', color: '#9ca3af' }}>
+                <DatabaseOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
+                <div>还没有创建任何知识库</div>
+                <Button type="link" style={{ marginTop: '8px' }}>
+                  去创建知识库
+                </Button>
+              </div>
+            )}
+          </motion.div>
+        );
+
+      case 3:
+        // 步骤4: 工作流设计
+        return (
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <div style={{ marginBottom: '24px' }}>
+              <h3 style={{ fontSize: '16px', fontWeight: 600, color: '#1f2937' }}>
+                工作流设计
+              </h3>
+              <p style={{ fontSize: '14px', color: '#6b7280' }}>
+                定义Agent如何处理学生的问题和请求
+              </p>
+            </div>
+
+            <Card
+              style={{
+                border: '1px solid rgba(139, 92, 246, 0.2)',
+                borderRadius: '12px',
+                marginBottom: '16px',
+              }}
+            >
+              <Space direction="vertical" size="large" style={{ width: '100%' }}>
+                <div>
+                  <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>
+                    AI自动设计（推荐）
+                  </h4>
+                  <p style={{ fontSize: '14px', color: '#6b7280', marginBottom: '16px' }}>
+                    让AI根据您选择的插件和知识库自动生成最优工作流
+                  </p>
+                  <Button
+                    type="primary"
+                    icon={<BranchesOutlined />}
+                    loading={aiGenerating}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleGenerateAIWorkflow();
+                    }}
+                    style={{ backgroundColor: '#8b5cf6' }}
+                  >
+                    AI自动生成工作流
+                  </Button>
+                </div>
+
+                {workflow && (
+                  <div
+                    style={{
+                      padding: '16px',
+                      background: '#f8fafc',
+                      borderRadius: '8px',
+                      border: '1px solid #e5e7eb',
+                    }}
+                  >
+                    <div style={{ fontSize: '14px', fontWeight: 500, marginBottom: '8px' }}>
+                      工作流已生成
+                    </div>
+                    <div style={{ fontSize: '12px', color: '#6b7280' }}>
+                      包含 {workflow.nodes?.length || 0} 个节点，
+                      {workflow.edges?.length || 0} 条连接
+                    </div>
+                  </div>
+                )}
+
+                <div style={{ paddingTop: '16px', borderTop: '1px solid #e5e7eb' }}>
+                  <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>
+                    跳过工作流配置
+                  </h4>
+                  <p style={{ fontSize: '14px', color: '#6b7280', marginBottom: '16px' }}>
+                    暂时不配置工作流，后续可以在Agent详情中进行配置
+                  </p>
+                  <Button
+                    type="default"
+                    icon={<CheckOutlined />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setWorkflow({ nodes: [], edges: [] });
+                      message.success('已设置为空工作流，可以直接创建Agent');
+                    }}
+                    style={{
+                      borderColor: '#10b981',
+                      color: '#10b981',
+                    }}
+                  >
+                    跳过工作流配置
+                  </Button>
+                </div>
+
+                <div style={{ paddingTop: '16px', borderTop: '1px solid #e5e7eb' }}>
+                  <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>
+                    手动设计（高级）
+                  </h4>
+                  <p style={{ fontSize: '14px', color: '#6b7280' }}>
+                    使用可视化编辑器自定义工作流
+                  </p>
+                  <Button onClick={() => setShowWorkflowEditor(true)}>
+                    打开工作流编辑器
+                  </Button>
+                </div>
+              </Space>
+            </Card>
+
+            {/* 提示：可以直接创建 */}
+            <div
+              style={{
+                marginTop: '16px',
+                padding: '16px',
+                background: '#f0f9ff',
+                borderRadius: '8px',
+                border: '1px solid #bae6fd',
+              }}
+            >
+              <div style={{ fontSize: '14px', color: '#0369a1', marginBottom: '4px', fontWeight: 500 }}>
+                💡 提示
+              </div>
+              <div style={{ fontSize: '14px', color: '#075985' }}>
+                工作流设计是可选的。您可以直接点击下方的"创建Agent"按钮，先创建一个基础Agent，后续再配置工作流。
+              </div>
+            </div>
+          </motion.div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 600, color: '#1f2937', margin: 0 }}>
+          {isEditMode ? '编辑Agent' : '创建新的Agent'}
+        </h1>
+        <p style={{ fontSize: '14px', color: '#6b7280', marginTop: '8px' }}>
+          {isEditMode ? '修改您的AI教学助手' : '按照步骤创建您的AI教学助手'}
+        </p>
+      </div>
+
+      {/* 步骤指示器 */}
+      <Card style={{ marginBottom: '24px', border: '1px solid #e5e7eb', borderRadius: '12px' }}>
+        <Steps current={currentStep} items={steps} />
+      </Card>
+
+      {/* 步骤内容 */}
+      <Card style={{ border: '1px solid #e5e7eb', borderRadius: '12px', minHeight: '400px' }}>
+        {renderStepContent()}
+
+        {/* 导航按钮 */}
+        <div
+          style={{
+            marginTop: '32px',
+            paddingTop: '24px',
+            borderTop: '1px solid #e5e7eb',
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Button
+            size="large"
+            icon={<ArrowLeftOutlined />}
+            onClick={handlePrev}
+            disabled={currentStep === 0}
+          >
+            上一步
+          </Button>
+
+          {currentStep < steps.length - 1 ? (
+            <Button
+              type="primary"
+              size="large"
+              icon={<ArrowRightOutlined />}
+              onClick={handleNext}
+              style={{ backgroundColor: '#10b981' }}
+            >
+              下一步
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              size="large"
+              icon={<CheckOutlined />}
+              onClick={handleSubmit}
+              loading={submitting}
+              style={{ backgroundColor: '#10b981' }}
+            >
+              {isEditMode ? '保存修改' : '创建Agent'}
+            </Button>
+          )}
+        </div>
+      </Card>
+
+      {/* 工作流编辑器Modal */}
+      <Modal
+        title="工作流编辑器"
+        open={showWorkflowEditor}
+        onCancel={() => setShowWorkflowEditor(false)}
+        width="90%"
+        style={{ top: 20 }}
+        footer={null}
+        destroyOnClose
+      >
+        <WorkflowEditor
+          value={workflow}
+          onChange={(newWorkflow) => setWorkflow(newWorkflow)}
+          onSave={(newWorkflow) => {
+            setWorkflow(newWorkflow);
+            setShowWorkflowEditor(false);
+            message.success('工作流已保存');
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default CreateAgent;

frontend/src/pages/teacher/Dashboard.jsx

@@ -0,0 +1,413 @@
+/**
+ * 教师端 - 仪表板页面
+ * 对应原始 index.html 的 dashboard section
+ */
+import { useEffect, useState } from 'react';
+import { Card, Row, Col, Statistic, Button, Space } from 'antd';
+import {
+  RobotOutlined,
+  DatabaseOutlined,
+  ShareAltOutlined,
+  ArrowRightOutlined,
+  PlusCircleOutlined,
+} from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import agentService from '../../services/agentService';
+import knowledgeService from '../../services/knowledgeService';
+
+const Dashboard = () => {
+  const [stats, setStats] = useState({
+    agentCount: 0,
+    knowledgeCount: 0,
+    distributionCount: 0,
+  });
+  const [recentAgents, setRecentAgents] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadDashboardData();
+  }, []);
+
+  const loadDashboardData = async () => {
+    try {
+      setLoading(true);
+      // 加载Agent列表
+      const agentsRes = await agentService.getAgents();
+      const agents = agentsRes.data || [];
+
+      // 加载知识库列表
+      const kbRes = await knowledgeService.getKnowledgeBases();
+      const knowledgeBases = kbRes.data || [];
+
+      // 计算统计数据
+      const distributionCount = agents.reduce((sum, agent) => {
+        return sum + (agent.distributions?.length || 0);
+      }, 0);
+
+      setStats({
+        agentCount: agents.length,
+        knowledgeCount: knowledgeBases.length,
+        distributionCount,
+      });
+
+      // 获取最近的3个Agent
+      const recent = agents.slice(0, 3);
+      setRecentAgents(recent);
+    } catch (error) {
+      console.error('加载仪表板数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const quickStartSteps = [
+    {
+      step: 1,
+      title: '创建知识库',
+      description: '上传课程资料、文档和教材',
+      icon: <DatabaseOutlined />,
+      color: '#10b981',
+      action: 'knowledge-base',
+    },
+    {
+      step: 2,
+      title: '创建Agent',
+      description: '设计您的AI助教',
+      icon: <RobotOutlined />,
+      color: '#f97316',
+      action: 'create-agent',
+    },
+    {
+      step: 3,
+      title: '分发链接',
+      description: '生成分享链接给学生',
+      icon: <ShareAltOutlined />,
+      color: '#8b5cf6',
+      action: 'agent-list',
+    },
+  ];
+
+  return (
+    <div>
+      {/* 页面标题 */}
+      <div style={{ marginBottom: '24px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 600, color: '#1f2937', margin: 0 }}>
+          欢迎回来
+        </h1>
+        <p style={{ fontSize: '14px', color: '#6b7280', marginTop: '8px' }}>
+          这是您的教学助手控制面板
+        </p>
+      </div>
+
+      {/* 统计卡片 */}
+      <Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
+        <Col xs={24} sm={8}>
+          <motion.div
+            whileHover={{
+              y: -4,
+              transition: { duration: 0.2, ease: 'easeOut' }
+            }}
+          >
+            <Card
+              loading={loading}
+              style={{
+                border: '1px solid rgba(16, 185, 129, 0.2)',
+                borderRadius: '12px',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+                background: '#ffffff',
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              hoverable
+            >
+              <Statistic
+                title={
+                  <span style={{ color: '#6b7280', fontSize: '14px', fontWeight: 500 }}>
+                    AI助手数量
+                  </span>
+                }
+                value={stats.agentCount}
+                prefix={
+                  <div style={{
+                    width: '48px',
+                    height: '48px',
+                    borderRadius: '12px',
+                    background: 'rgba(16, 185, 129, 0.1)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginRight: '12px',
+                  }}>
+                    <RobotOutlined style={{ color: '#10b981', fontSize: '24px' }} />
+                  </div>
+                }
+                valueStyle={{ color: '#1f2937', fontSize: '32px', fontWeight: 600 }}
+              />
+            </Card>
+          </motion.div>
+        </Col>
+        <Col xs={24} sm={8}>
+          <motion.div
+            whileHover={{
+              y: -4,
+              transition: { duration: 0.2, ease: 'easeOut' }
+            }}
+          >
+            <Card
+              loading={loading}
+              style={{
+                border: '1px solid rgba(249, 115, 22, 0.2)',
+                borderRadius: '12px',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+                background: '#ffffff',
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              hoverable
+            >
+              <Statistic
+                title={
+                  <span style={{ color: '#6b7280', fontSize: '14px', fontWeight: 500 }}>
+                    知识库数量
+                  </span>
+                }
+                value={stats.knowledgeCount}
+                prefix={
+                  <div style={{
+                    width: '48px',
+                    height: '48px',
+                    borderRadius: '12px',
+                    background: 'rgba(249, 115, 22, 0.1)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginRight: '12px',
+                  }}>
+                    <DatabaseOutlined style={{ color: '#f97316', fontSize: '24px' }} />
+                  </div>
+                }
+                valueStyle={{ color: '#1f2937', fontSize: '32px', fontWeight: 600 }}
+              />
+            </Card>
+          </motion.div>
+        </Col>
+        <Col xs={24} sm={8}>
+          <motion.div
+            whileHover={{
+              y: -4,
+              transition: { duration: 0.2, ease: 'easeOut' }
+            }}
+          >
+            <Card
+              loading={loading}
+              style={{
+                border: '1px solid rgba(139, 92, 246, 0.2)',
+                borderRadius: '12px',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+                background: '#ffffff',
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              hoverable
+            >
+              <Statistic
+                title={
+                  <span style={{ color: '#6b7280', fontSize: '14px', fontWeight: 500 }}>
+                    分发链接数
+                  </span>
+                }
+                value={stats.distributionCount}
+                prefix={
+                  <div style={{
+                    width: '48px',
+                    height: '48px',
+                    borderRadius: '12px',
+                    background: 'rgba(139, 92, 246, 0.1)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginRight: '12px',
+                  }}>
+                    <ShareAltOutlined style={{ color: '#8b5cf6', fontSize: '24px' }} />
+                  </div>
+                }
+                valueStyle={{ color: '#1f2937', fontSize: '32px', fontWeight: 600 }}
+              />
+            </Card>
+          </motion.div>
+        </Col>
+      </Row>
+
+      {/* 快速开始指引 */}
+      <Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
+        {quickStartSteps.map((item) => (
+          <Col xs={24} md={8} key={item.step}>
+            <motion.div
+              whileHover={{
+                y: -4,
+                transition: { duration: 0.2, ease: 'easeOut' }
+              }}
+            >
+              <Card
+                style={{
+                  border: `1px solid ${item.color}30`,
+                  borderRadius: '12px',
+                  background: '#ffffff',
+                  height: '100%',
+                  cursor: 'pointer',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                }}
+                hoverable
+              >
+                <div style={{ padding: '8px' }}>
+                  <div
+                    style={{
+                      width: '56px',
+                      height: '56px',
+                      borderRadius: '12px',
+                      background: `${item.color}15`,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      marginBottom: '16px',
+                    }}
+                  >
+                    <span style={{ color: item.color, fontSize: '28px' }}>
+                      {item.icon}
+                    </span>
+                  </div>
+                  <div
+                    style={{
+                      fontSize: '12px',
+                      color: item.color,
+                      fontWeight: 600,
+                      marginBottom: '8px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    第 {item.step} 步
+                  </div>
+                  <div style={{ fontSize: '18px', fontWeight: 600, color: '#1f2937', marginBottom: '8px' }}>
+                    {item.title}
+                  </div>
+                  <div style={{ fontSize: '14px', color: '#6b7280', lineHeight: 1.6 }}>
+                    {item.description}
+                  </div>
+                </div>
+              </Card>
+            </motion.div>
+          </Col>
+        ))}
+      </Row>
+
+      {/* 最近创建的Agent */}
+      <Card
+        title={
+          <span style={{
+            fontSize: '18px',
+            fontWeight: 600,
+            color: '#1f2937'
+          }}>
+            最近创建的Agent
+          </span>
+        }
+        extra={
+          <Button
+            type="link"
+            icon={<ArrowRightOutlined />}
+            style={{ color: '#10b981' }}
+          >
+            查看全部
+          </Button>
+        }
+        style={{
+          border: '1px solid #e5e7eb',
+          borderRadius: '12px',
+          marginBottom: '32px',
+          background: '#ffffff',
+        }}
+      >
+        {recentAgents.length > 0 ? (
+          <Space direction="vertical" style={{ width: '100%' }} size="middle">
+            {recentAgents.map((agent) => (
+              <motion.div
+                key={agent.id}
+                whileHover={{
+                  x: 4,
+                  transition: { duration: 0.2, ease: 'easeOut' }
+                }}
+                style={{
+                  padding: '16px',
+                  background: '#f9fafb',
+                  borderRadius: '8px',
+                  border: '1px solid #e5e7eb',
+                  cursor: 'pointer',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    <div
+                      style={{
+                        width: '40px',
+                        height: '40px',
+                        borderRadius: '8px',
+                        background: 'rgba(16, 185, 129, 0.1)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        border: '1px solid rgba(16, 185, 129, 0.2)',
+                      }}
+                    >
+                      <RobotOutlined style={{ color: '#10b981', fontSize: '20px' }} />
+                    </div>
+                    <div>
+                      <div style={{ fontSize: '16px', fontWeight: 500, color: '#1f2937' }}>
+                        {agent.name}
+                      </div>
+                      <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '2px' }}>
+                        {agent.description || '暂无描述'}
+                      </div>
+                    </div>
+                  </div>
+                  <ArrowRightOutlined style={{ color: '#9ca3af' }} />
+                </div>
+              </motion.div>
+            ))}
+          </Space>
+        ) : (
+          <div style={{ textAlign: 'center', padding: '40px 0' }}>
+            <div
+              style={{
+                width: '64px',
+                height: '64px',
+                borderRadius: '16px',
+                background: 'rgba(16, 185, 129, 0.1)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                margin: '0 auto 16px',
+                border: '1px solid rgba(16, 185, 129, 0.2)',
+              }}
+            >
+              <RobotOutlined style={{ fontSize: '32px', color: '#10b981' }} />
+            </div>
+            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '16px' }}>
+              还没有创建任何Agent
+            </div>
+            <Button
+              type="primary"
+              icon={<PlusCircleOutlined />}
+              style={{
+                backgroundColor: '#10b981',
+                borderColor: '#10b981'
+              }}
+            >
+              创建第一个Agent
+            </Button>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default Dashboard;

frontend/src/pages/teacher/KnowledgeBase.jsx

@@ -0,0 +1,473 @@
+/**
+ * 教师端 - 知识库管理页面
+ * 对应原始 index.html 的 knowledge-base section
+ * 复用原始HTML的知识库创建和管理逻辑
+ */
+import { useState, useEffect } from 'react';
+import { Card, Form, Input, Upload, Button, Row, Col, message, Progress, Space, Modal, List, Tag } from 'antd';
+import {
+  UploadOutlined,
+  DeleteOutlined,
+  FileTextOutlined,
+  FilePdfOutlined,
+  FileWordOutlined,
+  FileImageOutlined,
+  PlusOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import knowledgeService from '../../services/knowledgeService';
+
+const { confirm } = Modal;
+
+const KnowledgeBase = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [knowledgeBases, setKnowledgeBases] = useState([]);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploading, setUploading] = useState(false);
+  const [fileList, setFileList] = useState([]);
+
+  useEffect(() => {
+    loadKnowledgeBases();
+  }, []);
+
+  // 加载知识库列表
+  const loadKnowledgeBases = async () => {
+    try {
+      setLoading(true);
+      const res = await knowledgeService.getKnowledgeBases();
+      setKnowledgeBases(res.data || []);
+    } catch (error) {
+      console.error('加载知识库失败:', error);
+      message.error('加载知识库失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 创建知识库
+  const handleCreateKnowledgeBase = async (values) => {
+    if (fileList.length === 0) {
+      message.warning('请选择要上传的文件');
+      return;
+    }
+
+    try {
+      setUploading(true);
+
+      // 后端只支持单文件上传，所以需要逐个上传
+      const firstFile = fileList[0];
+      const formData = new FormData();
+      formData.append('name', values.name);
+      formData.append('file', firstFile.originFileObj); // 注意：使用 'file' 不是 'files'
+
+      const res = await knowledgeService.createKnowledgeBase(formData);
+
+      if (res.success) {
+        message.success('知识库创建成功！');
+
+        // 如果有taskId，轮询进度
+        if (res.data?.task_id) {
+          pollProgress(res.data.task_id);
+        }
+
+        // 如果还有其他文件，需要逐个添加到知识库
+        if (fileList.length > 1) {
+          message.info(`正在上传剩余 ${fileList.length - 1} 个文件...`);
+          // 获取创建的知识库ID
+          const kbId = `rag_${values.name}`;
+
+          // 上传剩余文件
+          for (let i = 1; i < fileList.length; i++) {
+            const additionalFormData = new FormData();
+            additionalFormData.append('file', fileList[i].originFileObj);
+
+            try {
+              const addRes = await knowledgeService.addFileToKnowledgeBase(kbId, additionalFormData);
+              if (addRes.success && addRes.data?.task_id) {
+                pollProgress(addRes.data.task_id);
+              }
+            } catch (error) {
+              console.error(`上传文件 ${fileList[i].name} 失败:`, error);
+              message.error(`文件 ${fileList[i].name} 上传失败`);
+            }
+          }
+        }
+
+        form.resetFields();
+        setFileList([]);
+        setUploadProgress(0);
+        loadKnowledgeBases();
+      }
+    } catch (error) {
+      message.error('创建知识库失败');
+      console.error('创建知识库失败:', error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  // 轮询文件处理进度
+  const pollProgress = async (taskId) => {
+    const maxAttempts = 60; // 最多轮询60次（约1分钟）
+    let attempts = 0;
+
+    const poll = async () => {
+      try {
+        const res = await knowledgeService.getProgress(taskId);
+
+        if (res.data?.status === 'completed') {
+          setUploadProgress(100);
+          message.success('文件处理完成');
+          loadKnowledgeBases();
+          return;
+        }
+
+        if (res.data?.status === 'failed') {
+          message.error('文件处理失败');
+          return;
+        }
+
+        if (res.data?.progress) {
+          setUploadProgress(res.data.progress);
+        }
+
+        attempts++;
+        if (attempts < maxAttempts) {
+          setTimeout(poll, 1000); // 每秒轮询一次
+        }
+      } catch (error) {
+        console.error('获取进度失败:', error);
+      }
+    };
+
+    poll();
+  };
+
+  // 删除知识库
+  const handleDeleteKnowledgeBase = (kbId, kbName) => {
+    confirm({
+      title: '确认删除',
+      icon: <ExclamationCircleOutlined />,
+      content: `确定要删除知识库 "${kbName}" 吗？此操作不可恢复。`,
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await knowledgeService.deleteKnowledgeBase(kbId);
+          message.success('知识库已删除');
+          loadKnowledgeBases();
+        } catch (error) {
+          message.error('删除失败');
+        }
+      },
+    });
+  };
+
+  // 删除知识库中的文件
+  const handleDeleteFile = (indexId, fileName, kbName) => {
+    confirm({
+      title: '确认删除文件',
+      icon: <ExclamationCircleOutlined />,
+      content: `确定要从 "${kbName}" 中删除文件 "${fileName}" 吗？`,
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await knowledgeService.deleteFile(indexId, fileName);
+          message.success('文件已删除');
+          loadKnowledgeBases();
+        } catch (error) {
+          message.error('删除文件失败');
+        }
+      },
+    });
+  };
+
+  // 添加文件到现有知识库
+  const handleAddFiles = async (kbId) => {
+    // TODO: 实现文件添加功能
+    message.info('添加文件功能开发中');
+  };
+
+  // 获取文件图标
+  const getFileIcon = (fileName) => {
+    if (!fileName || typeof fileName !== 'string') {
+      return <FileTextOutlined style={{ color: '#6b7280', fontSize: '20px' }} />;
+    }
+
+    const ext = fileName.split('.').pop().toLowerCase();
+
+    if (['txt', 'md'].includes(ext)) {
+      return <FileTextOutlined style={{ color: '#10b981', fontSize: '20px' }} />;
+    }
+    if (['pdf'].includes(ext)) {
+      return <FilePdfOutlined style={{ color: '#ef4444', fontSize: '20px' }} />;
+    }
+    if (['doc', 'docx'].includes(ext)) {
+      return <FileWordOutlined style={{ color: '#3b82f6', fontSize: '20px' }} />;
+    }
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext)) {
+      return <FileImageOutlined style={{ color: '#f59e0b', fontSize: '20px' }} />;
+    }
+    return <FileTextOutlined style={{ color: '#6b7280', fontSize: '20px' }} />;
+  };
+
+  // 上传配置
+  const uploadProps = {
+    fileList,
+    onChange: ({ fileList: newFileList }) => setFileList(newFileList),
+    beforeUpload: (file) => {
+      const isValidType = [
+        'text/plain',
+        'text/markdown',
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/bmp',
+      ].includes(file.type);
+
+      if (!isValidType) {
+        message.error('不支持的文件类型');
+        return Upload.LIST_IGNORE;
+      }
+
+      const isLt16M = file.size / 1024 / 1024 < 16;
+      if (!isLt16M) {
+        message.error('文件大小不能超过 16MB');
+        return Upload.LIST_IGNORE;
+      }
+
+      return false; // 阻止自动上传
+    },
+    multiple: true,
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 600, color: '#1f2937', margin: 0 }}>
+          知识库管理
+        </h1>
+        <p style={{ fontSize: '14px', color: '#6b7280', marginTop: '8px' }}>
+          创建和管理您的教学资料知识库
+        </p>
+      </div>
+
+      <Row gutter={24}>
+        {/* 左侧：创建知识库 */}
+        <Col xs={24} lg={10}>
+          <Card
+            title={
+              <span style={{ fontSize: '18px', fontWeight: 600 }}>
+                <PlusOutlined style={{ marginRight: '8px', color: '#10b981' }} />
+                创建新知识库
+              </span>
+            }
+            style={{ border: '1px solid #e5e7eb', borderRadius: '12px' }}
+          >
+            <Form form={form} layout="vertical" onFinish={handleCreateKnowledgeBase}>
+              <Form.Item
+                label="知识库名称"
+                name="name"
+                rules={[{ required: true, message: '请输入知识库名称' }]}
+              >
+                <Input
+                  placeholder="例如：Python编程资料"
+                  size="large"
+                />
+              </Form.Item>
+
+              <Form.Item label="上传文件">
+                <Upload {...uploadProps}>
+                  <Button icon={<UploadOutlined />} size="large" block>
+                    选择文件
+                  </Button>
+                </Upload>
+                <div style={{ marginTop: '8px', fontSize: '12px', color: '#6b7280' }}>
+                  支持格式：TXT, MD, PDF, DOC, DOCX, JPG, PNG, GIF, BMP
+                  <br />
+                  单个文件最大 16MB
+                </div>
+              </Form.Item>
+
+              {uploading && uploadProgress > 0 && (
+                <Form.Item>
+                  <Progress
+                    percent={uploadProgress}
+                    status={uploadProgress === 100 ? 'success' : 'active'}
+                    strokeColor="#10b981"
+                  />
+                </Form.Item>
+              )}
+
+              <Form.Item>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  size="large"
+                  loading={uploading}
+                  block
+                  style={{ backgroundColor: '#10b981' }}
+                >
+                  创���知识库
+                </Button>
+              </Form.Item>
+            </Form>
+          </Card>
+        </Col>
+
+        {/* 右侧：现有知识库列表 */}
+        <Col xs={24} lg={14}>
+          <Card
+            title={
+              <span style={{ fontSize: '18px', fontWeight: 600 }}>
+                现有知识库
+              </span>
+            }
+            style={{ border: '1px solid #e5e7eb', borderRadius: '12px' }}
+            loading={loading}
+          >
+            {knowledgeBases.length > 0 ? (
+              <Space direction="vertical" size="large" style={{ width: '100%' }}>
+                {knowledgeBases.map((kb) => (
+                  <motion.div
+                    key={kb.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    style={{
+                      padding: '20px',
+                      background: '#f8fafc',
+                      borderRadius: '12px',
+                      border: '1px solid #e5e7eb',
+                    }}
+                  >
+                    {/* 知识库头部 */}
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+                      <div>
+                        <h3 style={{ fontSize: '18px', fontWeight: 600, margin: 0, color: '#1f2937' }}>
+                          {kb.name}
+                        </h3>
+                        <div style={{ fontSize: '12px', color: '#6b7280', marginTop: '4px' }}>
+                          知识库ID: {kb.id}
+                        </div>
+                      </div>
+                      <Space>
+                        <Button
+                          type="primary"
+                          size="small"
+                          icon={<PlusOutlined />}
+                          onClick={() => handleAddFiles(kb.id)}
+                        >
+                          添加文件
+                        </Button>
+                        <Button
+                          danger
+                          size="small"
+                          icon={<DeleteOutlined />}
+                          onClick={() => handleDeleteKnowledgeBase(kb.id, kb.name)}
+                        >
+                          删除
+                        </Button>
+                      </Space>
+                    </div>
+
+                    {/* 文件列表 */}
+                    {kb.files && kb.files.length > 0 ? (
+                      <div
+                        style={{
+                          background: 'white',
+                          borderRadius: '8px',
+                          padding: '12px',
+                          border: '1px solid #e5e7eb',
+                        }}
+                      >
+                        <List
+                          size="small"
+                          dataSource={kb.files}
+                          renderItem={(file) => (
+                            <List.Item
+                              actions={[
+                                <Button
+                                  type="text"
+                                  danger
+                                  size="small"
+                                  icon={<DeleteOutlined />}
+                                  onClick={() => handleDeleteFile(kb.id, file.name, kb.name)}
+                                >
+                                  删除
+                                </Button>,
+                              ]}
+                            >
+                              <List.Item.Meta
+                                avatar={getFileIcon(file.name)}
+                                title={
+                                  <span style={{ fontSize: '14px', color: '#1f2937' }}>
+                                    {file.name}
+                                  </span>
+                                }
+                                description={
+                                  <span style={{ fontSize: '12px', color: '#6b7280' }}>
+                                    {file.size || '未知大小'}
+                                  </span>
+                                }
+                              />
+                            </List.Item>
+                          )}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        style={{
+                          textAlign: 'center',
+                          padding: '20px',
+                          color: '#9ca3af',
+                          background: 'white',
+                          borderRadius: '8px',
+                          border: '1px dashed #d1d5db',
+                        }}
+                      >
+                        <FileTextOutlined style={{ fontSize: '32px', marginBottom: '8px' }} />
+                        <div>暂无文件</div>
+                      </div>
+                    )}
+
+                    {/* 知识库��数据 */}
+                    <div style={{ marginTop: '12px', display: 'flex', gap: '12px' }}>
+                      <Tag color="blue">{kb.fileCount || 0} 个文件</Tag>
+                      <Tag color="green">索引: {kb.id}</Tag>
+                    </div>
+                  </motion.div>
+                ))}
+              </Space>
+            ) : (
+              <div
+                style={{
+                  textAlign: 'center',
+                  padding: '60px 20px',
+                  color: '#9ca3af',
+                }}
+              >
+                <FileTextOutlined style={{ fontSize: '64px', marginBottom: '16px', opacity: 0.5 }} />
+                <div style={{ fontSize: '16px', marginBottom: '8px' }}>
+                  还没有创建任何知识库
+                </div>
+                <div style={{ fontSize: '14px' }}>
+                  在左侧创建您的第一个知识库
+                </div>
+              </div>
+            )}
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default KnowledgeBase;

frontend/src/pages/teacher/StudentManagement.jsx

@@ -0,0 +1,564 @@
+/**
+ * 学生管理组件
+ * 教师可以管理学生账号，查看学习进度
+ */
+import { useState, useEffect } from 'react';
+import {
+  Card,
+  Table,
+  Button,
+  Space,
+  Tag,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Popconfirm,
+  Tooltip,
+  Avatar,
+  Progress,
+  Row,
+  Col,
+  Statistic,
+  Typography,
+  Drawer,
+  Timeline,
+  Badge
+} from 'antd';
+import {
+  UserAddOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+  TeamOutlined,
+  TrophyOutlined,
+  ClockCircleOutlined,
+  MailOutlined,
+  LockOutlined,
+  EyeOutlined,
+  FileTextOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined
+} from '@ant-design/icons';
+import api from '../../services/api';
+import { motion } from 'framer-motion';
+
+const { Title, Text, Paragraph } = Typography;
+const { Option } = Select;
+
+const StudentManagement = () => {
+  const [students, setStudents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [editingStudent, setEditingStudent] = useState(null);
+  const [selectedStudent, setSelectedStudent] = useState(null);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const [form] = Form.useForm();
+
+  // 加载学生列表
+  const fetchStudents = async () => {
+    setLoading(true);
+    try {
+      const response = await api.get('/teacher/students');
+      if (response.success) {
+        setStudents(response.students || []);
+      } else {
+        message.error('加载学生列表失败');
+      }
+    } catch (error) {
+      console.error('加载学生列表失败:', error);
+      message.error('加载学生列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStudents();
+  }, []);
+
+  // 创建或编辑学生
+  const handleSubmit = async (values) => {
+    try {
+      const url = editingStudent
+        ? `/teacher/students/${editingStudent.id}`
+        : '/teacher/students';
+
+      const method = editingStudent ? 'put' : 'post';
+
+      const response = await api[method](url, values);
+
+      if (response.success) {
+        message.success(editingStudent ? '学生信息已更新' : '学生已创建');
+        setModalVisible(false);
+        form.resetFields();
+        setEditingStudent(null);
+        fetchStudents();
+      } else {
+        message.error(response.message || '操作失败');
+      }
+    } catch (error) {
+      console.error('操作失败:', error);
+      message.error('操作失败');
+    }
+  };
+
+  // 删除学生
+  const handleDelete = async (studentId) => {
+    try {
+      const response = await api.delete(`/teacher/students/${studentId}`);
+      if (response.success) {
+        message.success('学生已删除');
+        fetchStudents();
+      } else {
+        message.error('删除失败');
+      }
+    } catch (error) {
+      console.error('删除失败:', error);
+      message.error('删除失败');
+    }
+  };
+
+  // 重置密码
+  const handleResetPassword = async (studentId) => {
+    try {
+      const response = await api.post(`/teacher/students/${studentId}/reset-password`);
+      if (response.success) {
+        Modal.success({
+          title: '密码重置成功',
+          content: `新密码：${response.newPassword}`,
+        });
+      } else {
+        message.error('重置密码失败');
+      }
+    } catch (error) {
+      console.error('重置密码失败:', error);
+      message.error('重置密码失败');
+    }
+  };
+
+  // 查看学生详情
+  const handleViewDetails = async (student) => {
+    setSelectedStudent(student);
+    setDrawerVisible(true);
+
+    // 加载学生的学习进度
+    try {
+      const response = await api.get(`/teacher/students/${student.id}/progress`);
+      if (response.success) {
+        setSelectedStudent({
+          ...student,
+          progress: response.progress
+        });
+      }
+    } catch (error) {
+      console.error('加载学生进度失败:', error);
+    }
+  };
+
+  // 表格列配置
+  const columns = [
+    {
+      title: '学生信息',
+      key: 'info',
+      render: (_, record) => (
+        <Space>
+          <Avatar style={{ backgroundColor: '#10b981' }}>
+            {record.name ? record.name[0] : 'S'}
+          </Avatar>
+          <div>
+            <div style={{ fontWeight: 500 }}>{record.name}</div>
+            <Text type="secondary" style={{ fontSize: '12px' }}>
+              {record.username}
+            </Text>
+          </div>
+        </Space>
+      ),
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      key: 'email',
+      render: (email) => (
+        <Space>
+          <MailOutlined />
+          <span>{email || '未设置'}</span>
+        </Space>
+      ),
+    },
+    {
+      title: '学号',
+      dataIndex: 'student_id',
+      key: 'student_id',
+    },
+    {
+      title: '班级',
+      dataIndex: 'class',
+      key: 'class',
+      render: (cls) => <Tag color="blue">{cls || '未分配'}</Tag>,
+    },
+    {
+      title: '学习进度',
+      key: 'progress',
+      render: (_, record) => {
+        const progress = record.total_interactions || 0;
+        const level = progress > 50 ? 'high' : progress > 20 ? 'medium' : 'low';
+        const color = level === 'high' ? '#52c41a' : level === 'medium' ? '#faad14' : '#f5222d';
+
+        return (
+          <Tooltip title={`总互动次数: ${progress}`}>
+            <Progress
+              percent={Math.min(progress, 100)}
+              size="small"
+              strokeColor={color}
+              format={() => `${progress}次`}
+            />
+          </Tooltip>
+        );
+      },
+    },
+    {
+      title: '状态',
+      key: 'status',
+      render: (_, record) => {
+        const isActive = record.last_active &&
+          (Date.now() - new Date(record.last_active).getTime()) < 7 * 24 * 60 * 60 * 1000;
+
+        return (
+          <Badge
+            status={isActive ? 'success' : 'default'}
+            text={isActive ? '活跃' : '不活跃'}
+          />
+        );
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      fixed: 'right',
+      render: (_, record) => (
+        <Space size="small">
+          <Tooltip title="查看详情">
+            <Button
+              type="text"
+              icon={<EyeOutlined />}
+              onClick={() => handleViewDetails(record)}
+            />
+          </Tooltip>
+          <Tooltip title="编辑">
+            <Button
+              type="text"
+              icon={<EditOutlined />}
+              onClick={() => {
+                setEditingStudent(record);
+                form.setFieldsValue(record);
+                setModalVisible(true);
+              }}
+            />
+          </Tooltip>
+          <Tooltip title="重置密码">
+            <Popconfirm
+              title="确定要重置该学生的密码吗？"
+              onConfirm={() => handleResetPassword(record.id)}
+            >
+              <Button type="text" icon={<LockOutlined />} />
+            </Popconfirm>
+          </Tooltip>
+          <Tooltip title="删除">
+            <Popconfirm
+              title="确定要删除该学生吗？"
+              onConfirm={() => handleDelete(record.id)}
+            >
+              <Button type="text" danger icon={<DeleteOutlined />} />
+            </Popconfirm>
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  // 过滤学生
+  const filteredStudents = students.filter((student) =>
+    student.name?.toLowerCase().includes(searchText.toLowerCase()) ||
+    student.username?.toLowerCase().includes(searchText.toLowerCase()) ||
+    student.email?.toLowerCase().includes(searchText.toLowerCase()) ||
+    student.student_id?.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+  // 统计数据
+  const stats = {
+    total: students.length,
+    active: students.filter(s => s.last_active &&
+      (Date.now() - new Date(s.last_active).getTime()) < 7 * 24 * 60 * 60 * 1000).length,
+    avgProgress: students.reduce((sum, s) => sum + (s.total_interactions || 0), 0) / (students.length || 1)
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      {/* 统计卡片 */}
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={24} sm={8}>
+          <Card>
+            <Statistic
+              title="总学生数"
+              value={stats.total}
+              prefix={<TeamOutlined />}
+              valueStyle={{ color: '#1890ff' }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={8}>
+          <Card>
+            <Statistic
+              title="活跃学生"
+              value={stats.active}
+              prefix={<CheckCircleOutlined />}
+              valueStyle={{ color: '#52c41a' }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={8}>
+          <Card>
+            <Statistic
+              title="平均互动次数"
+              value={stats.avgProgress}
+              precision={1}
+              prefix={<TrophyOutlined />}
+              valueStyle={{ color: '#faad14' }}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 学生列表 */}
+      <Card
+        title={
+          <Space>
+            <TeamOutlined />
+            <span>学生管理</span>
+          </Space>
+        }
+        extra={
+          <Space>
+            <Input
+              placeholder="搜索学生..."
+              prefix={<SearchOutlined />}
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{ width: 200 }}
+            />
+            <Button
+              icon={<ReloadOutlined />}
+              onClick={fetchStudents}
+              loading={loading}
+            >
+              刷新
+            </Button>
+            <Button
+              type="primary"
+              icon={<UserAddOutlined />}
+              onClick={() => {
+                setEditingStudent(null);
+                form.resetFields();
+                setModalVisible(true);
+              }}
+            >
+              添加学生
+            </Button>
+          </Space>
+        }
+      >
+        <Table
+          columns={columns}
+          dataSource={filteredStudents}
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            pageSize: 10,
+            showSizeChanger: true,
+            showTotal: (total) => `共 ${total} 条记录`,
+          }}
+        />
+      </Card>
+
+      {/* 创建/编辑学生Modal */}
+      <Modal
+        title={editingStudent ? '编辑学生' : '添加学生'}
+        open={modalVisible}
+        onCancel={() => {
+          setModalVisible(false);
+          form.resetFields();
+          setEditingStudent(null);
+        }}
+        footer={null}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+        >
+          <Form.Item
+            name="username"
+            label="用户名"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          >
+            <Input prefix={<UserAddOutlined />} placeholder="学生登录用户名" />
+          </Form.Item>
+
+          <Form.Item
+            name="password"
+            label="密码"
+            rules={[
+              { required: !editingStudent, message: '请输入密码' },
+              { min: 6, message: '密码至少6个字符' }
+            ]}
+          >
+            <Input.Password
+              prefix={<LockOutlined />}
+              placeholder={editingStudent ? '留空保持原密码' : '登录密码'}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="name"
+            label="姓名"
+            rules={[{ required: true, message: '请输入姓名' }]}
+          >
+            <Input placeholder="学生真实姓名" />
+          </Form.Item>
+
+          <Form.Item
+            name="student_id"
+            label="学号"
+          >
+            <Input placeholder="学生学号" />
+          </Form.Item>
+
+          <Form.Item
+            name="email"
+            label="邮箱"
+            rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
+          >
+            <Input prefix={<MailOutlined />} placeholder="学生邮箱" />
+          </Form.Item>
+
+          <Form.Item
+            name="class"
+            label="班级"
+          >
+            <Input placeholder="所在班级" />
+          </Form.Item>
+
+          <Form.Item>
+            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+              <Button onClick={() => setModalVisible(false)}>
+                取消
+              </Button>
+              <Button type="primary" htmlType="submit">
+                {editingStudent ? '更新' : '创建'}
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* 学生详情Drawer */}
+      <Drawer
+        title="学生详情"
+        placement="right"
+        width={600}
+        open={drawerVisible}
+        onClose={() => setDrawerVisible(false)}
+      >
+        {selectedStudent && (
+          <div>
+            <Card style={{ marginBottom: '16px' }}>
+              <Space align="center" style={{ width: '100%' }}>
+                <Avatar size={64} style={{ backgroundColor: '#10b981' }}>
+                  {selectedStudent.name ? selectedStudent.name[0] : 'S'}
+                </Avatar>
+                <div style={{ flex: 1 }}>
+                  <Title level={4} style={{ margin: 0 }}>
+                    {selectedStudent.name}
+                  </Title>
+                  <Text type="secondary">@{selectedStudent.username}</Text>
+                </div>
+              </Space>
+
+              <div style={{ marginTop: '24px' }}>
+                <Row gutter={[16, 16]}>
+                  <Col span={12}>
+                    <Text type="secondary">学号</Text>
+                    <div>{selectedStudent.student_id || '未设置'}</div>
+                  </Col>
+                  <Col span={12}>
+                    <Text type="secondary">班级</Text>
+                    <div>{selectedStudent.class || '未分配'}</div>
+                  </Col>
+                  <Col span={12}>
+                    <Text type="secondary">邮箱</Text>
+                    <div>{selectedStudent.email || '未设置'}</div>
+                  </Col>
+                  <Col span={12}>
+                    <Text type="secondary">注册��间</Text>
+                    <div>{selectedStudent.created_at || '未知'}</div>
+                  </Col>
+                </Row>
+              </div>
+            </Card>
+
+            {/* 学习进度 */}
+            {selectedStudent.progress && (
+              <Card title="学习进度" style={{ marginBottom: '16px' }}>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  <div>
+                    <Text type="secondary">总互动次数</Text>
+                    <Title level={4}>{selectedStudent.progress.total_interactions || 0}</Title>
+                  </div>
+                  <div>
+                    <Text type="secondary">最近活跃</Text>
+                    <div>{selectedStudent.progress.last_active || '从未活跃'}</div>
+                  </div>
+                  <div>
+                    <Text type="secondary">常用Agent</Text>
+                    <div>
+                      {selectedStudent.progress.frequently_used_agents?.map(agent => (
+                        <Tag key={agent}>{agent}</Tag>
+                      )) || '暂无'}
+                    </div>
+                  </div>
+                </Space>
+              </Card>
+            )}
+
+            {/* 最近活动 */}
+            <Card title="最近活动">
+              {selectedStudent.progress?.recent_activities?.length > 0 ? (
+                <Timeline>
+                  {selectedStudent.progress.recent_activities.map((activity, index) => (
+                    <Timeline.Item key={index}>
+                      <div>
+                        <Text strong>{activity.title}</Text>
+                        <br />
+                        <Text type="secondary" style={{ fontSize: '12px' }}>
+                          {activity.time}
+                        </Text>
+                      </div>
+                    </Timeline.Item>
+                  ))}
+                </Timeline>
+              ) : (
+                <Empty description="暂无活动记录" />
+              )}
+            </Card>
+          </div>
+        )}
+      </Drawer>
+    </div>
+  );
+};
+
+export default StudentManagement;

frontend/src/pages/teacher/TeacherDashboard.jsx

@@ -0,0 +1,242 @@
+/**
+ * 教师端主框架
+ * 复用原始 index.html 的侧边栏和导航结构
+ */
+import { useState } from 'react';
+import { Layout, Menu, message } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  DashboardOutlined,
+  PlusCircleOutlined,
+  DatabaseOutlined,
+  AppstoreOutlined,
+  LogoutOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { logout } from '../../store/slices/authSlice';
+import authService from '../../services/authService';
+
+// 导入子页面组件
+import Dashboard from './Dashboard';
+import CreateAgent from './CreateAgent';
+import KnowledgeBase from './KnowledgeBase';
+import StudentManagement from './StudentManagement';
+import AgentList from './AgentList';
+
+const { Sider, Content } = Layout;
+
+const TeacherDashboard = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const user = useSelector((state) => state.auth.user);
+  const [currentSection, setCurrentSection] = useState('dashboard');
+
+  // 菜单项（对应原始HTML的侧边栏菜单）
+  const menuItems = [
+    {
+      key: 'dashboard',
+      icon: <DashboardOutlined />,
+      label: '仪表板',
+    },
+    {
+      key: 'create-agent',
+      icon: <PlusCircleOutlined />,
+      label: '创建Agent',
+    },
+    {
+      key: 'knowledge-base',
+      icon: <DatabaseOutlined />,
+      label: '知识库',
+    },
+    {
+      key: 'agent-list',
+      icon: <AppstoreOutlined />,
+      label: 'Agent列表',
+    },
+    {
+      key: 'students',
+      icon: <UserOutlined />,
+      label: '学生管理',
+    },
+  ];
+
+  // 登出处理
+  const handleLogout = async () => {
+    try {
+      await authService.logout();
+      dispatch(logout());
+      message.success('已退出登录');
+      navigate('/login');
+    } catch (error) {
+      message.error('退出登录失败');
+    }
+  };
+
+  // 渲染当前内容区域
+  const renderContent = () => {
+    switch (currentSection) {
+      case 'dashboard':
+        return <Dashboard onNavigate={setCurrentSection} />;
+      case 'create-agent':
+        return <CreateAgent />;
+      case 'knowledge-base':
+        return <KnowledgeBase />;
+      case 'agent-list':
+        return <AgentList />;
+      case 'students':
+        return <StudentManagement />;
+      default:
+        return <Dashboard onNavigate={setCurrentSection} />;
+    }
+  };
+
+  return (
+    <Layout style={{ minHeight: '100vh', backgroundColor: '#fafbfc' }}>
+      {/* 侧边栏 */}
+      <Sider
+        width={260}
+        style={{
+          background: '#ffffff',
+          boxShadow: '2px 0 8px rgba(0, 0, 0, 0.04)',
+          position: 'fixed',
+          height: '100vh',
+          left: 0,
+          top: 0,
+          bottom: 0,
+        }}
+      >
+        {/* Logo区域 */}
+        <div
+          style={{
+            height: '64px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderBottom: '1px solid #f0f0f0',
+            padding: '0 24px',
+          }}
+        >
+          <div
+            style={{
+              width: '40px',
+              height: '40px',
+              borderRadius: '10px',
+              background: 'linear-gradient(135deg, #10b981, #14b8a6)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginRight: '12px',
+            }}
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5z" />
+              <path d="M2 17l10 5 10-5" />
+              <path d="M2 12l10 5 10-5" />
+            </svg>
+          </div>
+          <div>
+            <div
+              style={{
+                fontSize: '16px',
+                fontWeight: 600,
+                color: '#1f2937',
+                lineHeight: '20px',
+              }}
+            >
+              教育AI助手
+            </div>
+            <div style={{ fontSize: '12px', color: '#9ca3af' }}>开发平台</div>
+          </div>
+        </div>
+
+        {/* 菜单 */}
+        <Menu
+          mode="inline"
+          selectedKeys={[currentSection]}
+          items={menuItems}
+          onClick={({ key }) => setCurrentSection(key)}
+          style={{
+            border: 'none',
+            marginTop: '16px',
+            padding: '0 12px',
+          }}
+        />
+
+        {/* 登出按钮 */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+            padding: '16px',
+            borderTop: '1px solid #f0f0f0',
+          }}
+        >
+          <div
+            style={{
+              padding: '12px 16px',
+              background: '#f9fafb',
+              borderRadius: '8px',
+              marginBottom: '12px',
+            }}
+          >
+            <div style={{ fontSize: '14px', fontWeight: 500, color: '#1f2937' }}>
+              {user?.name || '教师'}
+            </div>
+            <div style={{ fontSize: '12px', color: '#9ca3af', marginTop: '2px' }}>
+              {user?.email || user?.phone || ''}
+            </div>
+          </div>
+          <button
+            onClick={handleLogout}
+            style={{
+              width: '100%',
+              padding: '10px 16px',
+              background: 'transparent',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
+              color: '#6b7280',
+              fontSize: '14px',
+              fontWeight: 500,
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.2s',
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.borderColor = '#f43f5e';
+              e.target.style.color = '#f43f5e';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.borderColor = '#e5e7eb';
+              e.target.style.color = '#6b7280';
+            }}
+          >
+            <LogoutOutlined style={{ marginRight: '8px' }} />
+            退出登录
+          </button>
+        </div>
+      </Sider>
+
+      {/* 主内容区域 */}
+      <Layout style={{ marginLeft: 260, backgroundColor: '#fafbfc' }}>
+        <Content style={{ padding: '24px', minHeight: '100vh' }}>
+          {renderContent()}
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default TeacherDashboard;

frontend/src/services/agentService.js

@@ -0,0 +1,49 @@
+/**
+ * Agent服务 - 对应后端 /api/agent 接口
+ * 复用原始 index.html 中的 Agent 相关逻辑
+ */
+import api from './api';
+
+const agentService = {
+  // 获取Agent列表
+  getAgents: async () => {
+    return api.get('/agent/list');
+  },
+
+  // 获取Agent详情
+  getAgentDetail: async (agentId) => {
+    return api.get(`/agent/${agentId}`);
+  },
+
+  // 创建Agent
+  createAgent: async (agentData) => {
+    return api.post('/agent/create', agentData);
+  },
+
+  // 更新Agent
+  updateAgent: async (agentId, agentData) => {
+    return api.put(`/agent/${agentId}`, agentData);
+  },
+
+  // 删除Agent
+  deleteAgent: async (agentId) => {
+    return api.delete(`/agent/${agentId}`);
+  },
+
+  // AI辅助生成工作流
+  generateAIWorkflow: async (agentData) => {
+    return api.post('/agent/ai-assist', agentData);
+  },
+
+  // 创建分发链接
+  createDistribution: async (agentId, expiresIn) => {
+    return api.post(`/agent/${agentId}/distribute`, { expires_in: expiresIn });
+  },
+
+  // 获取分发链接列表
+  getDistributions: async (agentId) => {
+    return api.get(`/agent/${agentId}/distributions`);
+  },
+};
+
+export default agentService;

frontend/src/services/api.js

@@ -0,0 +1,69 @@
+import axios from 'axios';
+import { message } from 'antd';
+
+// 创建axios实例
+const api = axios.create({
+  baseURL: '/api',
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// 请求拦截器
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+api.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    if (error.response) {
+      const { status, data } = error.response;
+
+      switch (status) {
+        case 401:
+          // Token过期或无效
+          localStorage.removeItem('token');
+          localStorage.removeItem('user');
+          window.location.href = '/login';
+          message.error('登录已过期，请重新登录');
+          break;
+        case 403:
+          message.error('没有权限访问该资源');
+          break;
+        case 404:
+          message.error('请求的资源不存在');
+          break;
+        case 422:
+          message.error(data.message || '数据验证失败');
+          break;
+        case 500:
+          message.error('服务器错误，请稍后重试');
+          break;
+        default:
+          message.error(data.message || '请求失败');
+      }
+    } else if (error.request) {
+      message.error('网络错误，请检查网络连接');
+    } else {
+      message.error('请求配置错误');
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default api;

frontend/src/services/authService.js

@@ -0,0 +1,60 @@
+import api from './api';
+
+const authService = {
+  // 密码登录
+  loginWithPassword: async (username, password) => {
+    return api.post('/auth/login-password', { username, password });
+  },
+
+  // 邮箱验证码登录
+  loginWithEmailCode: async (email, emailCode, role = 'student') => {
+    return api.post('/auth/login-email', { email, code: emailCode, role });
+  },
+
+  // 手机验证码登录
+  loginWithPhoneCode: async (phone, phoneCode, role = 'student') => {
+    return api.post('/auth/login-phone', { phone, code: phoneCode, role });
+  },
+
+  // 发送邮箱验证码
+  sendEmailCode: async (email) => {
+    return api.post('/auth/send-email-code', { email });
+  },
+
+  // 发送手机验证码
+  sendPhoneCode: async (phone) => {
+    return api.post('/auth/send-phone-code', { phone });
+  },
+
+  // 注册
+  register: async (data) => {
+    return api.post('/auth/register', data);
+  },
+
+  // 登出
+  logout: async () => {
+    return api.post('/auth/logout');
+  },
+
+  // 刷新token
+  refreshToken: async () => {
+    return api.post('/auth/refresh');
+  },
+
+  // 获取当前用户信息
+  getCurrentUser: async () => {
+    return api.get('/auth/me');
+  },
+
+  // 修改密码
+  changePassword: async (oldPassword, newPassword) => {
+    return api.post('/auth/change_password', { oldPassword, newPassword });
+  },
+
+  // 重置密码
+  resetPassword: async (token, newPassword) => {
+    return api.post('/auth/reset_password', { token, newPassword });
+  },
+};
+
+export default authService;

frontend/src/services/knowledgeService.js

@@ -0,0 +1,47 @@
+/**
+ * 知识库服务 - 对应后端 /api/knowledge 接口
+ * 复用原始 index.html 中的知识库相关逻辑
+ */
+import api from './api';
+
+const knowledgeService = {
+  // 获取知识库列表
+  getKnowledgeBases: async () => {
+    return api.get('/knowledge/');
+  },
+
+  // 创建知识库
+  createKnowledgeBase: async (formData) => {
+    return api.post('/knowledge/', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  },
+
+  // 添加文件到知识库
+  addFileToKnowledgeBase: async (knowledgeId, formData) => {
+    return api.post(`/knowledge/${knowledgeId}/documents`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  },
+
+  // 删除知识库
+  deleteKnowledgeBase: async (knowledgeId) => {
+    return api.delete(`/knowledge/${knowledgeId}`);
+  },
+
+  // 删除知识库中的文件
+  deleteFile: async (indexId, fileName) => {
+    return api.delete(`/knowledge/${indexId}/documents/${fileName}`);
+  },
+
+  // 获取文件处理进度（端点在 app.py 主路由，不在 knowledge blueprint）
+  getProgress: async (taskId) => {
+    return api.get(`/progress/${taskId}`);
+  },
+};
+
+export default knowledgeService;

frontend/src/store/slices/agentSlice.js

@@ -0,0 +1,59 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  agents: [],
+  currentAgent: null,
+  isLoading: false,
+  error: null,
+};
+
+const agentSlice = createSlice({
+  name: 'agent',
+  initialState,
+  reducers: {
+    setAgents: (state, action) => {
+      state.agents = action.payload;
+      state.error = null;
+    },
+    setCurrentAgent: (state, action) => {
+      state.currentAgent = action.payload;
+    },
+    addAgent: (state, action) => {
+      state.agents.push(action.payload);
+    },
+    updateAgent: (state, action) => {
+      const index = state.agents.findIndex(a => a.id === action.payload.id);
+      if (index !== -1) {
+        state.agents[index] = action.payload;
+      }
+      if (state.currentAgent?.id === action.payload.id) {
+        state.currentAgent = action.payload;
+      }
+    },
+    deleteAgent: (state, action) => {
+      state.agents = state.agents.filter(a => a.id !== action.payload);
+      if (state.currentAgent?.id === action.payload) {
+        state.currentAgent = null;
+      }
+    },
+    setLoading: (state, action) => {
+      state.isLoading = action.payload;
+    },
+    setError: (state, action) => {
+      state.error = action.payload;
+      state.isLoading = false;
+    }
+  },
+});
+
+export const {
+  setAgents,
+  setCurrentAgent,
+  addAgent,
+  updateAgent,
+  deleteAgent,
+  setLoading,
+  setError,
+} = agentSlice.actions;
+
+export default agentSlice.reducer;

frontend/src/store/slices/authSlice.js

@@ -0,0 +1,73 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  user: JSON.parse(localStorage.getItem('user')) || null,
+  token: localStorage.getItem('token') || null,
+  isLoading: false,
+  error: null,
+  isAuthenticated: !!localStorage.getItem('token'),
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    loginStart: (state) => {
+      state.isLoading = true;
+      state.error = null;
+    },
+    loginSuccess: (state, action) => {
+      state.isLoading = false;
+      state.isAuthenticated = true;
+      state.user = action.payload.user;
+      state.token = action.payload.token;
+      state.error = null;
+
+      // 保存到localStorage
+      localStorage.setItem('user', JSON.stringify(action.payload.user));
+      localStorage.setItem('token', action.payload.token);
+    },
+    loginFailure: (state, action) => {
+      state.isLoading = false;
+      state.isAuthenticated = false;
+      state.user = null;
+      state.token = null;
+      state.error = action.payload;
+    },
+    logout: (state) => {
+      state.user = null;
+      state.token = null;
+      state.isAuthenticated = false;
+      state.error = null;
+
+      // 清除localStorage
+      localStorage.removeItem('user');
+      localStorage.removeItem('token');
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
+    updateUser: (state, action) => {
+      state.user = { ...state.user, ...action.payload };
+      localStorage.setItem('user', JSON.stringify(state.user));
+    }
+  },
+});
+
+export const {
+  loginStart,
+  loginSuccess,
+  loginFailure,
+  logout,
+  clearError,
+  updateUser,
+} = authSlice.actions;
+
+export default authSlice.reducer;
+
+// Selectors
+export const selectUser = (state) => state.auth.user;
+export const selectIsAuthenticated = (state) => state.auth.isAuthenticated;
+export const selectAuthLoading = (state) => state.auth.isLoading;
+export const selectAuthError = (state) => state.auth.error;
+export const selectUserRole = (state) => state.auth.user?.role;

frontend/src/store/slices/chatSlice.js

@@ -0,0 +1,58 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  messages: [],
+  isStreaming: false,
+  currentStreamMessage: '',
+  executionContext: null,
+  isExecuting: false,
+};
+
+const chatSlice = createSlice({
+  name: 'chat',
+  initialState,
+  reducers: {
+    addMessage: (state, action) => {
+      state.messages.push(action.payload);
+    },
+    updateMessage: (state, action) => {
+      const { id, content } = action.payload;
+      const message = state.messages.find(m => m.id === id);
+      if (message) {
+        message.content = content;
+      }
+    },
+    clearMessages: (state) => {
+      state.messages = [];
+      state.currentStreamMessage = '';
+    },
+    setStreaming: (state, action) => {
+      state.isStreaming = action.payload;
+    },
+    setStreamMessage: (state, action) => {
+      state.currentStreamMessage = action.payload;
+    },
+    appendStreamMessage: (state, action) => {
+      state.currentStreamMessage += action.payload;
+    },
+    setExecutionContext: (state, action) => {
+      state.executionContext = action.payload;
+    },
+    setExecuting: (state, action) => {
+      state.isExecuting = action.payload;
+    }
+  },
+});
+
+export const {
+  addMessage,
+  updateMessage,
+  clearMessages,
+  setStreaming,
+  setStreamMessage,
+  appendStreamMessage,
+  setExecutionContext,
+  setExecuting,
+} = chatSlice.actions;
+
+export default chatSlice.reducer;

frontend/src/store/slices/uiSlice.js

@@ -0,0 +1,57 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  sidebarOpen: true,
+  theme: 'light',
+  activeModal: null,
+  notifications: [],
+};
+
+const uiSlice = createSlice({
+  name: 'ui',
+  initialState,
+  reducers: {
+    toggleSidebar: (state) => {
+      state.sidebarOpen = !state.sidebarOpen;
+    },
+    setSidebarOpen: (state, action) => {
+      state.sidebarOpen = action.payload;
+    },
+    setTheme: (state, action) => {
+      state.theme = action.payload;
+    },
+    openModal: (state, action) => {
+      state.activeModal = action.payload;
+    },
+    closeModal: (state) => {
+      state.activeModal = null;
+    },
+    addNotification: (state, action) => {
+      state.notifications.push({
+        id: Date.now(),
+        ...action.payload,
+      });
+    },
+    removeNotification: (state, action) => {
+      state.notifications = state.notifications.filter(
+        n => n.id !== action.payload
+      );
+    },
+    clearNotifications: (state) => {
+      state.notifications = [];
+    }
+  },
+});
+
+export const {
+  toggleSidebar,
+  setSidebarOpen,
+  setTheme,
+  openModal,
+  closeModal,
+  addNotification,
+  removeNotification,
+  clearNotifications,
+} = uiSlice.actions;
+
+export default uiSlice.reducer;