✨ feat: work flow

docs/caseShow/dataFlow.md

@@ -1,10 +1,12 @@
 ---
-nav: 案例展示
-order: 100
+nav:
+  title: 案例展示
+  order: 100
 group:
   title: 场景展示
   order: 1
 title: 数据流程图
+order: 1
 description:
 ---
 

docs/caseShow/demos/workflow/index.tsx

@@ -0,0 +1,114 @@
+/**
+ * compact: true
+ * defaultShowCode: true
+ */
+import {
+  BasicNode,
+  EditNode,
+  FlowEditor,
+  FlowEditorProvider,
+  FlowPanel,
+  Inspector,
+  useFlowEditor,
+} from '@ant-design/pro-flow';
+import { Button } from 'antd';
+import { useCallback, useEffect, useState } from 'react';
+import { StringRender } from '/docs/guide/demos/flowEditor/StringNode';
+
+import Sidebar from './sidebar';
+import useStyles from './styled';
+
+let id = 0;
+const getId = () => `node_${id++}`;
+
+const nodeTypes = {
+  StringNode: StringRender,
+  BasicNode: BasicNode,
+  EditNode: EditNode,
+};
+const ProFlowDemo = () => {
+  const editor = useFlowEditor();
+  const { styles } = useStyles();
+  const [open, setOpen] = useState(false);
+
+  const onDragOver = useCallback((event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!editor) return;
+
+      const type = event.dataTransfer.getData('application/reactflow');
+      if (typeof type === 'undefined' || !type) {
+        return;
+      }
+
+      const position = editor.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      const newNode = {
+        id: getId(),
+        type,
+        position,
+        content: {
+          a: '123',
+        },
+        data: {
+          title: `${type} node`,
+          content: '123',
+        },
+      };
+
+      editor.addNode(newNode);
+    },
+    [editor],
+  );
+
+  useEffect(() => {
+    editor.addNode({
+      id: 'a1',
+      type: 'EditNode',
+      position: { x: 200, y: 100 },
+      data: {
+        title: '123',
+        aaa: '456',
+      },
+    });
+  }, [editor]);
+
+  return (
+    <div className={styles.container}>
+      <FlowEditor
+        nodeTypes={nodeTypes}
+        flowProps={{
+          onDrop,
+          onDragOver,
+          onPaneClick: () => setOpen(false),
+        }}
+        miniMap={false}
+        devtools={true}
+      >
+        <FlowPanel position={'top-center'}>
+          <Button onClick={() => setOpen(true)}>Open Nodes Inspector</Button>
+        </FlowPanel>
+        <Inspector open={open} onClick={() => setOpen(false)}>
+          <Sidebar />
+        </Inspector>
+      </FlowEditor>
+    </div>
+  );
+};
+
+const FlowDemo = () => {
+  return (
+    <FlowEditorProvider>
+      <ProFlowDemo />
+    </FlowEditorProvider>
+  );
+};
+
+export default FlowDemo;

docs/caseShow/demos/workflow/sidebar.tsx

@@ -0,0 +1,37 @@
+import useStyles from './styled';
+
+export default () => {
+  const { styles, cx } = useStyles();
+
+  const onDragStart = (event, nodeType) => {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <div className={styles.aside}>
+      <div className={styles.description}>您可以将这些节点拖到上面的画布中</div>
+      <div
+        className={cx(styles.dndnode, styles.input)}
+        onDragStart={(event) => onDragStart(event, 'StringNode')}
+        draggable
+      >
+        String Node
+      </div>
+      <div
+        className={styles.dndnode}
+        onDragStart={(event) => onDragStart(event, 'BasicNode')}
+        draggable
+      >
+        BasicNode Node
+      </div>
+      <div
+        className={cx(styles.dndnode, styles.output)}
+        onDragStart={(event) => onDragStart(event, 'EditNode')}
+        draggable
+      >
+        EditNode Node
+      </div>
+    </div>
+  );
+};

docs/caseShow/demos/workflow/styled.ts

@@ -0,0 +1,47 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    container: {
+      width: '100%',
+      height: '600px',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    aside: {
+      borderRight: '1px solid #eee',
+      padding: '15px 10px',
+      fontSize: '12px',
+      background: '#fcfcfc',
+      marginBottom: '10px',
+    },
+    description: {
+      marginBottom: '10px',
+    },
+    dndnode: {
+      height: '20px',
+      padding: '4px',
+      border: '1px solid #1a192b',
+      borderRadius: '2px',
+      marginBottom: '10px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      cursor: 'grab',
+    },
+    'dndnode.input': {
+      borderColor: '#0041d0',
+    },
+    'dndnode.output': {
+      borderColor: '#ff0072',
+    },
+    'reactflow-wrapper': {
+      flexGrow: '1',
+      height: '100%',
+    },
+    selectall: {
+      marginTop: '10px',
+    },
+  };
+});
+export default useStyles;

docs/caseShow/workFlow.md

@@ -0,0 +1,26 @@
+---
+nav:
+  title: 案例展示
+  order: 100
+group:
+  title: 场景展示
+  order: 1
+title: 工作流编辑器
+order: 2
+description:
+---
+
+## 工作流编辑器
+
+案例特点：
+
+- 拖拽前组件预览
+- 拖拽放入画布
+- 框选多个节点
+- 复制粘贴（快捷键）
+- 撤销重做（快捷键）
+- 单个/框选删除
+- 自由拖拽
+- 连接节点
+
+<code src='./demos/workflow/index.tsx'></code>