@gct-paas/design 0.1.4-dev.8 → 0.1.5-dev.0

package/es/hooks/design-view/useDesigner.mjs

@@ -1,823 +1,127 @@
-import { Platform, TreeHelper, FormComponents, FIELD_TYPE, BuiltinType, SCOPE, genUrl, getToken, pageLayoutModeEnum, openWindow, getTenant, t, SearchComponents } from '@gct-paas/core';
-import { getCompPos } from '@gct-paas/schema';
-import { cloneDeep, isArray, isNil, isEmpty } from 'lodash-es';
-import { ref, computed, inject, reactive } from 'vue';
-import { useScope } from './useScope.mjs';
-import { useSelectedWidget } from './useSelectedWidget.mjs';
-import { useGlobal } from './useGlobal.mjs';
-import { platform } from './usePage.mjs';
-import { useCacheHistory } from '../develop/useCacheHistory.mjs';
-import { useDebounceFn } from '@vueuse/core';
-import { message } from 'ant-design-vue';
-
-const allWidgetInfo = {};
-const { queryInfo } = useGlobal();
-const { historyUtils } = useCacheHistory();
-const { cancelOccupy, occupy } = {};
-const modalDesignState = ref(false);
-const modalDesignId = ref("");
-const subTableModalState = ref(false);
-const subTableModalId = ref("");
-const wfNodesModalState = ref(false);
-const wfNodesModalId = ref("");
-const workflowModalState = ref(false);
-const workflowModalId = ref("");
-const modalInfo = ref(cloneDeep({}));
-const regRoot = /^root:/;
-const pageJson = reactive({
-  id: "",
-  keepAlive: false,
-  pageEvents: {},
-  pageVars: [],
-  widgets: [],
-  js: "",
-  css: "",
-  modals: [],
-  globalEvents: {},
-  permissions: {},
-  plugins: [],
-  style: {
-    // paddingAll: '10',
-    // paddingTop: '10',
-    // paddingRight: '10',
-    // paddingBottom: '10',
-    // paddingLeft: '10',
-  },
-  pageConfig: {
-    title: "",
-    i18n: {},
-    hasFooter: void 0
-  },
-  pageLayoutMode: pageLayoutModeEnum.SHOW_ALL_DATA,
-  newDesigner: true
-});
-const pageNo = ref(1);
-const noMore = ref(false);
-const loading = ref(false);
-function transformPageJson(json, isClone = false) {
-  const _json = isClone ? cloneDeep(json) : json;
-  if (!_json.pageConfig.hasFooter) {
-    _json.widgets = _json.widgets.filter((n) => {
-      return n.type !== "bottom-button-container";
-    });
-  }
-  return _json;
-}
-const pageJsonSnapshot = ref("");
-const isModified = () => {
-  if (!pageJsonSnapshot.value) {
-    return false;
-  }
-  const currentPageJsonStr = JSON.stringify(pageJson);
-  return currentPageJsonStr != pageJsonSnapshot.value;
-};
-const isNewDesigner = computed({
-  get() {
-    return pageJson.newDesigner;
-  },
-  set(val) {
-    pageJson.newDesigner = val;
-  }
-});
-const pageDesignHistoryList = ref([]);
-const methodMap = ref({});
-const _pluginConfigs = ref([]);
+import { platform } from "../../utils/design-view/index.mjs";
+import { initMethodMap } from "../../utils/transform-js/transform-js.mjs";
+import "../../utils/index.mjs";
+import { methodMap, pageJson } from "./design-state.mjs";
+import { useDesignModal } from "./designer/useDesignModal.mjs";
+import { useDesignPreview } from "./designer/useDesignPreview.mjs";
+import { useWidgetRegistry } from "./widget/useWidgetRegistry.mjs";
+import { useWidgetQuery } from "./widget/useWidgetQuery.mjs";
+import { useSelectedWidget } from "./widget/useSelectedWidget.mjs";
+import { useDesignCache } from "./designer/useDesignCache.mjs";
+import { useDesignSave } from "./designer/useDesignSave.mjs";
+import { useDesignHistory } from "./designer/useDesignHistory.mjs";
+import { FormComponents, Platform } from "@gct-paas/core";
+import { inject } from "vue";
+//#region src/hooks/design-view/useDesigner.ts
+/**
+* 设计器核心聚合层
+*
+* 将各子 Hook 组合在一起，对外提供统一的 useDesigner 接口。
+* 拆分后的子模块：
+*  - design-state: 共享状态层（pageJson、modalInfo、平台信息等）
+*  - useDesignModal: 弹框管理
+*  - useDesignPreview: 预览功能
+*  - useDesignCache: 缓存撤销/重做
+*  - useDesignSave: 保存与校验
+*  - useDesignHistory: 历史版本管理
+*  - useWidgetQuery: 组件查询
+*  - useWidgetRegistry: 组件注册表查询
+*/
 function useDesigner() {
-  function setPageJson(json) {
-    pageJson.pageConfig.hasFooter = platform.value === Platform.MOBILE || platform.value === Platform.PAD;
-    Object.assign(pageJson, json);
-    if (json.newDesigner !== true) {
-      pageJson.newDesigner = false;
-    }
-    emitCache();
-  }
-  function savePageJsonSnapshot(json) {
-    pageJsonSnapshot.value = JSON.stringify(json ?? pageJson);
-  }
-  function setPluginConfigs(configs) {
-    _pluginConfigs.value = configs;
-  }
-  function emitCache() {
-    const id = _gct.store.context.aid;
-    historyUtils.addHistory({
-      historyId: id,
-      past: JSON.stringify(pageJson)
-    });
-    occupy();
-  }
-  function undoOrRestore(content) {
-    if (content) {
-      const scope = inject("scope") || SCOPE.PAGE;
-      const { resetSelectedWidget } = useSelectedWidget();
-      Object.assign(pageJson, JSON.parse(content));
-      resetSelectedWidget(scope);
-      occupy();
-    }
-  }
-  async function loadPageDesignHistoryList() {
-    if (loading.value || noMore.value) return;
-    loading.value = true;
-    try {
-      const res = await _api.apaas.pageDesignerLog.getPageList({
-        relationId: _gct.store.context.pid,
-        pageNo: pageNo.value ?? 1,
-        pageSize: 50
-      });
-      if (res) {
-        if (pageNo.value === 1) {
-          pageDesignHistoryList.value = res.data || [];
-        } else {
-          pageDesignHistoryList.value = [
-            ...pageDesignHistoryList.value,
-            ...res.data || []
-          ];
-        }
-        if (pageDesignHistoryList.value?.length >= res.totalCount || pageDesignHistoryList.value?.length >= 1e3) {
-          noMore.value = true;
-        } else {
-          pageNo.value += 1;
-        }
-      }
-    } catch (err) {
-      console.error("数据加载失败：", err);
-    } finally {
-      loading.value = false;
-    }
-  }
-  function loadPageDesignHistoryInfo(id) {
-    return _api.apaas.pageDesignerLog.getInfo({
-      id
-    });
-  }
-  async function recover(hid) {
-    const res = await loadPageDesignHistoryInfo(hid);
-    if (res) {
-      Object.assign(
-        pageJson,
-        res.designerJson ? { ...JSON.parse(res.designerJson ?? ""), key: Date.now() } : {
-          id: "",
-          keepAlive: false,
-          pageEvents: {},
-          pageVars: [],
-          widgets: [],
-          js: "",
-          css: "",
-          modals: [],
-          template: [],
-          globalEvents: {},
-          los: {},
-          permissions: {},
-          key: Date.now(),
-          style: {
-            // paddingAll: '10',
-            // paddingTop: '10',
-            // paddingRight: '10',
-            // paddingBottom: '10',
-            // paddingLeft: '10',
-          },
-          pageConfig: {
-            title: "",
-            i18n: {},
-            hasFooter: void 0
-          }
-        }
-      );
-      save(false);
-    }
-  }
-  function deleteHistory(hid) {
-    _api.apaas.pageDesignerLog.delete({ ids: hid }).then(() => {
-      noMore.value = false;
-      pageNo.value = 1;
-      loadPageDesignHistoryList();
-    });
-  }
-  function basicPreview({ pid, webUrl, mobileUrl, padUrl }) {
-    if (platform.value === Platform.MOBILE) {
-      const { origin } = location;
-      const appOrigin = origin;
-      console.log(appOrigin);
-      const curWin = openWindow(
-        genUrl(`${appOrigin}${mobileUrl}?_t=${Date.now()}`, {
-          aid: _gct.store.context.aid,
-          pid,
-          bid: _gct.store.context.bid,
-          token: getToken(),
-          "tenant-id": getTenant()
-        }),
-        {
-          noopener: false,
-          noreferrer: false,
-          target: "_blank",
-          optionStr: `width=414,height=896,top=200,left=${(window.screen.availWidth - 360) / 2}`
-        }
-      );
-      curWin?.resizeTo(414, 896);
-    } else if (platform.value === Platform.PAD) {
-      const { origin } = location;
-      const appOrigin = origin;
-      openWindow(
-        genUrl(`${appOrigin}${padUrl}?_t=${Date.now()}`, {
-          aid: _gct.store.context.aid,
-          pid,
-          bid: _gct.store.context.bid,
-          token: getToken(),
-          "tenant-id": getTenant()
-        }),
-        {
-          target: "_blank"
-        }
-      );
-    } else {
-      openWindow(
-        genUrl(`${location.origin}${webUrl}?_t=${Date.now()}`, {
-          aid: _gct.store.context.aid,
-          pid,
-          bid: _gct.store.context.bid
-        }),
-        {
-          target: "_blank"
-        }
-      );
-    }
-  }
-  const _doPreview = () => {
-    basicPreview({
-      pid: _gct.store.context.pid,
-      webUrl: undefined                                      ,
-      mobileUrl: undefined                                         ,
-      padUrl: undefined                                      
-    });
-  };
-  const preview = useDebounceFn(_doPreview, 400);
-  const sandboxList = ref();
-  const getDataList = async () => {
-    const data = await _api.apaas.sandboxConfig.getList();
-    if (!data.length) {
-      return;
-    }
-    if (data && data.length && data[0].status !== "INIT") {
-      sandboxList.value = data.map((i) => {
-        return {
-          ...i,
-          web: i.webRoutePath,
-          mobile: i.pdaRoutePath,
-          pad: i.padRoutePath
-        };
-      });
-    }
-  };
-  const _doPreviewSandbox = () => {
-    basicPreview({
-      pid: _gct.store.context.pid,
-      webUrl: undefined                                      .replace(
-        "web-render",
-        "web-sandbox"
-      ),
-      mobileUrl: undefined                                         .replace(
-        "mobile-render",
-        "mobile-sandbox"
-      ),
-      padUrl: undefined                                      .replace(
-        "pad-render",
-        "pad-sandbox"
-      )
-    });
-  };
-  const previewSandbox = useDebounceFn(_doPreviewSandbox, 400);
-  function historyPreview(hid) {
-    if (platform.value === Platform.MOBILE) {
-      const url = genUrl(
-        `http://${location.hostname}${undefined                                                 }?_t=${Date.now()}`,
-        {
-          aid: _gct.store.context.aid,
-          pid: hid,
-          bid: _gct.store.context.bid,
-          token: getToken()
-        }
-      );
-      return { url, platform: platform.value };
-    } else if (platform.value === Platform.PAD) {
-      const url = genUrl(
-        `http://${location.hostname}${undefined                                              }?_t=${Date.now()}`,
-        {
-          aid: _gct.store.context.aid,
-          pid: hid,
-          bid: _gct.store.context.bid,
-          token: getToken()
-        }
-      );
-      return { url, platform: platform.value };
-    } else {
-      const url = genUrl(
-        `${location.origin}${undefined                                              }?_t=${Date.now()}`,
-        {
-          aid: _gct.store.context.aid,
-          pid: hid,
-          bid: _gct.store.context.bid
-        }
-      );
-      return { url, platform: platform.value };
-    }
-  }
-  function validateWidgets(widgets, parents = []) {
-    const isMob = platform.value === Platform.MOBILE;
-    const isPad = platform.value === Platform.PAD;
-    for (let i = 0; i < widgets.length; i++) {
-      const widget = widgets[i];
-      const { type, props } = widget;
-      let models = (isMob ? allWidgetInfo.mobileWidgetPropEditors[type] : isPad ? allWidgetInfo.padWidgetPropEditors[type] : allWidgetInfo.webWidgetPropEditors[type]) || [];
-      models = models && isArray(models) ? models : models(widgets, parents);
-      for (let j = 0; j < models.length; j++) {
-        const model = models[j];
-        if (model?.required === true) {
-          const { name } = model;
-          let keys = [];
-          const isObject = typeof name === "object";
-          if (typeof name === "object") {
-            keys = Object.keys(name).map((item) => {
-              return name[item];
-            });
-          } else if (name?.startsWith("root:")) {
-            const key = name.substring("5");
-            const val = widget[key];
-            if (isNil(val) || isEmpty(val)) {
-              message.error(
-                `【${widget.alias || widget.props.label || widget.props.fieldName || ""} ${widget.id}】${t("sys.pageDesigner.widget")} -【${t("sys.pageDesigner.prop")} - ${t(
-                  `sys.pageDesigner.${model.group}Prop`
-                )} ${model.label ? "-" + t(model.label) : ""}】${t("sys.model.required")}`
-              );
-              return false;
-            }
-          } else {
-            keys = name.replace(regRoot, "").split(".");
-          }
-          let memo = props;
-          for (let k = 0; k < keys.length; k++) {
-            const key = keys[k];
-            const val = isObject ? props[key] : memo[key];
-            memo = val;
-            if (model.hidden) {
-              const hide = model.hidden(widget);
-              if (hide === true) {
-                continue;
-              }
-            }
-            if (isNil(val) || isEmpty(val)) {
-              message.error(
-                `【${widget.alias || widget.props.label || widget.props.fieldName || ""} ${widget.id}】${t("sys.pageDesigner.widget")} -【${t("sys.pageDesigner.prop")} - ${t(
-                  `sys.pageDesigner.${model.group}Prop`
-                )} ${model.label ? "-" + t(model.label) : ""}】${t("sys.model.required")}`
-              );
-              return false;
-            }
-          }
-        }
-        if (model?.saveHook) {
-          model.saveHook(widget);
-        }
-      }
-      if ([
-        SearchComponents.SearchNumberInput,
-        SearchComponents.SearchStringNumberInput
-      ].includes(type) && props?.isRang && props?.defaultValue && Array.isArray(props?.defaultValue)) {
-        const start = props.defaultValue[0];
-        const end = props.defaultValue[1];
-        if ((start || start === 0) && (end || end === 0) && start > end) {
-          message.error(
-            `【${widget.alias || widget.props.label || widget.props.fieldName || ""} ${widget.id}】${t("sys.pageDesigner.widget")} -【${t("sys.pageDesigner.prop")} - ${t("sys.pageDesigner.defaultValue")}】- ${t("sys.model.numMaxGTMin")}`
-          );
-          return false;
-        }
-      }
-      if (widget.children) {
-        parents.push(widget);
-        const bol = validateWidgets(widget.children, parents);
-        if (bol === false) {
-          return bol;
-        }
-      }
-    }
-    return true;
-  }
-  async function save(_flag = true, showSuccess = true) {
-    const pageId = _gct.store.context.pid;
-    const _pageJson = transformPageJson(pageJson);
-    const bol = validateWidgets(_pageJson.widgets);
-    if (bol === false) {
-      return false;
-    }
-    if (_pageJson.widgets.some((n) => n.type === "data-list")) {
-      _pageJson.widgets.forEach((item) => {
-        if (item.type === "data-list" && !item.props.showFieldExp) {
-          item.props.showFieldExpVal = "";
-        }
-      });
-    }
-    const bol2 = validateWidgets(_pageJson.modals);
-    if (bol2 === false) {
-      return false;
-    }
-    if (_pageJson.modals.length) {
-      _pageJson.modals.forEach((item) => {
-        if (!item.props.hasFooter) {
-          item.children = item.children.filter((n) => {
-            return n.type !== "bottom-button-container";
-          });
-        }
-        if (item.props.hasFooter && item.children.some((n) => n.type === "modalFooter")) {
-          item.children = item.children.filter((n) => {
-            return n.type !== "modalFooter";
-          });
-        }
-      });
-    }
-    const plugins = [];
-    function deepFindPlugins(widgets) {
-      const items = [];
-      widgets.forEach((widget) => {
-        if (widget._plugin) {
-          items.push({
-            key: widget._plugin.key,
-            version: widget._plugin.version,
-            url: widget._plugin.url
-          });
-        }
-        if (widget.children && widget.children.length > 0) {
-          items.push(...deepFindPlugins(widget.children));
-        }
-      });
-      return items;
-    }
-    plugins.push(...deepFindPlugins(_pageJson.widgets));
-    if (_pageJson.modals) {
-      _pageJson.modals.forEach((modal) => {
-        if (modal.children) {
-          modal.children.forEach((item) => {
-            plugins.push(...deepFindPlugins(item.children));
-          });
-        }
-      });
-    }
-    _pageJson.plugins = plugins;
-    if (platform.value === Platform.MOBILE) {
-      await _api.apaas.mobilePage.putUpdateDesignerJsonId(
-        { id: pageId },
-        {
-          designerJson: JSON.stringify(_pageJson),
-          runtimeJson: JSON.stringify(buildRuntimeJson()),
-          logId: (pageDesignHistoryList.value[0] ?? {}).id
-        }
-      );
-    } else if (platform.value === Platform.PAD) {
-      await _api.apaas.padPage.putUpdateDesignerJsonId(
-        { id: pageId },
-        {
-          designerJson: JSON.stringify(_pageJson),
-          runtimeJson: JSON.stringify(buildRuntimeJson()),
-          logId: (pageDesignHistoryList.value[0] ?? {}).id
-        }
-      );
-    } else {
-      await _api.apaas.webpage.putUpdateDesignerJsonId(
-        { id: pageId },
-        {
-          designerJson: JSON.stringify(_pageJson),
-          runtimeJson: JSON.stringify(buildRuntimeJson()),
-          logId: (pageDesignHistoryList.value[0] ?? {}).id
-        }
-      );
-    }
-    savePageJsonSnapshot(_pageJson);
-    cancelOccupy();
-    noMore.value = false;
-    pageNo.value = 1;
-    loadPageDesignHistoryList();
-    return true;
-  }
-  const allComHooks = computed(() => {
-    return platform.value === Platform.MOBILE ? allWidgetInfo.mobileWidgetHooks : platform.value === Platform.PAD ? allWidgetInfo.padWidgetHooks : allWidgetInfo.webWidgetHooks;
-  });
-  const allWhiteList = computed(() => {
-    return platform.value === Platform.MOBILE ? allWidgetInfo.mobileWidgetWhiteList : platform.value === Platform.PAD ? allWidgetInfo.padWidgetWhiteList : allWidgetInfo.webWidgetWhiteList;
-  });
-  const allBlackList = computed(() => {
-    return platform.value === Platform.MOBILE ? allWidgetInfo.mobileWidgetBlackList : platform.value === Platform.PAD ? allWidgetInfo.padWidgetBlackList : allWidgetInfo.webWidgetBlackList;
-  });
-  const pluginConfigs = computed(() => {
-    return _pluginConfigs.value;
-  });
-  const asyncGctComp = computed(() => {
-    return {};
-  });
-  const getAsyncWidget = (widget) => {
-    if (typeof widget === "string") {
-      return asyncGctComp.value.getComponentByType(widget);
-    }
-    if (widget._plugin) {
-      return asyncGctComp.value.getComponentByPluginTag(widget._plugin.key);
-    }
-    return asyncGctComp.value.getComponentByType(widget.type);
-  };
-  const getWidgetHooks = (type) => {
-    return allComHooks.value[type] ?? {};
-  };
-  const getWhiteList = (type) => {
-    return allWhiteList.value[type] ?? [];
-  };
-  const getBlackList = (type) => {
-    return allBlackList.value[type] ?? [];
-  };
-  const widgetEntry = computed(() => {
-    if (platform.value === Platform.MOBILE) {
-      return "widget-mobile-entry";
-    } else if (platform.value === Platform.PAD) {
-      return "widget-pad-entry";
-    } else {
-      return "widget-entry";
-    }
-  });
-  function checkWidgetMove() {
-    return true;
-  }
-  function handleAddDrag(newIndex, childrenList, scope, formID = "") {
-    const { setSelectedWidget, setFocusFormContainer } = useSelectedWidget();
-    const widget = childrenList[newIndex];
-    if (!widget) return;
-    const isInitGridComp = widget.type === FormComponents.Grid && !widget.children?.length;
-    if (isInitGridComp) return;
-    setSelectedWidget(childrenList[newIndex], scope);
-    setFocusFormContainer(childrenList[newIndex]?.preLocation || formID);
-    emitCache();
-  }
-  const allWidget = computed(
-    () => {
-      const { scopeData } = useScope();
-      return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-        return !!widget;
-      });
-    }
-  );
-  const allFormWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return [
-        FormComponents.Form,
-        FormComponents.RdoForm,
-        FormComponents.MedProRdoForm,
-        FormComponents.FormProcess
-      ].includes(widget.type);
-    });
-  });
-  const excludeSubTableFormWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      if ([
-        FormComponents.RdoForm,
-        FormComponents.MedProRdoForm,
-        FormComponents.FormProcess
-      ].includes(widget.type)) {
-        return true;
-      }
-      return widget.type === FormComponents.Form && !getCompPos(widget, FIELD_TYPE.MASTERSLAVE, FormComponents.Form);
-    });
-  });
-  const allSubTableWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.SubTable;
-    });
-  });
-  const allListWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.DataList || widget.type === FormComponents.RdoDataList;
-    });
-  });
-  const allTableWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.DataTable || widget.type === FormComponents.DataVTable || widget.type === FormComponents.RefDataTable;
-    });
-  });
-  function getWidgetByScope(type) {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === type;
-    });
-  }
-  const allDeptWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.Department;
-    });
-  });
-  const allRefSelectWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.Select && widget.props.fieldType === FIELD_TYPE.REF;
-    });
-  });
-  async function setModalDesignState(flag, modalId = "", isGlobal = false) {
-    if (flag) {
-      await getModalInfo(modalId, isGlobal);
-    }
-    modalDesignState.value = flag;
-    modalDesignId.value = modalId;
-  }
-  async function getModalInfo(modelId, isGlobal = false) {
-    if (isGlobal) {
-      const data = await queryInfo(modelId);
-      if (data && data.length > 0) {
-        modalInfo.value = JSON.parse(data[0].configJson);
-      }
-    } else {
-      modalInfo.value = pageJson.modals.find(
-        (d) => d.id === modelId
-      );
-    }
-  }
-  function setSubTableModalDesignState(flag, needId = "") {
-    subTableModalState.value = flag;
-    subTableModalId.value = needId;
-  }
-  function setWfNodesModalDesignState(flag, needId = "") {
-    wfNodesModalState.value = flag;
-    wfNodesModalId.value = needId;
-  }
-  function setWorkflowNodesModalDesignState(flag, needId = "") {
-    workflowModalId.value = needId;
-    workflowModalState.value = flag;
-  }
-  function setModalInfo(modal) {
-    modalInfo.value = modal;
-  }
-  const modalBody = computed(() => {
-    return modalInfo.value.children.find(
-      (d) => d.type === BuiltinType.MODAL_BODY
-    );
-  });
-  const modalFooter = computed(() => {
-    return modalInfo.value.children.find(
-      (d) => d.type === BuiltinType.MODAL_FOOTER
-    );
-  });
-  const modalBottomBtn = computed(() => {
-    return modalInfo.value.children.find(
-      (d) => d.type === BuiltinType.BottomButtonContainer
-    );
-  });
-  const subTableInfo = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNode(scopeData.value, (widget) => {
-      return widget.id === subTableModalId.value;
-    });
-  });
-  const wfNodesInfo = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNode(scopeData.value, (widget) => {
-      return widget.id === wfNodesModalId.value;
-    })?.props.workflowModalInfo;
-  });
-  const wfNodesModalBody = computed(() => {
-    return wfNodesInfo.value.children.find(
-      (d) => d.type === BuiltinType.MODAL_BODY
-    );
-  });
-  const workflowInfo = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNode(scopeData.value, (widget) => {
-      return widget.id === workflowModalId.value;
-    })?.props.specModalInfo;
-  });
-  const workflowModalBody = computed(() => {
-    return workflowInfo.value.children.find(
-      (d) => d.type === BuiltinType.MODAL_BODY
-    );
-  });
-  const isGlobalModal = computed(() => {
-    return /^i?g_modal_/.test(modalInfo.value.id);
-  });
-  return {
-    pageJson,
-    //拖拽相关
-    checkWidgetMove,
-    handleAddDrag,
-    //page
-    pageDesignHistoryList,
-    loadPageDesignHistoryList,
-    loadPageDesignHistoryInfo,
-    historyPreview,
-    recover,
-    setPageJson,
-    save,
-    preview,
-    previewSandbox,
-    getDataList,
-    sandboxList,
-    methodMap,
-    //操作历史缓存相关(前进后退)
-    emitCache,
-    undoOrRestore,
-    //整个设计器的组件集合相关
-    allWidget,
-    allFormWidget,
-    excludeSubTableFormWidget,
-    allSubTableWidget,
-    allListWidget,
-    allTableWidget,
-    allDeptWidget,
-    allRefSelectWidget,
-    getWidgetByScope,
-    //弹框相关
-    modalInfo,
-    modalDesignState,
-    modalDesignId,
-    modalBody,
-    modalFooter,
-    modalBottomBtn,
-    isGlobalModal,
-    subTableInfo,
-    wfNodesInfo,
-    wfNodesModalBody,
-    workflowInfo,
-    workflowModalBody,
-    setModalDesignState,
-    setModalInfo,
-    setSubTableModalDesignState,
-    subTableModalState,
-    subTableModalId,
-    setWfNodesModalDesignState,
-    wfNodesModalState,
-    isNewDesigner,
-    setWorkflowNodesModalDesignState,
-    workflowModalState,
-    // 全局获取异步组件
-    getAsyncWidget,
-    // 获取组件拖拽钩子
-    getWidgetHooks,
-    widgetEntry,
-    pluginConfigs,
-    deleteHistory,
-    getWhiteList,
-    getBlackList,
-    setPluginConfigs,
-    savePageJsonSnapshot,
-    loading
-  };
-}
-function buildRuntimeJson() {
-  try {
-    const runtimeWidgets = TreeHelper.traverseAndBuildTree(
-      cloneDeep(pageJson.widgets),
-      (node) => findWidgetCallback(node)
-    );
-    const funcStr = "";
-    const modals = pageJson.modals.map((modal) => {
-      const modalFuncStr = "";
-      const runtimeWidgets2 = TreeHelper.traverseAndBuildTree(
-        cloneDeep(modal.children),
-        (node) => findWidgetCallback(node, modal)
-      );
-      return {
-        props: modal.props,
-        css: modal.css,
-        modalName: modal.modalName,
-        id: modal.id,
-        i18n: modal.i18n || {},
-        events: modal.events,
-        children: runtimeWidgets2,
-        runJs: modalFuncStr,
-        style: modal.style
-      };
-    });
-    return {
-      widgets: runtimeWidgets,
-      runJs: funcStr,
-      modals,
-      css: pageJson.css,
-      keepAlive: pageJson.keepAlive,
-      globalEvents: pageJson.globalEvents,
-      pageEvents: pageJson.pageEvents,
-      permissions: pageJson.permissions,
-      pageStyle: pageJson.style,
-      pageConfig: pageJson.pageConfig,
-      pageVars: pageJson.pageVars,
-      plugins: pageJson.plugins,
-      pageLayoutMode: pageJson.pageLayoutMode
-    };
-  } catch (error) {
-    message.warn(t("sys.pageDesigner.codeError"));
-    throw new Error(error.message);
-  }
-}
-function findWidgetCallback(node, modal) {
-  const widgetCallback = platform.value === Platform.MOBILE ? allWidgetInfo.mobileWidgetCallback : platform.value === Platform.PAD ? allWidgetInfo.padWidgetCallback : allWidgetInfo.webWidgetCallback;
-  return widgetCallback[node.type]?.(node, modal);
+	const modal = useDesignModal();
+	const previewHook = useDesignPreview();
+	const cache = useDesignCache();
+	const saveHook = useDesignSave();
+	const history = useDesignHistory();
+	const widgetQuery = useWidgetQuery();
+	const registry = useWidgetRegistry();
+	/**
+	* 设置设计器的 pageJSON
+	*/
+	async function setPageJson(json) {
+		pageJson.pageConfig.hasFooter = platform.value === Platform.MOBILE || platform.value === Platform.PAD;
+		Object.assign(pageJson, json);
+		initMethodMap(pageJson.js).then((map) => {
+			methodMap.value = map;
+		});
+		cache.emitCache();
+	}
+	/** 检查是否可以拖拽进入的方法，比如某些组件不能拖到某些组件内 */
+	function checkWidgetMove() {
+		return true;
+	}
+	/** 拖拽组件放入布局画板回调 */
+	function handleAddDrag(newIndex, childrenList, scope, formID = "") {
+		const { setSelectedWidget, setFocusFormContainer } = useSelectedWidget();
+		const widget = childrenList[newIndex];
+		if (!widget) return;
+		if (widget.type === FormComponents.Grid && !widget.children?.length) return;
+		setSelectedWidget(childrenList[newIndex], scope);
+		setFocusFormContainer(childrenList[newIndex]?.preLocation || formID);
+		cache.emitCache();
+	}
+	return {
+		pageJson,
+		methodMap,
+		checkWidgetMove,
+		handleAddDrag,
+		setPageJson,
+		save: saveHook.save,
+		savePageJsonSnapshot: saveHook.savePageJsonSnapshot,
+		emitCache: cache.emitCache,
+		undoOrRestore: cache.undoOrRestore,
+		preview: previewHook.preview,
+		previewSandbox: previewHook.previewSandbox,
+		sandboxList: previewHook.sandboxList,
+		getDataList: previewHook.getDataList,
+		historyPreview: previewHook.historyPreview,
+		pageDesignHistoryList: history.pageDesignHistoryList,
+		loadPageDesignHistoryList: history.loadPageDesignHistoryList,
+		loadPageDesignHistoryInfo: history.loadPageDesignHistoryInfo,
+		recover: history.recover,
+		deleteHistory: history.deleteHistory,
+		loading: history.loading,
+		allWidget: widgetQuery.allWidget,
+		allFormWidget: widgetQuery.allFormWidget,
+		excludeSubTableFormWidget: widgetQuery.excludeSubTableFormWidget,
+		allSubTableWidget: widgetQuery.allSubTableWidget,
+		allListWidget: widgetQuery.allListWidget,
+		allTableWidget: widgetQuery.allTableWidget,
+		allDeptWidget: widgetQuery.allDeptWidget,
+		allRefSelectWidget: widgetQuery.allRefSelectWidget,
+		getWidgetByScope: widgetQuery.getWidgetByScope,
+		modalInfo: modal.modalInfo,
+		modalDesignState: modal.modalDesignState,
+		modalDesignId: modal.modalDesignId,
+		modalBody: modal.modalBody,
+		modalFooter: modal.modalFooter,
+		modalBottomBtn: modal.modalBottomBtn,
+		isGlobalModal: modal.isGlobalModal,
+		subTableInfo: modal.subTableInfo,
+		setModalDesignState: modal.setModalDesignState,
+		setModalInfo: modal.setModalInfo,
+		setSubTableModalDesignState: modal.setSubTableModalDesignState,
+		setWfNodesModalDesignState: modal.setWfNodesModalDesignState,
+		setWorkflowNodesModalDesignState: modal.setWorkflowNodesModalDesignState,
+		subTableModalState: modal.subTableModalState,
+		subTableModalId: modal.subTableModalId,
+		getAsyncWidget: registry.getAsyncWidget,
+		getWidgetHooks: registry.getWidgetHooks,
+		widgetEntry: registry.widgetEntry,
+		pluginConfigs: registry.pluginConfigs,
+		getWhiteList: registry.getWhiteList,
+		getBlackList: registry.getBlackList,
+		setPluginConfigs: registry.setPluginConfigs
+	};
 }
+/**
+* 获取设计器控制器实例
+*
+* @export
+* @return {*}  {IDesignerController}
+*/
 function useDesignerController() {
-  const c = inject("designer");
-  return c;
+	return inject("designer");
 }
-
-export { isModified, isNewDesigner, useDesigner, useDesignerController };
+//#endregion
+export { useDesigner, useDesignerController };