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

package/src/page-designer/PageDesigner.vue

@@ -0,0 +1,1017 @@
+<template>
+<div :class="['epx-page-designer', { 'epx-page-designer--new-window': newWindow || inline }]">
+  <!-- 头部 -->
+  <div class="epx-page-designer__header">
+    <div class="epx-page-designer__header-left">
+      <i class="el-icon-arrow-left" @click="back"></i>
+      <p class="epx-page-designer__header-content">
+        <span class="epx-page-designer__header-subtitle">{{designer.mode==='component' ? '正在编辑自定义组件': designer.mode==='template' ? '正在编辑模板' : $t('Editing the page')}}：</span>
+        <span class="epx-page-designer__header-title">{{currentPage.title || templateInfo.NAME || componentInfo.TITLE}}</span>
+      </p>
+    </div>
+    <div class="epx-page-designer__header-center">
+      <i class="el-icon-monitor" :class="{'is-active': terminal==='pc'}" @click="terminal='pc'"></i>
+      <i class="el-icon-mobile" :class="{'is-active': terminal==='mobile'}" @click="terminal='mobile'"></i>
+    </div>
+    <div class="epx-page-designer__header-operate">
+      <p v-if="designer.mode==='page'" class="epx-page-designer__header-operate-item" @click="pageSetting">{{$t('page setup')}}</p>
+      <el-button type="primary" size="default" @click="saveConfigs">{{$t('save')}}</el-button>
+    </div>
+  </div>
+  <el-container class="epx-page-designer__container">
+    <div class="epx-page-designer__function-panel">
+      <!-- 导航tabs -->
+      <ul class="epx-page-designer__function-tabs">
+        <li :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='baseComponentLibrary'}" @click="showPanel='baseComponentLibrary'">
+          <i class="epx-icon-yingyong"></i>
+          <span>组件库</span>
+        </li>
+         <li :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='componentLibrary'}" @click="showPanel='componentLibrary'">
+          <i class="el-icon-files"></i>
+          <span>其它组件</span>
+        </li>
+        <li v-if="designer.mode!=='template'" :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='templateLibrary'}" @click="showPanel='templateLibrary'">
+          <i class="epx-icon-moban"></i>
+          <span>模板库</span>
+        </li>
+         <li :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='selectComponent'}" @click="showPanel='selectComponent'">
+          <i class="epx-icon-dagang"></i>
+          <span>大纲</span>
+        </li>
+        <li :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='jsPanel'}" @click="showPanel='jsPanel'">
+          <i class="epx-icon-js"></i>
+          <span>页面JS</span>
+        </li>
+        <li v-if="designer.mode==='page'" :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='pageVariable'}" @click="showPanel='pageVariable'">
+          <i class="el-icon-document"></i>
+          <span>变量</span>
+        </li>
+         <li v-if="designer.mode==='template' || designer.mode==='component'" :class="{'epx-page-designer__function-tabs-item': true, 'is-active': showPanel==='templateAttribute'}" @click="showPanel='templateAttribute'">
+          <i class="el-icon-setting"></i>
+          <span>参数</span>
+        </li>
+      </ul>
+      <!-- 功能面板 -->
+      <epx-page-designer-widget-tree
+        v-if="showPanel==='selectComponent'"
+        :designer="designer"
+        @close="showPanel=null"
+      >
+      </epx-page-designer-widget-tree>
+      <epx-page-designer-widget-library-base
+        v-show="showPanel==='baseComponentLibrary'"
+        :designer="designer"
+        @close="showPanel=null"
+      >
+      </epx-page-designer-widget-library-base>
+      <epx-page-designer-widget-library
+        v-show="showPanel==='componentLibrary'"
+        :designer="designer"
+        @close="showPanel=null"
+      >
+      </epx-page-designer-widget-library>
+      <epx-page-designer-template-library
+        v-show="showPanel==='templateLibrary'"
+        :designer="designer"
+        @close="showPanel=null"
+      >
+      </epx-page-designer-template-library>
+      <el-drawer :title="$t('Page JS')" class="epx-page-designer__js-drawer" :model-value="showPanel==='jsPanel'" @update:modelValue="showPanel=null" direction="ltr" size="600px" :modal="false">
+        <epx-js-panel :value="designer.pageConfig.JS" @change="v=>designer.updatePageConfig({ JS: v })"></epx-js-panel>
+      </el-drawer>
+      <epx-page-designer-page-variable-panel v-if="showPanel==='pageVariable'"
+        :designer="designer"
+        @close="showPanel=null"
+      >
+      </epx-page-designer-page-variable-panel>
+
+      <template-attribute-panel
+        v-if="designer.mode==='template' || designer.mode==='component'"
+        v-show="showPanel==='templateAttribute'"
+        :designer="designer"
+        :templateInfo="designer.mode==='component'? componentInfo : templateInfo"
+        @close="showPanel=null"
+      >
+      </template-attribute-panel>
+    </div>
+    <!-- 页面预览 -->
+    <el-container ref="previewContainer" class="epx-page-designer__content" >
+      <epx-page-designer-widget-preview
+        :style="previewStyle"
+        :designer="designer"
+        :pageRelationList="relationList"
+        :terminal="terminal"
+      >
+      </epx-page-designer-widget-preview>
+      <!-- 选中组件浮层（点击模式） -->
+      <epx-page-designer-selected-overlay
+        :designer="designer"
+        :widget="selectedWidgetData.widget"
+        :target-element="selectedWidgetData.element"
+        :visible="!!selectedWidgetData.widget"
+        :parent-widget="selectedWidgetData.parentWidget"
+      ></epx-page-designer-selected-overlay>
+      <!-- 悬停组件浮层（悬停模式） -->
+      <epx-page-designer-hover-overlay
+        :designer="designer"
+        :widget="hoverWidgetData.widget"
+        :target-element="hoverWidgetData.element"
+        :visible="!!hoverWidgetData.widget"
+      ></epx-page-designer-hover-overlay>
+      <!-- 拖拽放置区域浮层（独立元素模拟位置，不修改原 drop-zone 样式） -->
+      <epx-page-designer-drag-zone-overlay
+        :designer="designer"
+        :target-element="designer.dragOverTargetElement"
+        :visible="!!designer.dragOverTarget"
+      ></epx-page-designer-drag-zone-overlay>
+      <!-- 拖拽模拟元素 -->
+      <epx-page-designer-drag-ghost
+        :visible="dragGhost.visible"
+        :widget-title="dragGhost.title"
+        :widget-icon="dragGhost.icon"
+        :position="dragGhost.position"
+      ></epx-page-designer-drag-ghost>
+      <!-- 拖拽插入位置线 -->
+      <div
+        v-if="designer.dragInsertLine"
+        class="epx-page-designer-insert-line"
+        :style="insertLineStyle"
+      ></div>
+    </el-container>
+    <!-- 组件配置面板 -->
+    <div class="epx-page-designer__setting-panel">
+      <!-- 获取组件对应的配置面板 -->
+      <epx-page-designer-setting-panel
+        v-if="loadVisualComponent"
+        :designer="designer"
+        :selected-widget="designer.selectedWidget"
+        :form-config="designer.formConfig"
+        :relationList="relationList"
+      >
+      </epx-page-designer-setting-panel>
+    </div>
+  </el-container>
+  <!-- 浮动大纲树（拖拽组件时显示在最右侧，可直接接收拖拽添加组件） -->
+  <div
+    class="epx-page-designer__floating-tree"
+    v-if="dragGhost.visible"
+  >
+    <epx-page-designer-widget-tree :designer="designer" :is-floating="true" />
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { createDesigner, getWidgetChildren } from './designer'
+import TemplateAttributePanel from './template-attribute-panel'
+import { HoverOverlay, SelectedOverlay, DropZoneOverlay } from './widget-preview'
+import DragGhost from './widget-preview/DragGhost.vue'
+export default {
+  name: 'epx-page-designer',
+  components: {
+    TemplateAttributePanel,
+    'epx-page-designer-selected-overlay': SelectedOverlay,
+    'epx-page-designer-hover-overlay': HoverOverlay,
+    'epx-page-designer-drag-zone-overlay': DropZoneOverlay,
+    'epx-page-designer-drag-ghost': DragGhost
+  },
+  props: {
+    newWindow: Boolean,
+    inline: Boolean,
+    initConfig: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      designer: createDesigner(this),
+      showPanel: '',
+      allWidgets: [],
+      loadVisualComponent: false,
+      templateInfo: {},
+      componentInfo: {},
+      relationList: [],
+      screenWidth: 1920,
+      scaleRatio: 1,
+      terminal: 'pc',
+      selectedWidgetData: {
+        widget: null,
+        element: null,
+        parentWidget: null
+      },
+      hoverWidgetData: {
+        widget: null,
+        element: null,
+        parentWidget: null
+      },
+      // 悬浮窗位置更新节流
+      dragGhostUpdateTimer: null
+    }
+  },
+  computed: {
+    ...mapState({
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav,
+      mobileWidth: state => state.config.mobileWidth
+    }),
+    ...mapGetters([
+      'getPageById'
+    ]),
+    currentPage () {
+      if (this.initConfig) {
+        return this._initPageObj || {}
+      }
+      const page = this.getPageById(this.$query.id)
+      return page || {}
+    },
+    previewStyle () {
+      if (this.terminal === 'mobile') {
+        return {
+          width: '375px',
+          height: 'calc(100% - 32px)',
+          margin: '16px auto',
+          boxShadow: '0 2px 10px 0 rgba(31,56,88,.15)'
+        }
+      }
+      return {
+        flexShrink: 0,
+        width: this.screenWidth + 'px',
+        transform: `scale(${this.scaleRatio})`,
+        transformOrigin: 'top left',
+        height: (100 / this.scaleRatio).toFixed(4) + '%'
+      }
+    },
+    insertLineStyle () {
+      const line = this.designer.dragInsertLine
+      if (!line) return {}
+      return {
+        position: 'fixed',
+        top: (line.top - 2) + 'px',
+        left: line.left + 'px',
+        width: line.width + 'px',
+        height: '4px',
+        pointerEvents: 'none',
+        zIndex: 10001
+      }
+    },
+    // 从 designer 获取拖拽状态
+    dragGhost () {
+      const state = this.designer.dragState
+      return {
+        visible: state.ghostVisible,
+        title: state.ghostTitle,
+        icon: state.ghostIcon,
+        position: state.ghostPosition
+      }
+    }
+  },
+  watch: {
+    terminal: {
+      handler (val) {
+        this.designer.terminal = val
+      },
+      immediate: true
+    },
+    'designer.selectedWidget' (newWidget) {
+      // 当选中组件变化时，更新浮层显示
+      if (!newWidget) {
+        this.selectedWidgetData = {
+          widget: null,
+          element: null,
+          parentWidget: null
+        }
+        return
+      }
+      // 使用 nextTick 确保 DOM 已更新
+      this.$nextTick(() => {
+        const element = document.querySelector(`[data-widget-id="${newWidget.id}"]`)
+        if (element) {
+          // 查找父组件
+          const parentWidget = this.designer.findParentWidget(newWidget.id)
+          this.selectedWidgetData = {
+            widget: newWidget,
+            element: element,
+            parentWidget: parentWidget || null
+          }
+        } else {
+          // 如果找不到元素，清空选中数据
+          this.selectedWidgetData = {
+            widget: null,
+            element: null,
+            parentWidget: null
+          }
+        }
+      })
+    }
+  },
+  methods: {
+    // 统一响应 designer 发出的 hover-change 事件
+    handleDesignerHoverChange (data) {
+      const { widget, parentWidget } = data || {}
+      if (!widget) {
+        this.hoverWidgetData = {
+          widget: null,
+          element: null,
+          parentWidget: null
+        }
+        return
+      }
+      // 使用 nextTick 确保 DOM 已更新
+      this.$nextTick(() => {
+        const element = document.querySelector(`[data-widget-id="${widget.id}"]`)
+        if (element) {
+          this.hoverWidgetData = {
+            widget,
+            element,
+            parentWidget: parentWidget || null
+          }
+        } else {
+          // 如果找不到元素，清空悬浮数据
+          this.hoverWidgetData = {
+            widget: null,
+            element: null,
+            parentWidget: null
+          }
+        }
+      })
+    },
+    handleWidgetClick (data) {
+      // 更新选中的组件数据（点击时仅更新选中浮层，不影响悬停浮层）
+      this.selectedWidgetData = {
+        widget: data.widget,
+        element: data.element,
+        parentWidget: data.parentWidget
+      }
+    },
+    handleDragStart (data) {
+      const { widget, title, icon, x, y, source } = data || {}
+      if (widget || title) {
+        this.designer.startDrag({
+          source: source || 'library',
+          data: widget,
+          title: title || widget?.title || '',
+          icon: icon || '',
+          x: x || 0,
+          y: y || 0,
+          isNative: true
+        })
+      }
+    },
+    handleDragMove (data) {
+      if (this.designer.dragState.isDragging && data) {
+        this.designer.updateDragGhostPosition(data.x || 0, data.y || 0)
+      }
+    },
+    handleDragEnd () {
+      this.designer.endDrag()
+    },
+    handleDocumentDragOver (e) {
+      // 阻止默认行为，确保 dragover 事件在整个文档中持续触发，
+      // 同时允许在页面中作为有效的拖拽目标使用
+      if (e && typeof e.preventDefault === 'function') {
+        e.preventDefault()
+      }
+      // 使用 requestAnimationFrame 优化悬浮窗位置更新
+      if (this.designer.dragState.isDragging && !this.dragGhostUpdateTimer) {
+        this.dragGhostUpdateTimer = requestAnimationFrame(() => {
+          this.designer.updateDragGhostPosition(e.clientX, e.clientY)
+          this.dragGhostUpdateTimer = null
+        })
+      }
+    },
+    handleDocumentDragEnd () {
+      this.handleDragEnd()
+    },
+    handleDocumentDrop (e) {
+      // 如果 drop 在大纲树外部，也需要关闭悬浮窗
+      // 大纲树内部的 drop 会调用 e.preventDefault()，所以这里只处理外部 drop
+      if (this.designer.dragState.isDragging) {
+        this.handleDragEnd()
+      }
+    },
+    // 使用鼠标事件模拟拖拽移动和结束，避免依赖原生 drag 事件
+    handleDocumentMouseMove (e) {
+      if (!this.designer.dragState.isDragging) return
+      this.designer.updateDragGhostPosition(e.clientX, e.clientY)
+    },
+    handleDocumentMouseUp () {
+      // 如果正在进行原生拖拽，不要通过 mouseup 结束拖拽
+      // 原生拖拽会通过 dragend 事件结束
+      if (this.designer.dragState.isNativeDragging) return
+
+      if (!this.designer.dragState.isDragging) return
+      this.handleDragEnd()
+    },
+    getPage () {
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage)
+      }
+      return this.$store.dispatch({
+        type: 'ADD_PAGE',
+        pageId: this.$query.id
+      })
+    },
+    getTemplate () {
+      return this.$http.get({
+        entityId: 'FM_TEMPLATE',
+        id: this.$query.id
+      })
+    },
+    async initDesigner () {
+      // this.designer = createDesigner(this)
+      this.designer.openPanel = v => {
+        this.showPanel = v
+      }
+      // 外部传入配置时直接初始化，不走接口
+      if (this.initConfig) {
+        const { config, title, metaId } = this.initConfig
+        // 构建稳定的 page 对象，避免 currentPage computed 每次返回新 {} 触发死循环
+        this._initPageObj = { config, title, metaId, pageId: '_preview_' }
+        this.designer.loadFormJson({ config, title, metaId })
+        if (metaId) this.getEntityRelation()
+        return
+      }
+      if (this.$query.configType === 'component') {
+        await this.getComponentListPromise
+        const component = this.designer.allWidgets.find(item => item.ID === this.$query.id)
+        if (component) {
+          this.componentInfo = component
+          const config = component.CONTENT ? JSON.parse(component.CONTENT) : {}
+          this.designer.loadFormJson({ isComponent: true, config })
+        }
+      } else if (this.$query.template === '1') {
+        this.getTemplate()
+          .then(data => {
+            const template = data.data
+            this.templateInfo = template
+            const config = JSON.parse(template.CONTENT || '{}')
+            if (!config.version) config.version = this.designer.version
+            this.designer.loadFormJson({ isTemplate: true, config })
+          })
+      } else {
+        this.getPage()
+          .then(page => {
+            this.designer.loadFormJson(this.$_.cloneDeep(page))
+            this.getEntityRelation()
+          })
+      }
+    },
+    getComponentList () {
+      this.getComponentListPromise = this.$http.list({
+        action: 'listWithVariables',
+        entityId: 'FM_PAGE',
+        'scope.TYPE': '01',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc',
+        scopeParams: JSON.stringify([{ lb: '(', field: 'LEVEL', values: '01', link: 'or' }, { field: 'SYSTEM', values: this.SYSTEM || this.appConfig['SYSTEM|ID'], rb: ')' }])
+      })
+        .then(data => {
+          const componentList = data.entitys
+          componentList.forEach(item => {
+            const visualComponentName = this.getVisualComponent(item)
+            item.visualComponentName = visualComponentName
+          })
+          this.designer.initWidgetList(componentList)
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getTemplateLibrary () {
+      const scopeParams = [
+        {
+          field: 'TYPE',
+          values: '01'
+        },
+        {
+          lb: '(',
+          field: 'LEVEL',
+          values: '01',
+          link: 'or'
+        },
+        {
+          field: 'SYSTEM',
+          values: this.SYSTEM,
+          rb: ')'
+        }
+      ]
+      this.$http.$post({
+        action: 'list',
+        entityId: 'FM_TEMPLATE',
+        scopeParams: JSON.stringify(scopeParams)
+      })
+        .then(data => {
+          this.designer.initTemplateLibrary(data.entitys)
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getVisualComponent (component) {
+      if (component && component.VISUAL_CONFIG_PATH) {
+        let pathName = ''
+        const pagePath = component.VISUAL_CONFIG_PATH
+        const rootMatch = pagePath.match(/^@\/(frame\/|product\/|project\/)?/)
+        if (rootMatch) {
+          pathName = pagePath.split(rootMatch[0])[1].replace('.vue', '')
+        }
+        // 根据路径定义组件名 SubList  转为 sub-list  layout/SubList 转为 layout-sub-list
+        const componentPath = pathName.replace('views/', '').replace('components/', '').replace('packages/', '').replace(/\//g, '-').replace(/(\w)([A-Z])/g, '$1-$2').toLowerCase()
+        const componentName = componentPath
+        return componentName
+      }
+      return null
+    },
+    getEntityRelation () {
+      this.$http.$get({
+        entityId: 'FM_ENTITY_RELATION',
+        action: 'getEntityRelationTree',
+        mainEntity: this.currentPage.metaId
+      })
+        .then(data => {
+          data.forEach(relation => {
+            relation.label = relation.title
+            relation.value = relation.flag
+            relation.children = relation.childrens
+            if (relation.childrens) {
+              relation.childrens.forEach(childRelation => {
+                childRelation.value = relation.flag + '#' + childRelation.flag
+                childRelation.label = childRelation.title
+              })
+            }
+          })
+          this.relationList = data
+        })
+    },
+    openContnetWidthObserver () {
+      // ⚠️ `el-container` 属于 EP 的**按需加载**档（见 src/element-plus.lazy.js，不在
+      // src/element-plus.eager.js 的白名单里）：mounted() 触发那一刻它还只是 defineAsyncComponent
+      // 的 Comment 占位、真身尚未 resolve ⇒ `this.$refs.previewContainer` 是 undefined，
+      // 老写法直接取 `.$el` 会抛 "Cannot read properties of undefined (reading '$el')"，
+      // 并且因为这行在 mounted 里，会把它后面的逻辑（terminal 初始化）一起中断。
+      // 同一个坑 business/src/components/Popup.vue 的 applyDialogStyle 注释里也记过一次。
+      // 改成「拿到元素才 observe，拿不到就下一帧重试」，异步组件 resolve 后自然接上。
+      const getEl = () => {
+        const ref = this.$refs.previewContainer
+        if (!ref) return null
+        return ref.$el || (ref.nodeType === 1 ? ref : null)
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        const el = getEl()
+        if (!el) return
+        this.screenWidth = document.documentElement.offsetWidth
+        this.scaleRatio = el.clientWidth / document.documentElement.offsetWidth
+      })
+      let tries = 0
+      const attach = () => {
+        if (this.observerDetached) return
+        const el = getEl()
+        if (el) {
+          resizeObserver.observe(el)
+          return
+        }
+        // 异步组件通常一两帧就 resolve；给约 5s 上限后放弃（最坏结果只是没有缩放比，不影响编辑）
+        if (tries++ < 300) requestAnimationFrame(attach)
+      }
+      attach()
+      return resizeObserver
+    },
+    back () {
+      if (this.initConfig) {
+        this.$emit('close')
+        return
+      }
+      if (this.newWindow) {
+        window.close()
+      } else if (this.$query.isObjectDetail) {
+        this.backPage()
+      } else {
+        this.backPage({ reload: true })
+      }
+    },
+    pageSetting () {
+      this.designer.clearSelected()
+    },
+    saveTemplate (config) {
+      this.isSavePage = true
+      this.$http.update({
+        entityId: 'FM_TEMPLATE',
+        'bean.ID': this.$query.id,
+        'bean.CONTENT': JSON.stringify(config, null, '\t')
+      })
+        .then(data => {
+          this.isSavePage = false
+          this.$message.success(this.$t('save successfully'))
+        })
+        .catch(err => {
+          this.isSavePage = false
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    saveCustomComponent (config) {
+      this.isSavePage = true
+      this.$http.update({
+        entityId: 'FM_PAGE',
+        'bean.ID': this.$query.id,
+        'bean.CONTENT': JSON.stringify(config, null, '\t')
+      })
+        .then(data => {
+          this.isSavePage = false
+          this.$message.success(this.$t('save successfully'))
+        })
+        .catch(err => {
+          this.isSavePage = false
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    async saveConfigs () {
+      // 获取所有配置 // 获取编译好的JS和未编译的JS
+      if (this.isSavePage) return
+      const { version, pageConfig: globalConfig, widgetList, widgetConfig } = this.designer
+      for (const key in globalConfig) {
+        if (globalConfig[key] === null) delete globalConfig[key]
+      }
+      for (const key in widgetConfig) {
+        const config = widgetConfig[key]
+        for (const configKey in config) {
+          if (configKey === 'span' || configKey === 'componentName' || configKey === 'flex') {
+            delete config[configKey]
+          }
+        }
+      }
+      const formatWidget = (arr) => {
+        arr.forEach(item => {
+          for (const key in item) {
+            if (item[key] === null) delete item[key]
+          }
+          const children = getWidgetChildren(item)
+          if (children.length > 0) {
+            formatWidget(children)
+          }
+        })
+      }
+      formatWidget(widgetList)
+      const pageConfig = {
+        version: version,
+        ...globalConfig,
+        items: widgetList,
+        itemConfigs: widgetConfig
+      }
+      if (pageConfig.JS) {
+        await import(/* webpackChunkName: "standalone" */'@babel/standalone')
+          .then(babel => {
+            // 获取页面全局配置
+            const es5 = babel.transform(pageConfig.JS, {
+              presets: ['es2015']
+            })
+            pageConfig.compileJS = es5.code
+            for (const key in pageConfig) {
+              if (pageConfig[key] === null) {
+                delete pageConfig[key]
+              }
+            }
+          })
+      }
+      if (this.designer.mode === 'template') {
+        return this.saveTemplate(pageConfig)
+      } else if (this.designer.mode === 'component') {
+        return this.saveCustomComponent(pageConfig)
+      }
+      this.savePageConfigs(pageConfig)
+    },
+    savePageConfigs (pageConfig) {
+      // 外部传入配置模式：emit 事件，不走接口
+      if (this.initConfig) {
+        this.$emit('save', pageConfig)
+        this.$message.success(this.$t('save successfully'))
+        return
+      }
+      this.isSavePage = true
+      this.$http.update({
+        entityId: 'FM_PAGE_CONFIG',
+        'bean.ID': this.$query.id,
+        'bean.CONTENT': JSON.stringify(pageConfig, null, '\t')
+      })
+        .then(data => {
+          this.isSavePage = false
+          this.$message.success(this.$t('save successfully'))
+          if (this.newWindow) {
+            if (window.opener) window.opener.postMessage({ pageId: this.$query.id, type: 'configPage' }, '/')
+          } else {
+            this.$store.commit('DELETE_PAGE', { pageId: this.$query.id })
+            // 重新获取页面
+            this.$store.dispatch('ADD_PAGE', { pageId: this.$query.id })
+          }
+        })
+        .catch(err => {
+          this.isSavePage = false
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    }
+  },
+  created () {
+    this.initMobileWidth = this.mobileWidth
+    if (this.showMenu) {
+      this.changeMenuFlag = true
+      this.$store.commit('SWITCH_MENU_SHOW', false)
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true
+      this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    }
+    import('@epxing/designer/src/visual/index.js')
+      .then(() => {
+        this.loadVisualComponent = true
+      })
+    this.getComponentList()
+    this.initDesigner()
+    // 通过 designer 统一监听悬浮组件变化
+    if (this.designer && typeof this.designer.handleEvent === 'function') {
+      this.designer.handleEvent('hover-change', this.handleDesignerHoverChange)
+      // 监听关闭左侧面板事件
+      this.designer.handleEvent('close-left-panel', () => {
+        this.showPanel = ''
+      })
+    }
+    this.getTemplateLibrary()
+  },
+  mounted () {
+    // 监听 designer 的全局事件
+    if (this.designer && this.designer.vueInstance) {
+      this.designer.handleEvent('widget-click', this.handleWidgetClick)
+      this.designer.handleEvent('drag-start', this.handleDragStart)
+      this.designer.handleEvent('drag-move', this.handleDragMove)
+      this.designer.handleEvent('drag-end', this.handleDragEnd)
+    }
+    // 使用鼠标事件模拟拖拽移动和结束，避免依赖原生 drag 事件，
+    // 当左侧组件库隐藏时仍然可以持续监听移动和结束
+    document.addEventListener('mousemove', this.handleDocumentMouseMove)
+    document.addEventListener('mouseup', this.handleDocumentMouseUp)
+    // 监听全局 dragover 事件，更新悬浮窗位置
+    document.addEventListener('dragover', this.handleDocumentDragOver)
+    // 监听全局 dragend 和 drop 事件，确保拖拽结束时关闭悬浮窗
+    document.addEventListener('dragend', this.handleDocumentDragEnd)
+    document.addEventListener('drop', this.handleDocumentDrop)
+    if (window.opener) {
+      // 监听器存到实例上，卸载时从 opener 上移除
+      this._openerMessageHandler = event => {
+        if (event.data === 'CLOSE_WINDOW') window.close()
+      }
+      window.opener.addEventListener('message', this._openerMessageHandler)
+    }
+    this.resizeObserver = this.openContnetWidthObserver()
+    // 根据终端设置是否是mobile
+    if (this.$route.query.terminal === 'mobile') {
+      this.terminal = 'mobile'
+    }
+  },
+  beforeUnmount () {
+    // 移除事件监听
+    if (this.designer && this.designer.vueInstance) {
+      this.designer.offEvent('widget-click', this.handleWidgetClick)
+      this.designer.offEvent('drag-start', this.handleDragStart)
+      this.designer.offEvent('drag-move', this.handleDragMove)
+      this.designer.offEvent('drag-end', this.handleDragEnd)
+    }
+    // 移除鼠标模拟拖拽事件监听
+    document.removeEventListener('mousemove', this.handleDocumentMouseMove)
+    document.removeEventListener('mouseup', this.handleDocumentMouseUp)
+    // 移除拖拽事件监听
+    document.removeEventListener('dragover', this.handleDocumentDragOver)
+    document.removeEventListener('dragend', this.handleDocumentDragEnd)
+    document.removeEventListener('drop', this.handleDocumentDrop)
+    if (this.changeMenuFlag) {
+      this.$store.commit('SWITCH_MENU_SHOW', true)
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+    }
+    // 让还在等异步组件 resolve 的重试循环停下来（否则组件已卸载还在 rAF 里持有实例引用）
+    this.observerDetached = true
+    if (this.resizeObserver) this.resizeObserver.disconnect()
+    if (window.opener && this._openerMessageHandler) window.opener.removeEventListener('message', this._openerMessageHandler)
+    if (this.designer && typeof this.designer.dispose === 'function') this.designer.dispose()
+    this.$store.commit('SET_MOBILE_WIDTH', this.initMobileWidth)
+  }
+
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer) {
+  position: relative;
+  left: -10px;
+  top: -10px;
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  @include e(content) {
+    .ghost, .sortable-ghost {
+      position: relative;
+      z-index: 101;
+      content: '';
+      font-size: 0;
+      height: 4px!important;
+      box-sizing: border-box;
+      @include bg_color_primary;
+      border: 2px solid;
+      @include border_color_primary;
+      outline-width: 0;
+      padding: 0!important;
+      margin: 0!important;
+      overflow: hidden;
+      &.epx-page-designer-widget-library__item {
+        width: 100%;
+      }
+    }
+    // 仅根画布 drop-zone 需要撑满高度（空白/短内容时整块可拖放）；
+    // 嵌套容器内部的 drop-zone 不能用 100%，否则会把同级内容挤掉，导致与运行时渲染不一致
+    .epx-page-designer-widget-preview > .epx-page-designer-widget-preview__drop-zone {
+      min-height: 100%;
+    }
+  }
+
+  .epx-page-designer-insert-line {
+    @include bg_color_primary;
+    border-radius: var(--epx-radius-s);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
+  }
+
+  // 拖拽时右侧悬浮大纲树
+  @include e(floating-tree) {
+    position: absolute;
+    top: 60px; // 头部高度
+    right: 0;
+    bottom: 0;
+    width: 360px;
+    z-index: 200;
+    pointer-events: none; // 先禁止穿透，内部再开启
+
+    .epx-page-designer-widget-tree {
+      height: 100%;
+      margin-left: 0;
+      pointer-events: auto; // 允许大纲树本身交互
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  @include m(new-window) {
+    left: 0px;
+    top: 0px;
+    width:100%;
+    height: 100%;
+  }
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    background: var(--epx-bg-card);
+    padding: 0 20px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  @include e(header-left) {
+    display: flex;
+    >i {
+      font-size: 24px;
+      color: #666;
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+  @include e(header-title) {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+  }
+  @include e(header-subtitle){
+    font-size: var(--epx-font-size-base);
+    color: #666;
+  }
+  @include e(header-center) {
+    padding: 2px;
+    border: 1px solid #e3e3e3;
+    border-radius: var(--epx-radius-base);
+    >i {
+      font-size: var(--epx-font-size-l);
+      padding: 4px 6px;
+      border-radius: var(--epx-radius-base);
+      cursor: pointer;
+      &.is-active {
+        @include font_color_primary;
+        @include bg_color_primary(.1);
+      }
+    }
+  }
+  @include e(header-operate) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(header-operate-item) {
+    color: #666;
+    cursor: pointer;
+    margin: 20px;
+    &:hover {
+      @include font_color_primary
+    }
+  }
+  @include e(container) {
+    flex:1;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+  }
+  @include e(function-panel) {
+    display: flex;
+    flex-shrink: 0;
+    position: relative;
+    transition: width 0.2s ease, margin-left 0.2s ease;
+
+    &.epx-page-designer__function-panel--collapsed {
+      width: 0;
+      margin-left: -50px; // 隐藏 tabs 区域
+      overflow: hidden;
+    }
+  }
+  @include e(widget-panel) {
+
+  }
+  @include e(function-tabs) {
+    width: 50px;
+    height: 100%;
+    background: var(--epx-bg-card);
+    box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1);
+    padding:  20px 0;
+    flex-shrink: 0;
+  }
+  @include e(function-tabs-item) {
+    width: 100%;
+    padding: 8px 0;
+    margin-bottom: 10px;
+    text-align: center;
+    line-height: 1;
+    font-size: 24px;
+    color: #666;
+    >span {
+      display: block;
+      font-size: var(--epx-font-size-s);
+      line-height: 20px;
+    }
+    cursor: pointer;
+    &:hover, &.is-active {
+      @include bg_color_primary(.2);
+      @include font_color_primary
+    }
+  }
+  @include e(js-drawer) {
+    &.ltr {
+      left: 50px;
+      top: 60px;
+      height: calc(100% - 60px);
+      box-shadow: none
+    }
+    .el-drawer__header {
+      padding: 10px;
+      margin: 0;
+    }
+  }
+}
+
+.page-preview {
+  flex: 1;
+  overflow: hidden;
+}
+.config-panel {
+  width: 360px;
+  flex-shrink: 0;
+}
+.function-panel {
+  position: relative;
+  flex-shrink: 0;
+}
+.js-panel {
+  position: absolute;
+  top: 0;
+  left: 51px;
+  width: 600px;
+  height: 100%;
+  z-index: 10;
+}
+.js-panel-title {
+  background: var(--epx-bg-card);
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  color: #666;
+  i {
+    cursor: pointer;
+    color: #999;
+    font-size: 18px;
+  }
+}
+</style>