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

package/es/lowcode/painter/panel-section/StylePanel/Border.js

@@ -0,0 +1,150 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import BorderSelector from "./BorderSelector";
+import styles from "../../style/border-editor.less";
+import { Select } from 'luck-design/antd';
+import Size from "./Size";
+import ColorInput from "../../components/ColorInput";
+import HighLightPanel from "./HighLightPanel";
+import HighLigthtSpan from "./HighLigthtSpan";
+var Option = Select.Option;
+var borderMainProps = ['border-width', 'border-color', 'border-style'];
+var borderSideProps = ['border-top-width', 'border-top-color', 'border-top-style', 'border-right-width', 'border-right-color', 'border-right-style', 'border-bottom-width', 'border-bottom-color', 'border-bottom-style', 'border-left-width', 'border-left-color', 'border-left-style'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+var getPropName = function getPropName(str) {
+  return str.split('-').pop();
+};
+
+/**
+ * 边框样式设置控件
+ */
+export default function () {
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BorderEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border',
+      label: '边框'
+    })
+  });
+}
+var BorderEditor = function BorderEditor() {
+  var _style$styleField;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      var mainPropsName = getPropName(field);
+      borderSideProps.forEach(function (item) {
+        if (mainPropsName === getPropName(item)) delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var styleField = 'border-style';
+  var widthField = 'border-width';
+  var colorField = 'border-color';
+  if (curDirection != 'all') {
+    styleField = "border-".concat(curDirection, "-style");
+    widthField = "border-".concat(curDirection, "-width");
+    colorField = "border-".concat(curDirection, "-color");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['border-editor-wrapper']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-left']
+  }, /*#__PURE__*/React.createElement(BorderSelector, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-right']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [styleField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style',
+    label: '边框'
+  })), /*#__PURE__*/React.createElement(Select, {
+    style: {
+      flex: 1
+    },
+    size: "small",
+    onChange: function onChange(value) {
+      handleChange(styleField, value);
+    },
+    value: (_style$styleField = style[styleField]) !== null && _style$styleField !== void 0 ? _style$styleField : ''
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: ""
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.none',
+    label: '无'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "solid"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.solid',
+    label: '实线条'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "dotted"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dotted',
+    label: '点线'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "dashed"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dashed',
+    label: '虚线'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [widthField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.width',
+    label: '线宽'
+  })), /*#__PURE__*/React.createElement(Size, {
+    field: widthField,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border.width.ph",
+      label: '线宽'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(widthField, value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [colorField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.color',
+    label: '颜色'
+  })), /*#__PURE__*/React.createElement(ColorInput, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style[colorField],
+    onChange: function onChange(value) {
+      return handleChange(colorField, value);
+    }
+  })))));
+};

package/es/lowcode/painter/panel-section/StylePanel/BorderRadius.js

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import BorderRadiusSelector from "./BorderRadiusSelector";
+import styles from "../../style/border-editor.less";
+import Size from "./Size";
+import HighLightPanel from "./HighLightPanel";
+import HighLigthtSpan from "./HighLigthtSpan";
+var borderMainProps = ['border-radius'];
+var borderSideProps = ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+
+/**
+ * 圆角样式设置控件
+ */
+export default function () {
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BorderRadiusEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius',
+      label: ' 圆角'
+    })
+  });
+}
+var BorderRadiusEditor = function BorderRadiusEditor() {
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      borderSideProps.forEach(function (item) {
+        delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var field = 'border-radius';
+  if (curDirection != 'all') {
+    field = "border-".concat(curDirection, "-radius");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['border-editor-wrapper']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-left']
+  }, /*#__PURE__*/React.createElement(BorderRadiusSelector, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-right-single']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [field]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius.width',
+    label: '半径'
+  })), /*#__PURE__*/React.createElement(Size, {
+    field: field,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border-radius.width.ph",
+      label: '半径'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(field, value);
+    }
+  })))));
+};

package/es/lowcode/painter/panel-section/StylePanel/BorderRadiusSelector.js

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../../style/border-radius-selector.less";
+
+/**
+ * 圆角设置组件
+ */
+export default function (_ref) {
+  var onChange = _ref.onChange;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-radius-selector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-row']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-left'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top-left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u250F")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom-left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2517")))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-center'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u254B"))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-right'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top-right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2513")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom-right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u251B")))));
+}

package/es/lowcode/painter/panel-section/StylePanel/BorderSelector.js

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../../style/border-selector.less";
+
+/**
+ * 边框选择组件
+ */
+export default function (_ref) {
+  var onChange = _ref.onChange;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-selector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-row']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-left'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2523")))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-center'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2533")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u254B")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u253B"))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-right'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u252B")))));
+}

package/es/lowcode/painter/panel-section/StylePanel/Display.js

@@ -0,0 +1,296 @@
+import React from 'react';
+import { Segmented } from '@luck-helper/ui-design';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { Tooltip } from 'luck-design/antd';
+import styles from "../../style/display.less";
+import DisplaySvg from "./DisplaySvg";
+import { useStyle, useStyleDispatch } from "./StyleContext";
+import HighLightPanel from "./HighLightPanel";
+var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
+
+/**
+ * 显示样式设置控件
+ */
+export default function (_ref) {
+  var label = _ref.label;
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleDisplayChange = function handleDisplayChange(id, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: id,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    label: label,
+    highLightFields: textRelatedStyles,
+    collapsed: style.display != 'flex',
+    addon: style.display == 'flex' ? /*#__PURE__*/React.createElement(FlexTypeSelector, {
+      dispatch: dispatch
+    }) : null
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: options,
+    onChange: function onChange(value) {
+      return handleDisplayChange('display', value);
+    },
+    value: style.display
+  }));
+}
+var FlexTypeSelector = function FlexTypeSelector() {
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(id, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: id,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-display']
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: directOptions,
+    onChange: function onChange(value) {
+      return handleChange('flex-direction', value);
+    },
+    value: style['flex-direction']
+  }), /*#__PURE__*/React.createElement(Segmented, {
+    options: alignOptions,
+    onChange: function onChange(value) {
+      return handleChange('align-items', value);
+    },
+    value: style['align-items']
+  }), /*#__PURE__*/React.createElement(Segmented, {
+    options: justifyOptions,
+    onChange: function onChange(value) {
+      return handleChange('justify-content', value);
+    },
+    value: style['justify-content']
+  }));
+};
+var options = [{
+  label: /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: "block"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.block',
+    label: '块'
+  })),
+  value: 'block'
+}, {
+  label: /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: "inline-block"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.inline-block',
+    label: '行内块'
+  })),
+  value: 'inline-block'
+}, {
+  label: /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: "inline"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.inline',
+    label: '行内'
+  })),
+  value: 'inline'
+}, {
+  label: /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: "flex"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.flex',
+    label: '弹性'
+  })),
+  value: 'flex'
+}];
+function parseDirection(input) {
+  var parts = input.split('-');
+  var type = parts[0];
+  var isReverse = parts.length > 1 && parts[1] === 'reverse';
+  return {
+    type: type,
+    isReverse: isReverse
+  };
+}
+var SvgLabel = function SvgLabel(_ref2) {
+  var name = _ref2.name,
+    tip = _ref2.tip,
+    pre = _ref2.pre;
+  var style = useStyle();
+  var direct = null;
+  var SvgComponent = null;
+  var className = null;
+  if (pre) {
+    var _style$flexDirection;
+    direct = parseDirection((_style$flexDirection = style['flex-direction']) !== null && _style$flexDirection !== void 0 ? _style$flexDirection : 'row');
+    SvgComponent = DisplaySvg["".concat(direct.type, "-").concat(pre, "-").concat(name)];
+  } else {
+    direct = parseDirection(name);
+    SvgComponent = DisplaySvg[name];
+  }
+  if (direct.isReverse) {
+    className = direct.type == 'row' ? styles['revert-h'] : styles['revert-v'];
+  }
+  return SvgComponent ? /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: tip
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SvgComponent, {
+    className: className
+  }))) : null;
+};
+var directOptions = [{
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "row",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.row',
+      label: '方向：横向'
+    })
+  }),
+  value: 'row'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "column",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.column',
+      label: '方向：纵向'
+    })
+  }),
+  value: 'column'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "row-reverse",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.column',
+      label: '方向：横向反转'
+    })
+  }),
+  value: 'row-reverse'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "column-reverse",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.column',
+      label: '方向：纵向反转'
+    })
+  }),
+  value: 'column-reverse'
+}];
+var alignOptions = [{
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "flex-start",
+    pre: "align",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.flex-start',
+      label: '交叉轴：起始对齐'
+    })
+  }),
+  value: 'flex-start'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "center",
+    pre: "align",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.center',
+      label: '交叉轴：居中'
+    })
+  }),
+  value: 'center'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "flex-end",
+    pre: "align",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.flex-end',
+      label: '交叉轴：终点对齐'
+    })
+  }),
+  value: 'flex-end'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "stretch",
+    pre: "align",
+    top: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.stretch',
+      label: '交叉轴：拉伸'
+    })
+  }),
+  value: 'stretch'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "baseline",
+    pre: "align",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.baseline',
+      label: '交叉轴：基线'
+    })
+  }),
+  value: 'baseline'
+}];
+var justifyOptions = [{
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "flex-start",
+    pre: "justify",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.flex-start',
+      label: '水平轴：起始对齐'
+    })
+  }),
+  value: 'flex-start'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "center",
+    pre: "justify",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.center',
+      label: '水平轴：居中对齐'
+    })
+  }),
+  value: 'center'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "flex-end",
+    pre: "justify",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.flex-end',
+      label: '水平轴：结束对齐'
+    })
+  }),
+  value: 'flex-end'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "space-between",
+    pre: "justify",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.space-between',
+      label: '水平轴：两端对齐'
+    })
+  }),
+  value: 'space-between'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "space-around",
+    pre: "justify",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.space-around',
+      label: '水平轴：均匀对齐，项目周围间隔相等'
+    })
+  }),
+  value: 'space-around'
+}, {
+  label: /*#__PURE__*/React.createElement(SvgLabel, {
+    name: "space-evenly",
+    pre: "justify",
+    tip: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.space-evenly',
+      label: '水平轴：均匀分布，所有项目与容器边缘的间隔相等'
+    })
+  }),
+  value: 'space-evenly'
+}];