@riil-frontend/component-topology 2.3.20-dev.1 → 2.4.1

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//345/233/276/346/240/207/351/200/211/346/213/251.md

@@ -7,18 +7,18 @@ order: 3
 
 图标原比例显示，垂直居中
 
-- onChange
 - defaultValue
 - value
+- onChange `function(value)`
 - dataSource
     ```
 [
     {
-        label: '图标库1',
+        name: '图标库1',
         icons: [
-           {value: '1', label: '图标1', url: ''},
-           {value: '2', label: '图标2', url: ''},
-           {value: '3', label: '图标3', url: ''}
+           {id: '1', name: '图标1', url: ''},
+           {id: '2', name: '图标2', url: ''},
+           {id: '3', name: '图标3', url: ''}
         ]
     },
 ]

package/es/components/BatchAttrMetric/index.js

@@ -1,4 +1,4 @@
-import _Drawer from "@alifd/next/es/drawer";
+import _Drawer from "@alifd/next/lib/drawer";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["saveCb"],

package/es/components/BatchAttrMetric/setting.js

@@ -1,7 +1,7 @@
-import _Button from "@alifd/next/es/button";
-import _Table from "@alifd/next/es/table";
-import _Grid from "@alifd/next/es/grid";
-import _Message from "@alifd/next/es/message";
+import _Button from "@alifd/next/lib/button";
+import _Table from "@alifd/next/lib/table";
+import _Grid from "@alifd/next/lib/grid";
+import _Message from "@alifd/next/lib/message";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["defaultSet", "dataType"];

package/es/components/BatchAttrMetric/utils.js

@@ -1,5 +1,5 @@
-import _Balloon from "@alifd/next/es/balloon";
-import _Button from "@alifd/next/es/button";
+import _Balloon from "@alifd/next/lib/balloon";
+import _Button from "@alifd/next/lib/button";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["list"];

package/es/components/Drawer/index.js

@@ -1,6 +1,6 @@
-import _Drawer from "@alifd/next/es/drawer";
+import _Drawer from "@alifd/next/lib/drawer";
 import _extends from "@babel/runtime/helpers/extends";
-import _Button from "@alifd/next/es/button";
+import _Button from "@alifd/next/lib/button";
 import React from 'react';
 import styles from "./index.module.scss";
 var headerStyle = {
@@ -32,7 +32,8 @@ var Drawer = function Drawer(props) {
     width: "40%",
     headerStyle: headerStyle,
     bodyStyle: bodyStyle,
-    closeMode: ['close', 'esc']
+    closeMode: ['close', 'esc'],
+    className: styles.drawer
   }, drawerProps, {
     visible: visible,
     onClose: onClose

package/es/components/Drawer/index.module.scss

@@ -1,3 +1,16 @@
+.drawer {
+  & > div {
+    display: flex;
+  }
+
+  :global {
+    .next-drawer-body {
+      flex: 1;
+    }
+  }
+}
+
+
 .footer {
   position: absolute;
   bottom: 0;

package/es/components/FormTable/index.js

@@ -1,7 +1,7 @@
-import _Table from "@alifd/next/es/table";
-import _Button from "@alifd/next/es/button";
+import _Table from "@alifd/next/lib/table";
+import _Button from "@alifd/next/lib/button";
 import _extends from "@babel/runtime/helpers/extends";
-import _Search from "@alifd/next/es/search";
+import _Search from "@alifd/next/lib/search";
 import React from 'react';
 import { SchemaForm, SchemaMarkupField as Field } from '@formily/next';
 import Pagination from '@riil-frontend/component-pager';

package/es/components/IndexSettingDrawer/CiList.js

@@ -1,4 +1,4 @@
-import _List from "@alifd/next/es/list";
+import _List from "@alifd/next/lib/list";
 import React from 'react';
 import ListItem from "./CiListItem";
 import styles from "./index.module.scss";

package/es/components/IndexSettingDrawer/CiListItem.js

@@ -1,4 +1,4 @@
-import _Icon from "@alifd/next/es/icon";
+import _Icon from "@alifd/next/lib/icon";
 import React from 'react';
 import styles from "./index.module.scss";
 

package/es/components/IndexSettingDrawer/IndexList.js

@@ -1,4 +1,4 @@
-import _Table from "@alifd/next/es/table";
+import _Table from "@alifd/next/lib/table";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useState } from 'react';
 import NoDataPage from '@riil-frontend/component-topology-utils/es/components/NoDataPage';

package/es/components/IndexSettingDrawer/index.js

@@ -1,4 +1,4 @@
-import _Divider from "@alifd/next/es/divider";
+import _Divider from "@alifd/next/lib/divider";
 import React, { useEffect, useRef } from 'react';
 import { store as pageStore } from 'ice/TopoCenter';
 import { isAvailableArray } from '@riil-frontend/utils';

package/es/components/Link/form.js

@@ -1,11 +1,11 @@
-import _Button from "@alifd/next/es/button";
-import _Icon from "@alifd/next/es/icon";
+import _Button from "@alifd/next/lib/button";
+import _Icon from "@alifd/next/lib/icon";
 import _extends from "@babel/runtime/helpers/extends";
-import _Form from "@alifd/next/es/form";
-import _Field from "@alifd/next/es/field";
+import _Form from "@alifd/next/lib/form";
+import _Field from "@alifd/next/lib/field";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import _Grid from "@alifd/next/es/grid";
-import _Select from "@alifd/next/es/select";
+import _Grid from "@alifd/next/lib/grid";
+import _Select from "@alifd/next/lib/select";
 var _excluded = ["isAddMode", "link"];
 import React, { forwardRef, useState, useImperativeHandle, useEffect, useCallback } from 'react';
 import { isAvailableArray } from '@riil-frontend/utils';

package/es/components/Link/index.js

@@ -1,5 +1,5 @@
-import _Drawer from "@alifd/next/es/drawer";
-import _Loading from "@alifd/next/es/loading";
+import _Drawer from "@alifd/next/lib/drawer";
+import _Loading from "@alifd/next/lib/loading";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';

package/es/components/Link/setting.js

@@ -1,9 +1,9 @@
-import _Loading from "@alifd/next/es/loading";
-import _Message from "@alifd/next/es/message";
+import _Loading from "@alifd/next/lib/loading";
+import _Message from "@alifd/next/lib/message";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
-import _Button from "@alifd/next/es/button";
-import _Icon from "@alifd/next/es/icon";
+import _Button from "@alifd/next/lib/button";
+import _Icon from "@alifd/next/lib/icon";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState } from 'react';
 import ExtraTitle from '@riil-frontend/component-extra-title';

package/es/components/MultiResourceDrawer/Content.js

@@ -1,4 +1,4 @@
-import _Message from "@alifd/next/es/message";
+import _Message from "@alifd/next/lib/message";
 import React, { useImperativeHandle, useRef, useState } from 'react';
 import { isAvailableArray } from '@riil-frontend/utils';
 import Dynamic from "./Dynamic";

package/es/components/MultiResourceDrawer/ResourceCard/index.js

@@ -1,5 +1,5 @@
-import _Card from "@alifd/next/es/card";
-import _Checkbox from "@alifd/next/es/checkbox";
+import _Card from "@alifd/next/lib/card";
+import _Checkbox from "@alifd/next/lib/checkbox";
 import React from 'react';
 import styles from "./index.module.scss";
 

package/es/components/ResourceList/ResourceSelect.js

@@ -5,12 +5,13 @@ import _ from 'lodash';
 import useNextFormTable from '@ahooksjs/next-form-table';
 import useFilterPlugin from '@ahooksjs/use-filter-plugin';
 import useSortablePlugin from '@ahooksjs/use-sortable-plugin';
-import useSelectionPlugin from '@riil-frontend/component-topology-utils/es/plugins/useSelectionPlugin';
+import useSelectionPlugin from "../../plugins/useSelectionPlugin";
 import { fetchCommonQuery } from '@riil-frontend/component-topology-utils/es/services/cmdb';
 import { getTitleCell } from '@riil-frontend/component-topology-utils/es/utils/table';
 import { DICT } from '@riil-frontend/component-topology-utils/es/utils/storage';
 import { formatDataForTable, getIp } from "../../utils/format";
 import RiilTable from "../FormTable";
+import styles from "./ResourceSelect.module.scss";
 var PRIMARY_KEY = 'id';
 
 var getTableData = /*#__PURE__*/function () {
@@ -181,7 +182,7 @@ var ResourceList = function ResourceList(props, ref) {
     }
   }];
   return /*#__PURE__*/React.createElement(RiilTable, {
-    className: className,
+    className: className || styles.table,
     formProps: formProps,
     tableProps: tableProps,
     paginationProps: paginationProps,

package/es/components/ResourceList/ResourceSelect.module.scss

@@ -0,0 +1,7 @@
+.table {
+  height: 100%;
+  :global {
+    .next-table-body {
+    }
+  }
+}

package/es/components/ResourceSelect/ResourceSelectDrawer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk"];
+var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk", "layer", "topo"];
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ResourceTable from "../../common/components/ResourceTable/ResourceTable";
 import Drawer from "../Drawer";
@@ -11,6 +11,8 @@ export default function ResourceSelectDrawer(props) {
       onAdd = props.onAdd,
       getTableData = props.getTableData,
       onOk = props.onOk,
+      layer = props.layer,
+      topo = props.topo,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var tableRef = useRef(); // TODO 默认处理

package/es/components/SingleResourceDrawer/index.js

@@ -1,4 +1,4 @@
-import _Message from "@alifd/next/es/message";
+import _Message from "@alifd/next/lib/message";
 import React, { useRef } from 'react';
 import { isAvailableArray } from '@riil-frontend/utils';
 import Drawer from "../Drawer";

package/es/core/{editor/components/settings/group/GroupNodeList → common}/icons/defaultIcons.d.ts

@@ -1,3 +1,18 @@
+export const DEFAULT_NODE_ICONS: ({
+    url: any;
+    id: string;
+    name: string;
+    ciType: string;
+    jsonUrl: string;
+    oldId: string;
+} | {
+    url: any;
+    id: string;
+    name: string;
+    jsonUrl: string;
+    oldId: string;
+    ciType?: undefined;
+})[];
 declare var _default: {
     'editor.icon.cloud.small': {
         url: string;

package/es/core/{editor/components/settings/group/GroupNodeList → common}/icons/defaultIcons.js

@@ -1,3 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+export var DEFAULT_NODE_ICONS = [{
+  id: 'ciType/network.switch',
+  name: '交换机',
+  ciType: 'network.switch',
+  jsonUrl: '/ht/image/topo/l/交换机_96.json',
+  oldId: 'editor.icon.switch'
+}, {
+  id: 'ciType/network.coreswitch',
+  name: '核心交换机',
+  jsonUrl: '/ht/image/topo/l/核心交换机_96.json',
+  oldId: 'editor.icon.coreswitch'
+}, {
+  id: 'ciType/network.router',
+  name: '路由器',
+  ciType: 'network.router',
+  jsonUrl: '/ht/image/topo/l/路由器_96.json',
+  oldId: 'editor.icon.router'
+}, {
+  id: 'ciType/db',
+  name: '数据库',
+  jsonUrl: '/ht/image/topo/l/数据库_96.json',
+  oldId: 'editor.icon.db'
+}, {
+  id: 'dc',
+  name: '数据中心',
+  jsonUrl: '/ht/image/topo/l/数据中心_144.json',
+  oldId: 'editor.icon.dc'
+}, {
+  id: 'firewall',
+  name: '防火墙',
+  jsonUrl: '/ht/image/topo/l/防火墙_96.json',
+  oldId: 'editor.icon.firewall'
+}, {
+  id: 'server',
+  name: '服务器',
+  jsonUrl: '/ht/image/topo/l/服务器_96.json',
+  oldId: 'editor.icon.server'
+}, {
+  id: 'icon.cloud',
+  name: '云',
+  jsonUrl: '/ht/image/topo/l/云_144.json',
+  oldId: 'editor.icon.cloud'
+}, {
+  id: 'building',
+  name: '楼宇',
+  jsonUrl: '/ht/image/topo/l/楼宇_144.json',
+  oldId: 'editor.icon.building'
+}, {
+  id: 'internet',
+  name: '互联网',
+  jsonUrl: '/ht/image/topo/l/互联网_144.json',
+  oldId: 'editor.icon.internet'
+}].map(function (item) {
+  return _extends({}, item, {
+    url: item.url || item.jsonUrl.replace('.json', '.png')
+  });
+}); // 注册
+
+DEFAULT_NODE_ICONS.forEach(function (icon) {
+  ht.Default.setImage(icon.id, icon.jsonUrl || icon.url);
+});
 export default {
   'editor.icon.cloud.small': {
     url: '/ht/image/topo/s/云_64.png',

package/es/core/common/text.module.scss

@@ -0,0 +1,5 @@
+.textEllipsis {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}

package/es/core/components/TopoView/Topo.js

@@ -1,11 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import NodataPage from '@riil-frontend/component-topology-utils/es/components/NoDataPage/index';
-import TopoView from "./topoView";
-import topoPermissonUtil from "../../../utils/topoPermissionUtil";
-import Topo404 from "./Topo404";
-import TopoNoPermission from "./TopoNoPermission";
-import styles from "../../../components/index.module.scss";
 import TopoContent from "./TopoContent";
 /**
  * 拓扑组件。变化无权限、无数据显示

package/es/core/components/TopoView/TopoContent.js

@@ -1,4 +1,4 @@
-import _Loading from "@alifd/next/es/loading";
+import _Loading from "@alifd/next/lib/loading";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["engine", "topo", "topoState", "titleBar", "onEnterEdit"];

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

@@ -1,4 +1,4 @@
-import _Loading from "@alifd/next/es/loading";
+import _Loading from "@alifd/next/lib/loading";
 import React from 'react';
 import IconManage from "./iconManage/IconManage";
 import LinkDynamicStyleSettingDrawer from "./LinkDynamicStyleSettingDrawer";

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/RuleSetting.js

@@ -1,5 +1,5 @@
-import _Button from "@alifd/next/es/button";
-import _Icon from "@alifd/next/es/icon";
+import _Button from "@alifd/next/lib/button";
+import _Icon from "@alifd/next/lib/icon";
 import React, { useRef, useState } from 'react';
 import Rule from "./rule/Rule";
 import styles from "./RuleSetting.module.scss";

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/ColorPicker.js

@@ -1,4 +1,4 @@
-import _Balloon from "@alifd/next/es/balloon";
+import _Balloon from "@alifd/next/lib/balloon";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, useRef } from 'react';
 import { SketchPicker } from 'react-color';

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/ColorPicker.module.scss

@@ -1,11 +1,15 @@
-@import "@alifd/next/variables";
+@import "@alifd/theme-19926/variables";
 
 .swatch {
   background: #fff;
-  border-radius: 1px;
-  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  border: 1px solid $input-border-color;
   display: inline-block;
   cursor: pointer;
   width: 70px;
   height: 28px;
+
+  &:hover {
+    border: 1px solid $input-hover-border-color;
+  }
 }

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/Rule.js

@@ -1,4 +1,4 @@
-import _Icon from "@alifd/next/es/icon";
+import _Icon from "@alifd/next/lib/icon";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import RuleCondition from "./RuleCondition";

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/RuleCondition.js

@@ -1,5 +1,5 @@
-import _NumberPicker from "@alifd/next/es/number-picker";
-import _Select from "@alifd/next/es/select";
+import _NumberPicker from "@alifd/next/lib/number-picker";
+import _Select from "@alifd/next/lib/select";
 import React, { Component, useCallback, useState } from 'react';
 import RiilRuleTree from '@riil-frontend/component-riil-rule-tree';
 import isEqual from 'lodash/isEqual';

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/RuleStyle.js

@@ -1,7 +1,7 @@
-import _NumberPicker from "@alifd/next/es/number-picker";
-import _Form from "@alifd/next/es/form";
-import _Field from "@alifd/next/es/field";
-import _Select from "@alifd/next/es/select";
+import _NumberPicker from "@alifd/next/lib/number-picker";
+import _Form from "@alifd/next/lib/form";
+import _Field from "@alifd/next/lib/field";
+import _Select from "@alifd/next/lib/select";
 import React, { useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
 import ColorPicker from "./ColorPicker";

package/es/core/editor/components/iconManage/RenameDialog.js

@@ -1,8 +1,8 @@
-import _Dialog from "@alifd/next/es/dialog";
-import _Input from "@alifd/next/es/input";
+import _Dialog from "@alifd/next/lib/dialog";
+import _Input from "@alifd/next/lib/input";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _Field from "@alifd/next/es/field";
-import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/lib/field";
+import _Form from "@alifd/next/lib/form";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect } from 'react';
 import _ from 'lodash';

package/es/core/editor/components/iconManage/UploadIconDialog.js

@@ -1,8 +1,8 @@
-import _Dialog from "@alifd/next/es/dialog";
-import _Upload from "@alifd/next/es/upload";
-import _Icon from "@alifd/next/es/icon";
+import _Dialog from "@alifd/next/lib/dialog";
+import _Upload from "@alifd/next/lib/upload";
+import _Icon from "@alifd/next/lib/icon";
 import _extends from "@babel/runtime/helpers/extends";
-import _Message from "@alifd/next/es/message";
+import _Message from "@alifd/next/lib/message";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React from 'react';
 import topoServer from '@riil-frontend/component-topology-utils/es/services/topo/index';
@@ -159,9 +159,9 @@ var UploadIconDialog = /*#__PURE__*/function (_React$Component) {
         type: _this.props.type,
         data: files.map(function (file) {
           return {
-            id: file.response.data,
+            id: file.response.result,
             name: getFileName(file),
-            url: topoServer.icon.getDownloadUrl(file.response.data),
+            url: topoServer.icon.getDownloadUrl(file.response.result),
             json: file.json
           };
         })

package/es/core/editor/components/settings/README.md

@@ -0,0 +1,2 @@
+# 属性面板
+

package/es/core/editor/components/settings/Settings.js

@@ -8,9 +8,31 @@ import TextPropertyView from "./text/TextPropertyView";
 import NodePropertyView from "./node/NodePropertyView";
 import ViewPropertyView from "./view/ViewPropertyView";
 import LinkPropertyView from "./link/LinkPropertyView";
-export default function Settings(props) {
-  var _selection$;
 
+function getElementType(selection) {
+  var selectionElement = selection[0];
+  var selectionSize = selection.length;
+  var elementType;
+
+  if (!selectionSize) {
+    elementType = 'view';
+  } else if (isGroup(selectionElement)) {
+    elementType = 'group';
+  } else if (isNode(selectionElement)) {
+    elementType = 'node';
+  } else if (isEdge(selectionElement)) {
+    elementType = 'line';
+  } else if (isLayer(selectionElement)) {
+    // 分层
+    elementType = 'layer';
+  } else if (isText(selectionElement)) {
+    elementType = 'text';
+  }
+
+  return elementType;
+}
+
+export default function Settings(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       selection = props.selection,
@@ -22,9 +44,27 @@ export default function Settings(props) {
   useEffect(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
   }, [selection]);
-  var attrTypes = ['attrObject', 'position', 'styleMap']; // TODO 待优化
+  var propertyPanelMap = {
+    view: SettingsForm,
+    node: NodePropertyView,
+    layer: LayerSettingsForm,
+    text: TextPropertyView
+  };
+
+  if (localStorage.getItem('topo.debug') === 'true') {
+    Object.assign(propertyPanelMap, {
+      line: LinkPropertyView,
+      view: ViewPropertyView
+    });
+  } else {
+    if (!selectionSize) {
+      // 未选择元素
+      return null;
+    }
+  } // TODO 待优化
+
 
-  var updateElementProperty = useCallback(function (name, value) {
+  var updateElementProperty = function updateElementProperty(name, value) {
     // const element = topo.getDataModel().getDataById(selection[0].id);
     var element = topo.getSelectionModel().getFirstData(); // console.info('updateElementProperty', {selection, element, name, value});
 
@@ -43,52 +83,17 @@ export default function Settings(props) {
     } else if (name === 'image') {
       element.setImage(value);
     }
-  }, [(_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.id]);
-  var propertyPanelMap = {
-    view: SettingsForm,
-    layer: LayerSettingsForm // text: TextPropertyView,
-    // node: NodePropertyView,
-
   };
 
-  if (localStorage.getItem('topo.debug') === 'true') {
-    Object.assign(propertyPanelMap, {
-      text: TextPropertyView,
-      node: NodePropertyView,
-      line: LinkPropertyView,
-      view: ViewPropertyView
-    });
-  } else {
-    if (!selectionSize) {
-      // 未选择元素
-      return null;
-    }
-  }
-
-  var elementType;
-  var selectionElement = selection[0];
-
-  if (!selectionSize) {
-    elementType = 'view';
-  } else if (isGroup(selectionElement)) {
-    elementType = 'group';
-  } else if (isNode(selectionElement)) {
-    elementType = 'node';
-  } else if (isEdge(selectionElement)) {
-    elementType = 'line';
-  } else if (isLayer(selectionElement)) {
-    // 分层
-    elementType = 'layer';
-  } else if (isText(selectionElement)) {
-    elementType = 'text';
-  }
-
+  var elementType = getElementType(selection);
   var Component = propertyPanelMap[elementType];
 
   if (!Component) {
     return null;
   }
 
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
+
   var values = _extends({}, selection[0]);
 
   attrTypes.forEach(function (type) {

package/es/core/editor/components/settings/Settings.module.scss

@@ -1,5 +1,5 @@
 .settingsPanel {
-  width: 260px;
+  width: 280px;
   height: 100%;
   position: absolute;
   top: 0;
@@ -34,6 +34,11 @@
     }
     .next-collapse-panel-title {
       background: none;
+      font-size: 12px;
+      padding-bottom: 0;
+    }
+    .next-collapse-panel-content {
+      padding-left: 32px;
     }
   }
 

package/es/core/editor/components/settings/SettingsForm.js

@@ -1,5 +1,5 @@
-import _Select from "@alifd/next/es/select";
-import _Form from "@alifd/next/es/form";
+import _Select from "@alifd/next/lib/select";
+import _Form from "@alifd/next/lib/form";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Style from "./Style";
 var FormItem = _Form.Item;