feat: 日志弹窗、表格弹窗

packages/yili-dag/src/AlgoNode.tsx

@@ -4,10 +4,14 @@ import { Node } from '@antv/x6';
 import '@antv/x6-react-shape';
 import scriptLogo from '../style/img/script.png';
 import datasourceLogo from '../style/img/datasource.png';
+import successNode from '../style/img/success_node.png';
+import warningNode from '../style/img/warning_node.png';
+import undoneNode from '../style/img/default_node.png';
+import runningNode from '../style/img/running.png';
 
 interface NodeStatus {
   id: string;
-  status: 'default' | 'success' | 'failed' | 'running';
+  status: 'default' | 'success' | 'failed' | 'running' | 'undone';
   type: 'script' | 'datasource';
   label?: string;
 }
@@ -15,12 +19,10 @@ interface NodeStatus {
 const image = {
   scriptLogo,
   datasourceLogo,
-  success:
-    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
-  failed:
-    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
-  running:
-    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ'
+  successNode,
+  warningNode,
+  undoneNode,
+  runningNode
 };
 
 export default class AlgoNode extends React.Component<{ node?: Node }> {
@@ -46,11 +48,16 @@ export default class AlgoNode extends React.Component<{ node?: Node }> {
           <img src={image.datasourceLogo} alt="datasourceLogo" />
         )}
         <span className="label">{label}</span>
-        <span className="status">
-          {status === 'success' && <img src={image.success} alt="success" />}
-          {status === 'failed' && <img src={image.failed} alt="failed" />}
-          {status === 'running' && <img src={image.running} alt="running" />}
-        </span>
+        <div className="status">
+          {status === 'undone' && <img src={image.undoneNode} alt="未执行" />}
+          {status === 'success' && (
+            <img src={image.successNode} alt="执行成功" />
+          )}
+          {status === 'failed' && (
+            <img src={image.warningNode} alt="执行失败" />
+          )}
+          {status === 'running' && <img src={image.runningNode} alt="执行中" />}
+        </div>
       </div>
     );
   }

packages/yili-dag/src/ContextMenu.tsx

@@ -37,7 +37,7 @@ const ContextMenu: React.FC<IProps> = props => {
   return (
     <Menu
       open={contextMenu !== null}
-      onClose={() => handleClose}
+      onClose={handleClose}
       anchorReference="anchorPosition"
       anchorPosition={
         contextMenu !== null

packages/yili-dag/src/Dag.tsx

@@ -700,6 +700,7 @@ function initNodeData(newNode: Node<Node.Properties>) {
       newNode.data.outputData = undefined;
       newNode.data.inputNumber = 0;
       newNode.data.packageData = undefined;
+      newNode.data.status = 'undone';
       break;
     default:
   }

packages/yili-dag/style/AlgoNode.css

@@ -5,7 +5,7 @@
   height: 100%;
   background-color: #fff;
   border: 1px solid #c2c8d5;
-  border-left: 4px solid #5F95FF;
+  border-left: 4px solid #5f95ff;
   border-radius: 4px;
   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
 }
@@ -30,7 +30,7 @@
   border-left: 4px solid #52c41a;
 }
 .node.failed {
-  border-left: 4px solid #ff4d4f;
+  border-left: 4px solid #f8ac30;
 }
 .node.running .status img {
   animation: spin 1s linear infinite;
@@ -46,17 +46,17 @@
   box-shadow: 0 0 0 4px #ccecc0;
 }
 .x6-node-selected .node.failed {
-  border-color: #ff4d4f;
+  border-color: #f8ac30;
   border-radius: 2px;
-  box-shadow: 0 0 0 4px #fedcdc;
+  box-shadow: 0 0 0 4px #fef9dc;
 }
 
-.x6-edge:hover path:nth-child(2){
+.x6-edge:hover path:nth-child(2) {
   stroke: #1890ff;
   stroke-width: 1px;
 }
 
-.x6-edge-selected path:nth-child(2){
+.x6-edge-selected path:nth-child(2) {
   stroke: #1890ff;
   stroke-width: 1.5px !important;
 }
@@ -68,9 +68,9 @@
 }
 @keyframes spin {
   from {
-      transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-      transform: rotate(360deg);
+    transform: rotate(360deg);
   }
-}
+}