# 通用微服务可视化数据流工程

**Repository Path**: ping1991/Universal-Microservices-Visual-Data-Flow-Engineering

## Basic Information

- **Project Name**: 通用微服务可视化数据流工程
- **Description**: 基于 War3 编辑器编程原理（事件 → 触发器 → 动作链）的微服务数据流可视化平台。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-11
- **Last Updated**: 2026-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 通用微服务可视化数据流工程

> **Universal Microservices Visual Data Flow Engineering**

基于 **War3 编辑器编程原理**（事件 → 触发器 → 动作链）的微服务数据流可视化平台。用于定义、编排和可视化微服务架构中的事件流转、数据操作与角色权限关系。

---

## ✨ 核心特性

- 🎯 **事件管理** — 全局事件注册表，独立配置事件参数 JSON Schema，支持启用/禁用
- 🔗 **触发器编排** — 事件 + 有序动作链，支持拖拽排序、变量引用（`${event.xx}` / `${stepN.xx}`）
- 🗺️ **数据流可视化** — 基于 AntV G6 的有向图，支持按**事件/角色/全局**三种视角查看数据流
- 🔍 **数据节点反查** — 选择一张数据库表，追溯所有涉及该表的事件、触发器和操作链路
- 👤 **角色视角** — 按业务角色查看其所有可触发事件及完整数据流路径
- 🗄️ **数据库元数据同步** — 从 MySQL `information_schema` 自动读取表和字段信息，一键同步为数据节点

---

## 🛠️ 技术栈

| 层次 | 技术 | 说明 |
|------|------|------|
| **前端框架** | React 18 + TypeScript | 类型安全，组件化开发 |
| **UI 组件库** | Ant Design 5 + @ant-design/icons | 企业级组件，表单/表格功能完善 |
| **图可视化** | AntV G6 v4 | 有向图渲染，dagre 横向布局 |
| **状态管理** | Zustand 5 | 轻量级状态管理 |
| **路由** | React Router DOM 6 | 客户端路由 |
| **HTTP 请求** | Axios | API 调用 |
| **构建工具** | Vite 5 | 极速 HMR |
| **后端框架** | Node.js + Express 4 | RESTful API 服务 |
| **ORM** | Prisma 5 | 类型安全的数据库操作 |
| **数据库** | MySQL 8.0+ | 关系型数据库，支持 JSON 字段 |

---

## 🚀 快速开始

### 环境要求

- Node.js >= 18
- MySQL >= 8.0

### 1. 克隆项目

```bash
git clone https://gitee.com/ping1991/Universal-Microservices-Visual-Data-Flow-Engineering.git
cd Universal-Microservices-Visual-Data-Flow-Engineering
```

### 2. 安装依赖

```bash
npm install
cd backend && npm install
cd ../frontend && npm install
cd ..
```

### 3. 配置数据库

修改 `backend/.env` 中的数据库连接信息：

```env
DATABASE_URL="mysql://root:password@localhost:3306/dataflow_engine"
PORT=3001
```

### 4. 初始化数据库

```bash
cd backend
npx prisma db push        # 创建表结构
npm run db:seed           # 导入示例数据（电商场景）
```

### 5. 启动开发服务

```bash
# 根目录下同时启动前后端
npm run dev

# 或分别启动
npm run dev:backend       # 后端 → http://localhost:3001
npm run dev:frontend      # 前端 → http://localhost:5173
```

打开浏览器访问 **http://localhost:5173** 即可查看平台。

---

## 📖 核心概念

借鉴 War3 编辑器的触发器体系，定义以下核心概念：

```
┌─────────────────────────────────────────────────────┐
│                    触发器 (Trigger)                   │
│  ┌───────────┐    ┌───────────┐    ┌───────────┐    │
│  │ 事件(Event)│───▶│ 条件(Filter)│───▶│ 动作(Action)│   │
│  │  何时触发  │    │  是否执行  │    │  做什么    │    │
│  └───────────┘    └───────────┘    └───────────┘    │
└─────────────────────────────────────────────────────┘
```

| 概念 | 说明 | War3 对应 |
|------|------|-----------|
| **事件 (Event)** | 系统中可被触发的原子事件，全局预配置 | 地图事件（单位死亡、玩家聊天等） |
| **触发器 (Trigger)** | 绑定一个事件 + N 个有序动作的执行链 | 触发器（T） |
| **动作 (Action)** | 一个原子操作，按顺序串联执行 | 动作（创建单位、播放声音等） |
| **数据节点 (DataNode)** | 数据库表 / 微服务接口，代表数据的落脚点 | 变量 / 单位组 |
| **角色 (Role)** | 触发事件的来源主体，用于按视角追溯数据流 | 玩家 / 势力 |

### 动作类型

| 动作类型 | 说明 | 配置项 |
|---------|------|--------|
| **DB_QUERY** | 查询数据库表 | 目标表、查询字段、WHERE 条件、输出变量名 |
| **DB_INSERT** | 插入数据到表 | 目标表、字段映射（可引用变量） |
| **DB_UPDATE** | 更新表数据 | 目标表、SET 字段映射、WHERE 条件 |
| **DB_DELETE** | 删除表数据 | 目标表、WHERE 条件 |
| **API_CALL** | 调用微服务接口 | 目标服务、接口路径、请求参数 |
| **EMIT_EVENT** | 触发另一个事件 | 目标事件 ID、事件参数映射 |

---

## 📁 项目结构

```
├── backend/                         # 后端 (Node.js + Express + Prisma)
│   ├── prisma/
│   │   ├── schema.prisma            # 数据模型（8 张核心表）
│   │   └── seed.ts                  # 种子数据（电商场景）
│   └── src/
│       ├── index.ts                 # Express 入口
│       └── routes/
│           ├── events.ts            # 事件管理 API
│           ├── triggers.ts          # 触发器管理 API
│           ├── actions.ts           # 动作管理 API
│           ├── dataflow.ts          # 数据流图构建 API（核心）
│           ├── dataNodes.ts         # 数据节点管理 API
│           ├── dataSources.ts       # 数据源管理 + 同步表
│           ├── roles.ts             # 角色管理 API
│           ├── meta.ts              # 数据库元数据读取
│           └── microServices.ts     # 微服务管理 API
├── frontend/                        # 前端 (React + TypeScript + Ant Design + G6)
│   └── src/
│       ├── components/
│       │   └── MainLayout.tsx       # 主布局（侧边栏导航）
│       ├── pages/
│       │   ├── DataFlowGraph.tsx    # 数据流可视化总览（G6 有向图）
│       │   ├── EventManage.tsx      # 事件管理（CRUD + Schema 编辑）
│       │   ├── TriggerEditor.tsx    # 触发器编排（动作链 + 排序）
│       │   ├── DataNodeView.tsx     # 服务与数据源管理（3 个 Tab）
│       │   └── RoleView.tsx         # 角色视角（角色 + 数据流图）
│       ├── services/
│       │   └── api.ts              # Axios API 调用层
│       └── types/
│           └── index.ts            # TypeScript 类型定义
├── docs/
│   └── PRD.md                      # 需求分析与产品设计文档
└── package.json                     # 根项目配置（concurrently 并行启动）
```

---

## 🗃️ 数据模型

| 模型 | 表名 | 说明 |
|------|------|------|
| **SysEvent** | `sys_event` | 事件注册表，含名称、来源服务、payloadSchema |
| **SysTrigger** | `sys_trigger` | 触发器，绑定事件 + 有序动作链 |
| **SysAction** | `sys_action` | 动作链中的单个动作，支持 6 种类型 |
| **SysMicroService** | `sys_micro_service` | 微服务注册 |
| **SysDataSource** | `sys_data_source` | 数据源连接信息（支持 MySQL/PG/MSSQL/Oracle） |
| **SysDataSourceBinding** | `sys_data_source_binding` | 数据源与微服务多对多绑定 |
| **SysDataNode** | `sys_data_node` | 数据节点（TABLE / SERVICE 类型） |
| **SysRole** | `sys_role` | 角色定义 |
| **SysRoleEvent** | `sys_role_event` | 角色与事件多对多关联 |

### ER 关系图

```
SysEvent ──1:N── SysTrigger ──1:N── SysAction
   │                                    │
   │                              targetTable / targetService / targetEventId
   │
   └── N:M ── SysRole ── via SysRoleEvent

SysMicroService ──1:N── SysDataNode
      │                       │
      └── N:M ── SysDataSource ── via SysDataSourceBinding
```

---

## 📡 API 概览

### 事件管理 `/api/events`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/` | 事件列表（分页、搜索） |
| POST | `/` | 新建事件 |
| PUT | `/:id` | 更新事件 |
| DELETE | `/:id` | 删除事件 |
| PATCH | `/:id/toggle` | 启用/禁用 |

### 触发器管理 `/api/triggers`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/` | 触发器列表 |
| POST | `/` | 新建触发器 |
| PUT | `/:id` | 更新触发器 |
| DELETE | `/:id` | 删除触发器 |
| PATCH | `/:id/toggle` | 启用/禁用 |
| PUT | `/:id/actions/sort` | 调整动作顺序 |

### 动作管理 `/api/triggers/:triggerId/actions`
| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/` | 添加动作 |
| PUT | `/:actionId` | 更新动作 |
| DELETE | `/:actionId` | 删除动作 |

### 数据流查询 `/api/dataflow`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/graph` | 全局数据流图（支持 `?eventId=` / `?roleId=`） |
| GET | `/by-event/:eventId` | 按事件查看数据流 |
| GET | `/by-node/:nodeName` | 数据节点反查 |
| GET | `/by-role/:roleId` | 按角色查看数据流 |

---

## 🎯 种子数据场景

项目预置了一个**电商微服务系统**的示例数据：

### 微服务（4 个）
- **订单服务** (order-service)
- **支付服务** (pay-service)
- **库存服务** (inventory-service)
- **通知服务** (notify-service)

### 示例事件流
```
订单创建 → 查询库存 → 扣减库存 → 记录日志 → 发送通知
支付完成 → 更新订单状态 → 创建支付记录 → 触发库存扣减事件
订单取消 → 查询订单明细 → 恢复库存 → 记录恢复日志
```

### 角色（2 个）
- **买家** — 可触发：订单创建、支付完成、订单取消
- **卖家** — 可触发：订单创建、库存扣减完成

---

## 📝 开发命令

```bash
# 开发
npm run dev              # 同时启动前后端
npm run dev:backend      # 仅启动后端
npm run dev:frontend     # 仅启动前端

# 构建
npm run build            # 构建前后端
npm run build:backend    # 仅构建后端
npm run build:frontend   # 仅构建前端

# 数据库
cd backend
npx prisma db push       # 同步表结构
npm run db:seed          # 导入种子数据
npx prisma studio        # 可视化数据库管理
```

---

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 License

MIT