# personal_knowledge_base_pc

**Repository Path**: qfxtime/personal_knowledge_base_pc

## Basic Information

- **Project Name**: personal_knowledge_base_pc
- **Description**: 企业级知识库前端程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-21
- **Last Updated**: 2026-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 企业知识库 RAG 前端

基于 Vue 3 + Vite + TypeScript 构建的企业级知识库问答系统前端，采用豆包风格浅色 UI 设计。

支持基础 RAG 检索增强与 Agent 智能问答两种模式，提供文档上传、流式对话、Markdown 渲染与代码高亮等完整能力。

## 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 框架 | Vue 3 | ^3.5 |
| 构建 | Vite | ^8.3 |
| 语言 | TypeScript | ~6.0 |
| 状态管理 | Pinia | ^4.0 |
| UI 组件库 | Element Plus | ^2.14 |
| HTTP | Axios | ^1.20 |
| 路由 | Vue Router | ^4.6 |
| Markdown | marked + highlight.js + DOMPurify | - |

## 项目结构

```
src/
├── api/                # 接口层
│   ├── request.ts        axios 实例 + 拦截器
│   ├── knowledgeApi.ts   知识库 CRUD
│   └── chatApi.ts        RAG/Agent 流式问答 (fetch + SSE)
├── assets/style/       # 全局样式
│   └── global.css        豆包风格设计系统变量
├── components/         # 组件
│   ├── Sidebar.vue      左侧侧边栏
│   ├── ChatMessage.vue  聊天气泡
│   ├── ChatInput.vue    底部输入
│   └── UploadModal.vue  上传弹窗
├── router/index.ts     # 路由配置
├── store/              # Pinia 仓库
│   ├── chatStore.ts     会话消息 + 流式输出
│   └── knowledgeStore.ts 文档列表 + 上传删除
├── types/chat.ts       # 全局类型定义
├── utils/markdown.ts   # Markdown 渲染工具
├── views/ChatPage.vue  # 主页面
├── App.vue             # 根组件
└── main.ts             # 入口
```

## 启动命令

```bash
# 安装依赖
npm install

# 开发模式 (端口 3000, 自动代理 /api → http://127.0.0.1:8888)
npm run dev

# 类型检查 + 生产构建
npm run build

# 预览构建产物
npm run preview
```

## 环境变量

| 文件 | 变量 | 默认值 | 说明 |
|------|------|--------|------|
| `.env.development` | `VITE_API_BASE_URL` | `http://127.0.0.1:8888` | 开发环境后端地址 |
| `.env.production` | `VITE_API_BASE_URL` | - | 生产环境后端地址 |

路径别名 `@` 映射到 `src/` 目录，在 `vite.config.ts` 与 `tsconfig.json` 中同步配置。

## 页面功能

### 左侧侧边栏

- **问答模式切换**：下拉选择 `基础 RAG` 或 `Agent 智能问答`，控制后端调用 `/chat/rag` 或 `/chat/agent`
- **上传文档**：弹窗支持拖拽或点击上传，限制 PDF / DOCX / MD / TXT，单文件最大 50MB，带实时进度条
- **知识库文档列表**：显示已上传文档的文件名，支持一键删除（需二次确认）
- **清空对话**：清空当前会话所有消息并终止正在进行的流式请求

### 右侧对话区

- **消息气泡**：
  - 用户消息：靠右，浅蓝背景 `#e8f0ff`
  - AI 消息：靠左白色卡片，支持 Markdown 渲染与代码块语法高亮
- **流式输出**：AI 回复采用 SSE 流式分片实时展示，尾部闪烁光标表示生成中
- **打字动画**：AI 等待首个 chunk 时展示三点跳动 loading
- **自动滚动**：新消息或流式 chunk 到达时自动滚到底部
- **流式中断**：loading 状态下输入框禁用，防止重复发送

### 底部输入区

- 多行自适应高度 textarea（44px → 180px）
- `Enter` 发送 / `Shift + Enter` 换行
- 中文输入法 composition 期间不触发发送
- 发送按钮圆形，loading 时自旋转

## 后端对接

后端 Swagger 文档：<http://127.0.0.1:8888/docs>

### 接口列表

| 方法 | 路径 | 用途 |
|------|------|------|
| GET | `/knowledge/list` | 获取知识库文档列表 |
| DELETE | `/knowledge/delete` | 删除文档（query 参数 `source`） |
| POST | `/document/upload` | 上传文档（multipart/form-data，字段 `file`） |
| POST | `/chat/rag` | 基础 RAG 流式问答（请求体 `{ query: string }`） |
| POST | `/chat/agent` | Agent 流式问答（请求体 `{ query: string }`） |

### 开发代理

Vite 开发服务器自动将 `/api` 请求转发到 `http://127.0.0.1:8888` 并去掉 `/api` 前缀，避免跨域问题。

## 豆包风格设计系统

| Token | 值 | 用途 |
|-------|---|------|
| `--bg-primary` | `#f7f8fa` | 侧边栏 / 次级背景 |
| `--bg-card` | `#ffffff` | 卡片 / 气泡 |
| `--brand-blue` | `#3370ff` | 主按钮 / 链接 / 选中态 |
| `--brand-blue-bg` | `#e8f0ff` | 用户消息气泡背景 |
| `--text-primary` | `#1f2329` | 主要文字 |
| `--text-secondary` | `#4e5969` | 次要文字 |
| `--text-tertiary` | `#86909c` | 辅助文字 / placeholder |
| `--border` | `#eaecef` | 分隔线 / 边框 |

CSS 变量定义在 `src/assets/style/global.css`，组件内可直接 `var(--brand-blue)` 引用。

## License

MIT