# WorkBuddy 实战：一句需求，6轮迭代——AI 帮我造出一个带 and/or 逻辑的可视化规则编辑器

## 一、背景

我做医疗行业系统，负责规则引擎相关模块。药品规则很复杂——"新生儿禁用 + 肾功能不全剂量减半"这种多条件嵌套规则，传统表单根本写不清楚。团队一直想要一个**可视化规则编辑器**：可拖拽、可嵌套、支持 and/or/union 逻辑组合。

之前用 jQuery 搭过基础版本，能添加条件和删除，但缺少"给一组条件套一层父级逻辑"的能力。用户改规则时只能删掉重建，效率极低。

周末我用 WorkBuddy 开工，结果出乎意料：**一句需求开局，AI 跟我协作 6 轮，把核心功能全闭环了。**

---

## 二、需求

给已有的层级规则编辑器加上两个能力：

1. **插入父级条件组**：选中多个同级条件 → 一键包一层"并且/或者"，生成嵌套 JSON
2. **智能删除保护**：删除父节点时检查是否还有子节点，有则阻止删除，必须先删子

表面看是两个功能，但规则编辑器的渲染依赖 **SVG 路径 + 绝对定位**，任何插入/删除操作都会影响整棵树的坐标。改一组坐标，连带几十个元素都要同步位移——这就是为什么它容易出 bug。

---

## 三、技术栈

- **UI**：HTML + CSS + jQuery
- **组件库**：EasyUI（combobox, messager）
- **连线**：原生 SVG path
- **数据**：JSON（嵌套 criterion 数组 + junctionType）
- **后端**：Caché ObjectScript（M语言）
- **AI 工具**：WorkBuddy（桌面端）

---

## 四、核心设计：JSON → 视觉树的映射

规则 JSON 结构长这样：

```json
{
  "junctionType": "and",
  "criterions": [
    { "op": "Equals", "left": {...}, "value": {...} },
    {
      "junctionType": "or",
      "criterions": [
        { "op": "Equals", "left": {...}, "value": {...} },
        { "op": "GreaterThen", "left": {...}, "value": {...} }
      ]
    }
  ]
}
```

编辑器用**递归遍历**把这段 JSON 渲染成视觉树：

- **逻辑节点**：and/or/union 下拉框 → 用 EasyUI combobox 渲染，id 格式为 `{层级}Box{序号}`，如 `2Box3`
- **条件节点**：变量+操作符+值 → 用 span 绝对定位，id 格式为 `{层级}P{起点}T{终点}`，如 `1P1T2`
- **连线**：SVG path，id 格式为 `{层级}P{终点}`，data 属性存路径 `{层级}P{起始Y}P{结束Y}`

核心渲染函数负责将每个条件节点定位到计算好的坐标上。

---

## 五、WorkBuddy 协作实录

### 第1轮：开局

我把模板文件和 JS 逻辑文件拖进 WorkBuddy，说：

> "帮我在规则编辑器的下拉框菜单里加一个'添加父级条件'按钮，点完后给当前选中的条件包一层 and/or 逻辑"

WorkBuddy 先读了两个文件的完整内容，理解了渲染流程，然后给出方案：在下拉菜单 UI 中加选项，在 JS 中新增处理函数。

### 第2轮：实现核心逻辑

AI 写了核心逻辑：

1. 读取当前逻辑节点的 junctionType 和路径信息
2. 在 JSON 中生成新的父节点包裹当前节点
3. 调用位移函数把下方所有元素下移一行
4. 画新的 SVG 连线
5. 渲染新的逻辑下拉框

### 第3~4轮：截屏反馈，修正坐标 Bug

我跑起来测试，截了张图——父节点插入了，但位置偏了 30px。WorkBuddy 秒定位：位移函数里用的 30px 是我老版本的间距，后来改成了 45px。

```javascript
// 修正前
seatT = (parseInt(top) + 30) + "px";  // 旧间距

// 修正后
seatT = (parseInt(top) + 45) + "px";  // 新间距，保持一致
```

类似的问题还有：SVG path 的 M/C 坐标没同步更新、删除逻辑框后高度没正确缩减。AI 每轮都精准定位，改一处、测一处。

### 第5轮：智能删除保护

最初删除逻辑直接删 DOM 元素，导致"删了父节点但子节点还在"的野指针问题。WorkBuddy 加了**卫语句**：

```javascript
if(ret.value=="del"){
  if(id=="1Box1"){ return }  // 根节点不能删
  // 检查是否有子路径
  if($("#PathCon").find("[data^="+x1+"P"+y1+"]").size()){
    $.messager.alert("提示:","请先删除当前连接下子元素！","info");
    return;
  }
  // 检查是否有下级逻辑框
  var bOXId = (parseInt(x1)+1)+"Box"+y1;
  if($("#PathLog").find("#"+bOXId).size() > 0){
    $.messager.alert("提示:","请先删除当前连接下子元素！","info");
    return;
  }
  deleteLogic(x1, y1, id);
  resetHtml(x1, y1); // 重新计算高度
}
```

### 第6轮：收尾验证

最后跑了一遍完整闭环：新建规则 → 加3条条件 → 给其中2条包"或者"父级 → 再加1条 → 切换逻辑为"并且" → 删除 → 保存。全部通过。

---

## 六、最终效果

一个能直接落地生产环境的层级规则编辑器：

- 支持无限层级嵌套的 and/or/union 逻辑
- 可视化 SVG 连线自动更新
- 添加条件 / 添加联合条件 / 添加父级条件 / 删除 四个操作
- 删除保护（子节点未清不允许删父）
- 支持变量选择、操作符选择、值类型选择（输入值 / 带单位 / 上下限 / 数据集选择）
- 支持 If/Then/Else 三段式规则动作

---

## 七、我的体会

### 1. 截图 > 文字

WorkBuddy 看图找 Bug 比语言描述快 10 倍。坐标偏移 30px、"path 断了"这种问题，直接截个图扔进去，AI 能定位到代码行号。

### 2. 给 AI 完整的上下文

第一轮我把模板和 JS 两个文件都拖进去了，AI 理解了 SVG Path 的坐标计算规则，后续修改才不走偏。如果只把 JS 扔进去，它大概率会跳过 SVG 相关的逻辑。

### 3. 迭代式开发很爽

不是一次说清楚所有需求，而是：做一步 → 看效果 → 截图反馈 → 改 bug → 再加新功能。跟结对编程的体验高度一致。

### 4. 代码质量比预期的好

WorkBuddy 写的函数注释清晰、卫语句完整、缩进规矩。除了坐标值需要我截图纠正外，主体逻辑几乎没返工。

---

## 八、写在最后

这个项目是我在实际生产环境中使用的规则编辑器。从"加一个按钮"开始，6 轮迭代做完了一个完整的层级条件节点编辑器。如果纯手写，估计要 2~3 天；用 WorkBuddy 协作，实际耗时不到 3 小时。

AI 不会取代开发者，但会取代那个独自面对 2000 行 jQuery + SVG + JSON递归的下午。

---

*本文使用 WorkBuddy 辅助完成，项目源码基于实际生产环境中的规则编辑器。*


我做医疗行业系统，负责规则引擎相关模块。药品规则很复杂——"新生儿禁用 + 肾功能不全剂量减半"这种多条件嵌套规则，传统表单根本写不清楚。团队一直想要一个可视化规则编辑器：可拖拽、可嵌套、支持 and/or/union 逻辑组合。

WorkBuddy 实战：一句需求，6轮迭代——AI 帮我造出一个带 and/or 逻辑的可视化规则编辑器

用 WorkBuddy AI 助手协作开发，一句需求开局，6轮迭代完成带 and/or 逻辑的可视化规则编辑器。实战复盘：截图反馈、上下文传递、迭代式开发的效率提升。

架构设计

医疗行业系统开发可视化规则编辑器，支持and/or逻辑嵌套和SVG连线自动更新。通过WorkBuddy AI协作6轮迭代，实现智能删除保护、父级条件组插入等功能，3小时完成原本需2-3天的工作量。编辑器支持无限层级嵌套、变量选择和条件删除保护，可直接落地生产环境。

WorkBuddy 

jQuery

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

WorkBuddy 实战：一句需求，6轮迭代——AI 帮我造出一个带 and/or 逻辑的可视化规则编辑器-腾讯云开发者社区-腾讯云

WorkBuddy 实战：一句需求，6轮迭代——AI 帮我造出一个带 and/or 逻辑的可视化规则编辑器

WorkBuddy 实战：一句需求，6轮迭代——AI 帮我造出一个带 and/or 逻辑的可视化规则编辑器

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐