@hsu-react/ui 2.5.7 → 2.5.8

package/es/components/Modal/index.d.ts

@@ -6,6 +6,18 @@ export interface ModalProps extends AntdModalProps {
     edgeDetection?: boolean;
     full?: boolean;
     titleButtonGroup?: ButtonProps[];
+    /**
+     * 高度**下界**。给「内容要等接口回来才画得出」的弹窗用：不给下界的话，
+     * 打开那一刻只有标题栏那么高，数据回来再撑开 —— 视觉上跳一下。
+     *
+     * - `true`：用标准档（`modalMinHeight`，700px），后台详情 / 列表 / 记录类弹窗都用它
+     * - 数字：px；字符串：原样当 CSS 长度
+     * - 不传：维持内容自适应 —— **短表单不要传**，否则平白留出一大片空白
+     *
+     * 它只是下界：内容更高照常撑开、照常滚动；并且在样式里与 `90vh` 取小，
+     * 矮窗口下不会被顶出屏幕。
+     */
+    minHeight?: number | string | boolean;
 }
 interface ModalFC extends React.FC<ModalProps> {
     confirm: typeof AntdModal.confirm;

package/es/components/Modal/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["moveable", "className", "classNames", "open", "onCancel", "onOk", "afterClose", "edgeDetection", "full", "destroyOnClose", "destroyOnHidden", "footer", "title", "titleButtonGroup"];
+var _excluded = ["moveable", "className", "classNames", "styles", "minHeight", "open", "onCancel", "onOk", "afterClose", "edgeDetection", "full", "destroyOnClose", "destroyOnHidden", "footer", "title", "titleButtonGroup"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -14,14 +14,23 @@ import { useModalElements, useModalDrag } from "./_hooks";
 import Button from "../Button";
 import { mergeSemantic } from "../../utils/semantic";
 import { modalFuncs } from "../../feedback";
+import { modalMinHeight } from "../../styles/tokens";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/** `minHeight` prop → CSS 长度。`true` 走标准档，`false` / 不传等于不设下界 */
+var resolveMinHeight = function resolveMinHeight(minHeight) {
+  if (minHeight === undefined || minHeight === false) return undefined;
+  if (minHeight === true) return "".concat(modalMinHeight, "px");
+  return typeof minHeight === "number" ? "".concat(minHeight, "px") : minHeight;
+};
 var Modal = function Modal(props) {
   var _props$moveable = props.moveable,
     moveable = _props$moveable === void 0 ? true : _props$moveable,
     className = props.className,
     classNames = props.classNames,
+    outerStyles = props.styles,
+    minHeight = props.minHeight,
     open = props.open,
     onCancel = props.onCancel,
     onOk = props.onOk,
@@ -65,6 +74,7 @@ var Modal = function Modal(props) {
   var handleOk = function handleOk(e) {
     onOk === null || onOk === void 0 || onOk(e);
   };
+  var resolvedMinHeight = resolveMinHeight(minHeight);
   return /*#__PURE__*/_jsx(AntdModal, _objectSpread(_objectSpread({
     centered: true
   }, moadlConfig), {}, {
@@ -90,6 +100,17 @@ var Modal = function Modal(props) {
         body: "".concat(styles.body, " ").concat((_outer$body = outer.body) !== null && _outer$body !== void 0 ? _outer$body : ""),
         footer: "".concat(styles.footer, " ").concat((_outer$footer = outer.footer) !== null && _outer$footer !== void 0 ? _outer$footer : "", " ").concat(footer === false ? styles.noFooter : "")
       });
+    })
+    /* 下界通过 CSS 变量交给样式表，而不是直接写 `minHeight` 内联样式：
+       clamp（与 90vh 取小）必须在 CSS 里做——`min-height` 在 CSS 里赢过
+       `max-height`，内联写死的话矮窗口会被顶出屏幕 */,
+    styles: mergeSemantic(outerStyles, function (outer) {
+      var _outer$container2;
+      return _objectSpread(_objectSpread({}, outer), {}, {
+        container: _objectSpread(_objectSpread({}, (_outer$container2 = outer.container) !== null && _outer$container2 !== void 0 ? _outer$container2 : {}), resolvedMinHeight ? {
+          "--vita-modal-min-height": resolvedMinHeight
+        } : {})
+      });
     }),
     footer: footer,
     afterClose: function afterClose() {

package/es/components/Modal/index.module.scss

@@ -31,6 +31,13 @@
     width: 100%;
     height: 100%;
     max-height: 90vh;
+    // 高度下界，由 `<Modal minHeight>` 写入 `--vita-modal-min-height`（不传就是 0）。
+    // 内容异步加载的弹窗不给下界的话，打开那一刻只有标题栏那么高，数据回来再撑开。
+    //
+    // 必须在这里与 90vh 取小：CSS 里 `min-height` 的优先级高于 `max-height`，
+    // 直接写 `min-height: 700px` 会让上面那行 `max-height: 90vh` 在矮窗口上失效，
+    // 弹窗被顶出屏幕。
+    min-height: min(var(--vita-modal-min-height, 0px), 90vh);
     padding: 0px 0px 15px;
   }
 

package/es/layout/Menu/index.module.scss

@@ -28,6 +28,38 @@
     overflow-y: auto;
   }
 
+  /* ===== 滚动条占位不许吃掉菜单项的内缩 =====
+     上面那条规则把「谁滚」定在了菜单根上，但没有把几何契约收完：滚动条一旦
+     **实占宽度**（消费方常见做法：槽宽恒定、只切 thumb 颜色，这样悬浮时不抖），
+     它就从菜单根的内容盒里切走一条 —— 而菜单项的左右外边距量的正是这个内容盒。
+     于是展开子菜单、菜单一超高，右边多出一条空白，左边纹丝不动：
+
+       展开前 菜单项 8..220（左留白 8 / 右留白 10）
+       展开后 菜单项 8..206（左留白 8 / 右留白 24）← 展开的那一项看着「右边距变大了」
+
+     `scrollbar-gutter: stable both-edges` 把这条槽**两侧对称保留**，且不论当下滚不滚
+     都保留：左右留白从此相等，展开 / 收起也不再有宽度变化（连带把「展开那一瞬内容
+     重排」一并去掉）。槽宽由浏览器按该元素实际的滚动条算，**不是写死的 14px** ——
+     消费方把滚动条改窄改宽，留白跟着变。
+
+     配套把菜单项自己的左右外边距清零：留白改由这条槽提供，不再叠加。不清的话
+     留白变成 `8 + 槽宽`（实测 22/24），230px 的侧栏里「MCP 连接器」直接被截断。
+     纵向节奏与嵌套缩进不受影响 —— antd 的行内缩进走的是 padding，不是 margin。
+
+     `@supports` 兜底：不认这个属性的浏览器维持原样，不会两头落空。 */
+  @supports (scrollbar-gutter: stable both-edges) {
+    &:global(.ant-menu-inline) {
+      scrollbar-gutter: stable both-edges;
+
+      :global(.ant-menu-item),
+      :global(.ant-menu-submenu-title) {
+        width: 100%;
+
+        margin-inline: 0px;
+      }
+    }
+  }
+
   /* 子菜单在展开 / 收起动画期间被 rc-motion 逐帧改高度。antd 的
      `.ant-motion-collapse` 自带 overflow hidden，这里补的是**动画结束、类名摘掉
      之后**那一帧：此时 ul 的高度刚回到 auto，若父级恰好差几像素，浏览器会先画出

package/es/styles/tokens.d.ts

@@ -93,6 +93,16 @@ export declare const modalWidth: {
     md: number;
     lg: number;
 };
+/**
+ * 内容异步加载的弹窗的**高度下界**（`<Modal minHeight>` 的默认档）。
+ *
+ * 取 700 不是拍的：`Panel.List.Modal` 从一开始就把自己钉在 `height: 700px`，那是
+ * 「搜索行 ＋ 工具条 ＋ 表头 ＋ 十行左右 ＋ 分页」放得下的高度。详情 / 消息 / 记录这类
+ * 弹窗与它同处一套后台，用同一个下界，纵向节奏才是一套的。
+ *
+ * 它只是**下界**：内容更高照常撑开，并且在 CSS 里与 `90vh` 取小，矮窗口不会被顶出屏幕。
+ */
+export declare const modalMinHeight: number;
 /**
  * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
  */

package/es/styles/tokens.js

@@ -63,6 +63,17 @@ export var controlTokens = raw.control;
  */
 export var modalWidth = raw.modalWidth;
 
+/**
+ * 内容异步加载的弹窗的**高度下界**（`<Modal minHeight>` 的默认档）。
+ *
+ * 取 700 不是拍的：`Panel.List.Modal` 从一开始就把自己钉在 `height: 700px`，那是
+ * 「搜索行 ＋ 工具条 ＋ 表头 ＋ 十行左右 ＋ 分页」放得下的高度。详情 / 消息 / 记录这类
+ * 弹窗与它同处一套后台，用同一个下界，纵向节奏才是一套的。
+ *
+ * 它只是**下界**：内容更高照常撑开，并且在 CSS 里与 `90vh` 取小，矮窗口不会被顶出屏幕。
+ */
+export var modalMinHeight = raw.modalMinHeight;
+
 /**
  * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
  */

package/es/styles/tokens.json

@@ -72,6 +72,7 @@
     "md": 800,
     "lg": 1200
   },
+  "modalMinHeight": 700,
   "breakpoint": {
     "sm": 640,
     "md": 768,

package/lib/components/Modal/index.d.ts

@@ -6,6 +6,18 @@ export interface ModalProps extends AntdModalProps {
     edgeDetection?: boolean;
     full?: boolean;
     titleButtonGroup?: ButtonProps[];
+    /**
+     * 高度**下界**。给「内容要等接口回来才画得出」的弹窗用：不给下界的话，
+     * 打开那一刻只有标题栏那么高，数据回来再撑开 —— 视觉上跳一下。
+     *
+     * - `true`：用标准档（`modalMinHeight`，700px），后台详情 / 列表 / 记录类弹窗都用它
+     * - 数字：px；字符串：原样当 CSS 长度
+     * - 不传：维持内容自适应 —— **短表单不要传**，否则平白留出一大片空白
+     *
+     * 它只是下界：内容更高照常撑开、照常滚动；并且在样式里与 `90vh` 取小，
+     * 矮窗口下不会被顶出屏幕。
+     */
+    minHeight?: number | string | boolean;
 }
 interface ModalFC extends React.FC<ModalProps> {
     confirm: typeof AntdModal.confirm;

package/lib/components/Modal/index.js

@@ -11,13 +11,22 @@ var _hooks = require("./_hooks");
 var _Button = _interopRequireDefault(require("../Button"));
 var _semantic = require("../../utils/semantic");
 var _feedback = require("../../feedback");
+var _tokens = require("../../styles/tokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/** `minHeight` prop → CSS 长度。`true` 走标准档，`false` / 不传等于不设下界 */
+const resolveMinHeight = minHeight => {
+  if (minHeight === undefined || minHeight === false) return undefined;
+  if (minHeight === true) return `${_tokens.modalMinHeight}px`;
+  return typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+};
 const Modal = props => {
   const {
     moveable = true,
     className,
     classNames,
+    styles: outerStyles,
+    minHeight,
     open,
     onCancel,
     onOk,
@@ -62,6 +71,7 @@ const Modal = props => {
   const handleOk = e => {
     onOk?.(e);
   };
+  const resolvedMinHeight = resolveMinHeight(minHeight);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, {
     centered: true,
     ...moadlConfig,
@@ -85,6 +95,18 @@ const Modal = props => {
       container: `${_indexModule.default.content} ${outer.container ?? ""}`,
       body: `${_indexModule.default.body} ${outer.body ?? ""}`,
       footer: `${_indexModule.default.footer} ${outer.footer ?? ""} ${footer === false ? _indexModule.default.noFooter : ""}`
+    }))
+    /* 下界通过 CSS 变量交给样式表，而不是直接写 `minHeight` 内联样式：
+       clamp（与 90vh 取小）必须在 CSS 里做——`min-height` 在 CSS 里赢过
+       `max-height`，内联写死的话矮窗口会被顶出屏幕 */,
+    styles: (0, _semantic.mergeSemantic)(outerStyles, outer => ({
+      ...outer,
+      container: {
+        ...(outer.container ?? {}),
+        ...(resolvedMinHeight ? {
+          "--vita-modal-min-height": resolvedMinHeight
+        } : {})
+      }
     })),
     footer: footer,
     afterClose: () => {

package/lib/components/Modal/index.module.scss

@@ -31,6 +31,13 @@
     width: 100%;
     height: 100%;
     max-height: 90vh;
+    // 高度下界，由 `<Modal minHeight>` 写入 `--vita-modal-min-height`（不传就是 0）。
+    // 内容异步加载的弹窗不给下界的话，打开那一刻只有标题栏那么高，数据回来再撑开。
+    //
+    // 必须在这里与 90vh 取小：CSS 里 `min-height` 的优先级高于 `max-height`，
+    // 直接写 `min-height: 700px` 会让上面那行 `max-height: 90vh` 在矮窗口上失效，
+    // 弹窗被顶出屏幕。
+    min-height: min(var(--vita-modal-min-height, 0px), 90vh);
     padding: 0px 0px 15px;
   }
 

package/lib/layout/Menu/index.module.scss

@@ -28,6 +28,38 @@
     overflow-y: auto;
   }
 
+  /* ===== 滚动条占位不许吃掉菜单项的内缩 =====
+     上面那条规则把「谁滚」定在了菜单根上，但没有把几何契约收完：滚动条一旦
+     **实占宽度**（消费方常见做法：槽宽恒定、只切 thumb 颜色，这样悬浮时不抖），
+     它就从菜单根的内容盒里切走一条 —— 而菜单项的左右外边距量的正是这个内容盒。
+     于是展开子菜单、菜单一超高，右边多出一条空白，左边纹丝不动：
+
+       展开前 菜单项 8..220（左留白 8 / 右留白 10）
+       展开后 菜单项 8..206（左留白 8 / 右留白 24）← 展开的那一项看着「右边距变大了」
+
+     `scrollbar-gutter: stable both-edges` 把这条槽**两侧对称保留**，且不论当下滚不滚
+     都保留：左右留白从此相等，展开 / 收起也不再有宽度变化（连带把「展开那一瞬内容
+     重排」一并去掉）。槽宽由浏览器按该元素实际的滚动条算，**不是写死的 14px** ——
+     消费方把滚动条改窄改宽，留白跟着变。
+
+     配套把菜单项自己的左右外边距清零：留白改由这条槽提供，不再叠加。不清的话
+     留白变成 `8 + 槽宽`（实测 22/24），230px 的侧栏里「MCP 连接器」直接被截断。
+     纵向节奏与嵌套缩进不受影响 —— antd 的行内缩进走的是 padding，不是 margin。
+
+     `@supports` 兜底：不认这个属性的浏览器维持原样，不会两头落空。 */
+  @supports (scrollbar-gutter: stable both-edges) {
+    &:global(.ant-menu-inline) {
+      scrollbar-gutter: stable both-edges;
+
+      :global(.ant-menu-item),
+      :global(.ant-menu-submenu-title) {
+        width: 100%;
+
+        margin-inline: 0px;
+      }
+    }
+  }
+
   /* 子菜单在展开 / 收起动画期间被 rc-motion 逐帧改高度。antd 的
      `.ant-motion-collapse` 自带 overflow hidden，这里补的是**动画结束、类名摘掉
      之后**那一帧：此时 ul 的高度刚回到 auto，若父级恰好差几像素，浏览器会先画出

package/lib/styles/tokens.d.ts

@@ -93,6 +93,16 @@ export declare const modalWidth: {
     md: number;
     lg: number;
 };
+/**
+ * 内容异步加载的弹窗的**高度下界**（`<Modal minHeight>` 的默认档）。
+ *
+ * 取 700 不是拍的：`Panel.List.Modal` 从一开始就把自己钉在 `height: 700px`，那是
+ * 「搜索行 ＋ 工具条 ＋ 表头 ＋ 十行左右 ＋ 分页」放得下的高度。详情 / 消息 / 记录这类
+ * 弹窗与它同处一套后台，用同一个下界，纵向节奏才是一套的。
+ *
+ * 它只是**下界**：内容更高照常撑开，并且在 CSS 里与 `90vh` 取小，矮窗口不会被顶出屏幕。
+ */
+export declare const modalMinHeight: number;
 /**
  * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
  */

package/lib/styles/tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withAlpha = exports.toAntdTheme = exports.toAntdComponents = exports.radius = exports.modalWidth = exports.lightTokens = exports.fontTokens = exports.defaultPrimaryColor = exports.darkTokens = exports.controlTokens = exports.breakpoints = void 0;
+exports.withAlpha = exports.toAntdTheme = exports.toAntdComponents = exports.radius = exports.modalWidth = exports.modalMinHeight = exports.lightTokens = exports.fontTokens = exports.defaultPrimaryColor = exports.darkTokens = exports.controlTokens = exports.breakpoints = void 0;
 var _tokens = _interopRequireDefault(require("./tokens.json"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
@@ -56,6 +56,17 @@ const controlTokens = exports.controlTokens = _tokens.default.control;
  */
 const modalWidth = exports.modalWidth = _tokens.default.modalWidth;
 
+/**
+ * 内容异步加载的弹窗的**高度下界**（`<Modal minHeight>` 的默认档）。
+ *
+ * 取 700 不是拍的：`Panel.List.Modal` 从一开始就把自己钉在 `height: 700px`，那是
+ * 「搜索行 ＋ 工具条 ＋ 表头 ＋ 十行左右 ＋ 分页」放得下的高度。详情 / 消息 / 记录这类
+ * 弹窗与它同处一套后台，用同一个下界，纵向节奏才是一套的。
+ *
+ * 它只是**下界**：内容更高照常撑开，并且在 CSS 里与 `90vh` 取小，矮窗口不会被顶出屏幕。
+ */
+const modalMinHeight = exports.modalMinHeight = _tokens.default.modalMinHeight;
+
 /**
  * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
  */

package/lib/styles/tokens.json

@@ -72,6 +72,7 @@
     "md": 800,
     "lg": 1200
   },
+  "modalMinHeight": 700,
   "breakpoint": {
     "sm": 640,
     "md": 768,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Modal/index.md

@@ -74,6 +74,7 @@ Modal.config
 | edgeDetection | 拖拽时是否进行边缘检测，防止拖出视口 | `boolean` | `true` |
 | full | 是否以全屏方式展示 | `boolean` | `false` |
 | titleButtonGroup | 标题区右侧的按钮组配置 | `ButtonProps[]` | - |
+| minHeight | 高度**下界**，给内容要等接口回来才画得出的弹窗用（详情 / 消息 / 记录）。`true` 走标准档 700px；数字按 px；字符串原样当 CSS 长度。只是下界，内容更高照常撑开与滚动，并且与 `90vh` 取小，矮窗口不会被顶出屏幕。**短表单不要传**，否则平白留一片空白 | `number \| string \| boolean` | - |
 
 > 其余属性（`open`、`onOk`、`onCancel`、`footer`、`width` 等）与 antd `Modal` 一致。
 >

package/src/components/Modal/index.module.scss

@@ -31,6 +31,13 @@
     width: 100%;
     height: 100%;
     max-height: 90vh;
+    // 高度下界，由 `<Modal minHeight>` 写入 `--vita-modal-min-height`（不传就是 0）。
+    // 内容异步加载的弹窗不给下界的话，打开那一刻只有标题栏那么高，数据回来再撑开。
+    //
+    // 必须在这里与 90vh 取小：CSS 里 `min-height` 的优先级高于 `max-height`，
+    // 直接写 `min-height: 700px` 会让上面那行 `max-height: 90vh` 在矮窗口上失效，
+    // 弹窗被顶出屏幕。
+    min-height: min(var(--vita-modal-min-height, 0px), 90vh);
     padding: 0px 0px 15px;
   }
 

package/src/components/Modal/index.tsx

@@ -5,14 +5,36 @@ import { useModalElements, useModalDrag } from "./_hooks";
 import Button, { ButtonProps } from "../Button";
 import { mergeSemantic } from "../../utils/semantic";
 import { modalFuncs } from "../../feedback";
+import { modalMinHeight } from "../../styles/tokens";
 
 export interface ModalProps extends AntdModalProps {
   moveable?: boolean;
   edgeDetection?: boolean;
   full?: boolean;
   titleButtonGroup?: ButtonProps[];
+  /**
+   * 高度**下界**。给「内容要等接口回来才画得出」的弹窗用：不给下界的话，
+   * 打开那一刻只有标题栏那么高，数据回来再撑开 —— 视觉上跳一下。
+   *
+   * - `true`：用标准档（`modalMinHeight`，700px），后台详情 / 列表 / 记录类弹窗都用它
+   * - 数字：px；字符串：原样当 CSS 长度
+   * - 不传：维持内容自适应 —— **短表单不要传**，否则平白留出一大片空白
+   *
+   * 它只是下界：内容更高照常撑开、照常滚动；并且在样式里与 `90vh` 取小，
+   * 矮窗口下不会被顶出屏幕。
+   */
+  minHeight?: number | string | boolean;
 }
 
+/** `minHeight` prop → CSS 长度。`true` 走标准档，`false` / 不传等于不设下界 */
+const resolveMinHeight = (
+  minHeight: ModalProps["minHeight"]
+): string | undefined => {
+  if (minHeight === undefined || minHeight === false) return undefined;
+  if (minHeight === true) return `${modalMinHeight}px`;
+  return typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+};
+
 interface ModalFC extends React.FC<ModalProps> {
   confirm: typeof AntdModal.confirm;
   info: typeof AntdModal.info;
@@ -29,6 +51,8 @@ const Modal = ((props: ModalProps) => {
     moveable = true,
     className,
     classNames,
+    styles: outerStyles,
+    minHeight,
     open,
     onCancel,
     onOk,
@@ -79,6 +103,8 @@ const Modal = ((props: ModalProps) => {
     onOk?.(e);
   };
 
+  const resolvedMinHeight = resolveMinHeight(minHeight);
+
   return (
     <AntdModal
       centered
@@ -114,6 +140,20 @@ const Modal = ((props: ModalProps) => {
           footer === false ? styles.noFooter : ""
         }`,
       }))}
+      /* 下界通过 CSS 变量交给样式表，而不是直接写 `minHeight` 内联样式：
+         clamp（与 90vh 取小）必须在 CSS 里做——`min-height` 在 CSS 里赢过
+         `max-height`，内联写死的话矮窗口会被顶出屏幕 */
+      styles={mergeSemantic(outerStyles, (outer) => ({
+        ...outer,
+        container: {
+          ...(outer.container ?? {}),
+          ...(resolvedMinHeight
+            ? ({
+                "--vita-modal-min-height": resolvedMinHeight,
+              } as React.CSSProperties)
+            : {}),
+        },
+      }))}
       footer={footer}
       afterClose={() => {
         afterClose?.();

package/src/components/Modal/minHeight.test.tsx

@@ -0,0 +1,105 @@
+import fs from "node:fs";
+import path from "node:path";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+
+import Modal from ".";
+import { modalMinHeight } from "../../styles/tokens";
+
+/**
+ * 「内容异步加载的弹窗要有高度下界」这条能力的守卫。
+ *
+ * 缺陷长什么样：详情 / 消息 / 执行记录这类弹窗打开那一刻只有标题栏那么高，
+ * 接口回来再撑开 —— 视觉上跳一下。给下界就不跳。
+ *
+ * 两条底线一起盯：
+ * 1. **不传 `minHeight` 的弹窗不许变高** —— 否则两个输入框的短表单会平白留一片空白；
+ * 2. 下界必须在 CSS 里与 `90vh` 取小 —— `min-height` 在 CSS 里赢过 `max-height`，
+ *    直接落成内联 `min-height` 的话矮窗口会被顶出屏幕。所以组件只写 CSS 变量，
+ *    clamp 留在样式表里，这里连样式表那一行也一并守住。
+ */
+
+/** antd 的 container 语义槽就是承载 `.content`（flex 列 ＋ max-height: 90vh）的那一层 */
+const container = () =>
+  document.querySelector(".ant-modal-content, .ant-modal-container") as
+    | HTMLElement
+    | null;
+
+const minHeightVar = () =>
+  container()?.style.getPropertyValue("--vita-modal-min-height") ?? "";
+
+describe("Modal minHeight", () => {
+  it("不传时不写下界 —— 短表单不会平白变高", () => {
+    render(
+      <Modal open getContainer={false}>
+        x
+      </Modal>
+    );
+
+    expect(container()).toBeTruthy();
+    expect(minHeightVar()).toBe("");
+  });
+
+  it("minHeight 传 true 用标准档（与 Panel.List.Modal 同一个 700）", () => {
+    render(
+      <Modal open minHeight getContainer={false}>
+        x
+      </Modal>
+    );
+
+    expect(minHeightVar()).toBe(`${modalMinHeight}px`);
+  });
+
+  it("数字按 px、字符串原样、false 等于不设", () => {
+    const { unmount } = render(
+      <Modal open minHeight={520} getContainer={false}>
+        x
+      </Modal>
+    );
+    expect(minHeightVar()).toBe("520px");
+    unmount();
+
+    const second = render(
+      <Modal open minHeight="60vh" getContainer={false}>
+        x
+      </Modal>
+    );
+    expect(minHeightVar()).toBe("60vh");
+    second.unmount();
+
+    render(
+      <Modal open minHeight={false} getContainer={false}>
+        x
+      </Modal>
+    );
+    expect(minHeightVar()).toBe("");
+  });
+
+  it("调用方自己的 styles.container 不会被吃掉", () => {
+    render(
+      <Modal
+        open
+        minHeight
+        styles={{ container: { borderRadius: "4px" } }}
+        getContainer={false}
+      >
+        x
+      </Modal>
+    );
+
+    expect(container()?.style.borderRadius).toBe("4px");
+    expect(minHeightVar()).toBe(`${modalMinHeight}px`);
+  });
+
+  it("样式表里 clamp 到 90vh —— 矮窗口不会被顶出屏幕", () => {
+    const scss = fs.readFileSync(
+      path.resolve(__dirname, "index.module.scss"),
+      "utf8"
+    );
+
+    expect(scss).toMatch(
+      /min-height:\s*min\(var\(--vita-modal-min-height,\s*0px\),\s*90vh\)/
+    );
+  });
+});

package/src/layout/Menu/index.module.scss

@@ -28,6 +28,38 @@
     overflow-y: auto;
   }
 
+  /* ===== 滚动条占位不许吃掉菜单项的内缩 =====
+     上面那条规则把「谁滚」定在了菜单根上，但没有把几何契约收完：滚动条一旦
+     **实占宽度**（消费方常见做法：槽宽恒定、只切 thumb 颜色，这样悬浮时不抖），
+     它就从菜单根的内容盒里切走一条 —— 而菜单项的左右外边距量的正是这个内容盒。
+     于是展开子菜单、菜单一超高，右边多出一条空白，左边纹丝不动：
+
+       展开前 菜单项 8..220（左留白 8 / 右留白 10）
+       展开后 菜单项 8..206（左留白 8 / 右留白 24）← 展开的那一项看着「右边距变大了」
+
+     `scrollbar-gutter: stable both-edges` 把这条槽**两侧对称保留**，且不论当下滚不滚
+     都保留：左右留白从此相等，展开 / 收起也不再有宽度变化（连带把「展开那一瞬内容
+     重排」一并去掉）。槽宽由浏览器按该元素实际的滚动条算，**不是写死的 14px** ——
+     消费方把滚动条改窄改宽，留白跟着变。
+
+     配套把菜单项自己的左右外边距清零：留白改由这条槽提供，不再叠加。不清的话
+     留白变成 `8 + 槽宽`（实测 22/24），230px 的侧栏里「MCP 连接器」直接被截断。
+     纵向节奏与嵌套缩进不受影响 —— antd 的行内缩进走的是 padding，不是 margin。
+
+     `@supports` 兜底：不认这个属性的浏览器维持原样，不会两头落空。 */
+  @supports (scrollbar-gutter: stable both-edges) {
+    &:global(.ant-menu-inline) {
+      scrollbar-gutter: stable both-edges;
+
+      :global(.ant-menu-item),
+      :global(.ant-menu-submenu-title) {
+        width: 100%;
+
+        margin-inline: 0px;
+      }
+    }
+  }
+
   /* 子菜单在展开 / 收起动画期间被 rc-motion 逐帧改高度。antd 的
      `.ant-motion-collapse` 自带 overflow hidden，这里补的是**动画结束、类名摘掉
      之后**那一帧：此时 ul 的高度刚回到 auto，若父级恰好差几像素，浏览器会先画出

package/src/layout/Menu/scrollGutter.test.ts

@@ -0,0 +1,50 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * 防回归守卫：**滚动条占位不许吃掉侧栏菜单项的内缩**。
+ *
+ * 缺陷长什么样：菜单根自己是滚动容器，滚动条一实占宽度就从它的内容盒里切走一条，
+ * 而菜单项的左右外边距量的正是这个内容盒 —— 展开子菜单让菜单超高、滚动条出现，
+ * 右留白从 10px 跳到 24px、左留白仍是 8px，看着就是「展开的那一项右边距变大了」。
+ *
+ * 正解是 `scrollbar-gutter: stable both-edges`（两侧对称、恒定保留，槽宽由浏览器按
+ * 实际滚动条算），并把菜单项自己的左右外边距清零，让留白只由这条槽提供。
+ *
+ * 这条守卫只能扫源码：jsdom 不做布局，量不出滚动条占位。所以顺带把两种「硬拉回来」
+ * 的写法也钉死 —— 写死滚动条宽度、或者用负 margin 把内容顶回去，换台机器就错开。
+ */
+
+const SCSS = fs.readFileSync(
+  path.resolve(__dirname, "index.module.scss"),
+  "utf8"
+);
+
+describe("侧栏菜单的滚动条占位", () => {
+  it("inline 菜单两侧对称保留滚动条槽", () => {
+    // 要的是**声明**本身，不是 @supports 条件里那份同名文本
+    expect(SCSS).toMatch(/scrollbar-gutter:\s*stable both-edges\s*;/);
+    // 槽由 @supports 兜底，不认这个属性的浏览器维持原样
+    expect(SCSS).toMatch(/@supports \(scrollbar-gutter: stable both-edges\)/);
+  });
+
+  it("菜单项不再自己留左右外边距 —— 留白只由那条槽提供，不叠加", () => {
+    expect(SCSS).toMatch(/margin-inline:\s*0px/);
+  });
+
+  it("不许写死滚动条宽度，也不许用负 margin 硬拉回来", () => {
+    // 滚动条宽度按平台 / 用户设置变，写死会在别的机器上错开
+    expect(SCSS).not.toMatch(/(?:width|margin|padding)[^;{}]*:\s*-?1[45]px/);
+    expect(SCSS).not.toMatch(/margin[a-z-]*:\s*[^;{}]*-\d/);
+  });
+
+  it("横向一律不滚、子菜单自己不滚 —— 上一轮修「闪滚动条」的口径没被冲掉", () => {
+    expect(SCSS).toMatch(/overflow-x:\s*hidden/);
+    expect(SCSS).toMatch(/\.ant-menu-sub\.ant-menu-inline\)\s*\{\s*overflow:\s*hidden/);
+  });
+
+  it("不许在库里写 scrollbar-width / scrollbar-color —— Chrome 会整套忽略消费方的 ::-webkit-scrollbar", () => {
+    expect(SCSS).not.toMatch(/^\s*scrollbar-(?:width|color)\s*:/m);
+  });
+});

package/src/styles/tokens.json

@@ -72,6 +72,7 @@
     "md": 800,
     "lg": 1200
   },
+  "modalMinHeight": 700,
   "breakpoint": {
     "sm": 640,
     "md": 768,

package/src/styles/tokens.ts

@@ -94,6 +94,17 @@ export const controlTokens = raw.control;
  */
 export const modalWidth = raw.modalWidth;
 
+/**
+ * 内容异步加载的弹窗的**高度下界**（`<Modal minHeight>` 的默认档）。
+ *
+ * 取 700 不是拍的：`Panel.List.Modal` 从一开始就把自己钉在 `height: 700px`，那是
+ * 「搜索行 ＋ 工具条 ＋ 表头 ＋ 十行左右 ＋ 分页」放得下的高度。详情 / 消息 / 记录这类
+ * 弹窗与它同处一套后台，用同一个下界，纵向节奏才是一套的。
+ *
+ * 它只是**下界**：内容更高照常撑开，并且在 CSS 里与 `90vh` 取小，矮窗口不会被顶出屏幕。
+ */
+export const modalMinHeight = raw.modalMinHeight;
+
 /**
  * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
  */