@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/dist/es/layouts/sidebar/code-block/CodeBlockList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,161 @@
+import { CodeDeleteErrorType } from "../../../type.js";
+import { useServices } from "../../../hooks/use-services.js";
+import { useFilter } from "../../../hooks/use-filter.js";
+import { useNodeStatus } from "../../../hooks/use-node-status.js";
+import Icon_default from "../../../components/Icon.js";
+import Tree_default from "../../../components/Tree.js";
+import { TMagicTooltip, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
+import { DepTargetType } from "@tmagic/core";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { Close, Edit, View } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue?vue&type=script&setup=true&lang.ts
+var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorCodeBlockList",
+	__name: "CodeBlockList",
+	props: {
+		indent: {},
+		nextLevelIndentIncrement: {},
+		customError: { type: Function }
+	},
+	emits: [
+		"edit",
+		"remove",
+		"node-contextmenu"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { codeBlockService, depService, editorService } = useServices();
+		const codeList = computed(() => Object.entries(codeBlockService.getCodeDsl() || {}).map(([codeId, code]) => {
+			const target = depService.getTarget(codeId, DepTargetType.CODE_BLOCK);
+			const pageList = editorService.get("root")?.items.map((page) => ({
+				name: page.devconfig?.tabName || page.name,
+				type: "node",
+				id: `${codeId}_${page.id}`,
+				key: page.id,
+				items: []
+			})) || [];
+			if (target) Object.entries(target.deps).forEach(([id, dep]) => {
+				const page = pageList.find((page) => page.key === dep.data?.pageId);
+				page?.items?.push({
+					name: dep.name,
+					type: "node",
+					id: `${page.id}_${id}`,
+					key: id,
+					items: dep.keys.map((key) => {
+						return {
+							name: `${key}`,
+							id: `${target.id}_${id}_${key}`,
+							type: "key"
+						};
+					})
+				});
+			});
+			return {
+				id: codeId,
+				key: codeId,
+				name: code.name,
+				type: "code",
+				codeBlockContent: codeBlockService.getCodeContentById(codeId),
+				items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || []
+			};
+		}));
+		const filterNode = (value, data) => {
+			if (!value) return true;
+			return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
+		};
+		const { nodeStatusMap } = useNodeStatus(codeList);
+		const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
+		const editable = computed(() => codeBlockService.getEditStatus());
+		const selectComp = (compId) => {
+			const stage = editorService.get("stage");
+			editorService.select(compId);
+			stage?.select(compId);
+		};
+		const clickHandler = (event, data) => {
+			if (data.type === "node") selectComp(data.key);
+		};
+		const editCode = (id) => {
+			emit("edit", id);
+		};
+		const deleteCode = async (id) => {
+			const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
+			const existBinds = Boolean(currentCode?.items?.length);
+			const undeleteableList = codeBlockService.getUndeletableList() || [];
+			if (!existBinds && !undeleteableList.includes(id)) {
+				await tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+					confirmButtonText: "确定",
+					cancelButtonText: "取消",
+					type: "warning"
+				});
+				emit("remove", id);
+			} else if (typeof props.customError === "function") props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+			else if (existBinds) tMagicMessage.error("代码块存在绑定关系，不可删除");
+			else tMagicMessage.error("代码块不可删除");
+		};
+		const nodeContentMenuHandler = (event, data) => {
+			emit("node-contextmenu", event, data);
+		};
+		__expose({
+			nodeStatusMap,
+			filter: filterTextChangeHandler,
+			deleteCode
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Tree_default, {
+				data: codeList.value,
+				"node-status-map": unref(nodeStatusMap),
+				indent: __props.indent,
+				"next-level-indent-increment": __props.nextLevelIndentIncrement,
+				onNodeClick: clickHandler,
+				onNodeContextmenu: nodeContentMenuHandler
+			}, {
+				"tree-node-label": withCtx(({ data }) => [createElementVNode("div", { class: normalizeClass({
+					code: data.type === "code",
+					hook: data.type === "key",
+					disabled: data.type === "key" || data.type === "code"
+				}) }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)]),
+				"tree-node-tool": withCtx(({ data }) => [
+					data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						key: 0,
+						effect: "dark",
+						content: editable.value ? "编辑" : "查看",
+						placement: "bottom"
+					}, {
+						default: withCtx(() => [createVNode(Icon_default, {
+							icon: editable.value ? unref(Edit) : unref(View),
+							class: "edit-icon",
+							onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
+						}, null, 8, ["icon", "onClick"])]),
+						_: 2
+					}, 1032, ["content"])) : createCommentVNode("v-if", true),
+					data.type === "code" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						key: 1,
+						effect: "dark",
+						content: "删除",
+						placement: "bottom"
+					}, {
+						default: withCtx(() => [createVNode(Icon_default, {
+							icon: unref(Close),
+							class: "edit-icon",
+							onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
+						}, null, 8, ["icon", "onClick"])]),
+						_: 2
+					}, 1024)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "code-block-panel-tool", {
+						id: data.key,
+						data
+					})
+				]),
+				_: 3
+			}, 8, [
+				"data",
+				"node-status-map",
+				"indent",
+				"next-level-indent-increment"
+			]);
+		};
+	}
+});
+//#endregion
+export { CodeBlockList_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.js

@@ -0,0 +1,5 @@
+import CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default from "./CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+var CodeBlockListPanel_default = CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CodeBlockListPanel_default as default };

package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+import { useCodeBlockEdit } from "../../../hooks/use-code-block-edit.js";
+import { useServices } from "../../../hooks/use-services.js";
+import CodeBlockEditor_default from "../../../components/CodeBlockEditor.js";
+import ContentMenu_default from "../../../components/ContentMenu.js";
+import SearchInput_default from "../../../components/SearchInput.js";
+import CodeBlockList_default from "./CodeBlockList.js";
+import { useContentMenu } from "./useContentMenu.js";
+import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "search-wrapper" };
+var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorCodeBlockListPanel",
+	__name: "CodeBlockListPanel",
+	props: {
+		indent: {},
+		nextLevelIndentIncrement: {},
+		customError: { type: Function },
+		customContentMenu: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const eventBus = inject("eventBus");
+		const { codeBlockService } = useServices();
+		const editable = computed(() => codeBlockService.getEditStatus());
+		const { codeId, codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
+		const codeBlockListRef = useTemplateRef("codeBlockList");
+		const filterTextChangeHandler = (val) => {
+			codeBlockListRef.value?.filter(val);
+		};
+		eventBus?.on("edit-code", (id) => {
+			editCode(id);
+		});
+		watch(codeId, () => {
+			if (codeBlockListRef.value) for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) status.selected = statusId === codeId.value;
+		});
+		const editDialogCloseHandler = () => {
+			if (codeBlockListRef.value) for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) status.selected = false;
+		};
+		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu((id) => {
+			codeBlockListRef.value?.deleteCode(id);
+		});
+		const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
+					default: withCtx(() => [
+						renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [createElementVNode("div", _hoisted_1, [
+							createVNode(SearchInput_default, { onSearch: filterTextChangeHandler }),
+							editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+								key: 0,
+								class: "create-code-button",
+								type: "primary",
+								size: "small",
+								onClick: unref(createCodeBlock)
+							}, {
+								default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("新增", -1)])]),
+								_: 1
+							}, 8, ["onClick"])) : createCommentVNode("v-if", true),
+							renderSlot(_ctx.$slots, "code-block-panel-search")
+						])]),
+						createCommentVNode(" 代码块列表 "),
+						createVNode(CodeBlockList_default, {
+							ref: "codeBlockList",
+							"custom-error": __props.customError,
+							indent: __props.indent,
+							"next-level-indent-increment": __props.nextLevelIndentIncrement,
+							onEdit: unref(editCode),
+							onRemove: unref(deleteCode),
+							onNodeContextmenu: unref(nodeContentMenuHandler)
+						}, {
+							"code-block-panel-tool": withCtx(({ id, data }) => [renderSlot(_ctx.$slots, "code-block-panel-tool", {
+								id,
+								data
+							})]),
+							_: 3
+						}, 8, [
+							"custom-error",
+							"indent",
+							"next-level-indent-increment",
+							"onEdit",
+							"onRemove",
+							"onNodeContextmenu"
+						])
+					]),
+					_: 3
+				}),
+				unref(codeConfig) ? (openBlock(), createBlock(CodeBlockEditor_default, {
+					key: 0,
+					ref_key: "codeBlockEditor",
+					ref: codeBlockEditor,
+					disabled: !editable.value,
+					content: unref(codeConfig),
+					onSubmit: unref(submitCodeBlockHandler),
+					onClose: editDialogCloseHandler
+				}, null, 8, [
+					"disabled",
+					"content",
+					"onSubmit"
+				])) : createCommentVNode("v-if", true),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [menuData.value.length ? (openBlock(), createBlock(ContentMenu_default, {
+					key: 0,
+					"menu-data": menuData.value,
+					ref: "menu",
+					style: { "overflow": "initial" },
+					onHide: unref(contentMenuHideHandler)
+				}, null, 8, ["menu-data", "onHide"])) : createCommentVNode("v-if", true)]))
+			], 64);
+		};
+	}
+});
+//#endregion
+export { CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/code-block/useContentMenu.js

@@ -0,0 +1,60 @@
+import { inject, markRaw, useTemplateRef } from "vue";
+import { cloneDeep } from "lodash-es";
+import { CopyDocument, Delete, Edit } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/code-block/useContentMenu.ts
+var useContentMenu = (deleteCode) => {
+	const eventBus = inject("eventBus");
+	const menuRef = useTemplateRef("menu");
+	let selectId = "";
+	const menuData = [
+		{
+			type: "button",
+			text: "编辑",
+			icon: Edit,
+			display: ({ codeBlockService }) => codeBlockService.getEditStatus(),
+			handler: () => {
+				if (!selectId) return;
+				eventBus?.emit("edit-code", selectId);
+			}
+		},
+		{
+			type: "button",
+			text: "复制并粘贴至当前",
+			icon: markRaw(CopyDocument),
+			handler: async ({ codeBlockService }) => {
+				if (!selectId) return;
+				const codeBlock = codeBlockService.getCodeContentById(selectId);
+				if (!codeBlock) return;
+				const newCodeId = await codeBlockService.getUniqueId();
+				codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+			}
+		},
+		{
+			type: "button",
+			text: "删除",
+			icon: Delete,
+			handler: () => {
+				if (!selectId) return;
+				deleteCode(selectId);
+			}
+		}
+	];
+	const nodeContentMenuHandler = (event, data) => {
+		event.preventDefault();
+		if (data.type === "code") {
+			menuRef.value?.show(event);
+			if (data.id) selectId = `${data.id}`;
+			else selectId = "";
+		}
+	};
+	const contentMenuHideHandler = () => {
+		selectId = "";
+	};
+	return {
+		menuData,
+		nodeContentMenuHandler,
+		contentMenuHideHandler
+	};
+};
+//#endregion
+export { useContentMenu };

package/dist/es/layouts/sidebar/data-source/DataSourceAddButton.js

@@ -0,0 +1,5 @@
+import DataSourceAddButton_vue_vue_type_script_setup_true_lang_default from "./DataSourceAddButton.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue
+var DataSourceAddButton_default = DataSourceAddButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataSourceAddButton_default as default };

package/dist/es/layouts/sidebar/data-source/DataSourceAddButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import ToolButton_default from "../../../components/ToolButton.js";
+import { TMagicButton, TMagicPopover } from "@tmagic/design";
+import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue?vue&type=script&setup=true&lang.ts
+var DataSourceAddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorDataSourceAddButton",
+	__name: "DataSourceAddButton",
+	props: {
+		datasourceTypeList: {},
+		addButtonConfig: {},
+		addButtonText: {}
+	},
+	emits: ["add"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicPopover), {
+				placement: "right",
+				trigger: "hover",
+				"popper-class": "data-source-list-panel-add-menu",
+				"destroy-on-close": true
+			}, {
+				reference: withCtx(() => [createVNode(unref(TMagicButton), normalizeProps(guardReactiveProps(__props.addButtonConfig || {})), {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.addButtonText || ""), 1)]),
+					_: 1
+				}, 16)]),
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.datasourceTypeList, (item, index) => {
+					return openBlock(), createBlock(ToolButton_default, {
+						data: {
+							type: "button",
+							text: item.text,
+							handler: () => {
+								_ctx.$emit("add", item.type);
+							}
+						},
+						key: index
+					}, null, 8, ["data"]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { DataSourceAddButton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.js

@@ -0,0 +1,5 @@
+import DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default from "./DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
+var DataSourceConfigPanel_default = DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataSourceConfigPanel_default as default };

package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { useServices } from "../../../hooks/use-services.js";
+import { useEditorContentHeight } from "../../../hooks/use-editor-content-height.js";
+import { useNextFloatBoxPosition } from "../../../hooks/use-next-float-box-position.js";
+import FloatingBox_default from "../../../components/FloatingBox.js";
+import { MFormBox } from "@tmagic/form";
+import { tMagicMessage } from "@tmagic/design";
+import { createBlock, createVNode, defineComponent, inject, isRef, mergeModels, nextTick, openBlock, ref, unref, useModel, watch, watchEffect, withCtx } from "vue";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue?vue&type=script&setup=true&lang.ts
+var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorDataSourceConfigPanel",
+	__name: "DataSourceConfigPanel",
+	props: /* @__PURE__ */ mergeModels({
+		title: {},
+		values: {},
+		disabled: { type: Boolean }
+	}, {
+		"visible": {
+			type: Boolean,
+			default: false
+		},
+		"visibleModifiers": {},
+		"width": { default: 670 },
+		"widthModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"submit",
+		"close",
+		"open"
+	], ["update:visible", "update:width"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const boxVisible = useModel(__props, "visible");
+		const width = useModel(__props, "width");
+		const emit = __emit;
+		const { uiService, dataSourceService } = useServices();
+		const initValues = ref({});
+		const dataSourceConfig = ref([]);
+		const { height: editorHeight } = useEditorContentHeight();
+		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		watchEffect(() => {
+			initValues.value = props.values;
+			dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
+		});
+		const submitHandler = (values, data) => {
+			emit("submit", values, data);
+		};
+		const errorHandler = (error) => {
+			tMagicMessage.error(error.message);
+		};
+		watch(boxVisible, (visible) => {
+			nextTick(() => {
+				if (!visible) emit("close");
+				else if (initValues.value?.id) emit("open", initValues.value.id);
+			});
+		});
+		__expose({
+			show() {
+				calcBoxPosition();
+				boxVisible.value = true;
+			},
+			hide() {
+				boxVisible.value = false;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FloatingBox_default, {
+				visible: boxVisible.value,
+				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
+				width: width.value,
+				"onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
+				height: unref(editorHeight),
+				"onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
+				title: __props.title,
+				position: unref(boxPosition)
+			}, {
+				body: withCtx(() => [createVNode(unref(MFormBox), {
+					"label-width": "80px",
+					title: __props.title,
+					config: dataSourceConfig.value,
+					values: initValues.value,
+					disabled: __props.disabled,
+					style: { "height": "100%" },
+					onSubmit: submitHandler,
+					onError: errorHandler
+				}, null, 8, [
+					"title",
+					"config",
+					"values",
+					"disabled"
+				])]),
+				_: 1
+			}, 8, [
+				"visible",
+				"width",
+				"height",
+				"title",
+				"position"
+			]);
+		};
+	}
+});
+//#endregion
+export { DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/data-source/DataSourceList.js

@@ -0,0 +1,5 @@
+import DataSourceList_vue_vue_type_script_setup_true_lang_default from "./DataSourceList.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
+var DataSourceList_default = DataSourceList_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataSourceList_default as default };

package/dist/es/layouts/sidebar/data-source/DataSourceList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,162 @@
+import { useServices } from "../../../hooks/use-services.js";
+import { useFilter } from "../../../hooks/use-filter.js";
+import { useNodeStatus } from "../../../hooks/use-node-status.js";
+import Icon_default from "../../../components/Icon.js";
+import Tree_default from "../../../components/Tree.js";
+import { TMagicTooltip } from "@tmagic/design";
+import { DepTargetType } from "@tmagic/core";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { Close, Edit, View } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue?vue&type=script&setup=true&lang.ts
+var DataSourceList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorDataSourceList",
+	__name: "DataSourceList",
+	props: {
+		indent: {},
+		nextLevelIndentIncrement: {}
+	},
+	emits: [
+		"edit",
+		"remove",
+		"node-contextmenu"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const { depService, editorService, dataSourceService } = useServices();
+		const editable = computed(() => dataSourceService.get("editable"));
+		const dataSources = computed(() => dataSourceService.get("dataSources"));
+		const dsDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE));
+		const dsMethodDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE_METHOD));
+		const dsCondDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE_COND));
+		const getKeyTreeConfig = (dep, type, parentKey) => dep.keys.map((key) => ({
+			name: key,
+			id: `${parentKey}_${key}`,
+			type: "key",
+			isMethod: type === "method",
+			isCond: type === "cond"
+		}));
+		const getNodeTreeConfig = (id, dep, type, parentKey) => ({
+			name: dep.name,
+			type: "node",
+			id: `${parentKey}_${id}`,
+			key: id,
+			items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`)
+		});
+		/**
+		* 生成tree中依赖节点的数据
+		* @param items 节点
+		* @param deps 依赖
+		* @param type 依赖类型
+		*/
+		const mergeChildren = (dsId, pageItems, deps, type) => {
+			Object.entries(deps).forEach(([id, dep]) => {
+				const page = pageItems.find((page) => page.key === dep.data?.pageId);
+				const nodeItem = page?.items.find((item) => item.key === id);
+				if (nodeItem) nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
+				else page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
+			});
+		};
+		const list = computed(() => dataSources.value.map((ds) => {
+			const dsDeps = dsDep.value[ds.id]?.deps || {};
+			const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
+			const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
+			const items = editorService.get("root")?.items.map((page) => ({
+				name: page.devconfig?.tabName || page.name,
+				type: "node",
+				id: `${ds.id}_${page.id}`,
+				key: page.id,
+				items: []
+			})) || [];
+			mergeChildren(ds.id, items, dsDeps);
+			mergeChildren(ds.id, items, dsMethodDeps, "method");
+			mergeChildren(ds.id, items, dsCondDeps, "cond");
+			return {
+				id: ds.id,
+				key: ds.id,
+				name: ds.title,
+				type: "ds",
+				items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
+			};
+		}));
+		const filterNode = (value, data) => {
+			if (!value) return true;
+			return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
+		};
+		const { nodeStatusMap } = useNodeStatus(list);
+		const { filterTextChangeHandler } = useFilter(list, nodeStatusMap, filterNode);
+		const editHandler = (id) => {
+			emit("edit", id);
+		};
+		const removeHandler = async (id) => {
+			emit("remove", id);
+		};
+		const selectComp = (compId) => {
+			const stage = editorService.get("stage");
+			editorService.select(compId);
+			stage?.select(compId);
+		};
+		const clickHandler = (event, data) => {
+			if (data.type === "node") selectComp(data.key);
+		};
+		const nodeContentMenuHandler = (event, data) => {
+			emit("node-contextmenu", event, data);
+		};
+		__expose({
+			nodeStatusMap,
+			filter: filterTextChangeHandler
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Tree_default, {
+				data: list.value,
+				"node-status-map": unref(nodeStatusMap),
+				indent: __props.indent,
+				"next-level-indent-increment": __props.nextLevelIndentIncrement,
+				onNodeClick: clickHandler,
+				onNodeContextmenu: nodeContentMenuHandler
+			}, {
+				"tree-node-label": withCtx(({ data }) => [createElementVNode("div", { class: normalizeClass({
+					ds: data.type === "ds",
+					hook: data.type === "key",
+					disabled: data.type === "key" || data.type === "ds"
+				}) }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)]),
+				"tree-node-tool": withCtx(({ data }) => [
+					data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						key: 0,
+						effect: "dark",
+						content: editable.value ? "编辑" : "查看",
+						placement: "bottom"
+					}, {
+						default: withCtx(() => [createVNode(Icon_default, {
+							icon: editable.value ? unref(Edit) : unref(View),
+							class: "edit-icon",
+							onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
+						}, null, 8, ["icon", "onClick"])]),
+						_: 2
+					}, 1032, ["content"])) : createCommentVNode("v-if", true),
+					data.type === "ds" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						key: 1,
+						effect: "dark",
+						content: "删除",
+						placement: "bottom"
+					}, {
+						default: withCtx(() => [createVNode(Icon_default, {
+							icon: unref(Close),
+							class: "edit-icon",
+							onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
+						}, null, 8, ["icon", "onClick"])]),
+						_: 2
+					}, 1024)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+				]),
+				_: 3
+			}, 8, [
+				"data",
+				"node-status-map",
+				"indent",
+				"next-level-indent-increment"
+			]);
+		};
+	}
+});
+//#endregion
+export { DataSourceList_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.js

@@ -0,0 +1,5 @@
+import DataSourceListPanel_vue_vue_type_script_setup_true_lang_default from "./DataSourceListPanel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+var DataSourceListPanel_default = DataSourceListPanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataSourceListPanel_default as default };