知识库前端功能说明
==================

## 已实现的功能

### 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 设计
- ✅ 良好的用户体验
- ✅ 完善的错误处理
- ✅ 响应式布局
- ✅ 状态管理
- ✅ 路由集成

可以直接使用，并为后续功能扩展预留了空间。