kennethcheng
74d8e37abd
- 基于 Vue 3 + TypeScript + Vite 构建 - 实现 RAG 智能问答聊天界面，支持流式响应 - 支持 PDF 文档上传（最大 30MB）和解析 - 集成 marked + highlight.js 实现 Markdown 渲染与代码高亮 - 使用 Element Plus 构建 UI 组件 - 支持暗黑/明亮主题切换 - 配置 Docker + Nginx 多阶段构建
213 lines
6.5 KiB
Markdown
213 lines
6.5 KiB
Markdown
# Apache Doris 智能问答系统
|
||
|
||
<div align="center">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
*A modern RAG-based Q&A system for Apache Doris documentation*
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 功能特性
|
||
|
||
<div align="center">
|
||
|
||
| 特性 | 描述 |
|
||
|:---|:---|
|
||
| 🤖 **智能问答** | 基于 RAG 技术，智能理解 PDF 文档内容 |
|
||
| 📄 **文档上传** | 支持 PDF 文档上传，自动解析内容 |
|
||
| 💬 **流式输出** | 实时流式响应，无需等待完整回答 |
|
||
| 📝 **Markdown 渲染** | 完美支持 Markdown 格式输出 |
|
||
| 🎨 **代码高亮** | 语法高亮支持多种编程语言 |
|
||
| 🌙 **暗黑模式** | 支持明暗主题切换 |
|
||
| 🎯 **语义搜索** | 基于向量数据库的语义检索 |
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 技术栈
|
||
|
||
### 前端框架
|
||
- **Vue 3.5** - 渐进式 JavaScript 框架
|
||
- **TypeScript 5.9** - 类型安全的 JavaScript 超集
|
||
- **Vite 7.1** - 下一代前端构建工具
|
||
|
||
### UI 组件
|
||
- **Element Plus 2.11** - Vue 3 UI 组件库
|
||
- **@element-plus/icons-vue** - 图标库
|
||
|
||
### 核心功能
|
||
- **marked** - Markdown 解析与渲染
|
||
- **highlight.js** - 代码语法高亮
|
||
- **Pinia** - Vue 状态管理
|
||
- **Vue Router** - 路由管理
|
||
- **Axios** - HTTP 客户端
|
||
|
||
---
|
||
|
||
## 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 20.19.0
|
||
- npm >= 10.x
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 代码检查
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
---
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
springaidemo_frontend/
|
||
├── src/
|
||
│ ├── api/ # API 接口
|
||
│ │ ├── chat.ts # 聊天相关 API
|
||
│ │ ├── document.ts # 文档管理 API
|
||
│ │ └── index.ts # Axios 实例配置
|
||
│ ├── assets/
|
||
│ │ ├── base.css # 全局基础样式
|
||
│ │ └── main.css # 主入口样式
|
||
│ ├── components/ # Vue 组件
|
||
│ │ └── MarkdownRenderer.vue # Markdown 渲染器
|
||
│ ├── views/ # 页面视图
|
||
│ │ └── ChatView.vue # 聊天页面
|
||
│ ├── router/ # 路由配置
|
||
│ ├── stores/ # Pinia 状态
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.ts # 入口文件
|
||
├── public/ # 静态资源
|
||
├── index.html # HTML 入口
|
||
├── package.json # 项目配置
|
||
├── tsconfig.json # TypeScript 配置
|
||
├── vite.config.ts # Vite 配置
|
||
└── README.md # 项目文档
|
||
```
|
||
|
||
---
|
||
|
||
## 界面预览
|
||
|
||
### 聊天界面
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ Apache Doris 智能问答系统 │
|
||
│ ─────────────────────────────────────────── │
|
||
│ │
|
||
│ ┌────────────────────────────────────────┐ │
|
||
│ │ AI 正在思考中... │ │
|
||
│ │ ● ● ● │ │
|
||
│ └────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────────────────┐ │
|
||
│ │ 用户消息 │ │
|
||
│ └────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────────────────┐ │
|
||
│ │ **AI 回答** │ │
|
||
│ │ │ │
|
||
│ │ ```sql │ │
|
||
│ │ SELECT * FROM table; │ │
|
||
│ │ ``` │ │
|
||
│ └────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ 输入您的问题，AI将基于文档内容为您解答... │ │
|
||
│ │ [上传] [发送] │
|
||
│ └─────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## API 配置
|
||
|
||
默认 API 地址：`http://localhost:8080`
|
||
|
||
可通过环境变量修改：
|
||
|
||
```bash
|
||
VITE_API_BASE_URL=http://your-api-server:port
|
||
```
|
||
|
||
---
|
||
|
||
## Markdown 支持
|
||
|
||
系统完整支持 Markdown 渲染，包括但不限于：
|
||
|
||
- **标题** - H1 ~ H6 层级标题
|
||
- **列表** - 有序列表、无序列表、嵌套列表
|
||
- **代码块** - 多语言语法高亮
|
||
- **引用** - 块级引用样式
|
||
- **链接** - 自动识别链接
|
||
- **表格** - 表格渲染与样式
|
||
- **加粗/斜体** - 文本格式化
|
||
- **数学公式** - LaTeX 数学表达式
|
||
|
||
---
|
||
|
||
## 开发指南
|
||
|
||
### 添加新的 API 接口
|
||
|
||
在 `src/api/` 目录下创建新的 API 文件：
|
||
|
||
```typescript
|
||
// src/api/yourApi.ts
|
||
import request from './index'
|
||
|
||
export const yourApi = {
|
||
method: () => request.get('/endpoint'),
|
||
methodWithData: (data: any) => request.post('/endpoint', data)
|
||
}
|
||
```
|
||
|
||
### 添加新的页面
|
||
|
||
1. 在 `src/views/` 创建页面组件
|
||
2. 在 `src/router/index.ts` 添加路由配置
|
||
|
||
---
|
||
|
||
## 许可证
|
||
|
||
本项目基于 MIT 许可证开源。
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
|
||
**Built with ❤️ for Apache Doris Community**
|
||
|
||
</div>
|