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

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

@@ -0,0 +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>

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

@@ -0,0 +1,162 @@
+<template>
+  <!-- 自定义组件 -->
+  <template-preview
+    v-if="widget.type === 'template'"
+    :key="'template' + widget.id"
+    :widget="widget"
+    :designer="designer"
+    :parent-widget="parentWidget"
+    :pageRelationList="pageRelationList"
+    v-widget-designer="{ widget, designer, parentWidget, templateInfo }"
+  ></template-preview>
+  <!-- 普通组件 -->
+  <component v-bind="$attrs" v-else
+    :is="widgetName"
+    :key="widget.id"
+    :widget="widget"
+    :designer="designer"
+    :parent-widget="parentWidget"
+    :templateInfo="templateInfo"
+    :pageRelationList="pageRelationList"
+
+    v-widget-designer="{ widget, designer, parentWidget }"
+    ></component>
+</template>
+
+<script>
+import widgetDesignerDirective from './directive'
+import { resolvePreviewName } from './resolvePreviewName'
+import TemplatePreview from './Template'
+export default {
+  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)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-widget-preview-item) {
+  border: 1px solid transparent;
+  padding: 10px;
+  box-shadow: border-box;
+  position: relative;
+  cursor: pointer;
+  @include when(hover) {
+    border-style: dashed;
+    @include border_color_primary;
+  }
+  @include when(active) {
+    border-style: solid;
+    @include border_color_primary;
+    >.epx-page-designer-widget-preview-item__operates, >.epx-page-designer-widget-preview-item__drag  {
+      display: block;
+    }
+  }
+  @include e(drag) {
+    @include bg_color_primary;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    z-index: 101;
+    display: none;
+    font-size: var(--epx-font-size-l);
+    line-height: 16px;
+    color: #fff;
+    padding: 2px 4px;
+    cursor: move;
+    opacity: .5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  @include e(operates) {
+    position: absolute;
+    top: -16px;
+    right: 0;
+    display: none;
+    font-size: var(--epx-font-size-l);
+    line-height: 16px;
+    @include m(covered) {
+      top: 0px;
+    }
+  }
+  @include e(operate-item) {
+    @include bg_color_primary;
+    color: #fff;
+    margin: 0 4px;
+  }
+  @include e(operate-del) {
+    @include bg_color_primary;
+    color: #fff;
+    margin-left: 4px;
+  }
+}
+.layout-placeholder {
+  min-height: 60px;
+  height: 100%;
+  width: 100%;
+  background-color: #f0f0f0;
+  border: 1px dotted  #a7b1bd;
+  position: relative;
+  &::before {
+    width: 100%;
+    text-align: center;
+    content: '拖拽组件到这里';
+    color: #666;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.has-component {
+   &::before {
+     display: none;
+   }
+}
+</style>