@pointcloud/pcloud-components 0.1.36 → 1.0.0

package/README.md

@@ -1,153 +1,157 @@
-# @pointcloud/pcloud-components
-
-[![NPM version](https://img.shields.io/npm/v/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
-[![NPM downloads](https://img.shields.io/npm/dm/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
-![Jest Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen?style=flat)
-[![License](https://img.shields.io/npm/l/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
-
-一套基于 Ant Design v4.24.16 和 React v17.0.2 开发的业务组件库，包含 30+ 个高质量组件，可帮助您快速构建企业级中后台产品原型。
-
-## 🎁 组件列表
-
-### 表单组件
-
-| 组件名称     | 描述                                |
-| ------------ | ----------------------------------- |
-| DForm        | 基于 Ant Design Form 的增强表单组件 |
-| DInput       | 增强版输入框组件                    |
-| DSelect      | 支持异步加载的下拉选择组件          |
-| DCascader    | 支持异步加载的级联选择组件          |
-| DTreeSelect  | 支持异步加载的树选择组件            |
-| DUpload      | 文件上传组件                        |
-| DRangePicker | 日期选择组件                        |
-| ColorPicker  | 颜色选择器组件                      |
-
-### 数据展示组件
-
-| 组件名称           | 描述             |
-| ------------------ | ---------------- |
-| DTable             | 增强版表格组件   |
-| LabelValue         | 标签值展示组件   |
-| WordCloud          | 词云组件         |
-| ScrollNumber       | 数字滚动动画组件 |
-| AspectRatio        | 宽高比容器组件   |
-| NoData             | 无数据展示组件   |
-| IPAddress          | IP 地址输入组件  |
-| AnimatedScrollList | 动画滚动列表组件 |
-| OrgTree            | 组织树组件       |
-| TypewriterText     | 打字机组件       |
-
-### 模态框组件
-
-| 组件名称  | 描述             |
-| --------- | ---------------- |
-| DModal    | 增强版模态框组件 |
-| ModalForm | 表单模态框组件   |
-| LoginForm | 登录表单组件     |
-
-### 其他业务组件
-
-| 组件名称           | 描述               |
-| ------------------ | ------------------ |
-| Loading            | 全局加载组件       |
-| ContextMenu        | 右键菜单组件       |
-| AdvancedFilter     | 高级筛选组件       |
-| InfiniteScrollList | 无限滚动列表组件   |
-| PictureCard        | 图片卡片组件       |
-| SignaturePad       | 签名板组件         |
-| RndDrag            | 可拖拽调整大小组件 |
-| RCropper           | 图片裁剪组件       |
-| CRUD               | CRUD 组件          |
-
-## 🚀 安装
-
-```bash
-# 使用 npm
-npm install @pointcloud/pcloud-components
-
-# 使用 yarn
-yarn add @pointcloud/pcloud-components
-
-# 使用 pnpm
-pnpm add @pointcloud/pcloud-components
-```
-
-## 🔨 快速开始
-
-通过 umd 引入时,需要先引入`react`和`react-dom`, 示例:
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@pointcloud/pcloud-components@0.1.30/dist/umd/pcloud-components.min.css" />
-<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
-<script src="https://unpkg.com/@pointcloud/pcloud-components@0.1.30/dist/umd/pcloud-components.min.js"></script>
-```
-
-### 1. 基础使用
-
-```jsx
-import React from 'react';
-import { DCascader } from '@pointcloud/pcloud-components';
-
-const App = () => {
-  const handleChange = (value, selectedOptions) => {
-    console.log(value, selectedOptions);
-  };
-
-  return <DCascader showSearch placeholder="请选择" onChange={handleChange} />;
-};
-
-export default App;
-```
-
-### 2. 使用表单组件
-
-```jsx
-import React from 'react';
-import { DForm, DInput, DSelect } from '@pointcloud/pcloud-components';
-
-const App = () => {
-  const onFinish = (values) => {
-    console.log('表单值:', values);
-  };
-  const items = [
-    {
-      label: '用户名',
-      name: 'username',
-      rules: [{ required: true, message: '请输入用户名' }],
-      renderType: 'input',
-    },
-    {
-      label: '状态',
-      name: 'status',
-      rules: [{ required: true, message: '请选择状态' }],
-      renderType: 'select',
-      options: [
-        { label: '启用', value: 1 },
-        { label: '禁用', value: 0 },
-      ],
-    },
-    {
-      label: '提交',
-      renderType: 'button',
-      type: 'primary',
-      htmlType: 'submit',
-    },
-  ];
-
-  return <DForm onFinish={onFinish} items={items}></DForm>;
-};
-
-export default App;
-```
-
-## 📖 详细文档
-
-访问我们的[在线文档](https://frank17008.github.io/pcloud-components)查看完整的组件列表和使用示例。
-
-## ⚙️ 环境支持
-
-- React < 18
-- Ant Design <= 4.24.16
-- Node >= 16.20.0
-- Modern browsers
+# @pointcloud/pcloud-components
+
+[![NPM version](https://img.shields.io/npm/v/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
+[![NPM downloads](https://img.shields.io/npm/dm/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
+![Jest Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen?style=flat)
+[![License](https://img.shields.io/npm/l/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
+
+一套基于 Ant Design v4.24.16 和 React v18 开发的业务组件库，包含 30+ 个高质量组件，可帮助您快速构建企业级中后台产品原型。
+
+## 🎁 组件列表
+
+### 表单组件
+
+| 组件名称        | 描述                                |
+| --------------- | ----------------------------------- |
+| DForm           | 基于 Ant Design Form 的增强表单组件 |
+| DInput          | 增强版输入框组件                    |
+| DSelect         | 支持异步加载的下拉选择组件          |
+| DCascader       | 支持异步加载的级联选择组件          |
+| DTreeSelect     | 支持异步加载的树选择组件            |
+| DUpload         | 文件上传组件                        |
+| DRangePicker    | 日期选择组件                        |
+| DynamicFormItem | 动态表单组件                        |
+
+### 数据展示类
+
+| 组件名称           | 描述             |
+| ------------------ | ---------------- |
+| DTable             | 增强版表格组件   |
+| LabelValue         | 标签值展示组件   |
+| WordCloud          | 词云组件         |
+| ScrollNumber       | 数字滚动动画组件 |
+| AspectRatio        | 宽高比容器组件   |
+| NoData             | 无数据展示组件   |
+| IPAddress          | IP 地址输入组件  |
+| AnimatedScrollList | 动画滚动列表组件 |
+| OrgTree            | 组织树组件       |
+| TypewriterText     | 打字机组件       |
+| ErrorBoundary      | 错误边界组件     |
+| IconFont           | 自定义图标组件   |
+
+### 模态框
+
+| 组件名称  | 描述             |
+| --------- | ---------------- |
+| DModal    | 增强版模态框组件 |
+| ModalForm | 表单模态框组件   |
+| LoginForm | 登录表单组件     |
+
+### 其他
+
+| 组件名称           | 描述               |
+| ------------------ | ------------------ |
+| Loading            | 全局加载组件       |
+| ContextMenu        | 右键菜单组件       |
+| AdvancedFilter     | 高级筛选组件       |
+| InfiniteScrollList | 无限滚动列表组件   |
+| PictureCard        | 图片卡片组件       |
+| SignaturePad       | 签名板组件         |
+| RndDrag            | 可拖拽调整大小组件 |
+| RCropper           | 图片裁剪组件       |
+| CRUD               | CRUD 组件          |
+| AuthComponent      | 权限组件           |
+| ColorPicker        | 颜色选择器组件     |
+
+## 🚀 安装
+
+```bash
+# 使用 npm
+npm install @pointcloud/pcloud-components
+
+# 使用 yarn
+yarn add @pointcloud/pcloud-components
+
+# 使用 pnpm
+pnpm add @pointcloud/pcloud-components
+```
+
+## 🔨 快速开始
+
+通过 umd 引入时,需要先引入`react`和`react-dom`, 示例:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.css" />
+<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.js"></script>
+```
+
+### 1. 基础使用
+
+```jsx
+import React from 'react';
+import { DCascader } from '@pointcloud/pcloud-components';
+
+const App = () => {
+  const handleChange = (value, selectedOptions) => {
+    console.log(value, selectedOptions);
+  };
+
+  return <DCascader showSearch placeholder="请选择" onChange={handleChange} />;
+};
+
+export default App;
+```
+
+### 2. 使用表单组件
+
+```jsx
+import React from 'react';
+import { DForm } from '@pointcloud/pcloud-components';
+
+const App = () => {
+  const onFinish = (values) => {
+    console.log('表单值:', values);
+  };
+  const items = [
+    {
+      label: '用户名',
+      name: 'username',
+      rules: [{ required: true, message: '请输入用户名' }],
+      renderType: 'input',
+    },
+    {
+      label: '状态',
+      name: 'status',
+      rules: [{ required: true, message: '请选择状态' }],
+      renderType: 'select',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+    {
+      label: '提交',
+      renderType: 'button',
+      type: 'primary',
+      htmlType: 'submit',
+    },
+  ];
+
+  return <DForm onFinish={onFinish} items={items}></DForm>;
+};
+
+export default App;
+```
+
+## 📖 详细文档
+
+访问我们的[在线文档](https://frank17008.github.io/pcloud-components)查看完整的组件列表和使用示例。
+
+## ⚙️ 环境支持
+
+- React >= 18
+- Ant Design <= 4.24.16
+- Node >= 16.20.0
+- Modern browsers

package/dist/esm/AdvancedFilter/index.js

@@ -1,6 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["inputSearch"];
 import React, { useState, useRef, useImperativeHandle, useContext } from 'react';
 import { Input, Button, Collapse } from 'antd';
 import classNames from 'classnames';
@@ -12,13 +14,16 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var AdvancedFilter = function AdvancedFilter(props) {
   var left = props.left,
     right = props.right,
-    inputProps = props.inputProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
     formItemConfig = props.formItemConfig,
     fRef = props.fRef,
     icon = props.icon,
     onValuesChange = props.onValuesChange,
     onSearch = props.onSearch,
     onReset = props.onReset;
+  var inputSearch = inputProps.inputSearch,
+    otherInputProps = _objectWithoutProperties(inputProps, _excluded);
   var _useContext = useContext(ConfigContext),
     prefixCls = _useContext.prefixCls,
     getPrefixCls = _useContext.getPrefixCls;
@@ -49,12 +54,12 @@ var AdvancedFilter = function AdvancedFilter(props) {
   var handleSearch = function handleSearch(values) {
     var _inputRef$current;
     var value = inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.input) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-    onSearch && onSearch(_objectSpread(_objectSpread({}, values), _defineProperty({}, inputProps.name, value)));
+    onSearch === null || onSearch === void 0 || onSearch(_objectSpread(_objectSpread({}, values), _defineProperty({}, inputProps.name, value)));
   };
-  var inputSearch = function inputSearch(v) {
-    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-    (inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSearch) && inputProps.inputSearch(_defineProperty({}, inputProps.name, v));
+  var _inputSearch = function _inputSearch(v) {
+    if (typeof inputSearch === 'function') {
+      inputSearch(_defineProperty({}, inputProps.name, v));
+    }
   };
   return /*#__PURE__*/_jsx(Collapse, {
     className: wrapperClass,
@@ -78,20 +83,17 @@ var AdvancedFilter = function AdvancedFilter(props) {
           children: left
         }), /*#__PURE__*/_jsxs("div", {
           className: "right right-content",
-          children: [/*#__PURE__*/_jsx(Input.Search, {
+          children: [/*#__PURE__*/_jsx(Input.Search, _objectSpread({
             className: "input",
             ref: inputRef,
             allowClear: true,
-            placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
             onChange: function onChange(e) {
               setInputValue(e.target.value);
-              // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-              onValuesChange && onValuesChange(e.target.value);
+              onValuesChange === null || onValuesChange === void 0 || onValuesChange(e.target.value);
             },
-            onSearch: inputSearch,
-            name: inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
+            onSearch: _inputSearch,
             value: inputValue
-          }), /*#__PURE__*/_jsxs(Button, {
+          }, otherInputProps)), /*#__PURE__*/_jsxs(Button, {
             className: "button",
             onClick: function onClick() {
               return setPanelVisible(!panelVisible);

package/dist/esm/AdvancedFilter/interface.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { InputProps as AntdInputProps } from 'antd';
 export type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
 export interface FormItem {
     /**
@@ -55,15 +56,7 @@ export interface FProps extends FormProps {
      */
     formRef?: any;
 }
-export interface InputProps {
-    /**
-     * @description input检索框placeholder
-     */
-    placeholder?: string;
-    /**
-     * @description input检索框字段名
-     */
-    name: string;
+export interface InputProps extends AntdInputProps {
     /**
      * @description input检索框回车时或点击检索图标时触发
      */

package/dist/esm/DCascader/index.d.ts

@@ -11,7 +11,7 @@ export type DCascaderProps = Omit<CascaderProps<any>, 'options' | 'loadData' | '
     /** antd的loading属性，是否显示加载中：传入数字表示延迟加载,单位毫秒，0等同于false */
     loading?: boolean | number;
 };
-declare const DCascader: React.ForwardRefExoticComponent<Omit<CascaderProps<any>, "options" | "loading" | "loadData"> & {
+declare const DCascader: React.ForwardRefExoticComponent<Omit<CascaderProps<any>, "loading" | "options" | "loadData"> & {
     /** antd的options属性，同onSearch属性，可以是一个options数组，或一个返回等价options数组的promise */
     options?: DefaultOptionType[] | ((value?: string, option?: DefaultOptionType, options?: DefaultOptionType[]) => Promise<DefaultOptionType[]>) | undefined;
     /** antd的loadData属性，动态加载子级列表数据,默认使用options所提供的方法，如果传入null，则表示不进行动态加载,该方法要求返回一个options数组或与其等价的Promise */

package/dist/esm/DForm/DItem/itemType.d.ts

@@ -10,12 +10,8 @@ import { DTreeSelectProps } from '../../DTreeSelect';
 import { DUploadProps } from '../../DUpload';
 import { IPAddressProps } from '../../IPAddress';
 import { DRangePickerProps } from '../../DRangePicker/interface';
-export type DItemBaseProps = {
-    /** label标签文本,同antd Form.Item的label,只能是string */
-    label?: string;
-    /** name标签文本,同antd Form.Item的name */
-    name?: string | number | (string | number)[];
-    /** Form.Item 的其他属性 */
+export type RenderType = 'custom' | 'dInput' | 'ipAddress' | 'input' | 'textArea' | 'password' | 'inputNumber' | 'autoComplete' | 'dSelect' | 'select' | 'dCascader' | 'cascader' | 'dTreeSelect' | 'treeSelect' | 'datePicker' | 'dRangePicker' | 'timePicker' | 'rangePicker' | 'mentions' | 'checkbox' | 'checkboxGroup' | 'radio' | 'radioGroup' | 'rate' | 'slider' | 'switch' | 'transfer' | 'upload' | 'dUpload' | 'button' | 'divider';
+export type DItemBaseProps = Pick<FormItemProps, 'label' | 'name'> & {
     formItemProps?: FormItemProps & {
         grid?: Omit<ColProps, 'prefixCls'>;
     };

package/dist/esm/DSelect/index.d.ts

@@ -11,7 +11,7 @@ export type DSelectProps = Omit<SelectProps, 'options' | 'onSearch' | 'loading'>
     /** 是否开启防抖： true表示800毫秒，true表示默认值，false或0表示不开启 */
     debounce?: boolean | number;
 };
-declare const DSelect: React.ForwardRefExoticComponent<Omit<SelectProps<any, DefaultOptionType>, "options" | "onSearch" | "loading"> & {
+declare const DSelect: React.ForwardRefExoticComponent<Omit<SelectProps<any, DefaultOptionType>, "loading" | "options" | "onSearch"> & {
     /** antd的onSearch属性，onSearch有效时showSearch自动为true */
     onSearch?: ((params?: any) => Promise<DefaultOptionType[] | any[]>) | undefined;
     /** antd的options属性，可以是一个options数组，或一个返回等价options数组的promise */

package/dist/esm/DynamicFormItem/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from 'antd';
+import type { FormListProps } from 'antd/lib/form/FormList';
+import type { DItemProps } from '../DForm/DItem';
+import './index.less';
+export interface DynamicFormItemProps extends Omit<FormListProps, 'children'> {
+    /** 表单项配置 */
+    itemConfig: DItemProps | DItemProps[];
+    /** 初始值 */
+    value?: any[];
+    /** 新增按钮文本 */
+    addButtonText?: string;
+    /** 新增按钮属性 */
+    addButtonProps?: React.ComponentProps<typeof Button>;
+    /** 是否添加到头部 */
+    addAtHead?: boolean;
+    /** 删除按钮文本 */
+    removeButtonText?: string;
+    /** 删除按钮属性 */
+    removeButtonProps?: React.ComponentProps<typeof Button>;
+    /** 最小项数 */
+    minItems?: number;
+    /** 最大项数 */
+    maxItems?: number;
+    /** 是否显示添加按钮 */
+    showAdd?: boolean;
+    /** 是否显示删除按钮 */
+    showRemove?: boolean;
+    /** 添加按钮位置 */
+    addPosition?: 'top' | 'bottom';
+}
+declare const DynamicFormItem: React.FC<DynamicFormItemProps>;
+export default DynamicFormItem;

package/dist/esm/DynamicFormItem/index.js

@@ -0,0 +1,98 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["name"];
+import React from 'react';
+import { Button, Form, Space } from 'antd';
+import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import DForm from "../DForm";
+import "./index.less";
+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 DynamicFormItem = function DynamicFormItem(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? 'dynamicItems' : _props$name,
+    _props$initialValue = props.initialValue,
+    initialValue = _props$initialValue === void 0 ? [undefined] : _props$initialValue,
+    rules = props.rules,
+    itemConfig = props.itemConfig,
+    _props$addButtonText = props.addButtonText,
+    addButtonText = _props$addButtonText === void 0 ? '添加' : _props$addButtonText,
+    _props$addButtonProps = props.addButtonProps,
+    addButtonProps = _props$addButtonProps === void 0 ? {} : _props$addButtonProps,
+    _props$addAtHead = props.addAtHead,
+    addAtHead = _props$addAtHead === void 0 ? false : _props$addAtHead,
+    removeButtonText = props.removeButtonText,
+    _props$removeButtonPr = props.removeButtonProps,
+    removeButtonProps = _props$removeButtonPr === void 0 ? {} : _props$removeButtonPr,
+    _props$minItems = props.minItems,
+    minItems = _props$minItems === void 0 ? 0 : _props$minItems,
+    maxItems = props.maxItems,
+    _props$showAdd = props.showAdd,
+    showAdd = _props$showAdd === void 0 ? true : _props$showAdd,
+    _props$showRemove = props.showRemove,
+    showRemove = _props$showRemove === void 0 ? true : _props$showRemove,
+    _props$addPosition = props.addPosition,
+    addPosition = _props$addPosition === void 0 ? 'bottom' : _props$addPosition;
+  var renderItem = function renderItem(_ref, index, _ref2, totalFieldsCount) {
+    var key = _ref.key,
+      name = _ref.name;
+    var remove = _ref2.remove;
+    var nested = Array.isArray(itemConfig) && itemConfig.length > 0;
+    return /*#__PURE__*/_jsxs(Space, {
+      align: "start",
+      className: "".concat(nested ? 'dynamic-form-item nested' : 'dynamic-form-item single'),
+      children: [nested ? itemConfig.map(function (config, idx) {
+        var configName = config.name,
+          restConfig = _objectWithoutProperties(config, _excluded);
+        return /*#__PURE__*/_jsx(DForm.Item, _objectSpread(_objectSpread({}, restConfig), {}, {
+          name: [name, configName]
+        }), "dynamic-item-".concat(idx));
+      }) : /*#__PURE__*/_jsx(DForm.Item, _objectSpread({}, itemConfig)), showRemove && totalFieldsCount > minItems && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        type: "link",
+        danger: true,
+        icon: /*#__PURE__*/_jsx(MinusCircleOutlined, {}),
+        onClick: function onClick() {
+          return remove(name);
+        },
+        title: removeButtonText || '移除'
+      }, removeButtonProps), {}, {
+        children: removeButtonText
+      }))]
+    }, key);
+  };
+  var renderAddButton = function renderAddButton(_ref3, totalFieldsCount, position) {
+    var add = _ref3.add;
+    if (!showAdd || maxItems && totalFieldsCount >= maxItems) return null;
+    return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      type: "dashed",
+      block: true,
+      onClick: function onClick() {
+        if (addAtHead) {
+          add('', 0);
+        } else {
+          add();
+        }
+      },
+      icon: /*#__PURE__*/_jsx(PlusCircleOutlined, {}),
+      style: {
+        marginBottom: position === 'top' ? '8px' : 0
+      }
+    }, addButtonProps), {}, {
+      children: addButtonText
+    }));
+  };
+  return /*#__PURE__*/_jsx(Form.List, {
+    name: name,
+    initialValue: initialValue,
+    rules: rules,
+    children: function children(fields, operation) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [addPosition === 'top' && renderAddButton(operation, fields.length, 'top'), fields.map(function (field, index) {
+          return renderItem(field, index, operation, fields.length);
+        }), addPosition === 'bottom' && renderAddButton(operation, fields.length, 'bottom')]
+      });
+    }
+  });
+};
+export default DynamicFormItem;

package/dist/esm/DynamicFormItem/index.less

@@ -0,0 +1,28 @@
+.dynamic-form-item {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  .ant-form-item {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  .ant-btn-link {
+    flex-shrink: 0;
+  }
+
+  &.single {
+    .ant-space-item:first-of-type {
+      display: flex;
+      flex: 1;
+    }
+  }
+}
+
+// 隐藏其他label，只显示第一个但占位
+.dynamic-form-item ~ .dynamic-form-item .ant-col.ant-form-item-label {
+  visibility: hidden;
+}

package/dist/esm/InfiniteScrollList/index.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
@@ -15,8 +16,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var InfiniteScrollList = function InfiniteScrollList(props) {
   var _listData$data, _listData$data2;
   var loadMore = props.loadMore,
-    _props$initialParams = props.initialParams,
-    initialParams = _props$initialParams === void 0 ? {} : _props$initialParams,
+    initialParams = props.initialParams,
     _props$itemKey = props.itemKey,
     itemKey = _props$itemKey === void 0 ? 'id' : _props$itemKey,
     _props$containerId = props.containerId,
@@ -41,7 +41,7 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
   var pageParamsRef = useRef(_objectSpread({
     current: 1,
     size: 10
-  }, initialParams));
+  }, initialParams || {}));
   var loadingRef = useRef(false);
   var scrollRef = useRef(null);
   var _useState = useState({
@@ -112,7 +112,8 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
     }
   }, [listData]);
   useEffect(function () {
-    if (Reflect.ownKeys(initialParams).length > 0) {
+    var currentInitialParams = initialParams && _typeof(initialParams) === 'object' ? initialParams : {};
+    if (Reflect.ownKeys(currentInitialParams).length > 0) {
       var _scrollRef$current;
       scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo({
         top: 0,
@@ -121,10 +122,10 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
       pageParamsRef.current = _objectSpread({
         current: 1,
         size: 10
-      }, initialParams);
+      }, currentInitialParams);
     }
     handleLoadMore();
-  }, [initialParams]);
+  }, [initialParams, handleLoadMore]);
   return /*#__PURE__*/_jsxs("div", {
     id: containerId,
     className: "scroll-container",