@hsu-react/ui 0.0.16 → 0.0.18

package/es/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.module.scss

@@ -33,19 +33,3 @@
     }
   }
 }
-
-.Copyed {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  cursor: default;
-
-  .icon {
-    font-size: 18px;
-  }
-}

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
 export interface CopyProps {
     id: string;
-    isMessage?: true;
+    /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
+    isMessage?: boolean;
     md?: boolean;
     text?: string;
     copyIcon?: ReactNode;

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

@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--text-color);
+  color: var(--cf-text);
 
   cursor: default;
 

package/es/components/Markdown/Views/index.js

@@ -1,14 +1,14 @@
-var _excluded = ["className", "children"],
-  _excluded2 = ["children"];
 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); }
-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; }
+var _excluded = ["className", "children", "node"],
+  _excluded2 = ["children", "node"];
 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); }
-import React from "react";
+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, { createContext, useContext, useId } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
@@ -18,7 +18,6 @@ import classNames from "classnames";
 import styles from "./index.module.scss";
 import "highlight.js/styles/atom-one-dark.min.css";
 import "katex/dist/katex.min.css";
-import { generateRandomStr } from "hsu-utils";
 import Copy from "../../Copy";
 import MermaidBlock from "./MermaidBlock";
 import ArtifactBlock from "./ArtifactBlock";
@@ -41,77 +40,109 @@ var extractText = function extractText(node) {
   }
   return "";
 };
-var MarkdownViews = function MarkdownViews(props) {
+
+/**
+ * Copy button config, handed to the code renderer through context rather than a closure so the
+ * renderer can stay a module-level component (see CodeBlock).
+ */
+var CopyPropsContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * Fenced code block: mermaid diagram, Artifacts preview, or highlighted code with a copy button.
+ *
+ * Declared at module scope on purpose. Defining it inline inside MarkdownViews would hand
+ * react-markdown a brand-new element type on every render, so React would unmount and remount
+ * every code block whenever the markdown re-renders — making the copy button flicker (and losing
+ * its "已复制！" state) on each token of streamed content.
+ */
+var CodeBlock = function CodeBlock(props) {
+  var _exec;
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
   var className = props.className,
-    copyProps = props.copyProps,
-    extraComponents = props.components;
-  return /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({}, props), {}, {
-    rehypePlugins: [rehypeHighlight, rehypeKatex],
-    remarkPlugins: [remarkGfm, remarkMath],
-    className: classNames(styles.MarkdownViews, className, "markdown-body"),
-    components: _objectSpread({
-      code: function code(_ref) {
-        var className = _ref.className,
-          children = _ref.children,
-          props = _objectWithoutProperties(_ref, _excluded);
-        var match = /language-(\w+)/.exec(className || "");
-        if (match !== null && match !== void 0 && match.length) {
-          var lang = match[1].toLowerCase();
-          var codeText = extractText(children);
+    children = props.children,
+    _node = props.node,
+    codeProps = _objectWithoutProperties(props, _excluded);
+  var copyProps = useContext(CopyPropsContext);
+  // Stable for the lifetime of the block: regenerating the id on every render would leave the
+  // copy button's getElementById lookup pointing at a stale node. Strip ':' so the id stays
+  // usable with CSS selectors as well as getElementById.
+  var id = "md-code-".concat(useId().replace(/:/g, ""));
+  var lang = (_exec = /language-(\w+)/.exec(className || "")) === null || _exec === void 0 || (_exec = _exec[1]) === null || _exec === void 0 ? void 0 : _exec.toLowerCase();
+  if (!lang) {
+    return /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({}, codeProps), {}, {
+      children: children
+    }));
+  }
+  var codeText = extractText(children);
+
+  // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
+  if (lang === "mermaid") {
+    return /*#__PURE__*/_jsx(MermaidBlock, {
+      code: codeText
+    });
+  }
+  var codeView = /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.code),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classNames(styles.nav),
+      children: /*#__PURE__*/_jsx(Copy, _objectSpread({
+        id: id,
+        md: false
+      }, copyProps))
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.content),
+      children: /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({
+        id: id
+      }, codeProps), {}, {
+        className: classNames(styles.code_content, className),
+        children: children
+      }))
+    })]
+  });
 
-          // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
-          if (lang === "mermaid") {
-            return /*#__PURE__*/_jsx(MermaidBlock, {
-              code: codeText
-            });
-          }
-          var id = generateRandomStr(10);
-          var codeView = /*#__PURE__*/_jsxs("div", {
-            className: classNames(styles.code),
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classNames(styles.nav),
-              children: /*#__PURE__*/_jsx(Copy, _objectSpread({
-                id: id,
-                md: false
-              }, copyProps))
-            }), /*#__PURE__*/_jsx("div", {
-              className: classNames(styles.content),
-              children: /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({
-                id: id
-              }, props), {}, {
-                className: classNames(styles.code_content, className),
-                children: children
-              }))
-            })]
-          });
+  // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
+  if (ARTIFACT_LANGS.has(lang)) {
+    return /*#__PURE__*/_jsx(ArtifactBlock, {
+      code: codeText,
+      lang: lang,
+      codeView: codeView
+    });
+  }
+  return codeView;
+};
 
-          // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
-          if (ARTIFACT_LANGS.has(lang)) {
-            return /*#__PURE__*/_jsx(ArtifactBlock, {
-              code: codeText,
-              lang: lang,
-              codeView: codeView
-            });
-          }
-          return codeView;
-        }
-        return /*#__PURE__*/_jsx("code", _objectSpread(_objectSpread({}, props), {}, {
-          children: children
-        }));
-      },
-      td: function td(_ref2) {
-        var children = _ref2.children,
-          props = _objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({}, props), {}, {
-          children: Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.map(function (item) {
-            if (item === "<br>") {
-              return /*#__PURE__*/_jsx("br", {});
-            }
-            return item;
-          }) : children
-        }));
-      }
-    }, extraComponents || {})
+/** Table cell that turns literal "<br>" text nodes into real line breaks. */
+var TableCell = function TableCell(props) {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  var children = props.children,
+    _node = props.node,
+    tdProps = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({}, tdProps), {}, {
+    children: Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.map(function (item, index) {
+      return item === "<br>" ? /*#__PURE__*/_jsx("br", {}, index) : item;
+    }) : children
   }));
 };
+var MarkdownViews = function MarkdownViews(props) {
+  var className = props.className,
+    copyProps = props.copyProps,
+    extraComponents = props.components;
+  return (
+    /*#__PURE__*/
+    // The components map below may be a fresh object each render; that is harmless because the
+    // renderers it points at are stable module-level types, which is what React reconciles on.
+    _jsx(CopyPropsContext.Provider, {
+      value: copyProps,
+      children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({}, props), {}, {
+        rehypePlugins: [rehypeHighlight, rehypeKatex],
+        remarkPlugins: [remarkGfm, remarkMath],
+        className: classNames(styles.MarkdownViews, className, "markdown-body"),
+        components: _objectSpread({
+          code: CodeBlock,
+          td: TableCell
+        }, extraComponents || {})
+      }))
+    })
+  );
+};
 export default MarkdownViews;

package/es/components/Markdown/Views/index.module.scss

@@ -68,6 +68,21 @@
       color: #efefef;
 
       background: #212121;
+
+      // Copy's root div (class is module-hashed, so it can only be reached as a child).
+      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // which disappears against this strip. The strip stays dark on purpose to match the
+      // atom-one-dark code body, so the button is pinned to light-on-dark rather than
+      // following the page theme.
+      > div {
+        color: rgba(255, 255, 255, 0.65);
+
+        &:hover {
+          color: #ffffff;
+
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+      }
     }
   }
 }

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;

package/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.module.scss

@@ -33,19 +33,3 @@
     }
   }
 }
-
-.Copyed {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  cursor: default;
-
-  .icon {
-    font-size: 18px;
-  }
-}

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
 export interface CopyProps {
     id: string;
-    isMessage?: true;
+    /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
+    isMessage?: boolean;
     md?: boolean;
     text?: string;
     copyIcon?: ReactNode;

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

@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--text-color);
+  color: var(--cf-text);
 
   cursor: default;
 

package/lib/components/Markdown/Views/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
 var _rehypeHighlight = _interopRequireDefault(require("rehype-highlight"));
 var _rehypeKatex = _interopRequireDefault(require("rehype-katex"));
@@ -14,12 +14,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 require("highlight.js/styles/atom-one-dark.min.css");
 require("katex/dist/katex.min.css");
-var _hsuUtils = require("hsu-utils");
 var _Copy = _interopRequireDefault(require("../../Copy"));
 var _MermaidBlock = _interopRequireDefault(require("./MermaidBlock"));
 var _ArtifactBlock = _interopRequireDefault(require("./ArtifactBlock"));
 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; }
 /** Code block languages that support Artifacts preview (modeled after Claude Artifacts) */const ARTIFACT_LANGS = new Set(["html", "svg"]);
 
 /**
@@ -35,86 +36,117 @@ const extractText = node => {
   }
   return "";
 };
+
+/**
+ * Copy button config, handed to the code renderer through context rather than a closure so the
+ * renderer can stay a module-level component (see CodeBlock).
+ */
+const CopyPropsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+/**
+ * Fenced code block: mermaid diagram, Artifacts preview, or highlighted code with a copy button.
+ *
+ * Declared at module scope on purpose. Defining it inline inside MarkdownViews would hand
+ * react-markdown a brand-new element type on every render, so React would unmount and remount
+ * every code block whenever the markdown re-renders — making the copy button flicker (and losing
+ * its "已复制！" state) on each token of streamed content.
+ */
+const CodeBlock = props => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const {
+    className,
+    children,
+    node: _node,
+    ...codeProps
+  } = props;
+  const copyProps = (0, _react.useContext)(CopyPropsContext);
+  // Stable for the lifetime of the block: regenerating the id on every render would leave the
+  // copy button's getElementById lookup pointing at a stale node. Strip ':' so the id stays
+  // usable with CSS selectors as well as getElementById.
+  const id = `md-code-${(0, _react.useId)().replace(/:/g, "")}`;
+  const lang = /language-(\w+)/.exec(className || "")?.[1]?.toLowerCase();
+  if (!lang) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+      ...codeProps,
+      children: children
+    });
+  }
+  const codeText = extractText(children);
+
+  // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
+  if (lang === "mermaid") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MermaidBlock.default, {
+      code: codeText
+    });
+  }
+  const codeView = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.code),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(_indexModule.default.nav),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copy.default, {
+        id: id,
+        md: false,
+        ...copyProps
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(_indexModule.default.content),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        id: id,
+        ...codeProps,
+        className: (0, _classnames.default)(_indexModule.default.code_content, className),
+        children: children
+      })
+    })]
+  });
+
+  // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
+  if (ARTIFACT_LANGS.has(lang)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArtifactBlock.default, {
+      code: codeText,
+      lang: lang,
+      codeView: codeView
+    });
+  }
+  return codeView;
+};
+
+/** Table cell that turns literal "<br>" text nodes into real line breaks. */
+const TableCell = props => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const {
+    children,
+    node: _node,
+    ...tdProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+    ...tdProps,
+    children: Array.isArray(children) ? children?.map((item, index) => item === "<br>" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, index) : item) : children
+  });
+};
 const MarkdownViews = props => {
   const {
     className,
     copyProps,
     components: extraComponents
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
-    ...props,
-    rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default],
-    remarkPlugins: [_remarkGfm.default, _remarkMath.default],
-    className: (0, _classnames.default)(_indexModule.default.MarkdownViews, className, "markdown-body"),
-    components: {
-      code: ({
-        className,
-        children,
-        ...props
-      }) => {
-        const match = /language-(\w+)/.exec(className || "");
-        if (match?.length) {
-          const lang = match[1].toLowerCase();
-          const codeText = extractText(children);
-
-          // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
-          if (lang === "mermaid") {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MermaidBlock.default, {
-              code: codeText
-            });
-          }
-          const id = (0, _hsuUtils.generateRandomStr)(10);
-          const codeView = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _classnames.default)(_indexModule.default.code),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(_indexModule.default.nav),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copy.default, {
-                id: id,
-                md: false,
-                ...copyProps
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(_indexModule.default.content),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-                id: id,
-                ...props,
-                className: (0, _classnames.default)(_indexModule.default.code_content, className),
-                children: children
-              })
-            })]
-          });
-
-          // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
-          if (ARTIFACT_LANGS.has(lang)) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArtifactBlock.default, {
-              code: codeText,
-              lang: lang,
-              codeView: codeView
-            });
-          }
-          return codeView;
+  return (
+    /*#__PURE__*/
+    // The components map below may be a fresh object each render; that is harmless because the
+    // renderers it points at are stable module-level types, which is what React reconciles on.
+    (0, _jsxRuntime.jsx)(CopyPropsContext.Provider, {
+      value: copyProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
+        ...props,
+        rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default],
+        remarkPlugins: [_remarkGfm.default, _remarkMath.default],
+        className: (0, _classnames.default)(_indexModule.default.MarkdownViews, className, "markdown-body"),
+        components: {
+          code: CodeBlock,
+          td: TableCell,
+          ...(extraComponents || {})
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-          ...props,
-          children: children
-        });
-      },
-      td: ({
-        children,
-        ...props
-      }) => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-          ...props,
-          children: Array.isArray(children) ? children?.map(item => {
-            if (item === "<br>") {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {});
-            }
-            return item;
-          }) : children
-        });
-      },
-      ...(extraComponents || {})
-    }
-  });
+      })
+    })
+  );
 };
 var _default = exports.default = MarkdownViews;

package/lib/components/Markdown/Views/index.module.scss

@@ -68,6 +68,21 @@
       color: #efefef;
 
       background: #212121;
+
+      // Copy's root div (class is module-hashed, so it can only be reached as a child).
+      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // which disappears against this strip. The strip stays dark on purpose to match the
+      // atom-one-dark code body, so the button is pinned to light-on-dark rather than
+      // following the page theme.
+      > div {
+        color: rgba(255, 255, 255, 0.65);
+
+        &:hover {
+          color: #ffffff;
+
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+      }
     }
   }
 }

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

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.module.scss

@@ -33,19 +33,3 @@
     }
   }
 }
-
-.Copyed {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  cursor: default;
-
-  .icon {
-    font-size: 18px;
-  }
-}

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

@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--text-color);
+  color: var(--cf-text);
 
   cursor: default;
 

package/src/components/Copy/index.tsx

@@ -8,7 +8,8 @@ import styles from "./index.module.scss";
 
 export interface CopyProps {
   id: string;
-  isMessage?: true;
+  /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
+  isMessage?: boolean;
   md?: boolean;
   text?: string;
   copyIcon?: ReactNode;

package/src/components/Markdown/Views/index.module.scss

@@ -68,6 +68,21 @@
       color: #efefef;
 
       background: #212121;
+
+      // Copy's root div (class is module-hashed, so it can only be reached as a child).
+      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // which disappears against this strip. The strip stays dark on purpose to match the
+      // atom-one-dark code body, so the button is pinned to light-on-dark rather than
+      // following the page theme.
+      > div {
+        color: rgba(255, 255, 255, 0.65);
+
+        &:hover {
+          color: #ffffff;
+
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+      }
     }
   }
 }

package/src/components/Markdown/Views/index.tsx

@@ -1,5 +1,8 @@
-import React from "react";
-import ReactMarkdown, { Options as ReactMarkdownProps } from "react-markdown";
+import React, { createContext, useContext, useId } from "react";
+import ReactMarkdown, {
+  Options as ReactMarkdownProps,
+  ExtraProps,
+} from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
@@ -8,7 +11,6 @@ import classNames from "classnames";
 import styles from "./index.module.scss";
 import "highlight.js/styles/atom-one-dark.min.css";
 import "katex/dist/katex.min.css";
-import { generateRandomStr } from "hsu-utils";
 import Copy, { CopyProps } from "../../Copy";
 import MermaidBlock from "./MermaidBlock";
 import ArtifactBlock from "./ArtifactBlock";
@@ -30,6 +32,85 @@ const extractText = (node: React.ReactNode): string => {
   return "";
 };
 
+/**
+ * Copy button config, handed to the code renderer through context rather than a closure so the
+ * renderer can stay a module-level component (see CodeBlock).
+ */
+const CopyPropsContext = createContext<Omit<CopyProps, "id"> | undefined>(
+  undefined,
+);
+
+/**
+ * Fenced code block: mermaid diagram, Artifacts preview, or highlighted code with a copy button.
+ *
+ * Declared at module scope on purpose. Defining it inline inside MarkdownViews would hand
+ * react-markdown a brand-new element type on every render, so React would unmount and remount
+ * every code block whenever the markdown re-renders — making the copy button flicker (and losing
+ * its "已复制！" state) on each token of streamed content.
+ */
+const CodeBlock: React.FC<React.ComponentProps<"code"> & ExtraProps> = (
+  props,
+) => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const { className, children, node: _node, ...codeProps } = props;
+  const copyProps = useContext(CopyPropsContext);
+  // Stable for the lifetime of the block: regenerating the id on every render would leave the
+  // copy button's getElementById lookup pointing at a stale node. Strip ':' so the id stays
+  // usable with CSS selectors as well as getElementById.
+  const id = `md-code-${useId().replace(/:/g, "")}`;
+
+  const lang = /language-(\w+)/.exec(className || "")?.[1]?.toLowerCase();
+  if (!lang) {
+    return <code {...codeProps}>{children}</code>;
+  }
+
+  const codeText = extractText(children);
+
+  // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
+  if (lang === "mermaid") {
+    return <MermaidBlock code={codeText} />;
+  }
+
+  const codeView = (
+    <div className={classNames(styles.code)}>
+      <div className={classNames(styles.nav)}>
+        <Copy id={id} md={false} {...copyProps} />
+      </div>
+      <div className={classNames(styles.content)}>
+        <code
+          id={id}
+          {...codeProps}
+          className={classNames(styles.code_content, className)}
+        >
+          {children}
+        </code>
+      </div>
+    </div>
+  );
+
+  // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
+  if (ARTIFACT_LANGS.has(lang)) {
+    return <ArtifactBlock code={codeText} lang={lang} codeView={codeView} />;
+  }
+  return codeView;
+};
+
+/** Table cell that turns literal "<br>" text nodes into real line breaks. */
+const TableCell: React.FC<React.ComponentProps<"td"> & ExtraProps> = (props) => {
+  // `node` is react-markdown's hast node — pulled out so it never reaches the DOM
+  const { children, node: _node, ...tdProps } = props;
+
+  return (
+    <td {...tdProps}>
+      {Array.isArray(children)
+        ? children?.map((item, index) =>
+            item === "<br>" ? <br key={index} /> : item,
+          )
+        : children}
+    </td>
+  );
+};
+
 export interface MarkdownViewsProps extends ReactMarkdownProps {
   copyProps?: Omit<CopyProps, "id">;
 }
@@ -38,69 +119,21 @@ const MarkdownViews: React.FC<MarkdownViewsProps> = (props) => {
   const { className, copyProps, components: extraComponents } = props;
 
   return (
-    <ReactMarkdown
-      {...props}
-      rehypePlugins={[rehypeHighlight, rehypeKatex]}
-      remarkPlugins={[remarkGfm, remarkMath]}
-      className={classNames(styles.MarkdownViews, className, "markdown-body")}
-      components={{
-        code: ({ className, children, ...props }) => {
-          const match = /language-(\w+)/.exec(className || "");
-          if (match?.length) {
-            const lang = match[1].toLowerCase();
-            const codeText = extractText(children);
-
-            // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
-            if (lang === "mermaid") {
-              return <MermaidBlock code={codeText} />;
-            }
-
-            const id = generateRandomStr(10);
-            const codeView = (
-              <div className={classNames(styles.code)}>
-                <div className={classNames(styles.nav)}>
-                  <Copy id={id} md={false} {...copyProps} />
-                </div>
-                <div className={classNames(styles.content)}>
-                  <code
-                    id={id}
-                    {...props}
-                    className={classNames(styles.code_content, className)}
-                  >
-                    {children}
-                  </code>
-                </div>
-              </div>
-            );
-
-            // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
-            if (ARTIFACT_LANGS.has(lang)) {
-              return (
-                <ArtifactBlock code={codeText} lang={lang} codeView={codeView} />
-              );
-            }
-            return codeView;
-          }
-          return <code {...props}>{children}</code>;
-        },
-        td: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              {Array.isArray(children)
-                ? children?.map((item) => {
-                    if (item === "<br>") {
-                      return <br />;
-                    }
-
-                    return item;
-                  })
-                : children}
-            </td>
-          );
-        },
-        ...(extraComponents || {}),
-      }}
-    />
+    // The components map below may be a fresh object each render; that is harmless because the
+    // renderers it points at are stable module-level types, which is what React reconciles on.
+    <CopyPropsContext.Provider value={copyProps}>
+      <ReactMarkdown
+        {...props}
+        rehypePlugins={[rehypeHighlight, rehypeKatex]}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        className={classNames(styles.MarkdownViews, className, "markdown-body")}
+        components={{
+          code: CodeBlock,
+          td: TableCell,
+          ...(extraComponents || {}),
+        }}
+      />
+    </CopyPropsContext.Provider>
   );
 };
 

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>
+    </>
   );
 };