UI 使用指南

界面总览

ToolBank 采用多文档界面（MDI）设计，主要由以下区域组成：

主界面布局

┌─────────────────────────────────────────────────────────────┐
│  菜单栏 │ 工具栏 │ 状态指示                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                                                   │   │
│  │              程序编辑器 / 视图区                 │   │
│  │                                                   │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  属性面板 │ 参数配置                              │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  日志输出 / 运行信息                              │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

主要功能

程序管理

功能	快捷键	说明
新建程序	Ctrl+N	创建新的程序工程
加载程序	Ctrl+O	打开已保存的程序
保存程序	Ctrl+S	保存当前程序
另存为	Ctrl+Shift+S	保存到新位置
关闭程序	Ctrl+W	关闭当前程序

程序运行

功能	快捷键	说明
运行一次	F5	执行主程序一次
重复运行	F6	循环执行主程序
运行当前算子	F9	执行光标处的算子
单步运行	F10	逐步执行每个算子
暂停运行	Pause	暂停当前运行
停止运行	Esc	终止运行

编辑操作

功能	快捷键	说明
添加算子	Ctrl+T	打开工具选择器
删除算子	Delete	删除选中的算子
复制算子	Ctrl+C	复制选中的算子
粘贴算子	Ctrl+V	粘贴剪贴板中的算子
启用/禁用	Space	切换算子启用状态

程序编辑器

Job 标签页

程序由多个 Job 组成，每个 Job 是一个独立的执行流程。

标签页操作

• 标签页右键菜单：
  • 钉住/取消钉住
  • 关闭标签
  • 增加 Job
  • 删除 Job
  • 重命名
  • 切换到图表/表格视图

工具列表

每个 Job 内包含有序的算子列表。

算子行结构

┌──────────────────────────────────────────────────────┐
│ ▼ │ [启用] │ 算子名称 │ 输入值 │ 输出值 │ 耗时 │   │
├──────────────────────────────────────────────────────┤
│   │  ✓     │ LoadImage │ "image.png" │ Image │ 5ms │ │
│   │  ✓     │ GaussianBlur │ Image → │ BlurImg │ 3ms │ │
│ ▼ │  ✓     │ IF (count > 0) │ count, 0, > │ - │ 1ms │ │
│ ▼  ✓  │ ├─ Job_Pass (子流程) │ │ │ │
│   │  ✓     │ SaveImage │ BlurImg │ - │ 2ms │   │
└──────────────────────────────────────────────────────┘

添加算子

1. 点击算子列表末尾的 "+" 按钮
2. 在工具选择器中选择算子
3. 配置输入输出参数
4. 按 Enter 确认

算子参数绑定

控制流结构

IF/ELSE

┌─ IF (condition) ────────────────┐
│  │ 条件算子...                   │
│  ├─ THEN ─────────────────────┐ │
│  │ 真值分支算子...             │ │
│  └─ ELSE ─────────────────────┐ │
│  │ 假值分支算子...             │ │
│  └─ END IF                     │ │
└───────────────────────────────────┘

LOOP

┌─ LOOP (count, 10) ─────────────┐
│  循环体算子...                  │
│  └─ END LOOP                    │
└──────────────────────────────────┘

工具选择器

分类浏览

┌─────────────────────────────────────┐
│  🔍 搜索: ________________________│
├─────────────────────────────────────┤
│  📁 图像处理                        │
│    ├── GaussianBlur                 │
│    ├── MedianBlur                   │
│    ├── Threshold                    │
│    └── MorphologyEx                 │
│  📁 区域操作                        │
│    ├── FindContours                 │
│    ├── BoundingRect                 │
│    └── MinAreaRect                  │
│  📁 数学运算                        │
│    ├── Add                          │
│    ├── Subtract                     │
│    └── Multiply                     │
│  📁 变量定义                        │
│    ├── DefineInteger                │
│    ├── DefineDouble                 │
│    └── DefineString                 │
│  📁 控制流                          │
│    ├── IF ... ELSE                  │
│    ├── LOOP                         │
│    └── CALL Job                     │
│  📁 文件读写                        │
│    ├── LoadImage                    │
│    └── SaveImage                    │
└─────────────────────────────────────┘

搜索功能

• 支持按名称快速查找
• 支持模糊匹配
• 实时过滤结果

变量管理

变量类型

变量操作

操作	说明
查看变量	在变量面板浏览所有变量
添加变量	点击 "+" 创建新变量
重命名	右键变量 → 重命名
删除	右键变量 → 删除
查看值	双击变量查看详细值

变量绑定

算子的输入参数可以绑定：

• 常量值：直接输入数值或字符串
• 已有变量：引用其他算子的输出

算子A 输出: ImageVar
    ↓
算子B 输入: ImageVar  ← 绑定到算子A的输出

主题与外观

内置主题

主题	说明
Light	浅色主题
Dark	深色主题
Blue	蓝色主题
BlueWhite	蓝白主题
DeepBlue	深蓝主题

切换主题

1. 打开 设置 → 主题
2. 选择喜欢的主题
3. 界面立即更新

快捷操作

上下文菜单

在程序编辑器中右键点击：

┌──────────────────────────────┐
│ ▶ 运行到此算子               │
│ ⏸ 在算子处设置断点           │
│ ─────────────────────────── │
│ ✏️ 编辑参数                  │
│ 📋 复制算子                  │
│ 📌 粘贴算子                  │
│ ─────────────────────────── │
│ 🔼 上移                     │
│ 🔽 下移                     │
│ ─────────────────────────── │
│ ❌ 删除算子                  │
│ ⚙️ 属性                     │
└──────────────────────────────┘

拖拽操作

• 拖拽算子：调整执行顺序
• 拖拽变量：绑定到算子参数
• 跨 Job 复制：复制算子到其他 Job

状态栏

底部状态栏显示：

• 当前程序状态（就绪/运行中/暂停）
• 运行耗时统计
• 已加载插件数量
• 主题切换按钮

日志面板

日志级别

级别	颜色	说明
INFO	白色	一般信息
WARNING	黄色	警告信息
ERROR	红色	错误信息
SUCCESS	绿色	成功提示

日志操作

• 清除日志：清空当前日志
• 保存日志：导出为文件
• 过滤：按级别过滤显示

程序保存格式

程序以 JSON 格式保存：

{
  "name": "MyProgram",
  "description": "示例程序",
  "version": "1.0",
  "jobs": [
    {
      "name": "Main",
      "tools": [
        {
          "name": "LoadImage",
          "category": 0,
          "inputs": [
            {"name": "Path", "runtimeValue": "image.png"}
          ],
          "outputs": [
            {"name": "Image", "runtimeValue": "InputImage"}
          ]
        }
      ]
    }
  ]
}