# bp_next

**Repository Path**: zhangtaocode/bp_next

## Basic Information

- **Project Name**: bp_next
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-31
- **Last Updated**: 2026-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Blueprint

可视化流程编程系统。前端画布拖拽节点连线，后端解释执行，插件扩展能力。

## 架构

```
前端画布 (bp-next)                后端引擎 (bp-server)
┌──────────────────┐             ┌──────────────────┐
│ 拖拽节点 → 连线   │  WebSocket  │ Interpreter      │
│ Compiler 编译     │ ──────────→ │ 逐节点执行        │
│ 实时回传状态      │ ←────────── │ invoke 人机交互   │
└──────────────────┘  JSON-RPC   └──────────────────┘
                                       ↕
                                 out_plugin/
                                 每个 plugin = 前端UI + 后端handler
```

**核心链路**：画布操作 → Compiler 编译为 CompiledFlow → WebSocket 发送 → Interpreter 按执行计划逐节点调用 handler.active() → 结果通过 bus 实时回传前端。

## 启动

见 [SETUP.md](SETUP.md)。

先后端（端口 8900），再前端。

## 目录结构

```
bp-root/
├── bp-next/          # Vue 3 前端编辑器
│   └── src/
│       ├── components/   # 画布、侧边栏、BaseNode
│       ├── runtime/      # Compiler、PythonBridge
│       └── plugins/      # 插件注册表、加载器
├── bp-server/        # FastAPI 后端执行引擎
│   ├── main.py           # WebSocket RPC 入口
│   ├── handler.py        # NodeHandler 基类、Scope、BusProxy
│   ├── interpreter.py    # 流程解释器
│   └── plugin_loader.py  # 动态加载插件
└── out_plugin/       # 插件目录
    └── <plugin>/
        ├── index.ts      # 前端 PluginDefinition
        ├── index.vue     # 前端节点 UI
        └── handler.py    # 后端 NodeHandler
```

## 插件机制

每个插件由三部分组成：

| 文件 | 职责 |
|------|------|
| `index.ts` | 声明插件 ID、图标、颜色、分类、Vue 组件 |
| `index.vue` | 节点 UI 渲染，可监听 nodeEvents 响应后端事件 |
| `handler.py` | 继承 `NodeHandler`，实现 `active()`/`next()`/`get()` |

前端通过 `import.meta.glob` 自动扫描 `out_plugin/*/index.ts`，后端通过 `plugin_loader` 动态导入 `out_plugin/*/handler.py`。

### NodeHandler 核心方法

```python
class NodeHandler(ABC):
    async def active(self) -> None        # 节点执行逻辑
    async def next(self) -> str | None    # 返回下一个端口 ID
    async def get(self, port_id) -> Any   # 返回输出端口数据
    async def invoke(event_type, data)    # 向前端发起交互，阻塞等待 respond
```

## 通信机制

### emit — 单向推送

后端 → 前端，发完即忘。用于通知、预览、状态更新。

### invoke — 双向交互

后端 → 前端 → 后端，阻塞等待前端 respond 回来才继续执行。用于人工确认、参数补全、文件选择等场景。

```
handler.invoke("saveDialog", {defaultName: "image"})
  ↓ emit busEvent → 前端弹窗
  ↓ await future（死等）
  ↑ 前端调用 respond(invokeId, result)
  ↑ future.set_result() → handler 继续执行
```

WebSocket 断连时，所有 pending invoke 的 Future 被 cancel，handler 收到 CancelledError。

## tag/goto 跳转

编译阶段将 tag/goto 解析为具体的边，运行时无需处理。

- `tag: 'loop-start'` — 定义标签
- `goto: 'loop-start'` — 跳到标签节点（重新执行）
- `goto: 'loop-start:done'` — 跳到标签节点的 done 端口连接的下一个节点

嵌套循环通过标签栈自动匹配。