@tmagic/editor 1.8.0-manmanyu.21 → 1.8.0-manmanyu.22

package/dist/es/components/CodeBlockEditor.vue_vue_type_script_setup_true_lang.js

@@ -120,6 +120,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			changedValue.value = void 0;
 		};
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		watch(boxVisible, (visible) => {
 			nextTick(() => {
 				if (!visible) emit("close");
@@ -145,7 +146,9 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
 					height: unref(codeBlockEditorHeight),
 					"onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+					"body-style": { padding: "0 16px" },
 					title: __props.content.name ? `${__props.disabled ? "查看" : "编辑"}${__props.content.name}` : "新增代码",
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition),
 					"before-close": beforeClose
 				}, {
@@ -187,6 +190,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				]),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(TMagicDialog), {

package/dist/es/components/FloatingBox.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,6 @@
-import { useServices } from "../hooks/use-services.js";
 import Icon_default from "./Icon.js";
 import { TMagicButton, useThemeClass, useZIndex } from "@tmagic/design";
-import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import VanillaMoveable from "moveable";
 //#region packages/editor/src/components/FloatingBox.vue?vue&type=script&setup=true&lang.ts
@@ -17,6 +16,9 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			top: 0
 		}) },
 		title: { default: "" },
+		bodyStyle: {},
+		initialStyle: { default: () => ({}) },
+		frameworkWidth: { default: 0 },
 		beforeClose: {}
 	}, {
 		"width": { default: 0 },
@@ -54,19 +56,51 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (targetEl.value) return targetEl.value.clientHeight - titleHeight.value;
 			return "auto";
 		});
-		const { uiService } = useServices();
-		const frameworkWidth = computed(() => uiService.get("frameworkRect").width || 0);
 		const style = computed(() => {
 			let { left } = props.position;
-			if (width.value) left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+			const frameworkWidth = props.frameworkWidth || globalThis.window?.innerWidth || 0;
+			if (width.value && frameworkWidth) left = left + width.value > frameworkWidth ? frameworkWidth - width.value : left;
 			return {
 				left: `${left}px`,
 				top: `${props.position.top}px`,
 				width: width.value ? `${width.value}px` : "auto",
-				height: height.value ? `${height.value}px` : "auto"
+				height: height.value ? `${height.value}px` : "auto",
+				...props.initialStyle
 			};
 		});
 		let moveable = null;
+		let dragMask = null;
+		let dragMaskVisible = false;
+		const bindDragMaskSafety = () => {
+			globalThis.window?.addEventListener("pointerup", hideDragMask, true);
+			globalThis.window?.addEventListener("blur", hideDragMask);
+			globalThis.document?.addEventListener("visibilitychange", hideDragMask);
+		};
+		const unbindDragMaskSafety = () => {
+			globalThis.window?.removeEventListener("pointerup", hideDragMask, true);
+			globalThis.window?.removeEventListener("blur", hideDragMask);
+			globalThis.document?.removeEventListener("visibilitychange", hideDragMask);
+		};
+		const showDragMask = () => {
+			if (dragMaskVisible) return;
+			if (!dragMask) {
+				dragMask = globalThis.document.createElement("div");
+				dragMask.className = "m-editor-float-box-drag-mask";
+			}
+			globalThis.document.body.appendChild(dragMask);
+			dragMaskVisible = true;
+			bindDragMaskSafety();
+			const setMaskZIndex = () => {
+				if (dragMask) dragMask.style.zIndex = `${curZIndex.value + 1}`;
+			};
+			setMaskZIndex();
+			nextTick(setMaskZIndex);
+		};
+		const hideDragMask = () => {
+			unbindDragMaskSafety();
+			dragMask?.parentNode?.removeChild(dragMask);
+			dragMaskVisible = false;
+		};
 		const initMoveable = () => {
 			moveable = new VanillaMoveable(globalThis.document.body, {
 				className: "m-editor-floating-box-moveable",
@@ -89,6 +123,10 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					position: "css"
 				}
 			});
+			moveable.on("drag", showDragMask);
+			moveable.on("resize", showDragMask);
+			moveable.on("dragEnd", hideDragMask);
+			moveable.on("resizeEnd", hideDragMask);
 			moveable.on("drag", (e) => {
 				e.target.style.transform = e.transform;
 			});
@@ -101,6 +139,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			});
 		};
 		const destroyMoveable = () => {
+			hideDragMask();
 			moveable?.destroy();
 			moveable = null;
 		};
@@ -140,15 +179,16 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			return visible.value ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: "body"
-			}, [createElementVNode("div", {
+			}, [createElementVNode("div", mergeProps({
 				ref: "target",
-				class: normalizeClass(["m-editor-float-box", unref(themeClass)]),
-				style: normalizeStyle({
+				class: ["m-editor-float-box", unref(themeClass)]
+			}, _ctx.$attrs, {
+				style: {
 					...style.value,
 					zIndex: curZIndex.value
-				}),
+				},
 				onMousedown: nextZIndex
-			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
+			}), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
 				link: "",
 				size: "small",
 				onClick: closeHandler
@@ -157,8 +197,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				_: 1
 			})])], 512), createElementVNode("div", {
 				class: "m-editor-float-box-body",
-				style: normalizeStyle({ height: `${bodyHeight.value}px` })
-			}, [renderSlot(_ctx.$slots, "body")], 4)], 38)])) : createCommentVNode("v-if", true);
+				style: normalizeStyle({
+					height: `${bodyHeight.value}px`,
+					...__props.bodyStyle
+				})
+			}, [renderSlot(_ctx.$slots, "body")], 4)], 16)])) : createCommentVNode("v-if", true);
 		};
 	}
 });

package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js

@@ -316,6 +316,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const addFromJsonDialogVisible = useModel(__props, "visible1");
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		/**
 		* 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。
 		* 当前层消费 path[0]，并把剩余路径下发给嵌套字段，实现逐层打开。
@@ -356,6 +357,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					_: 1
 				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				createVNode(FloatingBox_default, {
+					"body-style": { padding: "0 16px" },
 					visible: addDialogVisible.value,
 					"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
 					width: width.value,
@@ -363,6 +365,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					height: unref(editorHeight),
 					"onUpdate:height": _cache[4] || (_cache[4] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 					title: fieldTitle.value,
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition)
 				}, {
 					body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -385,9 +388,11 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				]),
 				createVNode(FloatingBox_default, {
+					"body-style": { padding: "0 16px" },
 					visible: addFromJsonDialogVisible.value,
 					"onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
 					width: width.value,
@@ -395,6 +400,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					height: unref(editorHeight),
 					"onUpdate:height": _cache[7] || (_cache[7] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 					title: "快速添加数据定义",
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition)
 				}, {
 					body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -408,6 +414,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"visible",
 					"width",
 					"height",
+					"framework-width",
 					"position"
 				])
 			]);

package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js

@@ -216,6 +216,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const addDialogVisible = useModel(__props, "visible");
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
@@ -233,6 +234,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					_: 1
 				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				createVNode(FloatingBox_default, {
+					"body-style": { padding: "0 16px" },
 					visible: addDialogVisible.value,
 					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
 					width: width.value,
@@ -240,6 +242,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					height: unref(editorHeight),
 					"onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 					title: drawerTitle.value,
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition)
 				}, {
 					body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -260,6 +263,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				])
 			]);

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

@@ -29,6 +29,9 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const pageLength = computed(() => editorService.get("pageLength") || 0);
 		const showSrc = computed(() => uiService.get("showSrc"));
 		const columnWidth = computed(() => uiService.get("columnWidth"));
+		const minLeftColumnWidth = computed(() => uiService.get("minLeftColumnWidth"));
+		const minCenterColumnWidth = computed(() => uiService.get("minCenterColumnWidth"));
+		const minRightColumnWidth = computed(() => uiService.get("minRightColumnWidth"));
 		watch(pageLength, () => {
 			splitViewRef.value?.updateWidth();
 		});
@@ -95,9 +98,9 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"right-class": "m-editor-framework-right",
 					left: __props.hideSidebar ? void 0 : columnWidth.value.left,
 					right: columnWidth.value.right,
-					"min-left": __props.hideSidebar ? 0 : unref(252),
-					"min-right": unref(300),
-					"min-center": unref(400),
+					"min-left": __props.hideSidebar ? 0 : minLeftColumnWidth.value,
+					"min-right": minRightColumnWidth.value,
+					"min-center": minCenterColumnWidth.value,
 					width: frameworkRect.value.width,
 					onChange: columnWidthChange
 				}, createSlots({

package/dist/es/layouts/props-panel/use-style-panel.js

@@ -23,8 +23,9 @@ var useStylePanel = ({ uiService, storageService }, propsPanelWidth) => {
 			columnWidth.center += propsPanelWidth.value;
 		}
 		if (columnWidth.center < 0) {
-			columnWidth.right = columnWidth.right + columnWidth.center - 400;
-			columnWidth.center = 400;
+			const minCenterColumnWidth = uiService.get("minCenterColumnWidth");
+			columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+			columnWidth.center = minCenterColumnWidth;
 			propsPanelWidth.value = columnWidth.right / 2;
 		}
 		storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });

package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -61,6 +61,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const taskLength = computed(() => depService.get("taskLength"));
 		const tipsBarVisible = ref(true);
 		const columnLeftWidth = computed(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		const { height: editorContentHeight } = useEditorContentHeight();
 		const columnLeftHeight = ref(0);
 		const unWatchEditorContentHeight = watch(editorContentHeight, (height) => {
@@ -301,6 +302,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"onUpdate:height": _cache[2] || (_cache[2] = ($event) => columnLeftHeight.value = $event),
 					width: columnLeftWidth.value,
 					title: config.text,
+					"framework-width": frameworkWidth.value,
 					position: {
 						left: unref(floatBoxStates)[config.$key].left,
 						top: unref(floatBoxStates)[config.$key].top
@@ -317,6 +319,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"height",
 					"width",
 					"title",
+					"framework-width",
 					"position"
 				])) : createCommentVNode("v-if", true)], 64);
 			}), 256))]))], 64);

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

@@ -39,6 +39,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		const dataSourceConfig = ref([]);
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		/** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 		provide("editingDataSourceMethodName", computed(() => props.editMethodName));
 		/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
@@ -77,6 +78,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FloatingBox_default, {
+				"body-style": { padding: "0 16px" },
 				visible: boxVisible.value,
 				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
 				width: width.value,
@@ -84,6 +86,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 				height: unref(editorHeight),
 				"onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 				title: __props.title,
+				"framework-width": frameworkWidth.value,
 				position: unref(boxPosition)
 			}, {
 				body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -107,6 +110,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 				"width",
 				"height",
 				"title",
+				"framework-width",
 				"position"
 			]);
 		};

package/dist/es/layouts/workspace/viewer/NodeListMenu.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,8 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	__name: "NodeListMenu",
 	setup(__props) {
 		const services = useServices();
-		const { editorService } = services;
+		const { editorService, uiService } = services;
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		const visible = ref(false);
 		const buttonVisible = ref(false);
 		const buttonEl = useTemplateRef("button");
@@ -71,6 +72,7 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				visible: visible.value,
 				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
 				title: "当前位置下的组件",
+				"framework-width": frameworkWidth.value,
 				position: menuPosition.value
 			}, {
 				body: withCtx(() => [createVNode(Tree_default, {
@@ -80,7 +82,11 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					onNodeClick: clickHandler
 				}, null, 8, ["data", "node-status-map"])]),
 				_: 1
-			}, 8, ["visible", "position"])) : createCommentVNode("v-if", true)], 64);
+			}, 8, [
+				"visible",
+				"framework-width",
+				"position"
+			])) : createCommentVNode("v-if", true)], 64);
 		};
 	}
 });

package/dist/es/services/ui.js

@@ -23,6 +23,9 @@ var state = shallowReactive({
 		center: 0,
 		right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
 	},
+	minLeftColumnWidth: 260,
+	minCenterColumnWidth: 400,
+	minRightColumnWidth: 300,
 	showGuides: true,
 	hasGuides: false,
 	showRule: true,

package/dist/es/style.css

@@ -2260,13 +2260,21 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-float-box .m-editor-float-box-body {
   overflow: auto;
   flex: 1;
-  padding: 0 16px;
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
 
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
 .m-fields-page-fragment-select {
   width: 100%;
 }

package/dist/es/utils/const.js

@@ -6,7 +6,7 @@ var RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
 var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
 var DEFAULT_LEFT_COLUMN_WIDTH = 310;
 var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-var MIN_LEFT_COLUMN_WIDTH = 252;
+var MIN_LEFT_COLUMN_WIDTH = 260;
 var MIN_CENTER_COLUMN_WIDTH = 400;
 var MIN_RIGHT_COLUMN_WIDTH = 300;
 var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";

package/dist/style.css

@@ -2260,13 +2260,21 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-float-box .m-editor-float-box-body {
   overflow: auto;
   flex: 1;
-  padding: 0 16px;
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
 
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
 .m-fields-page-fragment-select {
   width: 100%;
 }

package/dist/themes/magic-admin.css

@@ -2293,13 +2293,21 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-float-box .m-editor-float-box-body {
   overflow: auto;
   flex: 1;
-  padding: 0 16px;
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
 
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
 .m-fields-page-fragment-select {
   width: 100%;
 }
@@ -2753,9 +2761,12 @@ fieldset.m-fieldset .m-form-tip {
 }
 
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header {
-  padding: 8px 0;
-  width: 52px;
+  width: 61px;
+  padding-top: 4px;
+  flex-shrink: 0;
+  border-right: 1px solid rgba(0, 84, 225, 0.1);
   display: flex;
+  background-color: #fff;
   box-sizing: border-box;
   flex-direction: column;
   align-items: center;
@@ -2764,24 +2775,26 @@ fieldset.m-fieldset .m-form-tip {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 6px 0;
-  width: 40px;
+  border-radius: 4px;
+  padding: 4px 2px;
+  width: 52px;
   margin-bottom: 4px;
+  box-sizing: border-box;
   background-color: transparent;
+  color: #84909d;
 }
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item > i {
-  color: #ffffff;
+  color: #84909d;
 }
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active {
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--el-button-hover-bg-color, rgb(230, 238, 253));
   color: var(--el-color-primary);
 }
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active:hover {
-  background-color: #fff;
+  background-color: var(--el-button-hover-bg-color, rgb(230, 238, 253));
 }
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item.is-active > i {
   color: var(--el-color-primary);
@@ -2790,11 +2803,17 @@ fieldset.m-fieldset .m-form-tip {
   color: var(--el-color-primary);
 }
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item .magic-editor-tab-panel-title {
-  font-size: 10px;
+  font-size: 12px;
   line-height: 14px;
-  font-weight: 600;
+  font-weight: 400;
+  margin: 0 4px;
+  width: 52px;
+  text-align: center;
+}
+.m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-content {
+  width: calc(100% - 61px);
 }
-.m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header .m-editor-sidebar-header-item .m-editor-props-panel .el-input__wrapper {
+.m-editor.m-editor--magic-admin .m-editor-props-panel .el-input__wrapper {
   border-radius: 4px;
 }
 .m-editor.m-editor--magic-admin .border-box-container .border-icon-container .border-icon {