@hsu-react/ui 0.0.17 → 0.0.19

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

@@ -185,7 +185,7 @@ var ChartBar = function ChartBar(props) {
 
   // Initialize the chart
   useEffect(function () {
-    var _xAxisData$join, _chart$getOption, _opt$legend$, _opt$legend, _ref3;
+    var _xAxisData$join, _chart$getOption, _chart$getOption2, _opt$legend$, _opt$legend, _ref3;
     if (!chartRef.current) return;
 
     // Initialize or reuse the existing instance
@@ -198,9 +198,20 @@ var ChartBar = function 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
     var xAxisKey = (_xAxisData$join = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.join("\x01")) !== null && _xAxisData$join !== void 0 ? _xAxisData$join : "";
-    var prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 ? void 0 : _chart$getOption.dataZoom : undefined;
+    var sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    var prevZoomRanges = sameXAxis ? (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 ? void 0 : _chart$getOption.dataZoom : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    var prevLegendScrollIndex = sameXAxis ? (_chart$getOption2 = chart.getOption()) === null || _chart$getOption2 === void 0 || (_chart$getOption2 = _chart$getOption2.legend) === null || _chart$getOption2 === void 0 || (_chart$getOption2 = _chart$getOption2[0]) === null || _chart$getOption2 === void 0 ? void 0 : _chart$getOption2.scrollDataIndex : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: {
+          scrollDataIndex: prevLegendScrollIndex
+        }
+      });
+    }
     var nextZooms = chartOption.dataZoom;
     if (prevZoomRanges !== null && prevZoomRanges !== void 0 && prevZoomRanges.length && Array.isArray(nextZooms) && nextZooms.length === prevZoomRanges.length) {
       chart.setOption({
@@ -215,8 +226,8 @@ var ChartBar = function ChartBar(props) {
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
     if (onDataZoomWindowChanged) {
-      var _chart$getOption2, _xAxisData$length2;
-      var zooms = (_chart$getOption2 = chart.getOption()) === null || _chart$getOption2 === void 0 ? void 0 : _chart$getOption2.dataZoom;
+      var _chart$getOption3, _xAxisData$length2;
+      var zooms = (_chart$getOption3 = chart.getOption()) === null || _chart$getOption3 === void 0 ? void 0 : _chart$getOption3.dataZoom;
       var zoom = zooms === null || zooms === void 0 ? void 0 : zooms[0];
       var totalLen = (_xAxisData$length2 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length2 !== void 0 ? _xAxisData$length2 : 0;
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
@@ -288,7 +299,9 @@ var ChartBar = function ChartBar(props) {
         total: legendTotal,
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
-        autoStart: true
+        autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel: !normalizedScroll.zoomEnabled || normalizedScroll.wheelModeWhenSliderHidden !== "scroll"
       });
     }
 
@@ -312,7 +325,9 @@ var ChartBar = function 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
   useEffect(function () {

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

@@ -181,7 +181,7 @@ var ChartLine = function ChartLine(props) {
 
   // Initialize the chart
   useEffect(function () {
-    var _xAxisData$join, _chart$getOption, _opt$legend$, _opt$legend, _ref3;
+    var _xAxisData$join, _chart$getOption, _chart$getOption2, _opt$legend$, _opt$legend, _ref3;
     if (!chartRef.current) return;
 
     // Initialize or reuse the existing instance
@@ -194,9 +194,20 @@ var ChartLine = function 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
     var xAxisKey = (_xAxisData$join = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.join("\x01")) !== null && _xAxisData$join !== void 0 ? _xAxisData$join : "";
-    var prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 ? void 0 : _chart$getOption.dataZoom : undefined;
+    var sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    var prevZoomRanges = sameXAxis ? (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 ? void 0 : _chart$getOption.dataZoom : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    var prevLegendScrollIndex = sameXAxis ? (_chart$getOption2 = chart.getOption()) === null || _chart$getOption2 === void 0 || (_chart$getOption2 = _chart$getOption2.legend) === null || _chart$getOption2 === void 0 || (_chart$getOption2 = _chart$getOption2[0]) === null || _chart$getOption2 === void 0 ? void 0 : _chart$getOption2.scrollDataIndex : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: {
+          scrollDataIndex: prevLegendScrollIndex
+        }
+      });
+    }
     var nextZooms = chartOption.dataZoom;
     if (prevZoomRanges !== null && prevZoomRanges !== void 0 && prevZoomRanges.length && Array.isArray(nextZooms) && nextZooms.length === prevZoomRanges.length) {
       chart.setOption({
@@ -211,8 +222,8 @@ var ChartLine = function ChartLine(props) {
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
     if (onDataZoomWindowChanged) {
-      var _chart$getOption2, _xAxisData$length2;
-      var zooms = (_chart$getOption2 = chart.getOption()) === null || _chart$getOption2 === void 0 ? void 0 : _chart$getOption2.dataZoom;
+      var _chart$getOption3, _xAxisData$length2;
+      var zooms = (_chart$getOption3 = chart.getOption()) === null || _chart$getOption3 === void 0 ? void 0 : _chart$getOption3.dataZoom;
       var zoom = zooms === null || zooms === void 0 ? void 0 : zooms[0];
       var totalLen = (_xAxisData$length2 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length2 !== void 0 ? _xAxisData$length2 : 0;
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
@@ -284,7 +295,9 @@ var ChartLine = function ChartLine(props) {
         total: legendTotal,
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
-        autoStart: true
+        autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel: !normalizedScroll.zoomEnabled || normalizedScroll.wheelModeWhenSliderHidden !== "scroll"
       });
     }
 
@@ -308,7 +321,9 @@ var ChartLine = function 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
   useEffect(function () {

package/es/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/es/components/Chart/_utils/autoScrollLegend.js

@@ -1,4 +1,5 @@
 export function autoScrollLegend(props) {
+  var _chart$getOption, _legendOption$scrollD;
   var chart = props.chart,
     total = props.total,
     _props$visibleCount = props.visibleCount,
@@ -8,8 +9,13 @@ export function autoScrollLegend(props) {
     _props$autoStart = props.autoStart,
     autoStart = _props$autoStart === void 0 ? true : _props$autoStart,
     _props$stopOnWheel = props.stopOnWheel,
-    stopOnWheel = _props$stopOnWheel === void 0 ? true : _props$stopOnWheel;
-  var currentIndex = 0;
+    stopOnWheel = _props$stopOnWheel === void 0 ? true : _props$stopOnWheel,
+    _props$enableWheel = props.enableWheel,
+    enableWheel = _props$enableWheel === void 0 ? true : _props$enableWheel;
+
+  // 组件重渲染会重建滚动器，从图例当前位置接着轮播，避免每次都跳回第一项
+  var legendOption = (_chart$getOption = chart.getOption()) === null || _chart$getOption === void 0 || (_chart$getOption = _chart$getOption.legend) === null || _chart$getOption === void 0 ? void 0 : _chart$getOption[0];
+  var currentIndex = (_legendOption$scrollD = legendOption === null || legendOption === void 0 ? void 0 : legendOption.scrollDataIndex) !== null && _legendOption$scrollD !== void 0 ? _legendOption$scrollD : 0;
   var scrollInterval = null;
   var isManualScrolling = false;
   function start() {
@@ -69,14 +75,18 @@ export function autoScrollLegend(props) {
   var 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/es/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/es/components/FilePreview/_components/XlsxPreviewPane/index.js

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

package/es/components/FilePreview/index.js

@@ -1,14 +1,37 @@
-import React from "react";
-import PdfPreview from "./_components/PdfPreview";
+import React, { Suspense, lazy } from "react";
 import VideoPreview from "./_components/VideoPreview";
 import TextPreview from "./_components/TextPreview";
-import MarkdownPreview from "./_components/MarkdownPreview";
 import ImagePreview from "./_components/ImagePreview";
-import XlsxPreview from "./_components/XlsxPreview";
-import { useXlsxData } from "./_hooks";
 import { FilePreviewTypeArr } from "./_utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export { FilePreviewTypeArr };
+
+/**
+ * 重型格式按需加载。
+ *
+ * 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…）都受益，也不会因为将来多一个引用方而回归。
+ *
+ * 图片/文本/视频三种是轻量实现，保持静态——它们也是最常命中的格式，不值得为其
+ * 付一次异步往返。
+ */
+var PdfPreview = /*#__PURE__*/lazy(function () {
+  return import("./_components/PdfPreview");
+});
+var MarkdownPreview = /*#__PURE__*/lazy(function () {
+  return import("./_components/MarkdownPreview");
+});
+var XlsxPreviewPane = /*#__PURE__*/lazy(function () {
+  return import("./_components/XlsxPreviewPane");
+});
 var FilePreview = function FilePreview(props) {
   var fileUrl = props.fileUrl,
     fileType = props.fileType,
@@ -17,10 +40,6 @@ var FilePreview = function FilePreview(props) {
     text = props.text,
     className = props.className,
     pagination = props.pagination;
-  var xlsxData = useXlsxData({
-    fileType: fileType,
-    fileUrl: fileUrl
-  });
   if (!open) {
     return null;
   }
@@ -35,12 +54,15 @@ var FilePreview = function FilePreview(props) {
       }
     case "pdf":
       {
-        return /*#__PURE__*/_jsx(PdfPreview, {
-          fileUrl: fileUrl,
-          open: open,
-          onClose: onClose,
-          className: className,
-          pagination: pagination
+        return /*#__PURE__*/_jsx(Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/_jsx(PdfPreview, {
+            fileUrl: fileUrl,
+            open: open,
+            onClose: onClose,
+            className: className,
+            pagination: pagination
+          })
         });
       }
     case "jpg":
@@ -64,18 +86,25 @@ var FilePreview = function FilePreview(props) {
       }
     case "md":
       {
-        return /*#__PURE__*/_jsx(MarkdownPreview, {
-          text: text,
-          onClose: onClose,
-          className: className
+        return /*#__PURE__*/_jsx(Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/_jsx(MarkdownPreview, {
+            text: text,
+            onClose: onClose,
+            className: className
+          })
         });
       }
     case "xlsx":
       {
-        return /*#__PURE__*/_jsx(XlsxPreview, {
-          xlsxData: xlsxData,
-          onClose: onClose,
-          className: className
+        return /*#__PURE__*/_jsx(Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/_jsx(XlsxPreviewPane, {
+            fileUrl: fileUrl,
+            fileType: fileType,
+            onClose: onClose,
+            className: className
+          })
         });
       }
     default:

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

@@ -16,11 +16,34 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import Input from "../../../Input";
 import ItemContainer from "../../ItemContainer";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
-import zxcvbn from "zxcvbn";
+
+/**
+ * zxcvbn 约 793 KB（未压缩），却只在这一个字段的 onChange 里用来算强度分。
+ * 静态 import 会让它跟着 FormInput → FormItem 进入每个引入过表单项的页面的
+ * 首屏 chunk。改成动态 import：只有真的渲染了 PASSWORDSTRENGTH 字段才去拉。
+ *
+ * 模块级缓存 Promise，多个密码框共用一次加载；失败时清掉缓存，下次重试。
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var zxcvbnPromise;
+var loadZxcvbn = function loadZxcvbn() {
+  if (!zxcvbnPromise) {
+    zxcvbnPromise = import("zxcvbn").then(function (mod) {
+      var _m$default;
+      // zxcvbn 是 `export =` 的 CJS 模块：不同打包器/interop 下动态 import 拿到的
+      // 可能是函数本身，也可能是 { default: 函数 }，两种都要兼容
+      var m = mod;
+      return (_m$default = m.default) !== null && _m$default !== void 0 ? _m$default : m;
+    }).catch(function (err) {
+      zxcvbnPromise = undefined;
+      throw err;
+    });
+  }
+  return zxcvbnPromise;
+};
 var PasswordStrength = function PasswordStrength(props) {
   var placeholder = props.placeholder,
     _onChange = props.onChange,
@@ -29,14 +52,30 @@ var PasswordStrength = function PasswordStrength(props) {
     _useState2 = _slicedToArray(_useState, 2),
     fraction = _useState2[0],
     setFraction = _useState2[1];
+  // 挂载即预取：chunk 仍是独立的，但用户敲第一个字符时通常已经就绪
+  useEffect(function () {
+    loadZxcvbn().catch(function () {
+      return undefined;
+    });
+  }, []);
+
+  // 打字比加载快时会有多次并发计算，迟到的结果不能盖掉最新一次
+  var seqRef = useRef(0);
   return /*#__PURE__*/_jsxs("div", {
     className: styles.passwordStrength,
     children: [/*#__PURE__*/_jsx(Input.Password, _objectSpread(_objectSpread({}, inputConfig), {}, {
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "请输入",
       onChange: function onChange(value) {
         _onChange && _onChange(value);
-        var _fraction = zxcvbn(value).guesses_log10;
-        setFraction(_fraction);
+        var seq = ++seqRef.current;
+        loadZxcvbn().then(function (zxcvbn) {
+          if (seq !== seqRef.current) return;
+          setFraction(zxcvbn(value).guesses_log10);
+        })
+        // 强度条只是辅助提示，拉不到就不显示，不打断用户输入
+        .catch(function () {
+          return undefined;
+        });
       },
       allowClear: true,
       autoComplete: "new-password"

package/es/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/es/components/FormItem/index.js

@@ -7,7 +7,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import FormAuto from "./FormAuto";
 import FormCheckbox from "./FormCheckbox";
 import FormDatePicker from "./FormDatePicker";
-import FormEditor from "./FormEditor";
 import FormInput from "./FormInput";
 import FormRadio from "./FormRadio";
 import FormSegmented from "./FormSegmented";
@@ -18,9 +17,47 @@ import FormTree from "./FormTree";
 import FormUpload from "./FormUpload";
 import ItemContainer from "./ItemContainer";
 import FormText from "./FormText";
-import FormCodeMirror from "./FormCodeMirror";
-import React from "react";
+import React, { Suspense, lazy } from "react";
+
+/**
+ * 重型字段按需加载。
+ *
+ * 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()` 按需加载语言包/校验器，这里是同一思路。
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+var FormEditor = /*#__PURE__*/lazy(function () {
+  return import("./FormEditor");
+});
+var FormCodeMirror = /*#__PURE__*/lazy(function () {
+  return import("./FormCodeMirror");
+});
+
+/**
+ * 重型字段的 Suspense 包装。
+ *
+ * fallback 用 null 而不是骨架：这些字段都由 ItemContainer 渲染 antd 的
+ * Form.Item，加载期间不占位反而不会让表单布局跳动；antd Form 的值存在 store 里，
+ * 字段挂载晚于 setFieldsValue 也能正确回填，不影响编辑态回显。
+ */
+var LazyField = function LazyField(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: null,
+    children: children
+  });
+};
 export { ItemContainer as FormItemContainer };
 
 // Common base type
@@ -198,9 +235,13 @@ var FormItem = function FormItem(props) {
     case "SLIDER":
       return /*#__PURE__*/_jsx(FormSlider, _objectSpread({}, props));
     case "EDITOR":
-      return /*#__PURE__*/_jsx(FormEditor, _objectSpread({}, props));
+      return /*#__PURE__*/_jsx(LazyField, {
+        children: /*#__PURE__*/_jsx(FormEditor, _objectSpread({}, props))
+      });
     case "CODEMIRROR":
-      return /*#__PURE__*/_jsx(FormCodeMirror, _objectSpread({}, props));
+      return /*#__PURE__*/_jsx(LazyField, {
+        children: /*#__PURE__*/_jsx(FormCodeMirror, _objectSpread({}, props))
+      });
     case "TEXT":
       return /*#__PURE__*/_jsx(FormText, _objectSpread({}, props));
     default:

package/es/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/es/components/SecondConf/index.js

@@ -1,47 +1,87 @@
 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 = ["classNames", "contentTitle", "contentText"];
+var _excluded = ["classNames", "contentTitle", "contentText", "children", "open", "onOk", "onCancel"];
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from "react";
+import React, { cloneElement, useState } from "react";
 import styles from "./index.module.scss";
 import Icon from "../Icon";
 import Modal from "../Modal";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var SecondConf = function SecondConf(props) {
   var classNames = props.classNames,
     contentTitle = props.contentTitle,
     contentText = props.contentText,
+    children = props.children,
+    open = props.open,
+    onOk = props.onOk,
+    onCancel = props.onCancel,
     modalConfig = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
-    width: 800
-  }, modalConfig), {}, {
-    centered: true,
-    className: styles.SecondConf,
-    classNames: _objectSpread({
-      body: "".concat(styles.body, " ").concat((classNames === null || classNames === void 0 ? void 0 : classNames.body) || "")
-    }, classNames),
-    maskClosable: false,
-    mask: false,
-    title: " ",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: "mingcute:question-line",
-      className: styles.icon
-    }), /*#__PURE__*/_jsxs("div", {
-      className: styles.content,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: styles.title,
-        children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.text,
-        children: contentText
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfOpen = _useState2[0],
+    setSelfOpen = _useState2[1];
+
+  // Controlled whenever `open` is supplied; self-managed only in trigger mode.
+  var isControlled = open !== undefined;
+  var visible = isControlled ? open : selfOpen;
+  var trigger = children && /*#__PURE__*/cloneElement(children, {
+    onClick: function onClick(e) {
+      var _children$props$onCli, _children$props;
+      e.stopPropagation();
+      (_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 || _children$props$onCli.call(_children$props, e);
+      if (!isControlled) setSelfOpen(true);
+    }
+  });
+  var handleOk = function handleOk(e) {
+    if (!isControlled) setSelfOpen(false);
+    onOk === null || onOk === void 0 || onOk(e);
+  };
+  var handleCancel = function handleCancel(e) {
+    if (!isControlled) setSelfOpen(false);
+    onCancel === null || onCancel === void 0 || onCancel(e);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [trigger, /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
+      width: 800
+    }, modalConfig), {}, {
+      open: visible,
+      onOk: handleOk,
+      onCancel: handleCancel,
+      centered: true,
+      className: styles.SecondConf,
+      classNames: _objectSpread({
+        body: "".concat(styles.body, " ").concat((classNames === null || classNames === void 0 ? void 0 : classNames.body) || "")
+      }, classNames),
+      maskClosable: false,
+      mask: false,
+      title: " ",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "mingcute:question-line",
+        className: styles.icon
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.content,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: styles.title,
+          children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.text,
+          children: contentText
+        })]
       })]
-    })]
-  }));
+    }))]
+  });
 };
 export default SecondConf;