306 lines
6.6 KiB
Plaintext
306 lines
6.6 KiB
Plaintext
知识库功能快速测试指南
|
||
======================
|
||
|
||
## 前置条件
|
||
|
||
1. ✅ 后端服务已启动（端口 7861）
|
||
2. ✅ 数据库表已创建（运行 scripts/init_knowledge_base_table.sql）
|
||
3. ✅ 已有测试账号或可以注册新账号
|
||
|
||
## 快速启动步骤
|
||
|
||
### 1. 启动后端服务
|
||
|
||
```bash
|
||
# 在项目根目录
|
||
python app/core/main.py
|
||
```
|
||
|
||
确认看到类似输出：
|
||
```
|
||
INFO: Started server process
|
||
INFO: Uvicorn running on http://0.0.0.0:7861
|
||
```
|
||
|
||
### 2. 启动前端服务
|
||
|
||
```bash
|
||
# 在 web 目录
|
||
cd web
|
||
npm install # 首次运行
|
||
npm run dev
|
||
```
|
||
|
||
确认看到类似输出：
|
||
```
|
||
VITE v5.x.x ready in xxx ms
|
||
|
||
➜ Local: http://localhost:5173/
|
||
➜ Network: use --host to expose
|
||
```
|
||
|
||
### 3. 访问应用
|
||
|
||
打开浏览器访问: http://localhost:5173
|
||
|
||
## 测试流程
|
||
|
||
### 步骤 1: 登录系统
|
||
|
||
**方式 A: 用户名密码登录**
|
||
1. 如果没有账号，点击"注册"
|
||
2. 填写信息：
|
||
- 用户名: testuser
|
||
- 邮箱: test@example.com
|
||
- 手机: 13800138000
|
||
- 密码: password123
|
||
3. 点击"注册"按钮
|
||
|
||
**方式 B: GitHub 登录**
|
||
1. 点击"使用 GitHub 登录"按钮
|
||
2. 授权后自动跳转回应用
|
||
|
||
### 步骤 2: 进入知识库管理
|
||
|
||
1. 登录成功后，默认在聊天页面
|
||
2. 在左侧边栏找到"知识库"按钮（带文件夹图标）
|
||
3. 点击进入知识库管理页面
|
||
|
||
### 步骤 3: 创建知识库
|
||
|
||
1. 点击左上角"新建知识库"按钮
|
||
2. 在弹出的模态框中填写：
|
||
- 名称: "Python 编程"
|
||
- 描述: "Python 学习资料和代码示例"
|
||
3. 点击"创建"按钮
|
||
4. 创建成功后，左侧列表会显示新建的知识库
|
||
|
||
### 步骤 4: 创建更多知识库
|
||
|
||
重复步骤 3，创建几个不同的知识库：
|
||
- "机器学习" - "机器学习算法和实践"
|
||
- "Web 开发" - "前端和后端开发资料"
|
||
- "数据分析" - "数据分析工具和方法"
|
||
|
||
### 步骤 5: 查看知识库详情
|
||
|
||
1. 在左侧列表点击任意知识库
|
||
2. 右侧显示详细信息：
|
||
- 知识库名称
|
||
- 描述
|
||
- 创建时间
|
||
- 更新时间
|
||
3. 观察界面布局和样式
|
||
|
||
### 步骤 6: 编辑知识库
|
||
|
||
1. 选中一个知识库
|
||
2. 点击右上角"编辑"按钮
|
||
3. 修改名称或描述：
|
||
- 例如将"Python 编程"改为"Python 完整教程"
|
||
- 修改描述为"从入门到精通的 Python 学习资料"
|
||
4. 点击"保存"
|
||
5. 观察界面实时更新
|
||
|
||
### 步骤 7: 测试名称重复
|
||
|
||
1. 点击"新建知识库"
|
||
2. 输入已存在的名称（如"Python 完整教程"）
|
||
3. 点击"创建"
|
||
4. 应该看到错误提示："知识库名称 'xxx' 已存在"
|
||
|
||
### 步骤 8: 删除知识库
|
||
|
||
1. 选中一个知识库
|
||
2. 点击右上角"删除"按钮
|
||
3. 在确认对话框点击"确定"
|
||
4. 知识库从列表中消失
|
||
|
||
### 步骤 9: 测试分页（可选）
|
||
|
||
如果知识库数量少于 20 个，可以：
|
||
1. 创建更多知识库（超过 20 个）
|
||
2. 观察左侧底部出现分页控件
|
||
3. 点击左右箭头切换页面
|
||
|
||
### 步骤 10: 测试导航
|
||
|
||
1. 点击左侧边栏的"对话"按钮
|
||
2. 返回聊天页面
|
||
3. 再次点击"知识库"按钮
|
||
4. 返回知识库管理页面
|
||
5. 观察数据是否保持
|
||
|
||
## 功能检查清单
|
||
|
||
- [ ] 用户登录成功
|
||
- [ ] 可以进入知识库管理页面
|
||
- [ ] 可以创建知识库
|
||
- [ ] 左侧列表正确显示知识库
|
||
- [ ] 点击知识库可以查看详情
|
||
- [ ] 可以编辑知识库
|
||
- [ ] 编辑后界面实时更新
|
||
- [ ] 重复名称会显示错误
|
||
- [ ] 可以删除知识库
|
||
- [ ] 删除后列表自动更新
|
||
- [ ] 分页功能正常（如果有多页）
|
||
- [ ] 可以在对话和知识库页面切换
|
||
- [ ] 退出登录功能正常
|
||
|
||
## 界面元素检查
|
||
|
||
### 左侧边栏
|
||
- [ ] 显示用户头像和信息
|
||
- [ ] "新建知识库"按钮可点击
|
||
- [ ] "对话"和"知识库"导航按钮
|
||
- [ ] 知识库列表显示正常
|
||
- [ ] 选中状态高亮显示
|
||
- [ ] 分页控件（如果需要）
|
||
- [ ] "退出登录"按钮
|
||
|
||
### 右侧主区域
|
||
- [ ] 头部显示"知识库管理"
|
||
- [ ] 未选择时显示提示信息
|
||
- [ ] 选择后显示知识库详情
|
||
- [ ] "编辑"和"删除"按钮可用
|
||
- [ ] 信息卡片样式美观
|
||
|
||
### 模态框
|
||
- [ ] 创建模态框正常弹出
|
||
- [ ] 编辑模态框正常弹出
|
||
- [ ] 表单验证工作正常
|
||
- [ ] 错误信息正确显示
|
||
- [ ] 可以关闭模态框
|
||
|
||
## 性能检查
|
||
|
||
- [ ] 页面加载速度快
|
||
- [ ] 操作响应及时
|
||
- [ ] 动画流畅
|
||
- [ ] 无明显卡顿
|
||
- [ ] 网络请求正常
|
||
|
||
## 浏览器控制台检查
|
||
|
||
打开浏览器开发者工具（F12），检查：
|
||
|
||
### Console 标签
|
||
- [ ] 无 JavaScript 错误
|
||
- [ ] 无警告信息（或仅有预期的警告）
|
||
|
||
### Network 标签
|
||
- [ ] API 请求成功（状态码 200）
|
||
- [ ] 请求响应时间合理
|
||
- [ ] 请求头包含正确的 Authorization
|
||
|
||
### Vue DevTools（如果安装）
|
||
- [ ] Pinia store 状态正确
|
||
- [ ] 组件层次结构正常
|
||
- [ ] 数据绑定工作正常
|
||
|
||
## 常见问题排查
|
||
|
||
### 问题 1: 页面空白
|
||
**检查**:
|
||
- 浏览器控制台是否有错误
|
||
- 后端服务是否运行
|
||
- 网络请求是否成功
|
||
|
||
**解决**:
|
||
```bash
|
||
# 重启前端服务
|
||
npm run dev
|
||
|
||
# 检查后端服务
|
||
curl http://localhost:7861/api/auth/me
|
||
```
|
||
|
||
### 问题 2: 无法创建知识库
|
||
**检查**:
|
||
- 是否已登录
|
||
- 后端 API 是否正常
|
||
- 数据库表是否创建
|
||
|
||
**解决**:
|
||
```bash
|
||
# 检查数据库表
|
||
psql -U postgres -d huoyan -c "\dt knowledge_base"
|
||
|
||
# 如果表不存在，创建表
|
||
psql -U postgres -d huoyan -f scripts/init_knowledge_base_table.sql
|
||
```
|
||
|
||
### 问题 3: 401 错误
|
||
**检查**:
|
||
- Token 是否过期
|
||
- 是否正确登录
|
||
|
||
**解决**:
|
||
- 退出登录后重新登录
|
||
- 检查 localStorage 中的 authToken
|
||
|
||
### 问题 4: 样式显示异常
|
||
**检查**:
|
||
- Bootstrap CSS 是否加载
|
||
- 网络连接是否正常
|
||
|
||
**解决**:
|
||
```bash
|
||
# 清除缓存重新安装
|
||
rm -rf node_modules package-lock.json
|
||
npm install
|
||
```
|
||
|
||
## 测试数据建议
|
||
|
||
创建以下测试知识库：
|
||
|
||
1. **技术文档**
|
||
- 名称: "技术文档"
|
||
- 描述: "各种技术文档和 API 参考"
|
||
|
||
2. **项目资料**
|
||
- 名称: "项目资料"
|
||
- 描述: "项目相关的文档和资料"
|
||
|
||
3. **学习笔记**
|
||
- 名称: "学习笔记"
|
||
- 描述: "个人学习笔记和总结"
|
||
|
||
4. **代码示例**
|
||
- 名称: "代码示例"
|
||
- 描述: "各种编程语言的代码示例"
|
||
|
||
## 截图建议
|
||
|
||
测试时建议截图保存以下界面：
|
||
1. 知识库列表页面
|
||
2. 知识库详情页面
|
||
3. 创建知识库模态框
|
||
4. 编辑知识库模态框
|
||
5. 空状态提示
|
||
6. 错误提示
|
||
|
||
## 测试完成
|
||
|
||
如果所有检查项都通过，说明知识库功能已正常工作！
|
||
|
||
## 下一步
|
||
|
||
1. 测试更多边界情况
|
||
2. 测试并发操作
|
||
3. 测试网络异常情况
|
||
4. 准备添加文件上传功能
|
||
|
||
## 反馈
|
||
|
||
如果发现任何问题，请记录：
|
||
- 问题描述
|
||
- 复现步骤
|
||
- 错误信息
|
||
- 浏览器和版本
|
||
- 截图（如果可能）
|
||
|
||
祝测试顺利！🎉
|
||
|