@riil-frontend/component-topology 3.5.0-a.9 → 3.5.2

package/es/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer.js

@@ -6,15 +6,15 @@ import _Collapse from "@alifd/next/es/collapse";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useEffect, useRef } from "react";
 import topoService from "@riil-frontend/component-topology-common/es/services/topo";
-import { RESOURCE_LIMIT_TYPES } from "../../../../../../constants/ResourceTypeLimit"; // import { Drawer } from "../../../../../../components/Drawer";
-
-import { useBoolean } from "ahooks";
+import { RESOURCE_LIMIT_TYPES } from "../../../../../../constants/ResourceTypeLimit";
+import _ from "lodash";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import TopoCenterEvent from "../../../../../event";
 import EditLinkInfo from "./components/editLinkInfo";
 import styles from "./index.module.scss";
 import service from "./server";
 import { clone } from "../../../../../../utils/copyUtil";
+import { getInterfaceObject } from "../../../../../../core/models/utils/linkUtils";
 import { getEdgesBetweenNodes, getNodes } from "../../../../../../utils/htElementUtils";
 var CollapsePanel = _Collapse.Panel;
 
@@ -52,18 +52,22 @@ function AddLinkDrawer(props) {
 
   var _useState4 = useState(),
       sourceIFDoc = _useState4[0],
-      setSourceIFDoc = _useState4[1]; // 保存后更新拓扑图状态
+      setSourceIFDoc = _useState4[1];
+
+  var _useState5 = useState(),
+      targetIFDoc = _useState5[0],
+      setTargetIFDoc = _useState5[1]; // 保存后更新拓扑图状态
 
 
-  var _useState5 = useState([]),
-      ciIdsConnectable = _useState5[0],
-      setCiIdsConnectable = _useState5[1];
+  var _useState6 = useState([]),
+      ciIdsConnectable = _useState6[0],
+      setCiIdsConnectable = _useState6[1];
 
   var linkNodesRef = useRef();
 
   var getPortsById = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
-      var result, portsDoc, ports;
+      var result, links, ifTypes, ifDoc, usedPorts, portsDoc, ports;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -73,14 +77,39 @@ function AddLinkDrawer(props) {
 
             case 2:
               result = _context.sent;
-              // rlog.debug("端口列表", result);
-              //const list = result[id];
+              _context.next = 5;
+              return service.queryLinksByNodeId(id);
+
+            case 5:
+              links = _context.sent;
+              ifTypes = result.map(function (item) {
+                return item.type;
+              });
+              console.log("端口类型列表", ifTypes);
+              _context.next = 10;
+              return getInterfaceObject(ifTypes);
+
+            case 10:
+              ifDoc = _context.sent;
+              console.log("端口类型字典", ifDoc);
+              usedPorts = [];
+              links.data.map(function (link) {
+                usedPorts.push(link.attributes.destination_id);
+                usedPorts.push(link.attributes.source_id);
+              });
+              usedPorts = _.uniq(usedPorts);
+              rlog.debug("端口列表", result, links); //const list = result[id];
+
               portsDoc = {};
               ports = result.map(function (item) {
+                var _ifDoc$item$type$disp, _ifDoc$item$type;
+
                 var obj = {
                   value: item.id,
                   label: item.name,
                   type: item.type,
+                  typeName: (_ifDoc$item$type$disp = (_ifDoc$item$type = ifDoc[item.type]) === null || _ifDoc$item$type === void 0 ? void 0 : _ifDoc$item$type.displayName) !== null && _ifDoc$item$type$disp !== void 0 ? _ifDoc$item$type$disp : "",
+                  disabled: usedPorts.indexOf(item.id) >= 0,
                   ratedBandwidth: parseInt(item.ratedBandwidth, 10)
                 };
                 portsDoc[item.id] = obj;
@@ -91,7 +120,7 @@ function AddLinkDrawer(props) {
                 portsDoc: portsDoc
               });
 
-            case 6:
+            case 19:
             case "end":
               return _context.stop();
           }
@@ -112,28 +141,30 @@ function AddLinkDrawer(props) {
           switch (_context2.prev = _context2.next) {
             case 0:
               linkNodesRef.current = e; // const { type, data } = e;
-              // rlog.debug("接到打开创建链路抽屉信息", e);
 
+              rlog.debug("接到打开创建链路抽屉信息", e);
               setIsAddMode(true); // setTrue();
 
-              _context2.prev = 2;
-              _context2.next = 5;
+              _context2.prev = 3;
+              _context2.next = 6;
               return getPortsById(e.source._attrObject.id);
 
-            case 5:
+            case 6:
               sourcePorts = _context2.sent;
-              _context2.next = 8;
+              _context2.next = 9;
               return getPortsById(e.target._attrObject.id);
 
-            case 8:
+            case 9:
               targetPorts = _context2.sent;
+              setSourceIFDoc(sourcePorts.portsDoc);
+              setTargetIFDoc(targetPorts.portsDoc);
               source = translationNode(e.source, sourcePorts);
               target = translationNode(e.target, targetPorts);
               editDispatchers.update({
                 addLinkIsOpen: true,
                 currentLink: null
               });
-              connect_type = target.ciType !== "customNode" && target.ipAddress ? "phy" : "exit";
+              connect_type = target.ciType !== "customNode" && target.ipAddress && targetPorts.ports.length > 0 ? "phy" : "exit";
               setLink({
                 source: source,
                 target: target,
@@ -152,20 +183,20 @@ function AddLinkDrawer(props) {
                   connect_type: connect_type
                 }
               });
-              _context2.next = 19;
+              _context2.next = 22;
               break;
 
-            case 16:
-              _context2.prev = 16;
-              _context2.t0 = _context2["catch"](2);
+            case 19:
+              _context2.prev = 19;
+              _context2.t0 = _context2["catch"](3);
               rlog.error("出现异常", _context2.t0);
 
-            case 19:
+            case 22:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[2, 16]]);
+      }, _callee2, null, [[3, 19]]);
     }));
 
     return function handleEvent(_x2) {
@@ -201,11 +232,13 @@ function AddLinkDrawer(props) {
             case 6:
               targetPorts = _context3.sent;
               setSourceIFDoc(sourcePorts.portsDoc);
+              setTargetIFDoc(targetPorts.portsDoc);
               connect_type = currentLink.attributes["network_link.connect_type"] === "exit" ? "exit" : "phy";
               setLink({
                 source: {
                   id: currentLink.source,
                   name: currentLink.attributes["network_link.source_device_id_object"].displayName,
+                  ciId: currentLink.attributes["network_link.source_device_id"],
                   ipAddress: currentLink.attributes["network_link.source_ipv4"],
                   ciName: (_currentLink$attribut = currentLink.attributes.source_type_object) === null || _currentLink$attribut === void 0 ? void 0 : _currentLink$attribut.displayName,
                   ciType: currentLink.attributes.source_type,
@@ -216,19 +249,21 @@ function AddLinkDrawer(props) {
                 target: {
                   id: currentLink.target,
                   name: currentLink.attributes["network_link.destination_device_id_object"].displayName,
+                  ciId: currentLink.attributes["network_link.destination_device_id"],
                   ipAddress: currentLink.attributes["network_link.destination_ipv4"],
                   ciName: (_currentLink$attribut2 = currentLink.attributes.destination_type_object) === null || _currentLink$attribut2 === void 0 ? void 0 : _currentLink$attribut2.displayName,
-                  ciType: currentLink.attributes.destination_type !== "" ? currentLink.attributes.destination_type : "customNode",
+                  ciType: currentLink.target !== "" ? currentLink.attributes.destination_type : "customNode",
                   interfaceTarget: currentLink.interfaceTarget,
                   ports: (_targetPorts$ports = targetPorts.ports) !== null && _targetPorts$ports !== void 0 ? _targetPorts$ports : [],
                   portsDoc: targetPorts.portsDoc
                 },
                 attributes: _extends({}, currentLink.attributes, {
+                  linkId: currentLink.id,
                   connect_type: connect_type
                 })
               });
 
-            case 10:
+            case 11:
             case "end":
               return _context3.stop();
           }
@@ -320,6 +355,7 @@ function AddLinkDrawer(props) {
     return {
       id: attrObject.id,
       name: attrObject.name,
+      ciId: attrObject.id,
       ipAddress: attrObject.ipAddress,
       ciName: (_topo$ciTyeCache$getC = (_topo$ciTyeCache$getC2 = topo.ciTyeCache.getCiType(attrObject.ciType)) === null || _topo$ciTyeCache$getC2 === void 0 ? void 0 : _topo$ciTyeCache$getC2.displayName) !== null && _topo$ciTyeCache$getC !== void 0 ? _topo$ciTyeCache$getC : attrObject.customName,
       ciType: (_attrObject$ciType = attrObject.ciType) !== null && _attrObject$ciType !== void 0 ? _attrObject$ciType : "customNode",
@@ -366,7 +402,7 @@ function AddLinkDrawer(props) {
         var edge = htTopo.createEdge(source, target, linkData);
 
         if (linkType === "exit" && target.getTag() === undefined) {
-          // rlog.debug("addLinkToGraph-exit-target", target, target.getTag());
+          // rlog.debug("addLinkToGraph-export-target", target, target.getTag());
           target.a("name", targetName);
         }
       }
@@ -377,8 +413,9 @@ function AddLinkDrawer(props) {
     }
   };
 
-  var mergeExitLinkData = function mergeExitLinkData(data, attributes) {
-    return {
+  var mergeExportLinkData = function mergeExportLinkData(data, attributes) {
+    console.log("mergeExportLinkData", data, attributes);
+    return _extends({}, attributes, {
       id: data.id,
       name: data.name,
       source: data["network_link.source_device_id"],
@@ -387,7 +424,7 @@ function AddLinkDrawer(props) {
       interfaceSource: data["source_id"],
       interfaceTarget: data["destination_id"],
       ciType: data.ciType,
-      attributes: _extends({}, attributes, {
+      attributes: _extends({}, attributes.attributes, {
         display_name: data.display_name,
         name: data.name,
         "network_link.actual_bandwidth": data["network_link.actual_bandwidth"],
@@ -399,9 +436,12 @@ function AddLinkDrawer(props) {
         use: data.use,
         source_id_object: {
           displayName: sourceIFDoc[data.source_id].label
+        },
+        destination_id_object: {
+          displayName: targetIFDoc[data.destination_id].label
         }
       })
-    };
+    });
   };
 
   var onSave = /*#__PURE__*/function () {
@@ -447,14 +487,14 @@ function AddLinkDrawer(props) {
               _context5.prev = 15;
 
               if (!result) {
-                _context5.next = 35;
+                _context5.next = 36;
                 break;
               }
 
               config = topo.resourceConfig.getConfigFromHt(); // 新建后显示到图上
 
               if (!isAddMode) {
-                _context5.next = 31;
+                _context5.next = 32;
                 break;
               }
 
@@ -477,6 +517,7 @@ function AddLinkDrawer(props) {
               linkData = elements.find(function (element) {
                 return element.id === result;
               });
+              console.log("创建成功-parm,linkData", parm, linkData);
               addLinkToGraph({
                 linkData: clone(linkData),
                 linkType: linkType,
@@ -485,10 +526,10 @@ function AddLinkDrawer(props) {
 
               _Message.success("创建成功");
 
-              _context5.next = 33;
+              _context5.next = 34;
               break;
 
-            case 31:
+            case 32:
               // console.log("保存编辑信息", data, linkType);
               if (linkType === "exit") {
                 edge = topo.getGraphView().dm().sm().ld();
@@ -504,7 +545,7 @@ function AddLinkDrawer(props) {
                 linkAttrKey = links.findIndex(function (item) {
                   return item.id === aobj.id;
                 });
-                newLinkData = mergeExitLinkData(edge.getAttrObject(), links[linkAttrKey]);
+                newLinkData = mergeExportLinkData(edge.getAttrObject(), links[linkAttrKey]);
                 newLinks = clone(links);
                 newLinks.splice(linkAttrKey, 1, newLinkData);
                 newData = _extends({}, topoState.data, {
@@ -517,27 +558,27 @@ function AddLinkDrawer(props) {
 
               _Message.success("保存成功");
 
-            case 33:
+            case 34:
               editDispatchers.update({
                 addLinkIsOpen: false,
                 currentLink: null
               });
               topo.linkDynamicStyleExecutor.execute();
 
-            case 35:
-              _context5.next = 39;
+            case 36:
+              _context5.next = 40;
               break;
 
-            case 37:
-              _context5.prev = 37;
+            case 38:
+              _context5.prev = 38;
               _context5.t0 = _context5["catch"](15);
 
-            case 39:
+            case 40:
             case "end":
               return _context5.stop();
           }
         }
-      }, _callee5, null, [[15, 37]]);
+      }, _callee5, null, [[15, 38]]);
     }));
 
     return function onSave(_x3) {

package/es/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/components/editLinkInfo.js

@@ -11,6 +11,7 @@ import _Form from "@alifd/next/es/form";
 import _Radio from "@alifd/next/es/radio";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useEffect } from "react";
+import validator from "validator";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 var RadioGroup = _Radio.Group;
 var FormItem = _Form.Item;
@@ -24,27 +25,17 @@ function parseValues(values) {
 }
 
 export default function EditLinkInfo(props) {
+  var _sourceValue$ipAddres2, _sourceValue$portsDoc5, _sourceValue$portsDoc6, _targetValue$portsDoc5, _targetValue$portsDoc6;
+
   var topo = props.topo,
       lineData = props.lineData,
       onClose = props.onClose,
-      addLinkIsOpen = props.addLinkIsOpen,
       onSave = props.onSave,
       isAdd = props.isAdd,
       loading = props.loading;
-
-  var _topo$store$useModel = topo.store.useModel("topoMod"),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
-
-  var _topo$store$useModel2 = topo.store.useModel("topoBizMod"),
-      bizState = _topo$store$useModel2[0],
-      bizDispatchers = _topo$store$useModel2[1]; // const { resAndMetrics } = topoState;
-  // const { resAndMetrics } = bizState;
-
-
   var source = lineData.source,
       target = lineData.target,
-      attributes = lineData.attributes; // rlog.debug("lineData-----init", source, target, targetValue.portsDoc);
+      attributes = lineData.attributes;
 
   var _useState = useState(attributes),
       valus = _useState[0],
@@ -58,9 +49,9 @@ export default function EditLinkInfo(props) {
       targetValue = _useState3[0],
       setTarget = _useState3[1];
 
-  var _useState4 = useState(true),
-      connectEnable = _useState4[0],
-      setConnectEnable = _useState4[1];
+  var _useState4 = useState(),
+      ratedBandwidth = _useState4[0],
+      setRatedBandwidth = _useState4[1];
 
   var fieldOnChange = function fieldOnChange(name, value) {
     var newValues = field.getValues();
@@ -76,7 +67,6 @@ export default function EditLinkInfo(props) {
 
   useEffect(function () {
     setValus(attributes);
-    rlog.debug("useEffect", source, target, attributes);
     setSource(source);
     setTarget(target);
     field.setValues(attributes);
@@ -101,7 +91,7 @@ export default function EditLinkInfo(props) {
 
     if (type === "exit") {
       connect = "exit";
-      support = "m.exit_link";
+      support = "m.export_link";
     }
 
     return {
@@ -112,8 +102,11 @@ export default function EditLinkInfo(props) {
 
   var connectHandleChange = function connectHandleChange(v) {
     field.setValue("connect_type", v);
+    field.reset("destination_id");
   };
 
+  var getRatedBandwidth = function getRatedBandwidth() {};
+
   var portsHandleChange = function portsHandleChange(type, value) {
     var _sourceValue$portsDoc, _sourceValue$portsDoc2, _targetValue$portsDoc, _targetValue$portsDoc2;
 
@@ -131,27 +124,49 @@ export default function EditLinkInfo(props) {
     } // rlog.debug("network_link.actual_bandwidth", actualBandwidth);
 
 
+    setRatedBandwidth(actualBandwidth);
     field.setValue("network_link.actual_bandwidth", actualBandwidth);
   };
 
+  var checkName = function checkName(rule, value, callback) {
+    // const { validate, getValue } = field;
+    var displayName = value;
+    var links = topo.getEdges();
+    var usedNames = [];
+    links.map(function (link) {
+      console.log('checkName', link.id, lineData);
+
+      if (link.dtype === "link" && link.name && link.id !== lineData.attributes.linkId) {
+        usedNames.push(link.name);
+      }
+    });
+
+    if (usedNames.indexOf(displayName) >= 0) {
+      console.log("setError", checkName, usedNames, displayName); // field.setError("display_name", "链路名称重复");
+
+      return callback("链路名称重复");
+    } else {
+      return callback();
+    }
+  };
+
   var saveHandleChange = function saveHandleChange() {
     field.validate(function (errors, values) {
       if (errors) {
-        rlog.debug("saveHandleChange-error", errors, values);
+        rlog.error("saveHandleChange-error", errors, values);
       } else {
         var _valus$destination_id, _sourceValue$portsDoc3, _sourceValue$portsDoc4, _targetValue$portsDoc3, _targetValue$portsDoc4, _targetValue$ipAddres, _sourceValue$ipAddres, _targetValue$id;
 
-        rlog.debug("saveHandleChange", valus, source, target);
         var sourceId = valus["source_id"];
         var destinationId = (_valus$destination_id = valus["destination_id"]) !== null && _valus$destination_id !== void 0 ? _valus$destination_id : "";
         var sourceType = (_sourceValue$portsDoc3 = (_sourceValue$portsDoc4 = sourceValue.portsDoc[sourceId]) === null || _sourceValue$portsDoc4 === void 0 ? void 0 : _sourceValue$portsDoc4.type) !== null && _sourceValue$portsDoc3 !== void 0 ? _sourceValue$portsDoc3 : "";
         var destinationType = (_targetValue$portsDoc3 = (_targetValue$portsDoc4 = targetValue.portsDoc[destinationId]) === null || _targetValue$portsDoc4 === void 0 ? void 0 : _targetValue$portsDoc4.type) !== null && _targetValue$portsDoc3 !== void 0 ? _targetValue$portsDoc3 : "";
         var typeJudge = linkTypeJudge(sourceType, destinationType, valus["connect_type"]);
-        var destination_ipv4 = valus["connect_type"] !== "exit" ? (_targetValue$ipAddres = targetValue.ipAddress) !== null && _targetValue$ipAddres !== void 0 ? _targetValue$ipAddres : valus["network_link.destination_ipv4"] : valus["network_link.destination_ipv4"];
+        var destination_ipv4 = (_targetValue$ipAddres = targetValue.ipAddress) !== null && _targetValue$ipAddres !== void 0 ? _targetValue$ipAddres : valus["network_link.destination_ipv4"];
         var obj = {
           display_name: valus["display_name"],
           // 链路名称
-          name: valus["display_name"],
+          name: isAdd ? valus["display_name"] : attributes["name"],
           // 链路名称
           "network_link.source_ipv4": (_sourceValue$ipAddres = sourceValue.ipAddress) !== null && _sourceValue$ipAddres !== void 0 ? _sourceValue$ipAddres : valus["network_link.source_ipv4"],
           // 源IP
@@ -190,6 +205,17 @@ export default function EditLinkInfo(props) {
           obj["destination_type"] = "";
         }
 
+        if (isAdd) {
+          obj["network_link.network_category"] = "CAN";
+          obj["network_link.work_mode"] = "AandS"; // 工作模式
+
+          obj.rated_bandwidth = ratedBandwidth; // 额定带宽
+
+          obj["network_link.role"] = "master";
+        }
+
+        console.log("保存数据-obj", obj);
+
         if (isAdd) {
           onSave(obj);
         } else {
@@ -261,17 +287,16 @@ export default function EditLinkInfo(props) {
   }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u6E90\u8282\u70B9IP"
-  }), sourceValue.ipAddress ? /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles.label
-  }, sourceValue.ipAddress) : /*#__PURE__*/React.createElement(_Input, {
-    placeholder: "\u8BF7\u8F93\u5165",
-    name: "network_link.source_ipv4",
-    maxLength: 128
-  }))), /*#__PURE__*/React.createElement(Col, {
+  }, (_sourceValue$ipAddres2 = sourceValue.ipAddress) !== null && _sourceValue$ipAddres2 !== void 0 ? _sourceValue$ipAddres2 : '-'))), /*#__PURE__*/React.createElement(Col, {
     span: "12"
   }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
     labelAlign: labelAlign,
-    label: "\u76EE\u7684\u8282\u70B9IP"
+    label: "\u76EE\u7684\u8282\u70B9IP",
+    pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
+    patternTrigger: "onBlur",
+    patternMessage: "IP\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E"
   }), targetIpComp(target)))), /*#__PURE__*/React.createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/React.createElement(Col, {
@@ -281,7 +306,7 @@ export default function EditLinkInfo(props) {
     label: "\u6E90\u7AEF\u53E3",
     required: true,
     requiredMessage: "\u6E90\u7AEF\u53E3\u4E0D\u80FD\u4E3A\u7A7A"
-  }), sourceValue.ipAddress ? /*#__PURE__*/React.createElement(_Select, {
+  }), sourceValue.ciId ? /*#__PURE__*/React.createElement(_Select, {
     name: "source_id",
     disabled: sourceValue.ports.length === 0,
     className: styles.selectList,
@@ -313,14 +338,14 @@ export default function EditLinkInfo(props) {
     label: "\u8D44\u6E90\u7C7B\u578B"
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.label
-  }, sourceValue.ciName))), /*#__PURE__*/React.createElement(Col, {
+  }, (_sourceValue$portsDoc5 = (_sourceValue$portsDoc6 = sourceValue.portsDoc[valus.source_id]) === null || _sourceValue$portsDoc6 === void 0 ? void 0 : _sourceValue$portsDoc6.typeName) !== null && _sourceValue$portsDoc5 !== void 0 ? _sourceValue$portsDoc5 : sourceValue.ciName))), /*#__PURE__*/React.createElement(Col, {
     span: "12"
   }, /*#__PURE__*/React.createElement(FormItem, _extends({}, formItemLayout, {
     labelAlign: labelAlign,
     label: "\u8D44\u6E90\u7C7B\u578B"
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.label
-  }, targetValue.ciName)))), /*#__PURE__*/React.createElement(Row, {
+  }, (_targetValue$portsDoc5 = (_targetValue$portsDoc6 = targetValue.portsDoc[valus.destination_id]) === null || _targetValue$portsDoc6 === void 0 ? void 0 : _targetValue$portsDoc6.typeName) !== null && _targetValue$portsDoc5 !== void 0 ? _targetValue$portsDoc5 : targetValue.ciName)))), /*#__PURE__*/React.createElement(Row, {
     gutter: "16"
   }, /*#__PURE__*/React.createElement(Col, {
     span: "24"
@@ -332,7 +357,8 @@ export default function EditLinkInfo(props) {
     requiredTrigger: "onBlur",
     pattern: /^[^'"\\%]+[^'"\\%]*[^'"\\%]*$/,
     patternTrigger: "onBlur",
-    patternMessage: "\u4E0D\u5141\u8BB8\u8F93\u5165\u2018\u3001\u201C\u3001\\\u3001%"
+    patternMessage: "\u4E0D\u5141\u8BB8\u8F93\u5165\u2018\u3001\u201C\u3001\\\u3001%",
+    validator: checkName
   }), /*#__PURE__*/React.createElement(_Input, {
     placeholder: "\u8BF7\u8F93\u5165",
     name: "display_name",
@@ -352,7 +378,7 @@ export default function EditLinkInfo(props) {
   }, /*#__PURE__*/React.createElement(_Radio, {
     id: "phy",
     value: "phy",
-    disabled: target.ciType === "customNode" || !targetValue.ipAddress
+    disabled: target.ciType === "customNode" || !targetValue.ipAddress || targetValue.ports.length === 0
   }, "\u7269\u7406/\u805A\u5408"), /*#__PURE__*/React.createElement(_Radio, {
     id: "exit",
     value: "exit"

package/es/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/index.module.scss

@@ -1,3 +1,12 @@
+@import '~@alifd/next/variables.scss';
+
 .drawer {
   width: 504px;
+
+  :global {
+    .#{$css-prefix}drawer-body {
+      padding: 20px 24px 50px 20px;
+    }
+  }
+
 }