@riil-frontend/component-topology 6.0.0-alpha.27 → 6.0.0-alpha.29

package/es/components/ColorPanel/components/FontColorRange/index.module.scss

@@ -4,8 +4,9 @@
 .content {
   display: flex;
   flex-direction: row;
-  width: 81%;
+  width: 84%;
   margin-left: 6%;
+  overflow: hidden;
   .range {
     flex: 1;
   }

package/es/components/collapse/Collapse.js

@@ -1,7 +1,26 @@
+import _Collapse from "@alifd/next/es/collapse";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "accordion", "fullheight", "noContentPadding"];
 import React from 'react';
+import classNames from 'classnames';
+import Panel from "./Panel";
+import styles from "./Collapse.module.scss";
 
-function Collapse(props) {
-  return /*#__PURE__*/React.createElement("div", null, "Collapse");
+function CollapseWrapper(props) {
+  var _classNames;
+
+  var className = props.className,
+      accordion = props.accordion,
+      fullheight = props.fullheight,
+      noContentPadding = props.noContentPadding,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(_Collapse, _extends({}, otherProps, {
+    accordion: accordion,
+    className: classNames(className, styles.collapse, (_classNames = {}, _classNames[styles.fullheight] = accordion && fullheight, _classNames[styles.contentNoPadding] = noContentPadding, _classNames))
+  }));
 }
 
-export default Collapse;
+CollapseWrapper.Panel = Panel;
+export default CollapseWrapper;

package/es/components/collapse/Collapse.module.scss

@@ -31,6 +31,29 @@
     }
   }
 
+  &.fullheight {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :global {
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
+      .#{$css-prefix}collapse-panel.#{$css-prefix}collapse-panel-expanded {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        
+        .#{$css-prefix}collapse-panel-content {
+          flex: 1;
+          overflow: auto;
+        }
+      }
+    }
+  }
+
   &.contentNoPadding {
 
     :global {

package/es/components/collapse/index.js

@@ -0,0 +1,2 @@
+import Collapse from "./Collapse";
+export default Collapse;

package/es/core/components/AlarmListPanel/components/AlarmListItem.js

@@ -16,9 +16,6 @@ var getNode = function getNode(topo, alarmInfo) {
   var ele = getNodeParents(node);
   topo.getHtTopo().getGraphView().fitData(ele, true, 20, true);
   topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(ele);
-  setTimeout(function () {
-    topo.getHtTopo().getGraphView().setZoom(1.5);
-  }, 1000);
 };
 
 var getNodeParents = function getNodeParents(node) {

package/es/core/editor/components/Sidebar/Sidebar.js

@@ -28,12 +28,14 @@ function Sidebar(props) {
     };
   }, []);
   useEffect(function () {
-    if (graphLoaded) {
+    var _topo$viewProps$urlPa;
+
+    if (graphLoaded && (_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.resourceTabActiveKey) {
       setTimeout(function () {
-        var _topo$viewProps$urlPa;
+        var _topo$viewProps$urlPa2;
 
         topoEditDispatchers.update({
-          resourceTabActiveKey: ((_topo$viewProps$urlPa = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa === void 0 ? void 0 : _topo$viewProps$urlPa.resourceTabActiveKey) || null
+          resourceTabActiveKey: ((_topo$viewProps$urlPa2 = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa2 === void 0 ? void 0 : _topo$viewProps$urlPa2.resourceTabActiveKey) || null
         });
       }, 2000);
     }

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss

@@ -1,5 +1,5 @@
 .container {
   width: 100%;
-  max-height: 400px;
+  height: 100%;
   overflow: auto;
 }

package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js

@@ -1,25 +1,26 @@
-import _Collapse from "@alifd/next/es/collapse";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import CollapsePanel from "../../../../../../components/collapse/Panel";
-import CollapseStyles from "../../../../../../components/collapse/Collapse.module.scss";
+import Collapse from "../../../../../../components/collapse/Collapse";
 import CiTypeImagePanel from "./CiTypeImagePanel";
 import CustomImagePanel from "./CustomImagePanel";
 import { getBasicIcons } from "../../../../../common/icons/icon";
 import ImagePalette from "./HtImagePalette";
+var CollapsePanel = Collapse.Panel;
 export default function ImagePanel(props) {
   var topo = props.topo;
   var basicIcons = useMemo(function () {
     return getBasicIcons(topo, false);
   }, []);
-  return /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['资源图片', '基础图片', '自定义图片'],
+  return /*#__PURE__*/React.createElement(Collapse, {
+    accordion: true,
+    defaultExpandedKeys: ['资源图片'],
     style: {
       border: 'none'
     },
-    className: classNames(CollapseStyles.collapse, CollapseStyles.contentNoPadding)
+    fullheight: true,
+    noContentPadding: true
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u8D44\u6E90\u56FE\u7247",
     title: "\u8D44\u6E90\u56FE\u7247"

package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js

@@ -1,3 +1,6 @@
+/* eslint-disable no-undef */
+
+/* eslint-disable jsx-a11y/alt-text */
 import React from 'react';
 import ColorPanel from "../../../../../../components/ColorPanel";
 import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
@@ -9,12 +12,16 @@ function Content(props) {
       onPickerBlur = props.onPickerBlur,
       lineSizeChange = props.lineSizeChange,
       lineWidth = props.lineWidth;
-  console.log(lineWidth);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "\u7EBF"), /*#__PURE__*/React.createElement("div", {
     style: {
-      width: 200
+      width: 200,
+      display: 'flex',
+      marginTop: '8px'
     }
-  }, /*#__PURE__*/React.createElement(FontColorRange, {
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/\u8FB9\u6846.svg",
+    title: "\u7EBF\u6761\u5BBD\u5EA6"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
     defaultValue: lineWidth,
     min: 1,
     max: 10,
@@ -22,7 +29,8 @@ function Content(props) {
     onChange: lineSizeChange
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginTop: '5px'
+      marginTop: '5px',
+      marginLeft: '-2px'
     }
   }, /*#__PURE__*/React.createElement(ColorPanel, {
     onChange: onChange,

package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js

@@ -20,7 +20,7 @@ function EdgeColorButton(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var _useState2 = useState(2),
+  var _useState2 = useState(),
       lineWidth = _useState2[0],
       setLineWidth = _useState2[1]; // 拓扑图是否加载
 
@@ -32,26 +32,27 @@ function EdgeColorButton(props) {
   var selection = topo.selectionManager.useHtSelection();
 
   var getLines = function getLines(list) {
-    if (list[0] && list[0].isEdgeGroupAgent()) {
-      var data = list[0].getEdgeGroup().getEdges().toArray(); // eslint-disable-next-line eqeqeq
-
-      return data.filter(function (item) {
-        return item.getAttrObject().type == 'line';
-      });
-    } else {
+    // eslint-disable-next-line prefer-const
+    var arr = [];
+    loopEdgesAndChildren(topo, list, function (edge) {
       // eslint-disable-next-line eqeqeq
-      return list.filter(function (item) {
-        return item.getAttrObject().type == 'line';
-      });
-    }
+      if (edge.getAttrObject().type == 'line') {
+        arr.push(edge);
+      }
+    });
+    return arr;
   };
 
   useEffect(function () {
     if (graphLoaded) {
       var edges = getEdgesBySelection(topo);
       var list = getLines(edges);
-      console.log(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
-      setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
+      setLineWidth(0); // eslint-disable-next-line eqeqeq
+
+      if (selection.length == 1 && selection[0].getAttrObject().type == 'line') {
+        setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
+      }
+
       setDisabled(!list.length);
     }
   }, [selection, graphLoaded]);

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -1,3 +1,4 @@
+import _Input from "@alifd/next/es/input";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useState, useEffect } from 'react';
@@ -5,6 +6,7 @@ import WidgetBox from "./WidgetBox";
 import DropdownButton from "./components/DropdownButton";
 import AlignSetting from "../../settings/common/AlignSetting";
 import { isEdge, isLayer } from "../../../../../utils/htElementUtils";
+import styles from "./NodeAlignWidget.module.scss";
 
 function NodeAlignWidget(props) {
   var topo = props.topo,
@@ -13,7 +15,23 @@ function NodeAlignWidget(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 拓扑图是否加载
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      leftInputVal = _useState2[0],
+      setLeftInputVal = _useState2[1];
+
+  var _useState3 = useState(),
+      rightInputVal = _useState3[0],
+      setRightInputVal = _useState3[1];
+
+  var _useState4 = useState(true),
+      leftDisable = _useState4[0],
+      setLeftDisable = _useState4[1];
+
+  var _useState5 = useState(true),
+      rightDisable = _useState5[0],
+      setRightDisable = _useState5[1]; // 拓扑图是否加载
 
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
@@ -21,6 +39,41 @@ function NodeAlignWidget(props) {
 
 
   var selection = topo.selectionManager.useSelection();
+
+  var setSpace = function setSpace(type, num) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !isLayer(ele) && !isEdge(ele);
+    });
+    topo.view.topoClient.htTopoClient.setElementsSpace(nodes, type, num);
+    topo.historyManager.endTransaction();
+  };
+
+  var leftInputChange = function leftInputChange(v) {
+    if (v * 1 < 0) {
+      setLeftInputVal(0);
+    } else if (v * 1 > 10000) {
+      setLeftInputVal(10000);
+    } else {
+      setLeftInputVal(v);
+    }
+
+    setSpace('v', leftInputVal);
+  };
+
+  var rightInputChange = function rightInputChange(v) {
+    if (v * 1 < 0) {
+      setRightInputVal(0);
+    } else if (v * 1 > 10000) {
+      setRightInputVal(10000);
+    } else {
+      setRightInputVal(v);
+    }
+
+    setSpace('h', rightInputVal);
+  };
+
   useEffect(function () {
     if (graphLoaded) {
       var selectionEle = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
@@ -28,8 +81,23 @@ function NodeAlignWidget(props) {
         return !isLayer(ele) && !isEdge(ele);
       });
       setDisabled(nodes.length <= 1);
+      getClickType('none');
     }
   }, [graphLoaded, selection]);
+
+  var getClickType = function getClickType(type) {
+    setLeftDisable(true);
+    setRightDisable(true);
+
+    if (type === 'top' || type === 'middle' || type === 'bottom') {
+      setLeftDisable(false);
+    }
+
+    if (type === 'left' || type === 'center' || type === 'right') {
+      setRightDisable(false);
+    }
+  };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
     alt: ""
@@ -46,7 +114,26 @@ function NodeAlignWidget(props) {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlignSetting, {
-    topo: topo
+    topo: topo,
+    getClickType: getClickType
+  }), /*#__PURE__*/React.createElement(_Input, {
+    disabled: leftDisable,
+    size: "small",
+    placeholder: "\u591A\u4E2A\u503C",
+    className: styles.leftInput,
+    value: leftInputVal,
+    htmlType: "number",
+    maxLength: 5,
+    onChange: leftInputChange
+  }), /*#__PURE__*/React.createElement(_Input, {
+    disabled: rightDisable,
+    size: "small",
+    placeholder: "\u591A\u4E2A\u503C",
+    className: styles.rightInput,
+    value: rightInputVal,
+    htmlType: "number",
+    maxLength: 5,
+    onChange: rightInputChange
   }))));
 }
 

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -0,0 +1,12 @@
+.leftInput{
+  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
+  background-position: right center;
+  width: 100px;
+  margin-right: 10px;
+  margin-left: 5px;
+}
+.rightInput{
+  width: 100px;
+  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
+  background-position: right center;
+}

package/es/core/editor/components/settings/common/AlignSetting/index.js

@@ -2,16 +2,19 @@ import React from 'react';
 import { isEdge, isLayer } from "../../../../../../utils/htElementUtils";
 import AlignTypeList from "./AlignTypeList";
 export default function AlignSetting(props) {
-  var topo = props.topo;
+  var topo = props.topo,
+      getClickType = props.getClickType;
 
   var alignOnChange = function alignOnChange(type) {
+    getClickType(type);
     topo.historyManager.beginTransaction();
     var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
     var nodes = selection.filter(function (ele) {
       return !isLayer(ele) && !isEdge(ele);
     }); // console.info("element--selectList", element, selectList);
 
-    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes); // topo.view.topoClient.htTopoClient.setElementsSpace(nodes,'h',300)
+
     topo.historyManager.endTransaction();
   };
 

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.27" === 'string' ? "6.0.0-alpha.27" : null;
+var version = typeof "6.0.0-alpha.29" === 'string' ? "6.0.0-alpha.29" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/components/ColorPanel/components/FontColorRange/index.module.scss

@@ -4,8 +4,9 @@
 .content {
   display: flex;
   flex-direction: row;
-  width: 81%;
+  width: 84%;
   margin-left: 6%;
+  overflow: hidden;
   .range {
     flex: 1;
   }

package/lib/components/collapse/Collapse.js

@@ -5,11 +5,36 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
-function Collapse(props) {
-  return /*#__PURE__*/_react["default"].createElement("div", null, "Collapse");
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Panel = _interopRequireDefault(require("./Panel"));
+
+var _CollapseModule = _interopRequireDefault(require("./Collapse.module.scss"));
+
+var _excluded = ["className", "accordion", "fullheight", "noContentPadding"];
+
+function CollapseWrapper(props) {
+  var _classNames;
+
+  var className = props.className,
+      accordion = props.accordion,
+      fullheight = props.fullheight,
+      noContentPadding = props.noContentPadding,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], (0, _extends2["default"])({}, otherProps, {
+    accordion: accordion,
+    className: (0, _classnames["default"])(className, _CollapseModule["default"].collapse, (_classNames = {}, _classNames[_CollapseModule["default"].fullheight] = accordion && fullheight, _classNames[_CollapseModule["default"].contentNoPadding] = noContentPadding, _classNames))
+  }));
 }
 
-var _default = Collapse;
+CollapseWrapper.Panel = _Panel["default"];
+var _default = CollapseWrapper;
 exports["default"] = _default;

package/lib/components/collapse/Collapse.module.scss

@@ -31,6 +31,29 @@
     }
   }
 
+  &.fullheight {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :global {
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
+      .#{$css-prefix}collapse-panel.#{$css-prefix}collapse-panel-expanded {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        
+        .#{$css-prefix}collapse-panel-content {
+          flex: 1;
+          overflow: auto;
+        }
+      }
+    }
+  }
+
   &.contentNoPadding {
 
     :global {

package/lib/components/collapse/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Collapse = _interopRequireDefault(require("./Collapse"));
+
+var _default = _Collapse["default"];
+exports["default"] = _default;

package/lib/core/components/AlarmListPanel/components/AlarmListItem.js

@@ -32,9 +32,6 @@ var getNode = function getNode(topo, alarmInfo) {
   var ele = getNodeParents(node);
   topo.getHtTopo().getGraphView().fitData(ele, true, 20, true);
   topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(ele);
-  setTimeout(function () {
-    topo.getHtTopo().getGraphView().setZoom(1.5);
-  }, 1000);
 };
 
 var getNodeParents = function getNodeParents(node) {

package/lib/core/editor/components/Sidebar/Sidebar.js

@@ -44,12 +44,14 @@ function Sidebar(props) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (graphLoaded) {
+    var _topo$viewProps$urlPa;
+
+    if (graphLoaded && (_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.resourceTabActiveKey) {
       setTimeout(function () {
-        var _topo$viewProps$urlPa;
+        var _topo$viewProps$urlPa2;
 
         topoEditDispatchers.update({
-          resourceTabActiveKey: ((_topo$viewProps$urlPa = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa === void 0 ? void 0 : _topo$viewProps$urlPa.resourceTabActiveKey) || null
+          resourceTabActiveKey: ((_topo$viewProps$urlPa2 = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa2 === void 0 ? void 0 : _topo$viewProps$urlPa2.resourceTabActiveKey) || null
         });
       }, 2000);
     }

package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss

@@ -1,5 +1,5 @@
 .container {
   width: 100%;
-  max-height: 400px;
+  height: 100%;
   overflow: auto;
 }

package/lib/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js

@@ -5,8 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = ImagePanel;
 
-var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
-
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
 var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
@@ -15,9 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Panel = _interopRequireDefault(require("../../../../../../components/collapse/Panel"));
-
-var _CollapseModule = _interopRequireDefault(require("../../../../../../components/collapse/Collapse.module.scss"));
+var _Collapse = _interopRequireDefault(require("../../../../../../components/collapse/Collapse"));
 
 var _CiTypeImagePanel = _interopRequireDefault(require("./CiTypeImagePanel"));
 
@@ -31,27 +27,31 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var CollapsePanel = _Collapse["default"].Panel;
+
 function ImagePanel(props) {
   var topo = props.topo;
   var basicIcons = (0, _react.useMemo)(function () {
     return (0, _icon2.getBasicIcons)(topo, false);
   }, []);
-  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['资源图片', '基础图片', '自定义图片'],
+  return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+    accordion: true,
+    defaultExpandedKeys: ['资源图片'],
     style: {
       border: 'none'
     },
-    className: (0, _classnames["default"])(_CollapseModule["default"].collapse, _CollapseModule["default"].contentNoPadding)
-  }, /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    fullheight: true,
+    noContentPadding: true
+  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u8D44\u6E90\u56FE\u7247",
     title: "\u8D44\u6E90\u56FE\u7247"
-  }, /*#__PURE__*/_react["default"].createElement(_CiTypeImagePanel["default"], props)), /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_CiTypeImagePanel["default"], props)), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u57FA\u7840\u56FE\u7247",
     title: "\u57FA\u7840\u56FE\u7247"
   }, /*#__PURE__*/_react["default"].createElement(_HtImagePalette["default"], {
     icons: basicIcons,
     topo: topo
-  })), /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  })), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
     title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
     extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {

package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js

@@ -11,6 +11,9 @@ var _ColorPanel = _interopRequireDefault(require("../../../../../../components/C
 
 var _FontColorRange = _interopRequireDefault(require("../../../../../../components/ColorPanel/components/FontColorRange"));
 
+/* eslint-disable no-undef */
+
+/* eslint-disable jsx-a11y/alt-text */
 function Content(props) {
   var topo = props.topo,
       onChange = props.onChange,
@@ -18,12 +21,16 @@ function Content(props) {
       onPickerBlur = props.onPickerBlur,
       lineSizeChange = props.lineSizeChange,
       lineWidth = props.lineWidth;
-  console.log(lineWidth);
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, "\u7EBF"), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      width: 200
+      width: 200,
+      display: 'flex',
+      marginTop: '8px'
     }
-  }, /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/\u8FB9\u6846.svg",
+    title: "\u7EBF\u6761\u5BBD\u5EA6"
+  }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
     defaultValue: lineWidth,
     min: 1,
     max: 10,
@@ -31,7 +38,8 @@ function Content(props) {
     onChange: lineSizeChange
   })), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      marginTop: '5px'
+      marginTop: '5px',
+      marginLeft: '-2px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
     onChange: onChange,