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

package/es/hooks/design-view/designer/useDesignModal.mjs

@@ -1,80 +1,109 @@
-import { BuiltinType, TreeHelper } from '@gct-paas/core';
-import { modalCfg } from '@gct-paas/schema';
-import { cloneDeep } from 'lodash-es';
-import { computed } from 'vue';
-import { modalInfo, subTableModalId, subTableModalState, modalDesignId, modalDesignState, pageJson } from '../design-state.mjs';
-import { useScope } from '../layout/useScope.mjs';
-import { useGlobal } from '../global/useGlobal.mjs';
-
+import { widget } from "../../../schema/modal/modal.mjs";
+import "../../../schema/index.mjs";
+import { modalDesignId, modalDesignState, modalInfo, pageJson, subTableModalId, subTableModalState, wfNodesModalId, wfNodesModalState, workflowModalId, workflowModalState } from "../design-state.mjs";
+import { useScope } from "../layout/useScope.mjs";
+import { useGlobal } from "../global/useGlobal.mjs";
+import { cloneDeep } from "lodash-es";
+import { BuiltinType, TreeHelper } from "@gct-paas/core";
+import { computed } from "vue";
+//#region src/hooks/design-view/designer/useDesignModal.ts
+/**
+* 弹框管理 Hook
+*
+* 管理设计器中所有弹框相关的状态和操作，包括普通弹框、子表弹框、
+* 工作流节点弹框、节点配置弹框的显示/隐藏、信息获取等。
+*/
 function useDesignModal() {
-  const { queryInfo } = useGlobal();
-  const { scopeData } = useScope();
-  async function setModalDesignState(flag, modalId = "", isGlobal = false) {
-    if (flag) {
-      await getModalInfo(modalId, isGlobal);
-    } else {
-      modalInfo.value = cloneDeep(modalCfg.widget);
-    }
-    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 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(() => {
-    return TreeHelper.findNode(scopeData.value, (widget) => {
-      return widget.id === subTableModalId.value;
-    });
-  });
-  const isGlobalModal = computed(() => {
-    return /^i?g_modal_/.test(modalInfo.value.id);
-  });
-  return {
-    modalInfo,
-    modalDesignState,
-    modalDesignId,
-    modalBody,
-    modalFooter,
-    modalBottomBtn,
-    isGlobalModal,
-    subTableInfo,
-    setModalDesignState,
-    setModalInfo,
-    setSubTableModalDesignState,
-    subTableModalState,
-    subTableModalId
-  };
+	const { queryInfo } = useGlobal();
+	const { scopeData } = useScope();
+	/**
+	* 打开/关闭模态框设计模式
+	*
+	* @param {boolean} flag 打开模态框设置模式
+	* @param {string} modalId 编辑时的modalId
+	* @param {boolean} isGlobal 是否是全局模态框
+	*/
+	async function setModalDesignState(flag, modalId = "", isGlobal = false) {
+		if (flag) await getModalInfo(modalId, isGlobal);
+		else modalInfo.value = cloneDeep(widget);
+		modalDesignState.value = flag;
+		modalDesignId.value = modalId;
+	}
+	/**
+	* 获取modal
+	*
+	* @param {string} modelId 编辑时传参,如果新建则没有则会返回新的一个modal,保存时在pageJSON里插入一个新的modal
+	* @param {boolean} isGlobal 是否是全局模态框
+	*/
+	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);
+	}
+	/**
+	* 设置子表弹框设计状态
+	*
+	* @param {boolean} flag 开关标识
+	* @param {string} needId 子表ID
+	*/
+	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;
+	}
+	/**
+	* 设置弹框信息
+	*
+	* @param {LowCodeModal.Modal} modal 弹框数据
+	*/
+	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);
+	});
+	/** 根据 subTableModalId 获取子表信息 */
+	const subTableInfo = computed(() => {
+		return TreeHelper.findNode(scopeData.value, (widget) => {
+			return widget.id === subTableModalId.value;
+		});
+	});
+	return {
+		modalInfo,
+		modalDesignState,
+		modalDesignId,
+		modalBody,
+		modalFooter,
+		modalBottomBtn,
+		isGlobalModal: computed(() => {
+			return /^i?g_modal_/.test(modalInfo.value.id);
+		}),
+		subTableInfo,
+		setModalDesignState,
+		setModalInfo,
+		setSubTableModalDesignState,
+		setWfNodesModalDesignState,
+		setWorkflowNodesModalDesignState,
+		subTableModalState,
+		subTableModalId
+	};
 }
-
+//#endregion
 export { useDesignModal };

package/es/hooks/design-view/designer/useDesignPreview.mjs

@@ -1,143 +1,117 @@
-import { Platform, genUrl, getToken, openWindow, getTenant } from '@gct-paas/core';
-import { useDebounceFn } from '@vueuse/core';
-import { ref } from 'vue';
-import { platform } from '../design-state.mjs';
-
+import { platform } from "../../../utils/design-view/index.mjs";
+import "../design-state.mjs";
+import { Platform, openWindow, stringifyMatrixParams } from "@gct-paas/core";
+import { ref } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+//#region src/hooks/design-view/designer/useDesignPreview.ts
+/**
+* 预览功能 Hook
+*
+* 管理设计器的页面预览、沙箱预览、历史预览等预览相关功能。
+*/
 function useDesignPreview() {
-  function basicPreview({ pid, webUrl, mobileUrl, padUrl }) {
-    if (platform.value === Platform.MOBILE) {
-      const { origin } = location;
-      const appOrigin = origin;
-      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 };
-    }
-  }
-  return {
-    preview,
-    previewSandbox,
-    sandboxList,
-    getDataList,
-    historyPreview
-  };
+	/**
+	* 构建预览 URL
+	* 组合基础 URL、矩阵参数和时间戳
+	*
+	* @param {string} baseUrl 基础 URL（如 /web-render/）
+	* @param {Record<string, unknown>} matrixParams 矩阵参数对象
+	* @returns {string} 完整的预览 URL
+	*/
+	function buildPreviewUrl(baseUrl, matrixParams) {
+		const matrixParamStr = stringifyMatrixParams(matrixParams);
+		const timestamp = `?_t=${Date.now()}`;
+		return `${location.origin}${baseUrl}${matrixParamStr}${timestamp}`;
+	}
+	/**
+	* 基础预览方法，根据平台类型打开对应预览窗口
+	*
+	* @param {IObject} params 预览参数
+	*/
+	function basicPreview({ pid, webUrl, mobileUrl, padUrl }) {
+		const matrixParams = {
+			aid: _gct.store.context.aid,
+			pid,
+			bid: _gct.store.context.bid
+		};
+		if (platform.value === Platform.MOBILE) openWindow(buildPreviewUrl(mobileUrl, matrixParams), {
+			noopener: false,
+			noreferrer: false,
+			target: "_blank",
+			optionStr: `width=414,height=896,top=200,left=${(window.screen.availWidth - 360) / 2}`
+		})?.resizeTo(414, 896);
+		else if (platform.value === Platform.PAD) openWindow(buildPreviewUrl(padUrl, matrixParams), { target: "_blank" });
+		else openWindow(buildPreviewUrl(webUrl, matrixParams), { target: "_blank" });
+	}
+	/**
+	* 预览（防抖）
+	* 使用 @vueuse/core 的 useDebounceFn：连续点击只在最后一次点击 400ms 后执行
+	* 若需要"首次立即 + 间隔限制"语义可改用 useThrottleFn。
+	*/
+	const _doPreview = () => {
+		basicPreview({
+			pid: _gct.store.context.pid,
+			webUrl: "/web-render/",
+			mobileUrl: "/mobile-render/",
+			padUrl: "/pad-render/"
+		});
+	};
+	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: "/web-sandbox/",
+			mobileUrl: "/mobile-sandbox/",
+			padUrl: "/pad-sandbox/"
+		});
+	};
+	const previewSandbox = useDebounceFn(_doPreviewSandbox, 400);
+	/**
+	* 历史预览，根据平台返回预览 URL 和平台信息
+	*
+	* @param {string} hid 历史记录ID
+	* @returns {{ url: string; platform: Platform }} 预览URL和平台类型
+	*/
+	function historyPreview(hid) {
+		const matrixParams = {
+			aid: _gct.store.context.aid,
+			pid: hid,
+			bid: _gct.store.context.bid
+		};
+		let url;
+		if (platform.value === Platform.MOBILE) url = buildPreviewUrl("/mobile-render/", matrixParams);
+		else if (platform.value === Platform.PAD) url = buildPreviewUrl("/pad-render/", matrixParams);
+		else url = buildPreviewUrl("/web-render/", matrixParams);
+		return {
+			url,
+			platform: platform.value
+		};
+	}
+	return {
+		preview,
+		previewSandbox,
+		sandboxList,
+		getDataList,
+		historyPreview
+	};
 }
-
+//#endregion
 export { useDesignPreview };

package/es/hooks/design-view/designer/useDesignSave.d.ts

@@ -1,12 +1,12 @@
 import { PageJson, RuntimePageJson } from '@gct-paas/schema';
 export declare function useDesignSave(): {
-    save: (_flag?: boolean, showSuccess?: boolean) => Promise<boolean>;
+    save: (flag?: boolean, showSuccess?: boolean) => Promise<boolean>;
     validateWidgets: (widgets: IData[], parents?: IData[]) => boolean;
     savePageJsonSnapshot: (json?: PageJson) => void;
 };
 /**
  * 递归遍历 tree 并组装运行时 JSON
  *
- * @returns {RuntimePageJson} 运行时页面JSON
+ * @returns {Promise<RuntimePageJson>} 运行时页面JSON
  */
-export declare function buildRuntimeJson(): RuntimePageJson;
+export declare function buildRuntimeJson(): Promise<RuntimePageJson>;