@tmagic/editor 1.8.0-manmanyu.23 → 1.8.0-manmanyu.26

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

@@ -38,7 +38,7 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		watch(() => uiService.get("hideSlideBar"), (hideSlideBar) => {
 			uiService.set("columnWidth", {
 				...columnWidth.value,
-				left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310
+				left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345
 			});
 		});
 		const columnWidthChange = (columnW) => {

package/dist/es/services/ui.js

@@ -19,11 +19,11 @@ var state = shallowReactive({
 		height: 817
 	},
 	columnWidth: {
-		left: storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310,
+		left: Math.max(storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345, 345),
 		center: 0,
-		right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
+		right: Math.max(storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480, 300)
 	},
-	minLeftColumnWidth: 260,
+	minLeftColumnWidth: 345,
 	minCenterColumnWidth: 400,
 	minRightColumnWidth: 300,
 	showGuides: true,

package/dist/es/style.css

@@ -395,6 +395,7 @@ a.magic-admin-link i {
 .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
   position: relative;
   top: 10px;
+  background-color: transparent;
 }
 .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
   padding-bottom: 0 !important;
@@ -637,7 +638,7 @@ fieldset.m-fieldset .m-form-tip {
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 35px;
+  flex: 0 0 var(--editor-nav-height, 35px);
   border-bottom: 1px solid #d8dee8;
 }
 .m-editor-nav-menu > div {
@@ -1198,7 +1199,7 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
 }
 .m-editor-content {
-  height: calc(100% - 35px);
+  height: calc(100% - var(--editor-nav-height, 35px));
 }
 .m-editor-framework-center {
   position: relative;

package/dist/es/utils/const.js

@@ -4,9 +4,9 @@ var UI_SELECT_MODE_EVENT_NAME = "ui-select";
 var LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 var RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
 var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
-var DEFAULT_LEFT_COLUMN_WIDTH = 310;
+var DEFAULT_LEFT_COLUMN_WIDTH = 345;
 var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-var MIN_LEFT_COLUMN_WIDTH = 260;
+var MIN_LEFT_COLUMN_WIDTH = 345;
 var MIN_CENTER_COLUMN_WIDTH = 400;
 var MIN_RIGHT_COLUMN_WIDTH = 300;
 var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";

package/dist/style.css

@@ -395,6 +395,7 @@ a.magic-admin-link i {
 .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
   position: relative;
   top: 10px;
+  background-color: transparent;
 }
 .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
   padding-bottom: 0 !important;
@@ -637,7 +638,7 @@ fieldset.m-fieldset .m-form-tip {
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 35px;
+  flex: 0 0 var(--editor-nav-height, 35px);
   border-bottom: 1px solid #d8dee8;
 }
 .m-editor-nav-menu > div {
@@ -1198,7 +1199,7 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
 }
 .m-editor-content {
-  height: calc(100% - 35px);
+  height: calc(100% - var(--editor-nav-height, 35px));
 }
 .m-editor-framework-center {
   position: relative;

package/dist/themes/magic-admin.css

@@ -375,6 +375,7 @@ a.magic-admin-link i {
 .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
   position: relative;
   top: 10px;
+  background-color: transparent;
 }
 .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
   padding-bottom: 0 !important;
@@ -670,7 +671,7 @@ fieldset.m-fieldset .m-form-tip {
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 35px;
+  flex: 0 0 var(--editor-nav-height, 35px);
   border-bottom: 1px solid #d8dee8;
 }
 .m-editor-nav-menu > div {
@@ -1231,7 +1232,7 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
 }
 .m-editor-content {
-  height: calc(100% - 35px);
+  height: calc(100% - var(--editor-nav-height, 35px));
 }
 .m-editor-framework-center {
   position: relative;
@@ -2760,6 +2761,9 @@ fieldset.m-fieldset .m-form-tip {
   opacity: 0;
 }
 
+.m-editor.m-editor--magic-admin {
+  --editor-nav-height: 40px;
+}
 .m-editor.m-editor--magic-admin .m-editor-sidebar .m-editor-sidebar-header {
   width: 61px;
   padding-top: 4px;
@@ -2890,6 +2894,16 @@ fieldset.m-fieldset .m-form-tip {
   display: none;
 }
 
+.m-editor.m-theme--magic-admin .m-editor-nav-menu .menu-right > .menu-item > button,
+.m-editor.m-theme--magic-admin .m-editor-nav-menu .menu-left > .menu-item > button {
+  color: #111;
+}
+.m-editor.m-theme--magic-admin .m-editor-nav-menu .menu-item {
+  margin-right: 8px;
+}
+.m-editor.m-theme--magic-admin .m-editor-nav-menu .menu-item .el-button--small {
+  font-size: 14px;
+}
 .m-editor.m-theme--magic-admin .m-editor-nav-menu .menu-item > button > i {
   font-size: 16px;
 }

package/dist/tmagic-editor.umd.cjs

@@ -8180,9 +8180,9 @@
 	var LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 	var RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
 	var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
-	var DEFAULT_LEFT_COLUMN_WIDTH = 310;
+	var DEFAULT_LEFT_COLUMN_WIDTH = 345;
 	var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-	var MIN_LEFT_COLUMN_WIDTH = 260;
+	var MIN_LEFT_COLUMN_WIDTH = 345;
 	var MIN_CENTER_COLUMN_WIDTH = 400;
 	var MIN_RIGHT_COLUMN_WIDTH = 300;
 	var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
@@ -8203,11 +8203,11 @@
 			height: 817
 		},
 		columnWidth: {
-			left: storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310,
+			left: Math.max(storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345, 345),
 			center: 0,
-			right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
+			right: Math.max(storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480, 300)
 		},
-		minLeftColumnWidth: 260,
+		minLeftColumnWidth: 345,
 		minCenterColumnWidth: 400,
 		minRightColumnWidth: 300,
 		showGuides: true,
@@ -10372,7 +10372,7 @@
 			(0, vue.watch)(() => uiService.get("hideSlideBar"), (hideSlideBar) => {
 				uiService.set("columnWidth", {
 					...columnWidth.value,
-					left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310
+					left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345
 				});
 			});
 			const columnWidthChange = (columnW) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-manmanyu.23",
+  "version": "1.8.0-manmanyu.26",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-manmanyu.23",
-    "@tmagic/form": "1.8.0-manmanyu.23",
-    "@tmagic/table": "1.8.0-manmanyu.23",
-    "@tmagic/utils": "1.8.0-manmanyu.23",
-    "@tmagic/stage": "1.8.0-manmanyu.23"
+    "@tmagic/design": "1.8.0-manmanyu.26",
+    "@tmagic/form": "1.8.0-manmanyu.26",
+    "@tmagic/stage": "1.8.0-manmanyu.26",
+    "@tmagic/utils": "1.8.0-manmanyu.26",
+    "@tmagic/table": "1.8.0-manmanyu.26"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.38",
-    "@tmagic/core": "1.8.0-manmanyu.23"
+    "@tmagic/core": "1.8.0-manmanyu.26"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/services/ui.ts

@@ -49,13 +49,22 @@ const state = shallowReactive<UiState>({
     width: 375,
     height: 817,
   },
+  // 左右两栏宽度初始化：
+  // - 优先取 storage 里用户上次拖到的值；storage 空时回落到 DEFAULT_*；
+  // - 再用 Math.max 兜底，防止历史 storage 里存的是老版本或用户拖过头留下的
+  //   "比当前 MIN_* 还小"的数值，避免打开就出现「面板宽度低于最小值」的错乱状态
+  //   （最小值本身就是 60~62 行同源的 MIN_LEFT/RIGHT_COLUMN_WIDTH）。
   columnWidth: {
-    left:
+    left: Math.max(
       storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
+      MIN_LEFT_COLUMN_WIDTH,
+    ),
     center: 0,
-    right:
+    right: Math.max(
       storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
-      DEFAULT_RIGHT_COLUMN_WIDTH,
+        DEFAULT_RIGHT_COLUMN_WIDTH,
+      MIN_RIGHT_COLUMN_WIDTH,
+    ),
   },
   minLeftColumnWidth: MIN_LEFT_COLUMN_WIDTH,
   minCenterColumnWidth: MIN_CENTER_COLUMN_WIDTH,

package/src/theme/framework.scss

@@ -6,7 +6,10 @@
   width: 100%;
 
   &-content {
-    height: calc(100% - #{$nav-height});
+    // 与 nav-menu.scss 的 `--editor-nav-height` 联动：默认 fallback 到 SCSS
+    // `$nav-height`（35px），主题覆盖时两处会同时切成同一个高度，保证 nav 和
+    // 主内容区总高度 = 100%。
+    height: calc(100% - var(--editor-nav-height, #{$nav-height}));
   }
 
   &-framework-center {

package/src/theme/nav-menu.scss

@@ -13,7 +13,11 @@
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 $nav-height;
+  // 用 CSS 变量做主题化开关：默认没设 `--editor-nav-height` 时回落到
+  // SCSS 变量 `$nav-height`（common/var.scss，35px）；主题（如 magic-admin）
+  // 只需在祖先节点声明 `--editor-nav-height: 40px` 即可运行时覆盖，避免
+  // 走 `@use with` 那条对加载顺序极敏感的 SCSS 模块配置路径。
+  flex: 0 0 var(--editor-nav-height, #{$nav-height});
   border-bottom: 1px solid #d8dee8;
 
   > div {

package/src/theme/themes/magic-admin/index.scss

@@ -17,6 +17,12 @@
 // 仅作用于编辑器内部 DOM 的具体样式仍保留「双类」，避免误中 portal 上只挂 `m-theme--*`
 // 的节点。
 .m-editor.m-editor--magic-admin {
+  // 主题级 CSS 变量入口：想覆盖 nav 高度等 token 时，改这里一行即可；
+  // 走 CSS 级联，运行时切主题（换 `.m-editor--magic-admin` class）即可即时生效，
+  // 不受 SCSS `@use` 加载顺序限制。fallback 值定义在 common/var.scss，未启用主题
+  // 时自动回落 35px。
+  --editor-nav-height: 40px;
+
   .m-editor-sidebar {
     .m-editor-sidebar-header {
       // padding: 8px 0;
@@ -185,7 +191,19 @@
 
 .m-editor.m-theme--magic-admin {
   .m-editor-nav-menu {
+    .menu-right,
+    .menu-left {
+      > .menu-item {
+        > button {
+          color: #111;
+        }
+      }
+    }
     .menu-item {
+      margin-right: 8px;
+      .el-button--small {
+        font-size: 14px;
+      }
       > button {
         > i {
           font-size: 16px;

package/src/utils/const.ts

@@ -5,11 +5,11 @@ export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 
-export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+export const DEFAULT_LEFT_COLUMN_WIDTH = 345;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为260
-export const MIN_LEFT_COLUMN_WIDTH = 260;
+// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为 345
+export const MIN_LEFT_COLUMN_WIDTH = 345;
 export const MIN_CENTER_COLUMN_WIDTH = 400;
 export const MIN_RIGHT_COLUMN_WIDTH = 300;
 

package/types/index.d.ts

@@ -3288,9 +3288,9 @@ declare const UI_SELECT_MODE_EVENT_NAME = "ui-select";
 declare const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 declare const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
 declare const PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
-declare const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+declare const DEFAULT_LEFT_COLUMN_WIDTH = 345;
 declare const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-declare const MIN_LEFT_COLUMN_WIDTH = 260;
+declare const MIN_LEFT_COLUMN_WIDTH = 345;
 declare const MIN_CENTER_COLUMN_WIDTH = 400;
 declare const MIN_RIGHT_COLUMN_WIDTH = 300;
 declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";