lingyue-zhibao/frontend/vue-demo

灵越智报 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. 安装依赖

cd frontend/vue-demo
npm install

2. 启动开发服务器

npm run dev

访问 http://localhost:5173

3. 连接后端 API

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

确保后端服务已启动：

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 变量：

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

构建部署

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

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