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

package/dist/src/page-designer/designer.js

@@ -0,0 +1,1120 @@
+import '../../style.css';
+import { cloneDeep, isEmpty } from "lodash-es";
+import { effectScope, reactive, toRaw, markRaw, watch } from "vue";
+import util from "@epxing/core/src/runtime-utils/util";
+import storage from "@epxing/utils/src/storage";
+const { genId } = util;
+const defaultPageConfig = {};
+function getWidgetSlots(widget) {
+  const { slots } = widget || {};
+  if (!slots || typeof slots !== "object") return [];
+  return Object.keys(slots).filter((name) => slots[name] && slots[name].id).map((name) => ({ name, widget: slots[name] }));
+}
+function getWidgetChildren(widget) {
+  const { items = [] } = widget || {};
+  return [...items, ...getWidgetSlots(widget).map((slot) => slot.widget)];
+}
+function createDesigner(vueInstance) {
+  const designerEvents = /* @__PURE__ */ new Map();
+  const widgetInfoIndex = /* @__PURE__ */ new Map();
+  const templateIndex = /* @__PURE__ */ new Map();
+  let widgetIndex = /* @__PURE__ */ new Map();
+  let indexDirty = true;
+  const rebuildIndex = () => {
+    widgetIndex = /* @__PURE__ */ new Map();
+    const walk = (list, parent, slotName) => {
+      for (const item of toRaw(list) || []) {
+        const raw = toRaw(item);
+        if (!raw || !raw.id) continue;
+        if (!widgetIndex.has(raw.id)) widgetIndex.set(raw.id, { widget: raw, parent, slotName });
+        walk(raw.items, raw, "");
+        for (const slot of getWidgetSlots(raw)) walk([slot.widget], raw, slot.name);
+      }
+    };
+    walk(state.widgetList, null, "");
+    indexDirty = false;
+  };
+  const lookup = (id) => {
+    if (indexDirty) rebuildIndex();
+    return widgetIndex.get(id);
+  };
+  const asReactive = (obj) => obj ? reactive(obj) : obj;
+  let saveTimer = null;
+  const scope = effectScope(true);
+  const state = reactive({
+    version: "2.0",
+    mode: "page",
+    terminal: "pc",
+    page: {},
+    // 页面
+    widgetList: [],
+    // 组件列表
+    widgetConfig: {},
+    // 组件配置
+    templateLibrary: [],
+    // 模板列表
+    templateAttributeTree: [],
+    // 模板配置参数
+    pageConfig: {},
+    // 页面配置
+    allWidgets: [],
+    formConfig: { cssCode: "" },
+    selectedId: null,
+    selectedWidget: null,
+    selectedWidgetName: null,
+    // 选中组件名称（唯一）
+    // 悬浮组件状态
+    hoverWidgetId: null,
+    hoverWidget: null,
+    hoverParentWidget: null,
+    // 拖拽时当前悬停的放置目标 { type: 'root' | 'container', widgetId: string | null }
+    dragOverTarget: null,
+    // 当前放置目标对应的 DOM 元素，用于独立浮层定位
+    dragOverTargetElement: null,
+    vueInstance,
+    formWidget: null,
+    // 表单设计容器
+    cssClassList: [],
+    // 自定义样式列表
+    historyData: {
+      index: -1,
+      // index: 0,
+      maxStep: 20,
+      steps: []
+    },
+    initDesigner(resetFormJson) {
+      this.widgetList = [];
+      this.widgetConfig = {};
+      this.pageConfig = cloneDeep(defaultPageConfig);
+      if (!resetFormJson) {
+        this.initHistoryData();
+      }
+    },
+    clearDesigner(skipHistoryChange) {
+      const emptyWidgetListFlag = this.widgetList.length === 0;
+      this.widgetList = [];
+      this.widgetConfig = {};
+      this.selectedId = null;
+      this.selectedWidget = {};
+      this.pageConfig = cloneDeep(defaultPageConfig);
+      if (skipHistoryChange) ;
+      else if (!emptyWidgetListFlag) {
+        this.emitHistoryChange();
+      } else {
+        this.saveCurrentHistoryStep();
+      }
+    },
+    initWidgetList(componentList) {
+      this.allWidgets = markRaw([...componentList]);
+      widgetInfoIndex.clear();
+      for (const con of this.allWidgets) {
+        if (con && con.CODE) widgetInfoIndex.set(con.CODE, con);
+      }
+    },
+    initTemplateLibrary(templateLibrary) {
+      this.templateLibrary = markRaw(templateLibrary || []);
+      templateIndex.clear();
+      for (const tpl of this.templateLibrary) {
+        if (tpl && tpl.ID) templateIndex.set(tpl.ID, tpl);
+      }
+    },
+    setTemplateAttributeTree(data) {
+      this.templateAttributeTree = data;
+    },
+    loadFormJson(page) {
+      this.page = page;
+      const { isComponent, isTemplate, config: formJson = {} } = page;
+      if (isComponent) this.mode = "component";
+      if (isTemplate) this.mode = "template";
+      let modifiedFlag = false;
+      if (formJson) {
+        const { items: widgetList = [], itemConfigs: widgetConfig = {}, ...pageConfig } = formJson;
+        if (widgetList) {
+          this.widgetList = widgetList;
+          this.widgetConfig = widgetConfig;
+          modifiedFlag = true;
+        }
+        if (pageConfig) {
+          this.pageConfig = { ...pageConfig };
+          modifiedFlag = true;
+        }
+        if (pageConfig.version !== this.version) {
+          this.upgradePageConfig();
+          this.upgradeWidgetConfig();
+        }
+      }
+      this.initHistoryData();
+      if (modifiedFlag) {
+        this.emitEvent("form-json-imported", []);
+      }
+      return modifiedFlag;
+    },
+    setSelected(selected) {
+      if (!selected) {
+        this.clearSelected();
+        return;
+      }
+      this.selectedWidget = selected;
+      if (selected.id) {
+        this.selectedId = selected.id;
+      }
+    },
+    // 根据组件 id 设置悬浮组件
+    setHoverById(id) {
+      if (!id) {
+        this.clearHover();
+        return;
+      }
+      const widget = this.getWidgetItemById(id);
+      if (!widget) {
+        this.clearHover();
+        return;
+      }
+      const parentWidget = this.findParentWidget(id);
+      this.hoverWidgetId = id;
+      this.hoverWidget = widget;
+      this.hoverParentWidget = parentWidget || null;
+      this.emitEvent("hover-change", {
+        widget,
+        parentWidget: this.hoverParentWidget
+      });
+    },
+    // 清理悬浮组件状态
+    clearHover() {
+      this.hoverWidgetId = null;
+      this.hoverWidget = null;
+      this.hoverParentWidget = null;
+      this.emitEvent("hover-change", {
+        widget: null,
+        parentWidget: null
+      });
+    },
+    setDragOverTarget(target) {
+      this.dragOverTarget = target;
+    },
+    setDragOverTargetElement(el) {
+      this.dragOverTargetElement = el;
+    },
+    clearDragOverTarget() {
+      this.dragOverTarget = null;
+      this.dragOverTargetElement = null;
+    },
+    // 拖拽插入位置线 { top, left, width } 视口坐标，用于 fixed 定位
+    dragInsertLine: null,
+    setDragInsertLine(rect) {
+      this.dragInsertLine = rect;
+    },
+    clearDragInsertLine() {
+      this.dragInsertLine = null;
+    },
+    // 预览区域拖拽状态（用于同步到大纲树）
+    previewDragTarget: null,
+    // { widgetId, index, position }
+    previewDragTargetThrottle: null,
+    // 节流定时器
+    setPreviewDragTarget(target) {
+      const current = this.previewDragTarget;
+      const isSame = current && target && current.widgetId === target.widgetId && current.index === target.index && current.position === target.position;
+      if (isSame) return;
+      if (this.previewDragTargetThrottle) {
+        clearTimeout(this.previewDragTargetThrottle);
+      }
+      this.previewDragTargetThrottle = setTimeout(() => {
+        this.previewDragTarget = target;
+        this.previewDragTargetThrottle = null;
+      }, 16);
+    },
+    clearPreviewDragTarget() {
+      if (this.previewDragTargetThrottle) {
+        clearTimeout(this.previewDragTargetThrottle);
+        this.previewDragTargetThrottle = null;
+      }
+      this.previewDragTarget = null;
+    },
+    // 统一的拖拽状态管理
+    dragState: {
+      isDragging: false,
+      // 是否正在拖拽
+      isNativeDragging: false,
+      // 是否是原生 HTML5 拖拽
+      dragSource: null,
+      // 拖拽来源：'library' | 'preview' | 'template' | 'tree'
+      dragData: null,
+      // 拖拽数据
+      ghostVisible: false,
+      // 拖拽悬浮窗是否可见
+      ghostTitle: "",
+      // 悬浮窗标题
+      ghostIcon: "",
+      // 悬浮窗图标
+      ghostPosition: { x: 0, y: 0 }
+      // 悬浮窗位置
+    },
+    // 开始拖拽
+    startDrag(options = {}) {
+      const { source, data, title, icon, x, y, isNative = false } = options;
+      this.dragState.isDragging = true;
+      this.dragState.isNativeDragging = isNative;
+      this.dragState.dragSource = source;
+      this.dragState.dragData = data;
+      this.dragState.ghostVisible = true;
+      this.dragState.ghostTitle = title || "";
+      this.dragState.ghostIcon = icon || "";
+      this.dragState.ghostPosition = { x: x || 0, y: y || 0 };
+      if (source === "preview" && this.vueInstance) {
+        this.emitEvent("close-left-panel");
+      }
+      this.emitEvent("drag-state-change", { ...this.dragState });
+    },
+    // 更新拖拽悬浮窗位置
+    updateDragGhostPosition(x, y) {
+      if (this.dragState.isDragging) {
+        this.dragState.ghostPosition = { x, y };
+        this.emitEvent("drag-ghost-move", { x, y });
+      }
+    },
+    // 结束拖拽
+    endDrag() {
+      this.dragState.isDragging = false;
+      this.dragState.isNativeDragging = false;
+      this.dragState.dragSource = null;
+      this.dragState.dragData = null;
+      this.dragState.ghostVisible = false;
+      this.dragState.ghostTitle = "";
+      this.dragState.ghostIcon = "";
+      this.dragState.ghostPosition = { x: 0, y: 0 };
+      this.clearDragOverTarget();
+      this.clearDragInsertLine();
+      this.clearPreviewDragTarget();
+      this.emitEvent("drag-state-change", { ...this.dragState });
+    },
+    // 获取当前拖拽状态
+    getDragState() {
+      return { ...this.dragState };
+    },
+    // ========== 统一的拖拽处理方法 ==========
+    /**
+     * 解析拖拽数据
+     * @param {DataTransfer} dataTransfer - 拖拽事件的 dataTransfer 对象
+     * @returns {Object|null} 解析后的拖拽数据 { type, payload }
+     */
+    parseDragData(dataTransfer) {
+      if (!dataTransfer || !dataTransfer.types || !dataTransfer.types.includes("text/plain")) {
+        return null;
+      }
+      try {
+        const raw = dataTransfer.getData("text/plain");
+        if (!raw) return null;
+        if (raw.startsWith("page-designer-widget:")) {
+          const payload = JSON.parse(raw.slice("page-designer-widget:".length));
+          return { type: "library", payload };
+        }
+        if (raw.startsWith("page-designer-template:")) {
+          const payload = JSON.parse(raw.slice("page-designer-template:".length));
+          return { type: "template", payload };
+        }
+        const data = JSON.parse(raw);
+        if (data && data.type === "widget-reorder") {
+          return { type: "reorder", payload: data };
+        }
+        return null;
+      } catch (e) {
+        return null;
+      }
+    },
+    /**
+     * 处理拖拽放置
+     * @param {Object} options - 放置选项
+     * @param {DataTransfer} options.dataTransfer - 拖拽数据
+     * @param {Object} options.target - 放置目标 { type: 'root'|'container'|'slot', widgetId, index, slotName }
+     * @returns {boolean} 是否成功处理
+     */
+    handleDrop(options = {}) {
+      const { dataTransfer, target } = options;
+      if (!dataTransfer || !target) {
+        return false;
+      }
+      const dragData = this.parseDragData(dataTransfer);
+      if (!dragData) {
+        return false;
+      }
+      const { type, payload } = dragData;
+      switch (type) {
+        case "library":
+          return this.handleLibraryDrop(payload, target);
+        case "template":
+          return this.handleTemplateDrop(payload, target);
+        case "reorder":
+          return this.handleReorderDrop(payload, target);
+        default:
+          return false;
+      }
+    },
+    /**
+     * 处理组件库拖拽放置
+     * @param {Object} payload - 组件数据 { code, title, custom }
+     * @param {Object} target - 放置目标
+     */
+    handleLibraryDrop(payload, target) {
+      const { code, title, custom } = payload;
+      if (!code) return false;
+      const widgetInfo = this.getWidgetByType(code) || {};
+      const widget = {
+        id: this.genId(code),
+        contentType: code,
+        title: title || widgetInfo.TITLE
+      };
+      if (custom) widget.type = "custom";
+      if (widgetInfo.CODE === "chart") {
+        this.updateWidgetConfig(widget.id, { metaId: this.page.metaId });
+      }
+      this.insertWidget(widget, target);
+      this.setSelected(widget);
+      this.emitHistoryChange();
+      return true;
+    },
+    /**
+     * 处理模板库拖拽放置
+     * @param {Object} payload - 模板数据 { items, itemConfigs, templateJs }
+     * @param {Object} target - 放置目标
+     */
+    handleTemplateDrop(payload, target) {
+      const { items, itemConfigs, templateJs } = payload;
+      if (!items || !items.length) return false;
+      if (target.type === "slot" && items.length > 1) {
+        this.vueInstance && this.vueInstance.$message && this.vueInstance.$message("插槽只能放置一个组件");
+        return false;
+      }
+      this.insertWidgets(items, target);
+      this.mergeWidgetConfig(itemConfigs);
+      if (templateJs) {
+        this.mergeTemplateJs(templateJs);
+      }
+      this.setSelected(items[0]);
+      this.emitHistoryChange();
+      return true;
+    },
+    /**
+     * 处理组件重排序拖拽放置
+     * @param {Object} payload - 拖拽数据 { widgetId, parentWidgetId }
+     * @param {Object} target - 放置目标
+     */
+    handleReorderDrop(payload, target) {
+      const { widgetId, parentWidgetId } = payload;
+      if (!widgetId) {
+        return false;
+      }
+      const sourceWidget = this.getWidgetItemById(widgetId);
+      if (!sourceWidget) {
+        return false;
+      }
+      const sourceParentId = parentWidgetId || null;
+      const targetParentId = target.widgetId || null;
+      if (target.type === "slot") {
+        if (this.isDescendantWidget(target.widgetId, sourceWidget)) return false;
+        this.removeWidgetFromParent(sourceWidget);
+        if (!this.insertWidget(sourceWidget, target)) return false;
+        this.setSelected(sourceWidget);
+        this.emitHistoryChange();
+        return true;
+      }
+      if (this.findWidgetSlot(widgetId)) {
+        return this.moveWidgetToAnotherContainer(sourceWidget, sourceParentId, target);
+      }
+      if (sourceParentId === targetParentId) {
+        return this.moveWidgetInSameContainer(sourceWidget, target);
+      }
+      return this.moveWidgetToAnotherContainer(sourceWidget, sourceParentId, target);
+    },
+    /**
+     * 在同一容器内移动组件
+     * @param {Object} widget - 要移动的组件
+     * @param {Object} target - 目标位置
+     */
+    moveWidgetInSameContainer(widget, target) {
+      const list = target.widgetId ? this.getWidgetItemById(target.widgetId).items : this.widgetList;
+      if (!list) {
+        return false;
+      }
+      const sourceIndex = list.findIndex((w) => w.id === widget.id);
+      if (sourceIndex === -1) {
+        return false;
+      }
+      let targetIndex = target.index;
+      if (targetIndex > sourceIndex) {
+        targetIndex = targetIndex + 1;
+      }
+      if (sourceIndex === targetIndex || sourceIndex + 1 === targetIndex) {
+        return false;
+      }
+      list.splice(sourceIndex, 1);
+      if (targetIndex > sourceIndex) {
+        targetIndex = targetIndex - 1;
+      }
+      list.splice(targetIndex, 0, widget);
+      if (target.widgetId) {
+        this.updateWidget(target.widgetId, { items: [...list] });
+      } else {
+        this.widgetList = [...list];
+      }
+      this.setSelected(widget);
+      this.emitHistoryChange();
+      return true;
+    },
+    /**
+     * 跨容器移动组件
+     * @param {Object} widget - 要移动的组件
+     * @param {string} sourceParentId - 源容器 ID
+     * @param {Object} target - 目标位置
+     */
+    moveWidgetToAnotherContainer(widget, sourceParentId, target) {
+      const sourceSlot = this.findWidgetSlot(widget.id);
+      if (sourceSlot) {
+        this.clearWidgetSlot(sourceSlot.parent, sourceSlot.slotName);
+      } else if (sourceParentId) {
+        const sourceParent = this.getWidgetItemById(sourceParentId);
+        if (sourceParent && sourceParent.items) {
+          const sourceList = [...sourceParent.items];
+          const sourceIndex = sourceList.findIndex((w) => w.id === widget.id);
+          if (sourceIndex !== -1) {
+            sourceList.splice(sourceIndex, 1);
+            this.updateWidget(sourceParent.id, { items: sourceList });
+          }
+        }
+      } else {
+        const rootList = [...this.widgetList];
+        const sourceIndex = rootList.findIndex((w) => w.id === widget.id);
+        if (sourceIndex !== -1) {
+          rootList.splice(sourceIndex, 1);
+          this.widgetList = rootList;
+        }
+      }
+      this.insertWidget(widget, target);
+      this.setSelected(widget);
+      this.emitHistoryChange();
+      return true;
+    },
+    /**
+     * 插入单个组件到指定位置
+     * @param {Object} widget - 要插入的组件
+     * @param {Object} target - 目标位置 { type: 'root'|'container'|'slot', widgetId, index, slotName }
+     */
+    insertWidget(widget, target) {
+      if (target.type === "slot") {
+        return this.setWidgetSlot(target.widgetId, target.slotName, widget);
+      }
+      if (target.type === "root" || !target.widgetId) {
+        const list = [...this.widgetList];
+        list.splice(target.index, 0, widget);
+        this.widgetList = list;
+      } else {
+        const container = this.getWidgetItemById(target.widgetId);
+        if (!container) return false;
+        if (!container.items) {
+          this.updateWidget(container.id, { items: [] });
+        }
+        const list = [...container.items || []];
+        list.splice(target.index, 0, widget);
+        this.updateWidget(container.id, { items: list });
+      }
+      return true;
+    },
+    /**
+     * 插入多个组件到指定位置
+     * @param {Array} widgets - 要插入的组件数组
+     * @param {Object} target - 目标位置
+     */
+    insertWidgets(widgets, target) {
+      if (!widgets || !widgets.length) return false;
+      if (target.type === "slot") {
+        return this.insertWidget(widgets[0], target);
+      }
+      if (target.type === "root" || !target.widgetId) {
+        const list = [...this.widgetList];
+        list.splice(target.index, 0, ...widgets);
+        this.widgetList = list;
+      } else {
+        const container = this.getWidgetItemById(target.widgetId);
+        if (!container) return false;
+        if (!container.items) {
+          this.updateWidget(container.id, { items: [] });
+        }
+        const list = [...container.items || []];
+        list.splice(target.index, 0, ...widgets);
+        this.updateWidget(container.id, { items: list });
+      }
+      return true;
+    },
+    /**
+     * 合并模板 JS 到页面 JS
+     * @param {string} templateJs - 模板的 JS 代码
+     */
+    mergeTemplateJs(templateJs) {
+      let { JS = "" } = this.pageConfig;
+      const result = JS.match(/export\sfunction\s(\w+)/g);
+      const events = [];
+      if (result) {
+        result.forEach((item) => {
+          events.push(item.replace(/export\sfunction\s/, ""));
+        });
+      }
+      const templateJsResult = templateJs.split(/export\s+function\s+/);
+      templateJsResult.forEach((item) => {
+        const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, "");
+        if (funtionStr.replace(/[\n\s]+/g, "").length > 0) {
+          const funtionName = funtionStr.split(/\s+\(/)[0];
+          if (![...new Set(events)].includes(funtionName)) {
+            JS += "export function " + funtionStr.replace(/^\w+/, funtionName);
+          }
+        }
+      });
+      this.updatePageConfig({ JS });
+    },
+    updateSelectedWidgetNameAndLabel(selectedWidget, newName, newLabel) {
+      this.selectedWidgetName = newName;
+      if (!!newLabel && Object.keys(selectedWidget.options).indexOf("label") > -1) {
+        selectedWidget.options.label = newLabel;
+      }
+    },
+    clearSelected() {
+      this.selectedId = null;
+      this.selectedWidgetName = null;
+      this.selectedWidget = null;
+    },
+    // 检查组件是否可以移动（只有字段组件可以拖入子表单）
+    checkWidgetMove(evt) {
+      var _a, _b;
+      if ((_a = evt.draggedContext) == null ? void 0 : _a.element) {
+        const wgCategory = evt.draggedContext.element.category;
+        if (((_b = evt.to) == null ? void 0 : _b.className) === "sub-form-table" && wgCategory === "container") {
+          return false;
+        }
+      }
+      return true;
+    },
+    // 检查字段组件是否可以移动
+    checkFieldMove(evt) {
+      var _a, _b;
+      if ((_a = evt.draggedContext) == null ? void 0 : _a.element) {
+        const wgType = String(evt.draggedContext.element.type);
+        if (((_b = evt.to) == null ? void 0 : _b.className) === "sub-form-table" && wgType === "slot") {
+          return false;
+        }
+      }
+      return true;
+    },
+    // 走索引 O(1)；多个同 CODE 取最后一个（与原 forEach 覆盖语义一致），未命中返回 null
+    getWidgetByType(typeName, type) {
+      if (type === "template") return templateIndex.get(typeName) || null;
+      return widgetInfoIndex.get(typeName) || null;
+    },
+    getContainerByType(typeName) {
+      let foundCon = null;
+      this.allWidgets.forEach((con) => {
+        if (con.CONTAINER === "1" && !!con.type && con.type === typeName) {
+          foundCon = con;
+        }
+      });
+      return foundCon;
+    },
+    getFieldWidgetByType(typeName) {
+      let foundWidget = null;
+      this.allWidgets.forEach((widget) => {
+        if (widget.CONTAINER !== "1" && !!widget.type && widget.type === typeName) {
+          foundWidget = widget;
+        }
+      });
+      return foundWidget;
+    },
+    hasConfig(widget, configName) {
+      let originalWidget = null;
+      if (widget.CONTAINER === "1") {
+        originalWidget = this.getContainerByType(widget.type);
+      } else {
+        originalWidget = this.getFieldWidgetByType(widget.type);
+      }
+      if (!originalWidget || !originalWidget.options) {
+        return false;
+      }
+      return Object.keys(originalWidget.options).indexOf(configName) > -1;
+    },
+    // 走索引；未命中返回 undefined（与原递归实现一致）
+    getWidgetItemById(id) {
+      const entry = lookup(id);
+      return entry ? asReactive(entry.widget) : void 0;
+    },
+    /**
+     * 查找组件所在的插槽位置
+     * @param { String } targetId 组件 id
+     * @returns { { parent: Object, slotName: String } | null } 不在插槽里返回 null
+     */
+    findWidgetSlot(targetId) {
+      const entry = lookup(targetId);
+      return entry && entry.slotName ? { parent: asReactive(entry.parent), slotName: entry.slotName } : null;
+    },
+    /**
+     * 判断 targetId 是否在 widget 自身或其子孙（含插槽）里，
+     * 用于阻止把组件拖进自己的插槽造成死循环
+     */
+    isDescendantWidget(targetId, widget) {
+      if (!widget || !targetId) return false;
+      if (widget.id === targetId) return true;
+      return getWidgetChildren(widget).some((child) => this.isDescendantWidget(targetId, child));
+    },
+    /**
+     * 往插槽里放组件（已有组件时替换）
+     */
+    setWidgetSlot(ownerId, slotName, widget) {
+      const owner = this.getWidgetItemById(ownerId);
+      if (!owner || !slotName) return false;
+      this.updateWidget(ownerId, { slots: { ...owner.slots || {}, [slotName]: widget } });
+      return true;
+    },
+    /**
+     * 清空插槽（插槽全空时把 slots 一起删掉，避免配置里留空对象）
+     */
+    clearWidgetSlot(owner, slotName) {
+      if (!owner || !owner.slots) return false;
+      const slots = { ...owner.slots };
+      delete slots[slotName];
+      this.updateWidget(owner.id, { slots: Object.keys(slots).length > 0 ? slots : null });
+      return true;
+    },
+    /**
+     * 把组件从当前位置摘掉（插槽 / 容器 / 根级都支持），用于移动
+     */
+    removeWidgetFromParent(widget) {
+      const slotInfo = this.findWidgetSlot(widget.id);
+      if (slotInfo) {
+        return this.clearWidgetSlot(slotInfo.parent, slotInfo.slotName);
+      }
+      const parent = this.findParentWidget(widget.id);
+      if (parent && parent.items) {
+        const list = [...parent.items];
+        const index2 = list.findIndex((item) => item.id === widget.id);
+        if (index2 === -1) return false;
+        list.splice(index2, 1);
+        this.updateWidget(parent.id, { items: list });
+        return true;
+      }
+      const rootList = [...this.widgetList];
+      const index = rootList.findIndex((item) => item.id === widget.id);
+      if (index === -1) return false;
+      rootList.splice(index, 1);
+      this.widgetList = rootList;
+      return true;
+    },
+    updateWidget(key, property) {
+      const widget = this.getWidgetItemById(key);
+      if (widget) {
+        for (const key2 in property) {
+          if (property[key2] === null) {
+            delete widget[key2];
+          } else {
+            widget[key2] = property[key2];
+          }
+        }
+      }
+    },
+    updateWidgetConfig(key, configs, type) {
+      const property = {};
+      for (const configKey in configs) {
+        if (configKey.includes("componentName") || configKey === "span" || configKey === "flex") {
+          property[configKey.replace("componentName", "title")] = configs[configKey];
+        }
+      }
+      this.updateWidget(key, property);
+      const entry = this.widgetConfig[key];
+      if (type === "cover" || !entry) {
+        const next = { ...configs };
+        for (const k in next) {
+          if (next[k] === null) delete next[k];
+        }
+        this.widgetConfig[key] = next;
+        return;
+      }
+      for (const k in configs) {
+        if (configs[k] === null) delete entry[k];
+        else entry[k] = configs[k];
+      }
+    },
+    // 批量并入多条组件配置（模板拖入 / 复制 / 拆分模板），逐 key 新增而不整体替换 widgetConfig
+    mergeWidgetConfig(configs) {
+      for (const key in configs) {
+        if (configs[key] !== void 0) this.widgetConfig[key] = configs[key];
+      }
+    },
+    updatePageConfig(configs) {
+      this.pageConfig = { ...this.pageConfig, ...configs };
+    },
+    upgradeWidgetConfig() {
+      const ids = [];
+      const upgradeWidget = (arr, parentId) => {
+        arr.forEach((item) => {
+          const oldId = item.id;
+          if (parentId) {
+            while (ids.includes(item.id)) {
+              const code = item.contentType.replace(/-/g, "_");
+              item.id = code + "_" + util.genId();
+            }
+            ids.push(item.id);
+            item.i = item.id;
+            if (!item.css && !isEmpty(item.style)) {
+              let cssStr = ":current {";
+              for (const key in item.style) {
+                const kebabCase = key.replace(/([A-Z])/g, ($1) => {
+                  return "-" + $1.toLocaleLowerCase();
+                });
+                cssStr += `\r
+  ${kebabCase}: ${item.style[key]};`;
+              }
+              cssStr += "\r\n}";
+              item.css = cssStr;
+              delete item.style;
+            }
+            const oldKey = parentId + "-" + oldId;
+            const oldWidgetConifg = this.widgetConfig[oldKey];
+            if (oldWidgetConifg) {
+              delete this.widgetConfig[oldKey];
+              this.widgetConfig[item.id] = { ...this.widgetConfig[item.id], ...oldWidgetConifg };
+            } else if (item.id !== oldId && this.widgetConfig[oldId]) {
+              this.widgetConfig[item.id] = { ...this.widgetConfig[oldId] };
+            }
+          }
+          const children = getWidgetChildren(item);
+          if (children.length > 0) {
+            upgradeWidget(children, parentId ? parentId + "-" + oldId : oldId);
+          }
+        });
+      };
+      upgradeWidget(this.widgetList);
+    },
+    upgradePageConfig() {
+      const { css, style } = this.pageConfig;
+      if (!css && !isEmpty(style)) {
+        let cssStr = ":current {";
+        for (const key in style) {
+          const kebabCase = key.replace(/([A-Z])/g, ($1) => {
+            return "-" + $1.toLocaleLowerCase();
+          });
+          cssStr += `\r
+  ${kebabCase}: ${style[key]};`;
+        }
+        cssStr += "\r\n}";
+        delete this.pageConfig.style;
+        this.pageConfig = { ...this.pageConfig, css: cssStr };
+      }
+    },
+    moveUpWidget(parentList, indexOfParentList) {
+      if (parentList) {
+        if (indexOfParentList === 0) {
+          this.vueInstance.$message(this.vueInstance.i18nt("designer.hint.moveUpFirstChildHint"));
+          return;
+        }
+        const tempWidget = parentList[indexOfParentList];
+        parentList.splice(indexOfParentList, 1);
+        parentList.splice(indexOfParentList - 1, 0, tempWidget);
+      }
+    },
+    moveDownWidget(parentList, indexOfParentList) {
+      if (parentList) {
+        if (indexOfParentList === parentList.length - 1) {
+          this.vueInstance.$message(this.vueInstance.i18nt("designer.hint.moveDownLastChildHint"));
+          return;
+        }
+        const tempWidget = parentList[indexOfParentList];
+        parentList.splice(indexOfParentList, 1);
+        parentList.splice(indexOfParentList + 1, 0, tempWidget);
+      }
+    },
+    copyNewFieldWidget(origin) {
+      const newWidget = cloneDeep(origin);
+      const tempId = genId();
+      newWidget.id = newWidget.type.replace(/-/g, "") + tempId;
+      newWidget.options.name = newWidget.id;
+      newWidget.options.label = newWidget.options.label || newWidget.type.toLowerCase();
+      delete newWidget.displayName;
+      return newWidget;
+    },
+    copyNewContainerWidget(origin) {
+      const newCon = genId(origin);
+      newCon.id = newCon.type.replace(/-/g, "") + genId();
+      newCon.options.name = newCon.id;
+      const newTabPane = cloneDeep(this.getContainerByType("tab-pane"));
+      newTabPane.id = "tab-pane-" + genId();
+      newTabPane.options.name = "tab1";
+      newTabPane.options.label = "tab 1";
+      newCon.tabs.push(newTabPane);
+      delete newCon.displayName;
+      return newCon;
+    },
+    addWidgetByInfo(widgetInfo, parentWidget) {
+      const widget = {
+        id: widgetInfo.CODE + "_" + genId(),
+        contentType: widgetInfo.CODE,
+        title: widgetInfo.TITLE
+      };
+      if (widgetInfo.COMPONENT_SOURCE === "custom") {
+        widget.type = "custom";
+      }
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [widget];
+        } else {
+          parentWidget.items.push(widget);
+        }
+      } else {
+        this.widgetList.push(widget);
+      }
+      if (widgetInfo.CODE === "chart") {
+        this.updateWidgetConfig(widget.id, { metaId: this.page.metaId });
+      }
+      this.setSelected(widget);
+    },
+    addWidgets(widgets, parentWidget, option = {}) {
+      const { defaultSelected = true } = option;
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [...widgets];
+        } else {
+          parentWidget.items.push(...widgets);
+        }
+      } else {
+        this.widgetList.push(...widgets);
+      }
+      if (defaultSelected) this.setSelected(widgets[widgets.length - 1]);
+    },
+    addWidget(widget, parentWidget, option = {}) {
+      const { defaultSelected = true } = option;
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [widget];
+        } else {
+          parentWidget.items.push(widget);
+        }
+      } else {
+        this.widgetList.push(widget);
+      }
+      if (defaultSelected) this.setSelected(widget);
+    },
+    // 查找父组件（公共方法）：插槽里的组件返回插槽宿主；根级返回 null；不存在返回 undefined
+    findParentWidget(targetId) {
+      const entry = lookup(targetId);
+      return entry ? asReactive(entry.parent) : void 0;
+    },
+    copyWidget(widget, parentWidget) {
+      if (this.findWidgetSlot(widget.id)) {
+        this.vueInstance && this.vueInstance.$message && this.vueInstance.$message("插槽内的组件不支持复制");
+        return;
+      }
+      const newWidget = cloneDeep(widget);
+      newWidget.id = widget.contentType + "_" + genId();
+      const newConfigs = {
+        [newWidget.id]: cloneDeep(this.widgetConfig[widget.id])
+      };
+      const formatWidget = (arr) => {
+        for (const item of arr) {
+          const newId = item.contentType + "_" + genId();
+          newConfigs[newId] = cloneDeep(this.widgetConfig[item.id]);
+          item.id = newId;
+          formatWidget(getWidgetChildren(item));
+        }
+      };
+      formatWidget(getWidgetChildren(newWidget));
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [newWidget];
+        } else {
+          parentWidget.items.push(newWidget);
+        }
+      } else {
+        this.widgetList.push(newWidget);
+      }
+      this.mergeWidgetConfig(newConfigs);
+      this.setSelected(newWidget);
+    },
+    deleteWidget(widget, parentWidget) {
+      delete this.widgetConfig[widget.id];
+      const slotInfo = this.findWidgetSlot(widget.id);
+      if (slotInfo) {
+        this.clearWidgetSlot(slotInfo.parent, slotInfo.slotName);
+        if (this.selectedId === widget.id) this.clearSelected();
+        return 0;
+      }
+      if (parentWidget && parentWidget.items) {
+        const index = parentWidget.items.findIndex((item) => item.id === widget.id);
+        if (index !== -1) {
+          parentWidget.items.splice(index, 1);
+          return index;
+        }
+      } else {
+        const index = this.widgetList.findIndex((item) => item.id === widget.id);
+        if (index !== -1) {
+          this.widgetList.splice(index, 1);
+          return index;
+        }
+      }
+    },
+    addContainerByDbClick(container) {
+      const newCon = this.copyNewContainerWidget(container);
+      this.widgetList.push(newCon);
+      this.setSelected(newCon);
+    },
+    addFieldByDbClick(widget) {
+      const newWidget = this.copyNewFieldWidget(widget);
+      if (!!this.selectedWidget && this.selectedWidget.type === "tab") {
+        let activeTab = this.selectedWidget.tabs[0];
+        this.selectedWidget.tabs.forEach((tabPane) => {
+          if (tabPane.options.active) {
+            activeTab = tabPane;
+          }
+        });
+        !!activeTab && activeTab.widgetList.push(newWidget);
+      } else if (!!this.selectedWidget && !!this.selectedWidget.widgetList) {
+        this.selectedWidget.widgetList.push(newWidget);
+      } else {
+        this.widgetList.push(newWidget);
+      }
+      this.setSelected(newWidget);
+      this.emitHistoryChange();
+    },
+    addTabPaneOfTabs(tabsWidget) {
+      const tabPanes = tabsWidget.tabs;
+      const newTabPane = cloneDeep(this.getContainerByType("tab-pane"));
+      newTabPane.id = "tab-pane-" + genId();
+      newTabPane.options.name = newTabPane.id;
+      newTabPane.options.label = "tab " + (tabPanes.length + 1);
+      tabPanes.push(newTabPane);
+    },
+    deleteTabPaneOfTabs(tabsWidget, tpIdx) {
+      tabsWidget.tabs.splice(tpIdx, 1);
+    },
+    emitEvent(evtName, evtData) {
+      const handlers = designerEvents.get(evtName);
+      if (handlers) handlers.slice().forEach((handler) => handler(evtData));
+    },
+    handleEvent(evtName, callback) {
+      const handlers = designerEvents.get(evtName);
+      if (handlers) handlers.push(callback);
+      else designerEvents.set(evtName, [callback]);
+    },
+    offEvent(evtName, callback) {
+      const handlers = designerEvents.get(evtName);
+      if (!handlers) return;
+      if (!callback) {
+        designerEvents.delete(evtName);
+        return;
+      }
+      const index = handlers.indexOf(callback);
+      if (index > -1) handlers.splice(index, 1);
+    },
+    // 快照存三段 JSON 字符串：无响应式、内存紧凑（此前每步 cloneDeep 三份全量数据且全部深度代理）；
+    // toRaw 脱掉顶层代理，减少序列化时的 Proxy 开销
+    takeSnapshot() {
+      return {
+        widgetList: JSON.stringify(toRaw(this.widgetList)),
+        widgetConfig: JSON.stringify(toRaw(this.widgetConfig)),
+        pageConfig: JSON.stringify(toRaw(this.pageConfig))
+      };
+    },
+    applySnapshot(snapshot) {
+      this.widgetList = JSON.parse(snapshot.widgetList);
+      this.widgetConfig = JSON.parse(snapshot.widgetConfig);
+      this.pageConfig = JSON.parse(snapshot.pageConfig);
+    },
+    // 加载页面后重置为单步历史，首次操作即可撤销回初始状态
+    initHistoryData() {
+      this.historyData.index = 0;
+      this.historyData.steps = [this.takeSnapshot()];
+    },
+    emitHistoryChange() {
+      if (this.historyData.index === this.historyData.maxStep - 1) {
+        this.historyData.steps.shift();
+      } else {
+        this.historyData.index++;
+      }
+      this.historyData.steps[this.historyData.index] = this.takeSnapshot();
+      this.savePageContentToStorage();
+      if (this.historyData.index < this.historyData.steps.length - 1) {
+        this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1);
+      }
+    },
+    saveCurrentHistoryStep() {
+      this.historyData.steps[this.historyData.index] = this.takeSnapshot();
+      this.savePageContentToStorage();
+    },
+    undoHistoryStep() {
+      if (this.historyData.index !== 0) {
+        this.historyData.index--;
+      }
+      this.applySnapshot(this.historyData.steps[this.historyData.index]);
+    },
+    redoHistoryStep() {
+      if (this.historyData.index !== this.historyData.steps.length - 1) {
+        this.historyData.index++;
+      }
+      this.applySnapshot(this.historyData.steps[this.historyData.index]);
+    },
+    undoEnabled() {
+      return this.historyData.index > 0 && this.historyData.steps.length > 0;
+    },
+    redoEnabled() {
+      return this.historyData.index < this.historyData.steps.length - 1;
+    },
+    // 300ms 防抖：连续操作只写一次 localStorage；直接复用快照字符串，不再重复 stringify
+    savePageContentToStorage() {
+      if (saveTimer) clearTimeout(saveTimer);
+      saveTimer = setTimeout(() => {
+        saveTimer = null;
+        const snapshot = this.historyData.steps[this.historyData.index] || this.takeSnapshot();
+        storage.set("widget__list__backup", snapshot.widgetList);
+        storage.set("widget__config__backup", snapshot.widgetConfig);
+        storage.set("page__config__backup", snapshot.pageConfig);
+      }, 300);
+    },
+    loadPageContentFromStorage() {
+      const widgetListBackup = storage.get("widget__list__backup");
+      if (widgetListBackup) {
+        this.widgetList = JSON.parse(widgetListBackup);
+      }
+      const widgetConfigBackup = storage.get("widget__config__backup");
+      if (widgetConfigBackup) {
+        Object.assign(this.widgetConfig, JSON.parse(widgetConfigBackup));
+      }
+      const pageConfigBackup = storage.get("page__config__backup");
+      if (pageConfigBackup) {
+        Object.assign(this.pageConfig, JSON.parse(pageConfigBackup));
+      }
+    },
+    isExistId(id) {
+      return lookup(id) !== void 0;
+    },
+    // 停掉索引 watch 与待写入的 storage 定时器；PageDesigner.beforeUnmount 调用
+    dispose() {
+      scope.stop();
+      if (saveTimer) {
+        clearTimeout(saveTimer);
+        saveTimer = null;
+      }
+    },
+    genId(widgetCode) {
+      const code = widgetCode.replace(/-/g, "_");
+      let id = code + "_" + util.genId();
+      while (this.isExistId(id)) {
+        id = code + "_" + util.genId();
+      }
+      return id;
+    }
+  });
+  scope.run(() => {
+    watch(() => state.widgetList, () => {
+      indexDirty = true;
+    }, { deep: true, flush: "sync" });
+  });
+  return state;
+}
+export {
+  createDesigner,
+  getWidgetChildren,
+  getWidgetSlots
+};