✨ feat: new params for flowview

docs/caseShow/demos/pipeline/taskPipeline/data.tsx

@@ -0,0 +1,107 @@
+import { Button } from 'antd';
+import { TaskContent } from './nodes/taskContent';
+export const ActionBtn = () => {
+  return (
+    <Button size="small" type="text" onClick={(e) => e.stopPropagation()}>
+      action
+    </Button>
+  );
+};
+
+export const nodes = [
+  // {
+  //   id: 'A',
+  //   type: 'group',
+  //   data: { label: null },
+  //   position: { x: 0, y: 0 },
+  //   style: {
+  //     width: 300,
+  //     height: 500,
+  //   },
+  // },
+  {
+    id: 'A',
+    type: 'StageNode',
+    data: { label: null },
+    position: { x: 0, y: 0 },
+    zIndex: -1,
+    style: {
+      width: 300,
+      height: 500,
+    },
+  },
+  // {
+  //   id: 'B',
+  //   type: 'input',
+  //   data: { label: 'child node 1' },
+  //   position: { x: 10, y: 10 },
+  //   style: {
+  //     width: 200,
+  //     height: 100,
+  //   },
+  //   parentNode: 'A',
+  //   extent: 'parent',
+  // },
+  // {
+  //   id: 'C',
+  //   type: 'default',
+  //   style: {
+  //     width: 200,
+  //     height: 100,
+  //   },
+  //   data: { label: 'child node 2' },
+  //   position: { x: 10, y: 90 },
+  //   parentNode: 'A',
+  //   extent: 'parent',
+  // },
+  // {
+  //   id: 'A',
+  //   type: 'group',
+  //   data: { label: null },
+  //   position: { x: 0, y: 0 },
+  //   style: {
+  //     width: 170,
+  //     height: 140,
+  //   },
+  // },
+  {
+    id: 'a1',
+    type: 'taskNode',
+    parentNode: 'A',
+    extent: 'parent',
+    position: { x: 10, y: 10 },
+    draggable: false,
+    // expandParent: true,
+    style: {
+      width: 240,
+      height: 40,
+    },
+    data: {
+      title: '提交申请',
+      status: 'success',
+      extra: <ActionBtn />,
+      children: <TaskContent />,
+    },
+  },
+
+  {
+    id: 'a2',
+    type: 'taskNode',
+    parentNode: 'A',
+    extent: 'parent',
+    // expandParent: true,
+    position: { x: 10, y: 90 },
+    style: {
+      width: 240,
+      height: 40,
+    },
+    data: {
+      title: '提交申请',
+      status: 'success',
+      extra: <ActionBtn />,
+      children: <TaskContent />,
+    },
+  },
+];
+
+export const edges = [{ id: 'b-c', source: 'a1', target: 'a2' }];

docs/caseShow/demos/pipeline/taskPipeline/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * compact: true
+ */
+
+import { Background, FlowView, applyEdgeChanges, applyNodeChanges } from '@ant-design/pro-flow';
+import { useCallback, useState } from 'react';
+// import ReactFlow, { applyEdgeChanges, applyNodeChanges, Background } from 'reactflow';
+import { edges, nodes } from './data';
+import StageNode from './nodes/stageNode';
+import taskNode from './nodes/taskNode';
+import useStyles from './styled';
+
+const nodeTypes = { taskNode, StageNode };
+
+const rfStyle = {
+  backgroundColor: '#D0C0F7',
+};
+
+function App() {
+  const { styles } = useStyles();
+  const [_nodes, setNodes] = useState(nodes);
+  const [_edges, setEdges] = useState(edges);
+
+  const onNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    [setNodes],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    [setEdges],
+  );
+
+  return (
+    <div className={styles.container}>
+      <FlowView
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        nodeTypes={nodeTypes}
+        nodes={_nodes}
+        edges={_edges}
+        background={false}
+        autoLayout={true}
+      >
+        <Background color="#D0C0F7" variant="none" style={{ background: '#D0C0F7' }} />
+      </FlowView>
+      {/* <ReactFlow
+        nodes={_nodes}
+        edges={_edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        fitView
+        style={rfStyle}
+        attributionPosition="top-right"
+      >
+        <Background />
+      </ReactFlow> */}
+    </div>
+  );
+}
+
+function ProApp() {
+  return <App />;
+}
+
+export default ProApp;

docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx

@@ -0,0 +1,13 @@
+import { FlowViewNode } from '@ant-design/pro-flow';
+import { FC, useState } from 'react';
+import useStyles from './styled';
+
+const StageNode: FC<FlowViewNode> = (node) => {
+  const [open, setOpen] = useState(false);
+  const { styles } = useStyles();
+  const { data } = node;
+
+  return <div className={styles.stageNode}></div>;
+};
+
+export default StageNode;

docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts

@@ -0,0 +1,61 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    taskNode: {
+      width: '240px',
+      minHeight: '42px',
+      backgroundColor: 'white',
+      padding: '8px 12px',
+      boxSizing: 'border-box',
+      borderRadius: '8px',
+      border: '1px solid #e8e8e8',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      '.title': {
+        width: '100px',
+        marginLeft: '10px',
+      },
+      '.group': {
+        width: '100px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+
+        '.span': {
+          width: '20px',
+          display: 'block',
+          textAlign: 'center',
+        },
+      },
+    },
+
+    stageNode: {
+      width: '300px',
+      minHeight: '500px',
+      backgroundColor: 'red',
+    },
+    wrap: {
+      width: '240px',
+      backgroundColor: '#FAFAFA',
+    },
+    taskContent: {
+      margin: '0',
+      padding: '8px 12px',
+      listStyle: 'none',
+      '> li': {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '8px',
+        '> div': {
+          marginLeft: '8px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+        },
+      },
+    },
+  };
+});
+export default useStyles;

docs/caseShow/demos/pipeline/taskPipeline/nodes/taskContent.tsx

@@ -0,0 +1,43 @@
+import { green, red } from '@ant-design/colors';
+import { CheckCircleFilled, ClockCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import useStyles from './styled';
+
+export const TaskContent = () => {
+  const { styles } = useStyles();
+
+  return (
+    <ul className={styles.taskContent}>
+      <li>
+        <CheckCircleFilled style={{ color: green[5], fontSize: 14 }} />
+        <div>
+          <span>七尼尼 已完成</span>
+          <span>43s</span>
+        </div>
+      </li>
+      <li />
+      <li>
+        <CheckCircleFilled style={{ color: green[5], fontSize: 14 }} />
+        <div>
+          <span>lydon 已完成</span>
+          <span>43s</span>
+        </div>
+      </li>
+      <li />
+      <li>
+        <CloseCircleFilled style={{ color: red[5], fontSize: 14 }} />
+        <div>
+          <span>青霓 审批不通过</span>
+          <span>43s</span>
+        </div>
+      </li>
+      <li />
+      <li>
+        <ClockCircleFilled style={{ color: 'rgba(0, 0, 0, 0.2)', fontSize: 14 }} />
+        <div>
+          <span>青霓 未开始</span>
+          <span />
+        </div>
+      </li>
+    </ul>
+  );
+};

docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx

@@ -0,0 +1,30 @@
+import { green } from '@ant-design/colors';
+import { CheckCircleFilled } from '@ant-design/icons';
+import { FlowViewNode, Handle, Position } from '@ant-design/pro-flow';
+import { FC, useState } from 'react';
+import useStyles from './styled';
+
+const taskNode: FC<FlowViewNode> = (node) => {
+  const [open, setOpen] = useState(false);
+  const { styles } = useStyles();
+  const { data } = node;
+
+  return (
+    <div className={styles.wrap}>
+      <Handle id={`${node.id}`} type="target" position={Position.Left} />
+      <div className={styles.taskNode}>
+        <CheckCircleFilled style={{ color: green[5], fontSize: 14 }} />
+        <div className="title">{data.title}</div>
+        <div className="group">
+          <div>{data.extra}</div>
+          <span className="span">|</span>
+          <div onClick={() => setOpen(!open)}>{open ? 'on' : 'off'}</div>
+        </div>
+      </div>
+      {open && data.children}
+      <Handle id={`${node.id}`} type="source" position={Position.Right} />
+    </div>
+  );
+};
+
+export default taskNode;