@hsu-react/ui 2.5.0 → 2.5.1

package/es/components/Form/DrawerForm/index.js

@@ -20,6 +20,7 @@ import React, { useEffect } from "react";
 import Icon from "../../Icon";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { formItemKeys } from "../_utils/formItemKey";
 import useLabelWidth from "../../../hooks/useLabelWidth";
 import usePermissions from "../../../hooks/usePermissions";
 import { mergeSemantic } from "../../../utils/semantic";
@@ -87,13 +88,13 @@ var DrawerForm = function DrawerForm(props) {
     children: [/*#__PURE__*/_jsxs(Form, {
       form: form,
       className: styles.form,
-      children: [formItems === null || formItems === void 0 ? void 0 : formItems.map(function (item) {
+      children: [formItems === null || formItems === void 0 ? void 0 : formItems.map(function (item, idx) {
         var _item$name;
         return /*#__PURE__*/_jsx(FormItem, _objectSpread({
           requiredMsg: (_item$name = item.name) !== null && _item$name !== void 0 && _item$name.endsWith("En") ? "".concat(PlaceholderDictEn[item.type], " ").concat(item.name) : "".concat(PlaceholderDict[item.type]).concat(item.label),
           labelWidth: item.layout === "horizontal" ? labelWidth : undefined,
           className: classNames(styles.formItem, item.className)
-        }, item), item.name);
+        }, item), formItemKeys(formItems)[idx]);
       }), extraFormItems === null || extraFormItems === void 0 ? void 0 : extraFormItems.map(function (item) {
         item = _objectSpread(_objectSpread({}, item), {}, {
           key: item.props.name,

package/es/components/Form/ImportForm/index.js

@@ -22,6 +22,7 @@ import { downloadFile } from "hsu-utils";
 import { get } from "../../../request";
 import { observer } from "mobx-react-lite";
 import styles from "./index.module.scss";
+import { formItemKeys } from "../_utils/formItemKey";
 import useLabelWidth from "../../../hooks/useLabelWidth";
 import usePermissions from "../../../hooks/usePermissions";
 import Modal from "../../Modal";
@@ -101,13 +102,13 @@ var ImportForm = observer(function (props) {
   }, modalConfig), {}, {
     children: /*#__PURE__*/_jsx(Form, {
       className: "".concat(styles.form, " ").concat(formClassName !== null && formClassName !== void 0 ? formClassName : ""),
-      children: formItems === null || formItems === void 0 ? void 0 : formItems.map(function (item) {
+      children: formItems === null || formItems === void 0 ? void 0 : formItems.map(function (item, idx) {
         var _item$requiredMsg, _item$name;
         return /*#__PURE__*/_jsx(FormItem, _objectSpread({
           requiredMsg: (_item$requiredMsg = item.requiredMsg) !== null && _item$requiredMsg !== void 0 ? _item$requiredMsg : (_item$name = item.name) !== null && _item$name !== void 0 && _item$name.endsWith("En") ? "".concat(PlaceholderDictEn[item.type], " ").concat(item.name) : "".concat(PlaceholderDict[item.type]).concat(item.label),
           labelWidth: labelWidth,
           className: "".concat(formItemClassName, " ").concat(item.className)
-        }, item), item.name);
+        }, item), formItemKeys(formItems)[idx]);
       })
     })
   }));

package/es/components/Form/ModalForm/index.js

@@ -19,6 +19,7 @@ import Modal from "../../Modal";
 import FormItem, { PlaceholderDict, PlaceholderDictEn } from "../../FormItem";
 import React, { useEffect, useRef } from "react";
 import styles from "./index.module.scss";
+import { formItemKeys } from "../_utils/formItemKey";
 import usePermissions from "../../../hooks/usePermissions";
 import { useFormItems } from "./_hooks/useFormItems";
 import { mergeSemantic } from "../../../utils/semantic";
@@ -86,6 +87,10 @@ var ModalForm = function ModalForm(props) {
   };
   var adaptiveColumnNum = useAdaptiveColumnNum(formContainer, columnNum, true, 1, undefined, 1200, !!open);
   var _formItems = useFormItems(formItems, layout, adaptiveColumnNum);
+  /* `extraFormItems` 是 JSX 形态的表单项，同样可能重名（互斥字段） */
+  var extraKeys = formItemKeys(extraFormItems === null || extraFormItems === void 0 ? void 0 : extraFormItems.map(function (i) {
+    return i.props;
+  }));
   if (!permitted) {
     return null;
   }
@@ -132,6 +137,8 @@ var ModalForm = function ModalForm(props) {
         onValuesChange: onValuesChange,
         children: [(_Object$keys = Object.keys(_formItems !== null && _formItems !== void 0 ? _formItems : {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (key) {
           var _formItems$key;
+          /* key 一次算完（重名的第二条起加 `#n`），别在 map 体里每项重算 */
+          var itemKeys = formItemKeys(_formItems === null || _formItems === void 0 ? void 0 : _formItems[key]);
           return /*#__PURE__*/_jsxs("div", {
             className: "".concat(styles.formItemGroup, " ").concat(formItemGroupClassName !== null && formItemGroupClassName !== void 0 ? formItemGroupClassName : ""),
             id: key,
@@ -143,7 +150,7 @@ var ModalForm = function ModalForm(props) {
               style: {
                 paddingLeft: !key ? 0 : undefined
               },
-              children: _formItems === null || _formItems === void 0 || (_formItems$key = _formItems[key]) === null || _formItems$key === void 0 ? void 0 : _formItems$key.map(function (item) {
+              children: _formItems === null || _formItems === void 0 || (_formItems$key = _formItems[key]) === null || _formItems$key === void 0 ? void 0 : _formItems$key.map(function (item, idx) {
                 var _item$requiredMsg, _item$name;
                 return /*#__PURE__*/_jsx(FormItem, _objectSpread({
                   requiredMsg: (_item$requiredMsg = item.requiredMsg) !== null && _item$requiredMsg !== void 0 ? _item$requiredMsg : (_item$name = item.name) !== null && _item$name !== void 0 && _item$name.endsWith("En") ? "".concat(PlaceholderDictEn[item.type], " ").concat(item.name) : "".concat(PlaceholderDict[item.type]).concat(item.label),
@@ -151,14 +158,16 @@ var ModalForm = function ModalForm(props) {
                   disabled: disabled,
                   required: disabled ? false : item.required,
                   layout: formItemLayout
-                }, item), item.name);
+                }, item), itemKeys[idx]);
               })
             })]
           }, key);
-        }), extraFormItems === null || extraFormItems === void 0 ? void 0 : extraFormItems.map(function (item) {
+        }), extraFormItems === null || extraFormItems === void 0 ? void 0 : extraFormItems.map(function (item, idx) {
           var _item$props$requiredM, _item$props$name;
           item = _objectSpread(_objectSpread({}, item), {}, {
-            key: item.props.name,
+            /* 与上面那组同一套 key 规则：重名的第二条起加 `#n`，
+               按声明顺序编号（见 formItemKeys 的说明） */
+            key: extraKeys[idx],
             props: _objectSpread({
               requiredMsg: (_item$props$requiredM = item.props.requiredMsg) !== null && _item$props$requiredM !== void 0 ? _item$props$requiredM : item.props.type && ((_item$props$name = item.props.name) !== null && _item$props$name !== void 0 && _item$props$name.endsWith("En") ? "".concat(PlaceholderDictEn[item.props.type], " ").concat(item.props.name) : "".concat(PlaceholderDict[item.props.type]).concat(item.props.label)),
               className: "".concat(formItemClassName, " ").concat(item.props.className, " ").concat(styles.formItem),

package/es/components/Form/_utils/formItemKey.d.ts

@@ -0,0 +1,29 @@
+import { FormItemProps } from "../../FormItem";
+/**
+ * 表单项的 React key。
+ *
+ * 原来直接用 `item.name`，而**一个表单有两个互斥、同名的字段是合法的** ——
+ * 消费方真实写法：Bearer Token 用 `PASSWORD`、自定义请求头用 `TEXTAREA`，
+ * 两条都叫 `authValue`，靠 `visible` 互斥。`FormItemProps` 是按 `type` 判别的
+ * 联合类型，把 `type` 写成三元表达式会让 `componentProps` 退化成所有形态的
+ * 交集、编译期就通不过，所以拆成两条是**故意的**，不是写错。
+ *
+ * 于是控制台常年三条
+ * `Encountered two children with the same key, 'authValue'`。
+ * 目前行为无害（两条永远只渲染一个，另一个 return null），但 React 明说
+ * 重复 key 的行为不受支持、将来可能改。
+ *
+ * 修法是重名的第二条起加后缀，而不是改成按下标 —— 按下标会让
+ * 「条件性地从数组里删掉某一项」的表单在删除时整片重挂。
+ *
+ * ⚠️ **按声明数组编号，不能按「可见的那部分」编号。**互斥字段两条都在数组里，
+ * 只是其中一条渲染成 null。若先 `filter(visible)` 再编号，切换的瞬间剩下那条的
+ * key 会从 `authValue#1` 变成 `authValue` —— **key 一变就是重挂**，用户正在输入的
+ * 内容和焦点当场丢，比原来那条警告严重得多。数组是静态写死的，
+ * 按声明顺序编号则天然稳定，切 `visible` 不动 key。
+ *
+ * @param items 声明顺序的表单项数组（**不要预先过滤**）
+ * @returns 与入参等长、下标一一对应的 key 数组
+ */
+export declare const formItemKeys: (items?: FormItemProps[]) => string[];
+export default formItemKeys;

package/es/components/Form/_utils/formItemKey.js

@@ -0,0 +1,38 @@
+/**
+ * 表单项的 React key。
+ *
+ * 原来直接用 `item.name`，而**一个表单有两个互斥、同名的字段是合法的** ——
+ * 消费方真实写法：Bearer Token 用 `PASSWORD`、自定义请求头用 `TEXTAREA`，
+ * 两条都叫 `authValue`，靠 `visible` 互斥。`FormItemProps` 是按 `type` 判别的
+ * 联合类型，把 `type` 写成三元表达式会让 `componentProps` 退化成所有形态的
+ * 交集、编译期就通不过，所以拆成两条是**故意的**，不是写错。
+ *
+ * 于是控制台常年三条
+ * `Encountered two children with the same key, 'authValue'`。
+ * 目前行为无害（两条永远只渲染一个，另一个 return null），但 React 明说
+ * 重复 key 的行为不受支持、将来可能改。
+ *
+ * 修法是重名的第二条起加后缀，而不是改成按下标 —— 按下标会让
+ * 「条件性地从数组里删掉某一项」的表单在删除时整片重挂。
+ *
+ * ⚠️ **按声明数组编号，不能按「可见的那部分」编号。**互斥字段两条都在数组里，
+ * 只是其中一条渲染成 null。若先 `filter(visible)` 再编号，切换的瞬间剩下那条的
+ * key 会从 `authValue#1` 变成 `authValue` —— **key 一变就是重挂**，用户正在输入的
+ * 内容和焦点当场丢，比原来那条警告严重得多。数组是静态写死的，
+ * 按声明顺序编号则天然稳定，切 `visible` 不动 key。
+ *
+ * @param items 声明顺序的表单项数组（**不要预先过滤**）
+ * @returns 与入参等长、下标一一对应的 key 数组
+ */
+export var formItemKeys = function formItemKeys(items) {
+  var used = {};
+  return (items !== null && items !== void 0 ? items : []).map(function (item, idx) {
+    var _used$name;
+    // name 缺省时退回下标：没有名字的项本来就互不相同，用下标不会撞
+    var name = (item === null || item === void 0 ? void 0 : item.name) == null ? "#".concat(idx) : String(item.name);
+    var seen = (_used$name = used[name]) !== null && _used$name !== void 0 ? _used$name : 0;
+    used[name] = seen + 1;
+    return seen === 0 ? name : "".concat(name, "#").concat(seen);
+  });
+};
+export default formItemKeys;

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

@@ -12,6 +12,7 @@ import React, { createContext, useContext, useId } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
+import remarkCjkFriendly from "remark-cjk-friendly";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import classNames from "classnames";
@@ -134,8 +135,14 @@ var MarkdownViews = function MarkdownViews(props) {
     _jsx(CopyPropsContext.Provider, {
       value: copyProps,
       children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({}, props), {}, {
-        rehypePlugins: [rehypeHighlight, rehypeKatex],
-        remarkPlugins: [remarkGfm, remarkMath],
+        rehypePlugins: [rehypeHighlight, rehypeKatex]
+        /* `remarkCjkFriendly` 修的是中文里最常见的一处 markdown 失效：
+           `我得先知道**「这件事」是什么**` —— 开头那对 `**` 后面跟着 `「`
+           （标点）、前面是 `道`（非空白非标点），按 CommonMark 的 flanking 规则
+           它不是左侧定界符，于是整段**原样显示两个星号**。
+           而中文里「**「…」**」「**《…》**」这种写法极常见，模型输出里到处都是。
+           这个插件按 CJK 友好规则重判 flanking，是这条规则的通行修法。 */,
+        remarkPlugins: [remarkCjkFriendly, remarkGfm, remarkMath],
         className: classNames(styles.MarkdownViews, className, "markdown-body"),
         components: _objectSpread({
           code: CodeBlock,

package/lib/components/Form/DrawerForm/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _formItemKey = require("../_utils/formItemKey");
 var _useLabelWidth = _interopRequireDefault(require("../../../hooks/useLabelWidth"));
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _semantic = require("../../../utils/semantic");
@@ -77,12 +78,12 @@ const DrawerForm = props => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, {
       form: form,
       className: _indexModule.default.form,
-      children: [formItems?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
+      children: [formItems?.map((item, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
         requiredMsg: item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`,
         labelWidth: item.layout === "horizontal" ? labelWidth : undefined,
         className: (0, _classnames.default)(_indexModule.default.formItem, item.className),
         ...item
-      }, item.name)), extraFormItems?.map(item => {
+      }, (0, _formItemKey.formItemKeys)(formItems)[idx])), extraFormItems?.map(item => {
         item = {
           ...item,
           key: item.props.name,

package/lib/components/Form/ImportForm/index.js

@@ -13,6 +13,7 @@ var _hsuUtils = require("hsu-utils");
 var _request = require("../../../request");
 var _mobxReactLite = require("mobx-react-lite");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _formItemKey = require("../_utils/formItemKey");
 var _useLabelWidth = _interopRequireDefault(require("../../../hooks/useLabelWidth"));
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _Modal = _interopRequireDefault(require("../../Modal"));
@@ -93,12 +94,12 @@ const ImportForm = (0, _mobxReactLite.observer)(props => {
     ...modalConfig,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form, {
       className: `${_indexModule.default.form} ${formClassName ?? ""}`,
-      children: formItems?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
+      children: formItems?.map((item, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
         requiredMsg: item.requiredMsg ?? (item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`),
         labelWidth: labelWidth,
         className: `${formItemClassName} ${item.className}`,
         ...item
-      }, item.name))
+      }, (0, _formItemKey.formItemKeys)(formItems)[idx]))
     })
   });
 });

package/lib/components/Form/ModalForm/index.js

@@ -10,6 +10,7 @@ var _Modal = _interopRequireDefault(require("../../Modal"));
 var _FormItem = _interopRequireWildcard(require("../../FormItem"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _formItemKey = require("../_utils/formItemKey");
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _useFormItems = require("./_hooks/useFormItems");
 var _semantic = require("../../../utils/semantic");
@@ -73,6 +74,8 @@ const ModalForm = props => {
   };
   const adaptiveColumnNum = (0, _useAdaptiveColumnNum.useAdaptiveColumnNum)(formContainer, columnNum, true, 1, undefined, 1200, !!open);
   const _formItems = (0, _useFormItems.useFormItems)(formItems, layout, adaptiveColumnNum);
+  /* `extraFormItems` 是 JSX 形态的表单项，同样可能重名（互斥字段） */
+  const extraKeys = (0, _formItemKey.formItemKeys)(extraFormItems?.map(i => i.props));
   if (!permitted) {
     return null;
   }
@@ -107,30 +110,36 @@ const ModalForm = props => {
           "--column-num": adaptiveColumnNum
         },
         onValuesChange: onValuesChange,
-        children: [Object.keys(_formItems ?? {})?.map(key => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: `${_indexModule.default.formItemGroup} ${formItemGroupClassName ?? ""}`,
-          id: key,
-          children: [key && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `${_indexModule.default.formItemTitle} ${formItemGroupTitleClassName ?? ""}`,
-            children: key
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: _indexModule.default.formItemGroupContent,
-            style: {
-              paddingLeft: !key ? 0 : undefined
-            },
-            children: _formItems?.[key]?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
-              requiredMsg: item.requiredMsg ?? (item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`),
-              className: `${formItemClassName} ${item.className} ${_indexModule.default.formItem}`,
-              disabled: disabled,
-              required: disabled ? false : item.required,
-              layout: formItemLayout,
-              ...item
-            }, item.name))
-          })]
-        }, key)), extraFormItems?.map(item => {
+        children: [Object.keys(_formItems ?? {})?.map(key => {
+          /* key 一次算完（重名的第二条起加 `#n`），别在 map 体里每项重算 */
+          const itemKeys = (0, _formItemKey.formItemKeys)(_formItems?.[key]);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${_indexModule.default.formItemGroup} ${formItemGroupClassName ?? ""}`,
+            id: key,
+            children: [key && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${_indexModule.default.formItemTitle} ${formItemGroupTitleClassName ?? ""}`,
+              children: key
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _indexModule.default.formItemGroupContent,
+              style: {
+                paddingLeft: !key ? 0 : undefined
+              },
+              children: _formItems?.[key]?.map((item, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
+                requiredMsg: item.requiredMsg ?? (item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`),
+                className: `${formItemClassName} ${item.className} ${_indexModule.default.formItem}`,
+                disabled: disabled,
+                required: disabled ? false : item.required,
+                layout: formItemLayout,
+                ...item
+              }, itemKeys[idx]))
+            })]
+          }, key);
+        }), extraFormItems?.map((item, idx) => {
           item = {
             ...item,
-            key: item.props.name,
+            /* 与上面那组同一套 key 规则：重名的第二条起加 `#n`，
+               按声明顺序编号（见 formItemKeys 的说明） */
+            key: extraKeys[idx],
             props: {
               requiredMsg: item.props.requiredMsg ?? (item.props.type && (item.props.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.props.type]} ${item.props.name}` : `${_FormItem.PlaceholderDict[item.props.type]}${item.props.label}`)),
               className: `${formItemClassName} ${item.props.className} ${_indexModule.default.formItem}`,

package/lib/components/Form/_utils/formItemKey.d.ts

@@ -0,0 +1,29 @@
+import { FormItemProps } from "../../FormItem";
+/**
+ * 表单项的 React key。
+ *
+ * 原来直接用 `item.name`，而**一个表单有两个互斥、同名的字段是合法的** ——
+ * 消费方真实写法：Bearer Token 用 `PASSWORD`、自定义请求头用 `TEXTAREA`，
+ * 两条都叫 `authValue`，靠 `visible` 互斥。`FormItemProps` 是按 `type` 判别的
+ * 联合类型，把 `type` 写成三元表达式会让 `componentProps` 退化成所有形态的
+ * 交集、编译期就通不过，所以拆成两条是**故意的**，不是写错。
+ *
+ * 于是控制台常年三条
+ * `Encountered two children with the same key, 'authValue'`。
+ * 目前行为无害（两条永远只渲染一个，另一个 return null），但 React 明说
+ * 重复 key 的行为不受支持、将来可能改。
+ *
+ * 修法是重名的第二条起加后缀，而不是改成按下标 —— 按下标会让
+ * 「条件性地从数组里删掉某一项」的表单在删除时整片重挂。
+ *
+ * ⚠️ **按声明数组编号，不能按「可见的那部分」编号。**互斥字段两条都在数组里，
+ * 只是其中一条渲染成 null。若先 `filter(visible)` 再编号，切换的瞬间剩下那条的
+ * key 会从 `authValue#1` 变成 `authValue` —— **key 一变就是重挂**，用户正在输入的
+ * 内容和焦点当场丢，比原来那条警告严重得多。数组是静态写死的，
+ * 按声明顺序编号则天然稳定，切 `visible` 不动 key。
+ *
+ * @param items 声明顺序的表单项数组（**不要预先过滤**）
+ * @returns 与入参等长、下标一一对应的 key 数组
+ */
+export declare const formItemKeys: (items?: FormItemProps[]) => string[];
+export default formItemKeys;

package/lib/components/Form/_utils/formItemKey.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formItemKeys = exports.default = void 0;
+/**
+ * 表单项的 React key。
+ *
+ * 原来直接用 `item.name`，而**一个表单有两个互斥、同名的字段是合法的** ——
+ * 消费方真实写法：Bearer Token 用 `PASSWORD`、自定义请求头用 `TEXTAREA`，
+ * 两条都叫 `authValue`，靠 `visible` 互斥。`FormItemProps` 是按 `type` 判别的
+ * 联合类型，把 `type` 写成三元表达式会让 `componentProps` 退化成所有形态的
+ * 交集、编译期就通不过，所以拆成两条是**故意的**，不是写错。
+ *
+ * 于是控制台常年三条
+ * `Encountered two children with the same key, 'authValue'`。
+ * 目前行为无害（两条永远只渲染一个，另一个 return null），但 React 明说
+ * 重复 key 的行为不受支持、将来可能改。
+ *
+ * 修法是重名的第二条起加后缀，而不是改成按下标 —— 按下标会让
+ * 「条件性地从数组里删掉某一项」的表单在删除时整片重挂。
+ *
+ * ⚠️ **按声明数组编号，不能按「可见的那部分」编号。**互斥字段两条都在数组里，
+ * 只是其中一条渲染成 null。若先 `filter(visible)` 再编号，切换的瞬间剩下那条的
+ * key 会从 `authValue#1` 变成 `authValue` —— **key 一变就是重挂**，用户正在输入的
+ * 内容和焦点当场丢，比原来那条警告严重得多。数组是静态写死的，
+ * 按声明顺序编号则天然稳定，切 `visible` 不动 key。
+ *
+ * @param items 声明顺序的表单项数组（**不要预先过滤**）
+ * @returns 与入参等长、下标一一对应的 key 数组
+ */
+const formItemKeys = items => {
+  const used = {};
+  return (items ?? []).map((item, idx) => {
+    // name 缺省时退回下标：没有名字的项本来就互不相同，用下标不会撞
+    const name = item?.name == null ? `#${idx}` : String(item.name);
+    const seen = used[name] ?? 0;
+    used[name] = seen + 1;
+    return seen === 0 ? name : `${name}#${seen}`;
+  });
+};
+exports.formItemKeys = formItemKeys;
+var _default = exports.default = formItemKeys;

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
 var _rehypeHighlight = _interopRequireDefault(require("rehype-highlight"));
 var _rehypeKatex = _interopRequireDefault(require("rehype-katex"));
+var _remarkCjkFriendly = _interopRequireDefault(require("remark-cjk-friendly"));
 var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
 var _remarkMath = _interopRequireDefault(require("remark-math"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -137,8 +138,14 @@ const MarkdownViews = props => {
       value: copyProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
         ...props,
-        rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default],
-        remarkPlugins: [_remarkGfm.default, _remarkMath.default],
+        rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default]
+        /* `remarkCjkFriendly` 修的是中文里最常见的一处 markdown 失效：
+           `我得先知道**「这件事」是什么**` —— 开头那对 `**` 后面跟着 `「`
+           （标点）、前面是 `道`（非空白非标点），按 CommonMark 的 flanking 规则
+           它不是左侧定界符，于是整段**原样显示两个星号**。
+           而中文里「**「…」**」「**《…》**」这种写法极常见，模型输出里到处都是。
+           这个插件按 CJK 友好规则重判 flanking，是这条规则的通行修法。 */,
+        remarkPlugins: [_remarkCjkFriendly.default, _remarkGfm.default, _remarkMath.default],
         className: (0, _classnames.default)(_indexModule.default.MarkdownViews, className, "markdown-body"),
         components: {
           code: CodeBlock,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -93,6 +93,7 @@
     "react-markdown-editor-lite": "^1.3.4",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
+    "remark-cjk-friendly": "2.3.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "turndown": "^7.2.0",

package/src/components/Form/DrawerForm/index.tsx

@@ -11,6 +11,7 @@ import Icon from "../../Icon";
 import { ItemContainerProps } from "../../FormItem/ItemContainer";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { formItemKeys } from "../_utils/formItemKey";
 import useLabelWidth from "../../../hooks/useLabelWidth";
 import usePermissions from "../../../hooks/usePermissions";
 import { mergeSemantic } from "../../../utils/semantic";
@@ -89,9 +90,9 @@ const DrawerForm: React.FC<DrawerFormProps> = (props) => {
       {...drawerConfig}
     >
       <Form form={form} className={styles.form}>
-        {formItems?.map((item) => (
+        {formItems?.map((item, idx) => (
           <FormItem
-            key={item.name}
+            key={formItemKeys(formItems)[idx]}
             requiredMsg={
               (item.name as string)?.endsWith("En")
                 ? `${PlaceholderDictEn[item.type]} ${item.name}`

package/src/components/Form/ImportForm/index.tsx

@@ -13,6 +13,7 @@ import { downloadFile } from "hsu-utils";
 import { get } from "../../../request";
 import { observer } from "mobx-react-lite";
 import styles from "./index.module.scss";
+import { formItemKeys } from "../_utils/formItemKey";
 import useLabelWidth from "../../../hooks/useLabelWidth";
 import usePermissions from "../../../hooks/usePermissions";
 import Modal, { ModalProps } from "../../Modal";
@@ -106,9 +107,9 @@ const ImportForm: React.FC<ImportFormProps> = observer((props) => {
       {...modalConfig}
     >
       <Form className={`${styles.form} ${formClassName ?? ""}`}>
-        {formItems?.map((item) => (
+        {formItems?.map((item, idx) => (
           <FormItem
-            key={item.name}
+            key={formItemKeys(formItems)[idx]}
             requiredMsg={
               item.requiredMsg ??
               ((item.name as string)?.endsWith("En")

package/src/components/Form/ModalForm/index.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useRef } from "react";
 
 import { ItemContainerProps } from "../../FormItem/ItemContainer";
 import styles from "./index.module.scss";
+import { formItemKeys } from "../_utils/formItemKey";
 import usePermissions from "../../../hooks/usePermissions";
 import { useFormItems } from "./_hooks/useFormItems";
 import type { FormRef } from "../../../types/antd";
@@ -110,6 +111,10 @@ const ModalForm: React.FC<ModalFormProps> = (props) => {
   );
 
   const _formItems = useFormItems(formItems, layout, adaptiveColumnNum);
+  /* `extraFormItems` 是 JSX 形态的表单项，同样可能重名（互斥字段） */
+  const extraKeys = formItemKeys(
+    extraFormItems?.map((i) => i.props as FormItemProps),
+  );
 
   if (!permitted) {
     return null;
@@ -147,7 +152,11 @@ const ModalForm: React.FC<ModalFormProps> = (props) => {
           style={{ "--column-num": adaptiveColumnNum } as React.CSSProperties}
           onValuesChange={onValuesChange}
         >
-          {Object.keys(_formItems ?? {})?.map((key) => (
+          {Object.keys(_formItems ?? {})?.map((key) => {
+            /* key 一次算完（重名的第二条起加 `#n`），别在 map 体里每项重算 */
+            const itemKeys = formItemKeys(_formItems?.[key]);
+
+            return (
             <div
               className={`${styles.formItemGroup} ${
                 formItemGroupClassName ?? ""
@@ -168,9 +177,9 @@ const ModalForm: React.FC<ModalFormProps> = (props) => {
                 className={styles.formItemGroupContent}
                 style={{ paddingLeft: !key ? 0 : undefined }}
               >
-                {_formItems?.[key]?.map((item) => (
+                {_formItems?.[key]?.map((item, idx) => (
                   <FormItem
-                    key={item.name}
+                    key={itemKeys[idx]}
                     requiredMsg={
                       item.requiredMsg ??
                       ((item.name as string)?.endsWith("En")
@@ -186,11 +195,14 @@ const ModalForm: React.FC<ModalFormProps> = (props) => {
                 ))}
               </div>
             </div>
-          ))}
-          {extraFormItems?.map((item) => {
+            );
+          })}
+          {extraFormItems?.map((item, idx) => {
             item = {
               ...item,
-              key: item.props.name,
+              /* 与上面那组同一套 key 规则：重名的第二条起加 `#n`，
+                 按声明顺序编号（见 formItemKeys 的说明） */
+              key: extraKeys[idx],
               props: {
                 requiredMsg:
                   item.props.requiredMsg ??

package/src/components/Form/_utils/formItemKey.ts

@@ -0,0 +1,42 @@
+import { FormItemProps } from "../../FormItem";
+
+/**
+ * 表单项的 React key。
+ *
+ * 原来直接用 `item.name`，而**一个表单有两个互斥、同名的字段是合法的** ——
+ * 消费方真实写法：Bearer Token 用 `PASSWORD`、自定义请求头用 `TEXTAREA`，
+ * 两条都叫 `authValue`，靠 `visible` 互斥。`FormItemProps` 是按 `type` 判别的
+ * 联合类型，把 `type` 写成三元表达式会让 `componentProps` 退化成所有形态的
+ * 交集、编译期就通不过，所以拆成两条是**故意的**，不是写错。
+ *
+ * 于是控制台常年三条
+ * `Encountered two children with the same key, 'authValue'`。
+ * 目前行为无害（两条永远只渲染一个，另一个 return null），但 React 明说
+ * 重复 key 的行为不受支持、将来可能改。
+ *
+ * 修法是重名的第二条起加后缀，而不是改成按下标 —— 按下标会让
+ * 「条件性地从数组里删掉某一项」的表单在删除时整片重挂。
+ *
+ * ⚠️ **按声明数组编号，不能按「可见的那部分」编号。**互斥字段两条都在数组里，
+ * 只是其中一条渲染成 null。若先 `filter(visible)` 再编号，切换的瞬间剩下那条的
+ * key 会从 `authValue#1` 变成 `authValue` —— **key 一变就是重挂**，用户正在输入的
+ * 内容和焦点当场丢，比原来那条警告严重得多。数组是静态写死的，
+ * 按声明顺序编号则天然稳定，切 `visible` 不动 key。
+ *
+ * @param items 声明顺序的表单项数组（**不要预先过滤**）
+ * @returns 与入参等长、下标一一对应的 key 数组
+ */
+export const formItemKeys = (items?: FormItemProps[]): string[] => {
+  const used: Record<string, number> = {};
+
+  return (items ?? []).map((item, idx) => {
+    // name 缺省时退回下标：没有名字的项本来就互不相同，用下标不会撞
+    const name = item?.name == null ? `#${idx}` : String(item.name);
+    const seen = used[name] ?? 0;
+    used[name] = seen + 1;
+
+    return seen === 0 ? name : `${name}#${seen}`;
+  });
+};
+
+export default formItemKeys;

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

@@ -5,6 +5,7 @@ import ReactMarkdown, {
 } from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
+import remarkCjkFriendly from "remark-cjk-friendly";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import classNames from "classnames";
@@ -125,7 +126,13 @@ const MarkdownViews: React.FC<MarkdownViewsProps> = (props) => {
       <ReactMarkdown
         {...props}
         rehypePlugins={[rehypeHighlight, rehypeKatex]}
-        remarkPlugins={[remarkGfm, remarkMath]}
+        /* `remarkCjkFriendly` 修的是中文里最常见的一处 markdown 失效：
+           `我得先知道**「这件事」是什么**` —— 开头那对 `**` 后面跟着 `「`
+           （标点）、前面是 `道`（非空白非标点），按 CommonMark 的 flanking 规则
+           它不是左侧定界符，于是整段**原样显示两个星号**。
+           而中文里「**「…」**」「**《…》**」这种写法极常见，模型输出里到处都是。
+           这个插件按 CJK 友好规则重判 flanking，是这条规则的通行修法。 */
+        remarkPlugins={[remarkCjkFriendly, remarkGfm, remarkMath]}
         className={classNames(styles.MarkdownViews, className, "markdown-body")}
         components={{
           code: CodeBlock,