280 lines
6.8 KiB
Plaintext
280 lines
6.8 KiB
Plaintext
知识库前端功能说明
|
||
==================
|
||
|
||
## 已实现的功能
|
||
|
||
### 1. 知识库状态管理 (stores/knowledgeBase.js)
|
||
|
||
使用 Pinia 实现的知识库状态管理，包含：
|
||
|
||
**状态 (State)**
|
||
- knowledgeBases: 知识库列表
|
||
- currentKnowledgeBase: 当前选中的知识库
|
||
- total: 知识库总数
|
||
- currentPage: 当前页码
|
||
- pageSize: 每页数量
|
||
- isLoading: 加载状态
|
||
- error: 错误信息
|
||
|
||
**方法 (Actions)**
|
||
- fetchKnowledgeBases(page, size): 获取知识库列表（支持分页）
|
||
- fetchKnowledgeBase(id): 获取知识库详情
|
||
- createKnowledgeBase(data): 创建知识库
|
||
- updateKnowledgeBase(id, data): 更新知识库
|
||
- deleteKnowledgeBase(id): 删除知识库
|
||
- clearError(): 清空错误信息
|
||
- reset(): 重置所有状态
|
||
|
||
### 2. 知识库管理页面 (views/KnowledgeBase.vue)
|
||
|
||
完整的知识库管理界面，包含：
|
||
|
||
**页面布局**
|
||
- 左侧边栏：显示用户信息、导航菜单、知识库列表
|
||
- 右侧主区域：显示知识库详情和操作
|
||
|
||
**功能特性**
|
||
✅ 创建知识库
|
||
- 点击"新建知识库"按钮
|
||
- 填写知识库名称（必填）和描述（可选）
|
||
- 支持表单验证
|
||
|
||
✅ 查看知识库列表
|
||
- 左侧边栏显示所有知识库
|
||
- 支持分页浏览
|
||
- 显示知识库名称、描述、创建时间
|
||
- 高亮当前选中的知识库
|
||
|
||
✅ 查看知识库详情
|
||
- 点击左侧知识库项查看详情
|
||
- 显示完整信息（名称、描述、创建时间、更新时间）
|
||
- 预留文件管理区域
|
||
|
||
✅ 编辑知识库
|
||
- 点击"编辑"按钮打开编辑模态框
|
||
- 可修改名称和描述
|
||
- 实时更新显示
|
||
|
||
✅ 删除知识库
|
||
- 点击"删除"按钮
|
||
- 弹出确认对话框
|
||
- 删除后自动刷新列表
|
||
|
||
✅ 导航功能
|
||
- 可在"对话"和"知识库"页面之间切换
|
||
- 保持用户登录状态
|
||
|
||
### 3. 路由配置更新 (router/index.js)
|
||
|
||
新增知识库路由：
|
||
- 路径: /knowledge-base
|
||
- 名称: KnowledgeBase
|
||
- 需要认证: 是
|
||
|
||
### 4. Chat 页面更新 (views/Chat.vue)
|
||
|
||
在聊天页面侧边栏添加导航菜单：
|
||
- "对话" 按钮（当前页面）
|
||
- "知识库" 按钮（跳转到知识库管理）
|
||
|
||
## 使用方法
|
||
|
||
### 启动前端开发服务器
|
||
|
||
```bash
|
||
cd web
|
||
npm install # 首次运行需要安装依赖
|
||
npm run dev
|
||
```
|
||
|
||
访问: http://localhost:5173
|
||
|
||
### 功能演示流程
|
||
|
||
1. **登录系统**
|
||
- 访问登录页面
|
||
- 使用用户名密码登录或 GitHub 登录
|
||
|
||
2. **进入知识库管理**
|
||
- 在聊天页面点击侧边栏的"知识库"按钮
|
||
- 或直接访问 /knowledge-base
|
||
|
||
3. **创建知识库**
|
||
- 点击"新建知识库"按钮
|
||
- 输入名称（必填）：例如 "Python 学习资料"
|
||
- 输入描述（可选）：例如 "包含 Python 编程相关的文档和教程"
|
||
- 点击"创建"按钮
|
||
|
||
4. **查看知识库**
|
||
- 左侧列表显示所有知识库
|
||
- 点击任意知识库查看详情
|
||
- 右侧显示完整信息
|
||
|
||
5. **编辑知识库**
|
||
- 选中一个知识库
|
||
- 点击右上角"编辑"按钮
|
||
- 修改名称或描述
|
||
- 点击"保存"
|
||
|
||
6. **删除知识库**
|
||
- 选中一个知识库
|
||
- 点击右上角"删除"按钮
|
||
- 确认删除操作
|
||
|
||
7. **分页浏览**
|
||
- 当知识库数量超过 20 个时
|
||
- 使用左侧底部的分页按钮切换页面
|
||
|
||
## 界面特性
|
||
|
||
### 响应式设计
|
||
- 适配不同屏幕尺寸
|
||
- 流畅的动画效果
|
||
- 现代化的 UI 设计
|
||
|
||
### 用户体验优化
|
||
- 加载状态提示
|
||
- 错误信息展示
|
||
- 操作确认对话框
|
||
- 实时数据更新
|
||
- 友好的空状态提示
|
||
|
||
### 视觉效果
|
||
- 渐变色头部背景
|
||
- 卡片阴影效果
|
||
- 悬停动画
|
||
- 图标配合文字
|
||
- 统一的配色方案
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3 (Composition API)
|
||
- Vue Router 4
|
||
- Pinia (状态管理)
|
||
- Axios (HTTP 请求)
|
||
- Bootstrap 5 (UI 框架)
|
||
- Bootstrap Icons (图标)
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
web/src/
|
||
├── stores/
|
||
│ ├── auth.js # 认证状态管理
|
||
│ ├── chat.js # 聊天状态管理
|
||
│ └── knowledgeBase.js # 知识库状态管理 (新增)
|
||
├── views/
|
||
│ ├── Chat.vue # 聊天页面 (已更新)
|
||
│ ├── KnowledgeBase.vue # 知识库管理页面 (新增)
|
||
│ ├── Login.vue # 登录页面
|
||
│ └── GithubCallback.vue # GitHub 回调页面
|
||
├── router/
|
||
│ └── index.js # 路由配置 (已更新)
|
||
├── App.vue # 根组件
|
||
└── main.js # 入口文件
|
||
```
|
||
|
||
## API 集成
|
||
|
||
前端通过 Axios 调用后端 API：
|
||
|
||
- GET /api/knowledge-base - 获取知识库列表
|
||
- POST /api/knowledge-base - 创建知识库
|
||
- GET /api/knowledge-base/{id} - 获取知识库详情
|
||
- PUT /api/knowledge-base/{id} - 更新知识库
|
||
- DELETE /api/knowledge-base/{id} - 删除知识库
|
||
|
||
所有请求自动携带 JWT token 进行认证。
|
||
|
||
## 错误处理
|
||
|
||
- 网络错误：显示友好的错误提示
|
||
- 认证失败：自动跳转到登录页
|
||
- 业务错误：在模态框中显示具体错误信息
|
||
- 操作失败：保持当前状态，允许用户重试
|
||
|
||
## 状态管理
|
||
|
||
使用 Pinia 进行全局状态管理：
|
||
- 自动同步后端数据
|
||
- 乐观更新策略
|
||
- 错误回滚机制
|
||
- 缓存管理
|
||
|
||
## 下一步开发建议
|
||
|
||
1. **文件上传功能**
|
||
- 在知识库详情页添加文件上传组件
|
||
- 支持拖拽上传
|
||
- 显示上传进度
|
||
- 文件列表管理
|
||
|
||
2. **搜索功能**
|
||
- 添加知识库搜索框
|
||
- 支持按名称搜索
|
||
- 支持按描述搜索
|
||
|
||
3. **排序功能**
|
||
- 按创建时间排序
|
||
- 按更新时间排序
|
||
- 按名称排序
|
||
|
||
4. **批量操作**
|
||
- 批量选择知识库
|
||
- 批量删除
|
||
- 批量导出
|
||
|
||
5. **知识库统计**
|
||
- 显示文件数量
|
||
- 显示总大小
|
||
- 显示使用情况
|
||
|
||
6. **分享功能**
|
||
- 生成分享链接
|
||
- 设置访问权限
|
||
- 协作功能
|
||
|
||
## 注意事项
|
||
|
||
1. 确保后端 API 服务正在运行
|
||
2. 确保数据库表已创建
|
||
3. 确保前端环境变量配置正确
|
||
4. 首次使用需要先登录获取 token
|
||
5. 知识库名称在同一用户下必须唯一
|
||
|
||
## 常见问题
|
||
|
||
### Q: 页面显示空白？
|
||
A: 检查浏览器控制台是否有错误，确认后端 API 是否正常运行。
|
||
|
||
### Q: 创建知识库失败？
|
||
A: 检查是否已登录，知识库名称是否重复。
|
||
|
||
### Q: 无法删除知识库？
|
||
A: 确认该知识库属于当前用户，检查网络连接。
|
||
|
||
### Q: 页面加载慢？
|
||
A: 检查网络连接，考虑增加分页大小或实现虚拟滚动。
|
||
|
||
## 开发建议
|
||
|
||
1. 使用 Vue DevTools 调试状态
|
||
2. 使用浏览器开发者工具查看网络请求
|
||
3. 遵循 Vue 3 最佳实践
|
||
4. 保持代码简洁和可维护性
|
||
5. 添加适当的注释
|
||
|
||
## 总结
|
||
|
||
知识库前端功能已完整实现，包括：
|
||
- ✅ 完整的 CRUD 操作
|
||
- ✅ 现代化的 UI 设计
|
||
- ✅ 良好的用户体验
|
||
- ✅ 完善的错误处理
|
||
- ✅ 响应式布局
|
||
- ✅ 状态管理
|
||
- ✅ 路由集成
|
||
|
||
可以直接使用，并为后续功能扩展预留了空间。
|
||
|