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

package/dist/es/style.css

@@ -638,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 {
@@ -1199,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/style.css

@@ -638,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 {
@@ -1199,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

@@ -671,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 {
@@ -1232,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;
@@ -2761,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;
@@ -2891,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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-manmanyu.25",
+  "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.25",
-    "@tmagic/stage": "1.8.0-manmanyu.25",
-    "@tmagic/table": "1.8.0-manmanyu.25",
-    "@tmagic/form": "1.8.0-manmanyu.25",
-    "@tmagic/utils": "1.8.0-manmanyu.25"
+    "@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.25"
+    "@tmagic/core": "1.8.0-manmanyu.26"
   },
   "peerDependenciesMeta": {
     "typescript": {

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;