跳到主要内容

开发后端元素可视化编辑器

当我们完成了新增后端Type元素后，虽然可以创建实例并运行，但配置参数需要手动修改文件，这对不熟悉代码的业务开发者来说并不友好。

本文将介绍如何为钉钉机器人开发可视化配置编辑器，实现在JitAi开发工具中像官方元素一样的图形化配置体验。

效果预览​

编辑器效果

编辑器架构​

元素层次fullName主要职责
编辑器元素imRobots.dingTalkStreamType.Editortype指向editors.React，为钉钉机器人提供可视化配置界面
目标元素imRobots.dingTalkStreamType被编辑的目标后端Type元素，已在前面章节完成

编辑器目录结构​

在dingTalkStreamType下新增Editor子目录
imRobots/
└── dingTalkStreamType/              # 后端Type元素（已完成）
    ├── e.json                       # Type元素定义
    ├── config.json                  # 配置模板
    ├── loader.py                    # 加载器实现
    ├── client_manager.py           # 客户端管理
    ├── handler.py                  # 消息处理器
    └── Editor/                     # 编辑器目录（新增）
        ├── e.json                  # 编辑器元素定义
        ├── index.ts               # 编辑器入口文件
        ├── Editor.tsx             # 编辑器实现文件
        ├── Editor.style.ts        # 样式文件
        └── utils.ts               # 工具函数

操作指南​

创建编辑器目录​

在dingTalkStreamType目录下创建Editor子目录：

# 在dingTalkStreamType目录下执行
mkdir -p Editor

安装依赖​

在项目的package.json中添加Monaco编辑器依赖：

package.json
{
  "dependencies": {
    "@monaco-editor/react": "^4.7.0"
  }
}

实现编辑器文件​

创建编辑器元素定义文件 Editor/e.json：

编辑器也是元素

在JitAi中，编辑器本身也是一个元素，拥有自己的e.json定义文件。

Editor/e.json
{
  "frontBundleEntry": "./index.ts",
  "outputName": "index",
  "tag": "editor",
  "targetType": [
    "imRobots.dingTalkStreamType"
  ],
  "title": "钉钉机器人配置编辑器",
  "type": "editors.React"
}

编辑器元素配置说明：

  • title: 编辑器元素显示名称
  • type: 固定为editors.React，表示React编辑器元素
  • tag: 固定为editor，表示后端元素编辑器
  • targetType: 目标后端元素的fullName
  • frontBundleEntry: 编辑器入口文件

定制您的编辑器​

修改元素配置​

在 Editor/e.json 中，将 targetType 改为您的后端元素：

{
  "targetType": ["yourOrg.YourBackendType"],
  "title": "您的元素编辑器"
}

定义配置结构​

在 Editor.tsx 中，修改配置接口和表单：

// 修改配置接口
interface YourConfig {
    apiKey?: string;
    endpoint?: string;
    timeout?: number;
}

// 修改状态类型
const [config, setConfig] = useState<YourConfig>({});

// 修改表单字段
<Form.Item label="API Key" required>
    <Input
        value={config.apiKey || ''}
        onChange={(e) => updateConfig('apiKey', e.target.value)}
        placeholder="请输入API Key"
    />
</Form.Item>

// 修改验证逻辑
if (!config.apiKey || !config.endpoint) {
    message.error('请填写完整配置');
    return false;
}

测试​

使编辑器生效​

  1. 清理缓存：删除应用目录中的dist目录
  2. 重启服务：重启桌面端
  3. 触发打包：访问应用页面，系统自动重新打包

验证编辑器功能​

  1. 创建元素实例：在JitAi开发工具中创建钉钉机器人元素实例
  2. 打开编辑器：点击元素实例进入编辑器
  3. 切换模式：点击配置/代码图标，验证模式切换
  4. 修改配置：尝试在GUI模式修改配置，观察代码模式是否同步
  5. 保存验证：保存后重新打开，确认配置已持久化

常见问题排查​

  • 编辑器不显示：检查targetType中的后端元素名称是否正确
  • Monaco编辑器不显示：检查@monaco-editor/react依赖是否安装
  • 保存失败：查看浏览器控制台，检查API调用是否正常

总结​

为后端元素开发可视化编辑器的核心步骤：

  1. 创建Editor目录 + 配置编辑器元素定义文件e.json（type: "editors.React"）
  2. 实现Editor组件：支持GUI/代码双模式 + 文件管理 + 双向同步
  3. 定制配置结构：根据后端元素需求调整配置接口和表单
  4. 测试验证：确保编辑器在JitAi中正常工作

关键要点：

  • 导出名Editor不可更改
  • targetType必须正确指向后端元素
  • 使用getElementResource和saveElementResource API进行文件管理
  • GUI模式与代码模式需要保持数据同步