# 灵越智报 Vue Demo

基于 Vue 3 + Vite + Element Plus 的前端演示项目，用于测试模板系统 API。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Element Plus** - Vue 3 UI 组件库
- **Pinia** - Vue 状态管理
- **Vue Router** - 路由管理
- **Axios** - HTTP 客户端
- **Sass** - CSS 预处理器

## 功能模块

### 1. 首页 (Home)
- 统计概览（报告数、模板数、文档数）
- AI 对话入口
- 推荐模板展示
- 快捷操作入口

### 2. 模板管理 (Templates)
- 模板列表展示
- 模板搜索和筛选
- 创建新模板
- 模板发布、归档、复制、删除

### 3. 编辑器 (Editor)
- 文档内容编辑
- **变量标记**：选中文本后右键标记为变量
- 来源文件管理
- 变量管理面板
- 按类别分组显示变量
- 知识图谱弹窗（开发中）

### 4. 生成记录 (Generations)
- 生成任务列表
- 创建新生成任务
- 执行变量提取
- 确认并生成文档
- 下载生成的文档

## 快速开始

### 1. 安装依赖

```bash
cd frontend/vue-demo
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5173

### 3. 连接后端 API

Vite 开发服务器已配置代理，将 `/api` 请求转发到 `http://localhost:18521`（extract-service）。

确保后端服务已启动：

```bash
cd backend/lingyue-starter
mvn spring-boot:run
```

## 项目结构

```
vue-demo/
├── index.html           # 入口 HTML
├── package.json         # 项目配置
├── vite.config.js       # Vite 配置
├── src/
│   ├── main.js          # 应用入口
│   ├── App.vue          # 根组件
│   ├── api/
│   │   └── index.js     # API 封装
│   ├── assets/
│   │   └── main.scss    # 全局样式
│   ├── components/      # 公共组件
│   ├── router/
│   │   └── index.js     # 路由配置
│   ├── stores/
│   │   └── template.js  # 模板状态管理
│   └── views/
│       ├── Home.vue           # 首页
│       ├── Templates.vue      # 模板列表
│       ├── TemplateDetail.vue # 模板详情
│       ├── Editor.vue         # 编辑器
│       ├── Generations.vue    # 生成记录列表
│       └── GenerationDetail.vue # 生成任务详情
```

## API 接口

### 模板 API
| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/v1/templates` | GET | 获取模板列表 |
| `/api/v1/templates/{id}` | GET | 获取模板详情 |
| `/api/v1/templates` | POST | 创建模板 |
| `/api/v1/templates/{id}` | PUT | 更新模板 |
| `/api/v1/templates/{id}` | DELETE | 删除模板 |
| `/api/v1/templates/{id}/publish` | POST | 发布模板 |
| `/api/v1/templates/{id}/variables` | GET | 获取变量列表 |
| `/api/v1/templates/{id}/variables/grouped` | GET | 按类别分组获取变量 |

### 生成任务 API
| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/v1/generations` | GET | 获取任务列表 |
| `/api/v1/generations/{id}` | GET | 获取任务详情 |
| `/api/v1/generations` | POST | 创建任务 |
| `/api/v1/generations/{id}/execute` | POST | 执行提取 |
| `/api/v1/generations/{id}/confirm` | POST | 确认生成 |
| `/api/v1/generations/{id}/download` | GET | 下载文档 |

## 变量类别

| 类别 | 标识 | 颜色 | 说明 |
|------|------|------|------|
| 核心实体 | entity | 蓝色 #1890ff | 项目名称、公司名等 |
| 概念/技术 | concept | 紫色 #722ed1 | 技术方案、概念等 |
| 数据/指标 | data | 绿色 #52c41a | 金额、数量、比例等 |
| 地点/组织 | location | 橙色 #faad14 | 地点、部门等 |
| 资源模板 | asset | 粉色 #eb2f96 | 图表、模板等 |

## 开发说明

### Mock 数据

当前版本使用 Mock 数据进行演示，实际使用时需要：

1. 启动后端服务
2. 移除组件中的 Mock 数据
3. 使用 API 获取真实数据

### 自定义主题

修改 `src/assets/main.scss` 中的 CSS 变量：

```scss
:root {
  --primary: #1890ff;
  --primary-dark: #096dd9;
  --primary-light: #e6f7ff;
  // ...
}
```

## 构建部署

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

构建产物在 `dist/` 目录，可部署到 Nginx 等静态服务器。