Skip to content

Latest commit

 

History

History
287 lines (223 loc) · 13.9 KB

README.zh-CN.md

File metadata and controls

287 lines (223 loc) · 13.9 KB

ProFlow

基于 React-Flow 的流程编辑器框架



English・简体中文・Changelog . Report Bug · Request Feature

目录

目录

📦 安装

Important

此包仅支持 ESM。

要安装 @ant-design/pro-flow，请运行以下命令：

$ pnpm install @ant-design/pro-flow

使用 Next.js 编译

Note

为了正确使用 Next.js SSR，请在 next.config.js 中添加 transpilePackages: ['@ant-design/pro-flow']。例如：

const nextConfig = {
  transpilePackages: ['@ant-design/pro-flow'],
};

✨ 特性

Tip

ProFlow 专注于快速设置流程节点编辑器框架。它旨在赋予开发人员轻松创建丰富、动态和直观的流程编辑器界面的能力。

ProFlow 是一款基于 react-flow 构建的画布编辑器。具有的特性如下：

  • 💠 现代化节点设计：拥有现代化设计的默认节点与成组节点组件，使界面更加直观、易读、易用。
  • 🌐 开箱即用的组件：支持 MiniMap、Inspector、Loading 等组件，提供丰富的扩展能力和定制化选项，让用户能够轻松定制画布界面。
  • 🎨 自动布局算法：内置了 dagre 布局算法，使得用户只需给出节点和关系，即可获得自动布局后的效果，轻松实现流程图的美观展现。
  • 🖱️ 流程图数据操作：提供了 useFlowViewer 功能，让用户可以轻松操作和管理画布相关数据，实现个性化的交互体验。
  • 🧩 自定义节点和边缘：支持自定义节点、自定义边缘能力，并提供了额外的 label、zoom、selectType 等属性，满足个性化定制需求。
  • 📱 移动端友好：默认提供了 figma 模式的触摸板交互画布逻辑，适配移动端操作，使用户体验更加流畅。
  • 🎨 画布编辑器能力：提供开箱即用的画布编辑器能力，内置丰富的画布、节点操作功能，包括复制粘贴、撤销重做等功能，提升用户的操作效率和便利性。

🔨 使用

import { FlowView } from '@ant-design/pro-flow';
import useStyles from './css/index.style';

function App() {
  const { styles } = useStyles();

  return (
    <div className={styles.container}>
      <FlowView nodes={[]} edges={[]} />
    </div>
  );
}

export default App;

添加数据

export const nodes = [
  {
    id: 'a1',
    data: {
      title: 'XXX_API_a1',
      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
      description: 'XXX_XXX_XXX_API',
    },
  },
  {
    id: 'a2',
    data: {
      title: 'XXX_API_a2',
      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
      description: 'XXX_XXX_XXX_API',
    },
  },
  {
    id: 'a3',
    data: {
      title: 'XXX_API_a3',
      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
      description: 'XXX_XXX_XXX_API',
    },
  },
];
export const edges = [
  {
    id: 'a1-a2',
    source: 'a1',
    target: 'a2',
  },
  {
    id: 'a1-a3',
    source: 'a1',
    target: 'a3',
    type: 'radius',
  },
];

添加交互

import { FlowView } from '@ant-design/pro-flow';
import useStyles from './css/index.style';
import { edges, nodes } from './data';

function App() {
  const { styles } = useStyles();

  return (
    <div className={styles.container}>
      <FlowView nodes={nodes} edges={edges} />
    </div>
  );
}

export default App;

🖥 浏览器兼容性

Note

edge Edge chrome safari electron_48x48
Edge 最近 2 个版本 最近 2 个版本 最近 2 个版本 最近 2 个版本

⌨️ 本地开发

您可以使用 Github Codespaces 进行在线开发：

或者克隆它进行本地开发：

$ git clone https://github.com/ant-design/pro-flow.git
$ cd pro-flow
$ pnpm install
$ pnpm dev

🤝 贡献

Important

加入我们的协作生态系统。您的贡献是我们项目的心脏。以下是您如何成为我们充满活力的社区的重要组成部分：

  • 整合和创新：将 Ant Design Pro、umi 和 ProFlow 整合到您的项目中。您的实际使用和反馈对我们至关重要。
  • 发表您的见解：遇到了问题？有疑问？您的观点很重要。通过提交问题来分享它们，帮助我们提升用户体验。
  • 塑造未来：有代码增强或功能想法吗？我们邀请您提出拉取请求，直接为我们的代码库发展做出贡献。

每一次贡献，无论大小，都值得庆祝。加入我们，共同致力于完善和提升开源企业 UI 组件的世界。 😃

🛣️ 生态系统

  • ProComponents - 专为企业级应用设计，像专业人士一样使用 Ant Design！
  • ProEditor - 终极编辑器 UI 框架和组件。
  • ProFlow - 基于 React-Flow 的流程编辑器框架。
  • ProChat - 用于快速构建 LLM 聊天界面的组件库。

📝 License

Copyright © 2023 - present AFX & Ant Digital.
This project is MIT licensed.