@para-ui/core 5.0.0-beta.8 → 5.0.0

package/lib/DynamicMultiBox/component.json

@@ -0,0 +1,278 @@
+{
+    "name": "DynamicMultiBox",
+    "category": "Data Entry",
+    "description": "动态多行表单,支持动态增删行 + 拖拽排序 + 字段级错误反馈。**封装协议:外部以业务对象数组传入,内部维护 valueList + errors 双 state(必须双 state,见 commonPatterns.wrapperPattern)**",
+    "semantic": {
+        "intent": [
+            "动态表单",
+            "多行录入",
+            "支持拖拽 + 行级错误反馈"
+        ],
+        "useCases": [
+            "批量参数 / 联系人录入",
+            "规则配置(条件 → 动作)",
+            "可排序步骤配置(工作流)",
+            "动态字段表单(字段配置由父组件传入)"
+        ],
+        "riskLevel": "normal"
+    },
+    "r23FailingScenarios": {
+        "scenario_003_TS2538_undefined_index": {
+            "failedRequirement": "DynamicMultiBox-003 可拖拽排序的步骤配置",
+            "wrongCode": "const errRow: IErrors = { id: s.id };\nfieldConfig.forEach((cfg: IConfig) => {\n    errRow[cfg.name] = '';  // ❌ TS2538 'Type undefined cannot be used as an index type'\n});",
+            "rootCause": "**IConfig.name 在 v5.x 类型严格化后是 `string | undefined`**(非必填字段)。直接用 cfg.name 做对象索引时 TS 拒绝(undefined 不能作为索引)",
+            "fixedCode": "const errRow: IErrors = { id: s.id };\nfieldConfig.forEach((cfg: IConfig) => {\n    if (cfg.name) errRow[cfg.name] = '';  // ✅ narrow 后再索引\n});",
+            "alternativeFix": "// 或用 ! 非空断言(已知 config 项必有 name):\nfieldConfig.forEach((cfg: IConfig) => {\n    errRow[cfg.name!] = '';\n});"
+        },
+        "scenario_006_TS2352_rest_spread_unknown": {
+            "failedRequirement": "DynamicMultiBox-006 标准联系人录入",
+            "wrongCode": "interface Contact { name: string; phone: string; email: string; }\nconst valueListToContacts = (valueList: IValueList[]): Contact[] =>\n    valueList.map(({ id, ...rest }) => rest as Contact);  // ❌ TS2352",
+            "rootCause": "对 IValueList 做 `{id, ...rest}` 解构后,TS 把 rest 推断为 `{[x: string]: unknown}`(索引签名)。**unknown 索引签名 → 具体业务类型** 直接 `as Contact` 被 TS 5.x 拒绝(类型不充分重叠)",
+            "fixedCode": "const valueListToContacts = (valueList: IValueList[]): Contact[] =>\n    valueList.map(({ id, ...rest }) => rest as unknown as Contact);  // ✅ unknown 中转",
+            "alternativeFix": "// 或显式字段映射(更类型安全):\nconst valueListToContacts = (valueList: IValueList[]): Contact[] =>\n    valueList.map(({ name, phone, email }) => ({ name, phone, email } as Contact));"
+        }
+    },
+    "titleModeBehavior": {
+        "all": "**默认值**。每列在表格顶部独立显示 IConfig.label —— '第一数据行上方有列标题'就是 all。典型表格效果",
+        "none": "完全隐藏所有标题。所有列单元格直接从表顶开始,无任何 label",
+        "single": "**整张表只有 1 个合并标题行**(跨所有列居中显示 singleTitle.label),不是'只在第一行显示列标题'。配合 singleTitle prop = `{ label: ReactNode, required: boolean }` 配置文案。**误解警告**:需求描述'只在第一行显示标题'通常想要的是 all(每列独立标题),不是 single(整表 1 个合并标题)",
+        "domStructure": "// all:\n//   <thead>列1 label | 列2 label | 列3 label</thead>\n//   <tbody>行 1 数据 | 行 2 数据 | ...</tbody>\n//\n// single:\n//   <thead>singleTitle.label (跨列居中)</thead>\n//   <tbody>行 1 数据 | 行 2 数据 | ...</tbody>\n//\n// none:\n//   <tbody>行 1 数据 | 行 2 数据 | ...</tbody>(无 thead)"
+    },
+    "variants": {
+        "default": {
+            "meaning": "默认样式"
+        }
+    },
+    "states": [
+        "default",
+        "error"
+    ],
+    "idealProps": {
+        "config": {
+            "type": "IConfig[]",
+            "description": "每列配置数组:[{ name, label, inputType, isFixed, required, list?, customRender? }];**name 必须等于 valueList[*][name] —— 否则该列读不到值**。注意 IConfig.name 类型签名是 `string | undefined`(R23 003 fail 根因 —— 见 r23FailingScenarios)。**inputType 是 IInputType 严格 union(必须 PascalCase · 不是 HTML lowercase)**:`'TextField' | 'Select' | 'Switch' | 'InputNumber' | 'InputLang' | 'ComboSelect' | 'DatePicker' | 'custom'`。⚠️ **不要写 inputType: 'text' / 'date' / 'select'(HTML 风格 · TS 编译报错 · runtime 不渲染)**。完整 schema 签名见 `dist/es/DynamicMultiBox/interface.d.ts`(发布产物)",
+            "required": true
+        },
+        "valueList": {
+            "type": "IValueList[]",
+            "description": "受控值集合 [{ id: string, [name]: any }];初始 id 由调用方维护;点击新增时组件 UUID 自动生成新行 id 并通过 onAdd 回填",
+            "required": true
+        },
+        "errors": {
+            "type": "IErrors[]",
+            "description": "每行错误集合,结构同 valueList,**按 id 一一对应**;无错误字段留空字符串占位。**调用方必须维护 errors state**,在 onAdd/onDelete 回调里用第二参数同步(见 wrapperPattern)"
+        },
+        "onChange": {
+            "type": "(valueList, currentItem) => void",
+            "description": "单元格值变化回调(不在新增/删除/拖拽时触发);currentItem 含 id/name/value/rowIndex 用于行内校验"
+        },
+        "onAdd": {
+            "type": "(valueList, errors) => void",
+            "description": "点击新增按钮触发;valueList 已含新行(id 由组件生成);**回调第二参数已是同步后的新 errors(含新行空占位),不要忽略**"
+        },
+        "onDelete": {
+            "type": "(valueList, errors) => void",
+            "description": "点击删除按钮触发;valueList 已剔除该行;errors 同步剔除对应行"
+        },
+        "titleMode": {
+            "type": "enum",
+            "values": [
+                "none",
+                "single",
+                "all"
+            ],
+            "default": "all",
+            "description": "见 titleModeBehavior:all=每列独立 label(常见表格效果);none=隐藏所有标题;**single=整表 1 个合并标题**(不是'只在第一行显示列标题',此处常被误解)"
+        },
+        "singleTitle": {
+            "type": "{ label: ReactNode, required: boolean }",
+            "description": "titleMode='single' 时的合并标题配置(必须传)"
+        },
+        "isSort": {
+            "type": "boolean",
+            "default": false,
+            "description": "true 启用拖拽排序;需配合 onSort 接收新顺序;拖拽时不触发 onChange"
+        },
+        "onSort": {
+            "type": "(newValueList, swapIds) => void",
+            "description": "排序回调;swapIds 是位置变动行的下标集合,非 [from,to] 对"
+        },
+        "initValue": {
+            "type": "Record<string, any>",
+            "description": "新增行字段默认值(不含 id)"
+        },
+        "isFilter": {
+            "type": "boolean",
+            "default": false,
+            "description": "true 启用列筛选下拉(用户可在 UI 中切换显示哪些列)"
+        },
+        "checkedValue": {
+            "type": "string[]",
+            "description": "配合 isFilter=true 使用 —— 当前筛选下拉中'已勾选展示'的列 key 数组。`isFilter=false`(默认)时无需传"
+        },
+        "filterConfig": {
+            "type": "IConfig[]",
+            "description": "筛选下拉中可勾选的可选列(结构同 IConfig),配合 isFilter=true + checkedValue 使用"
+        }
+    },
+    "commonMisconceptions": {
+        "M1": {
+            "wrong": "对 IConfig.name 直接做对象索引: `errRow[cfg.name] = ''`",
+            "result": "**TS2538 'Type undefined cannot be used as an index type'** —— IConfig.name 类型 `string | undefined`(R23 DynamicMultiBox-003 fail 根因)",
+            "fix": "narrow 后再索引: `if (cfg.name) errRow[cfg.name] = ''` 或 `errRow[cfg.name!] = ''`(非空断言)"
+        },
+        "M2": {
+            "wrong": "用 `{id, ...rest} = item; rest as Contact` 把 IValueList 转业务类型",
+            "result": "**TS2352 'Conversion may be a mistake because neither type sufficiently overlaps'** —— rest 是 unknown 索引签名,直接 as 业务类型被 TS 5.x 拒绝(R23 DynamicMultiBox-006 fail 根因)",
+            "fix": "用 `as unknown as Contact` 中转,或显式字段映射 `({ name, phone, email })`"
+        },
+        "M3": {
+            "wrong": "onAdd / onDelete 只接受单参数 valueList: `onAdd={(valueList) => setValueList(valueList)}`",
+            "result": "**errors state 与 valueList 不同步** —— 新行没有对应 errors 占位,该行渲染时查 errors 失败显示异常",
+            "fix": "双参数 + 双 setState: `onAdd={(valueList, errors) => { setValueList(valueList); setErrors(errors); }}`"
+        },
+        "M4": {
+            "wrong": "把 titleMode='single' 当成'只在第一行显示列标题',期望第 1 行上方有列标题、其余行无",
+            "result": "**single 实际是'整表 1 个合并标题'**(跨所有列居中),不是按行/列粒度的控制",
+            "fix": "需要'每列独立标题'(常见表格):用默认的 titleMode='all'(或不传)。需要'整表 1 合并标题':用 single + singleTitle prop"
+        },
+        "M5": {
+            "wrong": "在 fieldConfig 变化时不重置 errors state,继续用旧 errors",
+            "result": "字段集合变化后,errors 旧 key 残留,新 key 缺占位 → 渲染异常",
+            "fix": "用 useMemo 或 useEffect 监听 fieldConfig 变化,重新调用 buildEmptyErrors(valueList, fieldConfig) 重建 errors"
+        }
+    },
+    "do": [
+        "封装包装组件时,valueList + errors 都必须维护 state(双 state 联动 — 见 commonPatterns.wrapperPattern)",
+        "**onAdd / onDelete 必须接受双参数**(valueList, errors)并同时 setValueList + setErrors(M3)",
+        "**初始化 errors** 时用 narrow 写法: `if (cfg.name) errRow[cfg.name] = ''`(M1,R23 003 fail 修复)",
+        "**业务类型转换** rest 解构后用 `as unknown as Contact` 中转(M2,R23 006 fail 修复)",
+        "fieldConfig 动态变化时:重新计算 errors,避免 key 不对齐(M5)",
+        "需要每列独立标题用 titleMode='all',需要整表合并 1 个标题用 'single' + singleTitle(M4)"
+    ],
+    "dont": [
+        "行数过多时不分页",
+        "每行字段过多导致布局拥挤",
+        "**onAdd / onDelete 只接受 valueList 一个参数**(M3,errors 不同步)",
+        "**直接 `errRow[cfg.name] = ''` 不做 narrow**(M1,TS2538)",
+        "**`valueList.map(({ id, ...rest }) => rest as Contact)`** 缺 unknown 中转(M2,TS2352)",
+        "**把 titleMode='single' 当作'只第一行有标题'**(M4)"
+    ],
+    "commonPatterns": {
+        "wrapperPattern": {
+            "scenario": "封装 DynamicMultiBox 为业务组件(如 SortableStepsForm / ContactsEntryForm),外部以业务对象数组传入,内部维护 valueList + errors 双 state",
+            "code": "import React, { FC, useState, useMemo } from 'react';\nimport DynamicMultiBox from '@para-ui/core/DynamicMultiBox';\nimport type { IConfig, IErrors, IValueList } from '@para-ui/core/DynamicMultiBox/interface';\n\ninterface SortableStepsFormProps {\n    fieldConfig: IConfig[];\n    steps: Array<Record<string, any>>;\n    onStepsChange: (next: Array<Record<string, any>>) => void;\n}\n\n// 工具:把 fieldConfig 转为 errors 空占位行(M1 narrow 修法)\nconst buildEmptyErrors = (valueList: IValueList[], fieldConfig: IConfig[]): IErrors[] =>\n    valueList.map(row => {\n        const errRow: IErrors = { id: row.id };\n        fieldConfig.forEach(cfg => {\n            if (cfg.name) errRow[cfg.name] = '';  // ⚠️ narrow:cfg.name 是 string | undefined\n        });\n        return errRow;\n    });\n\nconst SortableStepsForm: FC<SortableStepsFormProps> = ({ fieldConfig, steps, onStepsChange }) => {\n    const [valueList, setValueList] = useState<IValueList[]>(steps as IValueList[]);\n    const [errors, setErrors] = useState<IErrors[]>(\n        () => buildEmptyErrors(steps as IValueList[], fieldConfig)\n    );\n\n    return (\n        <DynamicMultiBox\n            config={fieldConfig}\n            valueList={valueList}\n            errors={errors}\n            isSort\n            onChange={(next) => { setValueList(next); onStepsChange(next); }}\n            onAdd={(next, nextErrors) => {       // ✅ 必须接受双参数\n                setValueList(next);\n                setErrors(nextErrors);            // ✅ errors 同步\n                onStepsChange(next);\n            }}\n            onDelete={(next, nextErrors) => {     // ✅ 必须接受双参数\n                setValueList(next);\n                setErrors(nextErrors);\n                onStepsChange(next);\n            }}\n            onSort={(newList) => { setValueList(newList); onStepsChange(newList); }}\n        />\n    );\n};\n"
+        },
+        "businessTypeMappingPattern": {
+            "scenario": "外部以业务 Contact[] 类型受控,IValueList[] 与 Contact[] 双向映射(R23 DynamicMultiBox-006 fail 修复版本)",
+            "code": "interface Contact { name: string; phone: string; email: string; }\n\n// IN: Contact[] → IValueList[](补 id)\nconst contactsToValueList = (contacts: Contact[]): IValueList[] =>\n    contacts.map((c, i) => ({ id: String(i + 1), ...c }));\n\n// OUT: IValueList[] → Contact[](剔除 id,业务类型转换)\n// ⚠️ 关键:rest 解构后 TS 推断为 { [x: string]: unknown },要 as unknown 中转\nconst valueListToContacts = (valueList: IValueList[]): Contact[] =>\n    valueList.map(({ id, ...rest }) => rest as unknown as Contact);\n\n// 替代:显式字段映射(更类型安全,IDE 跳转友好)\nconst valueListToContactsExplicit = (valueList: IValueList[]): Contact[] =>\n    valueList.map(({ name, phone, email }) => ({ name, phone, email } as Contact));\n"
+        }
+    },
+    "events": {
+        "onChange": {
+            "signature": "(valueList: IValueList<T>[], currentItem?: ICurrentItem<T>) => void",
+            "asyncSupported": false,
+            "examples": [
+                "同步整表值：onChange={(list) => setValueList(list)}",
+                "利用 currentItem 做行内校验：onChange={(list, cur) => { setValueList(list); validateRow(cur.rowIndex, cur.name, cur.value); }}",
+                "currentItem 包含 { name, value, rowIndex, id }——可精确定位是哪行哪字段发生了变化"
+            ],
+            "commonMistakes": [
+                "在 onChange 里同时 setErrors——onChange 只在单元格值变化时触发，不涉及 errors；errors 同步在 onAdd/onDelete 完成",
+                "假设 onChange 在新增/删除/拖拽时也触发——这三种操作分别走 onAdd/onDelete/onSort 回调",
+                "onChange 第二参数 currentItem 的 name 是 keyof T & string——与 IConfig.name 类型一致，可直接做对象索引"
+            ]
+        },
+        "onAdd": {
+            "signature": "(valueList: IValueList<T>[], errors: IErrors<T>[]) => void",
+            "asyncSupported": false,
+            "examples": [
+                "双 state 同步（必须）：onAdd={(list, errs) => { setValueList(list); setErrors(errs); }}",
+                "同时通知父组件：onAdd={(list, errs) => { setValueList(list); setErrors(errs); onStepsChange(list); }}"
+            ],
+            "commonMistakes": [
+                "只接受一个参数 valueList，忽略 errors——errors 不同步导致新行渲染异常（TS 签名有第二参数）",
+                "在 onAdd 里手动构造 errors 新行——组件已帮你构造好新行空占位 errors，直接 setErrors(errs) 即可",
+                "期望 onAdd 触发后 valueList 还是旧数据加上新行——onAdd 第一参数已是含新行的新数组"
+            ]
+        },
+        "onDelete": {
+            "signature": "(valueList: IValueList<T>[], errors: IErrors<T>[]) => void",
+            "asyncSupported": false,
+            "examples": [
+                "双 state 同步：onDelete={(list, errs) => { setValueList(list); setErrors(errs); }}",
+                "配合业务通知：onDelete={(list, errs) => { setValueList(list); setErrors(errs); onStepsChange(list); }}"
+            ],
+            "commonMistakes": [
+                "只接受 valueList 忽略 errors 第二参数——errors 不同步，行对应关系错位（id 对不上）",
+                "期望 keepLastItem=true 时最后一行也能删——keepLastItem=true（默认）时只剩 1 行时删除图标隐藏，onDelete 不触发"
+            ]
+        },
+        "onSort": {
+            "signature": "(newValueList: IValueList<T>[], swapIds?: number[]) => void",
+            "asyncSupported": false,
+            "examples": [
+                "同步排序后的顺序：onSort={(newList) => setValueList(newList)}",
+                "swapIds 是位置变动行的下标集合，不是 [from, to] 对：onSort={(newList, swapIds) => console.log(swapIds)}"
+            ],
+            "commonMistakes": [
+                "把 swapIds 当作 [fromIndex, toIndex] 对使用——实际是所有位置变动行的下标集合",
+                "onSort 里同时重建 errors——拖拽排序不改变行数，errors 的行数不变；只需按 newList 顺序重排 errors（用 rowKey 映射）",
+                "期望 isSort=true 自动维护排序——isSort 只开启 UI 拖拽，newList 必须通过 onSort 回调同步到父组件 state"
+            ]
+        },
+        "onFilter": {
+            "signature": "(data: IFilterParams<T>) => void",
+            "asyncSupported": false,
+            "examples": [
+                "监听筛选变化：onFilter={(data) => console.log(data.checkedVal, data.valueList)}",
+                "data 包含 { name, checkedVal, valueList, errors }——列筛选变化时的完整快照"
+            ],
+            "commonMistakes": [
+                "期望 isFilter=false 时 onFilter 也触发——isFilter 必须为 true 才显示筛选 UI",
+                "假设 onFilter 替代 onChange——onFilter 只在列筛选器操作时触发，单元格值变化走 onChange"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "IConfig.name 类型是 keyof T & string（可能含 undefined），直接用作对象索引报 TS2538",
+            "wrong": "const errRow: IErrors = { id: s.id };\nfieldConfig.forEach((cfg: IConfig) => {\n    errRow[cfg.name] = '';  // TS2538: 'undefined' cannot be used as an index type\n});",
+            "right": "fieldConfig.forEach((cfg: IConfig) => {\n    if (cfg.name) errRow[cfg.name] = '';  // narrow 后再索引\n    // 或：errRow[cfg.name!] = '';  // 非空断言（已知 name 必有值时）\n});"
+        },
+        {
+            "issue": "IValueList 解构后 rest 是 unknown 索引签名，直接 as 具体类型被 TS 5.x 拒绝",
+            "wrong": "const toContact = (item: IValueList): Contact =>\n    (({ id, ...rest }) => rest as Contact)(item);  // TS2352: not sufficiently overlapping",
+            "right": "const toContact = (item: IValueList): Contact =>\n    (({ id, ...rest }) => rest as unknown as Contact)(item);  // 先转 unknown 再转目标类型"
+        },
+        {
+            "issue": "IConfig.inputType 只接受 PascalCase 严格枚举，不接受 HTML 小写风格",
+            "wrong": "{ inputType: 'text' }  // 或 'date'、'select'——TS 报错，runtime 不渲染",
+            "right": "{ inputType: 'TextField' }  // 或 'Select'、'DatePicker'、'Switch'、'InputNumber'——PascalCase"
+        },
+        {
+            "issue": "onAdd/onDelete 是双参数签名，只声明单参数会导致 errors 不同步（TS 不会报错但逻辑错误）",
+            "wrong": "onAdd={(valueList) => setValueList(valueList)}  // errors 参数丢失，新行无占位",
+            "right": "onAdd={(valueList, errors) => { setValueList(valueList); setErrors(errors); }}  // 两个 state 同时同步"
+        },
+        {
+            "issue": "IMultiValueProps 是泛型 <T extends Record<string, unknown>>，使用具体业务类型时需传泛型参数",
+            "wrong": "// 不传泛型，render/onChange 里 row/currentItem 的字段是 unknown\n<DynamicMultiBox config={config} valueList={valueList} />",
+            "right": "// 传泛型，类型推断正确\nconst config: IConfig<Contact>[] = [...];\nconst valueList: IValueList<Contact>[] = [...];\n<DynamicMultiBox<Contact> config={config} valueList={valueList} />"
+        },
+        {
+            "issue": "泛型 T 必须满足 Record<string, unknown> 约束，普通 interface 没有 index signature 会报 TS2344",
+            "wrong": "interface Param { foo: string }  // 没有 index signature\n<DynamicMultiBox<Param> ... />  // TS2344: Type 'Param' does not satisfy the constraint 'Record<string, unknown>'. Index signature for type 'string' is missing in type 'Param'.",
+            "right": "interface Param { foo: string; [key: string]: unknown }  // 加 index signature\n// 或用 type 别名: type Param = { foo: string } & Record<string, unknown>\n<DynamicMultiBox<Param> ... />  // 编译通过"
+        },
+        {
+            "issue": "IConfig / IValueList 等类型必须从 @para-ui/core/DynamicMultiBox 导入,不是子路径 /interface",
+            "wrong": "import type { IConfig } from '@para-ui/core/DynamicMultiBox/interface';  // TS2307: Cannot find module",
+            "right": "import type { IConfig, IValueList } from '@para-ui/core/DynamicMultiBox';"
+        }
+    ],
+    "mapping": {
+        "realComponent": "DynamicMultiBox",
+        "adapter": null
+    }
+}

package/lib/DynamicMultiBox/formItem.d.ts

@@ -5,7 +5,7 @@ export type IFormItem = {
     /** 错误集合*/
     errors?: IErrors[];
     /**回调 */
-    onChange?: (id: string, value: any) => void;
+    onChange?: (id: string, value: unknown) => void;
     /** 渲染数据*/
     formItemProps?: IConfig;
 };

package/lib/DynamicMultiBox/index.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
+import { default as React } from 'react';
 import { IMultiValueProps } from './interface';
-declare const DynamicMultiBox: FunctionComponent<IMultiValueProps>;
+declare const DynamicMultiBox: <T extends Record<string, unknown> = Record<string, unknown>>(props: IMultiValueProps<T>) => React.ReactElement | null;
 export default DynamicMultiBox;
 export type * from './interface';

package/lib/DynamicMultiBox/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../_virtual/jsx-runtime.js"),m=require("react"),Ne=require("../Popover/index.js"),ne=require("../Label/index.js"),Ae=require("../CheckboxGroup/index.js"),ke=require("../node_modules/@para-ui/icons/Panel/index.js"),qe=require("../node_modules/@para-ui/icons/PlusCircleF/index.js"),ye=require("../node_modules/@para-ui/icons/Delete/index.js"),De=require("../node_modules/@para-ui/icons/Drag/index.js"),Se=require("./rowForm.js"),$e=require("@paraview/lib"),Be=require("react-sortablejs"),oe=require("../GlobalContext/constant.js"),Fe=require("../GlobalContext/useFormatMessage.js"),Te=require("./lang/index.js");;/* empty css            */const ie=require("../Tooltip/index.js"),we=le=>{const{rowKey:u="id",valueList:i=[],config:g=[],errors:R=[],isSort:v=!1,isFilter:S=!1,className:P,disabledAdd:H=!1,disabledAddTooltip:$,titleMode:B="all",checkedValue:F,icon:ce,deleteDisable:b=[],singleTitle:O,initValue:ae,popoverClassName:_,operationButtons:C=[],onChange:U,onAdd:z,onFilter:q,onDelete:G,deleteRender:T,onSort:K,keepLastItem:N=!0}=le,y=Fe.default("DynamicMultiBox",Te.default),[p,w]=m.useState([]),W=m.useRef(null),V=m.useRef(null),[A,ue]=m.useState([]),[k,J]=m.useState([]),L=m.useRef({});m.useEffect(()=>(window.addEventListener("resize",D),()=>{window.removeEventListener("resize",D),clearTimeout(L.current.timerScroll)}),[]),m.useEffect(()=>{F&&w(F)},[F]),m.useEffect(()=>{if(!g?.length)return;const e=g?.filter(t=>t.isFixed)||[];ue(e)},[g]),m.useEffect(()=>{if(!g?.length)return;const e=g?.filter(t=>!t.isFixed&&p?.includes(t.name))||[];J(e)},[g,p]);const Q=e=>{const t=e?.length>p?.length,s=ve(e,p);let n=[...i],o=[...R];t?(n=I(n,s),o=I(o,s)):(Z(n,s),Z(o,s)),w(e),q&&q({name:s,checkedVal:e,valueList:n,errors:o}),D()},D=()=>{const e=W?.current;if(!e)return;const t=e.querySelector(".multi-value-content");if(!t)return;const s=e.querySelector(".add-button");s&&(clearTimeout(L.current.timerScroll),L.current.timerScroll=setTimeout(()=>{t.offsetWidth<t.scrollWidth?s.classList.add("add-button-scroll"):s.classList.remove("add-button-scroll")},50))},X=()=>{if(!p?.length)return;const e=[...i],t=[...R];Y(e,p),Y(t,p),w([]),J([]),q&&q({valueList:e,errors:t}),D()},Y=(e,t)=>{e.forEach(s=>{for(const n in s)t.includes(n)&&delete s[n]})},Z=(e=[],t)=>{e.forEach(s=>{for(const n in s)n===t&&delete s[n]})},I=(e,t)=>e.map(s=>({...s,[t]:""})),de=()=>{const e=g.filter(t=>!t.isFixed);return r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:e&&e?.length>0?r.jsxRuntimeExports.jsxs("div",{className:"filter-config",children:[r.jsxRuntimeExports.jsxs("div",{className:"check-list",children:[r.jsxRuntimeExports.jsx("div",{className:"title",children:y({id:"titleForm"})}),r.jsxRuntimeExports.jsx(Ae.CheckboxGroup,{list:e,row:!1,value:p,onChange:Q})]}),r.jsxRuntimeExports.jsx("div",{className:"restore-default",onClick:X,children:y({id:"default"})})]}):r.jsxRuntimeExports.jsx("div",{className:"no-other-property",children:y({id:"noData"})})})},xe=()=>{let e=`${oe.$prefixCls}-dynamic-multi-box-popover`;return _&&(e+=` ${_}`),e},ee=()=>{let e=!0;if(i.length>b.length)return!1;for(let t=0,s=i?.length;t<s;t++){const n=i[t]?.[u];if(n&&b.indexOf(n)===-1){e=!1;break}}return e},me=(e,t,s)=>{const{key:n,icon:o,text:a,disabled:c,onClick:E,render:d,className:h,tooltip:f}=e;if(d)return r.jsxRuntimeExports.jsx("div",{className:`operator-column-icon operation-button ${h||""}`,children:d(t,s,i)},n);const j=typeof c=="function"?c(t,s,i):c,l=r.jsxRuntimeExports.jsxs("div",{className:`operator-column-icon operation-button ${h||""} ${j?"disabled-operation":""}`,onClick:()=>!j&&E(t,s,i),children:[o,a&&r.jsxRuntimeExports.jsx("span",{className:"operation-text",children:a})]});return f?r.jsxRuntimeExports.jsx(ie.Tooltip,{disabled:j,placement:f.placement||"top",...f,children:l},n):l},fe=(e,t,s,n)=>{const o=[],a=[...C].sort((l,x)=>(l.order||3)-(x.order||3)),c=[],E=[],d=[],h=[];a.forEach(l=>{const x=me(l,e,t);switch(l.order!==void 0?l.order:3){case 0:c.push(x);break;case 1:E.push(x);break;case 2:d.push(x);break;default:h.push(x);break}}),c.forEach(l=>{o.push(l)});const f=r.jsxRuntimeExports.jsx("div",{className:`operator-column-icon delete-icon ${!s||b.includes(t?.[u]||"")?"hidden-icon":""}`,onClick:()=>je(e),children:T?T(e,t,i):r.jsxRuntimeExports.jsx(ye.Delete,{})},"delete-button");if(s&&!b.includes(t[u])&&o.push(f),E.forEach(l=>{o.push(l)}),v&&s){const l=r.jsxRuntimeExports.jsx("div",{className:`sort-handler operator-column-icon ${s?"":"hidden-icon"}`,children:r.jsxRuntimeExports.jsx(De.Drag,{})},"sort-handler");o.push(l)}d.forEach(l=>{o.push(l)}),h.forEach(l=>{o.push(l)});const j=[];return o.forEach((l,x)=>{j.push(l),x<o.length-1&&j.push(r.jsxRuntimeExports.jsx("div",{className:"center-line",children:r.jsxRuntimeExports.jsx("div",{className:"line"})},`divider-${x}`))}),r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:j})},M=(e,t,s,n,o=!1)=>{const a=i.length===1&&s===0;let c=0;return o||!a?((!N||i.length>1)&&c++,v&&c++,c+=C?.length||0):(e&&!b.includes(n[u]||"")&&c++,v&&e&&c++,c+=C?.length||0),pe(c)},pe=e=>{switch(e){case 0:case 1:return"operator-column-40";case 2:return"operator-column-80";case 3:return"operator-column-120";case 4:return"operator-column-160";default:return"operator-column-200"}},he=m.useMemo(()=>{const e=[...A,...k];if(!e?.length)return null;const t=N?i.length>1:!0,s=ee();let n="operator-column-40";return i.length===1?n=M(t,s,0,i[0],!1):n=M(t,s,0,i[0],!0),r.jsxRuntimeExports.jsxs("div",{className:"title-config",children:[B==="all"?r.jsxRuntimeExports.jsx("div",{className:"title-config-row",children:e?.map((o,a)=>{const{label:c,required:E,className:d,inputType:h,style:f,labelProps:j}=o;let l="title-config-row-item";h==="Switch"&&(l+=" row-form-switch"),d&&(l+=` ${d}`);const x={...f};return!f?.width&&!f?.flex&&(x.flex=1),r.jsxRuntimeExports.jsx("div",{className:l,style:x,children:r.jsxRuntimeExports.jsx(ne.default,{required:E,label:c,...j})},a)})}):B==="single"?r.jsxRuntimeExports.jsx(ne.default,{required:O?.required,label:O?.label}):null,r.jsxRuntimeExports.jsxs("div",{className:n,children:[v&&r.jsxRuntimeExports.jsx("div",{className:"blank-block"}),S&&r.jsxRuntimeExports.jsx(Ne.Popover,{placement:"bottom-end",content:de(),getPopupContainer:()=>V.current||document.body,overlayClassName:xe(),children:r.jsxRuntimeExports.jsx("div",{className:"operator-column-icon-panel",ref:V,children:r.jsxRuntimeExports.jsx("div",{className:"svg-box",children:r.jsxRuntimeExports.jsx(ke.Panel,{})})})})]})]})},[B,A,k,v,S,p,Q,X,u,N,i,b,C]),te=m.useMemo(()=>{if(i&&i?.length>0){const e=N?i.length>1:!0,t=[...A,...k],s=ee();return r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:i.map((n,o)=>{const a=n[u],c=R?.filter(d=>d[u]===a)?.[0],E=M(e,s,o,n);return r.jsxRuntimeExports.jsxs("div",{className:"content-row-form",children:[r.jsxRuntimeExports.jsx(Se.default,{rowIndex:o,valueList:i,errors:R,rowError:c,onFormItemChange:(d,h,f)=>Ee(d,h,f,o),icon:ce,config:t}),r.jsxRuntimeExports.jsx("div",{className:E,children:fe(o,n,e)})]},a)})})}},[i,v,S,R,A,k,N,T,u,b,C]),je=e=>{const t=[...i],s=[...R];t.splice(e,1),s.splice(e,1),G&&G(t,s)},Ee=(e,t,s,n)=>{const o=[...i];Object.keys(o[n]).forEach(a=>{e===a&&(o[n][a]=s)}),U&&U(o,{name:e,id:t,value:s,rowIndex:n})},ge=()=>{if(H)return;const e=[...i||[]],t=[...R],s=$e.UUID(),n=[...A,...k];e.push({...se(n,"value"),[u]:s}),t.push({...se(n,"error"),[u]:s}),z&&z(e,t)},se=(e,t)=>e.reduce((s,n)=>({...s,[n.name]:t==="value"?ae?.[n.name]:""}),{}),Re=e=>{const t=e.reduce((n,o,a)=>({...n,[o[u]]:a}),{}),s=[];i.forEach((n,o)=>{o!==t[n[u]]&&s.push(o)}),K&&K(e,s)},ve=(e,t)=>e.concat(t).filter(s=>!e.includes(s)||!t.includes(s))[0],re=()=>r.jsxRuntimeExports.jsxs("div",{className:`add-button ${H?"disabled-add":"normal-button"}`,onClick:ge,children:[r.jsxRuntimeExports.jsx(qe.PlusCircleF,{}),r.jsxRuntimeExports.jsx("span",{className:"text",children:y({id:"add"})})]}),be=()=>$?r.jsxRuntimeExports.jsx(ie.Tooltip,{disabled:!0,placement:$.placement||"top",...$,children:re()}):re(),Ce=()=>{let e=`${oe.$prefixCls}-dynamic-multi-box`;return P&&(e+=` ${P}`),e};return r.jsxRuntimeExports.jsxs("div",{className:Ce(),ref:W,children:[r.jsxRuntimeExports.jsxs("div",{className:"multi-value-content",children:[he,v&&Array.isArray(i)&&i.length>0?r.jsxRuntimeExports.jsx(Be.ReactSortable,{id:u,list:i,handle:".sort-handler",animation:150,setList:Re,children:te}):te]}),be()]})};exports.default=we;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const n=require("../_virtual/jsx-runtime.js"),m=require("react"),Ne=require("../Popover/index.js"),re=require("../Label/index.js"),Ae=require("../CheckboxGroup/index.js"),ke=require("../node_modules/@para-ui/icons/Panel/index.js"),qe=require("../node_modules/@para-ui/icons/PlusCircleF/index.js"),ye=require("../node_modules/@para-ui/icons/Delete/index.js"),De=require("../node_modules/@para-ui/icons/Drag/index.js"),Se=require("./rowForm.js"),Be=require("@snack-kit/lib"),$e=require("react-sortablejs"),oe=require("../GlobalContext/constant.js"),Fe=require("../GlobalContext/useFormatMessage.js"),Te=require("./lang/index.js");;/* empty css            */const ie=require("../Tooltip/index.js"),we=le=>{const{rowKey:u="id",valueList:i=[],config:g=[],errors:R=[],isSort:v=!1,isFilter:S=!1,className:P,disabledAdd:H=!1,disabledAddTooltip:B,titleMode:$="all",checkedValue:F,icon:ce,deleteDisable:b=[],singleTitle:O,initValue:ae,popoverClassName:_,operationButtons:C=[],onChange:U,onAdd:z,onFilter:q,onDelete:G,deleteRender:T,onSort:K,keepLastItem:N=!0}=le,y=Fe.default("DynamicMultiBox",Te.default),[p,w]=m.useState([]),W=m.useRef(null),V=m.useRef(null),[A,ue]=m.useState([]),[k,J]=m.useState([]),L=m.useRef({});m.useEffect(()=>(window.addEventListener("resize",D),()=>{window.removeEventListener("resize",D),clearTimeout(L.current.timerScroll)}),[]),m.useEffect(()=>{F&&w(F)},[F]),m.useEffect(()=>{if(!g?.length)return;const e=g?.filter(t=>t.isFixed)||[];ue(e)},[g]),m.useEffect(()=>{if(!g?.length)return;const e=g?.filter(t=>!t.isFixed&&p?.includes(t.name))||[];J(e)},[g,p]);const Q=e=>{const t=e?.length>p?.length,s=ve(e,p);let r=[...i],o=[...R];t?(r=I(r,s),o=I(o,s)):(Z(r,s),Z(o,s)),w(e),q&&q({name:s,checkedVal:e,valueList:r,errors:o}),D()},D=()=>{const e=W?.current;if(!e)return;const t=e.querySelector(".multi-value-content");if(!t)return;const s=e.querySelector(".add-button");s&&(clearTimeout(L.current.timerScroll),L.current.timerScroll=setTimeout(()=>{t.offsetWidth<t.scrollWidth?s.classList.add("add-button-scroll"):s.classList.remove("add-button-scroll")},50))},X=()=>{if(!p?.length)return;const e=[...i],t=[...R];Y(e,p),Y(t,p),w([]),J([]),q&&q({valueList:e,errors:t}),D()},Y=(e,t)=>{e.forEach(s=>{for(const r in s)t.includes(r)&&delete s[r]})},Z=(e=[],t)=>{e.forEach(s=>{for(const r in s)r===t&&delete s[r]})},I=(e,t)=>e.map(s=>({...s,[t]:""})),de=()=>{const e=g.filter(t=>!t.isFixed);return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:e&&e?.length>0?n.jsxRuntimeExports.jsxs("div",{className:"filter-config",children:[n.jsxRuntimeExports.jsxs("div",{className:"check-list",children:[n.jsxRuntimeExports.jsx("div",{className:"title",children:y({id:"titleForm"})}),n.jsxRuntimeExports.jsx(Ae.CheckboxGroup,{list:e,row:!1,value:p,onChange:Q})]}),n.jsxRuntimeExports.jsx("div",{className:"restore-default",onClick:X,children:y({id:"default"})})]}):n.jsxRuntimeExports.jsx("div",{className:"no-other-property",children:y({id:"noData"})})})},xe=()=>{let e=`${oe.$prefixCls}-dynamic-multi-box-popover`;return _&&(e+=` ${_}`),e},ee=()=>{let e=!0;if(i.length>b.length)return!1;for(let t=0,s=i?.length;t<s;t++){const r=i[t]?.[u];if(r&&b.indexOf(r)===-1){e=!1;break}}return e},me=(e,t,s)=>{const{key:r,icon:o,text:a,disabled:c,onClick:E,render:d,className:h,tooltip:f}=e;if(d)return n.jsxRuntimeExports.jsx("div",{className:`operator-column-icon operation-button ${h||""}`,children:d(t,s,i)},r);const j=typeof c=="function"?c(t,s,i):c,l=n.jsxRuntimeExports.jsxs("div",{className:`operator-column-icon operation-button ${h||""} ${j?"disabled-operation":""}`,onClick:()=>!j&&E(t,s,i),children:[o,a&&n.jsxRuntimeExports.jsx("span",{className:"operation-text",children:a})]});return f?n.jsxRuntimeExports.jsx(ie.Tooltip,{disabled:j,placement:f.placement||"top",...f,children:l},r):l},fe=(e,t,s,r)=>{const o=[],a=[...C].sort((l,x)=>(l.order||3)-(x.order||3)),c=[],E=[],d=[],h=[];a.forEach(l=>{const x=me(l,e,t);switch(l.order!==void 0?l.order:3){case 0:c.push(x);break;case 1:E.push(x);break;case 2:d.push(x);break;default:h.push(x);break}}),c.forEach(l=>{o.push(l)});const f=n.jsxRuntimeExports.jsx("div",{className:`operator-column-icon delete-icon ${!s||b.includes(t?.[u]||"")?"hidden-icon":""}`,onClick:()=>je(e),children:T?T(e,t,i):n.jsxRuntimeExports.jsx(ye.Delete,{})},"delete-button");if(s&&!b.includes(t[u])&&o.push(f),E.forEach(l=>{o.push(l)}),v&&s){const l=n.jsxRuntimeExports.jsx("div",{className:`sort-handler operator-column-icon ${s?"":"hidden-icon"}`,children:n.jsxRuntimeExports.jsx(De.Drag,{})},"sort-handler");o.push(l)}d.forEach(l=>{o.push(l)}),h.forEach(l=>{o.push(l)});const j=[];return o.forEach((l,x)=>{j.push(l),x<o.length-1&&j.push(n.jsxRuntimeExports.jsx("div",{className:"center-line",children:n.jsxRuntimeExports.jsx("div",{className:"line"})},`divider-${x}`))}),n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:j})},M=(e,t,s,r,o=!1)=>{const a=i.length===1&&s===0;let c=0;return o||!a?((!N||i.length>1)&&c++,v&&c++,c+=C?.length||0):(e&&!b.includes(r[u]||"")&&c++,v&&e&&c++,c+=C?.length||0),pe(c)},pe=e=>{switch(e){case 0:case 1:return"operator-column-40";case 2:return"operator-column-80";case 3:return"operator-column-120";case 4:return"operator-column-160";default:return"operator-column-200"}},he=m.useMemo(()=>{const e=[...A,...k];if(!e?.length)return null;const t=N?i.length>1:!0,s=ee();let r="operator-column-40";return i.length===1?r=M(t,s,0,i[0],!1):r=M(t,s,0,i[0],!0),n.jsxRuntimeExports.jsxs("div",{className:"title-config",children:[$==="all"?n.jsxRuntimeExports.jsx("div",{className:"title-config-row",children:e?.map((o,a)=>{const{label:c,required:E,className:d,inputType:h,style:f,labelProps:j}=o;let l="title-config-row-item";h==="Switch"&&(l+=" row-form-switch"),d&&(l+=` ${d}`);const x={...f};return!f?.width&&!f?.flex&&(x.flex=1),n.jsxRuntimeExports.jsx("div",{className:l,style:x,children:n.jsxRuntimeExports.jsx(re.default,{required:E,label:c,...j})},a)})}):$==="single"?n.jsxRuntimeExports.jsx(re.default,{required:O?.required,label:O?.label}):null,n.jsxRuntimeExports.jsxs("div",{className:r,children:[v&&n.jsxRuntimeExports.jsx("div",{className:"blank-block"}),S&&n.jsxRuntimeExports.jsx(Ne.Popover,{placement:"bottom-end",content:de(),getPopupContainer:()=>V.current||document.body,overlayClassName:xe(),children:n.jsxRuntimeExports.jsx("div",{className:"operator-column-icon-panel",ref:V,children:n.jsxRuntimeExports.jsx("div",{className:"svg-box",children:n.jsxRuntimeExports.jsx(ke.Panel,{})})})})]})]})},[$,A,k,v,S,p,Q,X,u,N,i,b,C]),te=m.useMemo(()=>{if(i&&i?.length>0){const e=N?i.length>1:!0,t=[...A,...k],s=ee();return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:i.map((r,o)=>{const a=r[u],c=R?.filter(d=>d[u]===a)?.[0],E=M(e,s,o,r);return n.jsxRuntimeExports.jsxs("div",{className:"content-row-form",children:[n.jsxRuntimeExports.jsx(Se.default,{rowIndex:o,valueList:i,errors:R,rowError:c,onFormItemChange:(d,h,f)=>Ee(d,h,f,o),icon:ce,config:t}),n.jsxRuntimeExports.jsx("div",{className:E,children:fe(o,r,e)})]},a)})})}},[i,v,S,R,A,k,N,T,u,b,C]),je=e=>{const t=[...i],s=[...R];t.splice(e,1),s.splice(e,1),G&&G(t,s)},Ee=(e,t,s,r)=>{const o=[...i];Object.keys(o[r]).forEach(a=>{e===a&&(o[r][a]=s)}),U&&U(o,{name:e,id:t,value:s,rowIndex:r})},ge=()=>{if(H)return;const e=[...i||[]],t=[...R],s=Be.UUID(),r=[...A,...k];e.push({...se(r,"value"),[u]:s}),t.push({...se(r,"error"),[u]:s}),z&&z(e,t)},se=(e,t)=>e.reduce((s,r)=>({...s,[r.name]:t==="value"?ae?.[r.name]:""}),{}),Re=e=>{const t=e.reduce((r,o,a)=>({...r,[o[u]]:a}),{}),s=[];i.forEach((r,o)=>{o!==t[r[u]]&&s.push(o)}),K&&K(e,s)},ve=(e,t)=>e.concat(t).filter(s=>!e.includes(s)||!t.includes(s))[0],ne=()=>n.jsxRuntimeExports.jsxs("div",{className:`add-button ${H?"disabled-add":"normal-button"}`,onClick:ge,children:[n.jsxRuntimeExports.jsx(qe.PlusCircleF,{}),n.jsxRuntimeExports.jsx("span",{className:"text",children:y({id:"add"})})]}),be=()=>B?n.jsxRuntimeExports.jsx(ie.Tooltip,{disabled:!0,placement:B.placement||"top",...B,children:ne()}):ne(),Ce=()=>{let e=`${oe.$prefixCls}-dynamic-multi-box`;return P&&(e+=` ${P}`),e};return n.jsxRuntimeExports.jsxs("div",{className:Ce(),ref:W,children:[n.jsxRuntimeExports.jsxs("div",{className:"multi-value-content",children:[he,v&&Array.isArray(i)&&i.length>0?n.jsxRuntimeExports.jsx($e.ReactSortable,{id:u,list:i,handle:".sort-handler",animation:150,setList:Re,children:te}):te]}),be()]})};exports.default=we;
 //# sourceMappingURL=index.js.map

package/lib/DynamicMultiBox/interface.d.ts

@@ -1,38 +1,48 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { TextFieldProps, SelectProps, SwitchProps, InputNumberProps, InputLangProps, ComboSelectProps, DatePickerProps } from '../index';
 import { LabelProps } from '../Label';
 import { TooltipProps } from '../Tooltip';
 /**组件类型：输入框，下拉框，开关，数字输入框，国际化输入框，日期框，时间选择框，组合选择器,自定义组件*/
 export type IInputType = 'TextField' | 'Select' | 'Switch' | 'InputNumber' | 'InputLang' | 'ComboSelect' | 'DatePicker' | 'custom';
-/** 配置项*/
-export type IConfig = {
-    /** 字段名，用于匹配*/
-    name?: string;
-    /** 组件类型*/
+/** value集合 —— 单行 value 值集合，name 映射 configItem 中的 name */
+export type IValueList<T extends Record<string, unknown> = Record<string, unknown>> = T;
+/** error集合 —— 单行错误集合，name 映射 configItem 中的 name；按 keyof T 精确收窄，rowKey 字段通过 cast 访问 */
+export type IErrors<T extends Record<string, unknown> = Record<string, unknown>> = {
+    [K in keyof T]?: unknown;
+};
+/** 配置项 */
+export type IConfig<T extends Record<string, unknown> = Record<string, unknown>> = {
+    /** 字段名，用于匹配 valueList 中的 key */
+    name?: keyof T & string;
+    /** 组件类型 */
     inputType?: IInputType;
-    /** 渲染自定义组件*/
-    customRender?: (name: string, rowIndex: number, valueList: IValueList[], errors?: IErrors[]) => ReactNode;
-    /** 禁用置灰组件*/
-    isDisabled?: boolean | ((rowIndex: number, name: string, valueList: IValueList[]) => boolean);
-    /** 固定字段，不需要显示在筛选器中的需要设置为true, 若不设置无法显示表单*/
+    /** 渲染自定义组件 */
+    customRender?: (name: keyof T & string, rowIndex: number, valueList: IValueList<T>[], errors?: IErrors<T>[]) => ReactNode;
+    /** 禁用置灰组件 */
+    isDisabled?: boolean | ((rowIndex: number, name: keyof T & string, valueList: IValueList<T>[]) => boolean);
+    /** 固定字段，不需要显示在筛选器中的需要设置为 true，若不设置无法显示表单 */
     isFixed?: boolean;
-    /** 用于switch*/
-    text?: ReactNode | ((rowIndex: number, name: string, valueList: IValueList[]) => ReactNode);
-    /** 是否必填*/
+    /** 用于 switch */
+    text?: ReactNode | ((rowIndex: number, name: keyof T & string, valueList: IValueList<T>[]) => ReactNode);
+    /** 是否必填 */
     required?: boolean;
-    /** 下拉列表数据，若某一列的每一行的下拉列表数据一致， 则只需传入数组，若需要自定义任意下拉列表数据，则传入函数*/
-    list?: ((rowIndex: number, id: string, name: string, valueList: IValueList[]) => unknown[]) | unknown[];
+    /** 下拉列表数据，若某一列的每一行的下拉列表数据一致，则只需传入数组；若需要自定义任意下拉列表数据，则传入函数 */
+    list?: ((rowIndex: number, id: string, name: keyof T & string, valueList: IValueList<T>[]) => unknown[]) | unknown[];
     /** 样式 */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** 标题样式 */
     labelProps?: LabelProps;
-    /** 组件其他样式,返回每个组件的样式 */
-    otherProps?: (rowIndex: number, name: string, valueList: IValueList[]) => Record<string, unknown>;
-    /** 其他*/
+    /** 组件其他样式，返回每个组件的样式 */
+    otherProps?: (rowIndex: number, name: keyof T & string, valueList: IValueList<T>[]) => Record<string, unknown>;
+    /**
+     * 其他字段
+     * 索引签名保留：IConfig 与 (TextFieldProps | SelectProps | ...) 多态子组件 props 交叉，
+     * 业务方需要透传不同子组件的 props（如 placeholder、suffix 等），与 Tabs/Table/Button 移除索引签名的情境不同
+     */
     [name: string]: unknown;
 } & (TextFieldProps | SelectProps | SwitchProps | InputNumberProps | InputLangProps | ComboSelectProps | DatePickerProps);
 /** 操作按钮配置项 */
-export interface IOperationButton {
+export interface IOperationButton<T extends Record<string, unknown> = Record<string, unknown>> {
     /** 按钮标识 */
     key: string;
     /** 按钮图标 */
@@ -40,11 +50,11 @@ export interface IOperationButton {
     /** 按钮文本 */
     text?: string;
     /** 是否禁用 */
-    disabled?: boolean | ((rowIndex: number, item: IValueList, valueList: IValueList[]) => boolean);
+    disabled?: boolean | ((rowIndex: number, item: IValueList<T>, valueList: IValueList<T>[]) => boolean);
     /** 点击事件 */
-    onClick: (rowIndex: number, item: IValueList, valueList: IValueList[]) => void;
+    onClick: (rowIndex: number, item: IValueList<T>, valueList: IValueList<T>[]) => void;
     /** 自定义渲染 */
-    render?: (rowIndex: number, item: IValueList, valueList: IValueList[]) => ReactNode;
+    render?: (rowIndex: number, item: IValueList<T>, valueList: IValueList<T>[]) => ReactNode;
     /** 样式 */
     className?: string;
     /** 提示 */
@@ -57,96 +67,86 @@ export interface IOperationButton {
      */
     order?: number;
 }
-/** value集合*/
-export interface IValueList {
-    /** 每行value值集合， name映射configItem中的name*/
-    [name: string]: unknown;
-}
-export interface IErrors {
-    /** 每行错误集合，name映射configItem中的name*/
-    [name: string]: unknown;
-}
-export interface ICurrentItem {
-    /** 表单名*/
-    name?: string;
-    /** 表单值*/
-    value?: unknown;
-    /** 表单所处下标*/
+/** 当前操作表单项；显式声明字段，禁止挂未声明字段 */
+export interface ICurrentItem<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** 表单名 */
+    name?: keyof T & string;
+    /** 表单值 */
+    value?: T[keyof T];
+    /** 表单所处下标 */
     rowIndex?: number;
-    [name: string]: unknown;
+    /** 表单所处行的 rowKey 值（默认 rowKey 为 'id'） */
+    id?: string;
 }
-/** 过滤回调出参*/
-export interface IFilterParams {
-    /** 当前过滤操作项*/
+/** 过滤回调出参 */
+export interface IFilterParams<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** 当前过滤操作项 */
     name?: string;
-    /** 是否选中*/
+    /** 是否选中 */
     checkedVal?: string[];
-    /** 更新后的valueList*/
-    valueList?: IValueList[];
-    /** 更新后的错误信息*/
-    errors?: IErrors[];
+    /** 更新后的 valueList */
+    valueList?: IValueList<T>[];
+    /** 更新后的错误信息 */
+    errors?: IErrors<T>[];
 }
-/** 主体接口定义*/
-export interface IMultiValueProps {
-    /** 指定每行key */
+/** 主体接口定义 */
+export interface IMultiValueProps<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** 指定每行 key */
     rowKey?: string;
     /**
      * 组件配置项
      */
-    config?: IConfig[];
+    config?: IConfig<T>[];
     /**
      * 筛选配置
      */
-    filterConfig?: IConfig[];
+    filterConfig?: IConfig<T>[];
     /**
      * @desc 回调
-     * @param valueList 整个value值集合
+     * @param valueList 整个 value 值集合
      * @param currentItem 当前操作表单项
      * */
-    onChange?: (valueList: IValueList[], currentItem?: ICurrentItem) => void;
+    onChange?: (valueList: IValueList<T>[], currentItem?: ICurrentItem<T>) => void;
     /**
      * @desc 新增
-     * @param valueList 新增前valueList值集合
+     * @param valueList 新增前 valueList 值集合
      * @param errors 新增后错误集合
      *  */
-    onAdd?: (valueList: IValueList[], errors: IErrors[]) => void;
+    onAdd?: (valueList: IValueList<T>[], errors: IErrors<T>[]) => void;
     /**
      * 自定义删除
      * */
-    deleteRender?: (index: number, item: IValueList, valueList: IValueList[]) => ReactNode;
+    deleteRender?: (index: number, item: IValueList<T>, valueList: IValueList<T>[]) => ReactNode;
     /**
-     * @desc 删除，
-     * @param valueList 删除后整个valueList值集合
-     * @param deleteItem 删除项
+     * @desc 删除
+     * @param valueList 删除后整个 valueList 值集合
+     * @param errors 删除后错误集合
      */
-    onDelete?: (valueList: IValueList[], errors: IErrors[]) => void;
+    onDelete?: (valueList: IValueList<T>[], errors: IErrors<T>[]) => void;
     /**
      * @desc 筛选函数
-     * @param name 当前筛选项的name
-     * @param checked 是否选中， true选中， false反选
-     * @param valueList 筛选后的value
      * */
-    onFilter?: (data: IFilterParams) => void;
+    onFilter?: (data: IFilterParams<T>) => void;
     /**
      * @desc 排序
      * @param newValueList
      * @param swapIds 交换顺序的两个下标
      * */
-    onSort?: (newValueList: IValueList[], swapIds?: number[]) => void;
+    onSort?: (newValueList: IValueList<T>[], swapIds?: number[]) => void;
     /**
      * @desc 筛选值的集合
      * */
     checkedValue?: string[];
     /**
-     * 表单value集合
+     * 表单 value 集合
      */
-    valueList?: IValueList[];
+    valueList?: IValueList<T>[];
     /**
      * 表单错误集合
      */
-    errors?: IErrors[];
+    errors?: IErrors<T>[];
     /**
-     * 是否需要支持排序,默认不支持
+     * 是否需要支持排序，默认不支持
      */
     isSort?: boolean;
     /**
@@ -154,7 +154,7 @@ export interface IMultiValueProps {
      */
     isFilter?: boolean;
     /**
-     * 标题模式 none 不显示， single 只有第一列才显示， all 每列都显示
+     * 标题模式 none 不显示，single 只有第一列才显示，all 每列都显示
      */
     titleMode?: 'none' | 'single' | 'all';
     /**
@@ -166,11 +166,11 @@ export interface IMultiValueProps {
      */
     disabledAddTooltip?: TooltipProps;
     /**
-     * 列之间icon
+     * 列之间 icon
      * */
     icon?: ReactNode;
     /**
-     * 隐藏删除icon, string[] 指定某些行隐藏删除按钮, 入参为valueList中的id集合
+     * 隐藏删除 icon，string[] 指定某些行隐藏删除按钮，入参为 valueList 中的 id 集合
      * */
     deleteDisable?: string[];
     /**
@@ -187,7 +187,7 @@ export interface IMultiValueProps {
     /**
      * 新增项行表单的默认值
      */
-    initValue?: Record<string, unknown>;
+    initValue?: Partial<T>;
     /**
      * 筛选器弹出框样式
      */
@@ -199,5 +199,5 @@ export interface IMultiValueProps {
     /**
      * 自定义操作按钮，支持每行配置多个操作按钮
      */
-    operationButtons?: IOperationButton[];
+    operationButtons?: IOperationButton<T>[];
 }

package/lib/DynamicMultiBox/rowForm.d.ts

@@ -18,9 +18,9 @@ export interface IRowForm {
      * @param value 当前组件value值
      * @param name 当前组件name
      * */
-    onFormItemChange?: (name: string, id: string, value: any) => void;
+    onFormItemChange?: (name: string, id: string, value: unknown) => void;
     /**其他*/
-    [name: string]: any;
+    [name: string]: unknown;
 }
 declare const RowForm: (props: IRowForm) => import("react/jsx-runtime").JSX.Element;
 export default RowForm;