# workflow

**Repository Path**: faiz-rlw/workflow

## Basic Information

- **Project Name**: workflow
- **Description**: 基于 Electron + Vue 3 的可视化工作流自动化编辑器，面向 LDPlayer（雷电模拟器）的 Android 模拟器自动化场景。采用双进程架构：Electron 前端提供可视化编辑器，Python FastAPI 后端负责模拟器控制、OCR、模板匹配和数据库操作。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-10
- **Last Updated**: 2026-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Electron, Vue, Python, Sqlite, vibecoding

## README

# 工作流编辑器

基于 Electron + Vue 3 的可视化工作流自动化编辑器，面向 LDPlayer（雷电模拟器）的 Android 模拟器自动化场景。采用双进程架构：Electron 前端提供可视化编辑器，Python FastAPI 后端负责模拟器控制、OCR、模板匹配和数据库操作。

## 功能特性

- **可视化流程编辑** — 拖拽式节点编排，支持 13 种节点类型（流程控制、条件判断、循环、并行等）
- **模拟器操作** — 点击、滑动、长按，支持固定坐标或上游检测位置
- **图像识别** — OCR 文字识别、模板图像匹配、多点颜色匹配
- **录制回放** — 录制模拟器操作并回放，支持倍速和循环
- **配置管理** — JSON 配置文件管理，支持动态引用和静态复制到工作流
- **资源管理** — 图片资源上传、浏览、文件夹组织
- **实时执行** — WebSocket 推送执行状态，支持暂停/恢复/停止
- **暗色主题** — 全局暗色 UI，中文界面

## 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 框架 | Electron + Vue 3 | Electron 39 / Vue 3.5 |
| 构建 | electron-vite + Vite 7 | — |
| 语言 | TypeScript (strict) | 5.9 |
| UI | Ant Design Vue 4 | 暗色主题 + 中文 |
| 流程图 | Vue Flow | core + background + controls + minimap |
| 状态管理 | Pinia 3 | Composition API |
| 路由 | Vue Router 5 | Hash History |
| 后端 | Python + FastAPI | — |
| 数据库 | SQLite (WAL) | — |
| OCR | RapidOCR (ONNX Runtime) / PaddleOCR | — |
| 图像处理 | OpenCV | — |

## 快速开始

### 环境要求

- Node.js >= 18
- pnpm
- Python 3.10+（含 `pywin32`、`fastapi`、`uvicorn`、`opencv-python` 等依赖）
- Windows（后端使用 PrintWindow/PostMessage API，仅支持 Windows）

### 安装与运行

```bash
# 安装前端依赖
pnpm install

# 开发模式（自动启动 Python 后端）
pnpm dev

# 单独启动 Python 后端
pnpm dev:backend

# 类型检查
pnpm typecheck

# 代码检查与格式化
pnpm lint
pnpm format

# 构建
pnpm build

# 打包
pnpm build:win
pnpm build:mac
pnpm build:linux
```

### Python 后端

```bash
cd python
pip install -r requirements.txt
python main.py
```

Python 测试：

```bash
cd python && pytest
```

## 项目结构

```
workflow/
├── src/
│   ├── main/                    # Electron 主进程
│   │   └── index.ts             # 窗口创建、系统托盘、启动 Python 后端
│   ├── preload/                 # 预加载脚本（IPC 桥接）
│   └── renderer/                # 渲染进程（Vue 3 前端）
│       ├── index.html           # SPA 入口
│       └── src/
│           ├── main.ts          # 应用启动（Pinia、Ant Design、Router）
│           ├── App.vue          # 根组件（暗色主题、中文国际化）
│           ├── assets/          # 样式（CSS 变量、暗色主题）和图片资源
│           ├── components/
│           │   ├── canvas/      # 画布组件（WorkflowCanvas、右键菜单、配置选择器）
│           │   ├── layout/      # 布局组件（顶部导航、编辑器工具栏）
│           │   ├── nodes/       # 13 个节点组件 + BaseNode 通用外壳
│           │   ├── panels/      # 属性面板 + 10 个类型专属表单
│           │   └── sidebar/     # 节点面板（拖拽来源）
│           ├── composables/     # 组合式函数（API 客户端、拖拽、导入导出）
│           ├── router/          # Vue Router（5 个路由）
│           ├── stores/          # Pinia 状态管理（4 个 Store）
│           ├── types/           # TypeScript 类型定义（工作流类型、节点注册表）
│           └── views/           # 页面视图（5 个页面）
├── python/                      # Python FastAPI 后端
│   ├── main.py                  # 服务入口
│   ├── api/routes.py            # REST API 端点
│   ├── engine/executor.py       # 工作流执行引擎
│   ├── core/                    # 核心模块（模拟器控制、OCR、模板匹配、数据库）
│   ├── config.yaml              # 后端配置
│   └── data/                    # 运行时数据（SQLite、截图、日志、模板）
├── docs/                        # 文档
│   └── workflow-usage.md        # 工作流使用说明（JSON 格式、节点类型、API 示例）
├── CLAUDE.md                    # 开发指南
└── package.json
```

## 页面导航

应用包含 5 个页面，通过顶部导航切换：

| 页面 | 路由 | 功能 |
|------|------|------|
| 工作流编辑 | `/` | 可视化拖拽编辑器（节点面板 + 画布 + 属性面板） |
| 录制管理 | `/recordings` | 录制模拟器操作、查看详情、回放 |
| 配置管理 | `/config` | JSON 配置文件增删改查、文件夹管理 |
| 资源管理 | `/resources` | 图片资源上传、浏览、删除 |
| 系统设置 | `/settings` | 模拟器路径、存储目录配置 |

## 节点类型

工作流支持 13 种节点，分属 3 个类别：

### 流程节点

| 节点 | 类型标识 | 说明 |
|------|----------|------|
| 开始 | `start` | 工作流起点，支持手动/自动触发 |
| 结束 | `end` | 工作流终点，输出变量 |
| 配置引用 | `configRef` | 引用外部 JSON 配置文件，支持动态链接和静态复制 |

### 控制节点

| 节点 | 类型标识 | 说明 |
|------|----------|------|
| 条件判断 | `condition` | 根据表达式分支，输出 True/False 两条边 |
| 循环 | `loop` | 支持 for/while/forEach 循环，`body` 输出进入循环体，`done` 输出完成后继续 |
| 并行 | `parallel` | 并行执行多个分支 |

### 操作节点

| 节点 | 类型标识 | 说明 |
|------|----------|------|
| HTTP 请求 | `httpRequest` | 发送 GET/POST/PUT/DELETE 请求 |
| 模拟器操作 | `emulatorAction` | 点击、滑动、长按模拟器画面 |
| 截图 | `screenshot` | 截取模拟器画面，支持全屏或指定区域 |
| OCR 识别 | `ocrCheck` | OCR 文字识别，支持包含/精确/正则匹配，输出匹配/不匹配分支 |
| 模板匹配 | `templateMatch` | 模板图像匹配，支持多目标，输出匹配/不匹配分支 |
| 多点找色 | `colorMatch` | 多点颜色匹配，可设置容差，输出匹配/不匹配分支 |
| 录制回放 | `recordingPlayback` | 回放录制的操作序列，支持倍速和循环次数 |

## 前端架构

### 编辑器布局

工作流编辑页面采用三栏布局：

- **左侧** — `NodePalette`（220px）：按类别分组的可拖拽节点目录
- **中间** — `WorkflowCanvas`：Vue Flow 画布，支持网格吸附（16px）、平滑连线、键盘删除、右键菜单插入配置
- **右侧** — `PropertiesPanel`（360px）：抽屉式属性面板，根据选中节点/边动态渲染表单

### 状态管理

| Store | 文件 | 职责 |
|-------|------|------|
| `useWorkflowStore` | `stores/workflow.ts` | 画布节点/边管理、选择状态、导入导出、属性编辑 |
| `useEmulatorStore` | `stores/emulator.ts` | 模拟器列表、工作流 CRUD、执行控制、WebSocket 状态、录制 |
| `useFileManagerStore` | `stores/fileManager.ts` | 配置文件/图片资源/录制文件的增删改查和文件夹导航 |
| `useConfigRefStore` | `stores/configRef.ts` | 配置引用节点的展开/折叠/刷新，ID 重映射 |

### 节点系统

每个节点类型由三部分组成：

1. **类型定义** — `types/workflow.ts` 中定义数据接口，`types/node-registry.ts` 中注册标签、图标、颜色、端口和默认数据
2. **节点组件** — `components/nodes/` 中创建 `.vue` 组件（基于 `BaseNode` 通用外壳）
3. **属性表单** — `components/panels/forms/` 中创建类型专属表单组件

所有节点共享 `BaseNode.vue`（彩色头部 + 动态 Handle），具体节点组件为轻量封装。`ConfigRefNode` 例外，它自行管理 Handle 和展开/折叠态。

### 前后端通信

- **REST API**：`http://127.0.0.1:5200`（健康检查、模拟器、工作流、执行、模板）
- **WebSocket**：`ws://127.0.0.1:5200/ws/status`（实时推送 `node_started`、`node_completed`、`workflow_completed` 事件）
- **Electron IPC**：`window.api.getPythonStatus`、`window.api.restartPython`、`window.api.selectDirectory` 等

## 后端架构

Python FastAPI 后端（`http://127.0.0.1:5200`）提供以下核心模块：

| 模块 | 文件 | 职责 |
|------|------|------|
| API 路由 | `api/routes.py` | `/api/health`、`/api/emulators`、`/api/workflows`、`/api/workflow-executions`、`/api/templates` |
| 执行引擎 | `engine/executor.py` | `WorkflowExecutor`：图遍历引擎，按边从起始节点执行，支持暂停/停止 |
| 模拟器控制 | `core/emulator.py` | `EmulatorInstance`：双模式控制（Windows PostMessage 优先，ADB 备选） |
| LDPlayer 接口 | `core/ldplayer.py` | LDPlayer 9 CLI 封装（`ldconsole.exe`） |
| 坐标处理 | `core/coords.py` | `ScreenshotInfo`：截图分辨率检测 |
| 数据库 | `core/database.py` | 线程安全 SQLite（WAL 模式），4 张表 |
| 模板匹配 | `core/recognize.py` | OpenCV 模板匹配和颜色点查找 |
| OCR | `core/ocr.py` | RapidOCR（ONNX Runtime）/ PaddleOCR 抽象层 |

## 配置

- **后端配置**：`python/config.yaml`（服务器地址端口、数据库路径、LDPlayer 安装路径、OCR 引擎选择）
- **前端设置**：系统设置页面（模拟器安装路径、录制/配置/资源存储目录）
- **运行时数据**：`python/data/`（SQLite 数据库、截图、日志、模板）

## 开发指南

### 代码风格

- Prettier：单引号、无分号、100 字符行宽、无尾逗号
- 编辑器：2 空格缩进、UTF-8、LF 换行
- Vue SFC 使用 `<script lang="ts">` + Composition API
- TypeScript strict 模式

### 新增节点类型

1. 在 `types/workflow.ts` 中添加类型字符串到 `WorkflowNodeType` 联合类型，创建数据接口，添加到 `NodeDataMap`
2. 在 `types/node-registry.ts` 的 `nodeTypeRegistry` 数组中注册（标签、图标、颜色、端口、默认数据）
3. 在 `components/nodes/` 中创建节点组件（基于 `BaseNode` 的轻量封装）
4. 在 `WorkflowCanvas.vue` 中通过 `<template #node-{type}>` 插槽注册
5. （可选）在 `components/panels/forms/` 中创建属性表单，在 `PropertiesPanel.vue` 中注册
6. 在 `python/engine/executor.py` 中添加执行处理器方法

## License

Private