@tmagic/editor 1.7.7 → 1.7.8-beta.2

package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,270 @@
+import { getEditorConfig } from "../utils/config.js";
+import monaco_editor_default from "../utils/monaco-editor.js";
+import Icon_default from "../components/Icon.js";
+import { TMagicButton } from "@tmagic/design";
+import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
+import { throttle } from "lodash-es";
+import serialize from "serialize-javascript";
+import { FullScreen } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/CodeEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "magic-code-editor" };
+var _hoisted_2 = {
+	ref: "codeEditor",
+	class: "magic-code-editor-content"
+};
+var CodeEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorCodeEditor",
+	__name: "CodeEditor",
+	props: {
+		initValues: { default: "" },
+		modifiedValues: {},
+		type: {},
+		language: { default: "javascript" },
+		options: { default: () => ({ tabSize: 2 }) },
+		height: {},
+		autoSave: {
+			type: Boolean,
+			default: true
+		},
+		parse: {
+			type: Boolean,
+			default: false
+		},
+		disabledFullScreen: {
+			type: Boolean,
+			default: false
+		},
+		autosize: {},
+		editorCustomType: {}
+	},
+	emits: ["initd", "save"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const autoHeight = ref("");
+		let cachedExtraHeight = null;
+		const computeHeight = computed(() => {
+			if (fullScreen.value) return "100%";
+			if (props.height) return props.height;
+			if (props.autosize) return autoHeight.value;
+			return "100%";
+		});
+		const calculateExtraHeight = () => {
+			let extraHeight = 10;
+			if (vsEditor && codeEditorEl.value) try {
+				const editorElement = codeEditorEl.value.querySelector(".monaco-editor");
+				const scrollableElement = codeEditorEl.value.querySelector(".monaco-scrollable-element");
+				if (editorElement && scrollableElement) {
+					const editorRect = editorElement.getBoundingClientRect();
+					const scrollableRect = scrollableElement.getBoundingClientRect();
+					extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
+					if (extraHeight === 0 && monaco) {
+						const editorOptions = vsEditor.getOptions();
+						const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
+						const padding = editorOptions.get(monaco.editor.EditorOption.padding);
+						const lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
+						extraHeight = (scrollBeyondLastLine ? lineHeight : 0) + (padding?.top || 0) + (padding?.bottom || 0) + 10;
+					}
+				}
+			} catch (error) {
+				console.warn("Failed to calculate editor extra height:", error);
+			}
+			return extraHeight;
+		};
+		const setAutoHeight = (v = "") => {
+			let lines = Math.max(v.split("\n").length, props.autosize?.minRows || 1);
+			if (v) {
+				if (props.autosize?.maxRows) lines = Math.min(lines, props.autosize.maxRows);
+			}
+			let lineHeight = 20;
+			if (vsEditor && monaco) lineHeight = vsEditor.getOptions().get(monaco.editor.EditorOption.lineHeight) || 20;
+			if (cachedExtraHeight === null) cachedExtraHeight = calculateExtraHeight();
+			const newHeight = `${lines * lineHeight + cachedExtraHeight}px`;
+			if (autoHeight.value !== newHeight) {
+				autoHeight.value = newHeight;
+				nextTick(() => {
+					vsEditor?.layout();
+					if (vsEditor) {
+						vsEditor.setScrollTop(0);
+						vsEditor.revealLine(1);
+					}
+				});
+			}
+		};
+		const toString = (v, language) => {
+			let value;
+			if (typeof v !== "string") if (language === "json") value = JSON.stringify(v, null, 2);
+			else value = serialize(v, {
+				space: 2,
+				unsafe: true
+			}).replace(/"(\w+)":\s/g, "$1: ");
+			else value = v;
+			if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) value = `(${value})`;
+			return value;
+		};
+		const parseCode = (v, language) => {
+			if (typeof v !== "string") return v;
+			if (language === "json") return JSON.parse(v);
+			return getEditorConfig("parseDSL")(v);
+		};
+		let monaco = null;
+		let vsEditor = null;
+		let vsDiffEditor = null;
+		const values = ref("");
+		const loading = ref(false);
+		const codeEditorEl = useTemplateRef("codeEditor");
+		const resizeObserver = new globalThis.ResizeObserver(throttle(() => {
+			vsEditor?.layout();
+			vsDiffEditor?.layout();
+		}, 300));
+		const setEditorValue = (v, m) => {
+			values.value = toString(v, props.language.toLocaleLowerCase());
+			setAutoHeight(values.value);
+			if (!monaco) return;
+			if (props.type === "diff") {
+				const originalModel = monaco.editor.createModel(values.value, "text/javascript");
+				const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
+				const position = vsDiffEditor?.getPosition();
+				const result = vsDiffEditor?.setModel({
+					original: originalModel,
+					modified: modifiedModel
+				});
+				if (position) {
+					vsDiffEditor?.setPosition(position);
+					vsDiffEditor?.focus();
+				}
+				return result;
+			}
+			const position = vsEditor?.getPosition();
+			const result = vsEditor?.setValue(values.value);
+			if (position) {
+				vsEditor?.setPosition(position);
+				vsEditor?.focus();
+			}
+			return result;
+		};
+		const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
+		const handleKeyDown = (e) => {
+			if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+				e.preventDefault();
+				e.stopPropagation();
+				const newValue = getEditorValue();
+				values.value = newValue;
+				emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
+			}
+		};
+		const init = async () => {
+			if (!codeEditorEl.value) return;
+			if (codeEditorEl.value.clientHeight === 0) await nextTick();
+			cachedExtraHeight = null;
+			monaco = await monaco_editor_default();
+			const options = {
+				value: values.value,
+				language: props.language,
+				theme: "vs-dark",
+				editorCustomType: props.editorCustomType,
+				...props.options
+			};
+			if (props.type === "diff") {
+				vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, codeEditorEl.value, options);
+				vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
+					if (props.autosize) setAutoHeight(getEditorValue());
+				});
+			} else {
+				vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, codeEditorEl.value, options);
+				vsEditor.onDidChangeModelContent(() => {
+					if (props.autosize) setAutoHeight(getEditorValue());
+				});
+			}
+			setEditorValue(props.initValues, props.modifiedValues);
+			emit("initd", vsEditor);
+			codeEditorEl.value.addEventListener("keydown", handleKeyDown);
+			if (props.type !== "diff" && props.autoSave) vsEditor?.onDidBlurEditorWidget(() => {
+				const newValue = getEditorValue();
+				if (values.value !== newValue) {
+					values.value = newValue;
+					emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
+				}
+			});
+			resizeObserver.observe(codeEditorEl.value);
+		};
+		watch(() => props.initValues, (v, preV) => {
+			if (v !== preV) setEditorValue(props.initValues, props.modifiedValues);
+		}, {
+			deep: true,
+			immediate: true
+		});
+		watch(() => props.options, (v) => {
+			vsEditor?.updateOptions(v);
+			vsDiffEditor?.updateOptions(v);
+		}, { deep: true });
+		onMounted(async () => {
+			loading.value = true;
+			await init();
+			loading.value = false;
+		});
+		onBeforeUnmount(() => {
+			resizeObserver.disconnect();
+			vsEditor?.dispose();
+			vsDiffEditor?.dispose();
+			vsEditor = null;
+			vsDiffEditor = null;
+			monaco = null;
+			cachedExtraHeight = null;
+		});
+		onUnmounted(() => {
+			codeEditorEl.value?.removeEventListener("keydown", handleKeyDown);
+		});
+		const fullScreen = ref(false);
+		const fullScreenHandler = () => {
+			fullScreen.value = !fullScreen.value;
+			setTimeout(() => {
+				vsEditor?.focus();
+				vsEditor?.layout();
+				vsDiffEditor?.focus();
+				vsDiffEditor?.layout();
+			});
+		};
+		__expose({
+			values,
+			getEditor() {
+				return vsEditor || vsDiffEditor;
+			},
+			getVsEditor() {
+				return vsEditor;
+			},
+			getVsDiffEditor() {
+				return vsDiffEditor;
+			},
+			setEditorValue,
+			getEditorValue,
+			focus() {
+				vsEditor?.focus();
+				vsDiffEditor?.focus();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(), createBlock(Teleport, {
+				to: "body",
+				disabled: !fullScreen.value
+			}, [createElementVNode("div", {
+				class: normalizeClass({
+					"magic-code-editor-wrapper": true,
+					"full-screen": fullScreen.value
+				}),
+				style: normalizeStyle({ height: computeHeight.value })
+			}, [!__props.disabledFullScreen ? (openBlock(), createBlock(unref(TMagicButton), {
+				key: 0,
+				class: "magic-code-editor-full-screen-icon",
+				circle: "",
+				size: "small",
+				onClick: fullScreenHandler
+			}, {
+				default: withCtx(() => [createVNode(Icon_default, { icon: unref(FullScreen) }, null, 8, ["icon"])]),
+				_: 1
+			})) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, null, 512)], 6)], 8, ["disabled"]))]);
+		};
+	}
+});
+//#endregion
+export { CodeEditor_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/Framework.js

@@ -0,0 +1,5 @@
+import Framework_vue_vue_type_script_setup_true_lang_default from "./Framework.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/Framework.vue
+var Framework_default = Framework_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Framework_default as default };

package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,134 @@
+import { getEditorConfig } from "../utils/config.js";
+import { Protocol } from "../services/storage.js";
+import { LEFT_COLUMN_WIDTH_STORAGE_KEY, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from "../utils/const.js";
+import { useServices } from "../hooks/use-services.js";
+import SplitView_default from "../components/SplitView.js";
+import PageBar_default from "./page-bar/PageBar.js";
+import AddPageBox_default from "./AddPageBox.js";
+import CodeEditor_default from "./CodeEditor.js";
+import { computed, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, inject, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+//#region packages/editor/src/layouts/Framework.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "m-editor",
+	ref: "content",
+	style: { "min-width": "900px" }
+};
+var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorFramework",
+	__name: "Framework",
+	props: {
+		disabledPageFragment: { type: Boolean },
+		pageBarSortOptions: {},
+		pageFilterFunction: { type: Function }
+	},
+	setup(__props) {
+		const codeOptions = inject("codeOptions", {});
+		const { editorService, uiService, storageService } = useServices();
+		const contentEl = useTemplateRef("content");
+		const splitViewRef = useTemplateRef("splitView");
+		const root = computed(() => editorService.get("root"));
+		const page = computed(() => editorService.get("page"));
+		const pageLength = computed(() => editorService.get("pageLength") || 0);
+		const showSrc = computed(() => uiService.get("showSrc"));
+		const columnWidth = computed(() => uiService.get("columnWidth"));
+		watch(pageLength, () => {
+			splitViewRef.value?.updateWidth();
+		});
+		watch(() => uiService.get("hideSlideBar"), (hideSlideBar) => {
+			uiService.set("columnWidth", {
+				...columnWidth.value,
+				left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310
+			});
+		});
+		const columnWidthChange = (columnW) => {
+			storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
+			storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnW.right, { protocol: Protocol.NUMBER });
+			uiService.set("columnWidth", columnW);
+		};
+		const frameworkRect = computed(() => uiService.get("frameworkRect"));
+		const resizerObserver = new ResizeObserver((entries) => {
+			const { contentRect } = entries[0];
+			uiService.set("frameworkRect", {
+				width: contentRect.width,
+				height: contentRect.height,
+				left: contentRect.left,
+				top: contentRect.top
+			});
+		});
+		onMounted(() => {
+			if (contentEl.value) resizerObserver.observe(contentEl.value);
+		});
+		onBeforeUnmount(() => {
+			resizerObserver.disconnect();
+		});
+		const saveCode = (value) => {
+			try {
+				const parseDSL = getEditorConfig("parseDSL");
+				editorService.set("root", parseDSL(value));
+			} catch (e) {
+				console.error(e);
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				renderSlot(_ctx.$slots, "header"),
+				renderSlot(_ctx.$slots, "nav"),
+				renderSlot(_ctx.$slots, "content-before"),
+				showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [createVNode(CodeEditor_default, {
+					class: "m-editor-content",
+					"editor-custom-type": "m-editor-content",
+					"init-values": root.value,
+					options: unref(codeOptions),
+					onSave: saveCode
+				}, null, 8, ["init-values", "options"])]) : createCommentVNode("v-if", true),
+				withDirectives(createVNode(SplitView_default, {
+					ref: "splitView",
+					class: "m-editor-content",
+					"left-class": "m-editor-framework-left",
+					"center-class": "m-editor-framework-center",
+					"right-class": "m-editor-framework-right",
+					left: columnWidth.value.left,
+					right: columnWidth.value.right,
+					"min-left": unref(200),
+					"min-right": unref(300),
+					"min-center": unref(400),
+					width: frameworkRect.value.width,
+					onChange: columnWidthChange
+				}, createSlots({
+					left: withCtx(() => [renderSlot(_ctx.$slots, "sidebar")]),
+					center: withCtx(() => [page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [createVNode(AddPageBox_default, { "disabled-page-fragment": __props.disabledPageFragment }, null, 8, ["disabled-page-fragment"])]), renderSlot(_ctx.$slots, "page-bar", {}, () => [createVNode(PageBar_default, {
+						"disabled-page-fragment": __props.disabledPageFragment,
+						"page-bar-sort-options": __props.pageBarSortOptions,
+						"filter-function": __props.pageFilterFunction
+					}, {
+						"page-bar-add-button": withCtx(() => [renderSlot(_ctx.$slots, "page-bar-add-button")]),
+						"page-bar-title": withCtx(({ page }) => [renderSlot(_ctx.$slots, "page-bar-title", { page })]),
+						"page-bar-popover": withCtx(({ page }) => [renderSlot(_ctx.$slots, "page-bar-popover", { page })]),
+						"page-list-popover": withCtx(({ list }) => [renderSlot(_ctx.$slots, "page-list-popover", { list })]),
+						_: 3
+					}, 8, [
+						"disabled-page-fragment",
+						"page-bar-sort-options",
+						"filter-function"
+					])])]),
+					_: 2
+				}, [page.value ? {
+					name: "right",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "props-panel")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"left",
+					"right",
+					"min-left",
+					"min-right",
+					"min-center",
+					"width"
+				]), [[vShow, !showSrc.value]]),
+				renderSlot(_ctx.$slots, "content-after"),
+				renderSlot(_ctx.$slots, "footer")
+			], 512);
+		};
+	}
+});
+//#endregion
+export { Framework_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/NavMenu.js

@@ -0,0 +1,5 @@
+import NavMenu_vue_vue_type_script_setup_true_lang_default from "./NavMenu.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/NavMenu.vue
+var NavMenu_default = NavMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { NavMenu_default as default };

package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,181 @@
+import { ColumnLayout } from "../type.js";
+import { useServices } from "../hooks/use-services.js";
+import ToolButton_default from "../components/ToolButton.js";
+import { NodeType } from "@tmagic/core";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, unref, useTemplateRef } from "vue";
+import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/NavMenu.vue?vue&type=script&setup=true&lang.ts
+var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorNavMenu",
+	__name: "NavMenu",
+	props: {
+		data: { default: () => ({}) },
+		height: { default: 35 }
+	},
+	setup(__props) {
+		const props = __props;
+		const { uiService, editorService, historyService } = useServices();
+		const columnWidth = computed(() => uiService.get("columnWidth"));
+		const keys = Object.values(ColumnLayout);
+		const showGuides = computed(() => uiService.get("showGuides"));
+		const showRule = computed(() => uiService.get("showRule"));
+		const zoom = computed(() => uiService.get("zoom"));
+		const ctrl = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "Command" : "Ctrl";
+		const getConfig = (item) => {
+			if (typeof item !== "string") return [item];
+			const config = [];
+			switch (item) {
+				case "/":
+					config.push({
+						type: "divider",
+						className: "divider"
+					});
+					break;
+				case "zoom":
+					config.push(...getConfig("zoom-out"), ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`), ...getConfig("zoom-in"), ...getConfig("scale-to-original"), ...getConfig("scale-to-fit"));
+					break;
+				case "delete":
+					config.push({
+						type: "button",
+						className: "delete",
+						icon: markRaw(Delete),
+						tooltip: "刪除(Delete)",
+						disabled: () => editorService.get("node")?.type === NodeType.PAGE,
+						handler: () => {
+							const node = editorService.get("node");
+							node && editorService.remove(node);
+						}
+					});
+					break;
+				case "undo":
+					config.push({
+						type: "button",
+						className: "undo",
+						icon: markRaw(Back),
+						tooltip: `后退(${ctrl}+z)`,
+						disabled: () => !historyService.state.canUndo,
+						handler: () => editorService.undo()
+					});
+					break;
+				case "redo":
+					config.push({
+						type: "button",
+						className: "redo",
+						icon: markRaw(Right),
+						tooltip: `前进(${ctrl}+Shift+z)`,
+						disabled: () => !historyService.state.canRedo,
+						handler: () => editorService.redo()
+					});
+					break;
+				case "zoom-in":
+					config.push({
+						type: "button",
+						className: "zoom-in",
+						icon: markRaw(ZoomIn),
+						tooltip: `放大(${ctrl}+=)`,
+						handler: () => uiService?.zoom(.1)
+					});
+					break;
+				case "zoom-out":
+					config.push({
+						type: "button",
+						className: "zoom-out",
+						icon: markRaw(ZoomOut),
+						tooltip: `縮小(${ctrl}+-)`,
+						handler: () => uiService?.zoom(-.1)
+					});
+					break;
+				case "scale-to-original":
+					config.push({
+						type: "button",
+						className: "scale-to-original",
+						icon: markRaw(ScaleToOriginal),
+						tooltip: `缩放到实际大小(${ctrl}+1)`,
+						handler: () => uiService?.set("zoom", 1)
+					});
+					break;
+				case "scale-to-fit":
+					config.push({
+						type: "button",
+						className: "scale-to-fit",
+						icon: markRaw(FullScreen),
+						tooltip: `缩放以适应(${ctrl}+0)`,
+						handler: async () => uiService?.set("zoom", await uiService.calcZoom())
+					});
+					break;
+				case "rule":
+					config.push({
+						type: "button",
+						className: "rule",
+						icon: markRaw(Memo),
+						tooltip: showRule.value ? "隐藏标尺" : "显示标尺",
+						handler: () => uiService?.set("showRule", !showRule.value)
+					});
+					break;
+				case "guides":
+					config.push({
+						type: "button",
+						className: "guides",
+						icon: markRaw(Grid),
+						tooltip: showGuides.value ? "隐藏参考线" : "显示参考线",
+						handler: () => uiService?.set("showGuides", !showGuides.value)
+					});
+					break;
+				default: config.push({
+					type: "text",
+					text: item
+				});
+			}
+			return config;
+		};
+		const buttons = computed(() => {
+			const data = {
+				[ColumnLayout.LEFT]: [],
+				[ColumnLayout.CENTER]: [],
+				[ColumnLayout.RIGHT]: []
+			};
+			keys.forEach((key) => {
+				(props.data[key] || []).forEach((item) => {
+					data[key].push(...getConfig(item));
+				});
+			});
+			return data;
+		});
+		const navMenuEl = useTemplateRef("navMenu");
+		const resizeObserver = new ResizeObserver(() => {
+			const rect = navMenuEl.value?.getBoundingClientRect();
+			if (rect) uiService.set("navMenuRect", {
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height
+			});
+		});
+		onMounted(() => {
+			navMenuEl.value && resizeObserver.observe(navMenuEl.value);
+		});
+		onBeforeUnmount(() => {
+			resizeObserver.disconnect();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-editor-nav-menu",
+				style: normalizeStyle({ height: `${__props.height}px` }),
+				ref: "navMenu"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
+				return openBlock(), createElementBlock("div", {
+					class: normalizeClass(`menu-${key}`),
+					key,
+					style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
+					return openBlock(), createBlock(ToolButton_default, {
+						data: item,
+						key: index
+					}, null, 8, ["data"]);
+				}), 128))], 6);
+			}), 128))], 4);
+		};
+	}
+});
+//#endregion
+export { NavMenu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/page-bar/AddButton.js

@@ -0,0 +1,5 @@
+import AddButton_vue_vue_type_script_setup_true_lang_default from "./AddButton.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/page-bar/AddButton.vue
+var AddButton_default = AddButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { AddButton_default as default };

package/dist/es/layouts/page-bar/AddButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { generatePageNameByApp } from "../../utils/editor.js";
+import { useServices } from "../../hooks/use-services.js";
+import Icon_default from "../../components/Icon.js";
+import ToolButton_default from "../../components/ToolButton.js";
+import { TMagicPopover } from "@tmagic/design";
+import { NodeType } from "@tmagic/core";
+import { computed, createElementBlock, createVNode, defineComponent, openBlock, toRaw, unref, withCtx } from "vue";
+import { Plus } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/page-bar/AddButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	id: "m-editor-page-bar-add-icon",
+	class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
+};
+var _hoisted_2 = {
+	key: 1,
+	style: { "width": "21px" }
+};
+var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorPageBarAddButton",
+	__name: "AddButton",
+	setup(__props) {
+		const { editorService, uiService } = useServices();
+		const showAddPageButton = computed(() => uiService.get("showAddPageButton"));
+		const addPage = (type) => {
+			const root = toRaw(editorService.get("root"));
+			if (!root) throw new Error("root 不能为空");
+			const pageConfig = {
+				type,
+				name: generatePageNameByApp(root, type),
+				items: []
+			};
+			editorService.add(pageConfig);
+		};
+		return (_ctx, _cache) => {
+			return showAddPageButton.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+				reference: withCtx(() => [createVNode(Icon_default, { icon: unref(Plus) }, null, 8, ["icon"])]),
+				default: withCtx(() => [createVNode(ToolButton_default, { data: {
+					type: "button",
+					text: "页面",
+					handler: () => {
+						addPage(unref(NodeType).PAGE);
+					}
+				} }, null, 8, ["data"]), createVNode(ToolButton_default, { data: {
+					type: "button",
+					text: "页面片",
+					handler: () => {
+						addPage(unref(NodeType).PAGE_FRAGMENT);
+					}
+				} }, null, 8, ["data"])]),
+				_: 1
+			})])) : (openBlock(), createElementBlock("div", _hoisted_2));
+		};
+	}
+});
+//#endregion
+export { AddButton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/page-bar/PageBar.js

@@ -0,0 +1,5 @@
+import PageBar_vue_vue_type_script_setup_true_lang_default from "./PageBar.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/page-bar/PageBar.vue
+var PageBar_default = PageBar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PageBar_default as default };