知识库功能快速测试指南
======================

## 前置条件

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. 准备添加文件上传功能

## 反馈

如果发现任何问题，请记录：
- 问题描述
- 复现步骤
- 错误信息
- 浏览器和版本
- 截图（如果可能）

祝测试顺利！🎉