✨ feat: ProFlow基础版本,才用BloodNode组件完成血缘图展示

ant-design · Sep 15, 2023 · d60fb21 · d60fb21
1 parent cc4ea9b
commit d60fb21
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 146 deletions.
diff --git a/src/BloodNode/index.tsx b/src/BloodNode/index.tsx
@@ -1,76 +1,7 @@
+import { NODE_DANGER, NODE_SELECT, NODE_WARNING, NodeSelect } from '@/ProFlow/constants';
 import { ConfigProvider } from 'antd';
-import { createStyles } from 'antd-style';
 import { CSSProperties, ReactNode, memo, useRef } from 'react';
-
-const useStyles = createStyles(({ css }) => ({
-  nodeWrap: css`
-    width: 320px;
-    height: 85px;
-    display: flex;
-    z-index: 10 !important;
-    position: absolute;
-    border-radius: 12px;
-    padding: 16px 12px;
-    box-sizing: border-box;
-    border: 3px solid white;
-    flex: 1;
-    background-color: white;
-
-    .img {
-      width: 48px;
-      height: 48px;
-    }
-
-    .content {
-      width: 230px;
-      margin-left: 13px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-start;
-
-      .title {
-        width: 100%;
-        display: flex;
-        flex: 1;
-
-        span {
-          font-size: 16px;
-          color: rgba(0, 0, 0, 85%);
-          line-height: 22px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: left;
-        }
-
-        .dangerLogo {
-          width: 28px;
-          height: 16px;
-          background: #ffeef1;
-          border-radius: 7px;
-          margin-left: 8px;
-          margin-top: 3px;
-          img {
-            width: 8px;
-            height: 9px;
-          }
-        }
-      }
-
-      .des {
-        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;
-      }
-    }
-  `,
-}));
+import { useStyles } from './styles';
 
 interface BloodNodeProps {
   logo: string;
@@ -80,6 +11,20 @@ interface BloodNodeProps {
   showIcon?: boolean;
   icon?: string;
   className?: string;
+  selectType?: NodeSelect;
+}
+
+function getClsFromSelectType(select: NodeSelect) {
+  switch (select) {
+    case NodeSelect.SELECT:
+      return NODE_SELECT;
+    case NodeSelect.DANGER:
+      return NODE_DANGER;
+    case NodeSelect.WARNING:
+      return NODE_WARNING;
+    default:
+      return 'nodeDefault';
+  }
 }
 
 export interface BloodNodePreviewProps extends BloodNodeProps {
@@ -97,34 +42,36 @@ export interface BloodNodePreviewProps extends BloodNodeProps {
   onClick?: () => void;
 }
 
-const Preview = memo<Partial<BloodNodePreviewProps>>(({ title, logo, description, className }) => {
-  const { styles, cx } = useStyles();
-  const cardRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <ConfigProvider
-      // 不这样做会导致 select 的下拉菜单被遮挡，并且不会正常放大缩小
-      getPopupContainer={() => {
-        return cardRef.current || document.body;
-      }}
-    >
-      {/* <Card ref={cardRef} title={title} className={} style={style}>
+const Preview = memo<Partial<BloodNodePreviewProps>>(
+  ({ title, logo, description, className, selectType = NodeSelect.SELECT }) => {
+    const { styles, cx } = useStyles();
+    const cardRef = useRef<HTMLDivElement>(null);
+
+    return (
+      <ConfigProvider
+        // 不这样做会导致 select 的下拉菜单被遮挡，并且不会正常放大缩小
+        getPopupContainer={() => {
+          return cardRef.current || document.body;
+        }}
+      >
+        {/* <Card ref={cardRef} title={title} className={} style={style}>
             {children}
           </Card> */}
-      <div className={cx(styles.nodeWrap, className)}>
-        <img className={'img'} src={logo} alt="" />
-        <div className={'content'}>
-          <div className={'title'}>
-            <span>{title}</span>
-            {/* {mainDanger && <DangerLogo />}
+        <div className={cx(styles.nodeWrap, styles[getClsFromSelectType(selectType)], className)}>
+          <img className={'img'} src={logo} alt="" />
+          <div className={'content'}>
+            <div className={'title'}>
+              <span>{title}</span>
+              {/* {mainDanger && <DangerLogo />}
           {qualityScore && <ApiScore score={parseFloat(qualityScore)} />} */}
+            </div>
+            <div className={'des'}>{description}</div>
           </div>
-          <div className={'des'}>{description}</div>
         </div>
-      </div>
-    </ConfigProvider>
-  );
-});
+      </ConfigProvider>
+    );
+  },
+);
 
 const Default = memo<BloodNodeProps>(({ ...props }) => {
   return <Preview {...props} />;

diff --git a/src/BloodNode/styles.ts b/src/BloodNode/styles.ts
@@ -0,0 +1,84 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, cx, prefixCls }) => ({
+  nodeWrap: cx(
+    `${prefixCls}-xx`,
+    css`
+      width: 320px;
+      height: 85px;
+      display: flex;
+      z-index: 10 !important;
+      position: absolute;
+      border-radius: 12px;
+      padding: 16px 12px;
+      box-sizing: border-box;
+      border: 3px solid white;
+      flex: 1;
+      background-color: white;
+
+      .img {
+        width: 48px;
+        height: 48px;
+      }
+
+      .content {
+        width: 230px;
+        margin-left: 13px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .title {
+          width: 100%;
+          display: flex;
+          flex: 1;
+
+          span {
+            font-size: 16px;
+            color: rgba(0, 0, 0, 85%);
+            line-height: 22px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+          }
+
+          .dangerLogo {
+            width: 28px;
+            height: 16px;
+            background: #ffeef1;
+            border-radius: 7px;
+            margin-left: 8px;
+            margin-top: 3px;
+            img {
+              width: 8px;
+              height: 9px;
+            }
+          }
+        }
+
+        .des {
+          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;
+        }
+      }
+    `,
+  ),
+  nodeSelected: css`
+    box-shadow: 0 0 0 3px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
+  nodeDanger: css`
+    box-shadow: 0 0 0 3px #f7636e, 0 1px 4px 1px rgba(0, 0, 0, 8%);
+  `,
+  nodeWarning: css`
+    box-shadow: 0 0 0 3px #ef9d3b, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
+  nodeDefault: css``,
+}));
diff --git a/src/ProFlow/constants.tsx b/src/ProFlow/constants.tsx
@@ -1,8 +1,15 @@
 import { Node } from 'reactflow';
 
+export enum NodeSelect {
+  SELECT = 'SELECT',
+  DANGER = 'DANGER',
+  WARNING = 'WARNING',
+  DEFAULT = 'DEFAULT',
+}
 export interface ProFlowNode {
   id: string;
   type: string;
+  select?: NodeSelect;
   data: ProFlowNodeData;
 }
 
@@ -35,7 +42,7 @@ export interface NodeMapItem {
   dangerCount?: number;
   type?: 'input' | 'output' | 'default';
   className?: string;
-  selected?: boolean;
+  select?: NodeSelect;
   isGroup?: boolean;
   childrenNeedFold?: boolean;
   haveAlert?: boolean;
@@ -51,3 +58,12 @@ export interface NodeMapItem {
 }
 
 export type NodeMapping = Record<string, NodeMapItem>;
+
+export const NODE_SELECT = 'nodeSelected';
+export const NODE_DANGER = 'nodeDanger';
+export const NODE_WARNING = 'nodeWarning';
+export const INIT_NODE = 'initialNode';
+export const NODE_WRAP = 'nodeWrap';
+export const EDGE_SELECT = 'edgeSelected';
+export const EDGE_DANGER = 'edgeDanger';
+export const EDGE_WARNING = 'edgeWarning';
diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import ProFlow from '..';
-import { ProFlowNode } from '../constants';
+import { NodeSelect, ProFlowNode } from '../constants';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -14,6 +14,7 @@ const nodes: ProFlowNode[] = [
   {
     id: 'a1',
     type: 'BloodNode',
+    select: NodeSelect.SELECT,
     data: {
       title: 'XXX数据源',
       describe: 'cksadjfnf',
@@ -23,6 +24,7 @@ const nodes: ProFlowNode[] = [
   {
     id: 'a2',
     type: 'BloodNode',
+    select: NodeSelect.DANGER,
     data: {
       title: 'XXX_API',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -32,6 +34,7 @@ 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',