Apache Doris 智能问答系统

A modern RAG-based Q&A system for Apache Doris documentation

---

功能特性

特性	描述
🤖 智能问答	基于 RAG 技术，智能理解 PDF 文档内容
📄 文档上传	支持 PDF 文档上传，自动解析内容
💬 流式输出	实时流式响应，无需等待完整回答
📝 Markdown 渲染	完美支持 Markdown 格式输出
🎨 代码高亮	语法高亮支持多种编程语言
🌙 暗黑模式	支持明暗主题切换
🎯 语义搜索	基于向量数据库的语义检索

---

技术栈

前端框架

• 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

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

代码检查

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

可通过环境变量修改：

VITE_API_BASE_URL=http://your-api-server:port

---

Markdown 支持

系统完整支持 Markdown 渲染，包括但不限于：

• 标题 - H1 ~ H6 层级标题
• 列表 - 有序列表、无序列表、嵌套列表
• 代码块 - 多语言语法高亮
• 引用 - 块级引用样式
• 链接 - 自动识别链接
• 表格 - 表格渲染与样式
• 加粗/斜体 - 文本格式化
• 数学公式 - LaTeX 数学表达式

---

开发指南

添加新的 API 接口

在 src/api/ 目录下创建新的 API 文件：

// 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 许可证开源。

---

Built with ❤️ for Apache Doris Community