@zykj2024/much-library 1.1.7-beta.4 → 1.1.7-beta.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# much-library
+
+基于 ant-design 和 web 端一体化设计标准 实现的 React 组件库，旨在提高 B 端平台开发效率以及通用组件标准化。
+
+## 主要目录
+
+- /src 组件开发目录
+- /script 组件构建脚本目录
+- /docs 文档目录
+
+## 开发流程
+
+- 从 `main` 分支拉取组件分支 `feature/*`，例如：McInput 组件分支`feature/tree_panel`，若多人维护则增加个人标识`feature/tree_panel-csy`
+- 在 /src 中新建对应组件目录，书写组件.tsx 以及 文档.md，可执行 `npm run dev` 在文档 demo 上直接调试
+- css 采用约定命名规则，使用 less 语法，遵守 BEM 规范，给组件一个外层类名 `.mc-*`
+- /src/index.ts 导入组件，组件库支持按需引入
+- 更新 `log.md` 文件
+- 本地开发完毕后执行`npm run doctor` 校验，校验通过后可提交`develop`分支 MR，指向对应同学进行 Review 合并
+
+## 发布流程
+
+- npm 包发布，更新 version 版本号，执行`npm publish`即可。[much-library](https://www.npmjs.com/package/much-library)
+- docs 发布，执行`npm run docs:build`，通过 ssh 部署 docs-dist。[much-docs](http://frontend.yunxiacn.com/much-docs/)
+- 相关账号配置联系 @陈书妍（一匠）
+
+## 问题反馈
+
+- 使用过程中有任何问题，可到对应仓库提交 [issue](http://gitlab.yunxiacn.com/data-group-front/much-library/-/issues)
+- 需添加使用场景，是否必现，复现路径等细节
+- 紧急情况下，可以自行进行实行，提交 MR 即可
+
+## 关联资源
+
+- [web 端一体化设计](https://mastergo.com/file/124592686063679?fileOpenFrom=project&page_id=116%3A9034) @张乐（卡卡）
+- [dumi 组件框架](https://d.umijs.org/)

package/dist/McCascader/index.css

@@ -0,0 +1,60 @@
+.mc-cascader__label {
+  color: #262626;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  left: 11px;
+  z-index: 2;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.mc-cascader__label::after {
+  content: '\FF1A';
+  margin-left: 2px;
+}
+.mc-cascader__label.mc-cascader--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-cascader__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-cascader__content.ant-cascader.ant-select .ant-select-selector {
+  padding-left: var(--selector-pl);
+}
+.mc-cascader__content.ant-cascader.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+  color: #fff;
+  background: #325cf7;
+  padding-left: 4px;
+}
+.mc-cascader__content.ant-cascader.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item .ant-select-selection-item-content {
+  margin-right: 0;
+}
+.mc-cascader__content.ant-cascader.ant-select .ant-select-selector .ant-select-selection-item[title*='「'][title$='」'] {
+  color: var(--inexistent-color);
+}
+.mc-cascader__content.ant-cascader.ant-select.ant-select-single .ant-select-selector .ant-select-selection-search {
+  left: var(--selector-pl);
+}
+.mc-cascader__content.ant-cascader.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-placeholder {
+  left: var(--selector-pl);
+}
+.mc-cascader__content.ant-cascader.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-search {
+  margin-left: 0;
+}
+.mc-cascader.mc-cascader--inline .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  min-width: 0;
+  margin-right: 4px;
+}

package/dist/{esm/McCascader → McCascader}/index.js

@@ -6,7 +6,7 @@ var _excluded = ["style", "className", "label", "inexistent", "city", "value", "
 import { Cascader, Divider, Popover } from 'antd';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { cityData } from "./city";
-import "./index.less";
+import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var McCascader = /*#__PURE__*/forwardRef(function (props, ref) {

package/dist/McContainer/demo/actionBar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * title: 操作栏区域
+ * description: 若未设置该项，则不显示。`actionBarRender` 可自定义操作栏区域，提供批量操作按钮实例
+ * transform: true
+ * compact: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/actionBar.js

@@ -0,0 +1,118 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 操作栏区域
+ * description: 若未设置该项，则不显示。`actionBarRender` 可自定义操作栏区域，提供批量操作按钮实例
+ * transform: true
+ * compact: true
+ */
+
+import { useToggle } from "../../../packages/hooks/src";
+import { Button, Space, Switch } from 'antd';
+import { AddOutlined } from 'much-icons';
+import { McContainer, McInput } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var _selectedRows$length;
+  var dataSource = Array.from({
+    length: 5
+  }, function (_, index) {
+    return {
+      id: index + 1,
+      name: "\u59D3\u540D".concat(index + 1),
+      age: 18 + index
+    };
+  });
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRows = _useState2[0],
+    setSelectedRows = _useState2[1];
+  var _useToggle = useToggle(false),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    showCustomActionBar = _useToggle2[0],
+    toggle = _useToggle2[1].toggle;
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    })
+  });
+  var actionBar = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      type: "primary",
+      icon: /*#__PURE__*/_jsx(AddOutlined, {}),
+      children: "\u65B0\u589E"
+    }), /*#__PURE__*/_jsx(Button, {
+      children: "\u4E0A\u4F20"
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: '24px 24px 0'
+      },
+      children: ["\u662F\u5426\u81EA\u5B9A\u4E49\u6E32\u67D3\u64CD\u4F5C\u533A\uFF1A", /*#__PURE__*/_jsx(Switch, {
+        checked: showCustomActionBar,
+        onChange: toggle
+      })]
+    }), /*#__PURE__*/_jsx(McContainer, {
+      height: "100%",
+      queryItems: queryItems,
+      actionBar: actionBar,
+      actionBarRender: showCustomActionBar ? function (batchEl) {
+        return /*#__PURE__*/_jsxs(Space, {
+          size: 16,
+          style: {
+            marginBottom: 16
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            type: "primary",
+            children: "\u4E0B\u8F7D"
+          }), batchEl]
+        });
+      } : undefined,
+      batchNum: (_selectedRows$length = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) !== null && _selectedRows$length !== void 0 ? _selectedRows$length : 0,
+      onCancel: function onCancel() {
+        return setSelectedRows([]);
+      },
+      tableProps: {
+        columns: columns,
+        dataSource: dataSource,
+        rowKey: 'id',
+        rowSelection: {
+          selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
+            return item.id;
+          }),
+          preserveSelectedRowKeys: true,
+          onChange: function onChange(selectedRowKeys, selectedRows) {
+            return setSelectedRows(selectedRows);
+          }
+        }
+      }
+    })]
+  });
+});

package/dist/McContainer/demo/base.d.ts

@@ -0,0 +1,8 @@
+/**
+ * title: 基本用法
+ * description: 设置 `immediateQuery` 为 `false`，不触发首次查询；`immediateQuery` 默认为 `true`。
+ * transform: true
+ * compact: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/base.js

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 基本用法
+ * description: 设置 `immediateQuery` 为 `false`，不触发首次查询；`immediateQuery` 默认为 `true`。
+ * transform: true
+ * compact: true
+ */
+
+import { McContainer, McInput } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var tableData = Array.from({
+  length: 5
+}, function (_, index) {
+  return {
+    id: index + 1,
+    name: "\u59D3\u540D".concat(index + 1),
+    age: 18 + index
+  };
+});
+export default (function () {
+  var _useState = useState(tableData),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    })
+  });
+  var onQuery = function onQuery() {
+    return new Promise(function (resolve) {
+      setLoading(true);
+      setTimeout(function () {
+        setDataSource(tableData);
+        setLoading(false);
+        resolve();
+      }, 1000);
+    });
+  };
+  return /*#__PURE__*/_jsx(McContainer, {
+    height: "100%",
+    immediateQuery: false,
+    loading: loading,
+    loadingText: "\u52A0\u8F7D\u4E2D",
+    onQuery: onQuery,
+    queryItems: queryItems,
+    tableProps: {
+      columns: columns,
+      dataSource: dataSource,
+      rowKey: 'id'
+    }
+  });
+});

package/dist/McContainer/demo/batch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * title: 预设批量操作
+ * description: 包括多选数据的处理、展示、批量操作区，开启多选功能时，在`tableProps`中进行多选的配置，`rowKey`必须设置且唯一。`batchNum`展示批量操作数、`batchBtns`配置批量操作区、`onCancel`取消批量选中，配合实现多选功能。设置`batch`参数时，注意`actionBar`要为合法的React节点，如`<Button>操作1</Button>`、`<>只需要字符串的场景</>`，设置`batch.show`为`true`显示批量操作按钮，设置`batch.order`可以调整批量操作按钮的位置
+ * transform: true
+ * compact: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/batch.js

@@ -0,0 +1,129 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 预设批量操作
+ * description: 包括多选数据的处理、展示、批量操作区，开启多选功能时，在`tableProps`中进行多选的配置，`rowKey`必须设置且唯一。`batchNum`展示批量操作数、`batchBtns`配置批量操作区、`onCancel`取消批量选中，配合实现多选功能。设置`batch`参数时，注意`actionBar`要为合法的React节点，如`<Button>操作1</Button>`、`<>只需要字符串的场景</>`，设置`batch.show`为`true`显示批量操作按钮，设置`batch.order`可以调整批量操作按钮的位置
+ * transform: true
+ * compact: true
+ */
+
+import { useToggle } from "../../../packages/hooks/src";
+import { Button, Switch } from 'antd';
+import { McContainer, McInput, McInputNumber } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var _selectedRows$length;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRows = _useState2[0],
+    setSelectedRows = _useState2[1];
+  var dataSource = Array.from({
+    length: 5
+  }, function (_, index) {
+    return {
+      id: index + 1,
+      name: "\u59D3\u540D".concat(index + 1),
+      age: 18 + index
+    };
+  });
+  var _useToggle = useToggle(true),
+    _useToggle2 = _slicedToArray(_useToggle, 2),
+    showBatchBtn = _useToggle2[0],
+    toggle = _useToggle2[1].toggle;
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    batchBtnOrder = _useState4[0],
+    setBatchBtnOrder = _useState4[1];
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    })
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: 24
+      },
+      children: ["\u662F\u5426\u5C55\u793A\u6279\u91CF\u64CD\u4F5C\u6309\u94AE\uFF1A", /*#__PURE__*/_jsx(Switch, {
+        checked: showBatchBtn,
+        onChange: toggle
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: '0 0 24px 24px'
+      },
+      children: ["\u6279\u91CF\u64CD\u4F5C\u6309\u94AE\u4F4D\u7F6E\uFF1A", /*#__PURE__*/_jsx(McInputNumber, {
+        value: batchBtnOrder,
+        onChange: setBatchBtnOrder
+      })]
+    }), /*#__PURE__*/_jsx(McContainer, {
+      height: "100%",
+      queryItems: queryItems,
+      batchNum: (_selectedRows$length = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) !== null && _selectedRows$length !== void 0 ? _selectedRows$length : 0,
+      onCancel: function onCancel() {
+        return setSelectedRows([]);
+      },
+      actionBar: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          children: "\u64CD\u4F5C1"
+        }), /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          children: "\u64CD\u4F5C2"
+        })]
+      }),
+      batchBtns: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          children: "\u6279\u91CF\u64CD\u4F5C1"
+        }), /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          children: "\u6279\u91CF\u64CD\u4F5C2"
+        })]
+      }),
+      batch: {
+        show: showBatchBtn,
+        order: batchBtnOrder
+      },
+      tableProps: {
+        columns: columns,
+        dataSource: dataSource,
+        rowKey: 'id',
+        rowSelection: {
+          selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
+            return item.id;
+          }),
+          preserveSelectedRowKeys: true,
+          onChange: function onChange(selectedRowKeys, selectedRows) {
+            return setSelectedRows(selectedRows);
+          }
+        }
+      }
+    })]
+  });
+});

package/dist/McContainer/demo/collapse.d.ts

@@ -0,0 +1,8 @@
+/**
+ * title: 可折叠的搜索栏
+ * description: 将 `showCollapse` 和 `collapsibleQueryItems` 搭配使用，可以实现搜索区域的展开收起的功能。
+ * transform: true
+ * compact: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/collapse.js

@@ -0,0 +1,77 @@
+/**
+ * title: 可折叠的搜索栏
+ * description: 将 `showCollapse` 和 `collapsibleQueryItems` 搭配使用，可以实现搜索区域的展开收起的功能。
+ * transform: true
+ * compact: true
+ */
+
+import { McCascader, McContainer, McDateRange, McInput } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var dataSource = Array.from({
+    length: 5
+  }, function (_, index) {
+    return {
+      id: index + 1,
+      name: "\u59D3\u540D".concat(index + 1),
+      city: "\u57CE\u5E02".concat(index + 1),
+      date: "2024-01-0".concat(index + 1, " 12:00:00")
+    };
+  });
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '城市',
+    dataIndex: 'city'
+  }, {
+    title: '日期',
+    dataIndex: 'date'
+  }];
+  var queryItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McInput.Search, {
+      name: "name",
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McCascader, {
+      label: "\u57CE\u5E02",
+      name: "city",
+      city: true,
+      style: {
+        width: 270
+      }
+    })]
+  });
+  var collapsibleQueryItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McDateRange, {
+      label: "\u65E5\u671F",
+      name: "date",
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McInput, {
+      label: "ID",
+      name: "id",
+      style: {
+        width: 270
+      }
+    })]
+  });
+  return /*#__PURE__*/_jsx(McContainer, {
+    height: "100%",
+    queryItems: queryItems,
+    collapsibleQueryItems: collapsibleQueryItems,
+    showCollapse: true,
+    tableProps: {
+      columns: columns,
+      dataSource: dataSource,
+      rowkey: 'id'
+    }
+  });
+});

package/dist/McContainer/demo/expand.d.ts

@@ -0,0 +1,8 @@
+/**
+ * title: 树形数据展示
+ * description: 表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置，`rowKey`必须设置且唯一。
+ * transform: true
+ * compact: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McContainer/demo/expand.js

@@ -0,0 +1,90 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 树形数据展示
+ * description: 表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置，`rowKey`必须设置且唯一。
+ * transform: true
+ * compact: true
+ */
+
+import { McContainer, McInput } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var tableData = Array.from({
+  length: 5
+}, function (_, index) {
+  return {
+    id: index + 1,
+    name: "\u59D3\u540D".concat(index + 1),
+    age: 10 + index,
+    children: Array.from({
+      length: 5
+    }, function (_, i) {
+      return {
+        id: 10 * (index + 1) + i,
+        name: "\u59D3\u540D".concat(10 * (index + 1) + i),
+        age: 10 * (index + 1) + i
+      };
+    })
+  };
+});
+export default (function () {
+  var _useState = useState(tableData),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id'
+  }, {
+    title: '姓名',
+    dataIndex: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age'
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    width: 100,
+    render: function render() {
+      return /*#__PURE__*/_jsx("a", {
+        children: "\u7F16\u8F91"
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    })
+  });
+  var onQuery = function onQuery() {
+    return new Promise(function (resolve) {
+      setLoading(true);
+      setTimeout(function () {
+        setDataSource(tableData);
+        setLoading(false);
+        resolve();
+      }, 1000);
+    });
+  };
+  return /*#__PURE__*/_jsx(McContainer, {
+    height: "100%",
+    immediateQuery: false,
+    loading: loading,
+    onQuery: onQuery,
+    queryItems: queryItems,
+    tableProps: {
+      columns: columns,
+      dataSource: dataSource,
+      rowKey: 'id'
+    }
+  });
+});

package/dist/McContainer/demo/generic.d.ts

@@ -0,0 +1,8 @@
+/**
+ * title: 泛型
+ * description: 更好的代码提示及类型推断
+ * transform: true
+ * compact: true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;