vue2-client 1.8.239 → 1.8.241

package/src/pages/lowCode/lowCodeEditor.vue

@@ -1,1288 +1,1285 @@
-<template>
-  <div>
-    <!--  标题  -->
-    <a-card>
-      <a-page-header
-        title="奥枫低代码前端编辑器"
-        sub-title="af-lowcode"
-        :backIcon="false"
-        @back="() => null"
-      >
-        <template slot="extra">
-          <a-button @click="test">测试</a-button>
-          <a-button @click="editModeActive">编辑</a-button>
-          <a-button @click="previewModeActive">预览</a-button>
-          <a-button type="primary" @click="exportConfig">导出</a-button>
-        </template>
-      </a-page-header>
-    </a-card>
-    <!--  预览模式  -->
-    <a-card v-if="preview">
-      <editor-page-render :page-config="config" :edit-mode="false"/>
-    </a-card>
-    <!--  编辑模式  -->
-    <div v-show="!preview">
-      <a-row :gutter="2">
-        <!--    左侧    -->
-        <a-col :span="4">
-          <a-card>
-            <a-tabs>
-              <a-tab-pane key="1" tab="UI库">
-                <!--    UI库    -->
-                <a-card style="margin-bottom: 5%">
-                  <!--     所有组件       -->
-                  <a-card-grid class="ui-item" @click="addContainer">
-                    组件容器
-                  </a-card-grid>
-                  <template v-for="(item, index) in getRegisteredComponents()">
-                    <a-card-grid :key="index" class="ui-item" @click="addComponentToContainer(item)">
-                      {{ item }}
-                    </a-card-grid>
-                  </template>
-                </a-card>
-              </a-tab-pane>
-              <a-tab-pane key="2" tab="架构">
-                <!--    页面架构    -->
-                <a-card style="margin-bottom: 3%">
-                  <LowCodePageOrganization
-                    :config="config"
-                    v-if="showPageOrganization"
-                    @renamePage="renamePage"
-                    @pasteItem="handlePasteItem"
-                    @componentMove="handleTreeDrag"
-                    @deleteComponent="deleteComponentInTree"
-                    @treeOrganizationClick="treeOrganizationClick"
-                    @addComponent="handleAddComponent"/>
-                </a-card>
-              </a-tab-pane>
-            </a-tabs>
-          </a-card>
-        </a-col>
-        <!--    中间主体编辑器    -->
-        <a-col :span="15">
-          <a-card>
-            <!--       切换显示的组件       -->
-            <div style="margin-bottom: 3%">
-              <a-menu v-model="mainPageMenu" mode="horizontal" @click="handleMainPageMenuChange">
-                <template v-for="(page) in config.page">
-                  <a-menu-item :key="page.id">{{ page.title + '(' + determinePageType(page.type) + ')' }}</a-menu-item>
-                </template>
-              </a-menu>
-            </div>
-            <!--      渲染器      -->
-            <div v-if="activeMainPageType === 'page'">
-              <editor-page-render
-                v-if="renderPreview"
-                @spanDrag="handleDrag"
-                @containerDelete="handleContainerDelete"
-                @clickComponentInEditor="clickComponentInEditor"
-                :page-config="{ data: config.data, page: config.page.filter(page => page.id === activeMainPage)}"/>
-              <a-skeleton v-else/>
-            </div>
-            <div v-if="activeMainPageType === 'modal'">
-              <editor-page-render
-                v-if="renderModalPreview"
-                @spanDrag="handleDrag"
-                @containerDelete="handleContainerDelete"
-                @clickComponentInEditor="clickComponentInEditor"
-                :page-config="{ data: config.data, page: config.page.filter(page => page.id === activeMainPage)}"/>
-              <a-skeleton v-else/>
-            </div>
-            <div v-if="activeMainPageType === 'draw'">
-              <editor-page-render
-                v-if="renderDrawPreview"
-                @spanDrag="handleDrag"
-                @containerDelete="handleContainerDelete"
-                @clickComponentInEditor="clickComponentInEditor"
-                :page-config="{ data: config.data, page: config.page.filter(page => page.id === activeMainPage)}"/>
-              <a-skeleton v-else/>
-            </div>
-          </a-card>
-        </a-col>
-        <!--    右侧    -->
-        <a-col :span="5">
-          <!--    属性编辑      -->
-          <a-card>
-            <template v-if="editorPropertiesConfig === 'unregistered'">
-              <p>所选组件并未注册</p>
-            </template>
-            <template v-else>
-              <!--    组件ID    -->
-              <div v-if="editorPropertiesConfig.id">
-                <a-statistic title="组件ID" :value="editorPropertiesConfig.id" valueStyle="font-size: 1.2em"/>
-              </div>
-              <!--    切换    -->
-              <a-menu v-model="editorPanelCurrent" mode="horizontal" @click="() => null">
-                <a-menu-item key="properties">属性</a-menu-item>
-                <a-menu-item key="events">事件</a-menu-item>
-              </a-menu>
-              <!--    属性编辑    -->
-              <div v-if="editorPanelCurrent[0] === 'properties'">
-                <div v-if="editorPropertiesConfig.props !== undefined">
-                  <div>
-                    栅格数:<a-input :default-value="editorPropertiesConfig.span" @change="changeSpan"/>
-                  </div>
-                  <template v-for="(value,key) in editorPropertiesConfig.props">
-                    <div :key="editorPropertiesConfig.id + '_' + key">
-                      {{ key }}:<a-input :default-value="value" @change="editorPropertiesInputChange($event, key)"/>
-                    </div>
-                  </template>
-                </div>
-                <p v-else>您未选择任何组件</p>
-              </div>
-              <!--    事件编辑    -->
-              <div v-else-if="editorPanelCurrent[0] === 'events'">
-                <template v-if="editorPropertiesConfig.onEvent !== undefined">
-                  <a-collapse v-model="eventCollapseActive">
-                    <a-collapse-panel
-                      v-for="(eventConfig,eventType) in editorPropertiesConfig.onEvent"
-                      :key="eventType"
-                      :header="eventType">
-                      <div v-for="(singleEvent,singleEventIndex) in eventConfig" :key="singleEventIndex" class="singleEvent">
-                        <p>
-                          <span style="color:rgb( 24,144,255)">{{ singleEvent.eventType }}</span>
-                          事件
-                        </p>
-                        <!--    事件 编辑/删除 按钮    -->
-                        <div style="display: flex; justify-content: space-evenly">
-                          <a-icon type="edit" theme="twoTone" class="edit_icon" @click="editEventIconClick(eventType,singleEventIndex)"/>
-                          <a-popconfirm title="确认删除" ok-text="确认删除" cancel-text="取消" @confirm="removeEventClick(eventType,singleEventIndex)" @cancel="() => null">
-                            <a-icon type="delete" theme="twoTone" class="edit_icon"/>
-                          </a-popconfirm>
-                        </div>
-                      </div>
-                    </a-collapse-panel>
-                  </a-collapse>
-                </template>
-                <a-button v-if="editorPropertiesConfig.id !== undefined" @click="addEvent">添加事件</a-button>
-                <p v-else>您未选择任何组件</p>
-              </div>
-            </template>
-          </a-card>
-        </a-col>
-      </a-row>
-    </div>
-    <!--  自定义事件弹框  -->
-    <a-modal
-      title="事件编辑器"
-      width="60%"
-      :z-index="1001"
-      :destroyOnClose="true"
-      @ok="handleEventEditorOk"
-      @cancel="handleEventEditorCancel"
-      v-if="showEventEditor"
-      :visible="showEventEditor">
-      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
-        <!--    事件触发类型    -->
-        <a-form-item label="事件触发类型">
-          <a-select @change="handleEventEditorTypeChange" :default-value="eventEditorContent.emitType">
-            <a-select-option
-              v-for="(eventType, eventTypeIndex) in editorPropertiesConfig.selfEvent"
-              :key="eventTypeIndex"
-              :value="eventType">
-              {{ eventType }}
-            </a-select-option>
-            <a-select-option value="customEmitType">
-              自定义触发类型
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!--    自定义事件触发类型    -->
-        <a-form-item label="自定义事件触发名" v-if="eventEditorContent.emitType === 'customEmitType'">
-          <a-input v-model="eventEditorContent.customEmitType"/>
-        </a-form-item>
-        <!--    事件类型    -->
-        <a-form-item label="事件类型">
-          <a-select @change="handleEventEditorEventTypeChange" :default-value="eventEditorContent.eventType">
-            <a-select-option value="changeValue">
-              修改组件的值
-            </a-select-option>
-            <a-select-option value="changeProps">
-              修改组件的Props
-            </a-select-option>
-            <a-select-option value="runLogic">
-              执行Logic
-            </a-select-option>
-            <a-select-option value="log">
-              打印日志
-            </a-select-option>
-            <a-select-option value="showModal" v-if="this.config.page.filter(page => page.type === 'modal').length > 0">
-              修改弹框可见
-            </a-select-option>
-            <a-select-option value="showDraw" v-if="this.config.page.filter(page => page.type === 'draw').length > 0">
-              修改抽屉可见
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!--    修改弹框可见 or 修改抽屉可见    -->
-        <a-form-item label="修改可见" v-if="eventEditorContent.eventType === 'showModal' || eventEditorContent.eventType === 'showDraw'">
-          <a-radio-group v-model="eventEditorContent.visible" button-style="solid">
-            <a-radio-button value="open">
-              显示
-            </a-radio-button>
-            <a-radio-button value="close">
-              隐藏
-            </a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-        <!--    弹框容器ID    -->
-        <a-form-item label="弹框容器ID" v-if="eventEditorContent.eventType === 'showModal'">
-          <a-select v-model="eventEditorContent.containerId">
-            <a-select-option
-              v-for="(modal) in config.page.filter(page => page.type === 'modal')"
-              :key="modal.id"
-              :value="modal.id">
-              弹框_{{ modal.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!--    抽屉容器ID    -->
-        <a-form-item label="弹框容器ID" v-if="eventEditorContent.eventType === 'showDraw'">
-          <a-select v-model="eventEditorContent.containerId">
-            <a-select-option
-              v-for="(draw) in config.page.filter(page => page.type === 'draw')"
-              :key="draw.id"
-              :value="draw.id">
-              抽屉_{{ draw.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!--    Logic名    -->
-        <a-form-item label="Logic名" v-if="eventEditorContent.eventType === 'runLogic'">
-          <a-input v-model="eventEditorContent.logicName"/>
-        </a-form-item>
-        <!--    服务名    -->
-        <a-form-item label="服务名" v-if="eventEditorContent.eventType === 'runLogic'">
-          <a-input v-model="eventEditorContent.serviceName"/>
-        </a-form-item>
-        <!--    自定义Logic参数，由哪些组件传递    -->
-        <a-form-item label="Logic参数取值组件" v-if="eventEditorContent.eventType === 'runLogic'">
-          <a-transfer
-            :data-source="logicParamTransferDataSource"
-            :render="item => item.title"
-            :target-keys="eventEditorContent.logicParamTransfer"
-            @change="handleLogicParamTransferChange"/>
-        </a-form-item>
-        <!--    自定义Logic参数    -->
-        <a-form-item label="自定义Logic参数" v-if="eventEditorContent.eventType === 'runLogic'">
-          <a-button type="primary" @click="openLogicParamJSEditor">
-            打开编辑器
-          </a-button>
-        </a-form-item>
-        <!--    自定义Logic回调    -->
-        <a-form-item label="自定义Logic回调" v-if="eventEditorContent.eventType === 'runLogic'" >
-          <a-button type="primary" @click="openLogicCallbackEditor">
-            打开编辑器
-          </a-button>
-        </a-form-item>
-        <!--    修改组件的值 才会显示的其余参数    -->
-        <template v-if="eventEditorContent.eventType === 'changeValue' || eventEditorContent.eventType === 'changeProps'">
-          <!--    目标组件    -->
-          <a-form-item label="目标组件">
-            <a-select @change="handleEventEditorTargetChange" :default-value="eventEditorContent.target">
-              <a-select-option
-                v-for="(targetId, targetIndex) in getAllRenderedComponents()"
-                :key="targetIndex"
-                :value="targetId">
-                {{ targetId }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-          <!--    目标组件执行事件名    -->
-          <a-form-item label="目标组件执行事件名" v-if="eventEditorContent.eventName === 'changeValue'">
-            <a-select @change="handleEventEditorTargetEventTypeChange" :default-value="eventEditorContent.eventName">
-              <a-select-option :value="eventType" v-for="(eventType,eventTypeIndex) in supportedEventType" :key="'eventType_' + eventTypeIndex">
-                {{ eventType }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-          <!--    目标组件修改值对应的key    -->
-          <a-form-item label="目标组件修改值对应的key" v-if="eventEditorContent.target !== undefined">
-            <a-input v-model="eventEditorContent.targetKey"/>
-          </a-form-item>
-        </template>
-        <!--    自定义JS方法    -->
-        <a-form-item label="自定义JS方法">
-          <a-button type="primary" @click="openEventJSEditor">打开编辑器</a-button>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-    <!--  自定义JS事件弹框  -->
-    <a-modal
-      title="事件编辑器"
-      width="60%"
-      :destroyOnClose="true"
-      :z-index="1002"
-      @ok="handleJSEventEditorOk"
-      @cancel="handleJSEventEditorCancel"
-      :visible="showJSEventEditor">
-      <a-popover title="参数说明" style="margin-right: 5%">
-        <template slot="content">
-          <p>该方法有以下几个参数：</p>
-          <p>eventType：事件类型，比如：changeValue代表修改目标组件的值</p>
-          <p>data：由事件源发出的参数列表</p>
-          <p>targetKey：修改目标组件值所对应的key</p>
-          <p>sourceVM：事件源的vue对象</p>
-          <p>targetVM：目标的vue对象</p>
-        </template>
-        <a-button type="primary">
-          参数说明
-        </a-button>
-      </a-popover>
-      <a-popover title="返回值说明" style="margin-bottom: 5%">
-        <template slot="content">
-          <p>该方法需要的返回值：</p>
-          <p>eventType：事件类型</p>
-          <p>data：传递给目标组件的数据</p>
-          <p>targetKey：修改目标组件值所对应的key</p>
-        </template>
-        <a-button type="primary">
-          返回值说明
-        </a-button>
-      </a-popover>
-      <code-mirror
-        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
-        :mode="'javascript'"
-        :theme="'monokai'"
-        v-model="eventEditorContent.JSFunction"
-        :value="eventEditorContent.JSFunction"/>
-    </a-modal>
-    <!--  自定义Logic参数JS弹框  -->
-    <a-modal
-      title="自定义Logic参数JS编辑器"
-      width="60%"
-      :destroyOnClose="true"
-      :z-index="1002"
-      @ok="() => { showLogicParamJSEditor = false}"
-      @cancel="() => { showLogicParamJSEditor = false}"
-      :visible="showLogicParamJSEditor">
-      <a-popover title="参数说明" style="margin-right: 5%">
-        <template slot="content">
-          <p>该方法有以下几个参数：</p>
-          <p>componentData：Logic参数取值组件中选中的组件，将会把数据打包存在此对象中，key则为组件的id</p>
-          <p>data：由事件源emit发出的参数</p>
-        </template>
-        <a-button type="primary">
-          参数说明
-        </a-button>
-      </a-popover>
-      <a-popover title="返回值说明" style="margin-bottom: 5%">
-        <template slot="content">
-          <p>该方法需要一个JSON类型的返回值</p>
-          <p>该返回值就是传递给Logic执行的参数</p>
-        </template>
-        <a-button type="primary">
-          返回值说明
-        </a-button>
-      </a-popover>
-      <code-mirror
-        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
-        :mode="'javascript'"
-        :theme="'monokai'"
-        v-model="eventEditorContent.logicParamJSFunction"
-        :value="eventEditorContent.logicParamJSFunction"/>
-    </a-modal>
-    <!--  自定义Logic回调弹框  -->
-    <a-modal
-      title="事件编辑器"
-      width="60%"
-      :destroyOnClose="true"
-      :z-index="1002"
-      @ok="() => { showLogicCallBackEditor = false}"
-      @cancel="() => { showLogicCallBackEditor = false}"
-      :visible="showLogicCallBackEditor">
-      <a-popover title="参数说明" style="margin-bottom: 5%">
-        <template slot="content">
-          <p>该方法有以下几个参数：</p>
-          <p>componentsMap：所有组件注册的Map</p>
-          <p>responseData：后端的返回值</p>
-        </template>
-        <a-button type="primary">
-          参数说明
-        </a-button>
-      </a-popover>
-      <code-mirror
-        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
-        :mode="'javascript'"
-        :theme="'monokai'"
-        v-model="eventEditorContent.logicCallBackFunction"
-        :value="eventEditorContent.logicCallBackFunction"/>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import editorPageRender from '@vue2-client/base-client/components/common/LowCodePageRender/editorPageRender.vue'
-import * as registeredRender from '@vue2-client/utils/lowcode/registerComponentForRender'
-import * as lowcodeUtils from '@vue2-client/utils/lowcode/lowcodeUtils'
-import codeMirror from '@vue2-client/components/CodeMirror/inedx.vue'
-import { nanoid } from 'nanoid'
-import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
-// eslint-disable-next-line no-unused-vars
-import lowcodeLog from '@vue2-client/utils/lowcode/lowcodeLog'
-import LowCodePageOrganization from '@vue2-client/base-client/components/common/LowCodeComponent/LowCodePageOrganization.vue'
-
-// 函数编辑器显示的模板
-const JSEventFunctionTemplate = 'function(eventType, data, targetKey, sourceVM, targetVM) {\n  \n  return {\n    "eventType": eventType,\n    "data": data,\n    "targetKey": targetKey\n  }\n}'
-const LogicParamFunctionTemplate = 'function(componentData, data) {\n  \n  return {\n    \n  }\n}'
-const LogicCallBackFunctionTemplate = 'function(componentsMap, responseData) {\n  \n}'
-
-export default {
-  components: {
-    LowCodePageOrganization,
-    editorPageRender,
-    codeMirror
-  },
-  props: {
-    // 页面原始的配置，用于从琉璃中读取
-    originalConfig: {
-      type: Object,
-      default: () => {
-        return {
-          page: []
-        }
-      }
-    }
-  },
-  data () {
-    return {
-      // 主体窗口选择的标签
-      mainPageMenu: ['none'],
-      // 默认的配置
-      config: { page: [] },
-      // 选中的容器
-      targetContainer: undefined,
-      // 控制是否渲染页面
-      preview: false,
-      // 控制架构树显隐，用于刷新组件
-      showPageOrganization: true,
-      // 用于保存右侧编辑组件的属性
-      editorPropertiesConfig: {},
-      // 编辑属性时用到的定时器
-      inputTimeout: undefined,
-      // 当前激活的是组件事件中哪一类触发属性，对应事件编辑中的手风琴面板
-      eventCollapseActive: undefined,
-      // 控制事件编辑器弹框显隐
-      showEventEditor: false,
-      // 控制自定义JS函数弹框显隐
-      showJSEventEditor: false,
-      // 控制页面显隐，用于属性面板编辑后，触发页面更新
-      renderPreview: true,
-      // 控制弹框显隐，用于属性面板编辑后，触发页面更新
-      renderModalPreview: true,
-      // 控制抽屉显隐，用于属性面板编辑后，触发页面更新
-      renderDrawPreview: true,
-      // 控制右侧编辑器切换标签页
-      editorPanelCurrent: ['properties'],
-      // 事件编辑内容的缓存
-      eventEditorContent: {},
-      // 用于事件编辑的回显，在点击事件编辑按钮后，会将此变量赋值
-      eventEditorCurrent: undefined,
-      // 保存目标组件可以触发哪些事件
-      supportedEventType: undefined,
-      // 控制自定义Logic参数自定义JS函数弹框显隐
-      showLogicParamJSEditor: false,
-      // 控制自定义Logic回调弹框显隐
-      showLogicCallBackEditor: false,
-      // 保存主体中，当前激活的标签栏ID
-      activeMainPage: undefined,
-      // 保存主体中，当前激活的标签栏类型
-      activeMainPageType: undefined,
-      // 定义Logic参数从哪些组件获取
-      logicParamTransferDataSource: []
-    }
-  },
-  provide () {
-    return {
-      // 将注册的组件传递给子组件
-      componentsMap: {}
-    }
-  },
-  methods: {
-    // 页面容器重命名
-    renamePage (pageId, newName) {
-      const page = lowcodeUtils.getConfig(pageId, this.config)
-      page.title = newName
-      this.refreshOrganization()
-    },
-    // 复制粘贴组件
-    handlePasteItem (id, copyCache, type) {
-      const target = lowcodeUtils.getConfig(id, this.config)
-      // 页面中插入行
-      if (type === 'page-row') {
-        const content = copyCache.content
-        const contentKeys = Object.keys(content)
-        const result = []
-        contentKeys.forEach(key => {
-          result.push(content[key])
-        })
-        target.body.push(result)
-      } else if (type === 'row-item') {
-        // 行中插入组件
-        target.push(copyCache.content)
-      } else if (type === 'page') {
-        // 复制页面
-        this.config.page.push(copyCache)
-        this.$message.success('复制成功！')
-      }
-      this.refreshOrganization()
-    },
-    // span属性通过input框修改
-    changeSpan (event) {
-      this.editorPropertiesConfig.span = event.target.value
-    },
-    // logic从组件中取值穿梭框改变事件
-    handleLogicParamTransferChange (targetKeys, direction, moveKeys) {
-      this.eventEditorContent.logicParamTransfer = targetKeys
-      this.$forceUpdate()
-    },
-    // 点击架构树
-    treeOrganizationClick (id, type) {
-      // 如果类型是page证明，选中的是最外层容器
-      if (type === 'page') {
-        this.mainPageMenu[0] = id
-        this.activeMainPage = id
-        for (let i = 0; i < this.config.page.length; i++) {
-          if (this.config.page[i].id === this.activeMainPage) {
-            this.activeMainPageType = this.config.page[i].type
-            break
-          }
-        }
-        this.$forceUpdate()
-      } else if (type === 'component') {
-        this.config.page.forEach(page => {
-          page.body.forEach(row => {
-            row.forEach(item => {
-              if (item.id === id) {
-                this.mainPageMenu[0] = page.id
-                this.activeMainPage = page.id
-                this.activeMainPageType = page.type
-                this.$forceUpdate()
-              }
-            })
-          })
-        })
-        // 将组件选中
-        const target = lowcodeUtils.getComponentConfig(id, this.config)
-        this.clickComponentInEditor(target)
-      }
-    },
-    // 架构树拖拽事件
-    handleTreeDrag (dragKey, dropKey, dropLevel, dropPosition) {
-      let dragElement
-      // 如果被拖拽的id小于等于5位则为行
-      if (dragKey.length <= 5) {
-        const targetPageId = dragKey.split('_')[0]
-        const targetRowId = dragKey.split('_')[1] - 1
-        for (let i = 0; i < this.config.page.length; i++) {
-          const page = this.config.page[i]
-          if (page.id === targetPageId) {
-            dragElement = page.body[targetRowId]
-          }
-        }
-        this.deleteRow(dragKey)
-      } else {
-        // 组件的拖拽
-        dragElement = JSON.parse(JSON.stringify(lowcodeUtils.getComponentConfig(dragKey, this.config)))
-        this.deleteComponent(dragKey, false)
-      }
-
-      // position有三种状态，-1表示在目标前，0表示插入，1表示在目标之后
-      if (dropPosition === 0) {
-        const target = lowcodeUtils.getComponentConfig(dropKey, this.config)
-        target.unshift(dragElement)
-        this.refreshOrganization()
-        this.$forceUpdate()
-      } else {
-        // 如果目标是一行
-        if (dropLevel === 'row') {
-          const targetPageId = dropKey.split('_')[0]
-          const targetRowId = dropKey.split('_')[1] - 1
-          for (let i = 0; i < this.config.page.length; i++) {
-            const page = this.config.page[i]
-            if (page.id === targetPageId) {
-              if (dropPosition > 0) {
-                page.body.splice(targetRowId + 1, 0, dragElement)
-              } else {
-                page.body.splice(targetRowId, 0, dragElement)
-              }
-              this.refreshOrganization()
-              this.$forceUpdate()
-              return
-            }
-          }
-          // 如果目标是组件
-        } else if (dropLevel === 'item') {
-          for (let i = 0; i < this.config.page.length; i++) {
-            const page = this.config.page[i]
-            for (let j = 0; j < page.body.length; j++) {
-              const row = page.body[j]
-              for (let k = 0; k < row.length; k++) {
-                const item = row[k]
-                if (item.id === dropKey) {
-                  if (dropPosition > 0) {
-                    row.splice(k + 1, 0, dragElement)
-                  } else {
-                    row.splice(k, 0, dragElement)
-                  }
-                  this.refreshOrganization()
-                  this.$forceUpdate()
-                  return
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    // 主页面标签切换
-    handleMainPageMenuChange (value) {
-      this.activeMainPage = value.key
-      for (let i = 0; i < this.config.page.length; i++) {
-        if (this.config.page[i].id === this.activeMainPage) {
-          this.activeMainPageType = this.config.page[i].type
-          return
-        }
-      }
-    },
-    // 将页面标签类型渲染为对应的文字
-    determinePageType (type) {
-      return lowcodeUtils.resolvePageType(type)
-    },
-    // 架构添加组件后，将配置添加到config中
-    handleAddComponent (config) {
-      this.config.page.push(config)
-      this.refreshOrganization()
-    },
-    // 打开logic回调编辑弹框
-    openLogicCallbackEditor () {
-      if (!this.eventEditorContent.logicCallBackFunction) {
-        this.eventEditorContent.logicCallBackFunction = LogicCallBackFunctionTemplate
-      }
-      this.showLogicCallBackEditor = true
-    },
-    // 打开logic参数JS编辑器弹框
-    openLogicParamJSEditor () {
-      if (!this.eventEditorContent.logicParamJSFunction) {
-        this.eventEditorContent.logicParamJSFunction = LogicParamFunctionTemplate
-      }
-      this.showLogicParamJSEditor = true
-    },
-    // 刷新架构
-    refreshOrganization () {
-      this.showPageOrganization = false
-      this.$nextTick(() => {
-        this.showPageOrganization = true
-      })
-    },
-    // 拖拽完成后，将新的span赋值
-    handleDrag (targetEle, nextEle) {
-      const target = lowcodeUtils.getComponentConfig(targetEle.id, this.config.page)
-      const targetNext = lowcodeUtils.getComponentConfig(nextEle.id, this.config.page)
-      target.span = targetEle.span
-      targetNext.span = nextEle.span
-    },
-    // 删除组件
-    deleteComponentInTree (id, type) {
-      if (type === 'page') {
-        this.deletePage(id)
-      } else if (type === 'component') {
-        this.deleteComponent(id)
-      } else if (type === 'row') {
-        this.deleteRow(id)
-      }
-    },
-    // 删除行
-    deleteRow (id) {
-      const arr = id.split('_')
-      for (let i = 0; i < this.config.page.length; i++) {
-        const page = this.config.page[i]
-        if (page.id === arr[0]) {
-          page.body.splice(arr[1] - 1, 1)
-          this.targetContainer = undefined
-          this.editorPropertiesConfig = {}
-          this.refreshOrganization()
-        }
-      }
-    },
-    // 删除页面容器
-    deletePage (id) {
-      for (let i = 0; i < this.config.page.length; i++) {
-        const page = this.config.page[i]
-        if (page.id === id) {
-          // 将该容器中所有已注册的组件全部删除
-          page.body.forEach(item => {
-            delete this.$children[0]._provided.componentsMap[item.id]
-          })
-          this.targetContainer = undefined
-          this.editorPropertiesConfig = {}
-          this.refreshOrganization()
-          this.config.page.splice(i, 1)
-          return
-        }
-      }
-    },
-    // 删除组件
-    deleteComponent (id, addOnSpan = true) {
-      this.config.page.forEach(page => {
-        for (let i = 0; i < page.body.length; i++) {
-          const row = page.body[i]
-          for (let j = 0; j < row.length; j++) {
-            const item = row[j]
-            if (item.id === id) {
-              // 记录被删除的组件span
-              const deletedSpan = item.span
-              // 删除
-              row.splice(j, 1)
-              if (addOnSpan) {
-                // 如果该组件之前还有组件，将该组件的span加给之前的组件
-                if (j !== 0) {
-                  row[j - 1].span += deletedSpan
-                } else if (row.length > 0) {
-                  row[0].span += deletedSpan
-                }
-              }
-              // 从注册的全局Map中删除
-              delete this.$children[0]._provided.componentsMap[this.editorPropertiesConfig.id]
-              this.targetContainer = undefined
-              this.editorPropertiesConfig = {}
-              this.refreshOrganization()
-              return
-            }
-          }
-        }
-      })
-    },
-    // 打开JS函数编辑器
-    openEventJSEditor () {
-      if (!this.eventEditorContent.JSFunction) {
-        this.eventEditorContent.JSFunction = JSEventFunctionTemplate
-      }
-      this.showJSEventEditor = true
-    },
-    // 事件编辑器中，点击编辑按钮
-    editEventIconClick (eventType, eventIndex) {
-      // 找到目标配置
-      const targetConfig = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
-      // 将目标对应的配置赋值到事件编辑器缓存
-      this.eventEditorContent = { ...targetConfig.onEvent[eventType][eventIndex] }
-      this.eventEditorContent.emitType = eventType
-      this.eventEditorCurrent = {
-        type: eventType,
-        index: eventIndex
-      }
-      this.showEventEditor = true
-    },
-    // 删除事件
-    removeEventClick (eventType, eventIndex) {
-      const targetConfig = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
-      targetConfig.onEvent[eventType].splice(eventIndex, 1)
-      if (targetConfig.onEvent[eventType].length === 0) {
-        delete targetConfig.onEvent[eventType]
-      }
-      this.$forceUpdate()
-    },
-    // 添加事件
-    addEvent () {
-      this.showEventEditor = true
-    },
-    // 获取所有注册组件
-    getAllRenderedComponents () {
-      return Object.keys(this.$children[0]._provided.componentsMap)
-    },
-    // 容器删除
-    handleContainerDelete (id) {
-      let target
-      let pageIndex
-      // 找到目标page
-      for (let i = 0; i < this.config.page.length; i++) {
-        const tempPage = this.config.page[i].body
-        for (let j = 0; j < tempPage.length; j++) {
-          const row = tempPage[j]
-          for (let k = 0; k < row.length; k++) {
-            const item = row[k]
-            if (item.id === id) {
-              target = this.config.page[i]
-              // eslint-disable-next-line no-unused-vars
-              pageIndex = i
-            }
-          }
-        }
-      }
-      // 找到该page下对应的item
-      let targetIndex
-      let rowIndex
-      for (let i = 0; i < target.body.length; i++) {
-        const row = target.body[i]
-        for (let j = 0; j < row.length; j++) {
-          const item = row[j]
-          if (item.id === id) {
-            targetIndex = j
-            rowIndex = i
-            break
-          }
-        }
-      }
-      target.body[rowIndex].splice(targetIndex, 1)
-      this.targetContainer = undefined
-      // 如果删除后只剩一个容器，将该容器span设置为24
-      if (target.body[rowIndex].length === 1) {
-        target.body[rowIndex][0].span = 24
-      }
-      this.refreshOrganization()
-    },
-    // 事件编辑器点击完成
-    handleEventEditorOk () {
-      let emitTypeKey = this.eventEditorContent.emitType
-      // 是否是自定义事件触发
-      if (this.eventEditorContent.customEmitType) {
-        emitTypeKey = this.eventEditorContent.customEmitType
-      }
-      // 如果当前是回显事件
-      if (this.eventEditorCurrent) {
-        const targetConfig = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
-        targetConfig.onEvent[this.eventEditorCurrent.type][this.eventEditorCurrent.index] = { ...this.eventEditorContent }
-      } else {
-        // 当前是新增事件
-        const target = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
-        // 如果没有onEvent属性则初始化
-        if (!target.onEvent) {
-          target.onEvent = {}
-        }
-        // 如果当前触发类型没有初始化，则初始化
-        if (!target.onEvent[emitTypeKey]) {
-          target.onEvent[emitTypeKey] = []
-        }
-        // 将缓存的事件属性赋值
-        target.onEvent[emitTypeKey].push({
-          ...this.eventEditorContent
-        })
-      }
-      this.showEventEditor = false
-      this.eventEditorContent = {}
-      this.eventEditorCurrent = undefined
-    },
-    // 关闭事件编辑器弹框
-    handleEventEditorCancel () {
-      this.showEventEditor = false
-      this.eventEditorContent = {}
-      this.eventEditorCurrent = undefined
-    },
-    // 事件编辑器中，触发类型改变
-    handleEventEditorTypeChange (type) {
-      this.eventEditorContent.emitType = type
-      this.$forceUpdate()
-    },
-    // 事件编辑器中，目标组件改变
-    handleEventEditorTargetChange (target) {
-      this.eventEditorContent.target = target
-      this.$forceUpdate()
-    },
-    // 事件编辑器中，事件类型改变
-    handleEventEditorEventTypeChange (type) {
-      this.eventEditorContent.eventType = type
-      this.logicParamTransferDataSource = []
-      // 如果事件为运行Logic将组件加入穿梭框
-      if (type === 'runLogic') {
-        this.config.page.forEach(page => {
-          page.body.forEach(row => {
-            row.forEach(item => {
-              if (!item.id.startsWith('container')) {
-                this.logicParamTransferDataSource.push({
-                  key: item.id,
-                  title: item.id
-                })
-              }
-            })
-          })
-        })
-        this.eventEditorContent.logicParamTransfer = []
-      }
-      this.$forceUpdate()
-    },
-    // 事件编辑器中，目标组件执行事件类型改变
-    handleEventEditorTargetEventTypeChange (type) {
-      this.eventEditorContent.eventName = type
-      this.$forceUpdate()
-    },
-    // 自定义JS方法弹框确认
-    handleJSEventEditorOk () {
-      this.showJSEventEditor = false
-    },
-    // 自定义JS方法弹框关闭
-    handleJSEventEditorCancel () {
-      this.showJSEventEditor = false
-    },
-    // 添加组件到容器中
-    addComponentToContainer (type) {
-      // 如果没有选中容器
-      if (!this.targetContainer) {
-        // 并且配置中没有任何其他组件，则认为是单组件页面，直接将组件添加到页面
-        if (this.config.page.length === 0) {
-          this.config.page.push({
-            id: nanoid(2),
-            type: 'page',
-            body: [
-              {
-                span: 24,
-                type: type,
-                id: type + '_' + nanoid(6),
-              }
-            ]
-          })
-          this.refreshOrganization()
-        } else {
-          this.$message.error('如需多个组件请先添加组件容器！')
-        }
-        this.targetContainer = undefined
-        return
-      }
-      // 获取选中的容器
-      const target = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config.page)
-      // 将容器的类型和id改变
-      target.type = type
-      target.id = target.type + '_' + nanoid(6)
-      this.targetContainer = undefined
-      this.refreshOrganization()
-    },
-    // 添加容器
-    addContainer () {
-      // 如果目标不是一个容器
-      if (!this.targetContainer) {
-        // 如果没有指定页面容器，则直接报错
-        if (this.activeMainPage === undefined) {
-          this.$message.error('未选中任何工作空间！')
-          return
-        }
-        // 获取当前选中的页面容器
-        let targetIndex = this.activeMainPage
-        for (let i = 0; i < this.config.page.length; i++) {
-          if (this.config.page[i].id === this.activeMainPage) {
-            targetIndex = i
-            break
-          }
-        }
-        // 如果是page类型，添加两个容器。其他类型添加一个容器
-        if (this.config.page[targetIndex].type === 'page') {
-          this.config.page[targetIndex].body.push([
-            {
-              type: 'container',
-              span: 12,
-              id: 'container_' + nanoid(6)
-            },
-            {
-              type: 'container',
-              span: 12,
-              id: 'container_' + nanoid(6)
-            }
-          ])
-        } else {
-          this.config.page[targetIndex].body.push([{
-            type: 'container',
-            span: 24,
-            id: 'container_' + nanoid(6)
-          }])
-        }
-      } else {
-        // 如果目标是容器
-        let targetIndex = -1
-        let maxWidth = -1
-        let targetPageIndex = -1
-        let targetRowIndex = -1
-        // 获取目标的配置
-        for (let i = 0; i < this.config.page.length; i++) {
-          const page = this.config.page[i]
-          for (let j = 0; j < page.body.length; j++) {
-            const row = page.body[j]
-            for (let k = 0; k < row.length; k++) {
-              const item = row[k]
-              if (item.id === this.targetContainer.id) {
-                targetIndex = k
-                maxWidth = item.span
-                targetPageIndex = i
-                targetRowIndex = j
-              }
-            }
-          }
-        }
-        // 将目标容器一分为二
-        this.config.page[targetPageIndex].body[targetRowIndex].splice(targetIndex, 1, {
-          type: 'container',
-          span: Math.floor(maxWidth / 2),
-          id: 'container_' + nanoid(6)
-        }, {
-          type: 'container',
-          span: Math.ceil(maxWidth / 2),
-          id: 'container_' + nanoid(6)
-        })
-        this.targetContainer = undefined
-      }
-      this.refreshOrganization()
-    },
-    // 获取所有已注册组件，用于添加至UI库
-    getRegisteredComponents () {
-      return Object.keys(registeredRender)
-    },
-    // 组件属性编辑
-    editorPropertiesInputChange (event, key) {
-      this.renderPreview = false
-      this.renderModalPreview = false
-      this.renderDrawPreview = false
-      // 如果当前有定时器，清除该定时器，并设置新的定时器
-      // 也就是说：每次操作间隔指定时间后才会触发更新
-      // 如果在此期间又进行了操作，则重新开始计时
-      if (this.inputTimeout) {
-        clearTimeout(this.inputTimeout)
-      }
-      this.inputTimeout = setTimeout(() => {
-        const target = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
-        lowcodeLog('组件属性修改', '触发更新', target.id, true, false)
-        // 拿到组件注册的配置
-        const editorConfig = lowcodeUtils.getEditorConfigById(this.editorPropertiesConfig.id, this.config.page)
-        // 根据类型，将input框中的内容赋值
-        if (editorConfig.properties[key].type === 'object') {
-          target.props[key] = JSON.parse(event.target.value)
-        } else if (editorConfig.properties[key].type === 'string') {
-          target.props[key] = event.target.value
-        } else if (editorConfig.properties[key].type === 'boolean') {
-          const input = event.target.value.toLowerCase()
-          if (input === 'true' || input !== '0') {
-            target.props[key] = true
-          } else {
-            target.props[key] = false
-          }
-        }
-        this.renderPreview = true
-        this.renderModalPreview = true
-        this.renderDrawPreview = true
-      }, 1500)
-    },
-    // 切换预览模式
-    previewModeActive () {
-      this.preview = true
-    },
-    // 切换编辑模式
-    editModeActive () {
-      this.preview = false
-    },
-    // 选中某个组件
-    clickComponentInEditor (configItem) {
-      this.editorPropertiesConfig = {}
-      // 如果选中的是容器
-      if (configItem.type === 'container') {
-        // 如果已经选中，则反选，selected属性用于改变容器样式
-        if (configItem.selected) {
-          configItem.selected = false
-          this.targetContainer = undefined
-        } else {
-          // 将所有已选中组件取消选择
-          this.config.page.forEach(page => {
-            page.body.forEach(row => {
-              row.forEach(item => {
-                item.selected = false
-              })
-            })
-          })
-          // 将目标设置为选定
-          configItem.selected = true
-          this.targetContainer = configItem
-        }
-        return
-      }
-      // 如果是组件对象
-      // 拿注册的配置
-      const configInJson = lowcodeUtils.getEditorConfigByType(configItem.type)
-      if (configInJson) {
-        this.editorPropertiesConfig = configItem
-        // 为编辑器变量初始化
-        if (configInJson.properties) {
-          if (!this.editorPropertiesConfig.props) {
-            this.editorPropertiesConfig.props = {}
-          }
-          const editableKeys = Object.keys(configInJson.properties)
-          editableKeys.forEach(editableKey => {
-            // 如果该值并不存在，则初始化
-            if (!this.editorPropertiesConfig.props[editableKey]) {
-              this.editorPropertiesConfig.props[editableKey] = ''
-            } else {
-              if (typeof this.editorPropertiesConfig.props[editableKey] === 'object') {
-                this.editorPropertiesConfig.props[editableKey] = JSON.stringify(this.editorPropertiesConfig.props[editableKey])
-              }
-            }
-          })
-        }
-        // 为编辑器事件初始化
-        if (configInJson.selfEvent) {
-          if (!this.editorPropertiesConfig.selfEvent) {
-            this.editorPropertiesConfig.selfEvent = []
-            configInJson.selfEvent.forEach(everyEvent => {
-              this.editorPropertiesConfig.selfEvent.push(everyEvent)
-            })
-          }
-        }
-      } else {
-        this.editorPropertiesConfig = 'unregistered'
-      }
-    },
-    // 点击测试按钮
-    test () {
-      // 输出当前配置，和组件注册Map
-      console.warn('config', this.config)
-      console.warn('map', this.$children[0]._provided.componentsMap)
-    },
-    // 点击导出按钮
-    exportConfig () {
-      console.warn('导出', this.config)
-      this.$emit('exportConfig', this.config)
-    }
-  },
-  mounted () {
-    // 将mixin中已经实现的通用响应方法添加
-    this.supportedEventType = [...lowcodeComponentMixin.supportedEventType]
-    // 深拷贝外侧传来的配置
-    this.config = JSON.parse(JSON.stringify(this.originalConfig))
-    this.config = {
-      page: [
-        {
-          id: 'KB',
-          type: 'page',
-          title: '111',
-          body: [
-            [
-              {
-                type: 'XFormTable',
-                span: 12,
-                id: 'XFormTable_BV6Nwk',
-                selected: false,
-                props: {
-                  queryParamsName: '',
-                  serviceName: ''
-                },
-                selfEvent: [
-                  'action'
-                ]
-              },
-              {
-                type: 'XAddNativeForm',
-                span: 12,
-                id: 'XAddNativeForm_ekihTp',
-                selected: false,
-                props: {
-                  configNameForLowCode: '',
-                  systemNameForLowCode: ''
-                },
-                selfEvent: [
-                  'onSubmit'
-                ]
-              }
-            ],
-            [
-              {
-                type: 'XTreeOne',
-                span: 12,
-                id: 'XTreeOne_szu7Al',
-                selected: false
-              },
-              {
-                type: 'XDescriptions',
-                span: 12,
-                id: 'XDescriptions_DTkbEg',
-                selected: false,
-                props: {
-                  title: '111',
-                  content: {
-                    c_f_user_phone: '2323',
-                    c_f_total_fee: 33356,
-                    c_f_address: '22',
-                    c_f_meterlen: 2,
-                    c_f_bank_card_number: '23',
-                    c_f_create_user: '超级管理员',
-                    c_f_customer: '23',
-                    c_f_balance: 33356,
-                    c_f_create_date: '2024-06-23 21:31:24',
-                    c_f_operator_date: '2024-06-23 21:31:24',
-                    c_f_total_times: 2,
-                    c_f_user_name: '23',
-                    c_f_comments: '323',
-                    c_id: 39,
-                    c_f_operatorid: '15',
-                    c_f_operator: '超级管理员',
-                    c_f_orgid: '9'
-                  },
-                  configName: 'Unit_Desc_Config',
-                  serviceName: 'af-revenue',
-                  getRealData: true
-                },
-                selfEvent: []
-              }
-            ]
-          ]
-        },
-        {
-          id: 'Fg',
-          type: 'page',
-          title: '22',
-          body: [
-            [
-              {
-                type: 'container',
-                span: 4,
-                id: 'container_ir2gR2',
-                selected: false
-              },
-              {
-                type: 'container',
-                span: 10,
-                id: 'container_xIRHGg'
-              },
-              {
-                type: 'container',
-                span: 10,
-                id: 'container_PT9n3Q'
-              }
-            ],
-            [
-              {
-                type: 'container',
-                span: 18,
-                id: 'container_q04vQr',
-                selected: false
-              },
-              {
-                type: 'container',
-                span: 6,
-                id: 'container_MKwNvz',
-                selected: false
-              }
-            ]
-          ]
-        }
-      ]
-    }
-    this.refreshOrganization()
-  }
-}
-</script>
-
-<style scoped lang="less">
-.ui-item:hover {
-  cursor: pointer;
-}
-
-.ui-item{
-  width: 100%;
-  height:10%;
-  text-align: center;
-  overflow-wrap: break-word;
-  padding: 7%
-}
-
-.singleEvent {
-  border: black dashed 1px;
-  padding: 10%;
-}
-
-.edit_icon:hover {
-  cursor: pointer;
-}
-</style>
+<template>
+  <div>
+    <!--  标题  -->
+    <a-card>
+      <a-page-header
+        title="奥枫低代码前端编辑器"
+        sub-title="af-lowcode"
+        :backIcon="false"
+        @back="() => null"
+      >
+        <template slot="extra">
+          <a-button @click="test">测试</a-button>
+          <a-button @click="editModeActive">编辑</a-button>
+          <a-button @click="previewModeActive">预览</a-button>
+          <a-button type="primary" @click="exportConfig">导出</a-button>
+        </template>
+      </a-page-header>
+    </a-card>
+    <!--  预览模式  -->
+    <a-card v-if="preview">
+      <editor-page-render :page-config="config" :edit-mode="false"/>
+    </a-card>
+    <!--  编辑模式  -->
+    <div v-show="!preview">
+      <a-row :gutter="2">
+        <!--    左侧    -->
+        <a-col :span="4">
+          <!--    UI库    -->
+          <a-card style="margin-bottom: 5%">
+            <a-page-header
+              title="UI库"
+              sub-title="在此选择基础组件"
+              :backIcon="false"
+              @back="() => null"
+            />
+            <!--     所有组件       -->
+            <a-card-grid class="ui-item" @click="addContainer">
+              组件容器
+            </a-card-grid>
+            <template v-for="(item, index) in getRegisteredComponents()">
+              <a-card-grid :key="index" class="ui-item" @click="addComponentToContainer(item)">
+                {{ item }}
+              </a-card-grid>
+            </template>
+          </a-card>
+        </a-col>
+        <!--    中间主体编辑器    -->
+        <a-col :span="15">
+          <a-card>
+            <!--       切换显示的组件       -->
+            <div style="margin-bottom: 3%">
+              <a-menu v-model="mainPageMenu" mode="horizontal" @click="handleMainPageMenuChange">
+                <template v-for="(page) in config.page">
+                  <a-menu-item :key="page.id">{{ page.title + '(' + determinePageType(page.type) + ')' }}</a-menu-item>
+                </template>
+              </a-menu>
+            </div>
+            <!--      渲染器      -->
+            <div v-if="activeMainPageType === 'page'">
+              <editor-page-render
+                v-if="renderPreview"
+                @spanDrag="handleDrag"
+                @containerDelete="handleContainerDelete"
+                @clickComponentInEditor="clickComponentInEditor"
+                :page-config="{ data: config.data, page: config.page.filter(page => page.id === activeMainPage)}"/>
+              <a-skeleton v-else/>
+            </div>
+            <div v-if="activeMainPageType === 'modal'">
+              <editor-page-render
+                v-if="renderModalPreview"
+                @spanDrag="handleDrag"
+                @containerDelete="handleContainerDelete"
+                @clickComponentInEditor="clickComponentInEditor"
+                :page-config="{ data: config.data, page: config.page.filter(page => page.id === activeMainPage)}"/>
+              <a-skeleton v-else/>
+            </div>
+            <div v-if="activeMainPageType === 'draw'">
+              <editor-page-render
+                v-if="renderDrawPreview"
+                @spanDrag="handleDrag"
+                @containerDelete="handleContainerDelete"
+                @clickComponentInEditor="clickComponentInEditor"
+                :page-config="{ data: config.data, page: config.page.filter(page => page.id === activeMainPage)}"/>
+              <a-skeleton v-else/>
+            </div>
+          </a-card>
+        </a-col>
+        <!--    右侧    -->
+        <a-col :span="5">
+          <!--    页面架构    -->
+          <a-card style="margin-bottom: 3%">
+            <a-page-header
+              title="架构"
+              sub-title="页面的组织架构"
+              :backIcon="false"
+              @back="() => null"
+            />
+            <LowCodePageOrganization
+              :config="config"
+              v-if="showPageOrganization"
+              @pasteItem="handlePasteItem"
+              @componentMove="handleTreeDrag"
+              @deleteComponent="deleteComponentInTree"
+              @treeOrganizationClick="treeOrganizationClick"
+              @addComponent="handleAddComponent"/>
+          </a-card>
+          <!--    属性编辑      -->
+          <a-card>
+            <template v-if="editorPropertiesConfig === 'unregistered'">
+              <p>所选组件并未注册</p>
+            </template>
+            <template v-else>
+              <!--    组件ID    -->
+              <div v-if="editorPropertiesConfig.id">
+                <a-statistic title="组件ID" :value="editorPropertiesConfig.id" valueStyle="font-size: 1.2em"/>
+              </div>
+              <!--    切换    -->
+              <a-menu v-model="editorPanelCurrent" mode="horizontal" @click="() => null">
+                <a-menu-item key="properties">属性</a-menu-item>
+                <a-menu-item key="events">事件</a-menu-item>
+              </a-menu>
+              <!--    属性编辑    -->
+              <div v-if="editorPanelCurrent[0] === 'properties'">
+                <div v-if="editorPropertiesConfig.props !== undefined">
+                  <div>
+                    栅格数:<a-input :default-value="editorPropertiesConfig.span" @change="changeSpan"/>
+                  </div>
+                  <template v-for="(value,key) in editorPropertiesConfig.props">
+                    <div :key="editorPropertiesConfig.id + '_' + key">
+                      {{ key }}:<a-input :default-value="value" @change="editorPropertiesInputChange($event, key)"/>
+                    </div>
+                  </template>
+                </div>
+                <p v-else>您未选择任何组件</p>
+              </div>
+              <!--    事件编辑    -->
+              <div v-else-if="editorPanelCurrent[0] === 'events'">
+                <template v-if="editorPropertiesConfig.onEvent !== undefined">
+                  <a-collapse v-model="eventCollapseActive">
+                    <a-collapse-panel
+                      v-for="(eventConfig,eventType) in editorPropertiesConfig.onEvent"
+                      :key="eventType"
+                      :header="eventType">
+                      <div v-for="(singleEvent,singleEventIndex) in eventConfig" :key="singleEventIndex" class="singleEvent">
+                        <p>
+                          <span style="color:rgb( 24,144,255)">{{ singleEvent.eventType }}</span>
+                          事件
+                        </p>
+                        <!--    事件 编辑/删除 按钮    -->
+                        <div style="display: flex; justify-content: space-evenly">
+                          <a-icon type="edit" theme="twoTone" class="edit_icon" @click="editEventIconClick(eventType,singleEventIndex)"/>
+                          <a-popconfirm title="确认删除" ok-text="确认删除" cancel-text="取消" @confirm="removeEventClick(eventType,singleEventIndex)" @cancel="() => null">
+                            <a-icon type="delete" theme="twoTone" class="edit_icon"/>
+                          </a-popconfirm>
+                        </div>
+                      </div>
+                    </a-collapse-panel>
+                  </a-collapse>
+                </template>
+                <a-button v-if="editorPropertiesConfig.id !== undefined" @click="addEvent">添加事件</a-button>
+                <p v-else>您未选择任何组件</p>
+              </div>
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+    <!--  自定义事件弹框  -->
+    <a-modal
+      title="事件编辑器"
+      width="60%"
+      :z-index="1001"
+      :destroyOnClose="true"
+      @ok="handleEventEditorOk"
+      @cancel="handleEventEditorCancel"
+      v-if="showEventEditor"
+      :visible="showEventEditor">
+      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
+        <!--    事件触发类型    -->
+        <a-form-item label="事件触发类型">
+          <a-select @change="handleEventEditorTypeChange" :default-value="eventEditorContent.emitType">
+            <a-select-option
+              v-for="(eventType, eventTypeIndex) in editorPropertiesConfig.selfEvent"
+              :key="eventTypeIndex"
+              :value="eventType">
+              {{ eventType }}
+            </a-select-option>
+            <a-select-option value="customEmitType">
+              自定义触发类型
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--    自定义事件触发类型    -->
+        <a-form-item label="自定义事件触发名" v-if="eventEditorContent.emitType === 'customEmitType'">
+          <a-input v-model="eventEditorContent.customEmitType"/>
+        </a-form-item>
+        <!--    事件类型    -->
+        <a-form-item label="事件类型">
+          <a-select @change="handleEventEditorEventTypeChange" :default-value="eventEditorContent.eventType">
+            <a-select-option value="changeValue">
+              修改组件的值
+            </a-select-option>
+            <a-select-option value="changeProps">
+              修改组件的Props
+            </a-select-option>
+            <a-select-option value="runLogic">
+              执行Logic
+            </a-select-option>
+            <a-select-option value="log">
+              打印日志
+            </a-select-option>
+            <a-select-option value="showModal" v-if="this.config.page.filter(page => page.type === 'modal').length > 0">
+              修改弹框可见
+            </a-select-option>
+            <a-select-option value="showDraw" v-if="this.config.page.filter(page => page.type === 'draw').length > 0">
+              修改抽屉可见
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--    修改弹框可见 or 修改抽屉可见    -->
+        <a-form-item label="修改可见" v-if="eventEditorContent.eventType === 'showModal' || eventEditorContent.eventType === 'showDraw'">
+          <a-radio-group v-model="eventEditorContent.visible" button-style="solid">
+            <a-radio-button value="open">
+              显示
+            </a-radio-button>
+            <a-radio-button value="close">
+              隐藏
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!--    弹框容器ID    -->
+        <a-form-item label="弹框容器ID" v-if="eventEditorContent.eventType === 'showModal'">
+          <a-select v-model="eventEditorContent.containerId">
+            <a-select-option
+              v-for="(modal) in config.page.filter(page => page.type === 'modal')"
+              :key="modal.id"
+              :value="modal.id">
+              弹框_{{ modal.id }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--    抽屉容器ID    -->
+        <a-form-item label="弹框容器ID" v-if="eventEditorContent.eventType === 'showDraw'">
+          <a-select v-model="eventEditorContent.containerId">
+            <a-select-option
+              v-for="(draw) in config.page.filter(page => page.type === 'draw')"
+              :key="draw.id"
+              :value="draw.id">
+              抽屉_{{ draw.id }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--    Logic名    -->
+        <a-form-item label="Logic名" v-if="eventEditorContent.eventType === 'runLogic'">
+          <a-input v-model="eventEditorContent.logicName"/>
+        </a-form-item>
+        <!--    服务名    -->
+        <a-form-item label="服务名" v-if="eventEditorContent.eventType === 'runLogic'">
+          <a-input v-model="eventEditorContent.serviceName"/>
+        </a-form-item>
+        <!--    自定义Logic参数，由哪些组件传递    -->
+        <a-form-item label="Logic参数取值组件" v-if="eventEditorContent.eventType === 'runLogic'">
+          <a-transfer
+            :data-source="logicParamTransferDataSource"
+            :render="item => item.title"
+            :target-keys="eventEditorContent.logicParamTransfer"
+            @change="handleLogicParamTransferChange"/>
+        </a-form-item>
+        <!--    自定义Logic参数    -->
+        <a-form-item label="自定义Logic参数" v-if="eventEditorContent.eventType === 'runLogic'">
+          <a-button type="primary" @click="openLogicParamJSEditor">
+            打开编辑器
+          </a-button>
+        </a-form-item>
+        <!--    自定义Logic回调    -->
+        <a-form-item label="自定义Logic回调" v-if="eventEditorContent.eventType === 'runLogic'" >
+          <a-button type="primary" @click="openLogicCallbackEditor">
+            打开编辑器
+          </a-button>
+        </a-form-item>
+        <!--    修改组件的值 才会显示的其余参数    -->
+        <template v-if="eventEditorContent.eventType === 'changeValue' || eventEditorContent.eventType === 'changeProps'">
+          <!--    目标组件    -->
+          <a-form-item label="目标组件">
+            <a-select @change="handleEventEditorTargetChange" :default-value="eventEditorContent.target">
+              <a-select-option
+                v-for="(targetId, targetIndex) in getAllRenderedComponents()"
+                :key="targetIndex"
+                :value="targetId">
+                {{ targetId }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!--    目标组件执行事件名    -->
+          <a-form-item label="目标组件执行事件名" v-if="eventEditorContent.eventName === 'changeValue'">
+            <a-select @change="handleEventEditorTargetEventTypeChange" :default-value="eventEditorContent.eventName">
+              <a-select-option :value="eventType" v-for="(eventType,eventTypeIndex) in supportedEventType" :key="'eventType_' + eventTypeIndex">
+                {{ eventType }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!--    目标组件修改值对应的key    -->
+          <a-form-item label="目标组件修改值对应的key" v-if="eventEditorContent.target !== undefined">
+            <a-input v-model="eventEditorContent.targetKey"/>
+          </a-form-item>
+        </template>
+        <!--    自定义JS方法    -->
+        <a-form-item label="自定义JS方法">
+          <a-button type="primary" @click="openEventJSEditor">打开编辑器</a-button>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <!--  自定义JS事件弹框  -->
+    <a-modal
+      title="事件编辑器"
+      width="60%"
+      :destroyOnClose="true"
+      :z-index="1002"
+      @ok="handleJSEventEditorOk"
+      @cancel="handleJSEventEditorCancel"
+      :visible="showJSEventEditor">
+      <a-popover title="参数说明" style="margin-right: 5%">
+        <template slot="content">
+          <p>该方法有以下几个参数：</p>
+          <p>eventType：事件类型，比如：changeValue代表修改目标组件的值</p>
+          <p>data：由事件源发出的参数列表</p>
+          <p>targetKey：修改目标组件值所对应的key</p>
+          <p>sourceVM：事件源的vue对象</p>
+          <p>targetVM：目标的vue对象</p>
+        </template>
+        <a-button type="primary">
+          参数说明
+        </a-button>
+      </a-popover>
+      <a-popover title="返回值说明" style="margin-bottom: 5%">
+        <template slot="content">
+          <p>该方法需要的返回值：</p>
+          <p>eventType：事件类型</p>
+          <p>data：传递给目标组件的数据</p>
+          <p>targetKey：修改目标组件值所对应的key</p>
+        </template>
+        <a-button type="primary">
+          返回值说明
+        </a-button>
+      </a-popover>
+      <code-mirror
+        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
+        :mode="'javascript'"
+        :theme="'monokai'"
+        v-model="eventEditorContent.JSFunction"
+        :value="eventEditorContent.JSFunction"/>
+    </a-modal>
+    <!--  自定义Logic参数JS弹框  -->
+    <a-modal
+      title="自定义Logic参数JS编辑器"
+      width="60%"
+      :destroyOnClose="true"
+      :z-index="1002"
+      @ok="() => { showLogicParamJSEditor = false}"
+      @cancel="() => { showLogicParamJSEditor = false}"
+      :visible="showLogicParamJSEditor">
+      <a-popover title="参数说明" style="margin-right: 5%">
+        <template slot="content">
+          <p>该方法有以下几个参数：</p>
+          <p>componentData：Logic参数取值组件中选中的组件，将会把数据打包存在此对象中，key则为组件的id</p>
+          <p>data：由事件源emit发出的参数</p>
+        </template>
+        <a-button type="primary">
+          参数说明
+        </a-button>
+      </a-popover>
+      <a-popover title="返回值说明" style="margin-bottom: 5%">
+        <template slot="content">
+          <p>该方法需要一个JSON类型的返回值</p>
+          <p>该返回值就是传递给Logic执行的参数</p>
+        </template>
+        <a-button type="primary">
+          返回值说明
+        </a-button>
+      </a-popover>
+      <code-mirror
+        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
+        :mode="'javascript'"
+        :theme="'monokai'"
+        v-model="eventEditorContent.logicParamJSFunction"
+        :value="eventEditorContent.logicParamJSFunction"/>
+    </a-modal>
+    <!--  自定义Logic回调弹框  -->
+    <a-modal
+      title="事件编辑器"
+      width="60%"
+      :destroyOnClose="true"
+      :z-index="1002"
+      @ok="() => { showLogicCallBackEditor = false}"
+      @cancel="() => { showLogicCallBackEditor = false}"
+      :visible="showLogicCallBackEditor">
+      <a-popover title="参数说明" style="margin-bottom: 5%">
+        <template slot="content">
+          <p>该方法有以下几个参数：</p>
+          <p>componentsMap：所有组件注册的Map</p>
+          <p>responseData：后端的返回值</p>
+        </template>
+        <a-button type="primary">
+          参数说明
+        </a-button>
+      </a-popover>
+      <code-mirror
+        :style-obj="{height:'80%',fontSize:'18px',marginBottom:'15px'}"
+        :mode="'javascript'"
+        :theme="'monokai'"
+        v-model="eventEditorContent.logicCallBackFunction"
+        :value="eventEditorContent.logicCallBackFunction"/>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import editorPageRender from '@vue2-client/base-client/components/common/LowCodePageRender/editorPageRender.vue'
+import * as registeredRender from '@vue2-client/utils/lowcode/registerComponentForRender'
+import * as lowcodeUtils from '@vue2-client/utils/lowcode/lowcodeUtils'
+import codeMirror from '@vue2-client/components/CodeMirror/inedx.vue'
+import { nanoid } from 'nanoid'
+import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
+// eslint-disable-next-line no-unused-vars
+import lowcodeLog from '@vue2-client/utils/lowcode/lowcodeLog'
+import LowCodePageOrganization from '@vue2-client/base-client/components/common/LowCodeComponent/LowCodePageOrganization.vue'
+
+// 函数编辑器显示的模板
+const JSEventFunctionTemplate = 'function(eventType, data, targetKey, sourceVM, targetVM) {\n  \n  return {\n    "eventType": eventType,\n    "data": data,\n    "targetKey": targetKey\n  }\n}'
+const LogicParamFunctionTemplate = 'function(componentData, data) {\n  \n  return {\n    \n  }\n}'
+const LogicCallBackFunctionTemplate = 'function(componentsMap, responseData) {\n  \n}'
+
+export default {
+  components: {
+    LowCodePageOrganization,
+    editorPageRender,
+    codeMirror
+  },
+  props: {
+    // 页面原始的配置，用于从琉璃中读取
+    originalConfig: {
+      type: Object,
+      default: () => {
+        return {
+          page: []
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      // 主体窗口选择的标签
+      mainPageMenu: ['none'],
+      // 默认的配置
+      config: { page: [] },
+      // 选中的容器
+      targetContainer: undefined,
+      // 控制是否渲染页面
+      preview: false,
+      // 控制架构树显隐，用于刷新组件
+      showPageOrganization: true,
+      // 用于保存右侧编辑组件的属性
+      editorPropertiesConfig: {},
+      // 编辑属性时用到的定时器
+      inputTimeout: undefined,
+      // 当前激活的是组件事件中哪一类触发属性，对应事件编辑中的手风琴面板
+      eventCollapseActive: undefined,
+      // 控制事件编辑器弹框显隐
+      showEventEditor: false,
+      // 控制自定义JS函数弹框显隐
+      showJSEventEditor: false,
+      // 控制页面显隐，用于属性面板编辑后，触发页面更新
+      renderPreview: true,
+      // 控制弹框显隐，用于属性面板编辑后，触发页面更新
+      renderModalPreview: true,
+      // 控制抽屉显隐，用于属性面板编辑后，触发页面更新
+      renderDrawPreview: true,
+      // 控制右侧编辑器切换标签页
+      editorPanelCurrent: ['properties'],
+      // 事件编辑内容的缓存
+      eventEditorContent: {},
+      // 用于事件编辑的回显，在点击事件编辑按钮后，会将此变量赋值
+      eventEditorCurrent: undefined,
+      // 保存目标组件可以触发哪些事件
+      supportedEventType: undefined,
+      // 控制自定义Logic参数自定义JS函数弹框显隐
+      showLogicParamJSEditor: false,
+      // 控制自定义Logic回调弹框显隐
+      showLogicCallBackEditor: false,
+      // 保存主体中，当前激活的标签栏ID
+      activeMainPage: undefined,
+      // 保存主体中，当前激活的标签栏类型
+      activeMainPageType: undefined,
+      // 定义Logic参数从哪些组件获取
+      logicParamTransferDataSource: []
+    }
+  },
+  provide () {
+    return {
+      // 将注册的组件传递给子组件
+      componentsMap: {}
+    }
+  },
+  methods: {
+    // 复制粘贴组件
+    handlePasteItem (id, copyCache, type) {
+      const target = lowcodeUtils.getConfig(id, this.config)
+      // 页面中插入行
+      if (type === 'page-row') {
+        const content = copyCache.content
+        const contentKeys = Object.keys(content)
+        const result = []
+        contentKeys.forEach(key => {
+          result.push(content[key])
+        })
+        target.body.push(result)
+      } else if (type === 'row-item') {
+        // 行中插入组件
+        target.push(copyCache.content)
+      } else if (type === 'page') {
+        // 复制页面
+        this.config.page.push(copyCache)
+        this.$message.success('复制成功！')
+      }
+      this.refreshOrganization()
+    },
+    // span属性通过input框修改
+    changeSpan (event) {
+      this.editorPropertiesConfig.span = event.target.value
+    },
+    // logic从组件中取值穿梭框改变事件
+    handleLogicParamTransferChange (targetKeys, direction, moveKeys) {
+      this.eventEditorContent.logicParamTransfer = targetKeys
+      this.$forceUpdate()
+    },
+    // 点击架构树
+    treeOrganizationClick (id, type) {
+      // 如果类型是page证明，选中的是最外层容器
+      if (type === 'page') {
+        this.mainPageMenu[0] = id
+        this.activeMainPage = id
+        for (let i = 0; i < this.config.page.length; i++) {
+          if (this.config.page[i].id === this.activeMainPage) {
+            this.activeMainPageType = this.config.page[i].type
+            break
+          }
+        }
+        this.$forceUpdate()
+      } else if (type === 'component') {
+        this.config.page.forEach(page => {
+          page.body.forEach(row => {
+            row.forEach(item => {
+              if (item.id === id) {
+                this.mainPageMenu[0] = page.id
+                this.activeMainPage = page.id
+                this.activeMainPageType = page.type
+                this.$forceUpdate()
+              }
+            })
+          })
+        })
+        // 将组件选中
+        const target = lowcodeUtils.getComponentConfig(id, this.config)
+        this.clickComponentInEditor(target)
+      }
+    },
+    // 架构树拖拽事件
+    handleTreeDrag (dragKey, dropKey, dropLevel, dropPosition) {
+      let dragElement
+      // 如果被拖拽的id小于等于5位则为行
+      if (dragKey.length <= 5) {
+        const targetPageId = dragKey.split('_')[0]
+        const targetRowId = dragKey.split('_')[1] - 1
+        for (let i = 0; i < this.config.page.length; i++) {
+          const page = this.config.page[i]
+          if (page.id === targetPageId) {
+            dragElement = page.body[targetRowId]
+          }
+        }
+        this.deleteRow(dragKey)
+      } else {
+        // 组件的拖拽
+        dragElement = JSON.parse(JSON.stringify(lowcodeUtils.getComponentConfig(dragKey, this.config)))
+        this.deleteComponent(dragKey, false)
+      }
+
+      // position有三种状态，-1表示在目标前，0表示插入，1表示在目标之后
+      if (dropPosition === 0) {
+        const target = lowcodeUtils.getComponentConfig(dropKey, this.config)
+        target.unshift(dragElement)
+        this.refreshOrganization()
+        this.$forceUpdate()
+      } else {
+        // 如果目标是一行
+        if (dropLevel === 'row') {
+          const targetPageId = dropKey.split('_')[0]
+          const targetRowId = dropKey.split('_')[1] - 1
+          for (let i = 0; i < this.config.page.length; i++) {
+            const page = this.config.page[i]
+            if (page.id === targetPageId) {
+              if (dropPosition > 0) {
+                page.body.splice(targetRowId + 1, 0, dragElement)
+              } else {
+                page.body.splice(targetRowId, 0, dragElement)
+              }
+              this.refreshOrganization()
+              this.$forceUpdate()
+              return
+            }
+          }
+          // 如果目标是组件
+        } else if (dropLevel === 'item') {
+          for (let i = 0; i < this.config.page.length; i++) {
+            const page = this.config.page[i]
+            for (let j = 0; j < page.body.length; j++) {
+              const row = page.body[j]
+              for (let k = 0; k < row.length; k++) {
+                const item = row[k]
+                if (item.id === dropKey) {
+                  if (dropPosition > 0) {
+                    row.splice(k + 1, 0, dragElement)
+                  } else {
+                    row.splice(k, 0, dragElement)
+                  }
+                  this.refreshOrganization()
+                  this.$forceUpdate()
+                  return
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    // 主页面标签切换
+    handleMainPageMenuChange (value) {
+      this.activeMainPage = value.key
+      for (let i = 0; i < this.config.page.length; i++) {
+        if (this.config.page[i].id === this.activeMainPage) {
+          this.activeMainPageType = this.config.page[i].type
+          return
+        }
+      }
+    },
+    // 将页面标签类型渲染为对应的文字
+    determinePageType (type) {
+      return lowcodeUtils.resolvePageType(type)
+    },
+    // 架构添加组件后，将配置添加到config中
+    handleAddComponent (config) {
+      this.config.page.push(config)
+      this.refreshOrganization()
+    },
+    // 打开logic回调编辑弹框
+    openLogicCallbackEditor () {
+      if (!this.eventEditorContent.logicCallBackFunction) {
+        this.eventEditorContent.logicCallBackFunction = LogicCallBackFunctionTemplate
+      }
+      this.showLogicCallBackEditor = true
+    },
+    // 打开logic参数JS编辑器弹框
+    openLogicParamJSEditor () {
+      if (!this.eventEditorContent.logicParamJSFunction) {
+        this.eventEditorContent.logicParamJSFunction = LogicParamFunctionTemplate
+      }
+      this.showLogicParamJSEditor = true
+    },
+    // 刷新架构
+    refreshOrganization () {
+      this.showPageOrganization = false
+      this.$nextTick(() => {
+        this.showPageOrganization = true
+      })
+    },
+    // 拖拽完成后，将新的span赋值
+    handleDrag (targetEle, nextEle) {
+      const target = lowcodeUtils.getComponentConfig(targetEle.id, this.config.page)
+      const targetNext = lowcodeUtils.getComponentConfig(nextEle.id, this.config.page)
+      target.span = targetEle.span
+      targetNext.span = nextEle.span
+    },
+    // 删除组件
+    deleteComponentInTree (id, type) {
+      if (type === 'page') {
+        this.deletePage(id)
+      } else if (type === 'component') {
+        this.deleteComponent(id)
+      } else if (type === 'row') {
+        this.deleteRow(id)
+      }
+    },
+    // 删除行
+    deleteRow (id) {
+      const arr = id.split('_')
+      for (let i = 0; i < this.config.page.length; i++) {
+        const page = this.config.page[i]
+        if (page.id === arr[0]) {
+          page.body.splice(arr[1] - 1, 1)
+          this.targetContainer = undefined
+          this.editorPropertiesConfig = {}
+          this.refreshOrganization()
+        }
+      }
+    },
+    // 删除页面容器
+    deletePage (id) {
+      for (let i = 0; i < this.config.page.length; i++) {
+        const page = this.config.page[i]
+        if (page.id === id) {
+          // 将该容器中所有已注册的组件全部删除
+          page.body.forEach(item => {
+            delete this.$children[0]._provided.componentsMap[item.id]
+          })
+          this.targetContainer = undefined
+          this.editorPropertiesConfig = {}
+          this.refreshOrganization()
+          this.config.page.splice(i, 1)
+          return
+        }
+      }
+    },
+    // 删除组件
+    deleteComponent (id, addOnSpan = true) {
+      this.config.page.forEach(page => {
+        for (let i = 0; i < page.body.length; i++) {
+          const row = page.body[i]
+          for (let j = 0; j < row.length; j++) {
+            const item = row[j]
+            if (item.id === id) {
+              // 记录被删除的组件span
+              const deletedSpan = item.span
+              // 删除
+              row.splice(j, 1)
+              if (addOnSpan) {
+                // 如果该组件之前还有组件，将该组件的span加给之前的组件
+                if (j !== 0) {
+                  row[j - 1].span += deletedSpan
+                } else if (row.length > 0) {
+                  row[0].span += deletedSpan
+                }
+              }
+              // 从注册的全局Map中删除
+              delete this.$children[0]._provided.componentsMap[this.editorPropertiesConfig.id]
+              this.targetContainer = undefined
+              this.editorPropertiesConfig = {}
+              this.refreshOrganization()
+              return
+            }
+          }
+        }
+      })
+    },
+    // 打开JS函数编辑器
+    openEventJSEditor () {
+      if (!this.eventEditorContent.JSFunction) {
+        this.eventEditorContent.JSFunction = JSEventFunctionTemplate
+      }
+      this.showJSEventEditor = true
+    },
+    // 事件编辑器中，点击编辑按钮
+    editEventIconClick (eventType, eventIndex) {
+      // 找到目标配置
+      const targetConfig = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
+      // 将目标对应的配置赋值到事件编辑器缓存
+      this.eventEditorContent = { ...targetConfig.onEvent[eventType][eventIndex] }
+      this.eventEditorContent.emitType = eventType
+      this.eventEditorCurrent = {
+        type: eventType,
+        index: eventIndex
+      }
+      this.showEventEditor = true
+    },
+    // 删除事件
+    removeEventClick (eventType, eventIndex) {
+      const targetConfig = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
+      targetConfig.onEvent[eventType].splice(eventIndex, 1)
+      if (targetConfig.onEvent[eventType].length === 0) {
+        delete targetConfig.onEvent[eventType]
+      }
+      this.$forceUpdate()
+    },
+    // 添加事件
+    addEvent () {
+      this.showEventEditor = true
+    },
+    // 获取所有注册组件
+    getAllRenderedComponents () {
+      return Object.keys(this.$children[0]._provided.componentsMap)
+    },
+    // 容器删除
+    handleContainerDelete (id) {
+      let target
+      let pageIndex
+      // 找到目标page
+      for (let i = 0; i < this.config.page.length; i++) {
+        const tempPage = this.config.page[i].body
+        for (let j = 0; j < tempPage.length; j++) {
+          const row = tempPage[j]
+          for (let k = 0; k < row.length; k++) {
+            const item = row[k]
+            if (item.id === id) {
+              target = this.config.page[i]
+              // eslint-disable-next-line no-unused-vars
+              pageIndex = i
+            }
+          }
+        }
+      }
+      // 找到该page下对应的item
+      let targetIndex
+      let rowIndex
+      for (let i = 0; i < target.body.length; i++) {
+        const row = target.body[i]
+        for (let j = 0; j < row.length; j++) {
+          const item = row[j]
+          if (item.id === id) {
+            targetIndex = j
+            rowIndex = i
+            break
+          }
+        }
+      }
+      target.body[rowIndex].splice(targetIndex, 1)
+      this.targetContainer = undefined
+      // 如果删除后只剩一个容器，将该容器span设置为24
+      if (target.body[rowIndex].length === 1) {
+        target.body[rowIndex][0].span = 24
+      }
+      this.refreshOrganization()
+    },
+    // 事件编辑器点击完成
+    handleEventEditorOk () {
+      let emitTypeKey = this.eventEditorContent.emitType
+      // 是否是自定义事件触发
+      if (this.eventEditorContent.customEmitType) {
+        emitTypeKey = this.eventEditorContent.customEmitType
+      }
+      // 如果当前是回显事件
+      if (this.eventEditorCurrent) {
+        const targetConfig = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
+        targetConfig.onEvent[this.eventEditorCurrent.type][this.eventEditorCurrent.index] = { ...this.eventEditorContent }
+      } else {
+        // 当前是新增事件
+        const target = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
+        // 如果没有onEvent属性则初始化
+        if (!target.onEvent) {
+          target.onEvent = {}
+        }
+        // 如果当前触发类型没有初始化，则初始化
+        if (!target.onEvent[emitTypeKey]) {
+          target.onEvent[emitTypeKey] = []
+        }
+        // 将缓存的事件属性赋值
+        target.onEvent[emitTypeKey].push({
+          ...this.eventEditorContent
+        })
+      }
+      this.showEventEditor = false
+      this.eventEditorContent = {}
+      this.eventEditorCurrent = undefined
+    },
+    // 关闭事件编辑器弹框
+    handleEventEditorCancel () {
+      this.showEventEditor = false
+      this.eventEditorContent = {}
+      this.eventEditorCurrent = undefined
+    },
+    // 事件编辑器中，触发类型改变
+    handleEventEditorTypeChange (type) {
+      this.eventEditorContent.emitType = type
+      this.$forceUpdate()
+    },
+    // 事件编辑器中，目标组件改变
+    handleEventEditorTargetChange (target) {
+      this.eventEditorContent.target = target
+      this.$forceUpdate()
+    },
+    // 事件编辑器中，事件类型改变
+    handleEventEditorEventTypeChange (type) {
+      this.eventEditorContent.eventType = type
+      this.logicParamTransferDataSource = []
+      // 如果事件为运行Logic将组件加入穿梭框
+      if (type === 'runLogic') {
+        this.config.page.forEach(page => {
+          page.body.forEach(row => {
+            row.forEach(item => {
+              if (!item.id.startsWith('container')) {
+                this.logicParamTransferDataSource.push({
+                  key: item.id,
+                  title: item.id
+                })
+              }
+            })
+          })
+        })
+        this.eventEditorContent.logicParamTransfer = []
+      }
+      this.$forceUpdate()
+    },
+    // 事件编辑器中，目标组件执行事件类型改变
+    handleEventEditorTargetEventTypeChange (type) {
+      this.eventEditorContent.eventName = type
+      this.$forceUpdate()
+    },
+    // 自定义JS方法弹框确认
+    handleJSEventEditorOk () {
+      this.showJSEventEditor = false
+    },
+    // 自定义JS方法弹框关闭
+    handleJSEventEditorCancel () {
+      this.showJSEventEditor = false
+    },
+    // 添加组件到容器中
+    addComponentToContainer (type) {
+      // 如果没有选中容器
+      if (!this.targetContainer) {
+        // 并且配置中没有任何其他组件，则认为是单组件页面，直接将组件添加到页面
+        if (this.config.page.length === 0) {
+          this.config.page.push({
+            id: nanoid(2),
+            type: 'page',
+            body: [
+              {
+                span: 24,
+                type: type,
+                id: type + '_' + nanoid(6),
+              }
+            ]
+          })
+          this.refreshOrganization()
+        } else {
+          this.$message.error('如需多个组件请先添加组件容器！')
+        }
+        this.targetContainer = undefined
+        return
+      }
+      // 获取选中的容器
+      const target = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config.page)
+      // 将容器的类型和id改变
+      target.type = type
+      target.id = target.type + '_' + nanoid(6)
+      this.targetContainer = undefined
+      this.refreshOrganization()
+    },
+    // 添加容器
+    addContainer () {
+      // 如果目标不是一个容器
+      if (!this.targetContainer) {
+        // 如果没有指定页面容器，则直接报错
+        if (this.activeMainPage === undefined) {
+          this.$message.error('未选中任何工作空间！')
+          return
+        }
+        // 获取当前选中的页面容器
+        let targetIndex = this.activeMainPage
+        for (let i = 0; i < this.config.page.length; i++) {
+          if (this.config.page[i].id === this.activeMainPage) {
+            targetIndex = i
+            break
+          }
+        }
+        // 如果是page类型，添加两个容器。其他类型添加一个容器
+        if (this.config.page[targetIndex].type === 'page') {
+          this.config.page[targetIndex].body.push([
+            {
+              type: 'container',
+              span: 12,
+              id: 'container_' + nanoid(6)
+            },
+            {
+              type: 'container',
+              span: 12,
+              id: 'container_' + nanoid(6)
+            }
+          ])
+        } else {
+          this.config.page[targetIndex].body.push([{
+            type: 'container',
+            span: 24,
+            id: 'container_' + nanoid(6)
+          }])
+        }
+      } else {
+        // 如果目标是容器
+        let targetIndex = -1
+        let maxWidth = -1
+        let targetPageIndex = -1
+        let targetRowIndex = -1
+        // 获取目标的配置
+        for (let i = 0; i < this.config.page.length; i++) {
+          const page = this.config.page[i]
+          for (let j = 0; j < page.body.length; j++) {
+            const row = page.body[j]
+            for (let k = 0; k < row.length; k++) {
+              const item = row[k]
+              if (item.id === this.targetContainer.id) {
+                targetIndex = k
+                maxWidth = item.span
+                targetPageIndex = i
+                targetRowIndex = j
+              }
+            }
+          }
+        }
+        // 将目标容器一分为二
+        this.config.page[targetPageIndex].body[targetRowIndex].splice(targetIndex, 1, {
+          type: 'container',
+          span: Math.floor(maxWidth / 2),
+          id: 'container_' + nanoid(6)
+        }, {
+          type: 'container',
+          span: Math.ceil(maxWidth / 2),
+          id: 'container_' + nanoid(6)
+        })
+        this.targetContainer = undefined
+      }
+      this.refreshOrganization()
+    },
+    // 获取所有已注册组件，用于添加至UI库
+    getRegisteredComponents () {
+      return Object.keys(registeredRender)
+    },
+    // 组件属性编辑
+    editorPropertiesInputChange (event, key) {
+      this.renderPreview = false
+      this.renderModalPreview = false
+      this.renderDrawPreview = false
+      // 如果当前有定时器，清除该定时器，并设置新的定时器
+      // 也就是说：每次操作间隔指定时间后才会触发更新
+      // 如果在此期间又进行了操作，则重新开始计时
+      if (this.inputTimeout) {
+        clearTimeout(this.inputTimeout)
+      }
+      this.inputTimeout = setTimeout(() => {
+        const target = lowcodeUtils.getComponentConfig(this.editorPropertiesConfig.id, this.config.page)
+        lowcodeLog('组件属性修改', '触发更新', target.id, true, false)
+        // 拿到组件注册的配置
+        const editorConfig = lowcodeUtils.getEditorConfigById(this.editorPropertiesConfig.id, this.config.page)
+        // 根据类型，将input框中的内容赋值
+        if (editorConfig.properties[key].type === 'object') {
+          target.props[key] = JSON.parse(event.target.value)
+        } else if (editorConfig.properties[key].type === 'string') {
+          target.props[key] = event.target.value
+        } else if (editorConfig.properties[key].type === 'boolean') {
+          const input = event.target.value.toLowerCase()
+          if (input === 'true' || input !== '0') {
+            target.props[key] = true
+          } else {
+            target.props[key] = false
+          }
+        }
+        this.renderPreview = true
+        this.renderModalPreview = true
+        this.renderDrawPreview = true
+      }, 1500)
+    },
+    // 切换预览模式
+    previewModeActive () {
+      this.preview = true
+    },
+    // 切换编辑模式
+    editModeActive () {
+      this.preview = false
+    },
+    // 选中某个组件
+    clickComponentInEditor (configItem) {
+      this.editorPropertiesConfig = {}
+      // 如果选中的是容器
+      if (configItem.type === 'container') {
+        // 如果已经选中，则反选，selected属性用于改变容器样式
+        if (configItem.selected) {
+          configItem.selected = false
+          this.targetContainer = undefined
+        } else {
+          // 将所有已选中组件取消选择
+          this.config.page.forEach(page => {
+            page.body.forEach(row => {
+              row.forEach(item => {
+                item.selected = false
+              })
+            })
+          })
+          // 将目标设置为选定
+          configItem.selected = true
+          this.targetContainer = configItem
+        }
+        return
+      }
+      // 如果是组件对象
+      // 拿注册的配置
+      const configInJson = lowcodeUtils.getEditorConfigByType(configItem.type)
+      if (configInJson) {
+        this.editorPropertiesConfig = configItem
+        // 为编辑器变量初始化
+        if (configInJson.properties) {
+          if (!this.editorPropertiesConfig.props) {
+            this.editorPropertiesConfig.props = {}
+          }
+          const editableKeys = Object.keys(configInJson.properties)
+          editableKeys.forEach(editableKey => {
+            // 如果该值并不存在，则初始化
+            if (!this.editorPropertiesConfig.props[editableKey]) {
+              this.editorPropertiesConfig.props[editableKey] = ''
+            } else {
+              if (typeof this.editorPropertiesConfig.props[editableKey] === 'object') {
+                this.editorPropertiesConfig.props[editableKey] = JSON.stringify(this.editorPropertiesConfig.props[editableKey])
+              }
+            }
+          })
+        }
+        // 为编辑器事件初始化
+        if (configInJson.selfEvent) {
+          if (!this.editorPropertiesConfig.selfEvent) {
+            this.editorPropertiesConfig.selfEvent = []
+            configInJson.selfEvent.forEach(everyEvent => {
+              this.editorPropertiesConfig.selfEvent.push(everyEvent)
+            })
+          }
+        }
+      } else {
+        this.editorPropertiesConfig = 'unregistered'
+      }
+    },
+    // 点击测试按钮
+    test () {
+      // 输出当前配置，和组件注册Map
+      console.warn('config', this.config)
+      console.warn('map', this.$children[0]._provided.componentsMap)
+    },
+    // 点击导出按钮
+    exportConfig () {
+      console.warn('导出', this.config)
+      this.$emit('exportConfig', this.config)
+    }
+  },
+  mounted () {
+    // 将mixin中已经实现的通用响应方法添加
+    this.supportedEventType = [...lowcodeComponentMixin.supportedEventType]
+    // 深拷贝外侧传来的配置
+    this.config = JSON.parse(JSON.stringify(this.originalConfig))
+    // this.config = {
+    //   page: [
+    //     {
+    //       id: 'KB',
+    //       type: 'page',
+    //       title: '111',
+    //       body: [
+    //         [
+    //           {
+    //             type: 'XFormTable',
+    //             span: 12,
+    //             id: 'XFormTable_BV6Nwk',
+    //             selected: false,
+    //             props: {
+    //               queryParamsName: '',
+    //               serviceName: ''
+    //             },
+    //             selfEvent: [
+    //               'action'
+    //             ]
+    //           },
+    //           {
+    //             type: 'XAddNativeForm',
+    //             span: 12,
+    //             id: 'XAddNativeForm_ekihTp',
+    //             selected: false,
+    //             props: {
+    //               configNameForLowCode: '',
+    //               systemNameForLowCode: ''
+    //             },
+    //             selfEvent: [
+    //               'onSubmit'
+    //             ]
+    //           }
+    //         ],
+    //         [
+    //           {
+    //             type: 'XTreeOne',
+    //             span: 12,
+    //             id: 'XTreeOne_szu7Al',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'XDescriptions',
+    //             span: 12,
+    //             id: 'XDescriptions_DTkbEg',
+    //             selected: false,
+    //             props: {
+    //               title: '111',
+    //               content: {
+    //                 c_f_user_phone: '2323',
+    //                 c_f_total_fee: 33356,
+    //                 c_f_address: '22',
+    //                 c_f_meterlen: 2,
+    //                 c_f_bank_card_number: '23',
+    //                 c_f_create_user: '超级管理员',
+    //                 c_f_customer: '23',
+    //                 c_f_balance: 33356,
+    //                 c_f_create_date: '2024-06-23 21:31:24',
+    //                 c_f_operator_date: '2024-06-23 21:31:24',
+    //                 c_f_total_times: 2,
+    //                 c_f_user_name: '23',
+    //                 c_f_comments: '323',
+    //                 c_id: 39,
+    //                 c_f_operatorid: '15',
+    //                 c_f_operator: '超级管理员',
+    //                 c_f_orgid: '9'
+    //               },
+    //               configName: 'Unit_Desc_Config',
+    //               serviceName: 'af-revenue',
+    //               getRealData: true
+    //             },
+    //             selfEvent: []
+    //           }
+    //         ]
+    //       ]
+    //     },
+    //     {
+    //       id: 'Fg',
+    //       type: 'page',
+    //       title: '22',
+    //       body: [
+    //         [
+    //           {
+    //             type: 'container',
+    //             span: 4,
+    //             id: 'container_ir2gR2',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 10,
+    //             id: 'container_xIRHGg'
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 10,
+    //             id: 'container_PT9n3Q'
+    //           }
+    //         ],
+    //         [
+    //           {
+    //             type: 'container',
+    //             span: 18,
+    //             id: 'container_q04vQr',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 6,
+    //             id: 'container_MKwNvz',
+    //             selected: false
+    //           }
+    //         ]
+    //       ]
+    //     }
+    //   ]
+    // }
+    this.refreshOrganization()
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ui-item:hover {
+  cursor: pointer;
+}
+
+.ui-item{
+  width: 100%;
+  height:10%;
+  text-align: center;
+  overflow-wrap: break-word;
+  padding: 7%
+}
+
+.singleEvent {
+  border: black dashed 1px;
+  padding: 10%;
+}
+
+.edit_icon:hover {
+  cursor: pointer;
+}
+</style>