基于 React+Konva+TypeScript 拖动配置流程图,配置卡片参数表单欢迎在线体验
发布于 1 年前 作者 myfirebug 2292 次浏览 来自 分享

基于 React 拖动配置流程图

flow-chart 基于 React+konva+TypeScript 流程图开发,支持新增/编辑卡片,支持动态配置卡片参数表单(即动态配置表单功能),支持 GET、POST 接口在线调试,支持拖动配置流程图,支持拷贝、删除、撤销、恢复、全选、对齐卡片等等。

项目纯前端-Demo 地址:https://myfirebug.github.io/flow-chart/index.html#/login

用户名:admin, 密码:123456

新增/编辑卡片图片

RUNOOB 图标 RUNOOB 图标 RUNOOB 图标

新增/编辑流程图图片 RUNOOB 图标

主要依赖:

名称 版本 名称 版本
react 18.0.0 react-dom 18.0.0
typescript 4.6.3 jsoneditor 9.9.0
redux 4.1.2 react-redux 7.2.8
konva 8.4.2 redux-logger 3.0.6
redux-persist 6.0.0 redux-thunk 2.4.1
react-app-rewire 2.2.1 echarts 5.3.2
antd 4.19.3 axios 0.26.1
cross-env 7.0.3 customize-cra 1.0.0
react-konva 18.2.4

开发环境

名称 版本 名称 版本
node 16.17.0 npm 8.15.0

已完成功能

页面 是否完成(功能)
登录
首页
流程
卡片列表
卡片新增/编辑 入参配置(input,textArea, number, pasword, select, checkboxGroup,radioGroup,cascader,switch,date,dateRange,time,timeRange,treeSelect 配置功能开发)置顶、置顶、上移、下移、复制、删除功能开发(正在开发中···)
流程图列表
流程图新增/编辑 支持拷贝、删除、撤销、恢复、全选、对齐卡片、ctrl+单机多选、卡片表参数配置(卡片新增/编辑里的拼入参配置表单使用)

已完成的组件

名称 名称 名称
Input TextArea InputNumber

框架使用技术

  • 框架为create-react-app构架,搭配react-router-domreduxreact-reduxredux-thunkredux-persistredux-loggeraxios,UI 框架为antd@4.19.3

学习文档

依赖安装、启动、打包

## 克隆

## 启动开发环境(开发调试时使用)
### `npm start`

## 构建测试项目
## `npm build:test`

## 构建正式项目
### `npm build:production`

目录结构

flow-chart
├── src
│   ├── assets                       // 静态资源
│   ├── components                   // 公共组件
│   ├── config                       // 配置文件
│   ├── mock                         // 模拟接口
│   ├── pages                        // 页面
│   │   ├── card-configuration       // 卡片配置页面
│   │   ├── diagrams-configuration   // 流程图配置页面
│   │   ├── frame                    // 框架页面
│   │   ├── home                     // 首页页面
│   │   ├── login                    // 登录页面
│   │   └── process                  // 流程图
│   │   │   └── card                 // 卡片列表
│   │   │   └── diagrams             // 流程列表
│   ├── service                      // 接口服务
│   ├── store                        // 状态
│   ├── types                        // ts基本类型
│   ├── utils                        // 工具
│   └── form                         // 组件及其配置

欢迎star

回到顶部