Flow Builder 项目教程

Flow Builder 项目教程

flow-builder A highly customizable streaming flow builder. 项目地址: https://gitcode.com/gh_mirrors/flow/flow-builder

1. 项目目录结构及介绍

Flow Builder 是一个高度可定制的流构建器，其目录结构如下：

flow-builder/
├── .dumi/               # Dumi 文档目录
│   ├── theme            # 主题配置
│   ├── docs             # 文档内容
│   ├── public           # 公共资源
│   └── src              # 源代码
├── .editorconfig        # 编辑器配置
├── .fatherrc.ts         # Father 配置
├── .gitignore           # Git 忽略文件
├── .npmignore           # npm 忽略文件
├── .prettierrc          # Prettier 配置
├── .prettierrcignore    # Prettier 忽略文件
├── .umirc.ts            # Umi 配置
├── LICENSE              # 许可证文件
├── README.md            # 项目说明文件
├── README.zh-CN.md      # 项目说明文件（中文）
├── package.json         # 包管理文件
├── tsconfig.json        # TypeScript 配置文件
├── typings.d.ts         # 类型定义文件
└── yarn.lock            # yarn 锁文件

主要目录和文件介绍：

• .dumi/：包含项目的文档和主题配置。
• src/：源代码目录，包含项目的核心实现。
• public/：公共资源目录，如图片、样式等。
• docs/：文档内容目录，存放项目的文档文件。
• .editorconfig：编辑器配置文件，统一不同开发者的代码风格。
• .gitignore：指定 Git 忽略跟踪的文件和目录。
• .npmignore：指定 npm 发布时忽略的文件和目录。
• .prettierrc：Prettier 配置文件，统一代码格式。
• .prettierrcignore：Prettier 忽略文件，指定不进行格式化的文件和目录。
• LICENSE：项目的许可证文件，本项目采用 MIT 许可。
• README.md 和 README.zh-CN.md：项目的说明文件，分别提供英文和中文版本。

2. 项目的启动文件介绍

项目的启动文件是 src/index.tsx，它是 React 应用的入口。以下是启动文件的基本结构：

import React from 'react';
import ReactDOM from 'react-dom';
import FlowBuilder, { NodeContext, INode, IRegisterNode } from 'react-flow-builder';
import './index.css';

// 定义节点显示组件
const StartNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="start-node">{node.name}</div>;
};

// ... 其他节点显示组件

// 注册节点
const registerNodes: IRegisterNode[] = [
  // ... 节点类型定义
];

// 主组件
const Demo: React.FC = () => {
  const [nodes, setNodes] = useState<INode[]>([]);
  const handleChange = (nodes: INode[]) => {
    console.log('nodes change', nodes);
    setNodes(nodes);
  };

  return (
    <FlowBuilder nodes={nodes} onChange={handleChange} registerNodes={registerNodes} />
  );
};

ReactDOM.render(<Demo />, document.getElementById('root'));

启动文件说明：

• 引入 React 和 ReactDOM 以及 react-flow-builder。
• 定义不同类型的节点显示组件。
• 注册节点类型，包括节点的显示组件和其他属性。
• 创建一个状态来存储节点数据，并定义一个回调函数来处理节点数据的改变。
• 在 FlowBuilder 组件中传递节点数据和回调函数，以及注册的节点类型。
• 使用 ReactDOM 将主组件 Demo 渲染到 DOM 中。

3. 项目的配置文件介绍

项目的配置文件包括 .editorconfig、.prettierrc、.gitignore 和 .fatherrc.ts。

.editorconfig

.editorconfig 文件用于配置不同编辑器的代码风格，例如缩进、换行符等，确保团队成员的代码风格一致。

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.prettierrc

.prettierrc 文件用于配置 Prettier 的代码格式化规则。

{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

.gitignore

.gitignore 文件用于指定 Git 忽略跟踪的文件和目录，例如编译生成的文件、日志文件等。

node_modules/
/dist/
.yarn.cache/
.yarn/install/

.fatherrc.ts

.fatherrc.ts 文件是 Father 的配置文件，用于配置项目打包、编译等相关选项。

import { defineConfig } from 'father';

export default defineConfig({
  // ... 配置项
});

以上是 Flow Builder 项目的目录结构、启动文件和配置文件的详细介绍。希望对您使用和了解该项目有所帮助。

flow-builder A highly customizable streaming flow builder. 项目地址: https://gitcode.com/gh_mirrors/flow/flow-builder