@zykj2024/much-library 1.0.12-beta.1 → 1.0.12-beta.10

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

@@ -1,6 +1,6 @@
 /**
  * title: 操作栏区域
- * description: 若未设置该项，则不显示。
+ * description: 若未设置该项，则不显示。`actionBarRender` 可自定义操作栏区域，提供批量操作按钮实例
  * transform: true
  * compact: true
  */

package/dist/McContainer/demo/actionBar.js

@@ -1,17 +1,21 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /**
  * title: 操作栏区域
- * description: 若未设置该项，则不显示。
+ * description: 若未设置该项，则不显示。`actionBarRender` 可自定义操作栏区域，提供批量操作按钮实例
  * transform: true
  * compact: true
  */
 
-import { Button } from 'antd';
+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) {
@@ -21,6 +25,14 @@ export default (function () {
       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'
@@ -58,13 +70,49 @@ export default (function () {
       children: "\u4E0A\u4F20"
     })]
   });
-  return /*#__PURE__*/_jsx(McContainer, {
-    height: "100%",
-    queryItems: queryItems,
-    actionBar: actionBar,
-    tableProps: {
-      columns: columns,
-      dataSource: dataSource
-    }
+  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/batch.d.ts

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

package/dist/McContainer/demo/batch.js

@@ -1,13 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /**
  * title: 预设批量操作
- * description: 包括多选数据的处理、展示、批量操作区，开启多选功能时，在`tableProps`中进行多选的配置，`rowKey`必须设置且唯一。`batchNum`展示批量操作数、`batchBtns`配置批量操作区、`onCancel`取消批量选中，配合实现多选功能。
+ * description: 包括多选数据的处理、展示、批量操作区，开启多选功能时，在`tableProps`中进行多选的配置，`rowKey`必须设置且唯一。`batchNum`展示批量操作数、`batchBtns`配置批量操作区、`onCancel`取消批量选中，配合实现多选功能。设置`batch`参数时，注意`actionBar`要为合法的React节点，如`<Button>操作1</Button>`、`<>只需要字符串的场景</>`，设置`batch.show`为`true`显示批量操作按钮，设置`batch.order`可以调整批量操作按钮的位置
  * transform: true
  * compact: true
  */
 
-import { Button } from 'antd';
-import { McContainer, McInput } from "../..";
+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";
@@ -27,6 +28,14 @@ export default (function () {
       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'
@@ -55,35 +64,66 @@ export default (function () {
       }
     })
   });
-  return /*#__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([]);
-    },
-    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"
+  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
       })]
-    }),
-    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);
+    }), /*#__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/standard.js

@@ -24,7 +24,6 @@ var tableData = Array.from({
   };
 });
 export default (function () {
-  var _selectedRows$length;
   var mcContainerRef = useRef();
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -138,7 +137,7 @@ export default (function () {
         icon: /*#__PURE__*/_jsx(AddOutlined, {}),
         children: "\u65B0\u589E"
       }),
-      batchNum: (_selectedRows$length = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) !== null && _selectedRows$length !== void 0 ? _selectedRows$length : 0,
+      batchNum: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length,
       onCancel: function onCancel() {
         return setSelectedRows([]);
       },

package/dist/McContainer/index.d.ts

@@ -1,4 +1,4 @@
-import { TableProps } from 'antd';
+import { ButtonProps, TableProps } from 'antd';
 import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
 import './index.less';
 export type McContainerPropsType = {
@@ -28,9 +28,28 @@ export type McContainerPropsType = {
         [key: string]: any;
     }) => void;
     queryRender?: ReactNode;
-    actionBar?: ReactNode;
+    actionBar?: ReactElement;
+    /**
+     * @description 操作栏自定义渲染
+     * @param batchEl - 批量操作按钮实例
+     * @returns 操作栏元素
+     */
+    actionBarRender?: (batchEl: ReactNode) => ReactNode;
     batchNum?: number;
     batchBtns?: ReactNode;
+    /**
+     * @description 批量操作按钮配置
+     * @param show - 是否显示批量操作按钮（默认不显示 false）
+     * @param buttonText - 批量操作按钮文字
+     * @param buttonProps - 批量操作按钮属性
+     * @param order - 批量操作按钮在操作栏中的位置（默认为最后一个）
+     */
+    batch?: {
+        show?: boolean;
+        buttonText?: string;
+        buttonProps?: ButtonProps;
+        order?: number;
+    };
     onCancel?: () => void;
     tableProps?: TableProps<any>;
     tableRender?: ReactNode;

package/dist/McContainer/index.js

@@ -2,10 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Button, Spin, Table } from 'antd';
+import { isNumber } from 'lodash';
 import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
-import { Children, cloneElement, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var _tableProps$dataSourc;
@@ -36,6 +38,8 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$batchNum = props.batchNum,
     batchNum = _props$batchNum === void 0 ? 0 : _props$batchNum,
     batchBtns = props.batchBtns,
+    batch = props.batch,
+    actionBarRender = props.actionBarRender,
     onCancel = props.onCancel,
     tableProps = props.tableProps,
     tableRender = props.tableRender,
@@ -53,12 +57,25 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultQueryParamsRef = useRef({});
   var initializedRef = useRef(false);
 
+  /* 批量操作相关 */
+  var _ref = batch || {},
+    _ref$buttonText = _ref.buttonText,
+    buttonText = _ref$buttonText === void 0 ? '批量操作' : _ref$buttonText,
+    buttonProps = _ref.buttonProps,
+    _ref$show = _ref.show,
+    batchShow = _ref$show === void 0 ? false : _ref$show,
+    batchOrder = _ref.order;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showBatchBar = _useState6[0],
+    setShowBatchBar = _useState6[1];
+
   /* 获取actionBar高度 */
   var actionBarRef = useRef();
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    actionBarHeight = _useState6[0],
-    setActionBarHeight = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    actionBarHeight = _useState8[0],
+    setActionBarHeight = _useState8[1];
   var actionBarResizeObserver = new ResizeObserver(function (entries) {
     setActionBarHeight(entries[0].contentRect.height + 40);
   });
@@ -108,6 +125,45 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     return ELs;
   };
 
+  // 批量操作按钮
+  var handelBatchClick = function handelBatchClick() {
+    if (showBatchBar) {
+      onCancel === null || onCancel === void 0 || onCancel();
+    }
+    setShowBatchBar(!showBatchBar);
+  };
+
+  // 批量操作按钮
+  var batchEl = /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+    onClick: handelBatchClick
+  }, buttonProps), {}, {
+    children: buttonText
+  }));
+
+  // 生成 actionBar
+  var mapActionBar = function mapActionBar() {
+    var Els;
+    // 是否展示批量操作按钮
+    if (batchShow) {
+      // 是否配置actionBar
+      if (actionBar) {
+        var _actionBar$props;
+        // 判断是否为合法的React节点
+        var itemsCount = /*#__PURE__*/isValidElement(actionBar) ? Children.count(actionBar === null || actionBar === void 0 || (_actionBar$props = actionBar.props) === null || _actionBar$props === void 0 ? void 0 : _actionBar$props.children) : 1;
+        var newEls = Children.toArray(itemsCount > 1 ? actionBar.props.children : actionBar);
+        var _batchOrder = isNumber(batchOrder) && batchOrder >= 0 && batchOrder <= itemsCount ? batchOrder : itemsCount;
+        // 插入批量操作按钮，默认放在actionBar操作项后面
+        newEls.splice(_batchOrder, 0, batchEl);
+        Els = /*#__PURE__*/cloneElement(itemsCount > 1 ? actionBar : /*#__PURE__*/_jsx(_Fragment, {}), {}, newEls);
+      } else {
+        Els = batchEl;
+      }
+    } else {
+      Els = actionBar;
+    }
+    return Els;
+  };
+
   // 格式化查询参数（返回当前可见的查询项的参数集）
   var formatQueryParams = function formatQueryParams() {
     var _tableProps$paginatio;
@@ -138,10 +194,10 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     if (params) {
       var _params = _objectSpread({}, queryParamsRef.current);
       // 仅支持设置过name属性的查询项（和current、pageSize）
-      Object.entries(params).forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
+      Object.entries(params).forEach(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          value = _ref3[1];
         if (allNamesRef.current.includes(key)) {
           _params[key] = value;
         }
@@ -194,10 +250,10 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
       return !allNamesRef.current.includes(k) && allNamesRef.current.push(k);
     });
     // 仅支持设置过name属性的查询项（和current、pageSize）
-    Object.entries(params).forEach(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
+    Object.entries(params).forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[1];
       if (allNamesRef.current.includes(key)) {
         _params[key] = value;
       }
@@ -236,6 +292,9 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     queryParamsRef.current = _params;
     setQueryParams(_params);
   };
+  useEffect(function () {
+    setShowBatchBar(batchNum > 0);
+  }, [batchNum]);
 
   // 监听immediateQuery，初始设置默认查询参数并判断是否触发首次查询
   useEffect(function () {
@@ -324,14 +383,14 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
           })]
         }), queryRender !== null && /*#__PURE__*/_jsx("div", {
           className: "mc-container__divider"
-        }), actionBar && /*#__PURE__*/_jsx("div", {
+        }), actionBarRender ? actionBarRender(batchEl) : (!!actionBar || !!batchShow) && /*#__PURE__*/_jsx("div", {
           ref: actionBarRef,
           className: "mc-container__action-bar",
           style: {
             backgroundColor: backgroundColor
           },
-          children: actionBar
-        }), batchNum > 0 && /*#__PURE__*/_jsx("div", {
+          children: mapActionBar()
+        }), showBatchBar && /*#__PURE__*/_jsx("div", {
           className: "mc-container__batch-bar",
           style: {
             backgroundColor: backgroundColor,
@@ -349,7 +408,10 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
               style: {
                 marginLeft: 'auto'
               },
-              onClick: onCancel,
+              onClick: function onClick() {
+                onCancel === null || onCancel === void 0 || onCancel();
+                setShowBatchBar(false);
+              },
               children: "\u53D6\u6D88"
             })]
           })
@@ -379,13 +441,13 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
             pageSize: queryParams.pageSize
           }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination),
           expandable: _objectSpread({
-            expandIcon: function expandIcon(_ref5) {
+            expandIcon: function expandIcon(_ref6) {
               var _tableProps$dataSourc2, _record$children;
-              var expanded = _ref5.expanded,
-                onExpand = _ref5.onExpand,
-                record = _ref5.record;
-              return tableProps !== null && tableProps !== void 0 && (_tableProps$dataSourc2 = tableProps.dataSource) !== null && _tableProps$dataSourc2 !== void 0 && _tableProps$dataSourc2.some(function (_ref6) {
-                var children = _ref6.children;
+              var expanded = _ref6.expanded,
+                onExpand = _ref6.onExpand,
+                record = _ref6.record;
+              return tableProps !== null && tableProps !== void 0 && (_tableProps$dataSourc2 = tableProps.dataSource) !== null && _tableProps$dataSourc2 !== void 0 && _tableProps$dataSourc2.some(function (_ref7) {
+                var children = _ref7.children;
                 return (children === null || children === void 0 ? void 0 : children.length) > 0;
               }) ? ((_record$children = record.children) === null || _record$children === void 0 ? void 0 : _record$children.length) > 0 ? /*#__PURE__*/_jsx(CaretDownFilled, {
                 className: "mc-container__table__expand-icon",

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

@@ -0,0 +1,6 @@
+/**
+ * title: 基础用法
+ * description: 中间省略号，超出时展示省略号，并且移入会有tooltip
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McEllipsisMiddle/demo/base.js

@@ -0,0 +1,25 @@
+/**
+ * title: 基础用法
+ * description: 中间省略号，超出时展示省略号，并且移入会有tooltip
+ */
+
+import { McEllipsisMiddle } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(McEllipsisMiddle, {
+      style: {
+        width: 250
+      },
+      text: "\u8FD9\u662F\u4E00\u6BB5\u6CA1\u6709\u6EA2\u51FA\u7684\u6587\u5B57",
+      suffixCount: 4
+    }), /*#__PURE__*/_jsx(McEllipsisMiddle, {
+      style: {
+        width: 250
+      },
+      text: "\u8FD9\u662F\u4E00\u6BB5\u6709\u6EA2\u51FA\u7684\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u6709\u6EA2\u51FA\u7684\u6587\u5B57",
+      suffixCount: 4
+    })]
+  });
+});

package/dist/McEllipsisMiddle/index.css

@@ -0,0 +1,4 @@
+.mc-ellipsis-middle,
+.mc-ellipsis-middle * {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}

package/dist/McEllipsisMiddle/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TextProps } from 'antd/es/typography/Text';
+import './index.less';
+export interface McEllipsisMiddleProps extends TextProps {
+    text: string;
+    /** 省略号结尾显示的字个数 */
+    suffixCount: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const McEllipsisMiddle: ({ text, suffixCount, style, className, ...rest }: McEllipsisMiddleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/McEllipsisMiddle/index.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text", "suffixCount", "style", "className"];
+import { Typography } from 'antd';
+import "./index.css";
+
+/** 中间省略 */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = Typography.Text;
+export var McEllipsisMiddle = function McEllipsisMiddle(_ref) {
+  var text = _ref.text,
+    suffixCount = _ref.suffixCount,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelStr = String(text || '').trim();
+  var isBeyond = labelStr.length > suffixCount;
+  var start = isBeyond ? labelStr.slice(0, labelStr.length - suffixCount) : labelStr;
+  var suffix = isBeyond ? labelStr.slice(-suffixCount).trim() : '';
+  return /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+    className: ['mc-ellipsis-middle', className].filter(Boolean).join(''),
+    style: _objectSpread({
+      width: '100%'
+    }, style),
+    ellipsis: {
+      tooltip: labelStr,
+      suffix: suffix
+    }
+  }, rest), {}, {
+    children: start
+  }));
+};

package/dist/McGroupPanel/comps/SelectedItem/index.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useSortable } from '@dnd-kit/sortable';
 import { Button, Typography } from 'antd';
+import { MenuOutlined } from 'much-icons';
 import { McIconFont } from "../../..";
 import { memo, useMemo } from 'react';
 import "../../index.css";
@@ -53,9 +54,7 @@ var SelectedItem = function SelectedItem(_ref) {
     children: [sortable && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listeners), {}, {
       className: "mc-group-panel__selected-item__drag",
       type: "text",
-      icon: /*#__PURE__*/_jsx(McIconFont, {
-        type: "icon-MenuOutlined"
-      })
+      icon: /*#__PURE__*/_jsx(MenuOutlined, {})
     })), /*#__PURE__*/_jsx(Typography.Paragraph, {
       style: {
         margin: '0 auto 0 4px'

package/dist/McGroupPanel/index.css

@@ -29,6 +29,7 @@
 }
 .mc-group-panel__card-body {
   height: calc(100% - 40px);
+  overflow: auto;
   padding: 8px;
 }
 .mc-group-panel__options {
@@ -49,6 +50,7 @@
   -webkit-box-flex: 1;
   -ms-flex: 1 1 44%;
   flex: 1 1 44%;
+  overflow: auto;
 }
 .mc-group-panel__options-items {
   -webkit-box-flex: 1;
@@ -65,23 +67,23 @@
   padding: 0 8px;
 }
 .mc-group-panel__checkbox-wrapper {
-  width: calc(100% - 24px);
+  width: 100%;
   height: 40px;
   line-height: 40px;
   padding: 0 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
-.mc-group-panel__checkbox-wrapper .ant-checkbox-wrapper {
-  max-width: 100%;
-}
-.mc-group-panel__checkbox-wrapper .ant-checkbox-wrapper .ant-checkbox + span {
-  overflow: hidden;
-}
-.mc-group-panel__checkbox-wrapper:not(:first-child):hover {
+.mc-group-panel__checkbox-wrapper:not(.mc-group-panel__check-all):hover {
   background: #f6f6f6;
   cursor: pointer;
 }
 .mc-group-panel__checkbox {
-  width: calc(100% - 24px);
+  width: 100%;
   height: 40px;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -101,7 +103,7 @@
   width: 240px;
 }
 .mc-group-panel__selected-item {
-  width: calc(100% - 16px);
+  width: 100%;
   height: 40px;
   display: -webkit-box;
   display: -ms-flexbox;