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

package/dist/src/page-designer/previews/layout/ColumnPreview.js

@@ -0,0 +1,47 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, mergeProps, createCommentVNode } from "vue";
+/* empty css                  */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-layout-column--preview",
+  mixins: [previewMixin],
+  computed: {
+    colSpan() {
+      const { xsspan, span } = this.widget;
+      const value = this.$isMobile ? xsspan || span : span;
+      return value === void 0 || value === null || value === "" ? void 0 : Number(value);
+    }
+  }
+  // 所有拖拽方法已在 Mixin 中实现
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "epx-page-designer-widget-preview__no-widget"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_page_designer_widget_preview_item = resolveComponent("epx-page-designer-widget-preview-item");
+  const _component_el_col = resolveComponent("el-col");
+  return openBlock(), createBlock(_component_el_col, {
+    span: $options.colSpan,
+    class: "epx-page-designer-widget-preview__drop-zone"
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+        return openBlock(), createBlock(_component_epx_page_designer_widget_preview_item, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+          class: "epx-layout__component",
+          designer: _ctx.designer,
+          key: childWidget.id,
+          widget: childWidget,
+          "parent-widget": _ctx.widget
+        }), null, 16, ["designer", "widget", "parent-widget"]);
+      }), 128)),
+      _ctx.childWidgetList.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, "拖拽组件到这里")) : createCommentVNode("", true)
+    ]),
+    _: 1
+  }, 8, ["span"]);
+}
+const LayoutColumnPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4c8268c2"]]);
+export {
+  LayoutColumnPreview as default
+};

package/dist/src/page-designer/previews/layout/Preview.js

@@ -0,0 +1,110 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, normalizeStyle, withCtx, Fragment, renderList, createBlock, mergeProps } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-layout-component--preview",
+  mixins: [previewMixin],
+  layout: "12:12",
+  gutter: 10,
+  computed: {
+    gutter() {
+      const { gutter = this.$options.gutter } = this.$configs;
+      return gutter;
+    },
+    draglist: {
+      get() {
+        return [];
+      },
+      set(v) {
+        this.designer.addWidget(v[0], this.widget);
+      }
+    },
+    colAttribute() {
+      return (component = {}) => {
+        const { xsspan, span } = component;
+        return Number((this.$isMobile ? xsspan : span) || this.$configs.columnWidth) || 24;
+      };
+    }
+  },
+  created() {
+    if (this.childWidgetList.length === 0) {
+      this.designer.updateWidgetConfig(this.widget.id, { layout: "12:12" });
+      this.designer.addWidgets([
+        { id: "layout-column_" + this.$util.genId(), title: "布局", contentType: "layout-column", span: "12" },
+        { id: "layout-column_" + this.$util.genId(), title: "布局", contentType: "layout-column", span: "12" }
+      ], this.widget, { defaultSelected: false });
+    } else {
+      const layoutArr = [];
+      const components = this.childWidgetList.map((item) => {
+        const span = item.span || this.$configs.columnWidth || 24;
+        layoutArr.push(span);
+        if (item.contentType === "layout-column") {
+          return item;
+        } else {
+          ({ ...item });
+          return {
+            id: "layout-column_" + this.$util.genId(),
+            title: "布局",
+            contentType: "layout-column",
+            span,
+            xsspan: item.xsspan,
+            items: [item]
+          };
+        }
+      });
+      this.designer.updateWidget(this.widget.id, { items: components });
+      this.designer.updateWidgetConfig(this.widget.id, { layout: layoutArr.join(":") });
+    }
+  }
+};
+const _hoisted_1 = { class: "layout-preview" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_layout_column__preview = resolveComponent("epx-layout-column--preview");
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_col = resolveComponent("el-col");
+  const _component_el_row = resolveComponent("el-row");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_el_row, {
+      style: normalizeStyle(_ctx.widgetStyle),
+      gutter: $options.gutter,
+      "data-id": _ctx.widget.id
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: childWidget.id
+          }, [
+            childWidget.contentType === "layout-column" || childWidget.contentType === "column" ? (openBlock(), createBlock(_component_epx_layout_column__preview, mergeProps({
+              key: 0,
+              ref_for: true
+            }, _ctx.$forwardAttrs(_ctx.$attrs), {
+              designer: _ctx.designer,
+              widget: childWidget,
+              "parent-widget": _ctx.widget
+            }), null, 16, ["designer", "widget", "parent-widget"])) : (openBlock(), createBlock(_component_el_col, {
+              key: childWidget.id,
+              column: "false",
+              span: $options.colAttribute(childWidget)
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+                  class: "epx-layout__component",
+                  designer: _ctx.designer,
+                  widget: childWidget,
+                  "parent-widget": _ctx.widget
+                }), null, 16, ["designer", "widget", "parent-widget"])
+              ]),
+              _: 2
+            }, 1032, ["span"]))
+          ], 64);
+        }), 128))
+      ]),
+      _: 1
+    }, 8, ["style", "gutter", "data-id"])
+  ]);
+}
+const LayoutPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  LayoutPreview as default
+};

package/dist/src/page-designer/previews/num/Preview.js

@@ -0,0 +1,132 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-num-statistic--preview",
+  mixins: [previewMixin],
+  props: {
+    theme: String
+  },
+  data() {
+    return {
+      activeName: "",
+      counts: {}
+    };
+  },
+  computed: {
+    compTheme() {
+      return this.$configs.theme || this.theme;
+    },
+    type() {
+      const { type = this.$isMobile ? "" : "card" } = this.$configs;
+      return type !== "default" ? type : "";
+    },
+    componentType() {
+      const { type } = this.$configs;
+      return type || "card";
+    },
+    classNameList() {
+      const { cardLayout, iconPosition, "justify-content": justify } = this.$configs;
+      if (cardLayout) {
+        return cardLayout.split("-").map((item) => "epx-card-num--" + item);
+      } else {
+        const classNameList = [];
+        if (iconPosition) {
+          classNameList.push("epx-card-num--icon-" + iconPosition);
+        }
+        if (justify) {
+          classNameList.push("epx-card-num--" + justify);
+        }
+        return classNameList;
+      }
+    },
+    titleFontStyle() {
+      const { titleFontStyle = {}, titleColor, titleFontSize } = this.$configs;
+      return { fontSize: titleFontSize, color: titleColor, ...titleFontStyle };
+    },
+    countFontStyle() {
+      const { countFontStyle = {}, countFontSize, countColor } = this.$configs;
+      return { fontSize: countFontSize, color: countColor, ...countFontStyle };
+    },
+    unitFontStyle() {
+      const { unitFontStyle = {} } = this.$configs;
+      return { ...unitFontStyle };
+    },
+    contentClassName() {
+      const { cardLayout, titleNumOrder, orientation } = this.$configs;
+      if (cardLayout) {
+        return "epx-card-num__content--" + titleNumOrder;
+      }
+      return `epx-card-num__content--${orientation || "vertical"}`;
+    }
+  }
+};
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "epx-card-num__num" };
+const _hoisted_3 = { class: "epx-num-item__title" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $options.componentType === "card" ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(["epx-card-num", { "is-border": _ctx.$configs.border }, `epx-card-num--${$options.compTheme}`, `epx-card-num--shadow-${_ctx.$configs.shadow}`, ...$options.classNameList]),
+    style: normalizeStyle({ ..._ctx.style })
+  }, [
+    _ctx.$configs.iconType !== "image" && _ctx.$configs.icon || _ctx.$configs.iconType === "image" && _ctx.$configs.imgUrl ? (openBlock(), createElementBlock("span", {
+      key: 0,
+      class: normalizeClass(["epx-card-num__icon", { "epx-card-num__icon--showBg": _ctx.$configs.iconType !== "image" && _ctx.$configs.showIconBg }]),
+      style: normalizeStyle({ backgroundColor: _ctx.$configs.iconType !== "image" && _ctx.$configs.iconColor && _ctx.$configs.showIconBg ? _ctx.$configs.iconColor : "" })
+    }, [
+      _ctx.$configs.iconType === "image" ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        style: normalizeStyle({ width: _ctx.$configs.iconSize + "px", height: _ctx.$configs.iconSize + "px" }),
+        src: _ctx.$util.getFileUrl(_ctx.$configs.imgUrl)
+      }, null, 12, _hoisted_1)) : (openBlock(), createElementBlock("i", {
+        key: 1,
+        class: normalizeClass([_ctx.$configs.icon]),
+        style: normalizeStyle({ fontSize: _ctx.$configs.iconSize + "px", color: _ctx.$configs.iconColor && !_ctx.$configs.showIconBg ? _ctx.$configs.iconColor : "" })
+      }, null, 6))
+    ], 6)) : createCommentVNode("", true),
+    createElementVNode("div", {
+      class: normalizeClass(["epx-card-num__content", $options.contentClassName])
+    }, [
+      createElementVNode("font", {
+        class: "epx-card-num__title",
+        style: normalizeStyle($options.titleFontStyle)
+      }, toDisplayString(_ctx.widget.title || _ctx.$configs.componentName || this.widget.title), 5),
+      createElementVNode("span", _hoisted_2, [
+        createElementVNode("font", {
+          style: normalizeStyle($options.countFontStyle)
+        }, toDisplayString(0), 4),
+        _ctx.$configs.suffix ? (openBlock(), createElementBlock("font", {
+          key: 0,
+          class: "epx-card-num__suffix",
+          style: normalizeStyle($options.unitFontStyle)
+        }, toDisplayString(_ctx.$configs.suffix), 5)) : createCommentVNode("", true)
+      ])
+    ], 2)
+  ], 6)) : (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: "epx-num-item",
+    style: normalizeStyle(_ctx.style)
+  }, [
+    createElementVNode("p", _hoisted_3, [
+      createElementVNode("i", {
+        class: normalizeClass(["epx-num-item__icon", _ctx.$configs.icon])
+      }, null, 2),
+      createElementVNode("i", {
+        class: "epx-num-item__text",
+        style: normalizeStyle($options.titleFontStyle)
+      }, toDisplayString(_ctx.$configs.title || _ctx.$configs.componentName || this.widget.title), 5)
+    ]),
+    createElementVNode("p", {
+      class: "epx-num-item__counts",
+      style: normalizeStyle($options.countFontStyle)
+    }, [..._cache[0] || (_cache[0] = [
+      createElementVNode("span", null, "0", -1)
+    ])], 4)
+  ], 4));
+}
+const NumPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NumPreview as default
+};

package/dist/src/page-designer/previews/page-tabs/Preview.js

@@ -0,0 +1,75 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementBlock, Fragment, renderList, createVNode, mergeProps } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-tabs--preview",
+  mixins: [previewMixin],
+  data() {
+    return {
+      activeName: "",
+      counts: {}
+    };
+  },
+  computed: {
+    type() {
+      const { type = this.$isMobile ? "" : "card" } = this.$configs;
+      return type !== "default" ? type : "";
+    },
+    componentLabel() {
+      return (component) => {
+        const count = this.counts[component.id];
+        if (count !== void 0) {
+          return `${component.title}(${count || 0})`;
+        }
+        return component.title;
+      };
+    }
+  },
+  watch: {
+    childWidgetList: {
+      handler(v) {
+        const item = v.find((item2) => item2.id === this.activeName);
+        if (!item) this.activeName = v[0].id;
+      },
+      immediate: true
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  return openBlock(), createBlock(_component_el_tabs, {
+    modelValue: $data.activeName,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.activeName = $event),
+    style: normalizeStyle(_ctx.style),
+    class: "epx-page-tabs",
+    type: $options.type
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+        return openBlock(), createBlock(_component_el_tab_pane, {
+          key: childWidget.id,
+          label: $options.componentLabel(childWidget),
+          name: childWidget.id,
+          lazy: ""
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+              designer: _ctx.designer,
+              widget: childWidget,
+              "parent-widget": _ctx.widget
+            }), null, 16, ["designer", "widget", "parent-widget"])
+          ]),
+          _: 2
+        }, 1032, ["label", "name"]);
+      }), 128))
+    ]),
+    _: 1
+  }, 8, ["modelValue", "style", "type"]);
+}
+const PageTabsPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  PageTabsPreview as default
+};

package/dist/src/page-designer/previews/step/Preview.js

@@ -0,0 +1,207 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle, toDisplayString, renderSlot, createTextVNode, createVNode, mergeProps } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-step--preview",
+  mixins: [previewMixin],
+  data() {
+    return {
+      active: 0,
+      selected: 1
+    };
+  },
+  computed: {
+    componentLabel() {
+      return (component) => {
+        const count = this.counts[component.id];
+        if (count !== void 0) {
+          return `${component.title}(${count || 0})`;
+        }
+        return component.title;
+      };
+    },
+    activeStep() {
+      return this.childWidgetList[this.active - 0];
+    },
+    stepDescription() {
+      return (step) => {
+        const stepConfigs = this.designer.widgetConfig[step.id];
+        if (stepConfigs) {
+          return stepConfigs.description;
+        }
+      };
+    },
+    stepItemIconStyle() {
+      return (index) => {
+        const { type, activeColor, finishColor, waitColor, activeBgImg, finishBgImg, waitBgImg, stepItemSize, stepFontStyle = {} } = this.$configs;
+        const style = { ...stepFontStyle };
+        if (stepItemSize) {
+          style.width = stepItemSize + "px";
+          style.height = stepItemSize + "px";
+          style.lineHeight = (type === "solid" ? stepItemSize : stepItemSize - 4) + "px";
+        }
+        if (this.active === index) {
+          if (activeColor) {
+            style.borderColor = activeColor;
+            if (type === "solid") {
+              style.backgroundColor = activeColor;
+            } else {
+              style.color = activeColor;
+            }
+          }
+          if (activeBgImg) {
+            style.backgroundImage = `url(${this.$util.getFileUrl(activeBgImg)})`;
+          }
+        } else if (this.active > index) {
+          if (finishColor) {
+            style.borderColor = finishColor;
+            if (type === "solid") {
+              style.background = finishColor;
+            } else {
+              style.color = finishColor;
+            }
+          }
+          if (finishBgImg) {
+            style.backgroundImage = `url(${this.$util.getFileUrl(finishBgImg)}) no-repeat center 100% 100%`;
+          }
+        } else {
+          if (waitColor) {
+            style.borderColor = waitColor;
+            if (type === "solid") {
+              style.background = waitColor;
+            } else {
+              style.color = waitColor;
+            }
+          }
+          if (waitBgImg) {
+            style.backgroundImage = `url(${this.$util.getFileUrl(waitBgImg)}) no-repeat center 100% 100%`;
+          }
+        }
+        return style;
+      };
+    },
+    stepItemTextStyle() {
+      return (index) => {
+        const { activeColor, finishColor, waitColor, stepTitleFontStyle } = this.$configs;
+        const style = { ...stepTitleFontStyle };
+        if (this.selected === index) {
+          if (this.active === index) {
+            if (activeColor) {
+              style.color = activeColor;
+            }
+          } else if (this.active > index) {
+            if (finishColor) {
+              style.color = finishColor;
+            }
+          } else {
+            if (waitColor) {
+              style.color = waitColor;
+            }
+          }
+        }
+        return style;
+      };
+    },
+    stepItemDescriptionStyle() {
+      const { stepDescriptionFontStyle = {} } = this.$configs;
+      return stepDescriptionFontStyle;
+    },
+    stepItemLineStyle() {
+      return (index) => {
+        const { finishColor } = this.$configs;
+        if (this.active > index) {
+          if (finishColor) {
+            return { color: finishColor };
+          }
+        }
+        return {};
+      };
+    }
+  },
+  watch: {
+    childWidgetList: {
+      handler(v) {
+        const item = v.find((item2) => item2.id === this.activeName);
+        if (!item) this.activeName = v[0].id;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    switchStep(index) {
+      this.active = index;
+    }
+  },
+  created() {
+    const activeStep = Number(this.$configs.activeStep - 1);
+    if (activeStep) {
+      this.active = activeStep;
+      this.selected = activeStep;
+    }
+    if (this.childWidgetList.length === 0) {
+      this.designer.addWidgets([
+        { id: "stepitem_" + this.$util.genId(), title: "步骤项1", contentType: "step-item" },
+        { id: "stepitem_" + this.$util.genId(), title: "步骤项2", contentType: "step-item" }
+      ], this.widget, { defaultSelected: false });
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-step" };
+const _hoisted_2 = { class: "epx-step__steps" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "epx-step-item__head" };
+const _hoisted_5 = { class: "epx-step-item__main" };
+const _hoisted_6 = { class: "epx-step__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (step, index) => {
+        return openBlock(), createElementBlock("div", {
+          key: step.id,
+          class: normalizeClass(["epx-step-item", { "epx-step-item--solid": _ctx.$configs.type === "solid", "is-selected": $data.selected === index, "is-active": $data.active == index, "is-finish": $data.active > index }]),
+          onClick: ($event) => $options.switchStep(index)
+        }, [
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", {
+              class: "epx-step-item__line",
+              style: normalizeStyle($options.stepItemLineStyle(index))
+            }, null, 4),
+            createElementVNode("div", {
+              class: "epx-step-item__icon",
+              style: normalizeStyle($options.stepItemIconStyle(index))
+            }, [
+              createElementVNode("span", null, toDisplayString(index + 1), 1)
+            ], 4)
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            createElementVNode("span", {
+              class: "epx-step-item__text",
+              style: normalizeStyle($options.stepItemTextStyle(index))
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(toDisplayString(step.title), 1)
+              ])
+            ], 4),
+            createElementVNode("p", {
+              class: "epx-step-item__description",
+              style: normalizeStyle($options.stepItemDescriptionStyle)
+            }, toDisplayString($options.stepDescription(step)), 5)
+          ])
+        ], 10, _hoisted_3);
+      }), 128))
+    ]),
+    createElementVNode("div", _hoisted_6, [
+      createVNode(_component_widget_preview, mergeProps(_ctx.$forwardAttrs(_ctx.$attrs), {
+        designer: _ctx.designer,
+        "parent-widget": _ctx.widget,
+        widget: $options.activeStep
+      }), null, 16, ["designer", "parent-widget", "widget"])
+    ])
+  ]);
+}
+const StepPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  StepPreview as default
+};

package/dist/src/page-designer/previews/tabs/Preview.js

@@ -0,0 +1,95 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementBlock, Fragment, renderList, createVNode, mergeProps, createElementVNode, normalizeClass, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-tabs--preview",
+  mixins: [previewMixin],
+  data() {
+    return {
+      activeName: "",
+      counts: {}
+    };
+  },
+  computed: {
+    type() {
+      let { type } = this.$configs;
+      if (!type) {
+        type = this.$isMobile ? "" : "card";
+      }
+      return type === "default" ? "" : type;
+    },
+    componentLabel() {
+      return (component) => {
+        const count = this.counts[component.id];
+        if (count !== void 0) {
+          return `${component.title}(${count || 0})`;
+        }
+        return component.title;
+      };
+    }
+  },
+  watch: {
+    childWidgetList: {
+      handler(v) {
+        const item = v.find((item2) => item2.id === this.activeName);
+        if (!item) this.activeName = v[0].id;
+      },
+      immediate: true
+    }
+  },
+  created() {
+    if (this.childWidgetList.length === 0) {
+      this.designer.addWidgets([
+        { id: "tabpane_" + this.$util.genId(), title: "标签项1", contentType: "tab-pane" },
+        { id: "tabpane_" + this.$util.genId(), title: "标签项2", contentType: "tab-pane" }
+      ], this.widget, { defaultSelected: false });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  return openBlock(), createBlock(_component_el_tabs, {
+    style: normalizeStyle(_ctx.widgetStyle),
+    modelValue: $data.activeName,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.activeName = $event),
+    class: "epx-page-tabs",
+    type: $options.type,
+    tabPosition: _ctx.$configs.tabPosition
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (tab) => {
+        return openBlock(), createBlock(_component_el_tab_pane, {
+          key: tab.id,
+          name: tab.id,
+          lazy: ""
+        }, {
+          label: withCtx(() => [
+            createElementVNode("span", null, [
+              tab.icon ? (openBlock(), createElementBlock("i", {
+                key: 0,
+                class: normalizeClass(tab.icon)
+              }, null, 2)) : createCommentVNode("", true),
+              createTextVNode(" " + toDisplayString($options.componentLabel(tab)), 1)
+            ])
+          ]),
+          default: withCtx(() => [
+            createVNode(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+              designer: _ctx.designer,
+              "parent-widget": _ctx.widget,
+              widget: tab
+            }), null, 16, ["designer", "parent-widget", "widget"])
+          ]),
+          _: 2
+        }, 1032, ["name"]);
+      }), 128))
+    ]),
+    _: 1
+  }, 8, ["style", "modelValue", "type", "tabPosition"]);
+}
+const TabsPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  TabsPreview as default
+};