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

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

@@ -0,0 +1,80 @@
+import '../../../style.css';
+import widgetDesignerDirective from "./directive.js";
+import previewMixin from "./Mixin.js";
+import { resolvePreviewName } from "./resolvePreviewName.js";
+import { resolveDirective, openBlock, createElementBlock, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
+/* empty css              */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-widget-preview-container",
+  directives: { "widget-designer": widgetDesignerDirective },
+  mixins: [previewMixin],
+  computed: {
+    // 容器自身在样式里配置了高度时，去掉默认的 60px 占位高度，
+    // 让它按真实高度显示，保持设计态与运行时一致。
+    // 排除 line-height，仅匹配 height / min-height / max-height
+    hasCustomSize() {
+      const css = this.widget && this.widget.css || "";
+      return /(?:^|[\s;{])(?:min-|max-)?height\s*:/i.test(css);
+    },
+    // 配置高度小于 10px（横线、小圆点等装饰性容器）时不显示「拖拽组件到这里」占位文案，
+    // 否则文案会把这种极矮的容器撑大、和运行时对不上
+    heightTooSmall() {
+      const css = this.widget && this.widget.css || "";
+      const block = (css.match(/:current\s*\{([^}]*)\}/) || [])[1] || css;
+      const match = block.match(/(?:^|[\s;])height\s*:\s*([\d.]+)px/i);
+      return !!match && parseFloat(match[1]) < 10;
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    getWidgetName() {
+      return (widget) => resolvePreviewName(this.designer, widget);
+    }
+  },
+  watch: {
+    // is-sized 只能用命令式 classList 维护，不能写成模板里的 :class。
+    // 因为 el-col / css_<id> 等类名是 directive.js、Mixin.js 通过 classList.add 加上去的，
+    // 一旦根节点存在响应式 :class，hasCustomSize 变化时 Vue 会用 setAttribute('class') 整体重写，
+    // 把这些命令式加上的类名一起抹掉。
+    hasCustomSize() {
+      this.applySizedClass();
+    }
+  },
+  mounted() {
+    this.applySizedClass();
+  },
+  methods: {
+    applySizedClass() {
+      const el = this.$el;
+      if (el && el.classList) {
+        el.classList.toggle("is-sized", this.hasCustomSize);
+      }
+    }
+  }
+  // 其余拖拽方法已在 Mixin 中实现
+};
+const _hoisted_1 = { class: "epx-page-designer-widget-preview__drop-zone" };
+const _hoisted_2 = {
+  key: 0,
+  class: "epx-page-designer-widget-preview__no-widget"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_widget_designer = resolveDirective("widget-designer");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+      return withDirectives((openBlock(), createBlock(resolveDynamicComponent($options.getWidgetName(childWidget)), {
+        key: childWidget.id,
+        widget: childWidget,
+        designer: _ctx.designer,
+        "parent-widget": _ctx.widget,
+        pageRelationList: _ctx.pageRelationList
+      }, null, 8, ["widget", "designer", "parent-widget", "pageRelationList"])), [
+        [_directive_widget_designer, { widget: childWidget, designer: _ctx.designer, parentWidget: _ctx.widget }]
+      ]);
+    }), 128)),
+    _ctx.childWidgetList.length === 0 && !$options.heightTooSmall ? (openBlock(), createElementBlock("div", _hoisted_2, "拖拽组件到这里")) : createCommentVNode("", true)
+  ]);
+}
+const WidgetPreviewContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7593858b"]]);
+export {
+  WidgetPreviewContainer as default
+};

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

@@ -0,0 +1,54 @@
+import '../../../style.css';
+import { openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+/* empty css              */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-drag-ghost",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    widgetTitle: {
+      type: String,
+      default: ""
+    },
+    widgetIcon: {
+      type: String,
+      default: ""
+    },
+    position: {
+      type: Object,
+      default: () => ({ x: 0, y: 0 })
+    }
+  },
+  computed: {
+    ghostStyle() {
+      return {
+        left: this.position.x + "px",
+        top: this.position.y + "px",
+        transform: "translate(-50%, -50%)"
+      };
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer-drag-ghost__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.visible ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    ref: "dragGhost",
+    class: "epx-page-designer-drag-ghost",
+    style: normalizeStyle($options.ghostStyle)
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("i", {
+        class: normalizeClass($props.widgetIcon || "epx-icon-component")
+      }, null, 2),
+      createElementVNode("span", null, toDisplayString($props.widgetTitle), 1)
+    ])
+  ], 4)) : createCommentVNode("", true);
+}
+const DragGhost = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9ac313e7"]]);
+export {
+  DragGhost as default
+};

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

@@ -0,0 +1,42 @@
+import '../../../style.css';
+import overlayPositionMixin from "./overlayPositionMixin.js";
+import { openBlock, createElementBlock, normalizeStyle, createCommentVNode } from "vue";
+/* empty css                    */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-drop-zone-overlay",
+  // 定位改为事件驱动（见 overlayPositionMixin），不再每帧 rAF 轮询
+  mixins: [overlayPositionMixin],
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    },
+    targetElement: {
+      type: HTMLElement,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 放置区浮层压在选中 / 悬停浮层之下
+      overlayZIndex: 99
+    };
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.visible && $props.targetElement ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    ref: "overlay",
+    class: "epx-page-designer-drop-zone-overlay",
+    style: normalizeStyle(_ctx.overlayStyle)
+  }, null, 4)) : createCommentVNode("", true);
+}
+const DropZoneOverlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-bac98328"]]);
+export {
+  DropZoneOverlay as default
+};

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

@@ -0,0 +1,61 @@
+import '../../../style.css';
+import overlayPositionMixin from "./overlayPositionMixin.js";
+import { openBlock, createElementBlock, withModifiers, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+/* empty css                 */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-hover-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
+    }
+  },
+  data() {
+    return {
+      isCovered: false
+    };
+  },
+  computed: {
+    widgetInfo() {
+      if (!this.widget) return {};
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {};
+    }
+  },
+  watch: {
+    widget() {
+      this.scheduleOverlayUpdate();
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer-hover-overlay__label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.visible && $props.targetElement && $props.widget ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    ref: "overlay",
+    class: "epx-page-designer-hover-overlay",
+    style: normalizeStyle(_ctx.overlayStyle),
+    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+    }, ["stop"]))
+  }, [
+    createElementVNode("div", _hoisted_1, toDisplayString($options.widgetInfo.TITLE || $options.widgetInfo.NAME), 1)
+  ], 4)) : createCommentVNode("", true);
+}
+const HoverOverlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ce8a39da"]]);
+export {
+  HoverOverlay as default
+};

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

@@ -0,0 +1,260 @@
+import '../../../style.css';
+import WidgetPreviewItem from "./PreviewItem.js";
+import util from "@epxing/core/src/runtime-utils/util";
+import { createDropCache, insertIndex, clearDropCache, insertLineRect } from "./dropPosition.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 previewMixin = {
+  props: {
+    designer: {
+      type: Object
+    },
+    widget: {
+      type: Object
+    },
+    pageRelationList: {
+      type: Array
+    },
+    templateInfo: {
+      type: Object
+    }
+  },
+  data() {
+    return {};
+  },
+  components: {
+    "widget-preview": WidgetPreviewItem
+  },
+  computed: {
+    $isMobile() {
+      return this.designer.terminal === "mobile" ? true : this.$store.state.config.isMobile;
+    },
+    selectedWidget() {
+      return this.designer.selectedWidget;
+    },
+    widgetInfo() {
+      return this.designer.getWidgetByType(this.widget.contentType) || {};
+    },
+    childWidgetList: {
+      get() {
+        return this.widget.items || [];
+      },
+      set(v) {
+        this.designer.updateWidget(this.widget.id, { items: v });
+      }
+    },
+    style() {
+      const { style = {} } = this.widget;
+      const _style = { ...style };
+      if (this.$configs.height && !style.height) {
+        const height = this.$configs.height.includes("%") ? this.$configs.height : this.$configs.height + "px";
+        _style.height = height;
+      }
+      if (_style.backgroundImage) {
+        _style.backgroundImage = _style.backgroundImage.replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+          return `url(${util.getFileUrl($1)})`;
+        });
+      }
+      return _style;
+    },
+    widgetStyle() {
+      const { style = {} } = this.widget;
+      return style;
+    },
+    $configs() {
+      const { id, configs = {} } = this.widget;
+      if (this.templateInfo) {
+        const templateConfig = this.designer.widgetConfig[this.templateInfo.id] || {};
+        const { itemConfigs } = this.templateInfo.content;
+        const _configs = { ...configs, ...itemConfigs[id] || {} };
+        for (const key in _configs) {
+          const item = _configs[key];
+          if (typeof item === "string") {
+            _configs[key] = item.replace(/@\[([\w-.|$#]+)\]/g, (macth, key2) => templateConfig[key2] || "").replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key2) => `⌊${key2}⌉`).replace(/\$\[([\w-.|$#]+)\]/g, (macth, key2) => `⌊${key2}⌉`);
+          }
+        }
+        return _configs;
+      } else {
+        const widgetConfig = this.designer.widgetConfig[id] || {};
+        const allConfigs = { ...widgetConfig, ...configs };
+        const _configs = {};
+        for (const key in allConfigs) {
+          const item = allConfigs[key];
+          if (typeof item === "string") {
+            _configs[key] = item.replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key2) => `⌊${key2}⌉`).replace(/\$\[([\w-.|$#]+)\]/g, (macth, key2) => `⌊${key2}⌉`);
+          } else {
+            _configs[key] = item;
+          }
+        }
+        return _configs;
+      }
+    },
+    $metaId() {
+      const { metaId } = this.$configs;
+      return metaId || this.designer.page.metaId;
+    }
+  },
+  watch: {
+    "widget.css"(v) {
+      appendCss(this.widget.id, this.widget.css);
+    }
+  },
+  mounted() {
+    if (this.widget.css) {
+      appendCss(this.widget.id, this.widget.css);
+    }
+    if (this.$el) {
+      if (this.$el.classList) {
+        this.$el.classList.add("css_" + this.widget.id);
+      } else {
+        this.$el.className += " css_" + this.widget.id;
+      }
+    }
+    const isContainer = this.widgetInfo.CONTAINER === "1" || this.widget.items !== void 0;
+    if (isContainer && this.$el) {
+      this._dragEnterHandler = this.onContainerDragEnter.bind(this);
+      this._dragOverHandler = (e) => {
+        e.preventDefault();
+        this.onContainerDragOver(e);
+      };
+      this._dragLeaveHandler = this.onContainerDragLeave.bind(this);
+      this._dropHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onContainerDrop(e);
+      };
+      this.$el.addEventListener("dragenter", this._dragEnterHandler, false);
+      this.$el.addEventListener("dragover", this._dragOverHandler, false);
+      this.$el.addEventListener("dragleave", this._dragLeaveHandler, false);
+      this.$el.addEventListener("drop", this._dropHandler, false);
+    }
+  },
+  unmounted() {
+    removeCss(this.widget.id);
+    if (this._dragLeaveTimer) {
+      clearTimeout(this._dragLeaveTimer);
+      this._dragLeaveTimer = null;
+    }
+    if (this._dragFrame) {
+      cancelAnimationFrame(this._dragFrame);
+      this._dragFrame = null;
+    }
+    if (this._dragEnterHandler && this.$el) {
+      this.$el.removeEventListener("dragenter", this._dragEnterHandler);
+      this.$el.removeEventListener("dragover", this._dragOverHandler);
+      this.$el.removeEventListener("dragleave", this._dragLeaveHandler);
+      this.$el.removeEventListener("drop", this._dropHandler);
+    }
+  },
+  methods: {
+    // ========== 容器拖拽通用方法 ==========
+    // 判断是否是从组件库或模板库拖拽
+    isDraggingFromLibrary(e) {
+      const hasData = e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes("text/plain");
+      if (!hasData) return false;
+      return true;
+    },
+    // 是否在拖画布上已有的组件（否则是组件库 / 模板库）：读拖拽状态，不再每次 querySelector
+    isDraggingWidget() {
+      return this.designer.dragState.dragSource === "preview";
+    },
+    // 是否容器组件：有 CONTAINER 标记或有 items
+    isContainerWidget() {
+      return this.widgetInfo.CONTAINER === "1" || this.widget.items !== void 0;
+    },
+    // 容器拖拽进入：重新测量一次 children，之后的 dragover 复用缓存
+    onContainerDragEnter(e) {
+      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (this._dragLeaveTimer) {
+        clearTimeout(this._dragLeaveTimer);
+        this._dragLeaveTimer = null;
+      }
+      if (!this._dropCache) this._dropCache = createDropCache();
+      clearDropCache(this._dropCache);
+      this.designer.setDragOverTarget({ type: "container", widgetId: this.widget.id });
+      this.designer.setDragOverTargetElement(this.$el);
+      this.designer.setPreviewDragTarget({ widgetId: this.widget.id, position: "inside" });
+    },
+    // 容器拖拽悬停：只记坐标 + 允许放置；插入位置的计算与状态更新合并到下一帧
+    onContainerDragOver(e) {
+      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = this.isDraggingWidget() ? "move" : "copy";
+      this._dragClientX = e.clientX;
+      this._dragClientY = e.clientY;
+      this.scheduleDragFrame();
+    },
+    scheduleDragFrame() {
+      if (this._dragFrame) return;
+      this._dragFrame = requestAnimationFrame(() => {
+        this._dragFrame = null;
+        if (this._dragClientY === void 0 || !this.designer.dragState.isDragging) return;
+        this.designer.updateDragGhostPosition(this._dragClientX, this._dragClientY);
+        const listEl = this.getDropListElement ? this.getDropListElement() : this.$el;
+        if (!this._dropCache) this._dropCache = createDropCache();
+        const lineRect = insertLineRect(this._dropCache, listEl, this._dragClientY);
+        if (lineRect) this.designer.setDragInsertLine(lineRect);
+        this.designer.setPreviewDragTarget({ widgetId: this.widget.id, index: insertIndex(this._dropCache, listEl, this._dragClientY), position: "inside" });
+      });
+    },
+    // 容器拖拽离开：relatedTarget 为空（离开窗口）或不在当前元素内才算真正离开
+    onContainerDragLeave(e) {
+      if (!this.isContainerWidget()) return;
+      const relatedTarget = e.relatedTarget;
+      if (!relatedTarget || !this.$el.contains(relatedTarget)) {
+        if (this._dragLeaveTimer) clearTimeout(this._dragLeaveTimer);
+        this._dragLeaveTimer = setTimeout(() => {
+          var _a;
+          if (((_a = this.designer.dragOverTarget) == null ? void 0 : _a.widgetId) === this.widget.id) {
+            this.designer.clearDragOverTarget();
+            this.designer.clearDragInsertLine();
+            this.designer.clearPreviewDragTarget();
+          }
+          if (this._dropCache) clearDropCache(this._dropCache);
+          this._dragLeaveTimer = null;
+        }, 30);
+      }
+    },
+    // 容器放置
+    onContainerDrop(e) {
+      if (!this.isContainerWidget()) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (this._dragLeaveTimer) {
+        clearTimeout(this._dragLeaveTimer);
+        this._dragLeaveTimer = null;
+      }
+      this.designer.clearDragOverTarget();
+      this.designer.clearDragInsertLine();
+      this.designer.clearPreviewDragTarget();
+      const listEl = this.getDropListElement ? this.getDropListElement() : this.$el;
+      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: "container", widgetId: this.widget.id, index } });
+    }
+  }
+};
+export {
+  previewMixin as default
+};

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

@@ -0,0 +1,28 @@
+import '../../../style.css';
+import previewMixin from "./Mixin.js";
+import { openBlock, createElementBlock, toDisplayString } from "vue";
+/* empty css                */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-widget-preview-placeholder",
+  mixins: [previewMixin]
+};
+const _hoisted_1 = { class: "epx-page-designer-widget-preview-placeholder" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = {
+  key: 1,
+  class: "epx-page-designer-widget-preview-placeholder__text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.widgetInfo.PICTURE ? (openBlock(), createElementBlock("img", {
+      key: 0,
+      class: "epx-page-designer-widget-preview-placeholder__img",
+      src: _ctx.$util.getFileUrl(_ctx.widgetInfo.PICTURE)
+    }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.widgetInfo.TITLE), 1))
+  ]);
+}
+const WidgetPreviewPlaceholder = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  WidgetPreviewPlaceholder as default
+};