@cqsjjb/jjb-react-admin-component 3.2.0-rc.1 → 3.3.0-beta.1

package/BMap/README.md

@@ -0,0 +1,58 @@
+百度地图组件
+
+## 代码演示
+
+```jsx
+import { useState } from 'react';
+import { Button } from 'antd';
+import BMap from '@cqsjjb/jjb-react-admin-component/BMap';
+
+function App() {
+  const [ open, setOpen ] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>打开地图</Button>
+      {open && (
+        <BMap
+          onOk={data => {
+            console.log(data);
+            setOpen(false);
+          }}
+          onCacnel={() => {
+            setOpen(false);
+          }}
+        />
+      )}
+    </>
+  )
+}
+```
+
+## API
+
+| 属性       | 说明   |                                                    类型                                                     |     默认值 |
+|----------|:-----|:---------------------------------------------------------------------------------------------------------:|--------:|
+| lng      | 经度   |                                                 `number`                                                  | 116.404 |
+| lat      | 纬度   |                                                 `number`                                                  |  39.915 |
+| title    | 弹窗标题 |                                                 `string`                                                  |    百度地图 |
+| width    | 弹窗宽度 |                                                 `number`                                                  |     700 |
+| onOk     | 确认回调 | (data: { lng: number, lat: number, comp: <span style="color: red">IComp</span>, compText: Text }) => void |       - |
+| onCancel | 取消回调 |                                               `() => void`                                                |     700 |
+
+## 确认回调-IComp
+
+| 属性           | 说明  |    类型    | 默认值 |
+|--------------|:----|:--------:|----:|
+| province     | 省份  | `string` |   - |
+| city         | 城市  | `string` |   - |
+| district     | 区县  | `string` |   - |
+| street       | 街道  | `string` |   - |
+| streetNumber | 门牌号 | `string` |   - |
+
+## 常见问题
+* 未导入百度地图文件，生成地图失败！
+  
+      请确认应用public/index.html中是否导入百度地图SDK。
+* onOk确认回调compText为undefined
+  
+      请确认百度地图是否授权Web应用。

package/Editor/README.md

@@ -0,0 +1,57 @@
+富文本组件组件，基于WangEditor实现。
+
+## 代码演示
+
+```jsx
+import React from 'react';
+import { Form } from 'antd';
+import Editor from '@cqsjjb/jjb-react-admin-component/Editor';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item
+        name="content"
+        label="内容"
+      >
+        <Editor />
+      </Form.Item>
+    </Form>
+  )
+}
+```
+
+## API
+
+| 属性                  | 说明                       |                类型                 |                                   默认值 |
+|---------------------|:-------------------------|:---------------------------------:|--------------------------------------:|
+| bordered            | 是否要边框                    |             `string`              |                                 false |
+| borderStyle         | 边框样式，`bordered`为`true`有效 |             `string`              |                                 solid |
+| borderColor         | 边框颜色，`bordered`为`true`有效 |             `string`              |                               #e8e8e8 |
+| borderWidth         | 边框宽度，`bordered`为`true`有效 |             `number`              |                                     1 |
+| borderRadius        | 边框圆角，`bordered`为`true`有效 |             `number`              |                                     2 |
+| value               | 内容，受控                    |             `string`              |                                     - |
+| mode                | 模式                       |        `default` `simple`         |                               default |
+| height              | 高度                       |             `string`              |                                   300 |
+| zIndex              | 层级                       |             `string`              |                                  1000 |
+| disabled            | 是否禁用                     |             `boolean`             |                                 false |
+| uploadUrl           | 上传地址                     |             `string`              | /attachment/files/upload-speed-simple |
+| uploadFileName      | 上传文件名                    |             `string`              |                                  file |
+| uploadImageFileSize | 图片上传大小，单位`byte`          |             `number`              |                                   5MB |
+| uploadVideoFileSize | 视频上传大小，单位`byte`          |             `number`              |                                   5MB |
+| uploadHeaders       | 上传请求头                    |     `Record<string, string>`      |                                     - |
+| uploadCustomRequest | 自定义上传                    | `(file: File) => Promise<string>` |                                     - |
+| placeholder         | 占位符                      |             `string`              |                                请输入... |
+| onBlur              | 失去焦点回调                   |           `() => void`            |                                     - |
+| onFocus             | 获得焦点回调                   |      `() => void() => void`       |                                     - |
+| onChange            | 内容变化回调、受控                |     `(value: string) => void`     |                                     - |
+| ref                 | 实例                       |       `React.Ref<EditorFC>`       |                                     - |
+
+## EditorFC
+
+| 属性                | 说明       |            类型            | 默认值 |
+|-------------------|:---------|:------------------------:|----:|
+| getEditorInstance | 获取编辑器实例  |       `() => any`        |   - |
+| getHtml           | 手动获取html |      `() => string`      |   - |
+| setHtml           | 手动设置html | `(html: string) => void` |   - |
+| getPlainText      | 手动获取纯文本  |      `() => string`      |   - |

package/FileUploader/README.md

@@ -0,0 +1,51 @@
+文件上传组件
+
+## 代码演示
+
+```jsx
+import React, { useState } from 'react';
+import { Form } from 'antd';
+import FileUploader, { getValueProps, getValueFromEvent } from '@cqsjjb/jjb-react-admin-component/FileUploader';
+
+function App() {
+  const [ form ] = Form.useForm();
+  return (
+    <Form>
+      <Form.Item
+        label="文件图片"
+        name="FileUrl"
+        getValueProps={getValueProps}
+        getValueFromEvent={getValueFromEvent}
+      >
+        <FileUploader action="httpx://xxx.xxx.xx" />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+`Array<SearchFormConfig>`
+
+## API
+
+| 属性                         | 说明                                                                   |                           类型                           |   默认值 |
+|----------------------------|:---------------------------------------------------------------------|:------------------------------------------------------:|------:|
+| size                       | 文件大小，单位：KB                                                           |                        `number`                        |  5120 |
+| buttonProps                | 组件内部按钮属性 参考 https://ant-design.antgroup.com/components/button-cn#api |                     `ButtonProps`                      |     - |
+| data                       | 额外的数据                                                                |                 `Record<string, any>`                  |     - |
+| value                      | 值，受控                                                                 |                         `any`                          |     - |
+| accept                     | 上传类型 参考`MIME`类型                                                      |                        `string`                        |     * |
+| action                     | 组件高度                                                                 |                        `string`                        |     - |
+| preview                    | 是否支持预览                                                               |                       `boolean`                        | false |
+| headers                    | 请求头                                                                  |                 `Record<string, any>`                  |     - |
+| maxCount                   | 最多上传数，`multiple`为`true`有效                                            |                        `number`                        |    99 |
+| multiple                   | 上传多个文件                                                               |                       `boolean`                        | false |
+| disabled                   | 是否禁用                                                                 |                       `boolean`                        | false |
+| fieldName                  | 上传文件的字段名                                                             |                        `string`                        |  file |
+| showDelete                 | 显示删除图标                                                               |                       `boolean`                        |  true |
+| customRequest              | 自定义请求                                                                |             `(res: AxiosResponse) => void`             |     - |
+| onChange                   | 受控值改变回调                                                              |                 `(value: any) => void`                 |     - |
+| onBeforeUploadVerifySize   | 上传前验证文件大小                                                            | `(fileSize: number, maxSize: number) => Promise<void>` |     - |
+| onBeforeUploadVerifyAccept | 上传前验证文件类型                                                            | `(fileType: string, accept: string) => Promise<void>`  |     - |
+
+**注意：这个组件的`multiple`仅为可以上传多个文件，但不是支持选择多个文件，若要上传选择多个文件，建议使用`antd/Upload`组件**

package/FormilyDescriptions/README.md

@@ -0,0 +1,64 @@
+动态表单详情渲染
+
+## 代码演示
+
+```jsx
+import React from 'react';
+import { Form } from 'antd';
+import FormilyDescriptions from '@cqsjjb/jjb-react-admin-component/FormilyDescriptions';
+
+function App() {
+  // 这段配置数据从接口获取
+  const schema = [
+    {
+      fieldCode: 'name',
+      fieldDataTypeEnum: 'varchar',
+      fieldLength: 255,
+      fieldSort: 0,
+      formType: 'Input',
+      fromComponentEnum: 'FIELD_TEXT',
+      fromComponentInfoEnum: 'SINGLE_LINE_TEXT_SECTION',
+      name: '用户名',
+      parentCode: null,
+      requiredEnum: 'TRUE'
+    }
+  ];
+
+  return (
+    <FormilyDescriptions
+      schema={schema}
+      values={{ name: '张三' }}
+    />
+  )
+}
+```
+
+## API
+
+| 属性             | 说明                                                                        |                             类型                              |     默认值 |
+|----------------|:--------------------------------------------------------------------------|:-----------------------------------------------------------:|--------:|
+| schema         | 表单配置 （注意不是原始配置`config`，而是后端转换后的配置）                                        |                   `Array<FormilySchema>`                    |       - |
+| values         | 表单数据                                                                      |               `Record<string, FormilyValue>`                |       - |
+| size           | 详情组件大小                                                                    |                 `small` `middle` `default`                  | default |
+| maxTagCount    | 内部`TreeSelect`组件的最大显示标签数量                                                 |                          `number`                           |       1 |
+| renderItemText | 自定义渲染文本                                                                   | `(params: { text: any; name?: string }) => React.ReactNode` |       - |
+| imageWidth     | 内部缩略图宽度                                                                   |                          `number`                           |      64 |
+| imageHeight    | 内部缩略图高度                                                                   |                          `number`                           |      64 |
+| extraFileLink  | 附件预览，`true`打开浏览器窗口，`false`弹窗打开                                            |                          `boolean`                          |   false |
+| imagePreview   | 图片预览配置，参考 https://ant-design.antgroup.com/components/image-cn#previewtype |                        `PreviewType`                        |       - |
+
+其属性参考 https://ant-design.antgroup.com/components/descriptions-cn#descriptions
+
+## FormilySchema
+
+| 属性                    | 说明            |       类型       | 默认值 |
+|-----------------------|:--------------|:--------------:|----:|
+| fieldCode             | 字段编码          |    `string`    |   - |
+| fieldDataTypeEnum     | 字段数据类型        |    `string`    |   - |
+| fieldLength           | 字段长度          |    `number`    |   - |
+| fieldSort             | 字段排序          |    `number`    |   - |
+| formType              | 表单组件类型        |    `string`    |   - |
+| fromComponentEnum     | 表单组件输出值格式类型枚举 |    `string`    |   - |
+| fromComponentInfoEnum | 表单组件信息枚举      |    `string`    |   - |
+| name                  | 字段名称          |    `string`    |   - |
+| requiredEnum          | 是否必填          | `TRUE` `FALSE` |   - |

package/ImageCropper/README.md

@@ -0,0 +1,84 @@
+单图裁剪组件
+
+## 代码演示
+
+```jsx
+import React, { useState, useRef } from 'react';
+import { Button } from 'antd';
+import ImageCropper from '~/components/publish/ImageCropper';
+
+function App() {
+  const cropper = useRef();
+  const [ resource, setResource ] = useState();
+  const onUpload = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.click();
+    input.onchange = e => {
+      setResource(e.target.files[ 0 ]);
+    };
+  };
+
+  const onCropper = () => {
+    console.log(cropper.current.toDataFile());
+  };
+  return (
+    <>
+      <Button onClick={onUpload}>
+        上传文件
+      </Button>
+      <Button onClick={onCropper}>
+        获取裁剪后的图片
+      </Button>
+      <ImageCropper
+        ref={cropper}
+        resource={resource}
+      />
+    </>
+  );
+}
+```
+
+## API
+
+| 属性       | 说明                  |              类型              |    默认值 |
+|----------|:--------------------|:----------------------------:|-------:|
+| width    | 宽度                  |           `number`           |    400 |
+| height   | 高度                  |           `number`           |    400 |
+| locked   | 是否锁定裁剪框大小           |          `boolean`           |  false |
+| aspect   | 裁剪框宽高比              |           `number`           | 16 / 9 |
+| resource | 裁剪的资源，文件对象或`base64` |       `File` `string`        |      - |
+| ref      | 裁剪实例                | `React.Ref<ImageCropperRef>` |      - |
+
+## ImageCropperRef 裁剪实例
+
+| 属性                  | 说明                   |                     类型                     | 默认值 |
+|---------------------|:---------------------|:------------------------------------------:|----:|
+| toDataURL           | 转换为dataURL           |  `(quality?: number) => ToDataURLResult`   | 400 |
+| toDataFile          | 转换为dataFile          |          `() => ToDataFileResult`          | 400 |
+| toBlobURL           | 转换为blobURL           |               `() => string`               |   - |
+| toDataImageText     | 转换为dataImageText     |               `() => string`               |   - |
+| toDataImageInstance | 转换为dataImageInstance | `() => Promise<ToDataImageInstanceResult>` |   - |
+
+## ToDataURLResult
+
+| 属性     | 说明     |    类型    | 默认值 |
+|--------|:-------|:--------:|----:|
+| md5    | 文件MD5  | `string` |   - |
+| base64 | base64 | `string` |   - |
+
+## ToDataFileResult
+
+| 属性   | 说明    |    类型    | 默认值 |
+|------|:------|:--------:|----:|
+| md5  | 文件MD5 | `string` |   - |
+| file | 文件对象  |  `File`  |   - |
+
+## ToDataImageInstanceResult
+
+| 属性       | 说明   |         类型         | 默认值 |
+|----------|:-----|:------------------:|----:|
+| src      | 文件资源 |      `string`      |   - |
+| width    | 宽度   |      `number`      |   - |
+| height   | 高度   |      `number`      |   - |
+| instance | 实例   | `HTMLImageElement` |   - |

package/ImageUploader/README.md

@@ -0,0 +1,73 @@
+单图上传组件
+
+## 代码演示
+
+```jsx
+import { useState } from 'react';
+import { Button, Form } from 'antd';
+import ImageUploader, { getValueProps, getValueFromEvent } from '@cqsjjb/jjb-react-admin-component/ImageUploader';
+
+function App() {
+  const [ form ] = Form.useForm();
+  return (
+    <Form>
+      <Form.Item
+        label="上传图片"
+        name="imageUrl"
+        getValueProps={getValueProps}
+        getValueFromEvent={getValueFromEvent}
+      >
+        <ImageUploader action="httpx://xxx.xxx.xx" />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+## API
+
+| 属性                | 说明                           |             类型              |                                         默认值 |
+|-------------------|:-----------------------------|:---------------------------:|--------------------------------------------:|
+| wh                | 宽高比                          |          `string`           |                                       50*50 |
+| tip               | 提示文本                         |          `string`           |                                        点击上传 |
+| size              | 文件大小，单位：KB                   |          `number`           |                                        5120 |
+| data              | 额外的数据                        |    `Record<string, any>`    |                                           - |
+| value             | 值，受控                         |            `any`            |                                           - |
+| width             | 组件宽度                         |          `number`           |                                         120 |
+| height            | 组件高度                         |          `number`           |                                         120 |
+| action            | 组件高度                         |          `number`           |                                         120 |
+| preview           | 是否支持预览                       |          `boolean`          |                                        true |
+| disabled          | 是否禁用                         |          `boolean`          |                                       false |
+| fieldName         | 上传文件的字段名                     |          `string`           |                                        file |
+| borderStyle       | 边框样式                         |          `string`           |                                      dashed |
+| borderColor       | 边框颜色                         |          `string`           |                                     #d9d9d9 |
+| borderWidth       | 边框宽度                         |          `number`           |                                           1 |
+| borderRadius      | 边框圆角                         |          `number`           |                                           2 |
+| cropper           | 是否开启裁剪                       |          `boolean`          |                                       false |
+| cropperConfig     | 裁剪配置，`cropper`为`true`时有效     |       `CropperConfig`       |                                           - |
+| backgroundColor   | 背景颜色                         |          `string`           |                                     #fafafa |
+| customRequest     | 自定义请求                        | `(res: {data: any}) => void | Promise<{fileId: string, fileUrl: string}>` |        - |
+| onChange          | 受控值改变回调                      |   `(value: any) => void`    |                                           - |
+| compression       | 是否支持压缩                       |          `boolean`          |                                       false |
+| compressionConfig | 压缩配置，`compression`为`true`时有效 |     `CompressionConfig`     |                                           - |
+| needToken         | 是否需要token                    |          `boolean`          |                                        true |
+
+## CropperConfig 裁剪配置
+
+| 属性     | 说明        |    类型     |    默认值 |
+|--------|:----------|:---------:|-------:|
+| width  | 宽度        | `number`  |    400 |
+| height | 高度        | `number`  |    400 |
+| locked | 锁定不可缩放裁剪框 | `boolean` |  false |
+| aspect | 宽高比       | `number`  | 16 / 9 |
+
+## CompressionConfig 压缩配置
+
+| 属性       | 说明   |       类型        |  默认值 |
+|----------|:-----|:---------------:|-----:|
+| quality  | 压缩质量 |    `number`     |  0.6 |
+| backType | 压缩类型 | `file` `base64` | file |
+
+## Form表单辅助
+* getValueFromEvent
+* getValueProps

package/ListDataContainer/index.d.ts

@@ -0,0 +1,190 @@
+
+import React, { ReactNode, ReactElement, RefAttributes } from 'react';
+import { TableProps, FormItemProps } from 'antd';
+import { OverTableProps } from '../Table';
+
+/**
+ * 基础表单项组件的通用类型约束
+ * 描述：定义搜索表单中所有表单项组件（如 Select、Input、DatePicker 等）的公共属性，
+ * 确保不同类型的表单项都能兼容「清除、占位符、子元素」等基础能力
+ * @type {BaseFieldComponent}
+ */
+type BaseFieldComponent = React.ComponentType<{
+    /** 是否支持清空选中值/输入值（通用表单项能力） */
+    allowClear?: boolean;
+    /** 输入/选择提示文本（提升用户体验） */
+    placeholder?: string;
+    /** 组件的子元素（如 Select.Option、DatePicker 的下拉内容等） */
+    children?: ReactNode;
+    /** 兼容组件的自定义属性（如 Select 的 options、Input 的 maxLength 等，避免类型约束过死） */
+    [key: string]: any;
+}>;
+
+/**
+ * 搜索表单单个配置项的接口
+ * 描述：用于定义搜索表单中每一个表单项的完整配置，包括组件类型、字段名、校验规则等，
+ * 组件内部会根据该配置自动生成对应的 Form.Item 结构
+ * 
+ * @interface SearchFormItemConfig
+ */
+export interface SearchFormItemConfig {
+    /** 表单项的核心组件（如 Select、Input、DatePicker 等，需符合 BaseFieldComponent 类型） */
+    field: BaseFieldComponent;
+    /** 表单项对应的表单字段名（与 form.validateFields() 返回的键名一致，用于数据提交） */
+    name: string;
+    /** 表单项的标签文本（显示在输入组件左侧，用于用户识别） */
+    label: string;
+    /** 传递给表单项组件的自定义属性（如 Select 的 options、Input 的 disabled 等） */
+    fieldProps?: Record<string, any>;
+    /** 传递给 antd Form.Item 的自定义属性（如 rules、hasFeedback、className 等） */
+    itemProps?: FormItemProps & Record<string, any>;
+    /** 表单项组件的子元素（如 Select.Option 列表、Radio.Group 的 Radio 按钮等） */
+    content?: ReactNode;
+    /** 是否为必填项（为 true 时，组件内部会自动添加「必填校验规则」和「*」标记） */
+    required?: boolean;
+    /** 兼容其他未明确列举的自定义属性（如 Form.Item 的 extra 提示文本等，预留扩展能力） */
+    [key: string]: any;
+}
+
+/**
+ * ListDataContainer 组件的 Props 接口
+ * 描述：定义通用列表容器组件的所有可配置属性，支持表格类型切换、搜索表单配置、分页初始值等，
+ * 通过泛型 T 关联「表格类型」和「表格属性」，确保类型一致性
+ * 
+ * @interface ListDataContainerProps
+ * @template T - 表格类型开关（true = 使用 ProTable；false = 使用 antd 原生 Table，默认 false）
+ */
+export interface ListDataContainerProps<T extends boolean = false> {
+    /**
+     * 表格列配置
+     * 描述：遵循 antd Table 组件的 columns 规范（即使使用 ProTable，列配置结构也与 antd 一致），
+     * 用于定义表格的列名、数据映射、渲染逻辑等
+     * @type {TableProps<any>['columns']}
+     */
+    columns: TableProps<any>['columns'];
+
+    /**
+     * 数据请求接口函数
+     * 描述：组件内部会调用该函数获取表格数据，需返回包含「列表数据」和「总数」的 Promise，
+     * 参数自动携带「分页信息」和「搜索表单值」，支持外部传入参数覆盖
+     * 
+     * @param {Object} params - 请求参数（分页参数 + 搜索表单参数 + 外部覆盖参数）
+     * @param {number} params.page - 当前页码（由组件内部分页状态维护）
+     * @param {number} params.pageSize - 每页条数（由组件内部分页状态维护）
+     * @param {any} params[key] - 搜索表单字段（与 searchFormConfig 中的 name 对应）
+     * @returns {Promise<Object>} 数据响应（需包含 list 和 total 字段）
+     * @returns {Array} response.data.list - 表格数据源数组
+     * @returns {number} response.data.total - 数据总数（用于分页计算）
+     */
+    fetchDataApi: (params: {
+        page: number;
+        pageSize: number;
+        [key: string]: any;
+    }) => Promise<{
+        data: {
+            list: any[];
+            total: number;
+            [key: string]: any;
+        };
+        [key: string]: any;
+    }>;
+
+    /**
+     * 搜索表单配置数组
+     * 描述：由 SearchFormItemConfig 类型的配置项组成，组件内部会根据该数组自动生成搜索表单，
+     * 不传递则不显示搜索表单
+     * @type {SearchFormItemConfig[]}
+     * @optional
+     */
+    searchFormConfig?: SearchFormItemConfig[];
+
+    /**
+     * 表格行的唯一标识字段名
+     * 描述：用于 antd Table/ProTable 的 rowKey 属性，确保表格行的唯一性（避免渲染警告），
+     * 默认值为 'id'（若数据的唯一标识字段不是 id，需手动传递）
+     * @type {string}
+     * @default 'id'
+     * @optional
+     */
+    rowKey?: string;
+
+    /**
+     * 初始分页配置
+     * 描述：定义表格初始的分页状态（如默认页码、每页条数、是否显示分页控件等），
+     * 基于 antd Table 的 pagination 类型扩展，确保分页能力符合通用需求
+     * 
+     * @type {TableProps<any>['pagination'] & Object}
+     * @property {number} [current=1] - 默认当前页码
+     * @property {number} [pageSize=10] - 默认每页条数
+     * @property {boolean} [showSizeChanger=true] - 是否显示「条数切换」控件（如 10/20/50 条）
+     * @property {boolean} [showQuickJumper=true] - 是否显示「快速跳转」输入框
+     * @property {Function} [showTotal] - 总数显示文案（如 (total) => `共 ${total} 条`）
+     * @optional
+     */
+    initialPagination?: TableProps<any>['pagination'] & {
+        current?: number;
+        pageSize?: number;
+        showSizeChanger?: boolean;
+        showQuickJumper?: boolean;
+        showTotal?: (total: number) => ReactNode;
+    };
+
+    /**
+     * 表格组件的自定义属性
+     * 描述：根据 proTable 开关动态匹配对应的表格属性类型，支持覆盖组件内部的默认配置（如 loading、pagination 等）
+     * - 当 proTable={true} 时：支持 OverTableProps（项目自定义 ProTable 的所有属性）
+     * - 当 proTable={false} 时：支持 TableProps（antd 原生 Table 的所有属性）
+     * 
+     * @type {T extends true ? OverTableProps<any> : TableProps<any>}
+     * @optional
+     * @example
+     */
+    tableProps?: T extends true
+    ? OverTableProps  // ProTable 专属属性（如 search、toolBar 等）
+    : TableProps<any>;    //    antd 原生 Table 属性（如 bordered、scroll 等）
+
+    /**
+     * 表格类型切换开关
+     * 描述：控制组件内部使用「项目自定义 ProTable」还是「antd 原生 Table」，
+     * 泛型 T 会自动根据该值推断，确保 tableProps 类型匹配
+     * 
+     * @type {T}
+     * @default false - 默认使用 antd 原生 Table
+     * @optional
+     */
+    proTable?: T;
+}
+
+/**
+ * ListDataContainer 组件通过 ref 暴露的方法接口
+ * 描述：组件内部通过 useImperativeHandle 暴露的方法，允许父组件调用以实现「数据刷新」等能力
+ * 
+ * @interface ListDataContainerExposedMethods
+ */
+export interface ListDataContainerExposedMethods {
+    /**
+     * 数据刷新方法
+     * 描述：触发表格数据重新请求，支持传入参数覆盖默认的「分页+搜索」参数，
+     * 适用于父组件主动刷新数据（如弹窗关闭后刷新列表）
+     * 
+     * @param {Record<string, any>} [overrideParams] - 覆盖请求的参数（如 { status: 1, type: 2 }）
+     * @returns {Promise<void>} - 数据请求完成的 Promise（可用于等待刷新结束）
+     */
+    loadDataSource: (overrideParams?: Record<string, any>) => Promise<void>;
+}
+
+/**
+ * 通用列表数据容器组件声明
+ * 描述：泛型组件，整合「搜索表单 + 表格 + 分页 + 数据请求」的完整列表解决方案，
+ * 支持切换表格类型，暴露刷新方法，适用于项目中各类列表页面（如数据管理、列表查询等）
+ * 
+ * @component ListDataContainer
+ * @template T - 表格类型开关（true = ProTable；false = antd Table，默认 false）
+ * @param {ListDataContainerProps<T> & RefAttributes<ListDataContainerExposedMethods>} props - 组件 props
+ * @returns {ReactElement} - 列表容器组件的 React 元素
+ */
+declare const ListDataContainer: <T extends boolean = false>(
+    props: ListDataContainerProps<T> & RefAttributes<ListDataContainerExposedMethods>
+) => ReactElement;
+
+export default ListDataContainer;

package/ListDataContainer/index.js

@@ -0,0 +1,205 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { Table, Row, Col, Form } from 'antd';
+import { isEqual } from 'lodash';
+import SearchForm from '../SearchForm';
+import ProTable from '../Table';
+
+/**
+ * @component ListDataContainer
+ * @description 通用列表数据容器组件，提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
+ * 
+ * @props {Array} columns - 表格列配置，遵循Ant Design Table组件的columns规范
+ * @props {Function} fetchDataApi - 数据获取API函数，接收分页和搜索参数，返回包含list和total的对象
+ * @props {Array} searchFormConfig - 搜索表单配置数组
+ *   @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
+ *   @param {string} searchFormConfig[].name - 表单项字段名
+ *   @param {string} searchFormConfig[].label - 表单项标签
+ *   @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
+ *   @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
+ *   @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
+ *   @param {boolean} searchFormConfig[].required - 是否必填
+ * @props {string} rowKey - 表格行键值，默认为'id'
+ * @props {Object} initialPagination - 初始分页配置，包含current、pageSize等分页属性
+ * @props {Object} tableProps - 传递给Table组件的属性
+ * @props {boolean} proTable - 是否使用ProTable组件，默认为false
+ * @example
+ * // 基础用法
+ * <ListDataContainer
+ *   columns={tableColumns}
+ *   fetchDataApi={getCourseList}
+ *   searchFormConfig={[
+ *     {
+ *       field: Select,
+ *       name: 'status',
+ *       label: '状态',
+ *     }
+ *     {
+ *       field: Input,
+ *       name: 'name',
+ *       label: '名称',
+ *       required: true,
+ *     }
+ *   ]}
+ * />
+ * 
+ */
+
+const SELECT_COMPONENTS = ['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Checkbox', 'Radio', 'Switch', 'Slider', 'Upload'];
+const INPUT_COMPONENTS = ['Input', 'InputNumber'];
+const ListDataContainer = /*#__PURE__*/forwardRef(({
+  columns,
+  fetchDataApi,
+  searchFormConfig = [],
+  rowKey = 'id',
+  initialPagination = {
+    current: 1,
+    pageSize: 10,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: total => `共 ${total} 条记录`
+  },
+  tableProps = {},
+  proTable = false
+}, ref) => {
+  const [form] = Form.useForm();
+  const [tableData, setTableData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState(initialPagination);
+  const [totalCount, setTotalCount] = useState(0);
+  const getComponentName = Component => {
+    return Component.displayName || Component.constructor.name;
+  };
+
+  /**
+   * 数据加载与刷新方法
+   * @param {Object} [overrideParams={}] - 可选，用于覆盖内部参数的键值对
+   *   若传入，会覆盖同名的表单参数和分页参数（如page、pageSize或搜索字段）
+   */
+  const loadDataSource = useCallback(async (overrideParams = {}) => {
+    if (!fetchDataApi) return;
+    setLoading(true);
+    try {
+      // 1. 获取组件内部的表单参数
+      const formValues = await form.validateFields();
+
+      // 2. 构造基础参数：分页参数 + 表单参数
+      const baseParams = {
+        page: pagination.current,
+        pageSize: pagination.pageSize,
+        ...formValues
+      };
+
+      // 3. 用外部传入的参数覆盖基础参数（同名参数以外部为准）
+      const requestParams = {
+        ...baseParams,
+        ...overrideParams
+      };
+
+      // 4. 发起请求
+      const response = await fetchDataApi(requestParams);
+      setTableData(response.data.list || []);
+      setTotalCount(response.data.total || 0);
+    } catch (error) {
+      console.error('列表数据请求失败：', error);
+      setTableData([]);
+      setTotalCount(0);
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchDataApi, pagination, form]);
+
+  // 暴露刷新方法给父组件
+  useImperativeHandle(ref, () => ({
+    // 外部调用时可传入覆盖参数
+    loadDataSource: (overrideParams = {}) => loadDataSource(overrideParams)
+  }));
+  const handleFinish = values => {
+    // 搜索时重置到第一页，并用表单值覆盖（values会合并到baseParams中）
+    setPagination(prev => ({
+      ...prev,
+      current: 1
+    }));
+    loadDataSource(values);
+  };
+  const handleReset = () => {
+    // 清空表单
+    form.setFieldsValue(searchFormConfig.reduce((obj, item) => {
+      obj[item.name] = undefined;
+      return obj;
+    }, {}));
+    // 重置分页并使用内部默认参数查询
+    setPagination(initialPagination);
+    loadDataSource();
+  };
+  const handlePaginationChange = newPagination => {
+    // 更新分页后，用新分页参数查询
+    setPagination(newPagination);
+  };
+
+  // 分页变化时自动重新加载
+  useEffect(() => {
+    // 避免初始加载时重复调用，判断两个对象是否相等
+    if (!isEqual(pagination, initialPagination)) {
+      loadDataSource();
+    }
+  }, [pagination, loadDataSource]);
+  const generateFormItems = () => {
+    return searchFormConfig.map((item, index) => {
+      const {
+        field: FieldComponent,
+        name,
+        label,
+        required,
+        fieldProps = {},
+        itemProps = {},
+        content,
+        ...restProps
+      } = item;
+      return /*#__PURE__*/React.createElement(Form.Item, _extends({
+        key: `search-item-${name}-${index}`,
+        name: name,
+        label: label
+      }, required ? {
+        required: true,
+        rules: [{
+          required: true,
+          message: `${SELECT_COMPONENTS.includes(getComponentName(FieldComponent)) ? '请选择' : '请输入'}${label}`
+        }]
+      } : {}, itemProps, restProps), /*#__PURE__*/React.createElement(FieldComponent, _extends({
+        allowClear: true,
+        placeholder: `${SELECT_COMPONENTS.includes(getComponentName(FieldComponent)) ? '请选择' : '请输入'}${label}`
+      }, fieldProps), content || null));
+    }).filter(Boolean);
+  };
+  const TableComponent = proTable ? ProTable : Table;
+  return /*#__PURE__*/React.createElement(Row, {
+    gutter: [16, 24]
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement(SearchForm, {
+    expand: true,
+    form: form,
+    loading: loading,
+    formLine: generateFormItems(),
+    onReset: handleReset,
+    onFinish: handleFinish
+  })), /*#__PURE__*/React.createElement(Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement(TableComponent, _extends({
+    columns: columns,
+    dataSource: tableData,
+    rowKey: rowKey,
+    loading: loading,
+    pagination: {
+      ...pagination,
+      total: totalCount
+    },
+    onChange: handlePaginationChange,
+    scroll: {
+      x: 'max-content'
+    },
+    bordered: true
+  }, tableProps))));
+});
+export default ListDataContainer;

package/PageLayout/README.md

@@ -0,0 +1,41 @@
+页面布局组件
+
+## 代码演示
+
+```jsx
+import { useState } from 'react';
+import { Button } from 'antd';
+import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';
+
+function App() {
+  return (
+    <PageLayout title="用户中心">
+      
+    </PageLayout>
+  )
+}
+```
+
+## API
+
+| 属性              | 说明         |       类型        |   默认值 |
+|-----------------|:-----------|:---------------:|------:|
+| title           | 页面标题       |    `string`     |     - |
+| extra           | 右上角扩展      |   `ReactNode`   |     - |
+| header          | 自定义头部      |   `ReactNode`   |     - |
+| footer          | 自定义底部      |   `ReactNode`   |     - |
+| history         | 路由历史对象     |    `History`    |     - |
+| noStyle         | 去除所有样式     |    `boolean`    | false |
+| noBorder        | 取消边框       |    `boolean`    | false |
+| formLine        | form 表单行   |  `ReactNode[]`  |     - |
+| formLineStyle   | form 表单行样式 | `CSSProperties` |     - |
+| previous        | 显示返回上一页    |    `boolean`    | false |
+| transparent     | 背景透明       |    `boolean`    | false |
+| contentStyle    | 内容区样式      | `CSSProperties` |     - |
+| footerStyle     | 底部样式       | `CSSProperties` |     - |
+| pageHeaderStyle | 头部样式       | `CSSProperties` |     - |
+| style           | 自定义返回事件    | `CSSProperties` |     - |
+| onBack          | 容器样式       |  `() => void`   |     - |
+
+
+注意：`previous`为`true`时`history`必传，否则点击返回无效。

package/SearchForm/README.md

@@ -0,0 +1,66 @@
+[搜索表单组件
+
+## 代码演示
+
+```jsx
+import { useState, userRef } from 'react';
+import { Button, Form, Input } from 'antd';
+import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
+import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';
+
+function App() {
+  const form = useRef();
+
+  // 提交
+  const onFinish = values => {
+
+  }
+
+  return (
+    <PageLayout
+      title="用户中心"
+      formLine={(
+        <SearchForm
+          form={form}
+          formLine={[
+            <Form.Item
+              noStyle
+              name="keyword"
+            >
+              <Input
+                allowClear
+                placeholder="请输入关键字"
+              />
+            </Form.Item>
+          ]}
+          onReset={() => {
+            form.current.submit();
+          }}
+          onFinish={onFinish}
+        />
+      )}
+    >
+      
+    </PageLayout>
+  )
+}
+```
+
+## API
+
+| 属性            | 说明                        |                       类型                        |   默认值 |
+|---------------|:--------------------------|:-----------------------------------------------:|------:|
+| form          | form 实例                   |         `React.RefObject<FormInstance>`         |     - |
+| style         | 样式                        |                 `CSSProperties`                 |     - |
+| expand        | 是否展开，受控模式                 |                    `boolean`                    | false |
+| defaultExpand | 内部默认展开状态，仅在 expand 未传入时生效 |                    `boolean`                    | false |
+| colSize       | 列数                        |                    `number`                     |     3 |
+| loading       | 查询 loading 状态             |                    `boolean`                    | false |
+| formLine      | 表单行节点数组                   |                  `ReactNode[]`                  |     - |
+| initialValues | 表单初始值                     |              `Record<string, any>`              |     - |
+| onRef         | 获取 form 实例回调（已废弃）         | `(form: React.RefObject<FormInstance>) => void` |     - |
+| onReset       | 重置回调                      |     `(values: Record<string, any>) => void`     |     - |
+| onFinish      | 提交回调                      |     `(values: Record<string, any>) => void`     |     - |
+| onExpand      | 展开/收起状态变化回调               |            `(open: boolean) => void`            |     - |
+
+]()

package/Table/README.md

@@ -0,0 +1,36 @@
+高级Table，基于ProAntd实现
+
+## 代码演示
+
+```jsx
+import Table from '@cqsjjb/jjb-react-admin-component/Table';
+
+function App() {
+  return (
+    <>
+      <Table
+        columns={[
+          {
+            title: 'ID',
+            dataIndex: 'id'
+          }
+        ]}
+        dataSource={[
+          {
+            id: 1
+          }
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## API
+
+| 属性              | 说明                                                           |    类型     |   默认值 |
+|-----------------|:-------------------------------------------------------------|:---------:|------:|
+| disabledResizer | 是否禁用内容区滚动，设置true自动将适配内容区滚动高度                                 | `boolean` | false |
+| storeIndex      | 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖 | `number`  |     - |
+
+其他属性参考 https://ant-design.antgroup.com/components/table-cn#api

package/Table/index.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 // @ts-ignore
 import type { TableProps } from 'antd';
 
-interface OverTableProps extends TableProps {
+export interface OverTableProps extends TableProps {
   // 是否禁用内容区滚动，默认-false
   disabledResizer?: boolean;
   // 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖

package/Table/index.js

@@ -88,7 +88,7 @@ export default function TablePro(props) {
   if (enabledResizer) {
     scroll.y = tableHeight;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({
     ghost: true,
     columnEmptyText: true,
     size: size,
@@ -113,5 +113,5 @@ export default function TablePro(props) {
       persistenceType: 'localStorage'
     },
     onSizeChange: setSize
-  })));
+  }, props)));
 }

package/TableAction/README.md

@@ -0,0 +1,56 @@
+表格操作项组件，当操作按钮数量大于最大可显示数量，多余部分显示为"..."并用下拉菜单显示。
+
+## 代码演示
+
+```jsx
+import { useState } from 'react';
+import { Button, Table } from 'antd';
+import TableAction from '@cqsjjb/jjb-react-admin-component/TableAction';
+
+function App() {
+  const [ open, setOpen ] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>打开地图</Button>
+      <Table
+        columns={[
+          {
+            title: 'ID',
+            dataIndex: 'id'
+          },
+          {
+            title: '操作',
+            render: () => (
+              <TableAction>
+                <a>
+                  编辑
+                </a>
+                <a>
+                  删除
+                </a>
+                <a>
+                  详情
+                </a>
+                {/*多余部分*/}
+                <a>
+                  复制
+                </a>
+              </TableAction>
+            )
+          }
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## API
+
+| 属性        | 说明                                                                    |      类型      |          默认值 |
+|-----------|:----------------------------------------------------------------------|:------------:|-------------:|
+| icon      | 图标                                                                    | `React.Node` | MoreOutlined |
+| maximum   | 最大显示数量，超出的会放入下拉菜单                                                     |   `number`   |            3 |
+| space     | 按钮之间的间距                                                               |   `number`   |            8 |
+| placement | 下拉菜单显示位置，参考 https://ant-design.antgroup.com/components/tooltip-cn#api |   `string`   |  bottomRight |
+| trigger   | 下拉触发方式，参考 https://ant-design.antgroup.com/components/tooltip-cn#api   |   `string`   |        hover |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.2.0-rc.1",
+  "version": "3.3.0-beta.1",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",
@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "axios": "^1.6.5",
+    "lodash": "^4.17.21",
     "spark-md5": "^3.0.2",
     "cropperjs": "^1.6.2",
     "@wangeditor-next/editor": "latest",
     "@cqsjjb-formily/renderer": "latest",
     "@ant-design/pro-layout": "latest",
     "use-antd-resizable-header": "latest",
-    "@ant-design/pro-components": "latest"
+    "@ant-design/pro-components": "latest",
+    "react-cropper": "2.3.3"
   }
 }

package/ControlWrapper/index.less

@@ -1,38 +0,0 @@
-@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
-
-.@{com-prefix-cls}-form-item-control-label-wrapper {
-  .@{com-prefix-cls}-form-item-control-label-span {
-    border: 1px solid #d9d9d9;
-    height: 32px;
-    line-height: 30px;
-    box-sizing: border-box;
-    margin-right: -1px;
-    padding: 0 2px 0 8px;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    white-space: nowrap;
-  }
-
-  &.@{com-prefix-cls}-form-item-control-label-has {
-    .@{com-prefix-cls}-select-selector, .@{com-prefix-cls}-picker, .@{com-prefix-cls}-input, .@{com-prefix-cls}-input-affix-wrapper {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-color: transparent !important;
-      &:hover, &:focus, &:focus-within{
-        border-left-color: @colorPrimary !important;
-      }
-    }
-  }
-
-  &-default {
-    .@{com-prefix-cls}-form-item-control-label-span {
-      border-color: #d9d9d9;
-    }
-  }
-
-  &-dark {
-    .@{com-prefix-cls}-form-item-control-label-span {
-      border-color: #424242;
-    }
-  }
-}