@hsu-react/ui 0.0.17 → 0.0.19

package/lib/components/Chart/Bar/index.js

@@ -204,9 +204,20 @@ const ChartBar = props => {
     // Set the option: notMerge resets the dataZoom window to its initial position,
     // so when x-axis data is unchanged (e.g. re-render triggered by axis recalculation / legend selection), record the current window first and restore it afterwards
     const xAxisKey = xAxisData?.join("\u0001") ?? "";
-    const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
+    const sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    const prevZoomRanges = sameXAxis ? chart.getOption()?.dataZoom : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    const prevLegendScrollIndex = sameXAxis ? chart.getOption()?.legend?.[0]?.scrollDataIndex : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: {
+          scrollDataIndex: prevLegendScrollIndex
+        }
+      });
+    }
     const nextZooms = chartOption.dataZoom;
     if (prevZoomRanges?.length && Array.isArray(nextZooms) && nextZooms.length === prevZoomRanges.length) {
       chart.setOption({
@@ -286,7 +297,9 @@ const ChartBar = props => {
         total: legendTotal,
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
-        autoStart: true
+        autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel: !normalizedScroll.zoomEnabled || normalizedScroll.wheelModeWhenSliderHidden !== "scroll"
       });
     }
 
@@ -307,7 +320,9 @@ const ChartBar = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
+  // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
+  normalizedScroll]);
 
   // Handle auto play
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Line/index.js

@@ -200,9 +200,20 @@ const ChartLine = props => {
     // Set the option: notMerge resets the dataZoom window to its initial position,
     // so when x-axis data is unchanged (e.g. re-render triggered by axis recalculation / legend selection), record the current window first and restore it afterwards
     const xAxisKey = xAxisData?.join("\u0001") ?? "";
-    const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
+    const sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    const prevZoomRanges = sameXAxis ? chart.getOption()?.dataZoom : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    const prevLegendScrollIndex = sameXAxis ? chart.getOption()?.legend?.[0]?.scrollDataIndex : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: {
+          scrollDataIndex: prevLegendScrollIndex
+        }
+      });
+    }
     const nextZooms = chartOption.dataZoom;
     if (prevZoomRanges?.length && Array.isArray(nextZooms) && nextZooms.length === prevZoomRanges.length) {
       chart.setOption({
@@ -282,7 +293,9 @@ const ChartLine = props => {
         total: legendTotal,
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
-        autoStart: true
+        autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel: !normalizedScroll.zoomEnabled || normalizedScroll.wheelModeWhenSliderHidden !== "scroll"
       });
     }
 
@@ -303,7 +316,9 @@ const ChartLine = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
+  // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
+  normalizedScroll]);
 
   // Handle auto play
   (0, _react.useEffect)(() => {

package/lib/components/Chart/_utils/autoScrollLegend.d.ts

@@ -6,6 +6,11 @@ export interface AutoScrollLegendProps {
     interval?: number;
     autoStart?: boolean;
     stopOnWheel?: boolean;
+    /**
+     * 是否接管滚轮翻图例，默认 true。
+     * 图表自身已用滚轮平移 x 轴时传 false，避免一次滚动既翻图例又移坐标轴。
+     */
+    enableWheel?: boolean;
 }
 export declare function autoScrollLegend(props: AutoScrollLegendProps): {
     start: () => void;

package/lib/components/Chart/_utils/autoScrollLegend.js

@@ -11,9 +11,13 @@ function autoScrollLegend(props) {
     visibleCount = 8,
     interval = 1500,
     autoStart = true,
-    stopOnWheel = true
+    stopOnWheel = true,
+    enableWheel = true
   } = props;
-  let currentIndex = 0;
+
+  // 组件重渲染会重建滚动器，从图例当前位置接着轮播，避免每次都跳回第一项
+  const legendOption = chart.getOption()?.legend?.[0];
+  let currentIndex = legendOption?.scrollDataIndex ?? 0;
   let scrollInterval = null;
   let isManualScrolling = false;
   function start() {
@@ -73,14 +77,18 @@ function autoScrollLegend(props) {
   const chartDom = chart.getDom();
   chartDom.addEventListener("mouseover", handleMouseOver);
   chartDom.addEventListener("mouseout", handleMouseOut);
-  chartDom.addEventListener("wheel", handleWheel, {
-    passive: false
-  });
+  if (enableWheel) {
+    chartDom.addEventListener("wheel", handleWheel, {
+      passive: false
+    });
+  }
   function dispose() {
     stop();
     chartDom.removeEventListener("mouseover", handleMouseOver);
     chartDom.removeEventListener("mouseout", handleMouseOut);
-    chartDom.removeEventListener("wheel", handleWheel);
+    if (enableWheel) {
+      chartDom.removeEventListener("wheel", handleWheel);
+    }
   }
   if (autoStart) {
     start();

package/lib/components/FilePreview/_components/XlsxPreviewPane/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface XlsxPreviewPaneProps {
+    fileUrl?: string;
+    fileType?: string;
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * xlsx 预览的完整单元：取数（useXlsxData → xlsx）＋ 渲染（XlsxPreview → x-data-spreadsheet）。
+ *
+ * 单独成文件是为了让 FilePreview 能整体 lazy 掉它。useXlsxData 是 hook，不能写在
+ * switch 的某个分支里，若留在 FilePreview 顶层就会把 xlsx 静态拖进依赖图——那正是
+ * 要避免的。把「取数 + 渲染」收进同一个组件，整块按需加载。
+ */
+declare const XlsxPreviewPane: React.FC<XlsxPreviewPaneProps>;
+export default XlsxPreviewPane;

package/lib/components/FilePreview/_components/XlsxPreviewPane/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _XlsxPreview = _interopRequireDefault(require("../XlsxPreview"));
+var _hooks = require("../../_hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * xlsx 预览的完整单元：取数（useXlsxData → xlsx）＋ 渲染（XlsxPreview → x-data-spreadsheet）。
+ *
+ * 单独成文件是为了让 FilePreview 能整体 lazy 掉它。useXlsxData 是 hook，不能写在
+ * switch 的某个分支里，若留在 FilePreview 顶层就会把 xlsx 静态拖进依赖图——那正是
+ * 要避免的。把「取数 + 渲染」收进同一个组件，整块按需加载。
+ */
+const XlsxPreviewPane = ({
+  fileUrl,
+  fileType,
+  onClose,
+  className
+}) => {
+  const xlsxData = (0, _hooks.useXlsxData)({
+    fileType,
+    fileUrl
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_XlsxPreview.default, {
+    xlsxData: xlsxData,
+    onClose: onClose,
+    className: className
+  });
+};
+var _default = exports.default = XlsxPreviewPane;

package/lib/components/FilePreview/index.js

@@ -10,17 +10,35 @@ Object.defineProperty(exports, "FilePreviewTypeArr", {
   }
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PdfPreview = _interopRequireDefault(require("./_components/PdfPreview"));
+var _react = _interopRequireWildcard(require("react"));
 var _VideoPreview = _interopRequireDefault(require("./_components/VideoPreview"));
 var _TextPreview = _interopRequireDefault(require("./_components/TextPreview"));
-var _MarkdownPreview = _interopRequireDefault(require("./_components/MarkdownPreview"));
 var _ImagePreview = _interopRequireDefault(require("./_components/ImagePreview"));
-var _XlsxPreview = _interopRequireDefault(require("./_components/XlsxPreview"));
-var _hooks = require("./_hooks");
 var _utils = require("./_utils");
 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; }
+/**
+ * 重型格式按需加载。
+ *
+ * FilePreview 是个按 fileType 分发的 dispatcher，而它处在 Upload / FormItem 的静态
+ * 依赖图上（FormItem → FormUpload → Upload → FilePreview），业务侧只要用到任何一种
+ * 表单项，下面这些只服务于特定格式的库就会被打进首屏：
+ *
+ *   pdf   → PdfPreview       → hsu-utils 的 RenderPDF → pdfjs-dist   约 374 KB
+ *   xlsx  → XlsxPreviewPane  → xlsx ＋ x-data-spreadsheet
+ *   md    → MarkdownPreview  → Markdown → katex 等
+ *
+ * 修 dispatcher 而不是逐个改它的引用方：这里改一次，所有静态 import FilePreview 的
+ * 地方（Upload、UploadedItem、FormImage…）都受益，也不会因为将来多一个引用方而回归。
+ *
+ * 图片/文本/视频三种是轻量实现，保持静态——它们也是最常命中的格式，不值得为其
+ * 付一次异步往返。
+ */
+const PdfPreview = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./_components/PdfPreview"))));
+const MarkdownPreview = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./_components/MarkdownPreview"))));
+const XlsxPreviewPane = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./_components/XlsxPreviewPane"))));
 const FilePreview = props => {
   const {
     fileUrl,
@@ -31,10 +49,6 @@ const FilePreview = props => {
     className,
     pagination
   } = props;
-  const xlsxData = (0, _hooks.useXlsxData)({
-    fileType,
-    fileUrl
-  });
   if (!open) {
     return null;
   }
@@ -49,12 +63,15 @@ const FilePreview = props => {
       }
     case "pdf":
       {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PdfPreview.default, {
-          fileUrl: fileUrl,
-          open: open,
-          onClose: onClose,
-          className: className,
-          pagination: pagination
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PdfPreview, {
+            fileUrl: fileUrl,
+            open: open,
+            onClose: onClose,
+            className: className,
+            pagination: pagination
+          })
         });
       }
     case "jpg":
@@ -78,18 +95,25 @@ const FilePreview = props => {
       }
     case "md":
       {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkdownPreview.default, {
-          text: text,
-          onClose: onClose,
-          className: className
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkdownPreview, {
+            text: text,
+            onClose: onClose,
+            className: className
+          })
         });
       }
     case "xlsx":
       {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_XlsxPreview.default, {
-          xlsxData: xlsxData,
-          onClose: onClose,
-          className: className
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(XlsxPreviewPane, {
+            fileUrl: fileUrl,
+            fileType: fileType,
+            onClose: onClose,
+            className: className
+          })
         });
       }
     default:

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.js

@@ -8,11 +8,31 @@ var _Input = _interopRequireDefault(require("../../../Input"));
 var _ItemContainer = _interopRequireDefault(require("../../ItemContainer"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _zxcvbn = _interopRequireDefault(require("zxcvbn"));
 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 }; }
+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; } /**
+ * zxcvbn 约 793 KB（未压缩），却只在这一个字段的 onChange 里用来算强度分。
+ * 静态 import 会让它跟着 FormInput → FormItem 进入每个引入过表单项的页面的
+ * 首屏 chunk。改成动态 import：只有真的渲染了 PASSWORDSTRENGTH 字段才去拉。
+ *
+ * 模块级缓存 Promise，多个密码框共用一次加载；失败时清掉缓存，下次重试。
+ */
+let zxcvbnPromise;
+const loadZxcvbn = () => {
+  if (!zxcvbnPromise) {
+    zxcvbnPromise = Promise.resolve().then(() => _interopRequireWildcard(require("zxcvbn"))).then(mod => {
+      // zxcvbn 是 `export =` 的 CJS 模块：不同打包器/interop 下动态 import 拿到的
+      // 可能是函数本身，也可能是 { default: 函数 }，两种都要兼容
+      const m = mod;
+      return m.default ?? m;
+    }).catch(err => {
+      zxcvbnPromise = undefined;
+      throw err;
+    });
+  }
+  return zxcvbnPromise;
+};
 const PasswordStrength = props => {
   const {
     placeholder,
@@ -20,6 +40,13 @@ const PasswordStrength = props => {
     ...inputConfig
   } = props;
   const [fraction, setFraction] = (0, _react.useState)(0);
+  // 挂载即预取：chunk 仍是独立的，但用户敲第一个字符时通常已经就绪
+  (0, _react.useEffect)(() => {
+    loadZxcvbn().catch(() => undefined);
+  }, []);
+
+  // 打字比加载快时会有多次并发计算，迟到的结果不能盖掉最新一次
+  const seqRef = (0, _react.useRef)(0);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _indexModule.default.passwordStrength,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Password, {
@@ -27,8 +54,13 @@ const PasswordStrength = props => {
       placeholder: placeholder ?? "请输入",
       onChange: value => {
         onChange && onChange(value);
-        const _fraction = (0, _zxcvbn.default)(value).guesses_log10;
-        setFraction(_fraction);
+        const seq = ++seqRef.current;
+        loadZxcvbn().then(zxcvbn => {
+          if (seq !== seqRef.current) return;
+          setFraction(zxcvbn(value).guesses_log10);
+        })
+        // 强度条只是辅助提示，拉不到就不显示，不打断用户输入
+        .catch(() => undefined);
       },
       allowClear: true,
       autoComplete: "new-password"

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

@@ -1,7 +1,7 @@
 import { FormAutoProps } from "./FormAuto";
 import { FormCheckboxGroupProps, FormCheckboxProps } from "./FormCheckbox";
 import { FormDatePickerProps, FormRangePickerProps, FormStepPickerProps } from "./FormDatePicker";
-import { FormEditorProps } from "./FormEditor";
+import type { FormEditorProps } from "./FormEditor";
 import { FormInputNumberProps, FormInputProps, FormPasswordProps, FormPasswordStrengthProps, FormRangeInputProps, FormTextAreaInputProps } from "./FormInput";
 import { FormRadioProps } from "./FormRadio";
 import { FormSegmentedProps } from "./FormSegmented";
@@ -12,7 +12,7 @@ import { FormTreeProps } from "./FormTree";
 import { FormImageProps, FormUploadProps } from "./FormUpload";
 import ItemContainer, { ItemContainerProps } from "./ItemContainer";
 import { FormTextProps } from "./FormText";
-import { FormCodeMirrorProps } from "./FormCodeMirror";
+import type { FormCodeMirrorProps } from "./FormCodeMirror";
 import React from "react";
 export { ItemContainer as FormItemContainer };
 export type { ItemContainerProps as FormItemContainerProps };

package/lib/components/FormItem/index.js

@@ -13,7 +13,6 @@ exports.default = exports.PlaceholderDictEn = exports.PlaceholderDict = void 0;
 var _FormAuto = _interopRequireDefault(require("./FormAuto"));
 var _FormCheckbox = _interopRequireDefault(require("./FormCheckbox"));
 var _FormDatePicker = _interopRequireDefault(require("./FormDatePicker"));
-var _FormEditor = _interopRequireDefault(require("./FormEditor"));
 var _FormInput = _interopRequireDefault(require("./FormInput"));
 var _FormRadio = _interopRequireDefault(require("./FormRadio"));
 var _FormSegmented = _interopRequireDefault(require("./FormSegmented"));
@@ -24,10 +23,43 @@ var _FormTree = _interopRequireDefault(require("./FormTree"));
 var _FormUpload = _interopRequireDefault(require("./FormUpload"));
 var _ItemContainer = _interopRequireDefault(require("./ItemContainer"));
 var _FormText = _interopRequireDefault(require("./FormText"));
-var _FormCodeMirror = _interopRequireDefault(require("./FormCodeMirror"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 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; } /**
+ * 重型字段按需加载。
+ *
+ * FormItem 是个静态分发器，几乎每个业务页面都会引入它。若在这里静态 import
+ * 全部渲染器，那么**只要用到任何一种表单项**，富文本、代码编辑器这些巨型依赖
+ * 就会被一并拉进消费方的首屏 chunk：
+ *
+ *   FormItem → FormEditor      → Editor     → @wangeditor/editor      （约 814 KB）
+ *   FormItem → FormCodeMirror  → CodeMirror → @codemirror/*           （约 380 KB）
+ *
+ * 消费方实测：某后台项目仅因入口图里存在 FormItem，首屏就多背了约 2.5 MB
+ * 未压缩的三方库；改为按需加载后首屏从 3.72 MB 降到 965 KB（gzip）。
+ *
+ * 只有 type 真的命中 EDITOR / CODEMIRROR 时才会去拉对应 chunk。类型仍走静态
+ * `import type`（编译期擦除，不产生运行时依赖），所以 FormItemMap 不受影响。
+ * 同一目录下的 CodeMirror 早就用 `import()` 按需加载语言包/校验器，这里是同一思路。
+ */
+const FormEditor = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./FormEditor"))));
+const FormCodeMirror = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./FormCodeMirror"))));
+
+/**
+ * 重型字段的 Suspense 包装。
+ *
+ * fallback 用 null 而不是骨架：这些字段都由 ItemContainer 渲染 antd 的
+ * Form.Item，加载期间不占位反而不会让表单布局跳动；antd Form 的值存在 store 里，
+ * 字段挂载晚于 setFieldsValue 也能正确回填，不影响编辑态回显。
+ */
+const LazyField = ({
+  children
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: null,
+  children: children
+});
 // Common base type
 
 // Core mapping (sorted by group)
@@ -252,12 +284,16 @@ const FormItem = props => {
         ...props
       });
     case "EDITOR":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormEditor.default, {
-        ...props
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(LazyField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormEditor, {
+          ...props
+        })
       });
     case "CODEMIRROR":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCodeMirror.default, {
-        ...props
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(LazyField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormCodeMirror, {
+          ...props
+        })
       });
     case "TEXT":
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormText.default, {

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

@@ -1,8 +1,19 @@
-import React, { ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import { ModalProps } from "../Modal";
-interface SecondConfProps extends Omit<ModalProps, "title"> {
+export interface SecondConfProps extends Omit<ModalProps, "title" | "children"> {
     contentTitle?: ReactNode;
     contentText?: ReactNode;
+    /**
+     * Trigger element (button/icon). When provided and `open` is omitted, the
+     * dialog owns its open state, so the caller does not have to keep one flag
+     * per confirmable action — which is otherwise impossible inside a list
+     * `map()`. The child's own `onClick` still fires first, and the click stops
+     * propagating so a trigger nested in a clickable row or card does not also
+     * activate that row.
+     */
+    children?: ReactElement<{
+        onClick?: (e: React.MouseEvent) => void;
+    }>;
 }
 declare const SecondConf: React.FC<SecondConfProps>;
 export default SecondConf;

package/lib/components/SecondConf/index.js

@@ -4,42 +4,73 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 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; }
 const SecondConf = props => {
   const {
     classNames,
     contentTitle,
     contentText,
+    children,
+    open,
+    onOk,
+    onCancel,
     ...modalConfig
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-    width: 800,
-    ...modalConfig,
-    centered: true,
-    className: _indexModule.default.SecondConf,
-    classNames: {
-      body: `${_indexModule.default.body} ${classNames?.body || ""}`,
-      ...classNames
-    },
-    maskClosable: false,
-    mask: false,
-    title: " ",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      icon: "mingcute:question-line",
-      className: _indexModule.default.icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: _indexModule.default.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: _indexModule.default.title,
-        children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: _indexModule.default.text,
-        children: contentText
+  const [selfOpen, setSelfOpen] = (0, _react.useState)(false);
+
+  // Controlled whenever `open` is supplied; self-managed only in trigger mode.
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : selfOpen;
+  const trigger = children && /*#__PURE__*/(0, _react.cloneElement)(children, {
+    onClick: e => {
+      e.stopPropagation();
+      children.props.onClick?.(e);
+      if (!isControlled) setSelfOpen(true);
+    }
+  });
+  const handleOk = e => {
+    if (!isControlled) setSelfOpen(false);
+    onOk?.(e);
+  };
+  const handleCancel = e => {
+    if (!isControlled) setSelfOpen(false);
+    onCancel?.(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [trigger, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+      width: 800,
+      ...modalConfig,
+      open: visible,
+      onOk: handleOk,
+      onCancel: handleCancel,
+      centered: true,
+      className: _indexModule.default.SecondConf,
+      classNames: {
+        body: `${_indexModule.default.body} ${classNames?.body || ""}`,
+        ...classNames
+      },
+      maskClosable: false,
+      mask: false,
+      title: " ",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: "mingcute:question-line",
+        className: _indexModule.default.icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _indexModule.default.content,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _indexModule.default.title,
+          children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _indexModule.default.text,
+          children: contentText
+        })]
       })]
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -41,8 +41,9 @@
     "dev": "dumi dev",
     "docs:build": "dumi build",
     "docs:preview": "dumi preview",
-    "build": "father build",
-    "prepublishOnly": "father build"
+    "build": "father build && node scripts/check-heavy-deps.cjs",
+    "prepublishOnly": "father build && node scripts/check-heavy-deps.cjs",
+    "check:deps": "node scripts/check-heavy-deps.cjs"
   },
   "dependencies": {
     "@ant-design/x": "^2.0.1",