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

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

@@ -0,0 +1,340 @@
+<template>
+  <div
+    v-if="visible && targetElement && widget"
+    ref="overlay"
+    class="epx-page-designer-selected-overlay"
+    :style="overlayStyle"
+    @click.stop
+  >
+    <div class="epx-page-designer-selected-overlay__header">
+      <div class="epx-page-designer-selected-overlay__label">
+        {{ widgetInfo.TITLE || widgetInfo.NAME }}
+      </div>
+      <div class="epx-page-designer-selected-overlay__header-right">
+        <div class="epx-page-designer-selected-overlay__operates">
+        <span
+          v-if="designer.mode !== 'template' && widget.type !== 'template'"
+          class="epx-page-designer-selected-overlay__operate-item"
+          @click="openTemplateDialog"
+        >
+          保存为模板
+        </span>
+        <span
+          class="epx-page-designer-selected-overlay__operate-item"
+          @click="copyWidget"
+        >
+          复制
+        </span>
+        <span
+          class="epx-page-designer-selected-overlay__operate-close"
+          @click="deleteComponent"
+        >
+          <i class="el-icon-close"></i>
+        </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 保存模板对话框 -->
+    <el-dialog
+      title="保存模板"
+      :model-value="!!showTemplateModal"
+      width="520px"
+      append-to-body
+      destroy-on-close
+      @close="showTemplateModal = false"
+    >
+      <div class="epx-page-designer__template-form-item">
+        <label for="">模板编号:</label>
+        <el-input size="default" v-model="template.ID"></el-input>
+      </div>
+      <div class="epx-page-designer__template-form-item">
+        <label for="">模板名称:</label>
+        <el-input size="default" v-model="template.NAME"></el-input>
+      </div>
+      <div class="epx-page-designer__template-form-item">
+        <label for="">缩略图:</label>
+        <epx-photo v-model="template.PICTURE" :fieldConfigs="{attriName: 'PICTURE', attriLabel: '缩略图', state: 'EDIT'}"></epx-photo>
+      </div>
+      <div class="epx-page-designer__template-form-item" v-if="clientConfig.CODE==='frame'">
+        <label for="">应用级别:</label>
+        <el-radio-group v-model="template.LEVEL">
+          <el-radio label="01" value="01">平台级</el-radio>
+          <el-radio label="03" value="03">系统级</el-radio>
+        </el-radio-group>
+      </div>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="showTemplateModal = false">取 消</el-button>
+        <el-button type="primary" @click="saveAsTemplate">确 定</el-button>
+      </div></template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getWidgetChildren } from '../designer'
+import overlayPositionMixin from './overlayPositionMixin'
+
+export default {
+  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 () {
+      const content = this.getTemplateContent()
+      if (!this.template.ID) {
+        this.$message.error('请输入模板编号')
+        return
+      }
+      if (!this.template.NAME) {
+        this.$message.error('请输入模板名称')
+        return
+      }
+      const CLIENT = this.$store.state.config.clientConfig?.ID || this.CLIENT
+      const SYSTEM = this.$store.state.config.systemConfig?.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)
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include b(page-designer-selected-overlay) {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid;
+  @include border_color_primary;
+  box-sizing: border-box;
+
+  @include e(header) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    pointer-events: all;
+    z-index: 10001;
+  }
+
+  @include e(label) {
+    padding: 2px 8px;
+    font-size: var(--epx-font-size-s);
+    line-height: 20px;
+    color: #fff;
+    pointer-events: none;
+    @include bg_color_primary(.8);
+    border-bottom-right-radius: 4px;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
+  }
+
+  @include e(header-right) {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+  }
+
+  @include e(operates) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  @include e(operate-item) {
+    @include bg_color_primary(.8);
+    color: #fff;
+    padding: 2px;
+    cursor: pointer;
+    font-size: var(--epx-font-size-s);
+    line-height: 20px;
+    transition: all 0.2s;
+    white-space: nowrap;
+  }
+
+  @include e(operate-close) {
+    @include bg_color_primary(.8);
+    color: #fff;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    font-size: var(--epx-font-size-base);
+  }
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+<div class="template-container">
+  <component
+    v-for="widget in widgetTree"
+    :key="widget.id"
+    :is="widgetName(widget)"
+    :widget="widget"
+    :designer="designer"
+    :parent-widget="parentWidget"
+    :pageRelationList="pageRelationList"
+    v-widget-designer="{ widget, designer, parentWidget, templateInfo }"
+  ></component>
+</div>
+</template>
+
+<script>
+import widgetDesignerDirective from './directive'
+import { resolvePreviewName } from './resolvePreviewName'
+
+// T33：原为 module-level 的 `Vue.directive('widget-designer', …)` —— Vue3 没有全局 Vue 对象
+// （`import Vue from 'vue'` 拿到 undefined，vue 包无 default 导出），这是全仓最后一处。
+// 没改成 app.directive()：那样依赖「import 本模块时 app 已建好」的时序假设。
+// 改为**局部注册**（下面各组件的 directives 选项）—— 无时序依赖，且只有这 4 个 designer
+// 组件用得到 v-widget-designer，本就不该占全局名字。
+
+export default {
+  name: 'epx-page-designer-widget-preview-template',
+  directives: { 'widget-designer': widgetDesignerDirective },
+  props: {
+    designer: Object,
+    widget: Object,
+    parentWidget: Object,
+    pageRelationList: Array
+  },
+  provide () {
+    const templateInfo = this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {}
+    const { CONTENT = '{}' } = templateInfo
+    return {
+      inTemplate: true,
+      templateInfo: {
+        ...this.widget,
+        ...templateInfo,
+        content: JSON.parse(CONTENT)
+      }
+    }
+  },
+  computed: {
+    templateInfo () {
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {}
+    },
+    content () {
+      const { CONTENT = '{}' } = this.templateInfo
+      return JSON.parse(CONTENT)
+    },
+    widgetTree () {
+      const { items } = this.content
+      return items || []
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    widgetName () {
+      return widget => resolvePreviewName(this.designer, widget)
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.template-container {
+
+  :deep(.epx-page-designer-widget-preview__no-widget) {
+      display: none;
+    }
+
+}
+
+</style>

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

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