@hsu-react/ui 0.0.1

package/lib/components/Panel/IframePanel/index.module.less

@@ -0,0 +1,68 @@
+.IframPanel {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+
+  .content {
+    width: 100%;
+    height: 100%;
+
+    overflow: hidden;
+
+    .children {
+      width: 100%;
+      min-width: max-content;
+      height: 100%;
+      min-height: max-content;
+
+      > * {
+        width: max-content;
+        height: max-content;
+
+        overflow: visible;
+      }
+    }
+  }
+
+  .spin {
+    width: 100%;
+    height: 100%;
+
+    > .ant-spin-container {
+      width: 100%;
+      height: 100%;
+
+      > iframe {
+        width: 100%;
+        height: 100%;
+
+        border: none !important;
+      }
+    }
+  }
+
+  .full {
+    position: absolute;
+    right: 32px;
+    bottom: 32px;
+    z-index: 9999;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 60px;
+    height: 60px;
+
+    font-size: 50px;
+    color: #6b7280;
+
+    background: var(--cf-surface);
+
+    border-radius: 50%;
+
+    cursor: pointer;
+  }
+}

package/lib/components/Panel/ListPanel/ListModalPanel/index.d.ts

@@ -0,0 +1,52 @@
+import React, { ReactNode } from "react";
+import { SearchModeKeys, SearchModePropsMap } from "../../../Search";
+import { TableProps } from "../../../Table";
+import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
+import { TabBarProps } from "../../../TabBar";
+import { ModalProps } from "../../../Modal";
+interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+    title?: ReactNode;
+    children?: ReactNode;
+}
+interface TableTools {
+    onTableRefresh?: () => void;
+    columnMgt?: IColumnMgt;
+}
+export interface ListModalPanelTabelProps extends Omit<TableProps, "title"> {
+    title?: string;
+    buttonGroup?: ButtonProps[];
+    tabBarProps?: TabBarProps;
+    tableTools?: TableTools;
+    tableContainerClassName?: string;
+    tips?: ReactNode;
+    otherTool?: ReactNode;
+}
+interface ColumnMgtDataSource {
+    hidden: boolean;
+    title: string;
+    dataIndex: string;
+    sort: number;
+    width?: number;
+    ellipsis?: boolean;
+}
+export interface IColumnMgt {
+    columnCount?: {
+        max?: number;
+        min?: number;
+    };
+    fixedDisplay?: string[];
+    fixedPosition?: string[];
+    onSelectionChange?: (selectedDataIndexes: string[], dataSource: Array<ColumnMgtDataSource>) => void;
+}
+export interface ListModalPanelProps<T extends SearchModeKeys = "Default"> extends ModalProps {
+    modalClassName?: string;
+    className?: string;
+    searchProps?: SearchModePropsMap[T];
+    /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+    searchMode?: T;
+    tableProps?: ListModalPanelTabelProps;
+    hasPermi?: string[];
+    extraContent?: ReactNode;
+}
+declare const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>>;
+export default ListModalPanel;

package/lib/components/Panel/ListPanel/ListModalPanel/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("../../../Search"));
+var _Table = _interopRequireDefault(require("../../../Table"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _usePermissions = _interopRequireDefault(require("../../../../hooks/usePermissions"));
+var _Modal = _interopRequireDefault(require("../../../Modal"));
+var _ToolBar = _interopRequireDefault(require("../_components/ToolBar"));
+var _ColumnMgt = _interopRequireDefault(require("../_components/ColumnMgt"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListModalPanel = props => {
+  const {
+    modalClassName,
+    className,
+    searchProps,
+    searchMode = "Default",
+    tableProps = {},
+    hasPermi,
+    extraContent,
+    ...modalConfig
+  } = props;
+  const {
+    title,
+    buttonGroup,
+    className: tableClassName,
+    columns,
+    tabBarProps,
+    tableTools = {},
+    tableContainerClassName,
+    tips,
+    otherTool,
+    ...tableConfig
+  } = tableProps;
+  const {
+    columnMgt
+  } = tableTools;
+  const {
+    permitted
+  } = (0, _usePermissions.default)(hasPermi);
+  const [_columns, setColumns] = (0, _react.useState)(columns);
+  const [showColumnMgt, setShowColumnMgt] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (columnMgt && columns?.length) {
+      const _columns = columns?.map(col => {
+        return {
+          ...col,
+          sort: !col?.dataIndex ? typeof col.sort === "number" ? col.sort : 999 : 0
+        };
+      });
+      setColumns(_columns);
+    } else {
+      setColumns(columns);
+    }
+  }, [columnMgt, columns]);
+
+  // 根据 searchMode 渲染对应的 Search 组件
+  const SearchComponent = (0, _react.useMemo)(() => {
+    const searchClassName = (0, _classnames.default)(searchProps?.className, _indexModule.default.search);
+    switch (searchMode) {
+      case "Advanced":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.Advanced, {
+          baseWidth: 1400,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "Collapsible":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.Collapsible, {
+          baseWidth: 1400,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "WithFilter":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.WithFilter, {
+          baseWidth: 1400,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "WithMore":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.WithMore, {
+          baseWidth: 1400,
+          ...searchProps,
+          className: searchClassName
+        });
+      case "Card":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default.Card, {
+          ...searchProps,
+          className: searchClassName
+        });
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
+          baseWidth: 1400,
+          ...searchProps,
+          className: searchClassName
+        });
+    }
+  }, [searchMode, searchProps]);
+  if (!permitted) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+      width: 1400,
+      className: (0, _classnames.default)(modalClassName),
+      ...modalConfig,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(_indexModule.default.ListModalPanel, className),
+        children: [extraContent, SearchComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)(_indexModule.default.tableContainer, tableContainerClassName),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, {
+            columns: columns,
+            title: title,
+            tabBarProps: tabBarProps,
+            buttonGroup: buttonGroup,
+            tableTools: tableTools,
+            setShowColumnMgt: setShowColumnMgt,
+            tips: tips,
+            otherTool: otherTool
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
+            className: `${_indexModule.default.table} ${tableClassName ?? ""}`,
+            scroll: true,
+            serialNumberColumn: true,
+            bordered: true,
+            ...tableConfig,
+            columns: _columns
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnMgt.default, {
+      open: showColumnMgt,
+      onClose: () => setShowColumnMgt(false),
+      onOk: columns => setColumns((0, _lodash.cloneDeep)(columns)),
+      columns: _columns,
+      defaultColumns: columns,
+      onSelectionChange: columnMgt?.onSelectionChange,
+      ...columnMgt
+    })]
+  });
+};
+var _default = exports.default = ListModalPanel;

package/lib/components/Panel/ListPanel/ListModalPanel/index.module.less

@@ -0,0 +1,30 @@
+.ListModalPanel {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  height: max-content;
+  max-height: 70vh;
+
+  .search {
+    padding: 0px;
+  }
+
+  .tableContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    width: 100%;
+    min-height: 0px;
+
+    background: var(--cf-surface);
+
+    border-radius: 8px;
+
+    .tips {
+      width: 100%;
+    }
+  }
+}

package/lib/components/Panel/ListPanel/_components/ColumnMgt/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ColumnsType } from "../../../../Table";
+import { IColumnMgt } from "../..";
+import { ModalProps } from "../../../../Modal";
+interface DataSource {
+    hidden: boolean;
+    title: string;
+    dataIndex: string;
+    sort: number;
+    width?: number;
+    ellipsis?: boolean;
+}
+export interface ColumnMgtProps extends IColumnMgt {
+    open?: boolean;
+    columns?: ColumnsType;
+    onOk?: (columns?: ColumnsType) => void;
+    onClose?: () => void;
+    className?: string;
+    modalProps?: ModalProps;
+    defaultColumns?: ColumnsType;
+    onSelectionChange?: (selectedDataIndexes: string[], dataSource: Array<DataSource>) => void;
+}
+declare const ColumnMgt: React.FC<ColumnMgtProps>;
+export default ColumnMgt;

package/lib/components/Panel/ListPanel/_components/ColumnMgt/index.js

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _Table = _interopRequireWildcard(require("../../../../Table"));
+var _Input = _interopRequireDefault(require("../../../../Input"));
+var _sortable = require("@dnd-kit/sortable");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _usePermissions = _interopRequireDefault(require("../../../../../hooks/usePermissions"));
+var _Modal = _interopRequireDefault(require("../../../../Modal"));
+var _Checkbox = _interopRequireDefault(require("../../../../Checkbox"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ColumnMgt = props => {
+  const {
+    open,
+    className,
+    columnCount = {},
+    columns: dataSource,
+    fixedDisplay,
+    fixedPosition,
+    modalProps = {},
+    onOk,
+    onClose,
+    defaultColumns,
+    onSelectionChange
+  } = props;
+  const {
+    max,
+    min = 1
+  } = columnCount;
+  const {
+    classNames = {},
+    ...modalConfig
+  } = modalProps;
+  const {
+    header,
+    body,
+    footer,
+    mask,
+    content,
+    wrapper
+  } = classNames;
+  const [_dataSource, setDataSource] = (0, _react.useState)([]);
+  const {
+    checkPermission
+  } = (0, _usePermissions.default)();
+  (0, _react.useEffect)(() => {
+    if (open) {
+      setDataSource(dataSource?.filter(item => checkPermission(item.hasPermi) && item.dataIndex)?.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0))?.map(item => ({
+        hidden: !!item.hidden,
+        title: item.title,
+        dataIndex: item.dataIndex,
+        sort: item.sort,
+        width: item.width || "",
+        ellipsis: !!item.ellipsis
+      })) ?? []);
+    }
+  }, [dataSource, open, checkPermission]);
+  const columns = [{
+    title: "显示",
+    dataIndex: "hidden",
+    align: "center",
+    renderTitle: title => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        className: _indexModule.default.checkbox,
+        checked: _dataSource.filter(item => !item.hidden).length === _dataSource.length,
+        indeterminate: _dataSource.filter(item => !item.hidden).length > 0 && _dataSource.filter(item => !item.hidden).length < _dataSource.length,
+        onChange: e => {
+          const newDataSource = defaultColumns?.map(item => {
+            return {
+              ...item,
+              hidden: !e.target.checked
+            };
+          }) ?? [];
+          setDataSource(newDataSource);
+        },
+        disabled: max ? _dataSource.length !== max : false,
+        children: title
+      });
+    },
+    render: (hidden, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      checked: !hidden,
+      onChange: e => {
+        const newDataSource = _dataSource?.map(item => {
+          if (item.dataIndex === record.dataIndex) {
+            return {
+              ...item,
+              hidden: !e.target.checked
+            };
+          }
+          return item;
+        });
+        setDataSource(newDataSource);
+      },
+      disabled: fixedDisplay?.includes(record.dataIndex) || max && _dataSource.filter(item => !item.hidden).length >= max && hidden
+    })
+  }, {
+    title: "列名",
+    dataIndex: "title",
+    align: "center"
+  }, {
+    title: "宽度",
+    dataIndex: "width",
+    align: "center",
+    width: 100,
+    render: (width, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Number, {
+      className: _indexModule.default.widthInput,
+      value: width,
+      onChange: _width => {
+        const newDataSource = _dataSource?.map(item => {
+          if (item.dataIndex === record.dataIndex) {
+            return {
+              ...item,
+              width: _width ? +_width : undefined
+            };
+          }
+          return item;
+        });
+        setDataSource(newDataSource);
+      },
+      style: {
+        textAlign: "center"
+      }
+    })
+  }, {
+    title: "超出省略",
+    dataIndex: "ellipsis",
+    align: "center",
+    renderTitle: title => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        className: _indexModule.default.checkbox,
+        checked: _dataSource.filter(item => item.ellipsis).length === _dataSource.length,
+        indeterminate: _dataSource.filter(item => item.ellipsis).length > 0 && _dataSource.filter(item => item.ellipsis).length < _dataSource.length,
+        onChange: e => {
+          const newDataSource = defaultColumns?.map(item => {
+            return {
+              ...item,
+              ellipsis: e.target.checked
+            };
+          }) ?? [];
+          setDataSource(newDataSource);
+        },
+        children: title
+      });
+    },
+    render: (ellipsis, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      checked: ellipsis,
+      onChange: e => {
+        const newDataSource = _dataSource?.map(item => {
+          if (item.dataIndex === record.dataIndex) {
+            return {
+              ...item,
+              ellipsis: e.target.checked
+            };
+          }
+          return item;
+        });
+        setDataSource(newDataSource);
+      }
+    })
+  }, {
+    title: "拖动调整顺序",
+    key: "sort",
+    align: "center",
+    render: record => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.TableDrag.Handle, {
+      disabled: fixedPosition?.includes(record.dataIndex)
+    })
+  }];
+  const onDragEnd = ({
+    active,
+    over
+  }) => {
+    if (active?.id && fixedPosition?.includes(active.id.toString()) || over?.id && fixedPosition?.includes(over.id.toString())) {
+      return;
+    }
+    if (active.id !== over?.id) {
+      setDataSource(prevState => {
+        const activeIndex = prevState.findIndex(record => record.dataIndex === active?.id);
+        const overIndex = prevState.findIndex(record => record.dataIndex === over?.id);
+        const newDataSource = (0, _sortable.arrayMove)(prevState, activeIndex, overIndex);
+
+        // 更新 sort 值以反映新的顺序
+        const updatedDataSource = newDataSource?.map((item, index) => ({
+          ...item,
+          sort: index
+        }));
+        return updatedDataSource;
+      });
+    }
+  };
+  const reset = () => {
+    const newDataSource = defaultColumns?.filter(item => item.dataIndex)?.map(item => ({
+      hidden: !!item.hidden,
+      title: item.title,
+      dataIndex: item.dataIndex,
+      sort: item.sort,
+      width: item.width || "",
+      ellipsis: !!item.ellipsis
+    })) ?? [];
+    setDataSource(newDataSource);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    open: open,
+    centered: true,
+    width: "40%",
+    className: `${_indexModule.default.ColumnMgt} ${className ?? ""}`,
+    classNames: {
+      header: `${header ?? ""}`,
+      body: `${_indexModule.default.body} ${body ?? ""}`,
+      footer: `${footer ?? ""}`,
+      mask: `${mask ?? ""}`,
+      content: `${content ?? ""}`,
+      wrapper: `${wrapper ?? ""}`
+    },
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _indexModule.default.title,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "\u81EA\u5B9A\u4E49\u663E\u793A\u5217\u9879"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _indexModule.default.tips,
+        children: ["\u5217\u9879\u663E\u793A\u4E0D\u5F97\u5C11\u4E8E", min, "\u9879\uFF0C\u6700\u591A\u652F\u6301\u81EA\u5B9A\u4E49", max ?? dataSource?.length, "\u4E2A\u5217\u9879\uFF0C\u7070\u8272\u9009\u4E2D\u5217\u4E0D\u652F\u6301\u9690\u85CF\u548C\u6392\u5E8F"]
+      })]
+    }),
+    footer: originNode => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _indexModule.default.footer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _indexModule.default.left,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            onClick: e => {
+              e.preventDefault();
+              reset();
+            },
+            children: "\u6062\u590D\u9ED8\u8BA4"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _indexModule.default.originNode,
+          children: originNode
+        })]
+      });
+    },
+    onOk: () => {
+      const newDataSource = dataSource?.map(item => {
+        return {
+          ...item,
+          hidden: typeof _dataSource.find(i => i.dataIndex === item.dataIndex)?.hidden === "boolean" ? _dataSource.find(i => i.dataIndex === item.dataIndex)?.hidden : item.hidden,
+          sort: _dataSource.findIndex(i => i.dataIndex === item.dataIndex) === -1 ? item.sort : _dataSource.findIndex(i => i.dataIndex === item.dataIndex),
+          width: _dataSource.find(i => i.dataIndex === item.dataIndex)?.width || undefined,
+          ellipsis: typeof _dataSource.find(i => i.dataIndex === item.dataIndex)?.ellipsis === "boolean" ? _dataSource.find(i => i.dataIndex === item.dataIndex)?.ellipsis : item.ellipsis
+        };
+      });
+      if (newDataSource?.length) {
+        const showColumns = newDataSource.filter(i => !i.hidden && i.dataIndex).length;
+        if (showColumns < min) {
+          return _antd.message.error(`至少选择${min}项显示列`);
+        }
+        if (max && showColumns > max) {
+          return _antd.message.error(`最多选择${max}项显示列`);
+        }
+        const selectedDataIndexes = newDataSource.filter(item => !item.hidden && item.dataIndex)?.map(item => item.dataIndex);
+        onSelectionChange?.(selectedDataIndexes, _dataSource);
+        onOk?.(newDataSource);
+        onClose?.();
+      }
+    },
+    onCancel: onClose,
+    ...modalConfig,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
+      onDragEnd: onDragEnd,
+      columns: columns,
+      dataSource: _dataSource,
+      rowKey: "dataIndex",
+      pagination: false,
+      className: _indexModule.default.table,
+      scroll: true
+    })
+  });
+};
+var _default = exports.default = ColumnMgt;

package/lib/components/Panel/ListPanel/_components/ColumnMgt/index.module.less

@@ -0,0 +1,55 @@
+.ColumnMgt {
+  .title {
+    cursor: default;
+
+    > div:not(.tips) {
+      color: var(--cf-text-2);
+    }
+
+    .tips {
+      font-size: 12px;
+      font-weight: normal;
+
+      color: var(--cf-text-3);
+    }
+  }
+
+  .widthInput {
+    height: 32px !important;
+  }
+
+  .body {
+    flex: 0 0 auto !important;
+
+    height: 60vh;
+  }
+
+  .checkbox {
+    .ant-checkbox {
+      width: 14px;
+      min-width: 14px;
+      height: 14px;
+      min-height: 14px;
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    .left {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+    }
+
+    .originNode {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+    }
+  }
+}

package/lib/components/Panel/ListPanel/_components/ToolBar/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { ListPanelTabelProps } from "../..";
+interface ToolBarProps {
+    columns?: ListPanelTabelProps["columns"];
+    title?: ListPanelTabelProps["title"];
+    tabBarProps?: ListPanelTabelProps["tabBarProps"];
+    buttonGroup?: ListPanelTabelProps["buttonGroup"];
+    tableTools?: ListPanelTabelProps["tableTools"];
+    setShowColumnMgt?: (value: React.SetStateAction<boolean>) => void;
+    tips?: ReactNode;
+    otherTool?: ReactNode;
+}
+declare const ToolBar: React.FC<ToolBarProps>;
+export default ToolBar;