@fonixtree/magic-design 0.0.1

package/lib/core/Renderer/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _componentTypes = require("../../constants/component-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+/* eslint-disable consistent-return */
+
+
+var setDesignConfig = function setDesignConfig(props) {
+  var config = props.config,
+      device = props.device,
+      isShop = props.isShop;
+  window.magicDesign = __assign({
+    pageBackground: '#f2f2f2',
+    compSpacing: '16',
+    mode: 'renderer',
+    device: device,
+    isShop: isShop
+  }, config);
+};
+/**
+ * @class Renderer 页面预览器，外部工程使用此类来渲染出页面。
+ */
+
+
+var Renderer = function Renderer(props) {
+  var pageData = props.pageData;
+  setDesignConfig(props);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "render_wrap",
+    magic_design: "",
+    style: {
+      background: window.magicDesign.pageBackground
+    }
+  }, pageData && pageData.childNodes && pageData.childNodes.map(function (nodeData) {
+    var Clazz = _componentTypes.componentMap[nodeData.type];
+
+    if (!Clazz) {
+      console.error("[MagicBox] Can not find type " + nodeData.type);
+      return;
+    }
+
+    var newInstanceProps = __assign(__assign({}, nodeData), {
+      nodeData: nodeData
+    });
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: nodeData.id
+    }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
+  }));
+};
+
+Renderer.defaultProps = {
+  pageData: {},
+  device: 'pc',
+  config: {}
+};
+var _default = Renderer;
+exports["default"] = _default;

package/lib/decorator/compositeDecorator.js

@@ -0,0 +1,129 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = compositeDecorator;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobx = require("../mobx");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+function compositeDecorator(WrappedComponent) {
+  var Wrapper =
+  /** @class */
+  function (_super) {
+    __extends(Wrapper, _super);
+
+    function Wrapper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.state = {
+        clickedFloor: ''
+      }; // 复合组件点击事件
+
+      _this.onCompositeCompClick = function (event) {
+        // 触发左侧楼层的滚动
+        if (document.getElementById("card" + _this.props.nodeData.id)) {
+          document.getElementById("card" + _this.props.nodeData.id).scrollIntoView({
+            behavior: 'smooth'
+          });
+        } // 这里必须阻止事件冒泡，然后再触发自定义的事件
+
+
+        event.preventDefault();
+        event.stopPropagation(); // 触发点击组件事件
+
+        var evt = new Event('component-click', {
+          bubbles: false
+        });
+        evt.data = _this.props.nodeData;
+        window.document.dispatchEvent(evt);
+      };
+
+      _this.getStyle = function () {
+        var style = {
+          border: 'none'
+        }; // 处理复合组件的选中状态
+
+        if (window.magicDesign.mode === 'designer') {
+          style.border = '1px solid transparent';
+
+          if (_this.props.nodeData.id === _this.state.clickedFloor) {
+            style.border = '1px dashed red';
+          }
+        } // 处理复合组件的下边距
+
+
+        if (Wrapper.type !== 'DIVIDER') {
+          var rate = window.magicDesign.device === 'pc' ? 1.5 : 1;
+          style.marginBottom = Number(window.magicDesign.compSpacing) * rate + "px";
+        }
+
+        return style;
+      };
+
+      return _this;
+    }
+
+    Wrapper.prototype.componentDidMount = function () {
+      var _this = this;
+
+      this.distroy = (0, _mobx.autorun)(function () {
+        _this.setState({
+          clickedFloor: _mobx.store.clickedFloor
+        });
+      });
+    };
+
+    Wrapper.prototype.componentWillUnmount = function () {
+      this.distroy();
+    };
+
+    Wrapper.prototype.render = function () {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "composite_wrap",
+        onClick: this.onCompositeCompClick,
+        style: this.getStyle()
+      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props));
+    };
+
+    Wrapper.getDefaultJSON = WrappedComponent.getDefaultJSON;
+    Wrapper.type = WrappedComponent.type;
+    return Wrapper;
+  }(_react.Component);
+
+  return Wrapper;
+}

package/lib/decorator/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "compositeDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _compositeDecorator["default"];
+  }
+});
+Object.defineProperty(exports, "metaDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _metaDecorator["default"];
+  }
+});
+
+var _compositeDecorator = _interopRequireDefault(require("./compositeDecorator"));
+
+var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/decorator/metaDecorator.js

@@ -0,0 +1,199 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = metaDecorator;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobx = require("../mobx");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+function metaDecorator(WrappedComponent) {
+  var Wrapper =
+  /** @class */
+  function (_super) {
+    __extends(Wrapper, _super);
+
+    function Wrapper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.state = {
+        clickedMeta: '',
+        hoveredMeta: ''
+      }; // 元组件点击事件
+
+      _this.onMetaClick = function (event) {
+        var _a, _b, _c;
+
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        } // 组织冒泡
+
+
+        event.preventDefault();
+        event.stopPropagation();
+        var parentId = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.parentId;
+        var metaId = (_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.id;
+        var floorId = null; // group中的元组件
+
+        if (parentId) {
+          floorId = _mobx.store.getFloorIdByGroupId(parentId);
+        } else {
+          // 复合组件中的元组件
+          floorId = _mobx.store.getFloorIdByMetaId(metaId);
+        }
+
+        _mobx.store.setState({
+          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
+          clickedGroup: parentId,
+          clickedFloor: floorId
+        });
+      };
+
+      _this.onMouseEnter = function () {
+        var _a;
+
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        }
+
+        _mobx.store.setState({
+          hoveredMeta: (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.id
+        });
+      };
+
+      _this.onMouseLeave = function () {
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        }
+
+        _mobx.store.setState({
+          hoveredMeta: ''
+        });
+      };
+
+      _this.isDesignerActive = function () {
+        var data = _this.props.data;
+        var _a = _this.state,
+            hoveredMeta = _a.hoveredMeta,
+            clickedMeta = _a.clickedMeta;
+        var isHover = (data === null || data === void 0 ? void 0 : data.id) === hoveredMeta;
+        var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
+
+        if (window.magicDesign.mode === 'designer' && (isHover || isClick)) {
+          return true;
+        }
+
+        return false;
+      };
+
+      _this.getStyle = function () {
+        var _a = _this.state,
+            hoveredMeta = _a.hoveredMeta,
+            clickedMeta = _a.clickedMeta;
+        var data = _this.props.data;
+        var isHover = (data === null || data === void 0 ? void 0 : data.id) === hoveredMeta;
+        var isClick = (data === null || data === void 0 ? void 0 : data.id) === clickedMeta;
+        var style = {
+          boxSizing: 'border-box',
+          height: '100%'
+        };
+
+        if (window.magicDesign.mode === 'renderer') {
+          return style;
+        } else {
+          style.border = isHover || isClick ? '1px solid #2F54EB' : '1px solid transparent';
+          style.backgroundColor = isHover ? 'rgba(47,84,235,0.2)' : '';
+        }
+
+        return style;
+      };
+
+      return _this;
+    }
+
+    Wrapper.prototype.componentDidMount = function () {
+      var _this = this;
+
+      this.distroy = (0, _mobx.autorun)(function () {
+        _this.setState({
+          clickedMeta: _mobx.store.clickedMeta,
+          hoveredMeta: _mobx.store.hoveredMeta
+        });
+      });
+    };
+
+    Wrapper.prototype.componentWillUnmount = function () {
+      this.distroy();
+    };
+
+    Wrapper.prototype.render = function () {
+      var _a = this.props,
+          className = _a.className,
+          style = _a.style,
+          rest = __rest(_a, ["className", "style"]);
+
+      var hoverStyle = this.getStyle();
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: className,
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "meta_wrap",
+        onClick: this.onMetaClick,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        style: hoverStyle
+      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, rest)));
+    };
+
+    return Wrapper;
+  }(_react.Component);
+
+  return Wrapper;
+}

package/lib/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Designer", {
+  enumerable: true,
+  get: function get() {
+    return _Designer["default"];
+  }
+});
+Object.defineProperty(exports, "Renderer", {
+  enumerable: true,
+  get: function get() {
+    return _Renderer["default"];
+  }
+});
+
+require("./assets/less/index.less");
+
+require("./assets/less/cylon-antd.less");
+
+var _Designer = _interopRequireDefault(require("./core/Designer"));
+
+var _Renderer = _interopRequireDefault(require("./core/Renderer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/meta-comp/components/Button/index.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+var _businessUtil = require("@/components/utils/businessUtil");
+
+var _coreUtil = require("../../../utils/coreUtil");
+
+var _decorator = require("../../../decorator");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var Button =
+/** @class */
+function (_super) {
+  __extends(Button, _super);
+
+  function Button() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      hover: false
+    };
+    /** 备份历史数据 比对不一致时渲染 */
+
+    _this.preData = '';
+    return _this;
+  }
+
+  Button.prototype.shouldComponentUpdate = function (nextProps) {
+    return JSON.stringify(nextProps.data) != this.preData;
+  };
+
+  Button.prototype.render = function () {
+    var _this = this;
+
+    var _a;
+
+    var _b = this.props,
+        data = _b.data,
+        className = _b.className,
+        readonly = _b.readonly;
+    var hover = this.state.hover;
+    this.preData = JSON.stringify(data);
+
+    var style = __assign({
+      backgroundColor: data.content.backgroundColor,
+      border: data.buttonBorder.open && data.buttonBorder.borderColor ? "1px solid " + data.buttonBorder.borderColor : '1px solid transparent',
+      borderRadius: data.buttonBorder.open ? data.buttonBorder.borderRadius : 0
+    }, data.buttonText);
+
+    var iconUrl = data.buttonIcon.iconUrl;
+    var iconLayout = data.buttonIcon.layout;
+
+    if (hover && ((_a = data.hover) === null || _a === void 0 ? void 0 : _a.open)) {
+      style = __assign(__assign(__assign({}, style), {
+        backgroundColor: data.hover.content.backgroundColor,
+        border: data.hover.buttonBorder.open && data.hover.buttonBorder.borderColor ? "1px solid " + data.hover.buttonBorder.borderColor : '1px solid transparent',
+        borderRadius: data.hover.buttonBorder.open ? data.hover.buttonBorder.borderRadius : 0
+      }), data.hover.buttonText);
+      iconUrl = data.hover.buttonIcon.iconUrl;
+      iconLayout = data.hover.buttonIcon.layout;
+    }
+
+    var btnText = /*#__PURE__*/_react["default"].createElement("span", {
+      className: "item",
+      contentEditable: (0, _coreUtil.isDesignMode)() && !readonly,
+      onInput: function onInput(e) {
+        var text = e.target.textContent;
+        data.text = text;
+        /** 主动更新历史数据避免render */
+
+        _this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
+          text: text
+        }));
+      },
+      suppressContentEditableWarning: true
+    }, data.text);
+
+    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('m-meta-button', className),
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)(data.content.url);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return _this.setState({
+          hover: true
+        });
+      },
+      onMouseLeave: function onMouseLeave() {
+        return _this.setState({
+          hover: false
+        });
+      },
+      style: __assign(__assign({}, style), wrapStyle)
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('btnContent', {
+        horizontal: iconLayout === 'left' || iconLayout === 'right'
+      })
+    }, (iconLayout === 'right' || iconLayout === 'bottom') && btnText, iconUrl && /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "item",
+      src: iconUrl
+    }), (iconLayout === 'left' || iconLayout === 'top') && btnText));
+  };
+
+  Button.defaultProps = {
+    data: {},
+    className: '',
+    readonly: false
+  };
+  Button = __decorate([_decorator.metaDecorator], Button);
+  return Button;
+}(_react.Component);
+
+var _default = Button;
+exports["default"] = _default;

package/lib/meta-comp/components/Button/index.less

@@ -0,0 +1,19 @@
+.m-meta-button {
+  transition: all 0.25s;
+
+  .btnContent {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    &.horizontal {
+      flex-direction: row;
+    }
+
+    img {
+      height: 20px;
+    }
+  }
+}