@epxing/designer 5.3.0-beta.2 → 5.3.0-beta.4

package/src/page-designer/widget-preview/WidgetWrapper.vue

@@ -1,197 +1,197 @@
-<template>
-  <div
-    :ref="widgetRef"
-    :class="[
-      'epx-page-designer-widget-wrapper',
-      {'el-col': !parentWidget},
-      {[`el-col-${widget.span || 24}`]: !parentWidget},
-      {'is-hover': isHover && !templateInfo}
-    ]"
-    :data-widget-id="widget.id"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @click="handleClick"
-  >
-    <!-- 模板 -->
-    <template v-if="widget.type === 'template'">
-      <template-preview
-        :widget="widget"
-        :designer="designer"
-        :key="widget.id"
-        :parent-widget="parentWidget"
-        :pageRelationList="pageRelationList"
-      ></template-preview>
-    </template>
-    <!-- 普通组件 -->
-    <component
-      v-else
-      :is="widgetName"
-      :widget="widget"
-      :designer="designer"
-      :key="widget.id"
-      :parent-widget="parentWidget"
-      :templateInfo="templateInfo"
-      :pageRelationList="pageRelationList"
-    ></component>
-  </div>
-</template>
-
-<script>
-import TemplatePreview from './Template'
-import PreviewMixin from './Mixin'
-import util from '@epxing/core/src/runtime-utils/util'
-import { resolvePreviewName } from './resolvePreviewName'
-
-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)
-}
-
-export default {
-  name: 'epx-page-designer-widget-wrapper',
-  mixins: [PreviewMixin],
-  components: {
-    TemplatePreview
-  },
-  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: () => []
-    }
-  },
-  data () {
-    return {
-      isHover: false,
-      widgetRef: `widget_${this.widget.id}`
-    }
-  },
-  computed: {
-    widgetInfo () {
-      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {}
-    },
-    isContainer () {
-      return this.widgetInfo.CONTAINER === '1'
-    },
-    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
-    widgetName () {
-      return resolvePreviewName(this.designer, this.widget)
-    }
-  },
-  methods: {
-    handleMouseEnter (event) {
-      if (!this.templateInfo) {
-        this.isHover = true
-        event.stopPropagation()
-        // 触发 hover 事件，用于高亮显示
-        this.$emit('widget-hover', this.widget.id)
-      }
-    },
-    handleMouseLeave (event) {
-      if (!this.templateInfo) {
-        this.isHover = false
-        event.stopPropagation()
-        this.$emit('widget-hover', null)
-      }
-    },
-    handleClick (event) {
-      if (!this.templateInfo && this.widgetInfo.ID) {
-        this.designer.setSelected(this.widget)
-        // 触发点击事件，传递元素引用
-        this.$emit('widget-click', {
-          widget: this.widget,
-          element: this.$el,
-          parentWidget: this.parentWidget
-        })
-        event.stopPropagation()
-      }
-    },
-    // 获取组件 DOM 元素
-    getElement () {
-      return this.$el
-    }
-  },
-  mounted () {
-    // 应用组件的 CSS 样式
-    if (this.widget.css) {
-      appendCss(this.widget.id, this.widget.css)
-    }
-    // 添加 css_ 类名，用于样式作用域
-    if (this.$el) {
-      if (this.$el.classList) {
-        this.$el.classList.add('css_' + this.widget.id)
-      } else {
-        this.$el.className += ' css_' + this.widget.id
-      }
-    }
-  },
-  watch: {
-    'widget.css' (v) {
-      if (v) {
-        appendCss(this.widget.id, v)
-      }
-    }
-  },
-  beforeUnmount () {
-    // 清理 CSS 样式
-    removeCss(this.widget.id)
-  }
-}
-</script>
-
-<style lang="scss">
-.epx-page-designer-widget-wrapper {
-  position: relative;
-
-  // 悬停时显示虚线边框（仅视觉提示，不影响布局）
-  &.is-hover::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 1px dashed var(--color-primary, #409EFF);
-    pointer-events: none;
-    z-index: 99;
-  }
-}
-</style>
+<template>
+  <div
+    :ref="widgetRef"
+    :class="[
+      'epx-page-designer-widget-wrapper',
+      {'el-col': !parentWidget},
+      {[`el-col-${widget.span || 24}`]: !parentWidget},
+      {'is-hover': isHover && !templateInfo}
+    ]"
+    :data-widget-id="widget.id"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
+    <!-- 模板 -->
+    <template v-if="widget.type === 'template'">
+      <template-preview
+        :widget="widget"
+        :designer="designer"
+        :key="widget.id"
+        :parent-widget="parentWidget"
+        :pageRelationList="pageRelationList"
+      ></template-preview>
+    </template>
+    <!-- 普通组件 -->
+    <component
+      v-else
+      :is="widgetName"
+      :widget="widget"
+      :designer="designer"
+      :key="widget.id"
+      :parent-widget="parentWidget"
+      :templateInfo="templateInfo"
+      :pageRelationList="pageRelationList"
+    ></component>
+  </div>
+</template>
+
+<script>
+import TemplatePreview from './Template'
+import PreviewMixin from './Mixin'
+import util from '@epxing/core/src/runtime-utils/util'
+import { resolvePreviewName } from './resolvePreviewName'
+
+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)
+}
+
+export default {
+  name: 'epx-page-designer-widget-wrapper',
+  mixins: [PreviewMixin],
+  components: {
+    TemplatePreview
+  },
+  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: () => []
+    }
+  },
+  data () {
+    return {
+      isHover: false,
+      widgetRef: `widget_${this.widget.id}`
+    }
+  },
+  computed: {
+    widgetInfo () {
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {}
+    },
+    isContainer () {
+      return this.widgetInfo.CONTAINER === '1'
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    widgetName () {
+      return resolvePreviewName(this.designer, this.widget)
+    }
+  },
+  methods: {
+    handleMouseEnter (event) {
+      if (!this.templateInfo) {
+        this.isHover = true
+        event.stopPropagation()
+        // 触发 hover 事件，用于高亮显示
+        this.$emit('widget-hover', this.widget.id)
+      }
+    },
+    handleMouseLeave (event) {
+      if (!this.templateInfo) {
+        this.isHover = false
+        event.stopPropagation()
+        this.$emit('widget-hover', null)
+      }
+    },
+    handleClick (event) {
+      if (!this.templateInfo && this.widgetInfo.ID) {
+        this.designer.setSelected(this.widget)
+        // 触发点击事件，传递元素引用
+        this.$emit('widget-click', {
+          widget: this.widget,
+          element: this.$el,
+          parentWidget: this.parentWidget
+        })
+        event.stopPropagation()
+      }
+    },
+    // 获取组件 DOM 元素
+    getElement () {
+      return this.$el
+    }
+  },
+  mounted () {
+    // 应用组件的 CSS 样式
+    if (this.widget.css) {
+      appendCss(this.widget.id, this.widget.css)
+    }
+    // 添加 css_ 类名，用于样式作用域
+    if (this.$el) {
+      if (this.$el.classList) {
+        this.$el.classList.add('css_' + this.widget.id)
+      } else {
+        this.$el.className += ' css_' + this.widget.id
+      }
+    }
+  },
+  watch: {
+    'widget.css' (v) {
+      if (v) {
+        appendCss(this.widget.id, v)
+      }
+    }
+  },
+  beforeUnmount () {
+    // 清理 CSS 样式
+    removeCss(this.widget.id)
+  }
+}
+</script>
+
+<style lang="scss">
+.epx-page-designer-widget-wrapper {
+  position: relative;
+
+  // 悬停时显示虚线边框（仅视觉提示，不影响布局）
+  &.is-hover::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px dashed var(--color-primary, #409EFF);
+    pointer-events: none;
+    z-index: 99;
+  }
+}
+</style>