编辑器基础

编辑器是工程配置环境。类似 Siemens TIA Portal 的工程视图或 CodeSys 的 IDE。

界面布局

编辑器分为几个固定区域：

┌──────────┬──────────────────────────┬──────────┬──────────┐
│ 左侧      │                          │ 右侧      │ 最右侧    │
│ Activity  │     中间工作区             │ 属性面板   │ AI 面板   │
│ Bar       │   (页面画布/流程图/代码)    │          │ (默认关闭) │
│ +         │                          │          │          │
│ 可开合    │                          │          │          │
│ View      │                          │          │          │
│ Container │                          │          │          │
├──────────┴──────────────────────────┴──────────┤
│ 底部: Console / Problems                        │
└────────────────────────────────────────────────┘

截图占位：编辑器全貌，标注各区域名称

左侧栏

左侧采用 Activity Bar + 可开合面板 结构。Activity Bar 在左边缘，点击图标切换面板内容。

图标	面板	内容
Resources	资源视图（默认打开）	对象树 + 页面、Graph、脚本和素材的文件导航
Files	完整文件树	app 内所有文件的树形管理
Screen	界面树	当前编辑的页面的控件层级
Git	版本控制	当前 app 的 Git 状态和操作

左侧栏底部固定图标：

• Settings（齿轮）→ 当前 app 的设置（用户管理、变量、查询、i18n 等）

截图占位：Activity Bar 图标说明

资源视图

默认打开。从上到下依次展示：

• Objects：对象树。右键添加设备、查看详情、拖拽排序和拖到流程图。
• Pages：页面文件。内含 Components 分组（组件模板）。
• Graphs：流程图文件。
• Scripts：自定义代码文件。
• Assets：资源文件（图片、模型等）。

右键资源行可以：打开、预览、下载、复制路径、在文件视图中定位、按类型新建。

文件视图

完整的 app 工作区文件浏览器。支持：

• 拖拽本地文件到文件树上传
• 在文件树内拖拽移动文件
• 新建页面/组件/流程图/脚本/普通文件
• 重命名和删除

中间工作区

WorkArea 以 Tab 页方式管理打开的编辑器：

Tab 类型	打开什么	编辑器内容
Page	.qxpage	页面画布，可视化编辑控件
Component	.qxcomponent	组件画布，可视化编辑模板
Graph	.qxgraph	流程图画布
Script	.cs	代码编辑器
Text	其他文本文件	文本编辑器

页面画布操作

操作	方式
添加控件	右键画布空白处 → 选择控件
选中控件	单击
移动控件	拖拽
缩放控件	拖拽控点
多选	框选或 Ctrl+点击
复制/粘贴	Ctrl+C / Ctrl+V
删除	Delete
缩放画布	滚轮或左上角缩放滑块
查看模式	左上角切换，鼠标操作透传给控件（测试 3D、输入框等）

画布背景的网格线和控件选中框由编辑器绘制，不影响运行页效果。

截图占位：页面画布操作说明

流程图画布操作

操作	方式
添加节点	从对象树拖拽设备，或画布空白处右键
连接端口	从端口拖出连线到目标端口
移动节点	拖拽
删除	选中后 Delete
缩放	滚轮
适配视图	自动缩放显示全部节点

Tab 快捷键

操作	macOS	Windows / Linux
关闭当前 Tab	Cmd+W	Ctrl+W 或 Ctrl+F4
切到下一个 Tab	Ctrl+Tab	Ctrl+Tab
切到上一个 Tab	Ctrl+Shift+Tab	Ctrl+Shift+Tab
跳转到第 N 个 Tab	Cmd+1~8	Ctrl+1~8
跳转到最后 Tab	Cmd+9	Ctrl+9

未保存提示

如果打开了未保存的页面或流程图：

• Tab 标题显示圆点指示。
• 关闭 Tab 或离开编辑器时会弹出确认提示。
• 外部文件变动时：没修改的自动刷新，有修改的提示是否从磁盘重载。

刷新

页面和 Graph Tab 的命令栏提供刷新按钮。从磁盘重新加载当前文件内容。有未保存修改时会先确认丢弃。

右侧属性面板

属性面板常驻右侧。根据当前选中的目标显示对应属性：

选中什么	面板显示
页面空白	页面属性（名称、尺寸、权限、method 列表）
控件	控件属性（位置、尺寸、内容、样式、action）
对象树中的设备	设备参数
Graph 节点	节点参数和端口

截图占位：不同选中目标的属性面板

属性面板顶部有固定的 Inspector 标题。没有选中任何目标时，面板内容留白。

面板布局

• 常用短字段（如 X/Y/Z 位置、宽/高）合并显示在一行。
• 复杂列表（表格列配置、下拉选项、3D 模型列表）通过弹窗编辑，不在窄面板中展开。
• 属性面板保持紧凑，不适合展示大量嵌套数据。

AI 面板

最右侧的全局面板，通过 Navbar 的 AI 图标打开或关闭。用于 AI 辅助配置和排错。详见 AI 助手。

底部 Console / Problems

中间工作区下方可以打开底部面板：

标签	内容
Problems	当前 app 的错误和警告列表。每行显示级别、错误码、描述、所在文件
Console	运行日志输出

Problems 没有错误时内容区保持空白（不显示"无问题"之类的占位）。底部面板只占 WorkArea 列的下方，不会跨越到左侧栏或右侧属性面板。

命令栏

每个打开的 Tab 上方有命令栏，提供：

• 保存（Ctrl+S）
• 撤销 / 重做（Ctrl+Z / Ctrl+Shift+Z）
• 刷新（从磁盘重载）
• 构建（Script Tab 中）
• 其他上下文相关操作

编辑器进入和退出

• 从 应用中心 双击应用卡片进入编辑器。
• 点击编辑器左上角返回箭头退出，回到 应用中心。
• 有未保存内容时会确认。

主题

编辑器外壳、流程图区域和页面画布背景网格跟随系统主题切换。运行页始终使用浅色主题，不跟随切换。