页面集成（高级）

本页面向深度集成场景，说明如何在 VEEditor 外层封装完整业务能力：

• 页面打开与保存
• 导入与导出
• 预览跳转
• 自定义工具栏按钮（如站号选择）
• 与弹窗组件、状态管理联动

适用场景

当你需要将编辑器接入现有平台，并复用已有 API、权限、弹窗与业务流程时，建议使用本页方案。

WARNING

高级方案涉及多个回调、多个弹窗和状态同步。建议先完成 页面集成（基础），再切换到本页。

事件回调职责划分

回调事件	建议职责
open-page	打开页面选择弹窗，读取 JSON 后调用 loadPage
save-page	区分新增/编辑，组织参数并调用保存接口
preview	按业务路由跳转预览页
import-json	打开导入弹窗，读取 JSON 并调用 setJsonData
export-json	打开导出弹窗，透传当前 JSON
clickCustomButton	响应自定义按钮动作（如打开站号选择）

集成建议

1) 页面命名与分层

• 推荐业务容器组件命名：PageDesigner.vue
• 内部编辑器组件保持：VEEditor
• 将「弹窗控制」「API 调用」「按钮注册」集中在容器层，避免分散到多个子组件

2) 打开/保存策略

• 使用 openIdSet 记录已打开页面 ID
• 保存时按是否已打开区分「编辑保存」与「首次保存」
• 编辑保存时从 sessionStorage 读取当前缓存，减少跨层数据搬运

3) 自定义按钮策略

• 按钮对象建议统一包含：title/name/code/needDataFlag/content
• code 作为唯一分发键，在 clickCustomButton 中集中处理
• 新增按钮时只需扩展注册数组与分发逻辑

4) 尺寸与响应式

• 监听主容器尺寸变化并同步 VEEditor 外层容器宽高
• 尽量通过计算属性管理样式，避免多处直接操作 DOM

深度集成示例（节选）

以下示例与常见生产接入方式一致，包含核心事件与自定义按钮流程。

<template>
  <div ref="appContainerRef" class="app-container" :style="containerStyle">
    <VEEditor
      ref="veEditorRef"
      @import-json="importJson"
      @export-json="exportJson"
      @preview="preview"
      @open-page="openPage"
      @save-page="savePage"
      @clickCustomButton="clickCustomButton"
    />

    <PageCatDialog ref="pageCatRef" :width="1200" />
    <ImExportDialog ref="imExportRef" :width="900" />
    <StationSelectDialog ref="stationSelectRef" :width="900" />
  </div>
</template>

// 关键逻辑示意：注册自定义按钮 + 点击分发
const customButtons = [
  {
    title: '站号选择',
    name: 'stationSelect',
    code: 'stationSelect',
    needDataFlag: 'Y',
    content: '<svg><!-- ... --></svg>',
  },
]

veStore.registerCustomButtons(customButtons)

const clickCustomButton = (data) => {
  if (data && data.code === 'stationSelect') {
    stationSelectRef.value?.show()
  }
}

推荐落地顺序

1. 先接入基础版（仅保存+预览）
2. 增加打开页面与保存分流
3. 增加导入导出
4. 增加自定义按钮与业务弹窗
5. 最后补充尺寸同步和边界处理

这样可以保证每一步都可运行、可验证，降低复杂度。