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

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

@@ -1,322 +1,322 @@
-<template>
-  <div :class="['epx-page-designer-widget-preview', 'css_' + designer.page.pageId]">
-    <div
-      ref="rootDropZone"
-      class="epx-page-designer-widget-preview__drop-zone"
-      @dragenter="onRootDragEnter"
-      @dragover.prevent="onRootDragOver"
-      @dragleave="onRootDragLeave"
-      @drop.prevent="onRootDrop"
-    >
-      <div class="epx-page-designer-widget-preview__draggable epx-page-designer-widget-preview__draggable-list el-row">
-        <template v-for="widget in designer.widgetList" :key="widget.id">
-          <!-- 模板 -->
-          <template-preview
-            v-if="widget.type === 'template'"
-
-            :widget="widget"
-            :designer="designer"
-            :parent-widget="null"
-            :pageRelationList="pageRelationList"
-          ></template-preview>
-          <!-- 普通组件 -->
-          <component
-            v-else
-            :key="widget.id"
-            :is="getWidgetName(widget)"
-            :widget="widget"
-            :designer="designer"
-            :parent-widget="null"
-            :pageRelationList="pageRelationList"
-            v-widget-designer="{ widget, designer, parentWidget: null, templateInfo: null }"
-          ></component>
-        </template>
-        <div class="epx-page-designer-widget-preview__no-widget" v-if="designer.widgetList.length===0">拖拽组件到这里</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import util from '@epxing/core/src/runtime-utils/util'
-import TemplatePreview from './Template'
-import widgetDesignerDirective from './directive'
-import { resolvePreviewName } from './resolvePreviewName'
-import { createDropCache, clearDropCache, insertIndex, insertLineRect } from './dropPosition'
-
-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-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()
-      // 拖画布已有组件用 move，组件库 / 模板库用 copy（不能在 dragover 里 getData，读拖拽状态即可）
-      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(() => {
-        // 检查 relatedTarget 是否仍在根元素内
-        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)
-
-      // 使用 designer 的统一拖拽处理方法；不在这里调用 drag-end，让 dragend 事件自然触发
-      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: 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
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@include b(page-designer-widget-preview) {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  @include e(draggable) {
-    width: 100%;
-    // height: 100%;
-    min-height: 60px;
-    position: relative;
-  }
-  @include e(draggable-list) {
-    overflow: auto;
-  }
-  @include e(list) {
-    min-height: 100%;
-  }
-  @include e(no-widget) {
-    height: 100%;
-    padding: 16px 0;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    color: #999999;
-    background-color: #f0f0f0;
-    border: 1px dotted #a7b1bd;
-    pointer-events: none;
-  }
-}
-
-// 悬停样式已由悬浮窗组件处理，这里不再需要
-
-</style>
+<template>
+  <div :class="['epx-page-designer-widget-preview', 'css_' + designer.page.pageId]">
+    <div
+      ref="rootDropZone"
+      class="epx-page-designer-widget-preview__drop-zone"
+      @dragenter="onRootDragEnter"
+      @dragover.prevent="onRootDragOver"
+      @dragleave="onRootDragLeave"
+      @drop.prevent="onRootDrop"
+    >
+      <div class="epx-page-designer-widget-preview__draggable epx-page-designer-widget-preview__draggable-list el-row">
+        <template v-for="widget in designer.widgetList" :key="widget.id">
+          <!-- 模板 -->
+          <template-preview
+            v-if="widget.type === 'template'"
+
+            :widget="widget"
+            :designer="designer"
+            :parent-widget="null"
+            :pageRelationList="pageRelationList"
+          ></template-preview>
+          <!-- 普通组件 -->
+          <component
+            v-else
+            :key="widget.id"
+            :is="getWidgetName(widget)"
+            :widget="widget"
+            :designer="designer"
+            :parent-widget="null"
+            :pageRelationList="pageRelationList"
+            v-widget-designer="{ widget, designer, parentWidget: null, templateInfo: null }"
+          ></component>
+        </template>
+        <div class="epx-page-designer-widget-preview__no-widget" v-if="designer.widgetList.length===0">拖拽组件到这里</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import util from '@epxing/core/src/runtime-utils/util'
+import TemplatePreview from './Template'
+import widgetDesignerDirective from './directive'
+import { resolvePreviewName } from './resolvePreviewName'
+import { createDropCache, clearDropCache, insertIndex, insertLineRect } from './dropPosition'
+
+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-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()
+      // 拖画布已有组件用 move，组件库 / 模板库用 copy（不能在 dragover 里 getData，读拖拽状态即可）
+      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(() => {
+        // 检查 relatedTarget 是否仍在根元素内
+        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)
+
+      // 使用 designer 的统一拖拽处理方法；不在这里调用 drag-end，让 dragend 事件自然触发
+      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: 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
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-widget-preview) {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  @include e(draggable) {
+    width: 100%;
+    // height: 100%;
+    min-height: 60px;
+    position: relative;
+  }
+  @include e(draggable-list) {
+    overflow: auto;
+  }
+  @include e(list) {
+    min-height: 100%;
+  }
+  @include e(no-widget) {
+    height: 100%;
+    padding: 16px 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #999999;
+    background-color: #f0f0f0;
+    border: 1px dotted #a7b1bd;
+    pointer-events: none;
+  }
+}
+
+// 悬停样式已由悬浮窗组件处理，这里不再需要
+
+</style>