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

package/dist/src/page-designer/widget-preview/Preview.js

@@ -0,0 +1,277 @@
+import '../../../style.css';
+import util from "@epxing/core/src/runtime-utils/util";
+import TemplatePreview from "./Template.js";
+import widgetDesignerDirective from "./directive.js";
+import { resolvePreviewName } from "./resolvePreviewName.js";
+import { createDropCache, insertIndex, clearDropCache, insertLineRect } from "./dropPosition.js";
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, Fragment, renderList, createBlock, withDirectives, resolveDynamicComponent, createCommentVNode } from "vue";
+/* empty css            */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+function appendCss(id, css) {
+  const formatCss = css.replace(/:current/g, ".css_" + id).replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+    return `url(${util.getFileUrl($1)})`;
+  });
+  const element = document.getElementById("style_" + id);
+  if (element) {
+    element.textContent = formatCss;
+  } else {
+    const style = document.createElement("style");
+    style.id = "style_" + id;
+    style.textContent = formatCss;
+    style.setAttribute("type", "text/css");
+    document.head.appendChild(style);
+  }
+}
+function removeCss(id) {
+  const element = document.getElementById("style_" + id);
+  if (element) document.head.removeChild(element);
+}
+const _sfc_main = {
+  name: "epx-page-designer-widget-preview",
+  // T33：原为 module-level `Vue.directive('widget-designer', …)`（Vue3 无全局 Vue.directive）。
+  // 改成**局部注册** —— 最干净：不依赖 app 单例，也不会有「指令重复注册」的 dev 告警。
+  directives: { "widget-designer": widgetDesignerDirective },
+  data() {
+    return {};
+  },
+  components: {
+    TemplatePreview
+  },
+  props: {
+    designer: Object,
+    pageRelationList: Array
+  },
+  // emits: ['widget-click', 'widget-hover'],
+  computed: {
+    isContainer() {
+      return (v) => {
+        const widgetInfo = this.designer.getWidgetByType(v.code) || {};
+        return widgetInfo.CONTAINER === "1";
+      };
+    },
+    widgetInfo() {
+      return (v) => {
+        return this.designer.getWidgetByType(v.code) || {};
+      };
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    getWidgetName() {
+      return (widget) => resolvePreviewName(this.designer, widget);
+    }
+  },
+  watch: {
+    "designer.pageConfig.css"(v) {
+      appendCss(this.designer.page.pageId, v);
+    }
+  },
+  methods: {
+    // 根画布拖拽进入：重新测量一次根列表的 children，之后的 dragover 复用缓存
+    onRootDragEnter(e) {
+      if (this._rootDragLeaveTimer) {
+        clearTimeout(this._rootDragLeaveTimer);
+        this._rootDragLeaveTimer = null;
+      }
+      if (!this.isDraggingFromLibrary(e)) return;
+      if (!this._dropCache) this._dropCache = createDropCache();
+      clearDropCache(this._dropCache);
+      this.designer.setDragOverTarget({ type: "root", widgetId: null });
+      this.designer.setDragOverTargetElement(this.$refs.rootDropZone);
+      this.designer.setPreviewDragTarget({ widgetId: null, position: "root" });
+    },
+    // 根画布拖拽悬停：只记坐标 + 允许放置；插入位置的计算与状态更新合并到下一帧
+    onRootDragOver(e) {
+      if (!this.isDraggingFromLibrary(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = this.designer.dragState.dragSource === "preview" ? "move" : "copy";
+      this._dragClientX = e.clientX;
+      this._dragClientY = e.clientY;
+      if (this._dragFrame) return;
+      this._dragFrame = requestAnimationFrame(() => {
+        this._dragFrame = null;
+        if (!this.designer.dragState.isDragging) return;
+        this.designer.updateDragGhostPosition(this._dragClientX, this._dragClientY);
+        const listEl = this.$el.querySelector(".epx-page-designer-widget-preview__draggable");
+        if (!this._dropCache) this._dropCache = createDropCache();
+        const lineRect = insertLineRect(this._dropCache, listEl, this._dragClientY);
+        if (lineRect) this.designer.setDragInsertLine(lineRect);
+        this.designer.setPreviewDragTarget({ widgetId: null, index: insertIndex(this._dropCache, listEl, this._dragClientY), position: "root" });
+      });
+    },
+    onRootDragLeave(e) {
+      if (this._rootDragLeaveTimer) {
+        clearTimeout(this._rootDragLeaveTimer);
+      }
+      this._rootDragLeaveTimer = setTimeout(() => {
+        if (!this.$refs.rootDropZone || !this.$refs.rootDropZone.contains(e.relatedTarget)) {
+          this.designer.clearDragOverTarget();
+          this.designer.clearDragInsertLine();
+          this.designer.clearPreviewDragTarget();
+          if (this._dropCache) clearDropCache(this._dropCache);
+        }
+        this._rootDragLeaveTimer = null;
+      }, 50);
+    },
+    isDraggingFromLibrary(e) {
+      return e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes("text/plain");
+    },
+    onRootDrop(e) {
+      e.preventDefault();
+      if (this._rootDragLeaveTimer) {
+        clearTimeout(this._rootDragLeaveTimer);
+        this._rootDragLeaveTimer = null;
+      }
+      this.designer.clearDragOverTarget();
+      this.designer.clearDragInsertLine();
+      this.designer.clearPreviewDragTarget();
+      const listEl = this.$el.querySelector(".epx-page-designer-widget-preview__draggable");
+      if (!this._dropCache) this._dropCache = createDropCache();
+      const index = insertIndex(this._dropCache, listEl, e.clientY);
+      clearDropCache(this._dropCache);
+      this.designer.handleDrop({ dataTransfer: e.dataTransfer, target: { type: "root", widgetId: null, index } });
+    },
+    splitTemplate() {
+      const { CONTENT } = this.widgetInfo;
+      if (CONTENT) {
+        const config = JSON.parse(CONTENT);
+        const { id } = this.designer.selectedWidget;
+        const { items, itemConfigs, JS: templateJs } = config;
+        const formatConfig = (arr) => {
+          arr.forEach((compItem) => {
+            const oldId = compItem.id;
+            const newId = compItem.contentType + "_" + this.$util.genId();
+            if (itemConfigs[oldId]) {
+              itemConfigs[newId] = itemConfigs[oldId];
+              delete itemConfigs[oldId];
+            }
+            compItem.id = newId;
+            if (compItem.items) {
+              formatConfig(compItem.items);
+            }
+          });
+        };
+        formatConfig(items);
+        const findWidgetPos = (arr, parent) => {
+          for (let i = 0; i < arr.length; i++) {
+            const item = arr[i];
+            if (item.id === id) {
+              return { parent, index: i };
+            } else if (item.items) {
+              const child = findWidgetPos(item.items, item);
+              if (child) return child;
+            }
+          }
+        };
+        const widgetPos = findWidgetPos(this.designer.widgetList, null);
+        if (widgetPos) {
+          const { parent, index } = widgetPos;
+          if (parent) {
+            parent.items.splice(index, 1, ...items);
+          } else {
+            this.designer.widgetList.splice(index, 1, ...items);
+          }
+          this.designer.mergeWidgetConfig(itemConfigs);
+          delete this.designer.widgetConfig[id];
+          if (templateJs) {
+            let { JS = "" } = this.designer.pageConfig;
+            const result = JS.match(/export\sfunction\s(\w+)/g);
+            const events = [];
+            if (result) {
+              result.forEach((item) => {
+                events.push(item.replace(/export\sfunction\s/, ""));
+              });
+            }
+            const templateJsResult = templateJs.split(/export\s+function\s+/);
+            templateJsResult.forEach((item) => {
+              const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, "");
+              if (funtionStr.replace(/[\n\s]+/g, "").length > 0) {
+                const funtionName = funtionStr.split(/\s+\(/)[0];
+                if (![...new Set(events)].includes(funtionName)) {
+                  JS += "export function " + funtionStr.replace(/^\w+/, funtionName);
+                }
+              }
+            });
+            this.designer.updatePageConfig({ JS });
+          }
+          this.designer.setSelected(items[0]);
+        }
+      }
+    },
+    onDragUpdate() {
+    },
+    checkMove() {
+    },
+    handleWidgetClick(data) {
+      this.$emit("widget-click", data);
+    },
+    handleWidgetHover(widgetId) {
+      this.$emit("widget-hover", widgetId);
+    }
+  },
+  created() {
+    const { css } = this.designer.pageConfig;
+    if (css) {
+      appendCss(this.designer.page.pageId, css);
+    }
+  },
+  unmounted() {
+    removeCss(this.designer.page.pageId);
+    if (this._rootDragLeaveTimer) {
+      clearTimeout(this._rootDragLeaveTimer);
+      this._rootDragLeaveTimer = null;
+    }
+    if (this._dragFrame) {
+      cancelAnimationFrame(this._dragFrame);
+      this._dragFrame = null;
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer-widget-preview__draggable epx-page-designer-widget-preview__draggable-list el-row" };
+const _hoisted_2 = {
+  key: 0,
+  class: "epx-page-designer-widget-preview__no-widget"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_template_preview = resolveComponent("template-preview");
+  const _directive_widget_designer = resolveDirective("widget-designer");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["epx-page-designer-widget-preview", "css_" + $props.designer.page.pageId])
+  }, [
+    createElementVNode("div", {
+      ref: "rootDropZone",
+      class: "epx-page-designer-widget-preview__drop-zone",
+      onDragenter: _cache[0] || (_cache[0] = (...args) => $options.onRootDragEnter && $options.onRootDragEnter(...args)),
+      onDragover: _cache[1] || (_cache[1] = withModifiers((...args) => $options.onRootDragOver && $options.onRootDragOver(...args), ["prevent"])),
+      onDragleave: _cache[2] || (_cache[2] = (...args) => $options.onRootDragLeave && $options.onRootDragLeave(...args)),
+      onDrop: _cache[3] || (_cache[3] = withModifiers((...args) => $options.onRootDrop && $options.onRootDrop(...args), ["prevent"]))
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($props.designer.widgetList, (widget) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: widget.id
+          }, [
+            widget.type === "template" ? (openBlock(), createBlock(_component_template_preview, {
+              key: 0,
+              widget,
+              designer: $props.designer,
+              "parent-widget": null,
+              pageRelationList: $props.pageRelationList
+            }, null, 8, ["widget", "designer", "pageRelationList"])) : withDirectives((openBlock(), createBlock(resolveDynamicComponent($options.getWidgetName(widget)), {
+              key: widget.id,
+              widget,
+              designer: $props.designer,
+              "parent-widget": null,
+              pageRelationList: $props.pageRelationList
+            }, null, 8, ["widget", "designer", "pageRelationList"])), [
+              [_directive_widget_designer, { widget, designer: $props.designer, parentWidget: null, templateInfo: null }]
+            ])
+          ], 64);
+        }), 128)),
+        $props.designer.widgetList.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, "拖拽组件到这里")) : createCommentVNode("", true)
+      ])
+    ], 544)
+  ], 2);
+}
+const WidgetPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  WidgetPreview as default
+};

package/dist/src/page-designer/widget-preview/PreviewItem.js

@@ -0,0 +1,83 @@
+import '../../../style.css';
+import widgetDesignerDirective from "./directive.js";
+import { resolvePreviewName } from "./resolvePreviewName.js";
+import TemplatePreview from "./Template.js";
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createBlock, resolveDynamicComponent, mergeProps } from "vue";
+/* empty css                */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-widget-preview-item",
+  directives: { "widget-designer": widgetDesignerDirective },
+  components: {
+    TemplatePreview
+  },
+  inheritAttrs: false,
+  inject: {
+    templateInfo: {
+      type: Object,
+      default: () => null
+    }
+  },
+  provide() {
+    return {
+      templateInfo: this.templateInfo
+    };
+  },
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    },
+    parentWidget: {
+      type: Object,
+      default: null
+    },
+    widget: {
+      type: Object,
+      required: true
+    },
+    pageRelationList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    widgetInfo() {
+      if (!this.widget || !this.designer) return {};
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {};
+    },
+    isContainer() {
+      return this.widgetInfo.CONTAINER === "1";
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    widgetName() {
+      return resolvePreviewName(this.designer, this.widget);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_template_preview = resolveComponent("template-preview");
+  const _directive_widget_designer = resolveDirective("widget-designer");
+  return $props.widget.type === "template" ? withDirectives((openBlock(), createBlock(_component_template_preview, {
+    key: "template" + $props.widget.id,
+    widget: $props.widget,
+    designer: $props.designer,
+    "parent-widget": $props.parentWidget,
+    pageRelationList: $props.pageRelationList
+  }, null, 8, ["widget", "designer", "parent-widget", "pageRelationList"])), [
+    [_directive_widget_designer, { widget: $props.widget, designer: $props.designer, parentWidget: $props.parentWidget, templateInfo: $options.templateInfo }]
+  ]) : withDirectives((openBlock(), createBlock(resolveDynamicComponent($options.widgetName), mergeProps({ key: 1 }, _ctx.$attrs, {
+    key: $props.widget.id,
+    widget: $props.widget,
+    designer: $props.designer,
+    "parent-widget": $props.parentWidget,
+    templateInfo: $options.templateInfo,
+    pageRelationList: $props.pageRelationList
+  }), null, 16, ["widget", "designer", "parent-widget", "templateInfo", "pageRelationList"])), [
+    [_directive_widget_designer, { widget: $props.widget, designer: $props.designer, parentWidget: $props.parentWidget }]
+  ]);
+}
+const WidgetPreviewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  WidgetPreviewItem as default
+};

package/dist/src/page-designer/widget-preview/SelectedOverlay.js

@@ -0,0 +1,332 @@
+import '../../../style.css';
+import { getWidgetChildren } from "../designer.js";
+import overlayPositionMixin from "./overlayPositionMixin.js";
+import { resolveComponent, openBlock, createElementBlock, withModifiers, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, createTextVNode } from "vue";
+/* empty css                    */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-selected-overlay",
+  // 定位改为事件驱动（见 overlayPositionMixin），不再每帧 rAF 轮询
+  mixins: [overlayPositionMixin],
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    },
+    widget: {
+      type: Object,
+      default: null
+    },
+    targetElement: {
+      type: HTMLElement,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    parentWidget: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      isCovered: false,
+      showTemplateModal: false,
+      template: {}
+    };
+  },
+  computed: {
+    widgetInfo() {
+      if (!this.widget) return {};
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {};
+    },
+    clientConfig() {
+      return this.$store.state.config.clientConfig || {};
+    },
+    canAddContainer() {
+      if (!this.widget) return false;
+      const widgetInfo = this.widgetInfo;
+      return widgetInfo.CONTAINER === "1" && this.designer.mode !== "template";
+    }
+  },
+  watch: {
+    widget() {
+      this.scheduleOverlayUpdate();
+    }
+  },
+  methods: {
+    copyWidget() {
+      if (!this.widget) return;
+      const parentWidget = this.designer.findParentWidget(this.widget.id);
+      this.designer.copyWidget(this.widget, parentWidget);
+    },
+    deleteComponent() {
+      if (!this.widget) return;
+      this.$confirm("确认删除该组件？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        const parentWidget = this.designer.findParentWidget(this.widget.id);
+        this.designer.deleteWidget(this.widget, parentWidget);
+      }).catch(() => {
+      });
+    },
+    addContainer() {
+      if (!this.widget || !this.canAddContainer) return;
+      const containerWidget = this.designer.allWidgets.find((w) => w.CODE === "layout" && w.CONTAINER === "1");
+      if (containerWidget) {
+        this.designer.addWidgetByInfo(containerWidget, this.widget);
+      }
+    },
+    openTemplateDialog() {
+      this.showTemplateModal = true;
+      this.template = {
+        NAME: "",
+        LEVEL: "03"
+      };
+    },
+    getTemplateContent() {
+      const eventNameMap = {};
+      const widgetIds = [this.widget.id];
+      const events = [];
+      const widgetConfigs = {};
+      const js = this.designer.pageConfig.JS;
+      let widgetJs = "";
+      const getAllWidgetIds = (widgets) => {
+        if (!widgets) return;
+        for (const item of widgets) {
+          widgetIds.push(item.id);
+          getAllWidgetIds(getWidgetChildren(item));
+        }
+      };
+      getAllWidgetIds(getWidgetChildren(this.widget));
+      for (const widgetId of widgetIds) {
+        if (this.designer.widgetConfig[widgetId]) {
+          const config = this.$_.cloneDeep(this.designer.widgetConfig[widgetId]);
+          widgetConfigs[widgetId] = config;
+          if (config.componentEvents) {
+            for (const key in config.componentEvents) {
+              const arr = config.componentEvents[key];
+              events.push(...arr);
+              config.componentEvents[key] = arr.map((item) => {
+                const newEventName = `${item}_${this.$util.genId()}`;
+                eventNameMap[item] = newEventName;
+                return newEventName;
+              });
+            }
+          }
+          if (config.fields) {
+            for (const field of config.fields) {
+              if (field.events) {
+                for (const key in field.events) {
+                  const arr = field.events[key];
+                  events.push(...arr);
+                  field.events[key] = arr.map((item) => {
+                    const newEventName = `${item}_${this.$util.genId()}`;
+                    eventNameMap[item] = newEventName;
+                    return newEventName;
+                  });
+                }
+              }
+            }
+          }
+        }
+      }
+      if (js) {
+        const result = js.split(/export\s+function\s+/);
+        result.forEach((item) => {
+          const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, "");
+          if (funtionStr.replace(/[\n\s]+/g, "").length > 0) {
+            const funtionName = funtionStr.split(/\s+\(/)[0];
+            if ([...new Set(events)].includes(funtionName)) {
+              widgetJs += "export function " + funtionStr.replace(/^\w+/, eventNameMap[funtionName]);
+            }
+          }
+        });
+      }
+      return {
+        version: this.designer.version,
+        items: [this.widget],
+        itemConfigs: widgetConfigs,
+        JS: widgetJs
+      };
+    },
+    saveAsTemplate() {
+      var _a, _b;
+      const content = this.getTemplateContent();
+      if (!this.template.ID) {
+        this.$message.error("请输入模板编号");
+        return;
+      }
+      if (!this.template.NAME) {
+        this.$message.error("请输入模板名称");
+        return;
+      }
+      const CLIENT = ((_a = this.$store.state.config.clientConfig) == null ? void 0 : _a.ID) || this.CLIENT;
+      const SYSTEM = ((_b = this.$store.state.config.systemConfig) == null ? void 0 : _b.ID) || this.SYSTEM;
+      const params = {
+        "bean.CLIENT": CLIENT,
+        "bean.SYSTEM": SYSTEM,
+        "bean.ID": this.template.ID,
+        "bean.NAME": this.template.NAME,
+        "bean.TYPE": "01",
+        "bean.LEVEL": this.template.LEVEL,
+        "bean.PICTURE": this.template.PICTURE,
+        "bean.CONTENT": JSON.stringify(content)
+      };
+      this.$http.save({
+        entityId: "FM_TEMPLATE",
+        ...params
+      }).then(() => {
+        this.$message.success("保存成功");
+        this.showTemplateModal = false;
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer-selected-overlay__header" };
+const _hoisted_2 = { class: "epx-page-designer-selected-overlay__label" };
+const _hoisted_3 = { class: "epx-page-designer-selected-overlay__header-right" };
+const _hoisted_4 = { class: "epx-page-designer-selected-overlay__operates" };
+const _hoisted_5 = { class: "epx-page-designer__template-form-item" };
+const _hoisted_6 = { class: "epx-page-designer__template-form-item" };
+const _hoisted_7 = { class: "epx-page-designer__template-form-item" };
+const _hoisted_8 = {
+  key: 0,
+  class: "epx-page-designer__template-form-item"
+};
+const _hoisted_9 = { class: "dialog-footer" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input = resolveComponent("el-input");
+  const _component_epx_photo = resolveComponent("epx-photo");
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_dialog = resolveComponent("el-dialog");
+  return $props.visible && $props.targetElement && $props.widget ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    ref: "overlay",
+    class: "epx-page-designer-selected-overlay",
+    style: normalizeStyle(_ctx.overlayStyle),
+    onClick: _cache[9] || (_cache[9] = withModifiers(() => {
+    }, ["stop"]))
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, toDisplayString($options.widgetInfo.TITLE || $options.widgetInfo.NAME), 1),
+      createElementVNode("div", _hoisted_3, [
+        createElementVNode("div", _hoisted_4, [
+          $props.designer.mode !== "template" && $props.widget.type !== "template" ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "epx-page-designer-selected-overlay__operate-item",
+            onClick: _cache[0] || (_cache[0] = (...args) => $options.openTemplateDialog && $options.openTemplateDialog(...args))
+          }, " 保存为模板 ")) : createCommentVNode("", true),
+          createElementVNode("span", {
+            class: "epx-page-designer-selected-overlay__operate-item",
+            onClick: _cache[1] || (_cache[1] = (...args) => $options.copyWidget && $options.copyWidget(...args))
+          }, " 复制 "),
+          createElementVNode("span", {
+            class: "epx-page-designer-selected-overlay__operate-close",
+            onClick: _cache[2] || (_cache[2] = (...args) => $options.deleteComponent && $options.deleteComponent(...args))
+          }, [..._cache[10] || (_cache[10] = [
+            createElementVNode("i", { class: "el-icon-close" }, null, -1)
+          ])])
+        ])
+      ])
+    ]),
+    createVNode(_component_el_dialog, {
+      title: "保存模板",
+      "model-value": !!$data.showTemplateModal,
+      width: "520px",
+      "append-to-body": "",
+      "destroy-on-close": "",
+      onClose: _cache[8] || (_cache[8] = ($event) => $data.showTemplateModal = false)
+    }, {
+      footer: withCtx(() => [
+        createElementVNode("div", _hoisted_9, [
+          createVNode(_component_el_button, {
+            onClick: _cache[7] || (_cache[7] = ($event) => $data.showTemplateModal = false)
+          }, {
+            default: withCtx(() => [..._cache[17] || (_cache[17] = [
+              createTextVNode("取 消", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(_component_el_button, {
+            type: "primary",
+            onClick: $options.saveAsTemplate
+          }, {
+            default: withCtx(() => [..._cache[18] || (_cache[18] = [
+              createTextVNode("确 定", -1)
+            ])]),
+            _: 1
+          }, 8, ["onClick"])
+        ])
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_5, [
+          _cache[11] || (_cache[11] = createElementVNode("label", { for: "" }, "模板编号:", -1)),
+          createVNode(_component_el_input, {
+            size: "default",
+            modelValue: $data.template.ID,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $data.template.ID = $event)
+          }, null, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_6, [
+          _cache[12] || (_cache[12] = createElementVNode("label", { for: "" }, "模板名称:", -1)),
+          createVNode(_component_el_input, {
+            size: "default",
+            modelValue: $data.template.NAME,
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $data.template.NAME = $event)
+          }, null, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          _cache[13] || (_cache[13] = createElementVNode("label", { for: "" }, "缩略图:", -1)),
+          createVNode(_component_epx_photo, {
+            modelValue: $data.template.PICTURE,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $data.template.PICTURE = $event),
+            fieldConfigs: { attriName: "PICTURE", attriLabel: "缩略图", state: "EDIT" }
+          }, null, 8, ["modelValue"])
+        ]),
+        $options.clientConfig.CODE === "frame" ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          _cache[16] || (_cache[16] = createElementVNode("label", { for: "" }, "应用级别:", -1)),
+          createVNode(_component_el_radio_group, {
+            modelValue: $data.template.LEVEL,
+            "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $data.template.LEVEL = $event)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio, {
+                label: "01",
+                value: "01"
+              }, {
+                default: withCtx(() => [..._cache[14] || (_cache[14] = [
+                  createTextVNode("平台级", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "03",
+                value: "03"
+              }, {
+                default: withCtx(() => [..._cache[15] || (_cache[15] = [
+                  createTextVNode("系统级", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }, 8, ["model-value"])
+  ], 4)) : createCommentVNode("", true);
+}
+const SelectedOverlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4bb8f90f"]]);
+export {
+  SelectedOverlay as default
+};