@luck-design-biz/luckda 0.0.23 → 0.0.24-1

package/lib/lowcode/painter/panel-section/StylePanel/DisplaySvg.js

@@ -0,0 +1,550 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var Row = function Row(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 19 9"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M16 4h-4v1h4v2l3-2.5L16 2v2zM6 0h5v9H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M1 1h3v7H1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1 1v7h3V1H1zM0 0h5v9H0V0z"
+  })));
+};
+var Column = function Column(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 9 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M1 1h7v3H1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1 1v3h7V1H1zM0 0h9v5H0V0z"
+  })));
+};
+var RowAlignFlexStart = function RowAlignFlexStart(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18",
+    "data-spm-anchor-id": "0.0.0.i168.351440bdA6pWIW"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 2h5v9h-5z",
+    "data-spm-anchor-id": "0.0.0.i166.351440bdA6pWIW"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M6 3h3v7H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 3v7h3V3H6zM5 2h5v9H5V2z"
+  })));
+};
+var RowAlignCenter = function RowAlignCenter(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 9"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 4h21v1H0V4zm4.5 0h6v1h-6V4zm6 0h6v1h-6V4z",
+    opacity: ".5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 0h5v9h-5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M6 1h3v7H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 1v7h3V1H6zM5 0h5v9H5V0z"
+  })));
+};
+var RowAlignFlexEnd = function RowAlignFlexEnd(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 7h5v9h-5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M6 8h3v7H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 8v7h3V8H6zM5 7h5v9H5V7z"
+  })));
+};
+var RowAlignStretch = function RowAlignStretch(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0zM0 0h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 2h5v14h-5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M6 3h3v12H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 3v12h3V3H6zM5 2h5v14H5V2z"
+  })));
+};
+var RowAlignBaseline = function RowAlignBaseline(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 11"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 5h21v1H0V5zm4.5 0h6v1h-6V5zm6 0h6v1h-6V5z",
+    opacity: ".5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 1h5v9h-5V1zm1 1h3v3h-3V2z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M6 5h3v5H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 3v7h3V3H6zM5 2h5v9H5V2z"
+  })));
+};
+var ColumnAlignFlexStart = function ColumnAlignFlexStart(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2 9h9v5H2z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M3 4h7v3H3z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3 4v3h7V4H3zM2 3h9v5H2V3z"
+  })));
+};
+var ColumnAlignCenter = function ColumnAlignCenter(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 9 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M4 0h1v17H4V0zm0 8.5h1v6H4v-6zm0-6h1v6H4v-6z",
+    opacity: ".5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 9h9v5H0z",
+    "data-spm-anchor-id": "0.0.0.i29.351440bdydkHSt"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M1 4h7v3H1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1 4v3h7V4H1zM0 3h9v5H0V3z"
+  })));
+};
+var ColumnAlignFlexEnd = function ColumnAlignFlexEnd(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M23 0h1v17h-1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13 9h9v5h-9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M14 4h7v3h-7z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M14 4v3h7V4h-7zm-1-1h9v5h-9V3z"
+  })));
+};
+var ColumnAlignStretch = function ColumnAlignStretch(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M23 0h1v17h-1zM0 0h1v17H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2 9h20v5H2z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M3 4h18v3H3z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3 4v3h18V4H3zM2 3h20v5H2V3z",
+    "data-spm-anchor-id": "0.0.0.i58.351440bdydkHSt"
+  })));
+};
+var ColumnAlignBaseline = function ColumnAlignBaseline(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2 9h9v5H2V9zm1 1h2v3H3v-3z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M5 4h5v3H5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3 4v3h7V4H3zM2 3h9v5H2V3z"
+  })));
+};
+var RowJustifyFlexStart = function RowJustifyFlexStart(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 4h5v9H8z",
+    "data-spm-anchor-id": "0.0.0.i45.351440bdydkHSt"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M3 5h3v7H3z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3 5v7h3V5H3zM2 4h5v9H2V4z"
+  })));
+};
+var RowJustifyCenter = function RowJustifyCenter(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 13 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M6 0h1v17H6z",
+    "data-spm-anchor-id": "0.0.0.i46.351440bdydkHSt"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 4h5v9H8z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M1 5h3v7H1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1 5v7h3V5H1zM0 4h5v9H0V4z"
+  })));
+};
+var RowJustifyFlexEnd = function RowJustifyFlexEnd(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17",
+    "data-spm-anchor-id": "0.0.0.i47.351440bdydkHSt"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M23 0h1v17h-1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M17 4h5v9h-5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M12 5h3v7h-3z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12 5v7h3V5h-3zm-1-1h5v9h-5V4z"
+  })));
+};
+var RowJustifySpaceBetween = function RowJustifySpaceBetween(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0zm23 0h1v17h-1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M17 4h5v9h-5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M3 5h3v7H3z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3 5v7h3V5H3zM2 4h5v9H2V4z"
+  })));
+};
+var RowJustifySpaceAround = function RowJustifySpaceAround(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 16 17"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2 0h1v17H2V0zm0 3.5h1v10H2v-10zM13 0h1v17h-1V0zm0 3.5h1v10h-1v-10z",
+    opacity: ".5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 4h5v9h-5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M1 5h3v7H1z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1 5v7h3V5H1zM0 4h5v9H0V4z"
+  })));
+};
+var RowJustifySpaceEvenly = function RowJustifySpaceEvenly(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    height: "20",
+    viewBox: "0 0 18 21",
+    className: "ve-svgicon"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0v21h1V0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3 6v9h2V6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 6v9h2V6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M13 6v9h2V6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M17 0v21h1V0z"
+  })));
+};
+var ColumnJustifyFlexStart = function ColumnJustifyFlexStart(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 8h9v5H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M7 3h7v3H7z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 3v3h7V3H7zM6 2h9v5H6V2z"
+  })));
+};
+var ColumnJustifyCenter = function ColumnJustifyCenter(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 13"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 6h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 8h9v5H6z",
+    "data-spm-anchor-id": "0.0.0.i52.351440bdydkHSt"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M7 1h7v3H7z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 1v3h7V1H7zM6 0h9v5H6V0z"
+  })));
+};
+var ColumnJustifyFlexEnd = function ColumnJustifyFlexEnd(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 11h9v5H6z",
+    "data-spm-anchor-id": "0.0.0.i54.351440bdydkHSt"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M7 6h7v3H7z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 6v3h7V6H7zM6 5h9v5H6V5z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0z"
+  })));
+};
+var ColumnJustifySpaceBetween = function ColumnJustifySpaceBetween(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0zm0 17h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 11h9v5H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M7 3h7v3H7z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 3v3h7V3H7zM6 2h9v5H6V2z"
+  })));
+};
+var ColumnJustifySpaceAround = function ColumnJustifySpaceAround(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 13"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 2h21v1H0V2zm5.5 0h10v1h-10V2zM0 10h21v1H0v-1zm5.5 0h10v1h-10v-1z",
+    opacity: ".5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 8h9v5H6z",
+    "data-spm-anchor-id": "0.0.0.i56.351440bdydkHSt"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".4",
+    d: "M7 1h7v3H7z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 1v3h7V1H7zM6 0h9v5H6V0z"
+  })));
+};
+var ColumnJustifySpaceEvenly = function ColumnJustifySpaceEvenly(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 3h9v2H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 8h9v2H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 13h9v2H6z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0z"
+  })));
+};
+var DisplaySvg = {
+  row: Row,
+  column: Column,
+  'row-reverse': Row,
+  'column-reverse': Column,
+  'row-align-flex-start': RowAlignFlexStart,
+  'row-align-center': RowAlignCenter,
+  'row-align-flex-end': RowAlignFlexEnd,
+  'row-align-stretch': RowAlignStretch,
+  'row-align-baseline': RowAlignBaseline,
+  'column-align-flex-start': ColumnAlignFlexStart,
+  'column-align-center': ColumnAlignCenter,
+  'column-align-flex-end': ColumnAlignFlexEnd,
+  'column-align-stretch': ColumnAlignStretch,
+  'column-align-baseline': ColumnAlignBaseline,
+  'row-justify-flex-start': RowJustifyFlexStart,
+  'row-justify-center': RowJustifyCenter,
+  'row-justify-flex-end': RowJustifyFlexEnd,
+  'row-justify-space-between': RowJustifySpaceBetween,
+  'row-justify-space-around': RowJustifySpaceAround,
+  'row-justify-space-evenly': RowJustifySpaceEvenly,
+  'column-justify-flex-start': ColumnJustifyFlexStart,
+  'column-justify-center': ColumnJustifyCenter,
+  'column-justify-flex-end': ColumnJustifyFlexEnd,
+  'column-justify-space-between': ColumnJustifySpaceBetween,
+  'column-justify-space-around': ColumnJustifySpaceAround,
+  'column-justify-space-evenly': ColumnJustifySpaceEvenly
+};
+var _default = exports.default = DisplaySvg;

package/lib/lowcode/painter/panel-section/StylePanel/Height.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
+var _NumberInput = _interopRequireDefault(require("../../components/NumberInput"));
+var _utils = require("@luck-design-biz/base/utils");
+var _StyleContext = require("./StyleContext");
+var _excluded = ["field"];
+var options = [{
+  label: 'px',
+  value: 'px'
+}, {
+  label: '%',
+  value: '%'
+}, {
+  label: 'A',
+  value: 'auto'
+}];
+function _default(_ref) {
+  var field = _ref.field,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  return /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
+      label: '宽'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_NumberInput.default, (0, _extends2.default)({
+    options: options,
+    value: style[field],
+    min: 0,
+    max: 10000,
+    onChange: function onChange(value) {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: field,
+          value: value
+        }
+      });
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.width.ph',
+      label: '请输入宽度'
+    })
+  }, rest)));
+}

package/lib/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@luck-design-biz/base/utils");
+var _antd = require("luck-design/antd");
+var _Collapse = _interopRequireDefault(require("../../components/Collapse"));
+var _PopConfirm = _interopRequireDefault(require("../../components/PopConfirm"));
+var _CssEditor = _interopRequireDefault(require("../../components/code-editor/CssEditor"));
+var _FullScreenEditor = _interopRequireDefault(require("../../components/code-editor/FullScreenEditor"));
+var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
+var _Width = _interopRequireDefault(require("./Width"));
+var _Height = _interopRequireDefault(require("./Height"));
+var _Display = _interopRequireDefault(require("./Display"));
+var _StyleContext = require("./StyleContext");
+var MainPanel = function MainPanel() {
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var editorRef = (0, _StyleContext.useEditor)();
+  var currentCoce = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (style) {
+      currentCoce.current = (0, _StyleContext.styleToCSS)(style);
+    }
+  }, [style]);
+  var handleCodeChange = (0, _react.useCallback)(function (code) {
+    dispatch({
+      type: 'code',
+      payload: code
+    });
+  }, []);
+  var handOnEditorLoad = (0, _react.useCallback)(function () {
+    console.log('currentCoce.current1', currentCoce.current);
+    editorRef.current.editor.setValue(currentCoce.current);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylePanel.default['lc-painter-panel-section-style-panel']
+  }, /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.group-name',
+      label: '样式设置'
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylePanel.default['style-editor']
+  }, /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+    placement: "bottomRight",
+    title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
+      ref: editorRef,
+      EditorComponent: _CssEditor.default,
+      width: "280px",
+      height: "300px",
+      onChange: handleCodeChange,
+      onLoad: handOnEditorLoad
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    size: "small"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+    label: '源码编辑'
+  })))), /*#__PURE__*/_react.default.createElement(_Width.default, {
+    field: "width"
+  }), /*#__PURE__*/_react.default.createElement(_Height.default, {
+    field: "height"
+  }), /*#__PURE__*/_react.default.createElement(_Display.default, null)));
+};
+var _default = exports.default = MainPanel;