@hsu-react/ui 0.0.17 → 0.0.19

package/src/components/Chart/Bar/index.tsx

@@ -280,14 +280,28 @@ const ChartBar: React.FC<ChartBarProps> = (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() as ChartsOption | undefined)?.dataZoom as
-            | Array<{ start?: number; end?: number }>
-            | undefined)
-        : undefined;
+    const sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    const prevZoomRanges = sameXAxis
+      ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+          | Array<{ start?: number; end?: number }>
+          | undefined)
+      : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    const prevLegendScrollIndex = sameXAxis
+      ? (
+          (chart.getOption() as ChartsOption | undefined)?.legend as
+            | Array<{ scrollDataIndex?: number }>
+            | undefined
+        )?.[0]?.scrollDataIndex
+      : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: { scrollDataIndex: prevLegendScrollIndex },
+      } as unknown as ChartOptionType);
+    }
     const nextZooms = (chartOption as ChartsOption).dataZoom;
     if (
       prevZoomRanges?.length &&
@@ -406,6 +420,10 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
         autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel:
+          !normalizedScroll.zoomEnabled ||
+          normalizedScroll.wheelModeWhenSliderHidden !== "scroll",
       });
     }
 
@@ -443,6 +461,8 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
+    // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
+    normalizedScroll,
   ]);
 
   // Handle auto play

package/src/components/Chart/Line/index.tsx

@@ -277,14 +277,28 @@ const ChartLine: React.FC<ChartLineProps> = (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() as ChartsOption | undefined)?.dataZoom as
-            | Array<{ start?: number; end?: number }>
-            | undefined)
-        : undefined;
+    const sameXAxis = prevXAxisKeyRef.current === xAxisKey;
+    const prevZoomRanges = sameXAxis
+      ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+          | Array<{ start?: number; end?: number }>
+          | undefined)
+      : undefined;
+    // 滚动图例的翻页位置同样会被 notMerge 重置，x 轴未变时恢复，
+    // 否则点一次图例、或坐标轴重算触发一次重渲染，图例就跳回第一页
+    const prevLegendScrollIndex = sameXAxis
+      ? (
+          (chart.getOption() as ChartsOption | undefined)?.legend as
+            | Array<{ scrollDataIndex?: number }>
+            | undefined
+        )?.[0]?.scrollDataIndex
+      : undefined;
     prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    if (prevLegendScrollIndex) {
+      chart.setOption({
+        legend: { scrollDataIndex: prevLegendScrollIndex },
+      } as unknown as ChartOptionType);
+    }
     const nextZooms = (chartOption as ChartsOption).dataZoom;
     if (
       prevZoomRanges?.length &&
@@ -403,6 +417,10 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         visibleCount: legendVisibleCount,
         interval: legendScrollInterval,
         autoStart: true,
+        // 滚轮已被 x 轴平移占用时不再让图例抢，否则一次滚动两处都动
+        enableWheel:
+          !normalizedScroll.zoomEnabled ||
+          normalizedScroll.wheelModeWhenSliderHidden !== "scroll",
       });
     }
 
@@ -440,6 +458,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
+    // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
+    normalizedScroll,
   ]);
 
   // Handle auto play

package/src/components/Chart/_utils/autoScrollLegend.ts

@@ -7,6 +7,11 @@ export interface AutoScrollLegendProps {
   interval?: number;
   autoStart?: boolean;
   stopOnWheel?: boolean;
+  /**
+   * 是否接管滚轮翻图例，默认 true。
+   * 图表自身已用滚轮平移 x 轴时传 false，避免一次滚动既翻图例又移坐标轴。
+   */
+  enableWheel?: boolean;
 }
 
 export function autoScrollLegend(props: AutoScrollLegendProps) {
@@ -17,9 +22,14 @@ export function autoScrollLegend(props: AutoScrollLegendProps) {
     interval = 1500,
     autoStart = true,
     stopOnWheel = true,
+    enableWheel = true,
   } = props;
 
-  let currentIndex = 0;
+  // 组件重渲染会重建滚动器，从图例当前位置接着轮播，避免每次都跳回第一项
+  const legendOption = (
+    chart.getOption() as { legend?: Array<{ scrollDataIndex?: number }> }
+  )?.legend?.[0];
+  let currentIndex = legendOption?.scrollDataIndex ?? 0;
   let scrollInterval: NodeJS.Timeout | null = null;
   let isManualScrolling = false;
 
@@ -90,13 +100,17 @@ export function autoScrollLegend(props: AutoScrollLegendProps) {
   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) {

package/src/components/FilePreview/_components/XlsxPreviewPane/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import XlsxPreview from "../XlsxPreview";
+import { useXlsxData } from "../../_hooks";
+
+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 静态拖进依赖图——那正是
+ * 要避免的。把「取数 + 渲染」收进同一个组件，整块按需加载。
+ */
+const XlsxPreviewPane: React.FC<XlsxPreviewPaneProps> = ({
+  fileUrl,
+  fileType,
+  onClose,
+  className,
+}) => {
+  const xlsxData = useXlsxData({ fileType, fileUrl });
+
+  return (
+    <XlsxPreview xlsxData={xlsxData} onClose={onClose} className={className} />
+  );
+};
+
+export default XlsxPreviewPane;

package/src/components/FilePreview/index.md

@@ -59,3 +59,14 @@ export default () => {
 | onClose | 关闭回调 | `() => void` | - |
 
 > 另导出类型 `FilePreviewType` 与常量 `FilePreviewTypeArr`（支持的文件类型数组）。
+
+### 重型格式按需加载
+
+`pdf`、`xlsx`、`md` 三种预览器依赖体积很大的三方库（pdfjs、xlsx ＋ x-data-spreadsheet、
+katex 等），已改为按需加载：只有 `fileType` 真的命中时才去拉对应 chunk。
+`mp4` / 图片 / `txt` 是轻量实现，保持同步渲染。
+
+这一点对使用方很重要：`FilePreview` 在 `Upload`、`FormItem`（`FILE` / `IMAGEFILE`）的
+静态依赖图上，若不这么做，**业务侧只要用到任何一种表单项，上述库就会被打进首屏**。
+
+用法不变，组件内部已包 `Suspense`。首次预览某种重型格式时弹窗内容会晚一拍出现。

package/src/components/FilePreview/index.tsx

@@ -1,16 +1,33 @@
-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 { FilePreviewType, FilePreviewTypeArr } from "./_utils";
 
 export type { FilePreviewType };
 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…）都受益，也不会因为将来多一个引用方而回归。
+ *
+ * 图片/文本/视频三种是轻量实现，保持静态——它们也是最常命中的格式，不值得为其
+ * 付一次异步往返。
+ */
+const PdfPreview = lazy(() => import("./_components/PdfPreview"));
+const MarkdownPreview = lazy(() => import("./_components/MarkdownPreview"));
+const XlsxPreviewPane = lazy(() => import("./_components/XlsxPreviewPane"));
+
 interface FilePreviewProps {
   fileUrl?: string;
   fileType?: FilePreviewType;
@@ -25,7 +42,6 @@ interface FilePreviewProps {
 const FilePreview: React.FC<FilePreviewProps> = (props) => {
   const { fileUrl, fileType, open, onClose, text, className, pagination } =
     props;
-  const xlsxData = useXlsxData({ fileType, fileUrl });
 
   if (!open) {
     return null;
@@ -43,13 +59,15 @@ const FilePreview: React.FC<FilePreviewProps> = (props) => {
     }
     case "pdf": {
       return (
-        <PdfPreview
-          fileUrl={fileUrl}
-          open={open}
-          onClose={onClose}
-          className={className}
-          pagination={pagination}
-        />
+        <Suspense fallback={null}>
+          <PdfPreview
+            fileUrl={fileUrl}
+            open={open}
+            onClose={onClose}
+            className={className}
+            pagination={pagination}
+          />
+        </Suspense>
       );
     }
     case "jpg":
@@ -71,16 +89,25 @@ const FilePreview: React.FC<FilePreviewProps> = (props) => {
     }
     case "md": {
       return (
-        <MarkdownPreview text={text} onClose={onClose} className={className} />
+        <Suspense fallback={null}>
+          <MarkdownPreview
+            text={text}
+            onClose={onClose}
+            className={className}
+          />
+        </Suspense>
       );
     }
     case "xlsx": {
       return (
-        <XlsxPreview
-          xlsxData={xlsxData}
-          onClose={onClose}
-          className={className}
-        />
+        <Suspense fallback={null}>
+          <XlsxPreviewPane
+            fileUrl={fileUrl}
+            fileType={fileType}
+            onClose={onClose}
+            className={className}
+          />
+        </Suspense>
       );
     }
     default: {

package/src/components/FormItem/FormInput/FormPasswordStrength/index.tsx

@@ -1,9 +1,8 @@
 import Input, { InputProps as BasicInputProps } from "../../../Input";
 import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import styles from "./index.module.scss";
-import zxcvbn from "zxcvbn";
 
 interface InputProps extends BasicInputProps {}
 
@@ -11,9 +10,43 @@ export interface FormPasswordStrengthProps extends ItemContainerProps {
   componentProps?: InputProps;
 }
 
+/**
+ * zxcvbn 约 793 KB（未压缩），却只在这一个字段的 onChange 里用来算强度分。
+ * 静态 import 会让它跟着 FormInput → FormItem 进入每个引入过表单项的页面的
+ * 首屏 chunk。改成动态 import：只有真的渲染了 PASSWORDSTRENGTH 字段才去拉。
+ *
+ * 模块级缓存 Promise，多个密码框共用一次加载；失败时清掉缓存，下次重试。
+ */
+type Zxcvbn = typeof import("zxcvbn");
+
+let zxcvbnPromise: Promise<Zxcvbn> | undefined;
+const loadZxcvbn = (): Promise<Zxcvbn> => {
+  if (!zxcvbnPromise) {
+    zxcvbnPromise = import("zxcvbn")
+      .then((mod) => {
+        // zxcvbn 是 `export =` 的 CJS 模块：不同打包器/interop 下动态 import 拿到的
+        // 可能是函数本身，也可能是 { default: 函数 }，两种都要兼容
+        const m = mod as Zxcvbn & { default?: Zxcvbn };
+        return m.default ?? m;
+      })
+      .catch((err) => {
+        zxcvbnPromise = undefined;
+        throw err;
+      });
+  }
+  return zxcvbnPromise;
+};
+
 const PasswordStrength: React.FC<InputProps> = (props) => {
   const { placeholder, onChange, ...inputConfig } = props;
   const [fraction, setFraction] = useState<number>(0);
+  // 挂载即预取：chunk 仍是独立的，但用户敲第一个字符时通常已经就绪
+  useEffect(() => {
+    loadZxcvbn().catch(() => undefined);
+  }, []);
+
+  // 打字比加载快时会有多次并发计算，迟到的结果不能盖掉最新一次
+  const seqRef = useRef(0);
 
   return (
     <div className={styles.passwordStrength}>
@@ -23,8 +56,14 @@ const PasswordStrength: React.FC<InputProps> = (props) => {
         onChange={(value) => {
           onChange && onChange(value);
 
-          const _fraction = zxcvbn(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
         autoComplete="new-password"

package/src/components/FormItem/index.md

@@ -528,3 +528,22 @@ export default () => (
 - 上传类：`FILE`、`IMAGEFILE`
 
 > 同时导出 `FormItemContainer`（即 `ItemContainer`）及类型 `FormItemType`、`FormItemProps`、`PlaceholderDict` / `PlaceholderDictEn` 占位文案字典。
+
+### 重型字段按需加载
+
+`EDITOR`、`CODEMIRROR`、`PASSWORDSTRENGTH` 三类字段的实现依赖体积很大的三方库
+（`@wangeditor/editor` 约 814 KB、`@codemirror/*` 约 380 KB、`zxcvbn` 约 793 KB，均为未压缩）。
+`FormItem` 几乎会被每个业务页面引入，若静态引入这些渲染器，那么**只要用到任何一种表单项**，
+上述库就会被一并打进消费方的首屏产物。
+
+因此这三类字段改为按需加载：只有 `type` 真的命中时才去拉对应 chunk。对使用方而言：
+
+- **用法不变**，仍然是 `<FormItem type="EDITOR" ... />`，无需自行包 `Suspense`。
+- 首次渲染这类字段时，该字段会晚一拍出现（组件内部已用 `Suspense fallback={null}` 兜住，
+  不会让表单布局跳动）。antd `Form` 的值存在 store 里，字段挂载晚于 `setFieldsValue`
+  也能正确回填，**不影响编辑态回显**。
+- `PASSWORDSTRENGTH` 在挂载时即预取 `zxcvbn`，正常输入速度下感知不到延迟；强度条在
+  加载完成前保持 0，加载失败则不显示，不阻断输入。
+
+若消费方希望这些库进首屏（例如整站以富文本编辑为主），照常在自己的入口静态
+`import Editor from "@hsu-react/ui/es/components/Editor"` 即可，两者不冲突。

package/src/components/FormItem/index.tsx

@@ -8,7 +8,7 @@ import FormDatePicker, {
   FormRangePickerProps,
   FormStepPickerProps,
 } from "./FormDatePicker";
-import FormEditor, { FormEditorProps } from "./FormEditor";
+import type { FormEditorProps } from "./FormEditor";
 import FormInput, {
   FormInputNumberProps,
   FormInputProps,
@@ -31,9 +31,40 @@ import FormTree, { FormTreeProps } from "./FormTree";
 import FormUpload, { FormImageProps, FormUploadProps } from "./FormUpload";
 import ItemContainer, { ItemContainerProps } from "./ItemContainer";
 import FormText, { FormTextProps } from "./FormText";
-import FormCodeMirror, { FormCodeMirrorProps } from "./FormCodeMirror";
+import type { FormCodeMirrorProps } 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()` 按需加载语言包/校验器，这里是同一思路。
+ */
+const FormEditor = lazy(() => import("./FormEditor"));
+const FormCodeMirror = lazy(() => import("./FormCodeMirror"));
+
+/**
+ * 重型字段的 Suspense 包装。
+ *
+ * fallback 用 null 而不是骨架：这些字段都由 ItemContainer 渲染 antd 的
+ * Form.Item，加载期间不占位反而不会让表单布局跳动；antd Form 的值存在 store 里，
+ * 字段挂载晚于 setFieldsValue 也能正确回填，不影响编辑态回显。
+ */
+const LazyField: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Suspense fallback={null}>{children}</Suspense>
+);
 
 export { ItemContainer as FormItemContainer };
 export type { ItemContainerProps as FormItemContainerProps };
@@ -374,9 +405,17 @@ const FormItem: React.FC<FormItemProps> = (props) => {
     case "SLIDER":
       return <FormSlider {...props} />;
     case "EDITOR":
-      return <FormEditor {...props} />;
+      return (
+        <LazyField>
+          <FormEditor {...props} />
+        </LazyField>
+      );
     case "CODEMIRROR":
-      return <FormCodeMirror {...props} />;
+      return (
+        <LazyField>
+          <FormCodeMirror {...props} />
+        </LazyField>
+      );
     case "TEXT":
       return <FormText {...props} />;
     default:

package/src/components/SecondConf/index.md

@@ -43,6 +43,45 @@ export default () => {
 };
 ```
 
+## 触发器模式（推荐）
+
+传入 `children` 作为触发元素，并且**不传 `open`**，弹窗自持开关状态，调用处原地包一层即可，不必为每个可确认的操作各存一份 `open`。
+
+列表里尤其明显：`map()` 内部无法为每一行单独 `useState`，受控写法只能把「当前待确认的是哪一行」提到循环外，触发点和弹窗被拆到两个作用域；触发器模式没有这个问题。
+
+```tsx
+import React from "react";
+import { SecondConf } from "@hsu-react/ui";
+import { Button } from "antd";
+
+const list = [
+  { id: "1", name: "西游记" },
+  { id: "2", name: "水浒传" },
+];
+
+export default () => (
+  <>
+    {list.map((it) => (
+      <SecondConf
+        key={it.id}
+        contentTitle={`删除《${it.name}》`}
+        contentText="删除后将无法恢复，请谨慎操作。"
+        okButtonProps={{ danger: true }}
+        onOk={() => console.log("deleted", it.id)}
+      >
+        <Button danger size="small" style={{ marginRight: 8 }}>
+          删除 {it.name}
+        </Button>
+      </SecondConf>
+    ))}
+  </>
+);
+```
+
+触发元素自身的 `onClick` 会照常先执行；点击会 `stopPropagation`，避免嵌在可点击的行/卡片里时连带触发整行的点击。
+
+同时传 `open` 和 `children` 时以受控为准，此时 `children` 只作为触发元素渲染，开关由外部决定。
+
 ## API
 
 在 `Modal`（即 antd `ModalProps`）基础上扩展（`title` 已被内部接管）：
@@ -51,5 +90,8 @@ export default () => {
 | --- | --- | --- | --- |
 | contentTitle | 标题中「确认 … 吗？」的中间内容 | `ReactNode` | - |
 | contentText | 标题下方的补充说明文案 | `ReactNode` | - |
+| children | 触发元素；不传 `open` 时弹窗自持开关状态 | `ReactElement` | - |
 
 > 其余属性（`open`、`onOk`、`onCancel`、`width`、`confirmLoading` 等）与 `Modal` 一致；组件内部默认 `width={800}`、`centered`、`maskClosable={false}`、`mask={false}`。
+>
+> `open` 传了就是受控（含 `undefined` 以外的任何值），`onOk` / `onCancel` 里需自行关闭；不传则由组件自行开关，`onOk` 只写业务动作即可。

package/src/components/SecondConf/index.tsx

@@ -1,36 +1,86 @@
-import React, { ReactNode } from "react";
+import React, { ReactElement, ReactNode, cloneElement, useState } from "react";
 import styles from "./index.module.scss";
 import Icon from "../Icon";
 import Modal, { 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 }>;
 }
 
 const SecondConf: React.FC<SecondConfProps> = (props) => {
-  const { classNames, contentTitle, contentText, ...modalConfig } = props;
+  const {
+    classNames,
+    contentTitle,
+    contentText,
+    children,
+    open,
+    onOk,
+    onCancel,
+    ...modalConfig
+  } = props;
+  const [selfOpen, setSelfOpen] = useState<boolean>(false);
+
+  // Controlled whenever `open` is supplied; self-managed only in trigger mode.
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : selfOpen;
+
+  const trigger =
+    children &&
+    cloneElement(children, {
+      onClick: (e: React.MouseEvent) => {
+        e.stopPropagation();
+        children.props.onClick?.(e);
+        if (!isControlled) setSelfOpen(true);
+      },
+    });
+
+  const handleOk: ModalProps["onOk"] = (e) => {
+    if (!isControlled) setSelfOpen(false);
+    onOk?.(e);
+  };
+
+  const handleCancel: ModalProps["onCancel"] = (e) => {
+    if (!isControlled) setSelfOpen(false);
+    onCancel?.(e);
+  };
 
   return (
-    <Modal
-      width={800}
-      {...modalConfig}
-      centered
-      className={styles.SecondConf}
-      classNames={{
-        body: `${styles.body} ${classNames?.body || ""}`,
-        ...classNames,
-      }}
-      maskClosable={false}
-      mask={false}
-      title=" "
-    >
-      <Icon icon="mingcute:question-line" className={styles.icon} />
-      <div className={styles.content}>
-        <div className={styles.title}>确认{contentTitle}吗？</div>
-        <div className={styles.text}>{contentText}</div>
-      </div>
-    </Modal>
+    <>
+      {trigger}
+      <Modal
+        width={800}
+        {...modalConfig}
+        open={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        centered
+        className={styles.SecondConf}
+        classNames={{
+          body: `${styles.body} ${classNames?.body || ""}`,
+          ...classNames,
+        }}
+        maskClosable={false}
+        mask={false}
+        title=" "
+      >
+        <Icon icon="mingcute:question-line" className={styles.icon} />
+        <div className={styles.content}>
+          <div className={styles.title}>确认{contentTitle}吗？</div>
+          <div className={styles.text}>{contentText}</div>
+        </div>
+      </Modal>
+    </>
   );
 };