✨ feat: new sence demo (#96)

* ✨ feat: add data flow demo * ✨ feat: data flow high light * ✨ feat: work flow * ✨ feat: work flow demo * ✨ feat: pipeline * ✨ feat: new params for flowview * ✨ feat: pipe line demo * ✨ feat: pipe line position * ✨ feat: tech pipe line drag * ✨ feat: demo * ✨ fix: bug * 🐛 fix: bug --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Mar 31, 2024 · a7ee2ec · a7ee2ec
1 parent 18a9ac5
commit a7ee2ec
Show file tree

Hide file tree

Showing 36 changed files with 1,776 additions and 290 deletions.
diff --git a/docs/caseShow/cicdPipeLine.md b/docs/caseShow/cicdPipeLine.md
@@ -10,4 +10,4 @@ description:
 
 ## Default
 
-<code src="./demos/pipelineDemo.tsx" ></code>
+<code src="./demos/pipeline/multiPipe/pipelineDemo.tsx" ></code>
diff --git a/docs/caseShow/dataFlow.md b/docs/caseShow/dataFlow.md
@@ -0,0 +1,25 @@
+---
+nav:
+  title: 案例展示
+  order: 100
+group:
+  title: 场景展示
+  order: 1
+title: 数据流程图
+order: 1
+description:
+---
+
+## 数据流程图
+
+案例特点：
+
+- 点击选中节点，自动高亮相关链路
+- 无级缩放的 label
+- 节点拖拽
+- Danger 节点链路高亮
+- 选中节点唤起抽屉
+- 点击画布或其他节点重置选中态
+- 初始化自动布局
+
+<code src='./demos/dataflow/index.tsx'></code>
diff --git a/docs/caseShow/demos/dataflow/data.tsx b/docs/caseShow/demos/dataflow/data.tsx
@@ -0,0 +1,261 @@
+import { FlowViewEdge, FlowViewNode } from '@ant-design/pro-flow';
+import { Progress } from 'antd';
+import React from 'react';
+import useStyles from './styled';
+
+const ApiScore: React.FC<{ score: number }> = ({ score }) => {
+  return (
+    <Progress
+      style={{
+        fontSize: '6px',
+        textAlign: 'center',
+      }}
+      type="circle"
+      trailColor={'white'}
+      percent={score === 0 ? 1 : score * 20}
+      strokeColor={score * 20 > 60 ? '#30a46c' : '#e5484d'}
+      format={() => `${score}`}
+      size={28}
+    />
+  );
+};
+
+const DangerLogo: React.FC = () => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.dangerLogo}>
+      <img
+        src={
+          'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*wkEJRbSowekAAAAAAAAAAAAADvuvAQ/original'
+        }
+        alt=""
+      />
+    </div>
+  );
+};
+
+export const nodes: FlowViewNode[] = [
+  {
+    id: 'a1',
+    label: '数据源',
+    data: {
+      title: 'XXX_API_ddddddddddddddddddddddddddddddƒddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b1',
+    label: ' API',
+    data: {
+      isDanger: true,
+      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'left',
+        value: <DangerLogo />,
+      },
+    },
+  },
+  {
+    id: 'b2',
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'right',
+        value: <ApiScore score={4} />,
+      },
+    },
+  },
+  {
+    id: 'b3',
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b4',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'c1',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'c2',
+    label: '产品',
+    data: {
+      isDanger: true,
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'c3',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'd1',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'd2',
+    type: 'BasicNodeGroup',
+    label: '用户',
+    data: [
+      {
+        id: 'a5',
+        data: {
+          title: 'XXX数据源',
+          description: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a6',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a7',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+      {
+        id: 'a8',
+        data: {
+          title: 'XXX数据源',
+          description: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a9',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a10',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+      {
+        id: 'a11',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+    ],
+  },
+  {
+    id: 'd3',
+    data: {
+      title: 'XXXX用户',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+];
+
+export const edges: FlowViewEdge[] = [
+  {
+    id: 'a1-b1',
+    source: 'a1',
+    target: 'b1',
+  },
+  {
+    id: 'a1-b2',
+    source: 'a1',
+    target: 'b2',
+  },
+  {
+    id: 'a1-b3',
+    source: 'a1',
+    target: 'b3',
+  },
+  {
+    id: 'a1-b4',
+    source: 'a1',
+    target: 'b4',
+  },
+
+  {
+    id: 'b2-c1',
+    source: 'b2',
+    target: 'c1',
+    type: 'radius',
+  },
+  {
+    id: 'b3-c1',
+    source: 'b3',
+    target: 'c1',
+    type: 'radius',
+  },
+  {
+    id: 'b1-c2',
+    source: 'b1',
+    target: 'c2',
+    type: 'radius',
+  },
+  {
+    id: 'c2-d2',
+    source: 'c2',
+    target: 'd2',
+    type: 'radius',
+  },
+  {
+    id: 'b4-c3',
+    source: 'b4',
+    target: 'c3',
+    type: 'radius',
+  },
+  {
+    id: 'c1-d1',
+    source: 'c1',
+    target: 'd1',
+    type: 'radius',
+  },
+  {
+    id: 'c3-d3',
+    source: 'c3',
+    target: 'd3',
+    type: 'radius',
+  },
+];