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

ForgeAdmin 新成员AI 赋能的数据可视化大屏平台基于 GoView 二次开发集成 AI 智能生成能力对接真实后台接口让数据大屏开发效率提升 10 倍。一、项目背景在数字化转型的浪潮中数据可视化大屏已经成为企业展示运营数据、监控业务指标的核心工具。然而传统的大屏开发往往需要前端工程师花费大量时间进行图表配置、布局调整和数据对接开发周期长、成本高。GoView 作为 Dromara 开源社区的一款优秀数据可视化低代码平台基于Vue3 TypeScript ECharts VChart技术栈提供了拖拽式的大屏设计能力极大降低了大屏开发的门槛。在此基础上ForgeAdmin团队对 GoView 进行了深度二次开发不仅对接了真实的后台管理接口还创新性地集成了AI 智能生成能力让用户只需用自然语言描述需求即可一键生成完整的数据大屏。二、核心亮点2.1 AI 一键生成大屏这是本次开发最核心的功能创新。我们在 GoView 的编辑器中集成了 AI 对话面板AIChatPanel支持两种工作模式生成大屏模式用户输入需求描述AI 自动分析需求并生成包含图表组件、布局配置、数据结构的大屏方案自由对话模式用户可以与 AI 自由交流获取大屏设计建议和优化方案图大屏编辑器画布左侧为组件库与 AI 助手入口中间为可视化画布右侧为配置面板系统内置了 4 个快捷提示词模板覆盖最常见的业务场景快捷提示词适用场景电商销售数据监控大屏电商平台运营数据监控智慧城市运营中心大屏城市级数据汇聚展示工厂生产数据监控大屏工业制造实时监控财务数据分析大屏企业财务指标分析2.2 多供应商 AI 接入不同于市面上绑定单一 AI 服务的方案我们设计了灵活的多供应商架构支持用户自行配置和管理 AI 服务图AI 供应商配置页面支持新增、编辑、删除供应商以及连接测试和默认设置系统内置了丰富的供应商预设模板一键填充配置阿里百炼DashScope接入通义千问系列模型OpenAI支持 GPT 系列模型智谱 AI接入 GLM 系列模型Moonshot接入 Kimi 系列模型DeepSeek接入 DeepSeek 系列模型Ollama支持本地部署的开源模型自定义兼容 OpenAI API 格式的任意服务每个供应商支持配置多个可用模型用户可以在 AI 对话面板中实时切换供应商、模型并调节温度参数和最大 Token 数灵活控制生成效果。2.3 对接真实后台接口原版 GoView 主要面向纯前端使用场景数据大多通过 Mock 或静态 JSON 配置。我们在 ForgeAdmin 中对数据层进行了全面改造统一认证体系大屏平台与 ForgeAdmin 后台管理系统共享 Sa-Token 认证登录即可使用项目持久化大屏项目数据通过 API 存储到后端数据库支持多端同步动态数据源支持配置真实的后端 API 接口图表数据实时刷新AI 服务后端化AI 供应商配置、会话管理、流式对话等全部通过后端 API 实现保障 API Key 安全图项目列表页面展示已创建的大屏项目支持发布状态管理2.4 智能布局引擎AI 生成的组件可能不包含精确的位置信息为此我们实现了自动布局算法layoutAlgorithm策略网格划分将画布划分为 N 列依次填入组件 - 组件数 42 列布局 - 组件数 5-93 列布局 - 组件数 94 列布局 - 顶部预留 80px 标题区域 - 自动计算行高均匀分布同时AI 引擎aiEngine支持智能合并图表配置ECharts 组件自动覆盖 dataset根据数据维度调整 series 数量VChart 组件智能合并 dataset 配置通用组件保留原有配置仅更新必要字段三、技术架构3.1 整体架构┌─────────────────────────────────────────────────────────┐ │ ForgeAdmin 平台 │ ├──────────────────────┬──────────────────────────────────┤ │ forge-admin-ui │ forge-report-ui │ │ (后台管理系统) │ (AI 数据可视化大屏) │ │ Vue3 Naive UI │ Vue3 GoView AI │ ├──────────────────────┴──────────────────────────────────┤ │ Spring Boot 3 后端服务 │ │ Sa-Token · MyBatis-Plus · Flowable │ └─────────────────────────────────────────────────────────┘3.2 AI 模块技术实现AI 功能的前端实现包含以下核心模块模块文件职责AI 对话面板AIChatPanel.vue用户交互入口支持流式对话、快捷提示词AI 生成对话框AIGenerateDialog.vue模态弹窗形式的大屏生成入口AI 引擎aiEngine.ts解析 AI 响应 JSON将组件应用到画布LLM 客户端llmClient.ts从流式输出中提取 JSON 响应组件注册表componentRegistry.ts构建组件目录供 AI 参考可用组件布局算法layoutAlgorithm.ts网格划分自动布局AI StoreaiStore.tsPinia 状态管理AI APIapi/ai/index.ts接口定义SSE 流式通信3.3 流式通信AI 对话采用SSEServer-Sent Events流式通信实时展示 AI 生成过程// 核心流程constconsumeAiSseasync(url,data,onChunk,onDone,onError){constresponseawaitfetch(url,{method:POST,headers:{Content-Type:application/json,Authorization:Bearer${token},},body:JSON.stringify(data),})constreaderresponse.body?.getReader()// 逐块读取 SSE 事件流解析 data 字段// 支持 event: message / done / error 三种事件类型}生成过程中界面会展示进度提示 正在理解你的大屏需求... 正在规划页面布局与组件组合... 正在生成图表数据结构与画布配置... ✨ 正在整理最终结果...3.4 组件目录系统为了让 AI 了解平台支持哪些可视化组件我们构建了完整的组件注册表componentRegistry涵盖 7 大类组件分类说明示例组件ChartsEChartsECharts 图表柱状图、折线图、饼图、雷达图、散点图、地图VChart字节 VChart 图表高级统计图表Informations信息展示文字、图片、视频、词云、嵌套网页Tables数据列表滚动排名列表、滚动表格Decorates装饰组件边框 01~13、装饰 01~06Photos图片组件图片展示Icons图标组件图标展示AI 生成大屏时会将组件目录文本附在请求中确保 AI 只使用平台支持的组件类型。四、功能展示4.1 登录页面图GoView 大屏平台登录页与 ForgeAdmin 共享认证体系4.2 可视化编辑器图大屏编辑器核心界面包含组件库左侧、画布中间、配置面板右侧编辑器支持丰富的操作能力拖拽布局从组件库拖拽图表到画布自由调整位置和大小数据配置支持 HTTP 请求、SQL 请求等多种数据源方式主题切换内置多种行业主题金融、政务、医疗、汽车等支持自定义配色动画配置为组件添加入场动画效果事件编辑配置组件交互事件历史记录支持撤销/重做操作4.3 数据源配置图数据请求配置面板支持配置后端 API 地址、请求方式、刷新间隔等4.4 VChart 图表集成图集成字节跳动 VChart 图表框架提供更丰富的可视化效果4.5 3D 可视化图支持 Three.js 3D 地球等高级可视化组件五、AI 功能使用流程5.1 配置 AI 供应商进入项目 → AI 供应商配置页面点击新增供应商选择预设模板如阿里百炼填写 API Key 和 Base URL点击测试连接验证配置是否正确设为默认供应商5.2 AI 生成大屏进入大屏编辑器在左侧面板找到AI 助手选择生成大屏模式输入需求描述例如“生成一个电商销售数据监控大屏包含月度销售趋势、品类占比、地区分布”选择深色/浅色风格点击发送等待 AI 生成生成完成后点击应用到画布即可看到完整的大屏布局5.3 二次编辑AI 生成的大屏是一个高质量的起点用户可以在此基础上拖拽调整组件位置和大小修改图表数据和样式替换数据源为真实 API 接口添加装饰组件增强视觉效果配置动画和交互事件六、与原版 GoView 的对比特性原版 GoViewForgeAdmin 大屏数据存储浏览器本地存储后端数据库持久化用户认证无Sa-Token 统一认证AI 生成不支持支持自然语言生成大屏AI 供应商不支持多供应商管理与切换数据源Mock / 静态 JSON真实后端 API 接口会话管理无AI 对话历史记录模板市场有有可扩展主题系统有有 自定义配色图表框架ECharts VChartECharts VChart部署方式纯前端 / DockerDocker Nginx七、快速开始环境要求Node.js 18.xJava 17后端服务MySQL 8.0Redis 6.0启动大屏服务# 1. 克隆项目gitclone https://gitee.com/ForgeLab/forge-admin.git# 2. 进入大屏前端目录cdforge-report-ui# 3. 安装依赖npminstall# 4. 启动开发服务npmrun dev配置 AI 供应商启动服务后登录系统进入项目 → AI 供应商页面新增供应商并配置 API Key返回编辑器即可使用 AI 生成功能八、总结ForgeAdmin 的 AI 数据可视化大屏项目在 GoView 这个优秀的开源基础上实现了三个关键突破AI 赋能通过自然语言交互将大屏开发从拖拽配置升级为描述即生成大幅降低使用门槛真实数据对接后台管理系统的真实接口让大屏不再是静态 Demo而是可用的业务工具灵活开放多供应商架构让用户不被绑定到特定 AI 服务本地部署选项满足数据安全需求未来我们计划进一步增强 AI 能力包括支持上传数据文件Excel/CSVAI 自动分析并推荐最佳可视化方案智能数据洞察自动发现数据中的趋势和异常多轮对话优化支持对已生成大屏的迭代修改项目地址https://gitee.com/ForgeLab/forge-admin技术栈Vue3 TypeScript Vite NaiveUI ECharts VChart Pinia Spring Boot 3开源协议MIT License