vue2-client 1.8.263 → 1.8.264

package/src/pages/lowCode/lowCodeEditor.vue

@@ -1,1554 +1,1824 @@
-<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>
-              <!--    UI库    -->
-              <a-tab-pane key="1" tab="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="架构">
-                <div style="margin-bottom: 3%">
-                  <LowCodePageOrganization
-                    :config="config"
-                    v-if="showPageOrganization"
-                    :select-tree-node="selectTreeNode"
-                    @rename="rename"
-                    @split="handleSplit"
-                    @pasteItem="handlePasteItem"
-                    @componentMove="handleTreeDrag"
-                    @deleteComponent="deleteComponentInTree"
-                    @treeOrganizationClick="treeOrganizationClick"/>
-                </div>
-              </a-tab-pane>
-            </a-tabs>
-          </a-card>
-        </a-col>
-        <!--    中间主体编辑器    -->
-        <a-col :span="15">
-          <a-card>
-            <!--       切换显示的组件       -->
-            <div style="margin-bottom: 3%">
-              <!--    添加页面组件按钮    -->
-              <div style="float: right">
-                <a-popover>
-                  <template slot="content">
-                    <p>添加页面组件</p>
-                  </template>
-                  <a-button @click="addPageContainer" >
-                    <a-icon type="plus"/>
-                  </a-button>
-                </a-popover>
-              </div>
-              <!--    每个页面按钮切换栏    -->
-              <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>
-              <!--    组件名    -->
-              <template v-if="editorPropertiesConfig.name">
-                <h3>组件名</h3>
-                <h4>{{ editorPropertiesConfig.name }}</h4>
-              </template>
-              <template v-else-if="editorPropertiesConfig.id">
-                <h3>组件ID</h3>
-                <h4>{{ editorPropertiesConfig.id }}</h4>
-              </template>
-              <!--    切换    -->
-              <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">
-                      <a-tooltip>
-                        <template slot="title" v-if="resolveEditorPropsLabel(editorPropertiesConfig.type, key).desc">
-                          {{ resolveEditorPropsLabel(editorPropertiesConfig.type, key).desc }}
-                        </template>
-                        {{ resolveEditorPropsLabel(editorPropertiesConfig.type, key).label }}:
-                      </a-tooltip>
-                      <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-option value="lifeCycle">
-              生命周期函数
-            </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="事件类型" v-if="eventEditorContent.emitType !== 'lifeCycle'">
-          <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>
-        <!--    生命周期函数    -->
-        <a-form-item label="生命周期名" v-if="eventEditorContent.emitType === 'lifeCycle'">
-          <a-select @change="handleEventEditorLifeCycleChange" :default-value="eventEditorContent.lifeCycle">
-            <a-select-option value="created">
-              created
-            </a-select-option>
-            <a-select-option value="beforeMount">
-              beforeMount
-            </a-select-option>
-            <a-select-option value="mounted">
-              mounted
-            </a-select-option>
-            <a-select-option value="beforeUpdate">
-              beforeUpdate
-            </a-select-option>
-            <a-select-option value="updated">
-              updated
-            </a-select-option>
-            <a-select-option value="beforeDestroy">
-              beforeDestroy
-            </a-select-option>
-            <a-select-option value="destroyed">
-              destroyed
-            </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方法" v-if="eventEditorContent.emitType !== 'lifeCycle'">
-          <a-button type="primary" @click="openEventJSEditor">打开编辑器</a-button>
-        </a-form-item>
-        <!--    自定义钩子函数    -->
-        <a-form-item label="自定义生命周期函数" v-if="eventEditorContent.emitType === 'lifeCycle'">
-          <a-button type="primary" @click="openEventLifeCycleJSEditor">打开编辑器</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>
-    <!--  自定义生命周期函数弹框  -->
-    <a-modal
-      title="生命周期函数编辑器"
-      width="60%"
-      :destroyOnClose="true"
-      :z-index="1002"
-      @ok="() => { showLifeCycleFunctionEditor = false}"
-      @cancel="() => { showLifeCycleFunctionEditor = false}"
-      :visible="showLifeCycleFunctionEditor">
-      <a-popover title="参数说明" style="margin-bottom: 5%">
-        <template slot="content">
-          <p>该方法有以下几个参数：</p>
-          <p>vm：VUE组件对象(this)</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.LifeCycleFunction"
-        :value="eventEditorContent.LifeCycleFunction"/>
-    </a-modal>
-    <!--  新增页面容器弹框  -->
-    <a-modal
-      title="新增页面容器"
-      width="60%"
-      :z-index="1001"
-      :destroyOnClose="true"
-      @ok="handleAddPageContainerModalOk"
-      @cancel="() => { showPageContainerAddModal = false }"
-      :visible="showPageContainerAddModal">
-      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
-        <!--    容器类型    -->
-        <a-form-item label="容器类型">
-          <a-select v-model="addComponentTemp.type" @change="pageContainerAddTypeChange">
-            <a-select-option value="page">
-              页面
-            </a-select-option>
-            <a-select-option value="modal">
-              弹框
-            </a-select-option>
-            <a-select-option value="draw">
-              抽屉
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!--    标题    -->
-        <a-form-item label="标题">
-          <a-input v-model="addComponentTemp.title"/>
-        </a-form-item>
-        <template v-if="addComponentTemp.type !== 'page'">
-          <!--    宽度    -->
-          <a-form-item label="宽度">
-            <a-input v-model="addComponentTemp.width"/>
-          </a-form-item>
-        </template>
-      </a-form>
-    </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 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}'
-const LifeCycleFunctionTemplate = 'function(vm) {\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: [],
-      // 添加页面容器参数
-      addComponentTemp: { type: 'page' },
-      // 控制添加页面容器弹框显隐
-      showPageContainerAddModal: false,
-      showLifeCycleFunctionEditor: false,
-      selectTreeNode: undefined
-    }
-  },
-  provide () {
-    return {
-      // 将注册的组件传递给子组件
-      componentsMap: {}
-    }
-  },
-  methods: {
-    handleSplit (id, isVertical) {
-      const target = lowcodeUtils.getComponentConfig(id, this.config)
-      const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
-      let index
-      for (let i = 0; i < row.length; i++) {
-        if (row[i].id === id) {
-          index = i
-          break
-        }
-      }
-      const cache = JSON.parse(JSON.stringify(target))
-      if (isVertical) {
-        const temp = {
-          type: 'container_page',
-          span: cache.span,
-          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
-          page: [
-            {
-              id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(2),
-              type: 'page',
-              body: [
-                []
-              ]
-            }
-          ]
-        }
-        cache.span = 24
-        temp.page[0].body[0].push(cache)
-        temp.page[0].body[1] = []
-        temp.page[0].body[1].push({
-          type: 'container',
-          span: 24,
-          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-        })
-        row.splice(index, 1, temp)
-      } else {
-        const outerSpan = cache.span
-        const firstSpan = Math.round(outerSpan / 2)
-        const secondSpan = outerSpan - firstSpan
-        cache.span = firstSpan
-        row.splice(index, 1, cache, {
-          type: 'container',
-          span: secondSpan,
-          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-        })
-      }
-      this.refreshOrganization()
-    },
-    refreshRender () {
-      this.renderPreview = false
-      this.renderModalPreview = false
-      this.renderDrawPreview = false
-      this.$nextTick(() => {
-        this.renderPreview = true
-        this.renderModalPreview = true
-        this.renderDrawPreview = true
-      })
-    },
-    // 添加页面容器弹框确认
-    handleAddPageContainerModalOk () {
-      const result = {
-        id: 'page_' + lowcodeUtils.nanoidWithoutSymbol(6),
-        type: this.addComponentTemp.type,
-        title: this.addComponentTemp.title,
-        width: this.addComponentTemp.width,
-        body: []
-      }
-      this.addComponentTemp = { type: 'page' }
-      this.config.page.push(result)
-      this.refreshOrganization()
-      this.showPageContainerAddModal = false
-    },
-    // 添加页面容器类型修改
-    pageContainerAddTypeChange (value) {
-      if (value !== 'page') {
-        this.addComponentTemp = { width: '70%', type: value }
-      } else {
-        this.addComponentTemp = { type: value }
-      }
-    },
-    // 添加页面容器
-    addPageContainer () {
-      this.addComponentTemp = { type: 'page' }
-      this.showPageContainerAddModal = true
-    },
-    // 通过组件类型和key解析出该key对应的中文定义
-    resolveEditorPropsLabel (type, key) {
-      const def = lowcodeUtils.getEditorConfigByType(type)
-      const propsDef = def.properties
-      const targetDef = propsDef[key]
-      if (!targetDef.label) {
-        targetDef.label = key
-        targetDef.desc = '未配置该参数的说明！'
-      } else if (!targetDef.desc) {
-        targetDef.desc = '未配置该参数的说明！'
-      }
-      return targetDef
-    },
-    // 架构重命名
-    rename (id, newName) {
-      const target = lowcodeUtils.getConfig(id, this.config)
-      if (id.length <= 2) {
-        target.title = newName
-      } else {
-        target.name = 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) {
-      // 如果类型是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') {
-        const page = lowcodeUtils.getPageConfigById(id, this.config)
-        this.deletePage(page)
-      } else if (type === 'component') {
-        this.deleteComponent(id)
-      } else if (type === 'row') {
-        this.deleteRow(id)
-      } else if (type === 'container_page') {
-        this.deleteContainerPage(id)
-      }
-    },
-    deleteContainerPage (id) {
-      console.warn('id', id)
-      const target = lowcodeUtils.getContainerPageOuterByContainerPageId(id, this.config)
-      console.warn('target', target)
-      target.type = 'container'
-      delete target.page
-      this.targetContainer = undefined
-      this.editorPropertiesConfig = {}
-      this.refreshOrganization()
-    },
-    // 删除行
-    deleteRow (id) {
-      const pageId = id.substring(0, id.length - 2)
-      const rowId = id.substring(id.length - 1)
-      const page = lowcodeUtils.getPageConfigById(pageId, this.config)
-      page.body.splice(rowId - 1, 1)
-      this.targetContainer = undefined
-      this.editorPropertiesConfig = {}
-      this.refreshOrganization()
-    },
-    // 删除页面容器
-    deletePage (page) {
-      console.warn('123', page)
-      page.body.forEach(row => {
-        row.forEach(item => {
-          if (item.type === 'container_page') {
-            this.deletePage(item.page)
-          } else {
-            delete this.$children[0]._provided.componentsMap[item.id]
-          }
-        })
-      })
-      for (let i = 0; i < this.config.page.length; i++) {
-        if (this.config.page[i].id === page.id) {
-          this.config.page.splice(i, 1)
-          this.targetContainer = undefined
-          this.editorPropertiesConfig = {}
-          this.refreshOrganization()
-          return
-        }
-      }
-    },
-    // 删除组件
-    deleteComponent (id, addOnSpan = true) {
-      const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
-      const target = lowcodeUtils.getComponentConfig(id, this.config)
-      const deletedSpan = target.span
-      let index
-      for (let i = 0; i < row.length; i++) {
-        if (target.id === row[i].id) {
-          index = i
-          break
-        }
-      }
-      row.splice(index, 1)
-      if (addOnSpan) {
-        // 如果该组件之前还有组件，将该组件的span加给之前的组件
-        if (index !== 0) {
-          row[index - 1].span += deletedSpan
-        } else if (row.length > 0) {
-          row[0].span += deletedSpan
-        }
-      }
-      // 从注册的全局Map中删除
-      delete this.$children[0]._provided.componentsMap[id]
-      this.targetContainer = undefined
-      this.editorPropertiesConfig = {}
-      this.refreshOrganization()
-    },
-    // 打开JS函数编辑器
-    openEventJSEditor () {
-      if (!this.eventEditorContent.JSFunction) {
-        this.eventEditorContent.JSFunction = JSEventFunctionTemplate
-      }
-      this.showJSEventEditor = true
-    },
-    openEventLifeCycleJSEditor () {
-      if (!this.eventEditorContent.LifeCycleFunction) {
-        this.eventEditorContent.LifeCycleFunction = LifeCycleFunctionTemplate
-      }
-      this.showLifeCycleFunctionEditor = 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 () {
-      const IDs = Object.keys(this.$children[0]._provided.componentsMap)
-      const result = []
-      IDs.forEach(id => {
-        const config = lowcodeUtils.getConfig(id, this.config)
-        if (config.name) {
-          result.push(config.name)
-        } else {
-          result.push(config.id)
-        }
-      })
-      return result
-    },
-    // 容器删除
-    handleContainerDelete (id) {
-      let index
-      const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
-      for (let i = 0; i < row.length; i++) {
-        const item = row[i]
-        if (item.id === id) {
-          index = i
-          break
-        }
-      }
-      row.splice(index, 1)
-      this.targetContainer = undefined
-      // 如果删除后只剩一个容器，将该容器span设置为24
-      if (row.length === 1) {
-        row[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()
-    },
-    handleEventEditorLifeCycleChange (lifeCycleName) {
-      this.eventEditorContent.lifeCycle = lifeCycleName
-    },
-    // 事件编辑器中，事件类型改变
-    handleEventEditorEventTypeChange (type) {
-      const componentsMap = this.$children[0]._provided.componentsMap
-      this.eventEditorContent.eventType = type
-      this.logicParamTransferDataSource = []
-      // 如果事件为运行Logic将组件加入穿梭框
-      if (type === 'runLogic') {
-        const keys = Object.keys(componentsMap)
-        keys.forEach(key => {
-          const name = lowcodeUtils.getComponentNameById(key, this.config)
-          this.logicParamTransferDataSource.push({
-            key: key,
-            title: name,
-          })
-        })
-        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) {
-        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 + '_' + lowcodeUtils.nanoidWithoutSymbol(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_page',
-              span: 24,
-              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
-              page: [
-                {
-                  id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
-                  type: 'page',
-                  body: [
-                    [
-                      {
-                        type: 'container',
-                        span: 12,
-                        id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-                      },
-                      {
-                        type: 'container',
-                        span: 12,
-                        id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-                      },
-                    ]
-                  ]
-                }
-              ]
-            }
-          ])
-        } else {
-          this.config.page[targetIndex].body.push([{
-            type: 'container',
-            span: 24,
-            id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-          }])
-        }
-      } else {
-        // 如果目标是容器
-        const row = lowcodeUtils.getRowConfigByComponentId(this.targetContainer.id, this.config)
-        const targetInRowIndex = lowcodeUtils.getComponentInRowIndex(this.targetContainer.id, this.config)
-        const targetItem = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config)
-        const maxWidth = targetItem.span
-        // 确认是水平拆分还是垂直拆分
-        this.$confirm({
-          content: '是否为水平拆分',
-          onOk: () => {
-            // 将目标容器一分为二
-            row.splice(targetInRowIndex, 1, {
-              type: 'container',
-              span: Math.floor(maxWidth / 2),
-              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-            }, {
-              type: 'container',
-              span: Math.ceil(maxWidth / 2),
-              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-            })
-            this.targetContainer = undefined
-            this.refreshOrganization()
-          },
-          onCancel: () => {
-            targetItem.type = 'container_page'
-            targetItem.page = [{
-              id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
-              type: 'page',
-              body: [
-                [{
-                  type: 'container',
-                  span: 24,
-                  id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-                }],
-                [{
-                  type: 'container',
-                  span: 24,
-                  id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-                }]
-              ]
-            }]
-            this.targetContainer = undefined
-            this.refreshOrganization()
-          }
-        })
-      }
-      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()
-          target.props[key] = input === 'true' || input !== '0'
-        }
-        this.renderPreview = true
-        this.renderModalPreview = true
-        this.renderDrawPreview = true
-      }, 1500)
-    },
-    // 切换预览模式
-    previewModeActive () {
-      // TODO 新标签页中预览
-      // const params = {
-      //   config: this.config
-      // }
-      // const routeData = this.$router.resolve({
-      //   path: '/lowCodeReview',
-      //   query: params
-      // })
-      // window.open(routeData.location.path, '_blank')
-      this.preview = true
-    },
-    // 切换编辑模式
-    editModeActive () {
-      this.preview = false
-    },
-    // 选中某个组件
-    clickComponentInEditor (configItem) {
-      // 同步选中架构
-      this.selectTreeNode = configItem.id
-      this.editorPropertiesConfig = {}
-      // 如果选中的是容器
-      if (configItem.type === 'container') {
-        // 如果已经选中，则反选，selected属性用于改变容器样式
-        if (configItem.selected) {
-          configItem.selected = false
-          this.targetContainer = undefined
-        } else {
-          // 将所有已选中组件取消选择
-          lowcodeUtils.unCheckAll(this.config)
-          // 将目标设置为选定
-          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: 'page_KBjw2i',
-          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: 'page_FgItf6',
-          type: 'page',
-          title: '22',
-          body: [
-            [
-              {
-                type: 'container',
-                span: 4,
-                id: 'container_ir2gR2',
-                selected: false
-              },
-              {
-                type: 'container_page',
-                span: 10,
-                id: 'container_xIRHGg',
-                selected: true,
-                page: [
-                  {
-                    id: 'container_page_IgYw9u',
-                    type: 'page',
-                    body: [
-                      [
-                        {
-                          type: 'container',
-                          span: 24,
-                          id: 'container_tqVFCL'
-                        }
-                      ],
-                      [
-                        {
-                          type: 'container',
-                          span: 24,
-                          id: 'container_i8VXCZ'
-                        }
-                      ]
-                    ]
-                  }
-                ]
-              },
-              {
-                type: 'container',
-                span: 10,
-                id: 'container_PT9n3Q',
-                selected: false
-              }
-            ],
-            [
-              {
-                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">
+          <a-card>
+            <a-tabs>
+              <!--    UI库    -->
+              <a-tab-pane key="1" tab="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="架构">
+                <div style="margin-bottom: 3%">
+                  <LowCodePageOrganization
+                    :config="filterOrganizationConfig()"
+                    v-if="showPageOrganization"
+                    :select-tree-node="selectTreeNode"
+                    @rename="rename"
+                    @add="handleTreeAdd"
+                    @split="handleSplit"
+                    @pasteItem="handlePasteItem"
+                    @componentMove="handleTreeDrag"
+                    @deleteComponent="deleteComponentInTree"
+                    @treeOrganizationClick="treeOrganizationClick"/>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </a-card>
+        </a-col>
+        <!--    中间主体编辑器    -->
+        <a-col :span="15">
+          <a-card>
+            <!--       切换显示的组件       -->
+            <div style="margin-bottom: 3%">
+              <!--    添加页面组件按钮    -->
+              <div style="float: right">
+                <a-popover>
+                  <template slot="content">
+                    <p>添加页面组件</p>
+                  </template>
+                  <a-button @click="addPageContainer" >
+                    <a-icon type="plus"/>
+                  </a-button>
+                </a-popover>
+              </div>
+              <!--    每个页面按钮切换栏    -->
+              <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
+                ref="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
+                ref="modal_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
+                ref="draw_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>
+              <!--    组件名    -->
+              <template v-if="editorPropertiesConfig.name">
+                <h3>组件名</h3>
+                <h4>{{ editorPropertiesConfig.name }}</h4>
+              </template>
+              <template v-else-if="editorPropertiesConfig.id">
+                <h3>组件ID</h3>
+                <h4>{{ editorPropertiesConfig.id }}</h4>
+              </template>
+              <!--    切换    -->
+              <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">
+                      <a-tooltip>
+                        <template slot="title" v-if="resolveEditorPropsLabel(editorPropertiesConfig.type, key).desc">
+                          {{ resolveEditorPropsLabel(editorPropertiesConfig.type, key).desc }}
+                        </template>
+                        {{ resolveEditorPropsLabel(editorPropertiesConfig.type, key).label }}:
+                      </a-tooltip>
+                      <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-option value="lifeCycle">
+              生命周期函数
+            </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="事件类型" v-if="eventEditorContent.emitType !== 'lifeCycle'">
+          <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>
+        <!--    生命周期函数    -->
+        <a-form-item label="生命周期名" v-if="eventEditorContent.emitType === 'lifeCycle'">
+          <a-select @change="handleEventEditorLifeCycleChange" :default-value="eventEditorContent.lifeCycle">
+            <a-select-option value="created">
+              created
+            </a-select-option>
+            <a-select-option value="beforeMount">
+              beforeMount
+            </a-select-option>
+            <a-select-option value="mounted">
+              mounted
+            </a-select-option>
+            <a-select-option value="beforeUpdate">
+              beforeUpdate
+            </a-select-option>
+            <a-select-option value="updated">
+              updated
+            </a-select-option>
+            <a-select-option value="beforeDestroy">
+              beforeDestroy
+            </a-select-option>
+            <a-select-option value="destroyed">
+              destroyed
+            </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方法" v-if="eventEditorContent.emitType !== 'lifeCycle'">
+          <a-button type="primary" @click="openEventJSEditor">打开编辑器</a-button>
+        </a-form-item>
+        <!--    自定义钩子函数    -->
+        <a-form-item label="自定义生命周期函数" v-if="eventEditorContent.emitType === 'lifeCycle'">
+          <a-button type="primary" @click="openEventLifeCycleJSEditor">打开编辑器</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>
+    <!--  自定义生命周期函数弹框  -->
+    <a-modal
+      title="生命周期函数编辑器"
+      width="60%"
+      :destroyOnClose="true"
+      :z-index="1002"
+      @ok="() => { showLifeCycleFunctionEditor = false}"
+      @cancel="() => { showLifeCycleFunctionEditor = false}"
+      :visible="showLifeCycleFunctionEditor">
+      <a-popover title="参数说明" style="margin-bottom: 5%">
+        <template slot="content">
+          <p>该方法有以下几个参数：</p>
+          <p>vm：VUE组件对象(this)</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.LifeCycleFunction"
+        :value="eventEditorContent.LifeCycleFunction"/>
+    </a-modal>
+    <!--  新增页面容器弹框  -->
+    <a-modal
+      title="新增页面容器"
+      width="60%"
+      :z-index="1001"
+      :destroyOnClose="true"
+      @ok="handleAddPageContainerModalOk"
+      @cancel="() => { showPageContainerAddModal = false }"
+      :visible="showPageContainerAddModal">
+      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
+        <!--    容器类型    -->
+        <a-form-item label="容器类型">
+          <a-select v-model="addComponentTemp.type" @change="pageContainerAddTypeChange">
+            <a-select-option value="page">
+              页面
+            </a-select-option>
+            <a-select-option value="modal">
+              弹框
+            </a-select-option>
+            <a-select-option value="draw">
+              抽屉
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--    标题    -->
+        <a-form-item label="标题">
+          <a-input v-model="addComponentTemp.title"/>
+        </a-form-item>
+        <template v-if="addComponentTemp.type !== 'page'">
+          <!--    宽度    -->
+          <a-form-item label="宽度">
+            <a-input v-model="addComponentTemp.width"/>
+          </a-form-item>
+        </template>
+      </a-form>
+    </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 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}'
+const LifeCycleFunctionTemplate = 'function(vm) {\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: [],
+      // 添加页面容器参数
+      addComponentTemp: { type: 'page' },
+      // 控制添加页面容器弹框显隐
+      showPageContainerAddModal: false,
+      showLifeCycleFunctionEditor: false,
+      selectTreeNode: undefined
+    }
+  },
+  provide () {
+    return {
+      // 将注册的组件传递给子组件
+      componentsMap: {}
+    }
+  },
+  methods: {
+    handleTreeAdd (id, type) {
+      if (type === 'container') {
+        const lastIndex = id.lastIndexOf('_')
+        const pageId = id.substring(0, lastIndex)
+        const rowIndex = id.substring(lastIndex + 1)
+        const row = lowcodeUtils.getRowByRowId(pageId, rowIndex - 1, this.config)
+        if (row.length === 0) {
+          row.push({
+            type: 'container',
+            span: 24,
+            id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+          })
+        } else {
+          const lastSpan = row[row.length - 1].span
+          const firstSpan = Math.round(lastSpan / 2)
+          const newSpan = lastSpan - firstSpan
+          row[row.length - 1].span = firstSpan
+          row.push({
+            type: 'container',
+            span: newSpan,
+            id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+          })
+        }
+      } else {
+        const page = lowcodeUtils.getPageConfigById(id, this.config)
+        page.body.push([])
+      }
+      this.refreshOrganization()
+    },
+    filterOrganizationConfig () {
+      const result = { page: [] }
+      this.config.page.forEach(page => {
+        if (page.id === this.activeMainPage) {
+          result.page.push(page)
+        }
+      })
+      return result
+    },
+    handleSplit (id, isVertical) {
+      const target = lowcodeUtils.getComponentConfig(id, this.config)
+      const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
+      let index
+      for (let i = 0; i < row.length; i++) {
+        if (row[i].id === id) {
+          index = i
+          break
+        }
+      }
+      const cache = JSON.parse(JSON.stringify(target))
+      if (isVertical) {
+        const temp = {
+          type: 'container_page',
+          span: cache.span,
+          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
+          page: [
+            {
+              id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(2),
+              type: 'page',
+              body: [
+                []
+              ]
+            }
+          ]
+        }
+        cache.span = 24
+        temp.page[0].body[0].push(cache)
+        temp.page[0].body[1] = []
+        temp.page[0].body[1].push({
+          type: 'container',
+          span: 24,
+          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+        })
+        row.splice(index, 1, temp)
+      } else {
+        const outerSpan = cache.span
+        const firstSpan = Math.round(outerSpan / 2)
+        const secondSpan = outerSpan - firstSpan
+        cache.span = firstSpan
+        row.splice(index, 1, cache, {
+          type: 'container',
+          span: secondSpan,
+          id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+        })
+      }
+      this.refreshOrganization()
+    },
+    refreshRender () {
+      this.renderPreview = false
+      this.renderModalPreview = false
+      this.renderDrawPreview = false
+      this.$nextTick(() => {
+        this.renderPreview = true
+        this.renderModalPreview = true
+        this.renderDrawPreview = true
+      })
+    },
+    // 添加页面容器弹框确认
+    handleAddPageContainerModalOk () {
+      const result = {
+        id: 'page_' + lowcodeUtils.nanoidWithoutSymbol(6),
+        type: this.addComponentTemp.type,
+        title: this.addComponentTemp.title,
+        width: this.addComponentTemp.width,
+        body: []
+      }
+      this.addComponentTemp = { type: 'page' }
+      this.config.page.push(result)
+      this.refreshOrganization()
+      this.showPageContainerAddModal = false
+    },
+    // 添加页面容器类型修改
+    pageContainerAddTypeChange (value) {
+      if (value !== 'page') {
+        this.addComponentTemp = { width: '70%', type: value }
+      } else {
+        this.addComponentTemp = { type: value }
+      }
+    },
+    // 添加页面容器
+    addPageContainer () {
+      this.addComponentTemp = { type: 'page' }
+      this.showPageContainerAddModal = true
+    },
+    // 通过组件类型和key解析出该key对应的中文定义
+    resolveEditorPropsLabel (type, key) {
+      const def = lowcodeUtils.getEditorConfigByType(type)
+      const propsDef = def.properties
+      const targetDef = propsDef[key]
+      if (!targetDef.label) {
+        targetDef.label = key
+        targetDef.desc = '未配置该参数的说明！'
+      } else if (!targetDef.desc) {
+        targetDef.desc = '未配置该参数的说明！'
+      }
+      return targetDef
+    },
+    // 架构重命名
+    rename (id, newName) {
+      const target = lowcodeUtils.getConfig(id, this.config)
+      if (id.length <= 2) {
+        target.title = newName
+      } else {
+        target.name = 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) {
+      // 如果类型是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()
+      //         }
+      //       })
+      //     })
+      //   })
+      let target
+      if (id.includes('container_page')) {
+        target = lowcodeUtils.getContainerPageOuterByContainerPageId(id, this.config)
+      } else {
+        target = lowcodeUtils.getComponentConfig(id, this.config)
+      }
+      // 将组件选中
+      this.clickComponentInEditor(target)
+      this.twink(id)
+    },
+    // 架构树拖拽事件
+    handleTreeDrag (dragKey, dropKey, dragLevel, dropLevel, dropPosition, dragType) {
+      // 只有三种情况可以拖拽
+      // 1.平级挪
+      // 2.高一级插
+      // 3.行插子页面
+      let dragEle, rowConfig, father, cache, deleteIndex
+
+      // 复制移动组件，并将其从原位删除
+      switch (dragLevel.type) {
+        case 'row':
+          rowConfig = lowcodeUtils.getPageIdAndRowIndexByRowId(dragKey)
+          father = lowcodeUtils.getPageConfigById(rowConfig.pageId, this.config)
+          dragEle = father.body[rowConfig.rowIndex - 1]
+          // 复制原始
+          cache = JSON.parse(JSON.stringify(dragEle))
+          // 删除原始
+          deleteIndex = rowConfig.rowIndex - 1
+          father.body.splice(deleteIndex, 1, { placeHold: true })
+          break
+        case 'item':
+          father = lowcodeUtils.getRowConfigByComponentId(dragKey, this.config)
+          dragEle = lowcodeUtils.getComponentConfig(dragKey, this.config)
+          // 复制原始
+          cache = JSON.parse(JSON.stringify(dragEle))
+          // 删除原始
+          for (let i = 0; i < father.length; i++) {
+            const item = father[i]
+            if (item.id === dragKey) {
+              deleteIndex = i
+              break
+            }
+          }
+          father.splice(deleteIndex, 1, { placeHold: true })
+          break
+        case 'container_page':
+          father = lowcodeUtils.getContainerPageRow(dragKey, this.config)
+          dragEle = lowcodeUtils.getContainerPageOuterByContainerPageId(dragKey, this.config)
+          // 复制原始
+          cache = JSON.parse(JSON.stringify(dragEle))
+          // 删除原始
+          for (let i = 0; i < father.length; i++) {
+            const item = father[i]
+            if (item.type === 'container_page' && item.page[0].id === dragKey) {
+              deleteIndex = i
+              break
+            }
+          }
+          father.splice(deleteIndex, 1, { placeHold: true })
+          break
+      }
+
+      let target, dropConfig, targetCache, targetIndex
+      switch (dragType) {
+        case 'move':
+          // 1. 平级挪
+          switch (dragLevel.type) {
+            case 'row':
+              // 移动行
+              // 拿到父容器和目标Index
+              dropConfig = lowcodeUtils.getPageIdAndRowIndexByRowId(dropKey)
+              target = lowcodeUtils.getPageConfigById(dropConfig.pageId, this.config)
+              // 保存目标
+              targetCache = target.body[dropConfig.rowIndex - 1]
+              // 插入
+              console.warn('temp', JSON.parse(JSON.stringify(target)))
+              console.warn('temp', dropConfig.rowIndex - 1)
+              if (dropPosition < 0) {
+                target.body.splice(dropConfig.rowIndex - 1, 1, cache, targetCache)
+              } else {
+                target.body.splice(dropConfig.rowIndex - 1, 1, targetCache, cache)
+              }
+              // 清理占位
+              for (let i = 0; i < target.body.length; i++) {
+                const item = target.body[i]
+                if (item.placeHold) {
+                  target.body.splice(i, 1)
+                  break
+                }
+              }
+              break
+            case 'item':
+              // 移动组件
+              // 拿到父容器和目标Index
+              if (dropLevel.type === 'container_page') {
+                target = lowcodeUtils.getContainerPageRow(dropKey, this.config)
+                for (let i = 0; i < target.length; i++) {
+                  const item = target[i]
+                  if (item.type === 'container_page' && item.page[0].id === dropKey) {
+                    targetIndex = i
+                    break
+                  }
+                }
+              } else {
+                target = lowcodeUtils.getRowByComponentId(dropKey, this.config)
+                for (let i = 0; i < target.length; i++) {
+                  const item = target[i]
+                  if (item.id === dropKey) {
+                    targetIndex = i
+                    break
+                  }
+                }
+              }
+              // 保存目标
+              targetCache = target[targetIndex]
+              // 插入
+              if (dropPosition < 0) {
+                target.splice(targetIndex, 1, cache, targetCache)
+              } else {
+                target.splice(targetIndex, 1, targetCache, cache)
+              }
+              // 清理占位
+              for (let i = 0; i < target.length; i++) {
+                const item = target[i]
+                if (item.placeHold) {
+                  target.splice(i, 1)
+                  break
+                }
+              }
+              break
+            case 'container_page':
+              // 移动容器页面
+              // 拿到父容器和目标Index
+              if (dropLevel.type === 'container_page') {
+                target = lowcodeUtils.getContainerPageRow(dropKey, this.config)
+                for (let i = 0; i < target.length; i++) {
+                  const item = target[i]
+                  if (item.type === 'container_page' && item.page[0].id === dropKey) {
+                    targetIndex = i
+                    break
+                  }
+                }
+              } else {
+                target = lowcodeUtils.getRowByComponentId(dropKey, this.config)
+                for (let i = 0; i < target.length; i++) {
+                  const item = target[i]
+                  if (item.id === dropKey) {
+                    targetIndex = i
+                    break
+                  }
+                }
+              }
+              // 保存目标
+              targetCache = target[targetIndex]
+              // 插入
+              if (dropPosition < 0) {
+                target.splice(targetIndex, 1, cache, targetCache)
+              } else {
+                target.splice(targetIndex, 1, targetCache, cache)
+              }
+              // 清理占位
+              for (let i = 0; i < target.length; i++) {
+                const item = target[i]
+                if (item.placeHold) {
+                  target.splice(i, 1)
+                  break
+                }
+              }
+          }
+          break
+        case 'higher':
+          // 2.高一级插
+          switch (dragLevel.type) {
+            case 'row':
+              // 行插页
+              target = lowcodeUtils.getPageConfigById(dropKey, this.config)
+              target.body.push(cache)
+              for (let i = 0; i < father.body.length; i++) {
+                const item = father.body[i]
+                if (item.placeHold) {
+                  father.body.splice(i, 1)
+                  break
+                }
+              }
+              break
+            case 'item':
+              // 组件插行
+              rowConfig = lowcodeUtils.getPageIdAndRowIndexByRowId(dropKey)
+              target = lowcodeUtils.getRowByRowId(rowConfig.pageId, rowConfig.rowIndex - 1, this.config)
+              target.push(cache)
+              for (let i = 0; i < father.length; i++) {
+                if (father[i].placeHold) {
+                  father.splice(i, 1)
+                  break
+                }
+              }
+              break
+            case 'container_page':
+              // 子页面插行
+              rowConfig = lowcodeUtils.getPageIdAndRowIndexByRowId(dropKey)
+              target = lowcodeUtils.getRowByRowId(rowConfig.pageId, rowConfig.rowIndex - 1, this.config)
+              target.push(cache)
+              for (let i = 0; i < father.length; i++) {
+                if (father[i].placeHold) {
+                  father.splice(i, 1)
+                  break
+                }
+              }
+              break
+          }
+          break
+        case 'rowToContainer':
+          // 3.行插子页面
+          target = lowcodeUtils.getContainerPageOuterByContainerPageId(dropKey, this.config)
+          target.page[0].body.push(cache)
+          for (let i = 0; i < father.body.length; i++) {
+            const item = father.body[i]
+            if (item.placeHold) {
+              father.body.splice(i, 1)
+              break
+            }
+          }
+          break
+      }
+
+      this.refreshOrganization()
+    },
+    cleanPlaceHolder (config) {
+      for (let i = 0; i < config.page.length; i++) {
+        const page = config.page[i]
+        if (page.placeHold) {
+          config.page.splice(i, 1)
+          return true
+        }
+        for (let j = 0; j < page.body.length; j++) {
+          const row = page.body[j]
+          if (row.placeHold) {
+            page.splice(j, 1)
+            return true
+          }
+          for (let k = 0; k < row.length; k++) {
+            const item = row[k]
+            if (item.placeHold) {
+              row.splice(k, 1)
+              return true
+            }
+            if (item === 'container_page') {
+              const flag = this.cleanPlaceHolder(item)
+              if (flag) {
+                return true
+              }
+            }
+          }
+        }
+      }
+    },
+    // 主页面标签切换
+    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
+          this.refreshOrganization()
+          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') {
+        const page = lowcodeUtils.getPageConfigById(id, this.config)
+        this.deletePage(page)
+      } else if (type === 'component') {
+        this.deleteComponent(id)
+      } else if (type === 'row') {
+        this.deleteRow(id)
+      } else if (type === 'container_page') {
+        this.deleteContainerPage(id)
+      }
+    },
+    deleteContainerPage (id) {
+      console.warn('id', id)
+      const target = lowcodeUtils.getContainerPageOuterByContainerPageId(id, this.config)
+      console.warn('target', target)
+      target.type = 'container'
+      delete target.page
+      this.targetContainer = undefined
+      this.editorPropertiesConfig = {}
+      this.refreshOrganization()
+    },
+    // 删除行
+    deleteRow (id) {
+      const pageId = id.substring(0, id.length - 2)
+      const rowId = id.substring(id.length - 1)
+      const page = lowcodeUtils.getPageConfigById(pageId, this.config)
+      page.body.splice(rowId - 1, 1)
+      this.targetContainer = undefined
+      this.editorPropertiesConfig = {}
+      this.refreshOrganization()
+    },
+    // 删除页面容器
+    deletePage (page) {
+      console.warn('123', page)
+      page.body.forEach(row => {
+        row.forEach(item => {
+          if (item.type === 'container_page') {
+            this.deletePage(item.page)
+          } else {
+            delete this.$children[0]._provided.componentsMap[item.id]
+          }
+        })
+      })
+      for (let i = 0; i < this.config.page.length; i++) {
+        if (this.config.page[i].id === page.id) {
+          this.config.page.splice(i, 1)
+          this.targetContainer = undefined
+          this.editorPropertiesConfig = {}
+          this.refreshOrganization()
+          return
+        }
+      }
+    },
+    // 删除组件
+    deleteComponent (id, addOnSpan = true) {
+      const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
+      const target = lowcodeUtils.getComponentConfig(id, this.config)
+      const deletedSpan = target.span
+      let index
+      for (let i = 0; i < row.length; i++) {
+        if (target.id === row[i].id) {
+          index = i
+          break
+        }
+      }
+      row.splice(index, 1)
+      if (addOnSpan) {
+        // 如果该组件之前还有组件，将该组件的span加给之前的组件
+        if (index !== 0) {
+          row[index - 1].span += deletedSpan
+        } else if (row.length > 0) {
+          row[0].span += deletedSpan
+        }
+      }
+      // 从注册的全局Map中删除
+      delete this.$children[0]._provided.componentsMap[id]
+      this.targetContainer = undefined
+      this.editorPropertiesConfig = {}
+      this.refreshOrganization()
+    },
+    // 打开JS函数编辑器
+    openEventJSEditor () {
+      if (!this.eventEditorContent.JSFunction) {
+        this.eventEditorContent.JSFunction = JSEventFunctionTemplate
+      }
+      this.showJSEventEditor = true
+    },
+    openEventLifeCycleJSEditor () {
+      if (!this.eventEditorContent.LifeCycleFunction) {
+        this.eventEditorContent.LifeCycleFunction = LifeCycleFunctionTemplate
+      }
+      this.showLifeCycleFunctionEditor = 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 () {
+      const IDs = Object.keys(this.$children[0]._provided.componentsMap)
+      const result = []
+      IDs.forEach(id => {
+        const config = lowcodeUtils.getConfig(id, this.config)
+        if (config.name) {
+          result.push(config.name)
+        } else {
+          result.push(config.id)
+        }
+      })
+      return result
+    },
+    // 容器删除
+    handleContainerDelete (id) {
+      let index
+      const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
+      for (let i = 0; i < row.length; i++) {
+        const item = row[i]
+        if (item.id === id) {
+          index = i
+          break
+        }
+      }
+      row.splice(index, 1)
+      this.targetContainer = undefined
+      // 如果删除后只剩一个容器，将该容器span设置为24
+      if (row.length === 1) {
+        row[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()
+    },
+    handleEventEditorLifeCycleChange (lifeCycleName) {
+      this.eventEditorContent.lifeCycle = lifeCycleName
+    },
+    // 事件编辑器中，事件类型改变
+    handleEventEditorEventTypeChange (type) {
+      const componentsMap = this.$children[0]._provided.componentsMap
+      this.eventEditorContent.eventType = type
+      this.logicParamTransferDataSource = []
+      // 如果事件为运行Logic将组件加入穿梭框
+      if (type === 'runLogic') {
+        const keys = Object.keys(componentsMap)
+        keys.forEach(key => {
+          const name = lowcodeUtils.getComponentNameById(key, this.config)
+          this.logicParamTransferDataSource.push({
+            key: key,
+            title: name,
+          })
+        })
+        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) {
+        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 + '_' + lowcodeUtils.nanoidWithoutSymbol(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_page',
+          //     span: 12,
+          //     id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
+          //     page: [
+          //       {
+          //         id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
+          //         type: 'page',
+          //         body: [
+          //           [
+          //             {
+          //               type: 'container',
+          //               span: 24,
+          //               id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+          //             }
+          //           ]
+          //         ]
+          //       }
+          //     ]
+          //   },
+          //   {
+          //     type: 'container_page',
+          //     span: 12,
+          //     id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
+          //     page: [
+          //       {
+          //         id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
+          //         type: 'page',
+          //         body: [
+          //           [
+          //             {
+          //               type: 'container',
+          //               span: 24,
+          //               id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+          //             }
+          //           ]
+          //         ]
+          //       }
+          //     ]
+          //   }
+          // ])
+          this.config.page[targetIndex].body.push([
+            {
+              type: 'container',
+              span: 12,
+              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+            },
+            {
+              type: 'container',
+              span: 12,
+              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+            }
+          ])
+        } else {
+          this.config.page[targetIndex].body.push([{
+            type: 'container',
+            span: 24,
+            id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+          }])
+        }
+      } else {
+        // 如果目标是容器
+        const row = lowcodeUtils.getRowConfigByComponentId(this.targetContainer.id, this.config)
+        const targetInRowIndex = lowcodeUtils.getComponentInRowIndex(this.targetContainer.id, this.config)
+        const targetItem = lowcodeUtils.getComponentConfig(this.targetContainer.id, this.config)
+        const maxWidth = targetItem.span
+        // 确认是水平拆分还是垂直拆分
+        this.$confirm({
+          content: '是否为水平拆分',
+          onOk: () => {
+            // 将目标容器一分为二
+            row.splice(targetInRowIndex, 1, {
+              type: 'container',
+              span: Math.floor(maxWidth / 2),
+              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+            }, {
+              type: 'container',
+              span: Math.ceil(maxWidth / 2),
+              id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+            })
+            this.targetContainer = undefined
+            this.refreshOrganization()
+          },
+          onCancel: () => {
+            targetItem.type = 'container_page'
+            targetItem.page = [{
+              id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
+              type: 'page',
+              body: [
+                [{
+                  type: 'container',
+                  span: 24,
+                  id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+                }],
+                [{
+                  type: 'container',
+                  span: 24,
+                  id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+                }]
+              ]
+            }]
+            this.targetContainer = undefined
+            this.refreshOrganization()
+          }
+        })
+      }
+      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()
+          target.props[key] = input === 'true' || input !== '0'
+        }
+        this.renderPreview = true
+        this.renderModalPreview = true
+        this.renderDrawPreview = true
+      }, 1500)
+    },
+    // 切换预览模式
+    previewModeActive () {
+      // TODO 新标签页中预览
+      // const params = {
+      //   config: this.config
+      // }
+      // const routeData = this.$router.resolve({
+      //   path: '/lowCodeReview',
+      //   query: params
+      // })
+      // window.open(routeData.location.path, '_blank')
+      this.preview = true
+    },
+    // 切换编辑模式
+    editModeActive () {
+      this.preview = false
+    },
+    // 选中某个组件
+    clickComponentInEditor (configItem) {
+      // 同步选中架构
+      if (configItem.type === 'container_page') {
+        this.selectTreeNode = 'container_page_' + configItem.page[0].id
+      } else {
+        this.selectTreeNode = configItem.id
+      }
+      this.editorPropertiesConfig = {}
+      // 如果选中的是容器
+      if (configItem.type === 'container') {
+        // 如果已经选中，则反选，selected属性用于改变容器样式
+        if (configItem.selected) {
+          configItem.selected = false
+          this.targetContainer = undefined
+        } else {
+          // 将所有已选中组件取消选择
+          lowcodeUtils.unCheckAll(this.config)
+          // 将目标设置为选定
+          configItem.selected = true
+          this.targetContainer = configItem
+        }
+        return
+      }
+      // 如果选中的是容器页面
+      if (configItem.type === 'container_page') {
+        this.editorPropertiesConfig = configItem
+        this.editorPropertiesConfig.props = {}
+        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'
+      }
+    },
+    twink (id) {
+      const allRefs = Object.keys(this.$refs)
+      allRefs.forEach(ref => {
+        this.$refs[ref].twink(id)
+      })
+    },
+    // 点击测试按钮
+    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: 'page_KBjw2i',
+          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: 'page_FgItf6',
+          type: 'page',
+          title: '22',
+          body: [
+            [
+              {
+                type: 'container',
+                span: 4,
+                id: 'container_ir2gR2',
+                selected: false
+              },
+              {
+                type: 'container_page',
+                span: 10,
+                id: 'container_xIRHGg',
+                selected: true,
+                page: [
+                  {
+                    id: 'container_page_IgYw9u',
+                    type: 'page',
+                    body: [
+                      [
+                        {
+                          type: 'container',
+                          span: 24,
+                          id: 'container_tqVFCL'
+                        }
+                      ],
+                      [
+                        {
+                          type: 'container',
+                          span: 24,
+                          id: 'container_i8VXCZ'
+                        }
+                      ]
+                    ]
+                  }
+                ]
+              },
+              {
+                type: 'container',
+                span: 10,
+                id: 'container_PT9n3Q',
+                selected: false
+              }
+            ],
+            [
+              {
+                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>