@riil-frontend/component-topology 2.3.21 → 2.4.0

package/lib/core/editor/components/settings/group/GroupNodeList/icon.js

@@ -1,14 +1,22 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports.getIconById = getIconById;
+exports.getIconGroups = getIconGroups;
 exports.getIconMap = getIconMap;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defaultIcons = _interopRequireDefault(require("./icons/defaultIcons"));
+var _defaultIcons = _interopRequireWildcard(require("../../../../../common/icons/defaultIcons"));
+
+function getUserCustomIcons(topo) {
+  var uploadIcons = topo.store.getModelState('iconManage').icons;
+  return [];
+}
 
 function getIconMap(topo) {
   var bizIconMap = {};
@@ -18,6 +26,20 @@ function getIconMap(topo) {
   });
   return (0, _extends2["default"])({}, _defaultIcons["default"], bizIconMap);
 }
+/**
+ *
+ * @param topo
+ * @param type {'node' | 'container'}
+ * @return {{label: string, icons: *[]}[]}
+ */
+
+
+function getIconGroups(topo, type) {
+  return [{
+    label: '默认',
+    icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
 
 function getIconById(id, topo) {
   var iconMap = getIconMap(topo);

package/lib/core/editor/components/settings/node/NodeIconSelect.d.ts

@@ -0,0 +1 @@
+export default function NodeIconSelect(props: any): JSX.Element;

package/lib/core/editor/components/settings/node/NodeIconSelect.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodeIconSelect;
+
+var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
+
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icon = require("../group/GroupNodeList/icon");
+
+var Option = _select["default"].Option;
+
+function NodeIconSelect(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  var iconGroups = (0, _icon.getIconGroups)(topo, 'node');
+  var newId = value;
+  var a = iconGroups[0].icons.filter(function (item) {
+    return newId.indexOf(item.oldId) !== -1;
+  });
+
+  if (a.length) {
+    newId = a[0].id;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_select["default"], {
+    value: newId,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  }, iconGroups.map(function (group) {
+    return /*#__PURE__*/_react["default"].createElement(_select["default"].OptionGroup, {
+      label: group.label,
+      key: group.label
+    }, group.icons.map(function (icon) {
+      return /*#__PURE__*/_react["default"].createElement(Option, {
+        key: icon.id,
+        value: icon.id
+      }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+        src: icon.url,
+        shape: "square",
+        size: "small"
+      }), "\xA0", icon.name);
+    }));
+  }));
+}
+
+;

package/lib/core/editor/components/settings/node/NodePropertyView.d.ts

@@ -1 +1 @@
-export default function TextPropertyView(props: any): JSX.Element;
+export default function NodePropertyView(props: any): JSX.Element;

package/lib/core/editor/components/settings/node/NodePropertyView.js

@@ -5,14 +5,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = TextPropertyView;
+exports["default"] = NodePropertyView;
 
 var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
 
 var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
-
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -35,95 +33,52 @@ var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeLi
 
 var _icon = require("../group/GroupNodeList/icon");
 
-var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput"));
+var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
+
+var _textModule = _interopRequireDefault(require("../../../../common/text.module.scss"));
+
+var _TopoTreeSelect = _interopRequireDefault(require("./TopoTreeSelect"));
+
+var _NodeIconSelect = _interopRequireDefault(require("./NodeIconSelect"));
+
+var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateResourceButton"));
 
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,
     Col = _grid["default"].Col;
 var Option = _select["default"].Option;
 var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
-
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
-  }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
+var RadioGroup = _radio["default"].Group;
 
 function parseValues(values) {
-  return (0, _extends2["default"])({}, values, fontStyleUtil.toMap(values['styleMap.label.font'], 'styleMap.label.fontStyle.'), {
-    // 层间线
-    'styleMap.borderType': values['styleMap.dash'] === false ? 'solid' : 'dash',
-    'styleMap.dashColor': values['styleMap.dashColor'] || 'rgb(173,173,173)',
-    'styleMap.borderWidth': values['styleMap.borderWidth'] || 1
-  });
+  return (0, _extends2["default"])({}, values);
+}
+
+function getBindType(values) {
+  if (values.tag) {
+    return 'resource';
+  }
+
+  if (values.attr.bindType) {
+    return values.attr.bindType;
+  }
+
+  return 'none';
 }
 
-function TextPropertyView(props) {
+function NodePropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
+  var bindType = getBindType(values);
 
   var field = _field["default"].useField({
     autoUnmount: false,
     values: parseValues(values),
     onChange: function onChange(name, value) {
-      var newValues = field.getValues(); // 文字font样式
-
-      if (name.startsWith('styleMap.label.fontStyle.')) {
-        name = 'styleMap.label.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.label.fontStyle.'));
-      } // 层间线
-
-
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
-      }
+      var newValues = field.getValues();
 
       if (values[name] !== value) {
         _onChange(name, value, newValues);
@@ -131,6 +86,10 @@ function TextPropertyView(props) {
     }
   });
 
+  var setBindType = function setBindType(value) {
+    _onChange('attrObject.bindType', value);
+  };
+
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
@@ -145,12 +104,46 @@ function TextPropertyView(props) {
   }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u76F8\u5173\u8D44\u6E90",
     title: "\u76F8\u5173\u8D44\u6E90"
-  }, "\u5173\u8054\u8D44\u6E90", /*#__PURE__*/_react["default"].createElement("br", null), values.name, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    text: true,
-    onClick: function onClick() {
-      topoEditApi.bindNodeResource({});
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top"
+  }, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5173\u8054\u7C7B\u578B"
+  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
+    name: "bindType",
+    value: bindType,
+    style: {
+      width: '100%',
+      marginRight: 8
+    },
+    onChange: setBindType
+  }, /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "none"
+  }, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "resource"
+  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "topo"
+  }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5173\u8054\u8D44\u6E90"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex'
     }
-  })))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _textModule["default"].textEllipsis,
+    style: {
+      flex: 1,
+      paddingRight: 16,
+      color: '#4D6277'
+    },
+    title: values.tag ? values.name : null
+  }, values.tag ? values.name : '—'), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi
+  }))), bindType === 'topo' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5173\u8054\u62D3\u6251"
+  }, /*#__PURE__*/_react["default"].createElement(_TopoTreeSelect["default"], null)))))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u8BBE\u7F6E",
     key: "2"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
@@ -165,23 +158,15 @@ function TextPropertyView(props) {
     key: "\u663E\u793A\u8BBE\u7F6E",
     title: "\u663E\u793A\u8BBE\u7F6E"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u540D\u79F0"
+    label: "\u56FE\u7247\u540D\u79F0"
   }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
     name: "attrObject.name"
   })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u663E\u793A\u56FE\u7247"
-  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {
     name: "image",
-    style: {
-      width: '100%',
-      marginRight: 8
-    }
-  }, Object.keys((0, _icon.getIconMap)(topo)).map(function (id) {
-    return /*#__PURE__*/_react["default"].createElement(Option, {
-      key: id,
-      value: id
-    }, id);
-  }))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    topo: topo
+  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8"
   }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
     value: {

package/lib/core/editor/components/settings/node/NodeRelateResourceButton.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function NodeRelateResourceButton(props: any): any | null;

package/lib/core/editor/components/settings/node/NodeRelateResourceButton.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodeRelateResourceButton;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _react = _interopRequireDefault(require("react"));
+
+/**
+ * @return {React.ReactNode | null}
+ */
+function NodeRelateResourceButton(props) {
+  var _node$attr$data, _topo$options$editor;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      node = props.node;
+  var hide = ((_node$attr$data = node.attr.data) === null || _node$attr$data === void 0 ? void 0 : _node$attr$data.relateResource) === false || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) === false;
+  return !hide ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    type: "primary",
+    text: true,
+    onClick: function onClick() {
+      topoEditApi.bindNodeResource({});
+    }
+  }, "\u9009\u62E9\u8D44\u6E90") : null;
+}
+
+;

package/lib/core/editor/components/settings/node/TopoTreeSelect.d.ts

@@ -0,0 +1 @@
+export default function TopoTreeSelect(props: any): JSX.Element;

package/lib/core/editor/components/settings/node/TopoTreeSelect.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = TopoTreeSelect;
+
+var _treeSelect = _interopRequireDefault(require("@alifd/next/lib/tree-select"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var TreeNode = _treeSelect["default"].Node;
+
+function TopoTreeSelect(props) {
+  var onChange = props.onChange;
+  return /*#__PURE__*/_react["default"].createElement(_treeSelect["default"], {
+    treeDefaultExpandAll: true,
+    onChange: onChange,
+    style: {
+      width: '100%',
+      marginRight: 8
+    }
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "1",
+    value: "1",
+    label: "Component"
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "2",
+    value: "2",
+    label: "Form"
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "4",
+    value: "4",
+    label: "Input"
+  }), /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "5",
+    value: "5",
+    label: "Select",
+    disabled: true
+  })), /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "3",
+    value: "3",
+    label: "Display"
+  }, /*#__PURE__*/_react["default"].createElement(TreeNode, {
+    key: "6",
+    value: "6",
+    label: "Table"
+  }))));
+}
+
+;

package/lib/core/editor/components/settings/text/TextPropertyView.js

@@ -7,93 +7,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = TextPropertyView;
 
-var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
-
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
-
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
-var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
-
-var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
+var _TextStyle = _interopRequireDefault(require("../common/text/TextStyle"));
 
-var _GroupNodeList = _interopRequireDefault(require("../group/GroupNodeList/GroupNodeList"));
+var _fontStyleUtil = _interopRequireDefault(require("../common/text/fontStyleUtil"));
 
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
-
-var FormItem = _form["default"].Item;
-var Row = _grid["default"].Row,
-    Col = _grid["default"].Col;
-var Option = _select["default"].Option;
 var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
-
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    if (font === void 0) {
-      font = '';
-    }
-
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
-  }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
 
 function parseValues(values) {
-  return (0, _extends2["default"])({}, values, fontStyleUtil.toMap(values['styleMap.text.font'], 'styleMap.text.fontStyle.'));
+  return (0, _extends2["default"])({}, values, {
+    'styleMap.textObj': {
+      color: values.styleMap['text.color'],
+      underline: values.styleMap['text.decoration'] === 'underline',
+      font: _fontStyleUtil["default"].toMap(values.styleMap['text.font'])
+    }
+  });
 }
 
 function TextPropertyView(props) {
@@ -108,15 +45,18 @@ function TextPropertyView(props) {
     onChange: function onChange(name, value) {
       var newValues = field.getValues(); // 文字font样式
 
-      if (name.startsWith('styleMap.text.fontStyle.')) {
-        name = 'styleMap.text.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.text.fontStyle.'));
-      } // 层间线
+      if (name === 'styleMap.textObj') {
+        _onChange('styleMap.text.color', value.color, newValues);
 
+        _onChange('styleMap.label.color', value.color, newValues);
 
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
+        var font = _fontStyleUtil["default"].build(value);
+
+        _onChange('styleMap.text.font', font, newValues);
+
+        _onChange('styleMap.text.decoration', value.underline ? 'underline' : undefined, newValues);
+
+        return;
       }
 
       if (values[name] !== value) {
@@ -128,84 +68,25 @@ function TextPropertyView(props) {
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u540D\u79F0",
+  return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      paddingLeft: 12,
-      paddingRight: 12
+      paddingTop: 8
     }
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    name: "styleMap.text"
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
     defaultExpandedKeys: ['显示设置'],
     style: {
       border: 'none'
     }
   }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5B57\u4F53"
-  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
-    name: "styleMap.text.fontStyle.fontFamily",
+    title: "\u663E\u793A\u8BBE\u7F6E",
     style: {
-      width: '100%',
-      marginRight: 8
+      padding: 0
     }
-  }, /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "\u5B8B\u4F53"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u5B8B\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "\u9ED1\u4F53"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u9ED1\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "Arial"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      fontFamily: 'Arial'
-    }
-  }, "Arial")))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5B57\u53F7",
-    hasFeedback: true,
-    required: true,
-    requiredMessage: "\u4E0D\u80FD\u4E3A\u7A7A",
-    requiredTrigger: "onBlur",
-    asterisk: false
-  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
-    name: "styleMap.text.fontStyle.fontSize",
-    min: 8,
-    max: 36,
-    style: {
-      width: '100%',
-      marginRight: 8
-    },
-    placeholder: "\u8BF7\u8F93\u5165"
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u6837\u5F0F"
-  }, /*#__PURE__*/_react["default"].createElement(RadioGroup, {
-    shape: "button"
-  }, /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-    id: "banana",
-    value: "banana"
-  }, "B"), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-    id: "watermelon",
-    value: "watermelon"
-  }, "I"), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
-    id: "peach",
-    value: "peach"
-  }, "U"))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u989C\u8272"
-  }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
-    name: "styleMap.text.color",
-    align: "bl"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_TextStyle["default"], {
+    name: "styleMap.textObj"
   })))))));
 }

package/lib/core/editor/components/settings/view/ViewPropertyView.js

@@ -37,7 +37,7 @@ var _LineType = _interopRequireDefault(require("../common/LineType"));
 
 var _NodeAlignType = _interopRequireDefault(require("../common/NodeAlignType"));
 
-var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput"));
+var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
 
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,