AI页面助手
AI页面助手通过自然语言描述需求，自动生成布局专业、元素齐全的工业监控页面、HMI 操控页面与数据看板。生成后支持预览、微调、保存为 CMS 页面，并可结合智能绑定完成变量接入，核心用于快速完成监控页面类工程开发。
功能说明
- 多模态输入构建页面：支持通过自然语言描述页面 "主题（用途）、视觉风格（可选）、核心内容（需展示的数据 / 元素）" ，也可以上传需求附件或参考图、选择页面模版、选择素材资源。AI会参考模版、图片和素材信息生成页面。
- 双模式按需生成：
- 快速模式：AI 智能补全上下文缺失细节，提供快速的页面生成体验。适用于方案前期的快速构思、概念验证与原型探索。
- 引导模式：基于可视化卡片交互智能引导用户完善配置，并在生成前提供方案确认与调整环节，确保交付结果与业务意图精准对齐。适用于标准严格、需求明确的工程交付场景。
- 多页面类型生成：AI页面助手可根据用户需求，混搭图表、控制、显示、状态四大类组件生成页面，支持分析看板、HMI 、报表以及多种组件组合的复合页面。
- 素材资源引用：生成页面时可直接引用用户已选择的素材资源，包括设备图、3D 模型等。
- 智能局部重构：支持对已生成页面进行精细化调整。用户可自由框选页面内的特定区域，通过自然语言指令驱动 AI 快速完成局部组件的定向重构与样式优化。
- 无缝对接生产环境：生成的页面涵盖实时数据展示（如电流、电压、生产计数）、设备状态反馈、控制交互元素和素材资源展示，可从 HTML 预览保存并转换为 CMS 页面组件。工程师仅需根据实际工程需求进行简单微调（如组件位置、颜色调整、变量绑定确认）即可投入使用。
核心优势
1. 工程效率跃升
监控页面设计周期从传统 "小时级" 缩短至 "分钟级"，大幅加快工程交付进度。
效率对比：
| 页面类型 | 传统开发 | AI生成 | 积分消耗 | 效率提升 |
|---|---|---|---|---|
| 简单监控页（10-20个组件） | 2-3小时 | 3-5分钟 | 20积分/次 | 提升95% |
| 标准看板（30-50个组件） | 4-6小时 | 5-10分钟 | 20积分/次 | 提升96% |
| 复杂大屏（50+个组件） | 1-2天 | 10-20分钟 | 30积分/次 | 提升97% |
按人工成本计算，节省1小时的开发时间价值远超20积分的成本。AI生成不仅提升效率，更能显著降低项目成本。
2. 开发零门槛
OT工程师无需掌握UI设计或前端开发技能，仅通过自然语言描述需求即可完成专业页面开发。
传统方式 vs AI方式：
传统方式：
学习UI设计 → 学习组件库 → 手动拖拽布局 → 调整样式 → 配置属性
需要：设计能力 + 技术能力 + 大量时间
AI方式：
描述需求 → AI生成 → 简单微调
需要：清晰表达需求的能力
3. 页面风格统一
支持通过 "风格提示词" 定义统一设计标准（如 "深色科技风格""卡片式布局"），多页面工程复用提示词可确保视觉一致性，减少后期调整工作量。
4. 从页面预览到工程落地
AI页面助手不只生成静态效果图，还支持将页面预览中的组件转换为 CMS 原生组件，并与变量智能绑定衔接。对于 HMI 操控页，显示类、控制类和状态类组件可以进入后续绑定流程，减少从设计稿到可运行页面之间的重复配置。
典型使用场景
场景一：工程方案快速验证
背景：项目投标阶段需向客户展示界面原型，或内部评审新看板布局。
传统方式：
- 设计师出设计稿：1-2天
- 开发人员实现原型：2-3天
- 总计：3-5天
AI方式 ：
- 输入需求："创建产线整体看板，包含OEE、产量趋势和设备状态列表"
- AI生成高保真页面：5分钟
- 微调优化：10-20分钟
- 总计：30分钟内
价值：助力工程方案快速沟通与迭代，提升投标成功率。
场景二：多页面工程标准化构建
背景：为生产车间创建数十个同类设备监控页。
步骤：
-
准备统一的"风格提示词"：
工业灰风格，高亮色为青色，卡片式布局，标题字体18px，数据字体24px加粗 -
生成第一个设备页面时，在提示词中包含风格描述：
工业灰风格，高亮色为青色，卡片式布局，标题字体18px，数据字体24px加粗。创建注塑机1号监控页，包含温度、压力、周期时间、产量计数 -
生成其他页面时，保持相同的风格提示词，只修改设备编号和参数
注意：
- 每次生成时都需要输入相同的风格提示词，以保持风格一致性
- 由于AI生成具有一定随机性，即使使用相同提示词，生成的页面也可能存在细微差异
- 建议生成后进行人工审核和微调，确保整体风格统一
效果：
- 大部分页面布局、字体、颜色保持一致
- 30个页面从3周缩短到2天
- 降低工程标准化成本
场景三：复杂页面工程快速启动
背景：开发含工艺计算、多数据处理的功能页面。
策略：
-
先用AI生成页面"骨架"：
创建配方管理页面，包含：- 左侧：配方列表（表格）- 中间：参数输入区（10个输入框）- 右侧：实时数据显示区（5个数值框）- 底部：保存、加载、删除按钮 -
AI生成基础布局和组件
-
工程师专注于后台逻辑和功能实现
价值：减少前端布局耗时，让工程师聚焦核心业务逻辑。
场景四：HMI 操控页面快速生成
背景：设备操作页面需要同时包含参数显示、状态指示、操作按钮和报警信息，传统方式需要工程师逐个拖拽组件并配置样式。
AI方式：
- 输入需求："生成一张注塑机 HMI 操控页面，包含参数监控、运行监控、系统操作、当前报警和手动调试区"
- AI 自动混搭显示、控制、状态类组件
- 在预览中确认布局后保存为 CMS 页面
- 使用智能绑定完成读写变量绑定
价值：快速搭建可继续配置的 HMI 页面骨架，减 少组件选择、布局和基础样式配置时间。
5分钟快速上手
步骤1：打开AI页面助手
在页面编辑器中，点击右上角的"AI助手"按钮，或在新建页面时选择"AI生成"。
步骤2：明确需求与模式
您可以选择快速模式（AI自动补齐需求）或引导模式（AI卡片交互提问补充需求）。 在对话框中输入页面需求，也可以上传需求附件或参考图、选择页面模版、选择素材资源。例如：
创建一个注塑机监控页面，深色科技风格，
包含：
- 实时温度曲线图
- 压力仪表盘
- 生产计数显示
- 设备状态指示灯
- 启动/停止按钮
选择生成模式：
选择参考图或设备资源：
步骤3：等待AI生成
AI会在30～60秒内分析需求并生成页面，生成过程中会显示进度提示。若已选择素材资源，AI 会在页面中引用并生成对应展示区域。
步骤4：预览和微调
- 查看生成的页面效果
- 如需调整，可以：
- 选中指定区域，通过对话的方式让AI修改
- 选中素材资源区域，让AI调整位置、尺寸或展示方式
- 或继续与AI对话进行整体优化
步骤5：保存为 CMS 页面
确认预览效果后，将页面保存为 CMS 页面。页面中的 HTML 预览内容会转换为可继续编辑的 CMS 页面组件。
步骤6：智能绑定数据
点击"开始智能绑定"，让AI自动匹配变量到组件，详见AI智能绑定。
提问技巧（快速生成优质页面）
技巧一：基础标准页面生成公式
公式：主题（页面用途）+ 风格（可选）+ 核心内容（需展示的数据 / 元素）
示例1 - 简单监控页：
创建一个机器人焊接工作站的监控页，
深色科技风格，
包含实时焊接电流图表、电压曲线、生产计数显示和设备状态指示灯。
示例2 - 生产看板：
创建一个产线整体看板，
卡片式布局，蓝色主题，
包含OEE仪表盘、产量趋势折线图、设备状态列表、报警信息滚动条。
示例3 - 数据分析页：
创建一个能耗分析页面，
浅色简洁风格，
包含日/月/年能耗对比柱状图、各设备能耗占比饼图、
实时功率曲线、能耗排名表格。
技巧二：大屏定制页面生成公式
公式：主题 + 风格 + 布局结构（屏幕分区）+ 详细元素（每个区域的图表 / 数据）
示例 - 1920x1080大屏：
为1920x1080屏幕设计一个冲压机监控页，
工业灰风格，高亮色为橙色；
页面分为左、中、右三列：
- 左侧（宽度30%）：用仪表盘显示OEE，下方显示设备状态卡片
- 中间（宽度40%）：顶部显示设备名称，中间用折线图显示实时压力曲线，
底部显示当前工单信息
- 右侧（宽度30%）：用表格显示历史故障记录，最多显示10条
所有文字使用微软雅黑，标题18px，数据24px加粗。
技巧三：使用参考风格
如果有喜欢的页面风格，可以描述参考对象：
创建一个类似特斯拉工厂监控风格的页面，
极简黑白配色，科技感强，
包含已选设备资源展示、实时数据流动效果、
关键指标大数字显示
技巧四：生成 HMI 操控页面
公式：设备对象 + HMI 功能区 + 读写组件 + 状态和报警要求
示例 - HMI 操控页：
创建一张 1920x1080 的注塑机 HMI 操控页面，
深色工业风格，
包含参数监控、运行监控、系统操作、当前报警、手动调试、参数设置。
参数监控中展示温度、压力、速度、产量等实时数值；
系统操作区包含启动、停止、复位、清零、报警解除按钮；
状态区用指示灯显示运行、停止、故障状态；
参数设置区包含温度设定和速度设定输入框。
常见问题
Q1: AI生成的页面不符合预期怎么办？
A: 可以尝试：
- 重新描述需求：使用更具体、更清晰的语言
- 分步骤生成：先生成基础布局，再逐步完善
- 提供参考：描述类似的页面风格或参考对象
- 手动微调：在AI生成的基础上手动调整
Q2: 如何让多个页面保持统一风格？
A:
- 第一次生成时，详细描述风格要求
- 保存这段"风格提示词"
- 后续生成其他页面时，复用这段提示词
- 只修改具体内容部分，保持风格描述不变
Q3: AI生成的组件可以修改吗？
A: 完全可以。如果对生成的页面不满意，您可以选中指定区域，通过对话的方式让AI直接进行修改。此外，AI生成的页面也是标准的CMS页面，您还可以手动进行：
- 拖拽调整组件位置和大小
- 修改组件属性（颜色、字体、样式等）
- 添加或删除组件
- 修改数据绑定
Q4: 生成的页面可以保存为模板吗？
A: 可以。生成并优化好的页面可以保存为模板，供后续项目复用。
Q5: AI支持生成移动端页面吗？
A: 支持。在描述需求时，指定"移动端"或"手机端"，并说明屏幕尺寸，AI会生成适配移动端的页面布局。
Q6: AI支持生成 HMI 操控页面吗？
A: 支持。您可以明确描述需要的功能区和组件类型，例如参数监控、运行监控、系统操作、手动调试、参数设置、报警记录等。AI会根据需求组合显示类、控制类和状态类组件，生成可继续转换和绑定的页面。
Q7: 素材资源怎么放到生成页面里？
A: 在输入需求时，通过"选择素材"选择需要引用的资源即可，例如设备图、3D 模型等。AI会将已选择的素材资源应用到生成页面中。
Q8: HTML 预览和 CMS 页面是什么关系？
A: AI会先生成可预览的页面效果。确认后保存为 CMS 页面时，页面内容会转换为 CMS 原生组件。转换后可以 继续编辑组件属性、调整布局，并配合智能绑定完成变量绑定。
最佳实践
1. 先简单后复杂
第一次使用时，从简单页面开始，熟悉AI的能力和风格后，再尝试复杂页面。这样既能快速上手，也能避免在复杂需求上浪费积分。
2. 建立提示词库
将常用的、效果好的提示词保存下来，建立团队的提示词库，提升团队整体效率。
3. 善用迭代优化
如果一次生成不满意，可以继续与AI对话进行调整。但要注意，每次对话都会消耗20/30积分，建议：
- 尽量在第一次就描述清楚完整需求
- 如果需要调整，一次性说明所有修改点：
"请做以下调整：
1. 把左侧的图表改为仪表盘
2. 增加一个报警信息滚动条
3. 调整为深色主题"
- 避免多次单独修改，节省积分
4. 结合智能绑定
页面生成后，立即使用AI智能绑定完成变量绑定，实现端到端的快速开发。
5. 测试验证
生成的页面在投入生产前，务必在测试环境中验证：
- 检查布局在不同分辨率下的显示效果
- 验证数据绑定是否正确
- 验证控制类组件是否只绑定到正确的写入变量
- 检查引用的素材资源在运行态是否正常显示
- 测试交互功能是否正常