# Apache Doris 智能问答系统

<div align="center">

![Apache Doris](https://img.shields.io/badge/Apache%20Doris-Intelligence-blueviolet?style=for-the-badge)
![Vue.js](https://img.shields.io/badge/Vue%203-5.0-4FC08D?style=for-the-badge&logo=vue.js)
![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=for-the-badge&logo=typescript)
![Vite](https://img.shields.io/badge/Vite-7.0-646CFF?style=for-the-badge&logo=vite)

*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>