ForgeAdmin 新成员：AI 赋能的数据可视化大屏平台

数字化转型持续推进的当下，数据可视化大屏几乎已成为企业标配——无论是运营数据监控，还是业务指标看板，都离不开直观的大屏展示。然而，现实挑战不容忽视：传统大屏开发过程中，前端工程师需投入大量时间进行图表配置、布局调整与数据对接，开发周期长、成本高昂，中小团队往往难以负担。 好在开源社区从不缺乏优质项目。GoView——来自 Dromara 社区的轻量级可视化低代码平台，基于 Vue3 + TypeScript + ECharts + VChart 技术栈，通过拖拽即可完成大屏设计，大幅降低了开发门槛。 ForgeAdmin 团队在此基础上进行了一项颇具价值的深度二次开发：不仅接入了真实的后台管理接口，还集成了 AI 智能生成能力。如今，用户只需用自然语言描述需求，即可一键生成完整的数据大屏。这项创新，确实值得深入探讨。

一、核心亮点

1.1 AI 一键生成大屏

这是本次开发中最核心的功能亮点。在 GoView 编辑器中，我们集成了一个 AI 对话面板（`AIChatPanel`），支持两种交互模式： - **生成大屏模式**：用户输入需求描述后，AI 自动解析，输出包含图表组件、布局配置、数据结构在内的完整大屏方案 - **自由对话模式**：与 AI 自由交流，获取大屏设计建议与优化方案 系统内置了4个快捷提示词模板，基本覆盖了最常见的业务场景： | 快捷提示词 | 适用场景 | |------------|----------| | 电商销售数据监控大屏 | 电商平台运营数据监控 | | 智慧城市运营中心大屏 | 城市级数据汇聚展示 | | 工厂生产数据监控大屏 | 工业制造实时监控 | | 财务数据分析大屏 | 企业财务指标分析 |

1.2 多供应商 AI 接入

市面上大多数方案绑定单一 AI 服务，灵活性受限。我们在设计时采用了另一种思路——构建**多供应商架构**，由用户自主配置和管理 AI 服务。系统内置若干预设模板，可一键填充配置： - 阿里百炼（DashScope）：接入通义千问系列模型 - OpenAI：支持 GPT 系列模型 - 智谱 AI：接入 GLM 系列模型 - Moonshot：接入 Kimi 系列模型 - DeepSeek：接入 DeepSeek 系列模型 - Ollama：支持本地部署的开源模型 - 自定义：兼容 OpenAI API 格式的任意服务 每个供应商可配置多个可用模型，AI 对话面板支持实时切换，同时可调节温度参数和最大 Token 数，灵活控制生成效果。

1.3 对接真实后台接口

原版 GoView 主要面向纯前端场景，数据多依赖 Mock 或静态 JSON。我们在 ForgeAdmin 中对数据层进行了彻底改造： 1. 统一认证体系：大屏平台与 ForgeAdmin 后台管理系统共用 Sa-Token 认证，登录一次全平台通行 2. 项目持久化：大屏项目数据通过 API 存储至后端数据库，支持多端同步 3. 动态数据源：支持配置真实后端 API 接口，图表数据可实现实时刷新 4. AI 服务后端化：供应商配置、会话管理、流式对话全部走后端 API，API Key 安全可靠

1.4 智能布局引擎

AI 生成的组件有时不包含精确的位置信息，因此我们设计了自动布局算法作为兜底方案。策略核心是**网格划分**：将画布切割为 N 列，依次填充组件： - 组件数 ≤ 4：2 列布局 - 组件数 5-9：3 列布局 - 组件数 > 9：4 列布局 - 顶部预留 80px 标题区域 - 自动计算行高，均匀分布 AI 引擎（`aiEngine`）还支持智能合并图表配置：ECharts 组件会自动覆盖 dataset，根据数据维度调整 series 数量；VChart 组件能智能合并 dataset 配置；通用组件则保留原有配置，仅更新必要字段。

二、技术架构

2.1 整体架构

ForgeAdmin 平台整体分为两部分：后台管理系统（`forge-admin-ui`，Vue3 + Naive UI）和 AI 数据可视化大屏（`forge-report-ui`，Vue3 + GoView + AI），后端统一基于 Spring Boot 3，配套 Sa-Token、MyBatis-Plus、Flowable。

2.2 AI 模块技术实现

AI 功能的前端实现，主要依赖以下几个核心模块： | 模块 | 文件 | 职责 | |------|------|------| | AI 对话面板 | `AIChatPanel.vue` | 用户交互入口，支持流式对话、快捷提示词 | | AI 生成对话框 | `AIGenerateDialog.vue` | 模态弹窗形式的大屏生成入口 | | AI 引擎 | `aiEngine.ts` | 解析 AI 响应 JSON，将组件应用到画布 | | LLM 客户端 | `llmClient.ts` | 从流式输出中提取 JSON 响应 | | 组件注册表 | `componentRegistry.ts` | 构建组件目录，供 AI 参考可用组件 | | 布局算法 | `layoutAlgorithm.ts` | 网格划分自动布局 | | AI Store | `aiStore.ts` | Pinia 状态管理 | | AI API | `api/ai/index.ts` | 接口定义，SSE 流式通信 |

2.3 流式通信

AI 对话采用 SSE（Server-Sent Events）流式通信，实时展示生成过程。核心流程如下：使用 `fetch` 发送 POST 请求，携带 token 与请求数据，通过 `response.body.getReader()` 逐块读取事件流，解析出 `message`、`done`、`error` 三种事件类型。生成过程中，界面上会依次展示： -

相关攻略

热门推荐