@hsu-react/ui 2.5.6 → 2.5.8

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/components/Operate/index.js

@@ -18,6 +18,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_MENU = [];
+
 /**
  * Render an icon
  * @param icon - Icon configuration
@@ -44,7 +47,7 @@ const Operate = props => {
   const {
     title,
     className,
-    menu = [],
+    menu = EMPTY_MENU,
     icon,
     delete: isDelete,
     popconfirm,

package/lib/components/Pagination/index.js

@@ -14,10 +14,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_PAGE_SIZE_OPTIONS = [];
 const Pagination = props => {
   const {
     simple,
-    pageSizeOptions = [],
+    pageSizeOptions = EMPTY_PAGE_SIZE_OPTIONS,
     showSizeChanger,
     onShowSizeChange,
     onChange,

package/lib/components/Search/_hooks/useSearchCommon.js

@@ -15,6 +15,9 @@ var _useSearchExpand = require("./useSearchExpand");
 var _utils = require("../_utils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_SEARCH_ITEMS = [];
+
 /**
  * Extracts the common logic shared by all Search components
  */
@@ -22,7 +25,7 @@ const useSearchCommon = params => {
   const {
     form,
     searchItems,
-    moreSearchItems = [],
+    moreSearchItems = EMPTY_SEARCH_ITEMS,
     searchData,
     hasPermi,
     beforeButtonGroup,

package/lib/components/Select/AutoCompleteSelect/index.js

@@ -19,6 +19,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_OPTIONS = [];
 const AutoCompleteSelect = props => {
   const {
     prefix,
@@ -32,7 +34,7 @@ const AutoCompleteSelect = props => {
     popupClassName,
     filterOption: customFilterOption,
     onChange,
-    options = [],
+    options = EMPTY_OPTIONS,
     placement = "bottomLeft",
     onDropdownVisibleChange,
     popupMatchSelectWidth,

package/lib/components/Spreadsheet/index.js

@@ -11,20 +11,26 @@ var _hsuUtils = require("hsu-utils");
 require("x-data-spreadsheet/dist/xspreadsheet.css");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _xlsxspread = require("./xlsxspread");
+var _useShallowStable = _interopRequireDefault(require("../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 effect 每渲染必重跑；提到模块级常量
+const EMPTY_X_OPTIONS = {};
 const Spreadsheet = props => {
   const {
     data,
-    xOptions = {},
+    xOptions = EMPTY_X_OPTIONS,
     className
   } = props;
   const {
     showBottomTool = true,
-    ...xOptionsRest
+    ...restXOptions
   } = xOptions;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 memo 恒不命中。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const xOptionsRest = (0, _useShallowStable.default)(restXOptions);
   const ref = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
   const id = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);

package/lib/components/Table/_hooks/useTableColumns.js

@@ -15,6 +15,9 @@ var _tableUtils = require("../_utils/tableUtils");
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_COLUMNS = [];
+
 // measureAlign columns: measured at 14px, consistent with the table body and autoWidth title measurement
 const MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText only returns the advance width, about 1px narrower than the actual DOM rendering; add a 2px buffer to avoid squeezing the widest row
@@ -56,7 +59,7 @@ const getMeasureAlignWidth = (column, dataSource) => {
 };
 const useTableColumns = params => {
   const {
-    columns = [],
+    columns = EMPTY_COLUMNS,
     scroll,
     autoWidth,
     dataSource,

package/lib/components/Tree/_hooks/useTreeState.js

@@ -34,11 +34,14 @@ const useExpandedKeys = (expandedKeysProps, defaultExpandedKeys) => {
     }
   }, [defaultExpandedKeys, expandedKeysProps]);
 
-  // Wrap setExpandedKeys to mark that the user has manually interacted
-  const handleSetExpandedKeys = keys => {
+  // Wrap setExpandedKeys to mark that the user has manually interacted.
+  // 必须 useCallback：这个函数被 Tree 的 handleExpand 当依赖用，
+  // 每渲染新建一个就让那个 useCallback 恒不命中——展开回调每渲染换引用透给 antd Tree。
+  // 函数体只碰 ref 和状态 setter，两者都恒定，所以依赖数组是空的。
+  const handleSetExpandedKeys = (0, _react.useCallback)(keys => {
     hasUserInteractedRef.current = true;
     setExpandedKeys(keys);
-  };
+  }, []);
   return [expandedKeys, handleSetExpandedKeys];
 };
 

package/lib/components/Tree/index.js

@@ -17,11 +17,14 @@ var _useClearNodeTitle = require("./_hooks/useClearNodeTitle");
 var _utils = require("./_utils");
 var _TextEllipsis = _interopRequireDefault(require("../TextEllipsis"));
 var _usePermissions = _interopRequireDefault(require("../../hooks/usePermissions"));
+var _useShallowStable = _interopRequireDefault(require("../../hooks/useShallowStable"));
 var _cssSupports = require("../../utils/cssSupports");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_TREE_DATA = [];
 const Tree = props => {
   const {
     title,
@@ -31,7 +34,7 @@ const Tree = props => {
     titleClassName,
     className,
     search,
-    treeData = [],
+    treeData = EMPTY_TREE_DATA,
     onChange,
     onCheck,
     onSelect,
@@ -52,8 +55,11 @@ const Tree = props => {
     onSelectPath,
     allowDeselect = true,
     titleSearchBarClassName,
-    ...treeConfig
+    ...restTreeConfig
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 memo 恒不命中。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const treeConfig = (0, _useShallowStable.default)(restTreeConfig);
   const {
     permitted
   } = (0, _usePermissions.default)(hasPermi);

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.6",
+  "version": "2.5.8",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/__tests__/depsScan.ts

@@ -64,52 +64,99 @@ export function walkSources(dir: string, out: string[] = []) {
 }
 
 /**
- * 找出每个匹配 `hookRe` 的 hook 调用的依赖数组，返回 `[行号, 依赖名]`。
+ * 找出每个匹配 `hookRe` 的 hook 调用的依赖数组，返回 `[行号, 依赖名, 依赖原文]`。
  * `hookRe` 必须带 `g`，且以 `\(` 结尾（例如 `/use(?:Layout)?Effect\(/g`）。
+ *
+ * 依赖数组按「调用参数里最后一个顶层 `[...]`，且它后面到 `)` 之间只剩逗号/空白」
+ * 来定位。早先用 `/,\s*\[([\s\S]*)\]\s*$/` 正则从**最左**的 `, [` 起贪婪匹配，
+ * 回调体里只要出现一次 `, [`（JSX 的 `classNames(x, { [styles.a]: b })` 就会），
+ * 真正的依赖数组就被并进同一段，切出来的是带换行的 JSX 碎片而不是标识符 ——
+ * 结果是真命中被静默漏掉。这里改成括号配平扫描，不再漏。
  */
 export function hookDeps(
   src: string,
   hookRe: RegExp,
-): Array<[number, string]> {
-  const found: Array<[number, string]> = [];
+): Array<[number, string, string]> {
+  const found: Array<[number, string, string]> = [];
   const re = new RegExp(hookRe.source, "g");
   let m: RegExpExecArray | null;
 
   while ((m = re.exec(src))) {
-    let i = m.index + m[0].length;
+    const start = m.index + m[0].length;
+    let i = start;
     let depth = 1;
     let quote: string | null = null;
     let prev = "";
+    /** 调用参数里所有顶层 `[...]` 的起止下标 */
+    const topArrays: Array<[number, number]> = [];
+    let openAt = -1;
 
     while (i < src.length && depth > 0) {
       const c = src[i];
       if (quote) {
         if (c === quote && prev !== "\\") quote = null;
       } else if (c === '"' || c === "'" || c === "`") quote = c;
-      else if (c === "(" || c === "[" || c === "{") depth++;
-      else if (c === ")" || c === "]" || c === "}") depth--;
+      else if (c === "(" || c === "[" || c === "{") {
+        if (depth === 1 && c === "[") openAt = i;
+        depth++;
+      } else if (c === ")" || c === "]" || c === "}") {
+        depth--;
+        if (depth === 1 && c === "]" && openAt >= 0) {
+          topArrays.push([openAt, i]);
+          openAt = -1;
+        }
+      }
       prev = c;
       i++;
     }
 
-    const body = src.slice(m.index, i).replace(/\)\s*$/, "");
-    const deps = body.match(/,\s*\[([\s\S]*)\]\s*$/);
+    const closeParen = i - 1;
+    const deps = topArrays[topArrays.length - 1];
+    // 依赖数组必须是最后一个实参：前面紧邻一个顶层逗号（把 `useMemo(() => [x])`
+    // 这种「返回数组、根本没依赖数组」的写法排除掉），后面到 `)` 只剩逗号与空白
     if (!deps) continue;
+    if (!/,\s*$/.test(src.slice(start, deps[0]))) continue;
+    if (!/^\s*,?\s*$/.test(src.slice(deps[1] + 1, closeParen))) continue;
 
     const line = src.slice(0, m.index).split("\n").length;
-    for (const raw of deps[1].split(",")) {
-      const name = raw
-        .replace(/\/\/.*$/gm, "")
-        .trim()
-        .split(/[.?[]/)[0]
-        .trim();
-      if (name) found.push([line, name]);
+    for (const raw of splitTopLevel(src.slice(deps[0] + 1, deps[1]))) {
+      const expr = raw.replace(/\/\/.*$/gm, "").trim();
+      if (!expr) continue;
+      const name = expr.split(/[.?[(!]/)[0].trim();
+      if (name) found.push([line, name, expr]);
     }
   }
 
   return found;
 }
 
+/** 按顶层逗号切分（括号/引号内部的逗号不算） */
+function splitTopLevel(text: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let quote: string | null = null;
+  let prev = "";
+  let cur = "";
+
+  for (const c of text) {
+    if (quote) {
+      if (c === quote && prev !== "\\") quote = null;
+    } else if (c === '"' || c === "'" || c === "`") quote = c;
+    else if (c === "(" || c === "[" || c === "{") depth++;
+    else if (c === ")" || c === "]" || c === "}") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(cur);
+      cur = "";
+      prev = c;
+      continue;
+    }
+    cur += c;
+    prev = c;
+  }
+  parts.push(cur);
+  return parts;
+}
+
 /**
  * 找出「每次渲染都会新建一个对象/数组」的解构绑定，返回 `绑定名 → 说明`。
  *