✨ feat: ProFLowGroup组件

ant-design · Sep 18, 2023 · 24ee8c7 · 24ee8c7
1 parent d60fb21
commit 24ee8c7
Show file tree

Hide file tree

Showing 6 changed files with 264 additions and 13 deletions.
diff --git a/src/BloodGroupNode/constants.ts b/src/BloodGroupNode/constants.ts
diff --git a/src/BloodGroupNode/index.tsx b/src/BloodGroupNode/index.tsx
@@ -0,0 +1,65 @@
+import { NodeMapItem, ProFlowNode, ProFlowNodeData } from '@/ProFlow/constants';
+import { useStyles } from './styles';
+
+const convertMappingNode = (nodeList: ProFlowNode[]): NodeMapItem[] => {
+  return nodeList.map((node) => {
+    return node;
+  });
+};
+
+const GroupItem = (node: NodeMapItem) => {
+  const { styles } = useStyles();
+  const { id, title, des, logo } = node;
+
+  return (
+    <div className={styles.groupItemWrap} key={`${id}-${title}`}>
+      <img src={logo} alt="" />
+      <div className={styles.groupItemContent}>
+        <div className={styles.groupItemTitle}>{title}</div>
+        <div className={styles.des}>{des}</div>
+      </div>
+    </div>
+  );
+};
+
+const BloodNodeGroup: React.FC<ProFlowNode> = ({ id, group, data }) => {
+  const { styles } = useStyles();
+
+  console.log(id, group, data);
+
+  if (!group) {
+    return null;
+  }
+
+  if ((data as ProFlowNode[]).length < 7) {
+    return <div className={styles.groupWrap}>数组长度必须大于等于7！</div>;
+  }
+
+  const nodeList = convertMappingNode(data as ProFlowNode[]);
+
+  return (
+    <div className={styles.groupWrap}>
+      {nodeList!.map((_node, index) => {
+        const data = _node.data as ProFlowNodeData;
+        _node.position = {
+          x: 0,
+          y: 100 * index,
+        };
+        _node.title = data.title;
+        _node.logo = data.logo;
+        _node.des = data.describe;
+        return GroupItem(_node);
+      })}
+      <div className={styles.btnWrap}></div>
+      <div className={styles.btn}>
+        查看更多
+        <img
+          src="https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*W5bAS6ZOqOwAAAAAAAAAAAAADvuvAQ/original"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BloodNodeGroup;
diff --git a/src/BloodGroupNode/styles.ts b/src/BloodGroupNode/styles.ts
@@ -0,0 +1,108 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => ({
+  groupWrap: css`
+    width: 355px;
+    height: 614px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 16px;
+    overflow: hidden;
+    border: none;
+    box-shadow: none;
+    background-color: #fafafa;
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 8%);
+    position: absolute;
+    z-index: 10;
+    border-radius: 12px;
+  `,
+  btnWrap: css`
+    width: 100%;
+    height: 70px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 11;
+    background-color: #fefefe;
+    opacity: 0.7;
+  `,
+  btn: css`
+    width: 110px;
+    height: 32px;
+    position: absolute;
+    z-index: 12;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 32px;
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 2%);
+    font-size: 14px;
+    color: rgba(0, 0, 0, 88%);
+    line-height: 32px;
+    bottom: 16px;
+    left: 112px;
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-left: 4px;
+      transform: translateY(-1px);
+    }
+  `,
+  groupItemWrap: css`
+    width: 320px;
+    height: 83px;
+    display: flex;
+    border-radius: 12px;
+    box-sizing: border-box;
+    padding: 16px 12px;
+    background-color: white;
+    background: #fff;
+    border: 1px solid #f4f4f4;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 8%);
+
+    &:last-child {
+      opacity: 0.5;
+    }
+
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  `,
+  groupItemContent: css`
+    width: 230px;
+    margin-left: 13px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  `,
+  groupItemTitle: css`
+    width: 100%;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 88%);
+    line-height: 22px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+  `,
+  des: css`
+    font-size: 14px;
+    color: rgba(0, 0, 0, 45%);
+    line-height: 20px;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    margin-top: 11px;
+  `,
+}));
diff --git a/src/ProFlow/constants.tsx b/src/ProFlow/constants.tsx
@@ -8,9 +8,9 @@ export enum NodeSelect {
 }
 export interface ProFlowNode {
   id: string;
-  type: string;
+  group?: boolean;
   select?: NodeSelect;
-  data: ProFlowNodeData;
+  data: ProFlowNodeData | ProFlowNode[];
 }
 
 export interface ProFlowNodeData {
@@ -31,12 +31,13 @@ export interface InitialNode extends Node {
 }
 
 export interface NodeMapItem {
-  id?: string;
+  id: string;
   key?: string;
   left?: string[];
   right?: string[];
   skip?: boolean;
   title?: string;
+  group?: boolean;
   des?: string;
   danger?: boolean;
   dangerCount?: number;
@@ -49,7 +50,8 @@ export interface NodeMapItem {
   mainDanger?: boolean;
   qualityScore?: string;
   subDanger?: boolean;
-  data?: ProFlowNodeData;
+  logo?: string;
+  data: ProFlowNodeData | ProFlowNode[];
   nodeType?: string;
   position?: {
     x: number;

diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -13,7 +13,6 @@ const useStyles = createStyles(({ css }) => ({
 const nodes: ProFlowNode[] = [
   {
     id: 'a1',
-    type: 'BloodNode',
     select: NodeSelect.SELECT,
     data: {
       title: 'XXX数据源',
@@ -23,7 +22,6 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'a2',
-    type: 'BloodNode',
     select: NodeSelect.DANGER,
     data: {
       title: 'XXX_API',
@@ -33,14 +31,83 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'a3',
-    type: 'BloodNode',
     select: NodeSelect.WARNING,
     data: {
       title: 'XXXX产品',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
       describe: '2031030213014',
     },
   },
+  {
+    id: 'a4',
+    group: true,
+    // select: NodeSelect.WARNING,
+    data: [
+      {
+        id: 'a5',
+        select: NodeSelect.SELECT,
+        data: {
+          title: 'XXX数据源',
+          describe: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a6',
+        select: NodeSelect.DANGER,
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+          describe: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a7',
+        select: NodeSelect.WARNING,
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+          describe: '2031030213014',
+        },
+      },
+      {
+        id: 'a8',
+        select: NodeSelect.SELECT,
+        data: {
+          title: 'XXX数据源',
+          describe: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a9',
+        select: NodeSelect.DANGER,
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+          describe: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a10',
+        select: NodeSelect.WARNING,
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+          describe: '2031030213014',
+        },
+      },
+      {
+        id: 'a11',
+        select: NodeSelect.WARNING,
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+          describe: '2031030213014',
+        },
+      },
+    ],
+  },
 ];
 
 const edges = [
@@ -54,6 +121,11 @@ const edges = [
     source: 'a2',
     target: 'a3',
   },
+  {
+    id: 'a3-a4',
+    source: 'a3',
+    target: 'a4',
+  },
 ];
 
 const ProFlowDemo = memo(() => {

diff --git a/src/ProFlow/helper.tsx b/src/ProFlow/helper.tsx
@@ -1,3 +1,4 @@
+import BloodNodeGroup from '@/BloodGroupNode';
 import BloodNode from '@/BloodNode';
 import Dagre from '@dagrejs/dagre';
 import { cx } from 'antd-style';
@@ -13,6 +14,7 @@ import {
   NodeSelect,
   ProFLowEdge,
   ProFlowNode,
+  ProFlowNodeData,
 } from './constants';
 
 function getTypeFromEdge(node: NodeMapItem) {
@@ -33,7 +35,7 @@ export function convertMappingFrom(nodes: ProFlowNode[], edges: ProFLowEdge[]) {
   nodes.forEach((node) => {
     mapping[node.id] = {
       id: node.id,
-      nodeType: node.type, // BloodNode | BloodGroup
+      group: node.group,
       data: node.data,
       select: node.select,
       right: [],
@@ -129,7 +131,7 @@ export const getRenderData = (
   Object.keys(mapping).forEach((id) => {
     const node = mapping[id];
     const { select = NodeSelect.DEFAULT } = node;
-    console.log(select);
+    console.log(node);
     renderNodes.push({
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
@@ -140,11 +142,13 @@ export const getRenderData = (
       height: 83,
       className: cx(INIT_NODE),
       data: {
-        label: (
+        label: node.group ? (
+          <BloodNodeGroup id={node.id!} group={node.group} data={node.data! as ProFlowNode[]} />
+        ) : (
           <BloodNode
-            title={node.data!.title!}
-            description={node.data!.describe!}
-            logo={node.data!.logo!}
+            title={(node.data! as ProFlowNodeData).title!}
+            description={(node.data! as ProFlowNodeData).describe!}
+            logo={(node.data! as ProFlowNodeData).logo!}
             selectType={select}
           />
         ),