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