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

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

@@ -0,0 +1,109 @@
+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();
+	/**
+	* 打开/关闭模态框设计模式
+	*
+	* @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.d.ts

@@ -0,0 +1,11 @@
+import { Platform } from '@gct-paas/core';
+export declare function useDesignPreview(): {
+    preview: import('@vueuse/core').UseDebounceFnReturn<() => void>;
+    previewSandbox: import('@vueuse/core').UseDebounceFnReturn<() => void>;
+    sandboxList: import('vue').Ref<any, any>;
+    getDataList: () => Promise<void>;
+    historyPreview: (hid: string) => {
+        url: string;
+        platform: Platform;
+    };
+};

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

@@ -0,0 +1,117 @@
+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() {
+	/**
+	* 构建预览 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

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

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

@@ -0,0 +1,225 @@
+import { platform } from "../../../utils/design-view/index.mjs";
+import { buildRunJs } from "../../../utils/transform-js/transform-js.mjs";
+import "../../../utils/index.mjs";
+import { noMore, pageDesignHistoryList, pageJson, pageJsonSnapshot, pageNo, regRoot, transformPageJson, widgetInfo } from "../design-state.mjs";
+import { useUserOccupy } from "../../../components/user-occupy/useUserOccupy.mjs";
+import "../../../components/index.mjs";
+import { isArray, isEmpty, isNil } from "lodash-es";
+import { Platform, SearchComponents, TreeHelper, t } from "@gct-paas/core";
+import { message } from "ant-design-vue";
+//#region src/hooks/design-view/designer/useDesignSave.ts
+/**
+* 保存与数据校验 Hook
+*
+* 管理设计器页面数据的保存、预处理和校验逻辑，
+* 包括组件必填校验、数值范围校验、运行时 JSON 构建等。
+*/
+function useDesignSave() {
+	const { cancelOccupy } = useUserOccupy();
+	/**
+	* 保存页面数据快照，用于脏检查对比
+	*
+	* @param {PageJson} json 可选，传入则保存此 json 的快照，否则保存当前 pageJson
+	*/
+	function savePageJsonSnapshot(json) {
+		pageJsonSnapshot.value = JSON.stringify(json ?? pageJson);
+	}
+	/**
+	* 保存时对数据做校验
+	*
+	* @author zhanghanrui
+	* @date 2024-05-11 11:05:14
+	* @param {IData[]} widgets 组件数据列表
+	* @param {IData[]} parents 父级数据列表
+	* @returns {boolean} 是否校验通过
+	*/
+	function validateWidgets(widgets, parents = []) {
+		for (let i = 0; i < widgets.length; i++) {
+			const widget = widgets[i];
+			const { type, props } = widget;
+			const configs = widgetInfo.value.propEditors[type];
+			const models = configs && isArray(configs) ? configs : configs(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 val = widget[name.substring(5)];
+						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) {
+							if (model.hidden(widget) === 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;
+	}
+	/**
+	* 保存完成解除占用
+	*
+	* @param {boolean} flag 是否为保存操作（true为保存，false为恢复）
+	* @param {boolean} showSuccess 是否显示成功提示
+	* @returns {Promise<boolean>} 是否保存成功
+	*/
+	async function save(flag = true, showSuccess = true) {
+		const pageId = _gct.store.context.pid;
+		const _pageJson = transformPageJson(pageJson);
+		if (validateWidgets(_pageJson.widgets) === 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 = "";
+		});
+		if (validateWidgets(_pageJson.modals) === 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 = [];
+		/**
+		* 递归查找所有插件
+		*
+		* @param {LowCodeWidget.BasicSchema[]} widgets 组件列表
+		* @returns {PagePlugin[]} 插件列表
+		*/
+		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;
+		const runtimeJson = await buildRuntimeJson();
+		if (platform.value === Platform.MOBILE) await _api.apaas.mobilePage.putUpdateDesignerJsonId({ id: pageId }, {
+			designerJson: JSON.stringify(_pageJson),
+			runtimeJson: JSON.stringify(runtimeJson),
+			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(runtimeJson),
+			logId: (pageDesignHistoryList.value[0] ?? {}).id
+		});
+		else await _api.apaas.webpage.putUpdateDesignerJsonId({ id: pageId }, {
+			designerJson: JSON.stringify(_pageJson),
+			runtimeJson: JSON.stringify(runtimeJson),
+			logId: (pageDesignHistoryList.value[0] ?? {}).id
+		});
+		savePageJsonSnapshot(_pageJson);
+		if (showSuccess) _gct.message.success(flag ? "sys.saveSuccess" : "sys.recoverSuccess");
+		cancelOccupy();
+		noMore.value = false;
+		pageNo.value = 1;
+		return true;
+	}
+	return {
+		save,
+		validateWidgets,
+		savePageJsonSnapshot
+	};
+}
+/**
+* 递归遍历 tree 并组装运行时 JSON
+*
+* @returns {Promise<RuntimePageJson>} 运行时页面JSON
+*/
+async function buildRuntimeJson() {
+	try {
+		const runtimeWidgets = TreeHelper.traverseAndBuildTree(JSON.parse(JSON.stringify(pageJson.widgets)), (node) => findWidgetCallback(node));
+		/**经过babel转换过的所有函数集合包含未export ES5字符串
+		来源于页面JS和逻辑编排*/
+		const funcStr = await buildRunJs(pageJson.js);
+		const modals = pageJson.modals.map(async (modal) => {
+			const modalFuncStr = await buildRunJs(modal.js);
+			const runtimeWidgets = TreeHelper.traverseAndBuildTree(JSON.parse(JSON.stringify(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: runtimeWidgets,
+				runJs: modalFuncStr,
+				style: modal.style
+			};
+		});
+		return {
+			widgets: runtimeWidgets,
+			runJs: funcStr,
+			modals: await Promise.all(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 error;
+	}
+}
+/**
+* 查找组件的运行时回调处理
+*
+* @param {LowCodeWidget.BasicSchema} node 组件节点
+* @param {LowCodeModal.Modal} modal 所属弹框
+* @returns {*} 回调结果
+*/
+function findWidgetCallback(node, modal) {
+	return widgetInfo.value.callback[node.type]?.(node, modal);
+}
+//#endregion
+export { buildRuntimeJson, useDesignSave };

package/es/hooks/design-view/{usePropEditor.d.ts → editor/usePropEditor.d.ts}

@@ -4,9 +4,9 @@ import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
  * propName 类型定义:可以是字符串或对象映射
  */
 type PropNameType = string | Record<string, string>;
-export declare const props: {
+export declare const propEditorProps: {
     propName: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: StringConstructor;
         default: string;
     };
     propConfig: {
@@ -14,7 +14,7 @@ export declare const props: {
         default: {};
     };
     changeCallback: {
-        type: FunctionConstructor;
+        type: PropType<(widget: LowCodeWidget.BasicSchema | LowCodeModal.Modal | Partial<LowCodeWidget.BasicSchema> | Partial<LowCodeModal.Modal> | undefined, value: unknown) => void>;
     };
     required: {
         type: BooleanConstructor;

package/es/hooks/design-view/editor/usePropEditor.mjs

@@ -0,0 +1,93 @@
+import { regRoot } from "../design-state.mjs";
+import { useSelectedWidget } from "../widget/useSelectedWidget.mjs";
+import { useDesignCache } from "../designer/useDesignCache.mjs";
+import { isObject, isString } from "lodash-es";
+import { computed, nextTick } from "vue";
+//#region src/hooks/design-view/editor/usePropEditor.ts
+var propEditorProps = {
+	propName: {
+		type: String,
+		default: ""
+	},
+	propConfig: {
+		type: Object,
+		default: {}
+	},
+	changeCallback: { type: Function },
+	required: {
+		type: Boolean,
+		default: false
+	},
+	validate: { type: Promise },
+	widget: { type: Object }
+};
+function usePropEditor(propName, changeCallback, globData = {}) {
+	const { selectedProps, selectedRef } = useSelectedWidget();
+	const { emitCache } = useDesignCache();
+	/**
+	* propName支持字符串链式调用，对象情况支持多字段
+	*
+	* @param {unknown} value 要设置的值
+	* @param {PropNameType} name 属性名称或映射
+	*/
+	function setValue(value, name) {
+		if (isString(name)) {
+			/**root 开头的字段就在全链路处理 */
+			const widget = regRoot.test(name) ? selectedRef : selectedProps;
+			const keyslist = name.replace(regRoot, "").split(".");
+			const len = keyslist.length - 1;
+			keyslist.reduce((memo, cur, index) => {
+				if (index === len) memo[cur] = value;
+				return memo[cur];
+			}, widget.value);
+		}
+		if (isObject(name)) {
+			const valueMap = value;
+			for (const key in name) {
+				const valKey = name[key];
+				setValue(valueMap[key], valKey);
+			}
+		}
+	}
+	/**
+	* 获取属性值，支持链式路径和对象映射
+	*
+	* @param {PropNameType} name 属性名称或映射
+	* @returns {unknown} 属性值
+	*/
+	function getValue(name) {
+		if (isString(name)) {
+			const widget = regRoot.test(name) ? selectedRef : selectedProps;
+			if (!widget?.value) return;
+			const keyslist = name.replace(regRoot, "").split(".");
+			try {
+				return keyslist.reduce((memo, cur) => memo[cur], widget.value);
+			} catch (err) {
+				console.warn(err);
+			}
+		}
+		if (isObject(name)) {
+			const valueMap = {};
+			for (const key in name) {
+				const valKey = name[key];
+				valueMap[key] = getValue(valKey);
+			}
+			return valueMap;
+		}
+	}
+	return { propValue: computed({
+		get() {
+			const baseValue = getValue(propName);
+			return baseValue ?? (isString(propName) ? globData[propName] : baseValue);
+		},
+		set(val) {
+			setValue(val, propName);
+			if (!!changeCallback && typeof changeCallback === "function") nextTick().then(() => {
+				changeCallback(selectedRef.value, val);
+			});
+			emitCache();
+		}
+	}) };
+}
+//#endregion
+export { propEditorProps, usePropEditor };

package/es/hooks/design-view/{useStyle.d.ts → editor/useStyle.d.ts}

@@ -1,5 +1,5 @@
-import { LowCodeWidget } from '@gct-paas/schema';
-export declare function useStyle(widget: LowCodeWidget.BasicSchema): {
+import { LowCodeModal, LowCodeWidget } from '@gct-paas/schema';
+export declare function useStyle(widget: LowCodeWidget.BasicSchema | LowCodeModal.Modal): {
     wrapperStyle: import('vue').ComputedRef<IObject>;
     wStyle: import('vue').ComputedRef<IObject>;
     labelFont: import('vue').ComputedRef<IObject>;

package/es/hooks/design-view/editor/useStyle.mjs

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import { extractFontStyle, generateWrapperStyle, propsToStyle } from "@gct-paas/schema";
+//#region src/hooks/design-view/editor/useStyle.ts
+function useStyle(widget) {
+	const { style = {}, ignoringStyle } = widget;
+	const wStyle = computed(() => {
+		return propsToStyle(style);
+	});
+	return {
+		wrapperStyle: computed(() => {
+			return generateWrapperStyle(style, ignoringStyle);
+		}),
+		wStyle,
+		labelFont: computed(() => {
+			return extractFontStyle(style.labelFont);
+		}),
+		contentFont: computed(() => {
+			return extractFontStyle(style.contentFont);
+		})
+	};
+}
+/**
+* 将样式对象转换为字体样式
+*
+* @param schema - 样式配置对象
+* @returns 转换后的字体样式对象
+*/
+var schemaToStyle = (schema) => extractFontStyle(schema);
+/**
+* 将样式属性对象转换为 CSS 样式字符串格式
+*
+* @param styleProps - 样式属性对象
+* @returns 转换后的样式对象
+*/
+function propsToStyle$1(styleProps = {}) {
+	return propsToStyle(styleProps);
+}
+//#endregion
+export { propsToStyle$1 as propsToStyle, schemaToStyle, useStyle };

package/es/hooks/design-view/editor/useStyleEditor.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
+import { shadeColor, rgba2hex } from '../utils/color.util';
+import { PRESET_COLOR, BTN_TYPE_COLOR } from '../constants/style-editor.const';
+export { shadeColor, rgba2hex };
+export { PRESET_COLOR as presetColor, BTN_TYPE_COLOR as btnTypeColor };
+export declare const styleEditorProps: {
+    editor: {
+        type: PropType<LowCodeWidget.StyleEditor>;
+        default: {};
+    };
+    widget: {
+        type: PropType<LowCodeWidget.BasicSchema | LowCodeModal.Modal>;
+    };
+    propConfig: {
+        type: ObjectConstructor;
+        default: {};
+    };
+};
+/**
+ * 样式编辑器 composable
+ * 封装样式属性的读写逻辑，支持链式路径和对象映射
+ *
+ * @template T 样式值类型
+ * @param {IObject} editor 样式编辑器配置
+ * @returns {{ styleValue: ComputedRef<T> }}
+ */
+export declare function useStyleEditor<T = IObject>(editor: IObject): {
+    styleValue: import('vue').WritableComputedRef<T, T>;
+};