AI 智能体提供一站式大屏设计能力，从布局设计到数据填充全程 AI 辅助，同时支持手动精细调整。

一、三种模式

AI 面板提供三种工作模式，点击顶部 Tab 切换：

模式	说明
普通对话	通用问答，可生成自定义 HTML/ECharts 组件
组件设计	针对可视化组件的生成、迭代、优化
智能体	Agent 循环执行，自动完成大屏全流程设计

---

二、智能体模式

点击右侧面板的 AI 按钮进入 AI 面板，切换到 智能体 模式。

1.快速操作

进入智能体模式后，根据画布当前状态会显示不同的快捷操作按钮：

画布为空时

按钮	说明
设计大屏	设计一个通用数据大屏
生产监控	设计生产监控场景大屏
智慧城市	设计智慧城市场景大屏
智慧园区	设计智慧园区场景大屏
数据运营	设计数据运营中心大屏
安防监控	设计安防监控场景大屏

点击任意按钮,并选择一种布局方案，即可开始设计，AI 会自动完成布局、边框、组件选择和数据填充。

画布已有布局时

按钮	说明
重新设计	打开布局选择弹窗，重新设计整个大屏
换主题配色	打开主题配色弹窗，更换颜色方案
换边框样式	AI 自动更换边框样式
修改数据	修改某个组件的数据
替换组件	弹窗选择要替换的组件
添加组件	添加新的业务组件
调整布局	AI 调整现有布局

2.布局设计

自动设计

直接输入需求描述，例如：

帮我设计一个生产统计大屏

AI 会自动选择最合适的布局方案，完成标题、边框、组件放置和数据填充。

选择布局方案

点击 重新设计 按钮，打开布局选择弹窗：

弹窗展示 15 种预设布局方案，每个方案以缩略图形式展示布局轮廓：

方案	名称	特点
1	指挥中心	左右窄栏 + 中央巨屏
2	战略沙盘	左侧跨行大区 + 右侧三叠 + 底部横条
3	双翼护航	左窄三叠 + 中央大区 + 右窄三叠 + 底部横条
4	双翼展开	中央跨行 + 左右对称翼
5	全景监控	左侧窄栏 + 右侧上下分栏
6	钻石焦点	中央大区 + 四角辅助 + 底部横条
7	环绕布局	中央核心 + 四周环绕
8	右翼突击	右侧大区 + 左侧上下三段
9	盾形阵列	左侧跨行 + 右上大区 + 右下双列 + 底部横条
10	核心辐射	中央大区 + 左上右下不对称环绕
11	四层指挥	左右窄栏 + 中央巨屏（4行版）
12	四层护航	左窄四叠 + 中央大区 + 右窄四叠 + 底部横条
13	四层沙盘	左侧跨行大区 + 右侧四叠 + 底部横条
14	四层环绕	中央核心 + 四周环绕（4行版）
15	四层盾阵	左侧跨行 + 右上大区 + 右中双列 + 右下双列 + 底部横条

方案 1~10 为 3 行布局，方案 11~15 为 4~5 行布局，适合更大分辨率的大屏。

已使用过的方案会标记 已用 并半透明显示，避免重复选择。

自定义布局

布局选择弹窗右下角有 自定义 卡片（虚线边框），选中后展开文本输入框，用自然语言描述你想要的布局方式，例如：

左边一个大区域，右边上下两个小区域，底部一整条横条

AI 会根据描述自由生成布局方案。

3.主题配色

点击 换主题配色 按钮，打开主题配色弹窗：

背景主题

提供 12 种预设背景主题，包含线性渐变和径向渐变：

主题	说明
深空黑	从上到下深蓝渐变
暗夜蓝	深蓝色调渐变
深海墨	对角线深青渐变
暗森绿	深绿色调渐变
暗金棕	对角线暖棕渐变
暗焰红	深红色调渐变
暗紫夜	对角线紫色渐变
碳灰	灰色调渐变
纯黑	纯黑渐变
深蓝径向	蓝色径向渐变
深紫径向	紫色径向渐变
深绿径向	绿色径向渐变

边框大标题色

提供 12 种预设配色方案，控制边框、大标题和文字的颜色：

配色	主色调	辅色调
科技青	#00e9db	#00c0e9
深海蓝	#2196F3	#1565C0
天际蓝	#42A5F5	#1976D2
翡翠绿	#4CAF50	#2E7D32
薄荷绿	#26A69A	#00897B
琥珀金	#FFD700	#FFA000
烈焰红	#ff4444	#cc0000
日落橙	#FF9800	#F57C00
极光紫	#9C27B0	#7B1FA2
玫瑰粉	#E91E63	#C2185B
冰川白	#B0BEC5	#78909C
柠檬黄	#CDDC39	#AFB42B

背景主题和边框大标题色可独立切换，互不影响。

自定义配色

切换到 自定义 tab，可以分别配置：

• 边框/大标题颜色：主色调、辅色调
• 背景颜色：纯色或渐变模式
  • 渐变模式支持双色选择 + 5 种方向（从上到下、从左到右、左上到右下、右上到左下、径向渐变）

4.后续操作

设计完成后，AI 面板底部会显示后续操作按钮，可继续调整：

按钮	说明
换主题配色	打开主题配色弹窗
换边框样式	AI 自动更换边框样式
修改数据	修改组件数据
替换组件	弹窗选择要替换的组件，可输入描述
重新设计	打开布局选择弹窗，重新设计

5.替换组件

点击 替换组件 按钮，弹出替换组件对话框：

1. 从下拉列表选择要替换的组件
2. 可选输入想要替换成什么（如：雷达图、仪表盘、地图）
3. 点击确定，AI 执行替换

6.停止执行

AI 执行过程中，输入框右侧会出现停止按钮，点击可中断当前操作。

7.撤销操作

AI 操作完成后，如果对结果不满意，可点击 撤销 按钮回退到操作前的状态。

8.场景配色规则

AI 会根据场景自动匹配配色方案：

场景	配色倾向
工业/生产	青色系
城市/交通	蓝色系
农业/环境	绿色系
金融	金色系
安防	红色系
医疗	蓝绿色系

---

三、组件设计模式

切换到 组件设计 模式，可生成和迭代自定义可视化组件。

1.快速创建

未选中组件时，显示 20 种图表类型快速创建卡片：

类型	类型	类型	类型
仪表盘	漏斗图	甘特图	桑基图
玫瑰图	雷达图	树图	矩形树图
热力图	关系图	平行坐标	旭日图
瀑布图	主题河流	散点图	K线图
箱线图	词云	地图	3D图表

点击任意类型，输入补充描述，AI 生成完整 HTML/ECharts 代码并自动创建 CustomChart 组件到画布。

2.组件操作

选中组件后，根据组件类型显示不同操作：

CustomChart 组件（自编码组件）

操作	说明
优化代码	AI 优化现有代码质量和性能
调整样式	修改配色、布局、动画等
修改数据	修改图表数据、文案、指标
适配修复	修复变形、滚动、溢出问题
数据接口	为组件添加 fetch 请求逻辑

Three / Cesium 等扩展组件

操作	说明
专属操作	Three 组件的 9 个场景技能（见下方）
修改数据	修改组件数据
调整颜色	提取颜色字段，实时预览

业务组件（系统自带组件）

操作	说明
修改数据	AI 生成语义化新数据
调整颜色	提取颜色字段，实时预览
同类替换	替换为同类别的其他组件

3.设计技能

组件设计模式包含 7 个设计技能，AI 根据意图自动分发：

技能	触发关键词	说明
generate	生成/创建/做一个	生成新组件
iterate	修改/调整/改一下	迭代修改现有组件
optimize	优化/改进/提升	代码优化
style-adjust	样式/颜色/配色/布局	样式调整
data-change	数据/数值/文案	数据修改
resize-adapt	变形/溢出/滚动/适配	尺寸适配
api-config	接口/API/请求/fetch	API 接口配置

---

四、Three.js 场景 AI 控制

在组件设计模式下选中 Three 组件，可使用 9 个场景 AI 技能：

技能	说明
scene-preset	场景预设（工业/城市/自然等风格一键应用）
skybox	天空盒配置
light	灯光调整
camera	相机参数
fog	雾效配置
postprocess	后处理效果
model-visibility	模型显隐控制
animation	动画控制
shader	着色器特效

点击对应技能后，AI 自动分析当前场景并生成配置参数，通过对话框确认后应用。

---

五、普通对话模式

通用问答模式，支持自然语言交互。

• 如果 AI 响应中包含 HTML 代码，会自动创建 CustomChart 组件到画布
• 支持多轮对话，保留历史上下文

---

六、画布属性面板中的渐变背景

在左侧画布属性面板中，背景色配置已支持渐变模式：

1. 选择 渐变 模式
2. 设置两个颜色
3. 选择渐变方向
4. 实时预览效果

---

七、AI 额度

说明

• 每个用户有独立的 AI 调用额度
• 额度用尽后需联系管理员充值
• 管理员可在 综合管理 > 用户管理 中设置用户额度