@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/visual/config-page/StyleConfig.js

@@ -0,0 +1,979 @@
+import '../../../style.css';
+import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, createBlock, createTextVNode } from "vue";
+/* empty css                */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-component-style-config",
+  props: {
+    value: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      style: {},
+      unfold: {},
+      space: [
+        { label: "超大", value: "24px" },
+        { label: "大", value: "16px" },
+        { label: "中", value: "12px" },
+        { label: "小", value: "4px" },
+        { label: "无", value: "0px" },
+        { label: "默认", value: "default" },
+        { label: "自定义", value: "custom" }
+      ],
+      backgroundStyle: "color"
+    };
+  },
+  computed: {
+    clearSuffix() {
+      return (v = "") => Number((v || "").toString().replace(/px/, ""));
+    },
+    isSameMargin() {
+      const { marginTop, marginRight, marginBottom, marginLeft } = this.style;
+      return marginTop === marginRight && marginTop === marginBottom && marginTop === marginLeft;
+    },
+    isSamePadding() {
+      const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.style;
+      return paddingTop === paddingRight && paddingTop === paddingBottom && paddingTop === paddingLeft;
+    },
+    componentStyle() {
+      const {
+        margin,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        padding,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        hShadow = 0,
+        vShadow = 0,
+        shadowBlur = 0,
+        shadowSpread = 0,
+        shadowColor,
+        backgroundImage,
+        text,
+        ...otherStyle
+      } = this.style;
+      const style = {
+        ...otherStyle
+      };
+      if (hShadow || vShadow || shadowBlur) {
+        style.boxShadow = `${hShadow} ${vShadow} ${shadowBlur} ${shadowSpread} ${shadowColor}`;
+      }
+      if (margin) {
+        if (!this.isSameMargin) {
+          if (![marginTop, marginRight, marginBottom, marginLeft].includes("default") && ![marginTop, marginRight, marginBottom, marginLeft].includes(void 0)) {
+            style.margin = `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`;
+          } else {
+            if (marginTop && marginTop !== "default") style.marginTop = marginTop;
+            if (marginRight && marginRight !== "default") style.marginRight = marginRight;
+            if (marginBottom && marginBottom !== "default") style.marginBottom = marginBottom;
+            if (marginLeft && marginLeft !== "default") style.marginLeft = marginLeft;
+          }
+        } else {
+          style.margin = margin;
+        }
+      }
+      if (padding) {
+        if (!this.isSamePadding) {
+          if (![paddingTop, paddingRight, paddingBottom, paddingLeft].includes("default") && ![paddingTop, paddingRight, paddingBottom, paddingLeft].includes(void 0)) {
+            style.padding = `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`;
+          } else {
+            if (paddingTop && paddingTop !== "default") style.paddingTop = paddingTop;
+            if (paddingRight && paddingRight !== "default") style.paddingRight = paddingRight;
+            if (paddingBottom && paddingBottom !== "default") style.paddingBottom = paddingBottom;
+            if (paddingLeft && paddingLeft !== "default") style.paddingLeft = paddingLeft;
+          }
+        } else {
+          style.padding = padding;
+        }
+      }
+      if (backgroundImage) {
+        if (this.backgroundStyle === "gradient") {
+          style.backgroundImage = backgroundImage;
+        } else {
+          style.backgroundImage = `url(${backgroundImage})`;
+          style.backgroundRepeat = "no-repeat";
+          style.backgroundPosition = "center";
+          if (!style.backgroundSize) style.backgroundSize = "cover";
+        }
+      } else {
+        delete style.backgroundRepet;
+        delete style.backgroundSize;
+        delete style.backgroundPosition;
+      }
+      return style;
+    }
+  },
+  watch: {
+    componentStyle(v = {}) {
+      this.$emit("change", v);
+    },
+    "style.margin"(v) {
+      if (v && v !== "custom") {
+        ["Top", "Right", "Bottom", "Left"].forEach((item) => {
+          this.style["margin" + item] = v;
+        });
+      }
+    },
+    "style.padding"(v) {
+      if (v && v !== "custom") {
+        ["Top", "Right", "Bottom", "Left"].forEach((item) => {
+          this.style["padding" + item] = v;
+        });
+      }
+    },
+    "style.text"(v) {
+      const option = this.textOption.find((item) => item.value === v);
+      if (option && option.style) {
+        for (const key in option.style) {
+          this.style[key] = option.style[key];
+        }
+      }
+    },
+    isSameMargin(v) {
+      if (v) {
+        this.style.margin = this.style.marginTop;
+      } else {
+        this.style.margin = "custom";
+      }
+    },
+    isSamePadding(v) {
+      if (v) {
+        this.style.padding = this.style.paddingTop;
+      } else {
+        this.style.padding = "custom";
+      }
+    }
+  },
+  methods: {
+    getOption() {
+      const textOption = [
+        {
+          label: this.$t("Translation of the title"),
+          value: "h1",
+          style: {
+            fontSize: "20px",
+            fontWeight: "700",
+            lineHeight: "32px"
+          }
+        },
+        {
+          label: this.$t("SubTitle"),
+          value: "h2",
+          style: {
+            fontSize: "16px",
+            fontWeight: "700",
+            lineHeight: "24px"
+          }
+        },
+        {
+          label: this.$t("main body"),
+          value: "default",
+          style: {
+            fontSize: "14px",
+            lineHeight: "20px"
+          }
+        },
+        {
+          label: this.$t("auxiliary words"),
+          value: "second",
+          style: {
+            fontSize: "12px",
+            color: "#666",
+            lineHeight: "16px"
+          }
+        },
+        {
+          label: this.$t("user-defined"),
+          value: "custom"
+        }
+      ];
+      this.textOption = textOption;
+      this.predefineColors = ["#ff4500", "#ff8c00", "#ffd700", "#90ee90"];
+      this.fontWeightOption = [
+        {
+          label: this.$t("overstriking"),
+          value: "700"
+        },
+        {
+          label: this.$t("thin"),
+          value: "400"
+        },
+        {
+          label: this.$t("default"),
+          value: "500"
+        }
+      ];
+      this.borderStyleOption = [
+        {
+          label: this.$t("full line"),
+          value: "solid"
+        },
+        {
+          label: this.$t("dotted line"),
+          value: "dashed"
+        },
+        {
+          label: this.$t("stipple line"),
+          value: "dotted"
+        },
+        {
+          label: this.$t("not"),
+          value: "none"
+        }
+      ];
+    },
+    changePx(key, v) {
+      this.style[key] = v + "px";
+    },
+    // value（组件真实 style）→ 编辑态 this.style：margin/padding/boxShadow 拆分，backgroundImage 剥 url()。
+    // 预置所有编辑键为 undefined：Vue3 的 reactive 对新增键也能触发更新，这里保留预置只是为了
+    // 与 develop 版本行为一致、且不依赖后续 v-model 首次写入的时机（值仍是 undefined，不影响
+    // componentStyle 的输出——undefined 值的键会被 style 绑定/JSON 序列化自然丢弃）
+    setDefaultStyle() {
+      const style = this.value || {};
+      const { margin, padding, boxShadow, backgroundImage, ...otherStyle } = style;
+      const componentStyle = {
+        margin: void 0,
+        marginTop: void 0,
+        marginRight: void 0,
+        marginBottom: void 0,
+        marginLeft: void 0,
+        padding: void 0,
+        paddingTop: void 0,
+        paddingRight: void 0,
+        paddingBottom: void 0,
+        paddingLeft: void 0,
+        text: void 0,
+        fontSize: void 0,
+        lineHeight: void 0,
+        textAlign: void 0,
+        fontWeight: void 0,
+        color: void 0,
+        backgroundColor: void 0,
+        backgroundImage: void 0,
+        backgroundSize: void 0,
+        borderStyle: void 0,
+        borderWidth: void 0,
+        borderColor: void 0,
+        borderRadius: void 0,
+        hShadow: void 0,
+        vShadow: void 0,
+        shadowBlur: void 0,
+        shadowSpread: void 0,
+        shadowColor: void 0
+      };
+      if (boxShadow) {
+        const shadowArr = boxShadow.split(" ");
+        componentStyle.hShadow = shadowArr[0] || 0;
+        componentStyle.vShadow = shadowArr[1] || 0;
+        componentStyle.shadowBlur = shadowArr[2] || 0;
+        componentStyle.shadowSpread = shadowArr[3] || 0;
+        componentStyle.shadowColor = shadowArr[4] || "";
+      }
+      if (margin) {
+        const arr = margin.split(" ");
+        if (arr.length === 2) {
+          componentStyle.margin = "custom";
+          componentStyle.marginTop = arr[0];
+          componentStyle.marginRight = arr[1];
+          componentStyle.marginBottom = arr[0];
+          componentStyle.marginLeft = arr[1];
+        } else if (arr.length === 3) {
+          componentStyle.margin = "custom";
+          componentStyle.marginTop = arr[0];
+          componentStyle.marginRight = arr[1];
+          componentStyle.marginBottom = arr[2];
+          componentStyle.marginLeft = arr[1];
+        } else if (arr.length === 4) {
+          componentStyle.margin = "custom";
+          componentStyle.marginTop = arr[0];
+          componentStyle.marginRight = arr[1];
+          componentStyle.marginBottom = arr[2];
+          componentStyle.marginLeft = arr[3];
+        } else {
+          componentStyle.margin = margin;
+        }
+      }
+      if (padding) {
+        const arr = padding.split(" ");
+        if (arr.length === 2) {
+          componentStyle.padding = "custom";
+          componentStyle.paddingTop = arr[0];
+          componentStyle.paddingRight = arr[1];
+          componentStyle.paddingBottom = arr[0];
+          componentStyle.paddingLeft = arr[1];
+        } else if (arr.length === 3) {
+          componentStyle.padding = "custom";
+          componentStyle.paddingTop = arr[0];
+          componentStyle.paddingRight = arr[1];
+          componentStyle.paddingBottom = arr[2];
+          componentStyle.paddingLeft = arr[1];
+        } else if (arr.length === 4) {
+          componentStyle.padding = "custom";
+          componentStyle.paddingTop = arr[0];
+          componentStyle.paddingRight = arr[1];
+          componentStyle.paddingBottom = arr[2];
+          componentStyle.paddingLeft = arr[3];
+        } else {
+          componentStyle.padding = padding;
+        }
+      }
+      if (backgroundImage) {
+        if (backgroundImage.includes("linear-gradient(")) {
+          this.backgroundStyle = "gradient";
+          componentStyle.backgroundImage = backgroundImage;
+        } else {
+          componentStyle.backgroundImage = backgroundImage.replace(/url\((.+)\)/, "$1");
+        }
+      }
+      this.style = { ...componentStyle, ...otherStyle };
+    },
+    changeBgImage(e) {
+      const file = e.target.files[0];
+      if (file) {
+        this.$http.save({
+          action: "upload",
+          file,
+          SOURCE: "page"
+        }, {
+          requestType: "formData"
+        }).then((data) => {
+          if (data && data.bean) {
+            this.style.backgroundImage = data.bean;
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.getOption();
+    this.setDefaultStyle();
+  }
+};
+const _hoisted_1 = { class: "style-config" };
+const _hoisted_2 = { class: "style-config__header" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_5 = { class: "style-config__content" };
+const _hoisted_6 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_7 = { class: "style-config__header" };
+const _hoisted_8 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_9 = { class: "style-config__content" };
+const _hoisted_10 = { class: "style-config__subitem" };
+const _hoisted_11 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_12 = { class: "style-config__subitem" };
+const _hoisted_13 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_14 = { class: "style-config__subitem" };
+const _hoisted_15 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_16 = { class: "style-config__subitem" };
+const _hoisted_17 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_18 = { class: "style-config__subitem" };
+const _hoisted_19 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_20 = { class: "style-config__header" };
+const _hoisted_21 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_22 = { class: "style-config__content" };
+const _hoisted_23 = { class: "style-config__subitem" };
+const _hoisted_24 = { class: "style-config__upload" };
+const _hoisted_25 = {
+  key: 0,
+  class: "style-config__content"
+};
+const _hoisted_26 = { class: "style-config__subitem" };
+const _hoisted_27 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_28 = { class: "style-config__content" };
+const _hoisted_29 = { class: "style-config__subitem" };
+const _hoisted_30 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_31 = { class: "style-config__content" };
+const _hoisted_32 = { class: "style-config__subitem" };
+const _hoisted_33 = { class: "style-config__upload" };
+const _hoisted_34 = { class: "style-config__content" };
+const _hoisted_35 = { class: "style-config__subitem" };
+const _hoisted_36 = { class: "style-config__upload" };
+const _hoisted_37 = { class: "style-config__header" };
+const _hoisted_38 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_39 = { class: "style-config__content" };
+const _hoisted_40 = { class: "style-config__subitem" };
+const _hoisted_41 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_42 = { class: "style-config__subitem" };
+const _hoisted_43 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_44 = { class: "style-config__subitem" };
+const _hoisted_45 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_46 = { class: "style-config__subitem" };
+const _hoisted_47 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_48 = { class: "style-config__header" };
+const _hoisted_49 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_50 = { class: "style-config__content" };
+const _hoisted_51 = { class: "style-config__subitem" };
+const _hoisted_52 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_53 = { class: "style-config__subitem" };
+const _hoisted_54 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_55 = { class: "style-config__subitem" };
+const _hoisted_56 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_57 = { class: "style-config__subitem" };
+const _hoisted_58 = {
+  class: "style-config__label",
+  for: ""
+};
+const _hoisted_59 = { class: "style-config__subitem" };
+const _hoisted_60 = {
+  class: "style-config__label",
+  for: ""
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_option = resolveComponent("el-option");
+  const _component_el_input_number = resolveComponent("el-input-number");
+  const _component_el_select = resolveComponent("el-select");
+  const _component_el_radio_button = resolveComponent("el-radio-button");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_el_color_picker = resolveComponent("el-color-picker");
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_epx_color_picker = resolveComponent("epx-color-picker");
+  const _component_el_input = resolveComponent("el-input");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList([{ label: _ctx.$t("margin"), value: "margin" }, { label: _ctx.$t("padding"), value: "padding" }], (item) => {
+      return openBlock(), createElementBlock("div", {
+        key: item.value,
+        class: normalizeClass({ "style-config__item": true, "style-config__item--unfold": $data.unfold[item.value] })
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("span", null, [
+            createElementVNode("i", {
+              class: "fold-icon el-icon-caret-right",
+              onClick: ($event) => $data.unfold[item.value] = !$data.unfold[item.value]
+            }, null, 8, _hoisted_3),
+            createElementVNode("label", _hoisted_4, toDisplayString(item.label), 1)
+          ]),
+          createVNode(_component_el_select, {
+            class: "selection",
+            size: "small",
+            modelValue: $data.style[item.value],
+            "onUpdate:modelValue": ($event) => $data.style[item.value] = $event,
+            placeholder: _ctx.$t("default")
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($data.space, (item2) => {
+                return openBlock(), createBlock(_component_el_option, {
+                  key: item2.value,
+                  label: item2.label,
+                  value: item2.value
+                }, null, 8, ["label", "value"]);
+              }), 128)),
+              createVNode(_component_el_input_number, {
+                class: "space-input",
+                size: "small",
+                "model-value": $options.clearSuffix($data.style[item.value]),
+                "controls-position": "right",
+                onChange: (v) => $options.changePx(item.value, v)
+              }, null, 8, ["model-value", "onChange"])
+            ]),
+            _: 2
+          }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList([{ label: _ctx.$t("top margin"), value: "Top" }, { label: _ctx.$t("right margin"), value: "Right" }, { label: _ctx.$t("bottom margin"), value: "Bottom" }, { label: _ctx.$t("left margin"), value: "Left" }], (subItem) => {
+            return openBlock(), createElementBlock("div", {
+              class: "style-config__subitem",
+              key: subItem.value
+            }, [
+              createElementVNode("label", _hoisted_6, toDisplayString(subItem.label), 1),
+              createVNode(_component_el_select, {
+                class: "selection",
+                size: "small",
+                modelValue: $data.style[item.value + subItem.value],
+                "onUpdate:modelValue": ($event) => $data.style[item.value + subItem.value] = $event,
+                placeholder: _ctx.$t("default")
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList($data.space, (item2) => {
+                    return openBlock(), createBlock(_component_el_option, {
+                      key: item2.value,
+                      label: item2.label,
+                      value: item2.value
+                    }, null, 8, ["label", "value"]);
+                  }), 128)),
+                  createVNode(_component_el_input_number, {
+                    class: "space-input",
+                    size: "small",
+                    "model-value": $options.clearSuffix($data.style[item.value + subItem.value]),
+                    "controls-position": "right",
+                    onChange: (v) => $data.style[item.value + subItem.value] = v + "px"
+                  }, null, 8, ["model-value", "onChange"])
+                ]),
+                _: 2
+              }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder"])
+            ]);
+          }), 128))
+        ])
+      ], 2);
+    }), 128)),
+    createElementVNode("div", {
+      class: normalizeClass({ "style-config__item": true, "style-config__item--unfold": $data.unfold.text })
+    }, [
+      createElementVNode("div", _hoisted_7, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "fold-icon el-icon-caret-right",
+            onClick: _cache[0] || (_cache[0] = ($event) => $data.unfold["text"] = !$data.unfold.text)
+          }),
+          createElementVNode("label", _hoisted_8, toDisplayString(_ctx.$t("word")), 1)
+        ]),
+        createVNode(_component_el_select, {
+          class: "selection",
+          size: "small",
+          modelValue: $data.style.text,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.style.text = $event),
+          placeholder: _ctx.$t("default")
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.textOption, (item) => {
+              return openBlock(), createBlock(_component_el_option, {
+                key: item.value,
+                label: item.label,
+                value: item.value
+              }, null, 8, ["label", "value"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue", "placeholder"])
+      ]),
+      createElementVNode("div", _hoisted_9, [
+        createElementVNode("div", _hoisted_10, [
+          createElementVNode("label", _hoisted_11, toDisplayString(_ctx.$t("word size")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.fontSize),
+            "controls-position": "right",
+            onChange: _cache[2] || (_cache[2] = (v) => $data.style["fontSize"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_12, [
+          createElementVNode("label", _hoisted_13, toDisplayString(_ctx.$t("row height")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.lineHeight),
+            "controls-position": "right",
+            onChange: _cache[3] || (_cache[3] = (v) => $data.style["lineHeight"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_14, [
+          createElementVNode("label", _hoisted_15, toDisplayString(_ctx.$t("text direction")), 1),
+          createVNode(_component_el_radio_group, {
+            modelValue: $data.style.textAlign,
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $data.style.textAlign = $event),
+            size: "default"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio_button, {
+                label: "left",
+                value: "left"
+              }, {
+                default: withCtx(() => [..._cache[27] || (_cache[27] = [
+                  createElementVNode("i", { class: "epx-icon-left" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio_button, {
+                label: "center",
+                value: "center"
+              }, {
+                default: withCtx(() => [..._cache[28] || (_cache[28] = [
+                  createElementVNode("i", { class: "epx-icon-center" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio_button, {
+                label: "right",
+                value: "right"
+              }, {
+                default: withCtx(() => [..._cache[29] || (_cache[29] = [
+                  createElementVNode("i", { class: "epx-icon-right" }, null, -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_16, [
+          createElementVNode("label", _hoisted_17, toDisplayString(_ctx.$t("word again")), 1),
+          createVNode(_component_el_select, {
+            class: "selection",
+            size: "small",
+            modelValue: $data.style.fontWeight,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $data.style.fontWeight = $event),
+            placeholder: _ctx.$t("default")
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fontWeightOption, (item) => {
+                return openBlock(), createBlock(_component_el_option, {
+                  key: item.value,
+                  label: item.label,
+                  value: item.value
+                }, null, 8, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_18, [
+          createElementVNode("label", _hoisted_19, toDisplayString(_ctx.$t("font color")), 1),
+          createVNode(_component_el_color_picker, {
+            modelValue: $data.style.color,
+            "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $data.style.color = $event),
+            "show-alpha": "",
+            predefine: _ctx.predefineColors
+          }, null, 8, ["modelValue", "predefine"])
+        ])
+      ])
+    ], 2),
+    createElementVNode("div", {
+      class: normalizeClass({ "style-config__item": true, "style-config__item--unfold": $data.unfold.background })
+    }, [
+      createElementVNode("div", _hoisted_20, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "fold-icon el-icon-caret-right",
+            onClick: _cache[7] || (_cache[7] = ($event) => $data.unfold["background"] = !$data.unfold.background)
+          }),
+          createElementVNode("label", _hoisted_21, toDisplayString(_ctx.$t("background")), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_22, [
+        createElementVNode("div", _hoisted_23, [
+          _cache[32] || (_cache[32] = createElementVNode("label", {
+            class: "style-config__label",
+            for: ""
+          }, "背景色样式", -1)),
+          createElementVNode("div", _hoisted_24, [
+            createVNode(_component_el_radio_group, {
+              modelValue: $data.backgroundStyle,
+              "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $data.backgroundStyle = $event),
+              size: "default",
+              onChange: _cache[9] || (_cache[9] = ($event) => {
+                $data.style["backgroundImage"] = "";
+                $data.style["backgroundColor"] = "";
+              })
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_radio, {
+                  label: "color",
+                  value: "color"
+                }, {
+                  default: withCtx(() => [..._cache[30] || (_cache[30] = [
+                    createTextVNode("纯色", -1)
+                  ])]),
+                  _: 1
+                }),
+                createVNode(_component_el_radio, {
+                  label: "gradient",
+                  value: "gradient"
+                }, {
+                  default: withCtx(() => [..._cache[31] || (_cache[31] = [
+                    createTextVNode("渐变色色", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])
+        ])
+      ]),
+      $data.backgroundStyle === "gradient" ? (openBlock(), createElementBlock("div", _hoisted_25, [
+        createElementVNode("div", _hoisted_26, [
+          createElementVNode("label", _hoisted_27, toDisplayString(_ctx.$t("background color")), 1),
+          createVNode(_component_epx_color_picker, {
+            modelValue: $data.style.backgroundImage,
+            "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => $data.style.backgroundImage = $event)
+          }, null, 8, ["modelValue"])
+        ])
+      ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        createElementVNode("div", _hoisted_28, [
+          createElementVNode("div", _hoisted_29, [
+            createElementVNode("label", _hoisted_30, toDisplayString(_ctx.$t("background color")), 1),
+            createVNode(_component_el_color_picker, {
+              modelValue: $data.style.backgroundColor,
+              "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => $data.style.backgroundColor = $event),
+              "show-alpha": "",
+              predefine: _ctx.predefineColors
+            }, null, 8, ["modelValue", "predefine"])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_31, [
+          createElementVNode("div", _hoisted_32, [
+            _cache[33] || (_cache[33] = createElementVNode("label", {
+              class: "style-config__label",
+              for: ""
+            }, "背景图片", -1)),
+            createElementVNode("div", _hoisted_33, [
+              createVNode(_component_el_input, {
+                class: "input upload-input",
+                "model-value": $data.style.backgroundImage,
+                type: "text",
+                size: "default",
+                clearable: "",
+                onClear: _cache[13] || (_cache[13] = ($event) => $data.style["backgroundImage"] = "")
+              }, {
+                suffix: withCtx(() => [
+                  createElementVNode("i", {
+                    class: "el-icon-upload",
+                    onClick: _cache[12] || (_cache[12] = ($event) => _ctx.$refs.fileInput.click())
+                  })
+                ]),
+                _: 1
+              }, 8, ["model-value"]),
+              createElementVNode("input", {
+                style: { width: 0, height: 0 },
+                ref: "fileInput",
+                type: "file",
+                onChange: _cache[14] || (_cache[14] = (...args) => $options.changeBgImage && $options.changeBgImage(...args))
+              }, null, 544)
+            ])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_34, [
+          createElementVNode("div", _hoisted_35, [
+            _cache[37] || (_cache[37] = createElementVNode("label", {
+              class: "style-config__label",
+              for: ""
+            }, "背景适应模式", -1)),
+            createElementVNode("div", _hoisted_36, [
+              createVNode(_component_el_radio_group, {
+                modelValue: $data.style.backgroundSize,
+                "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => $data.style.backgroundSize = $event),
+                size: "default"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_radio, {
+                    label: "cover",
+                    value: "cover"
+                  }, {
+                    default: withCtx(() => [..._cache[34] || (_cache[34] = [
+                      createTextVNode("裁剪", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_radio, {
+                    label: "contain",
+                    value: "contain"
+                  }, {
+                    default: withCtx(() => [..._cache[35] || (_cache[35] = [
+                      createTextVNode("适应", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_radio, {
+                    label: "100% 100%",
+                    value: "100% 100%"
+                  }, {
+                    default: withCtx(() => [..._cache[36] || (_cache[36] = [
+                      createTextVNode("拉伸", -1)
+                    ])]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])
+          ])
+        ])
+      ], 64))
+    ], 2),
+    createElementVNode("div", {
+      class: normalizeClass({ "style-config__item": true, "style-config__item--unfold": $data.unfold.border })
+    }, [
+      createElementVNode("div", _hoisted_37, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "fold-icon el-icon-caret-right",
+            onClick: _cache[16] || (_cache[16] = ($event) => $data.unfold["border"] = !$data.unfold.border)
+          }),
+          createElementVNode("label", _hoisted_38, toDisplayString(_ctx.$t("border")), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_39, [
+        createElementVNode("div", _hoisted_40, [
+          createElementVNode("label", _hoisted_41, toDisplayString(_ctx.$t("linear")), 1),
+          createVNode(_component_el_select, {
+            class: "selection",
+            size: "small",
+            modelValue: $data.style.borderStyle,
+            "onUpdate:modelValue": _cache[17] || (_cache[17] = ($event) => $data.style.borderStyle = $event),
+            placeholder: _ctx.$t("not")
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.borderStyleOption, (item) => {
+                return openBlock(), createBlock(_component_el_option, {
+                  key: item.value,
+                  label: item.label,
+                  value: item.value
+                }, null, 8, ["label", "value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_42, [
+          createElementVNode("label", _hoisted_43, toDisplayString(_ctx.$t("width")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.borderWidth),
+            "controls-position": "right",
+            onChange: _cache[18] || (_cache[18] = (v) => $data.style["borderWidth"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_44, [
+          createElementVNode("label", _hoisted_45, toDisplayString(_ctx.$t("color")), 1),
+          createVNode(_component_el_color_picker, {
+            modelValue: $data.style.borderColor,
+            "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => $data.style.borderColor = $event),
+            "show-alpha": "",
+            predefine: _ctx.predefineColors
+          }, null, 8, ["modelValue", "predefine"])
+        ]),
+        createElementVNode("div", _hoisted_46, [
+          createElementVNode("label", _hoisted_47, toDisplayString(_ctx.$t("filleted corner")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.borderRadius),
+            "controls-position": "right",
+            onChange: _cache[20] || (_cache[20] = (v) => $data.style["borderRadius"] = v + "px")
+          }, null, 8, ["model-value"])
+        ])
+      ])
+    ], 2),
+    createElementVNode("div", {
+      class: normalizeClass({ "style-config__item": true, "style-config__item--unfold": $data.unfold.shadow })
+    }, [
+      createElementVNode("div", _hoisted_48, [
+        createElementVNode("span", null, [
+          createElementVNode("i", {
+            class: "fold-icon el-icon-caret-right",
+            onClick: _cache[21] || (_cache[21] = ($event) => $data.unfold["shadow"] = !$data.unfold.shadow)
+          }),
+          createElementVNode("label", _hoisted_49, toDisplayString(_ctx.$t("shadow")), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_50, [
+        createElementVNode("div", _hoisted_51, [
+          createElementVNode("label", _hoisted_52, toDisplayString(_ctx.$t("level of the shadow")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.hShadow),
+            "controls-position": "right",
+            onChange: _cache[22] || (_cache[22] = (v) => $data.style["hShadow"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_53, [
+          createElementVNode("label", _hoisted_54, toDisplayString(_ctx.$t("vertical shadow")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.vShadow),
+            "controls-position": "right",
+            onChange: _cache[23] || (_cache[23] = (v) => $data.style["vShadow"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_55, [
+          createElementVNode("label", _hoisted_56, toDisplayString(_ctx.$t("fuzzy distance")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.shadowBlur),
+            "controls-position": "right",
+            onChange: _cache[24] || (_cache[24] = (v) => $data.style["shadowBlur"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_57, [
+          createElementVNode("label", _hoisted_58, toDisplayString(_ctx.$t("size of the shadow")), 1),
+          createVNode(_component_el_input_number, {
+            size: "small",
+            "model-value": $options.clearSuffix($data.style.shadowSpread),
+            "controls-position": "right",
+            onChange: _cache[25] || (_cache[25] = (v) => $data.style["shadowSpread"] = v + "px")
+          }, null, 8, ["model-value"])
+        ]),
+        createElementVNode("div", _hoisted_59, [
+          createElementVNode("label", _hoisted_60, toDisplayString(_ctx.$t("shadow color")), 1),
+          createVNode(_component_el_color_picker, {
+            modelValue: $data.style.shadowColor,
+            "onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => $data.style.shadowColor = $event),
+            "show-alpha": "",
+            predefine: _ctx.predefineColors
+          }, null, 8, ["modelValue", "predefine"])
+        ])
+      ])
+    ], 2)
+  ]);
+}
+const StyleConfig = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-390b61e8"]]);
+export {
+  StyleConfig as default
+};