@hsu-react/ui 0.0.1

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

@@ -0,0 +1,348 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["classNames"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { message } from "antd";
+import React, { useEffect, useState } from "react";
+import Table, { TableDrag } from "../../../../Table";
+import Input from "../../../../Input";
+import { arrayMove } from "@dnd-kit/sortable";
+import styles from "./index.module.less";
+import usePermissions from "../../../../../hooks/usePermissions";
+import Modal from "../../../../Modal";
+import Checkbox from "../../../../Checkbox";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColumnMgt = function ColumnMgt(props) {
+  var open = props.open,
+    className = props.className,
+    _props$columnCount = props.columnCount,
+    columnCount = _props$columnCount === void 0 ? {} : _props$columnCount,
+    dataSource = props.columns,
+    fixedDisplay = props.fixedDisplay,
+    fixedPosition = props.fixedPosition,
+    _props$modalProps = props.modalProps,
+    modalProps = _props$modalProps === void 0 ? {} : _props$modalProps,
+    _onOk = props.onOk,
+    onClose = props.onClose,
+    defaultColumns = props.defaultColumns,
+    onSelectionChange = props.onSelectionChange;
+  var max = columnCount.max,
+    _columnCount$min = columnCount.min,
+    min = _columnCount$min === void 0 ? 1 : _columnCount$min;
+  var _modalProps$className = modalProps.classNames,
+    classNames = _modalProps$className === void 0 ? {} : _modalProps$className,
+    modalConfig = _objectWithoutProperties(modalProps, _excluded);
+  var header = classNames.header,
+    body = classNames.body,
+    footer = classNames.footer,
+    mask = classNames.mask,
+    content = classNames.content,
+    wrapper = classNames.wrapper;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    _dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _usePermissions = usePermissions(),
+    checkPermission = _usePermissions.checkPermission;
+  useEffect(function () {
+    if (open) {
+      var _dataSource$filter$so, _dataSource$filter;
+      setDataSource((_dataSource$filter$so = dataSource === null || dataSource === void 0 || (_dataSource$filter = dataSource.filter(function (item) {
+        return checkPermission(item.hasPermi) && item.dataIndex;
+      })) === null || _dataSource$filter === void 0 || (_dataSource$filter = _dataSource$filter.sort(function (a, b) {
+        var _a$sort, _b$sort;
+        return ((_a$sort = a === null || a === void 0 ? void 0 : a.sort) !== null && _a$sort !== void 0 ? _a$sort : 0) - ((_b$sort = b === null || b === void 0 ? void 0 : b.sort) !== null && _b$sort !== void 0 ? _b$sort : 0);
+      })) === null || _dataSource$filter === void 0 ? void 0 : _dataSource$filter.map(function (item) {
+        return {
+          hidden: !!item.hidden,
+          title: item.title,
+          dataIndex: item.dataIndex,
+          sort: item.sort,
+          width: item.width || "",
+          ellipsis: !!item.ellipsis
+        };
+      })) !== null && _dataSource$filter$so !== void 0 ? _dataSource$filter$so : []);
+    }
+  }, [dataSource, open, checkPermission]);
+  var columns = [{
+    title: "显示",
+    dataIndex: "hidden",
+    align: "center",
+    renderTitle: function renderTitle(title) {
+      return /*#__PURE__*/_jsx(Checkbox, {
+        className: styles.checkbox,
+        checked: _dataSource.filter(function (item) {
+          return !item.hidden;
+        }).length === _dataSource.length,
+        indeterminate: _dataSource.filter(function (item) {
+          return !item.hidden;
+        }).length > 0 && _dataSource.filter(function (item) {
+          return !item.hidden;
+        }).length < _dataSource.length,
+        onChange: function onChange(e) {
+          var _defaultColumns$map;
+          var newDataSource = (_defaultColumns$map = defaultColumns === null || defaultColumns === void 0 ? void 0 : defaultColumns.map(function (item) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              hidden: !e.target.checked
+            });
+          })) !== null && _defaultColumns$map !== void 0 ? _defaultColumns$map : [];
+          setDataSource(newDataSource);
+        },
+        disabled: max ? _dataSource.length !== max : false,
+        children: title
+      });
+    },
+    render: function render(hidden, record) {
+      return /*#__PURE__*/_jsx(Checkbox, {
+        checked: !hidden,
+        onChange: function onChange(e) {
+          var newDataSource = _dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.map(function (item) {
+            if (item.dataIndex === record.dataIndex) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                hidden: !e.target.checked
+              });
+            }
+            return item;
+          });
+          setDataSource(newDataSource);
+        },
+        disabled: (fixedDisplay === null || fixedDisplay === void 0 ? void 0 : fixedDisplay.includes(record.dataIndex)) || max && _dataSource.filter(function (item) {
+          return !item.hidden;
+        }).length >= max && hidden
+      });
+    }
+  }, {
+    title: "列名",
+    dataIndex: "title",
+    align: "center"
+  }, {
+    title: "宽度",
+    dataIndex: "width",
+    align: "center",
+    width: 100,
+    render: function render(width, record) {
+      return /*#__PURE__*/_jsx(Input.Number, {
+        className: styles.widthInput,
+        value: width,
+        onChange: function onChange(_width) {
+          var newDataSource = _dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.map(function (item) {
+            if (item.dataIndex === record.dataIndex) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                width: _width ? +_width : undefined
+              });
+            }
+            return item;
+          });
+          setDataSource(newDataSource);
+        },
+        style: {
+          textAlign: "center"
+        }
+      });
+    }
+  }, {
+    title: "超出省略",
+    dataIndex: "ellipsis",
+    align: "center",
+    renderTitle: function renderTitle(title) {
+      return /*#__PURE__*/_jsx(Checkbox, {
+        className: styles.checkbox,
+        checked: _dataSource.filter(function (item) {
+          return item.ellipsis;
+        }).length === _dataSource.length,
+        indeterminate: _dataSource.filter(function (item) {
+          return item.ellipsis;
+        }).length > 0 && _dataSource.filter(function (item) {
+          return item.ellipsis;
+        }).length < _dataSource.length,
+        onChange: function onChange(e) {
+          var _defaultColumns$map2;
+          var newDataSource = (_defaultColumns$map2 = defaultColumns === null || defaultColumns === void 0 ? void 0 : defaultColumns.map(function (item) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              ellipsis: e.target.checked
+            });
+          })) !== null && _defaultColumns$map2 !== void 0 ? _defaultColumns$map2 : [];
+          setDataSource(newDataSource);
+        },
+        children: title
+      });
+    },
+    render: function render(ellipsis, record) {
+      return /*#__PURE__*/_jsx(Checkbox, {
+        checked: ellipsis,
+        onChange: function onChange(e) {
+          var newDataSource = _dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.map(function (item) {
+            if (item.dataIndex === record.dataIndex) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                ellipsis: e.target.checked
+              });
+            }
+            return item;
+          });
+          setDataSource(newDataSource);
+        }
+      });
+    }
+  }, {
+    title: "拖动调整顺序",
+    key: "sort",
+    align: "center",
+    render: function render(record) {
+      return /*#__PURE__*/_jsx(TableDrag.Handle, {
+        disabled: fixedPosition === null || fixedPosition === void 0 ? void 0 : fixedPosition.includes(record.dataIndex)
+      });
+    }
+  }];
+  var onDragEnd = function onDragEnd(_ref) {
+    var active = _ref.active,
+      over = _ref.over;
+    if (active !== null && active !== void 0 && active.id && fixedPosition !== null && fixedPosition !== void 0 && fixedPosition.includes(active.id.toString()) || over !== null && over !== void 0 && over.id && fixedPosition !== null && fixedPosition !== void 0 && fixedPosition.includes(over.id.toString())) {
+      return;
+    }
+    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      setDataSource(function (prevState) {
+        var activeIndex = prevState.findIndex(function (record) {
+          return record.dataIndex === (active === null || active === void 0 ? void 0 : active.id);
+        });
+        var overIndex = prevState.findIndex(function (record) {
+          return record.dataIndex === (over === null || over === void 0 ? void 0 : over.id);
+        });
+        var newDataSource = arrayMove(prevState, activeIndex, overIndex);
+
+        // 更新 sort 值以反映新的顺序
+        var updatedDataSource = newDataSource === null || newDataSource === void 0 ? void 0 : newDataSource.map(function (item, index) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            sort: index
+          });
+        });
+        return updatedDataSource;
+      });
+    }
+  };
+  var reset = function reset() {
+    var _defaultColumns$filte, _defaultColumns$filte2;
+    var newDataSource = (_defaultColumns$filte = defaultColumns === null || defaultColumns === void 0 || (_defaultColumns$filte2 = defaultColumns.filter(function (item) {
+      return item.dataIndex;
+    })) === null || _defaultColumns$filte2 === void 0 ? void 0 : _defaultColumns$filte2.map(function (item) {
+      return {
+        hidden: !!item.hidden,
+        title: item.title,
+        dataIndex: item.dataIndex,
+        sort: item.sort,
+        width: item.width || "",
+        ellipsis: !!item.ellipsis
+      };
+    })) !== null && _defaultColumns$filte !== void 0 ? _defaultColumns$filte : [];
+    setDataSource(newDataSource);
+  };
+  return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
+    open: open,
+    centered: true,
+    width: "40%",
+    className: "".concat(styles.ColumnMgt, " ").concat(className !== null && className !== void 0 ? className : ""),
+    classNames: {
+      header: "".concat(header !== null && header !== void 0 ? header : ""),
+      body: "".concat(styles.body, " ").concat(body !== null && body !== void 0 ? body : ""),
+      footer: "".concat(footer !== null && footer !== void 0 ? footer : ""),
+      mask: "".concat(mask !== null && mask !== void 0 ? mask : ""),
+      content: "".concat(content !== null && content !== void 0 ? content : ""),
+      wrapper: "".concat(wrapper !== null && wrapper !== void 0 ? wrapper : "")
+    },
+    title: /*#__PURE__*/_jsxs("div", {
+      className: styles.title,
+      children: [/*#__PURE__*/_jsx("div", {
+        children: "\u81EA\u5B9A\u4E49\u663E\u793A\u5217\u9879"
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.tips,
+        children: ["\u5217\u9879\u663E\u793A\u4E0D\u5F97\u5C11\u4E8E", min, "\u9879\uFF0C\u6700\u591A\u652F\u6301\u81EA\u5B9A\u4E49", max !== null && max !== void 0 ? max : dataSource === null || dataSource === void 0 ? void 0 : dataSource.length, "\u4E2A\u5217\u9879\uFF0C\u7070\u8272\u9009\u4E2D\u5217\u4E0D\u652F\u6301\u9690\u85CF\u548C\u6392\u5E8F"]
+      })]
+    }),
+    footer: function footer(originNode) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: styles.footer,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.left,
+          children: /*#__PURE__*/_jsx("a", {
+            onClick: function onClick(e) {
+              e.preventDefault();
+              reset();
+            },
+            children: "\u6062\u590D\u9ED8\u8BA4"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.originNode,
+          children: originNode
+        })]
+      });
+    },
+    onOk: function onOk() {
+      var newDataSource = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
+        var _dataSource$find, _dataSource$find2, _dataSource$find3, _dataSource$find4, _dataSource$find5;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          hidden: typeof ((_dataSource$find = _dataSource.find(function (i) {
+            return i.dataIndex === item.dataIndex;
+          })) === null || _dataSource$find === void 0 ? void 0 : _dataSource$find.hidden) === "boolean" ? (_dataSource$find2 = _dataSource.find(function (i) {
+            return i.dataIndex === item.dataIndex;
+          })) === null || _dataSource$find2 === void 0 ? void 0 : _dataSource$find2.hidden : item.hidden,
+          sort: _dataSource.findIndex(function (i) {
+            return i.dataIndex === item.dataIndex;
+          }) === -1 ? item.sort : _dataSource.findIndex(function (i) {
+            return i.dataIndex === item.dataIndex;
+          }),
+          width: ((_dataSource$find3 = _dataSource.find(function (i) {
+            return i.dataIndex === item.dataIndex;
+          })) === null || _dataSource$find3 === void 0 ? void 0 : _dataSource$find3.width) || undefined,
+          ellipsis: typeof ((_dataSource$find4 = _dataSource.find(function (i) {
+            return i.dataIndex === item.dataIndex;
+          })) === null || _dataSource$find4 === void 0 ? void 0 : _dataSource$find4.ellipsis) === "boolean" ? (_dataSource$find5 = _dataSource.find(function (i) {
+            return i.dataIndex === item.dataIndex;
+          })) === null || _dataSource$find5 === void 0 ? void 0 : _dataSource$find5.ellipsis : item.ellipsis
+        });
+      });
+      if (newDataSource !== null && newDataSource !== void 0 && newDataSource.length) {
+        var _newDataSource$filter;
+        var showColumns = newDataSource.filter(function (i) {
+          return !i.hidden && i.dataIndex;
+        }).length;
+        if (showColumns < min) {
+          return message.error("\u81F3\u5C11\u9009\u62E9".concat(min, "\u9879\u663E\u793A\u5217"));
+        }
+        if (max && showColumns > max) {
+          return message.error("\u6700\u591A\u9009\u62E9".concat(max, "\u9879\u663E\u793A\u5217"));
+        }
+        var _selectedDataIndexes = (_newDataSource$filter = newDataSource.filter(function (item) {
+          return !item.hidden && item.dataIndex;
+        })) === null || _newDataSource$filter === void 0 ? void 0 : _newDataSource$filter.map(function (item) {
+          return item.dataIndex;
+        });
+        onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(_selectedDataIndexes, _dataSource);
+        _onOk === null || _onOk === void 0 || _onOk(newDataSource);
+        onClose === null || onClose === void 0 || onClose();
+      }
+    },
+    onCancel: onClose
+  }, modalConfig), {}, {
+    children: /*#__PURE__*/_jsx(Table, {
+      onDragEnd: onDragEnd,
+      columns: columns,
+      dataSource: _dataSource,
+      rowKey: "dataIndex",
+      pagination: false,
+      className: styles.table,
+      scroll: true
+    })
+  }));
+};
+export default ColumnMgt;

package/es/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/es/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;

package/es/components/Panel/ListPanel/_components/ToolBar/index.js

@@ -0,0 +1,84 @@
+var _excluded = ["title", "children"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import Button from "../../../../Button";
+import { Equal } from "hsu-utils";
+import Icon from "../../../../Icon";
+import React from "react";
+import TabBar from "../../../../TabBar";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import { isLegacyHasSelectorBrowser } from "../../../../../utils/cssSupports";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var ToolBar = function ToolBar(props) {
+  var _columns$filter;
+  var columns = props.columns,
+    title = props.title,
+    tabBarProps = props.tabBarProps,
+    buttonGroup = props.buttonGroup,
+    _props$tableTools = props.tableTools,
+    tableTools = _props$tableTools === void 0 ? {} : _props$tableTools,
+    setShowColumnMgt = props.setShowColumnMgt,
+    tips = props.tips,
+    otherTool = props.otherTool;
+  var columnMgt = tableTools.columnMgt;
+  var hasTitleTabBar = !!title || !!tips || !Equal.ValEqual(tabBarProps !== null && tabBarProps !== void 0 ? tabBarProps : {}, {});
+  var legacyHasSelector = isLegacyHasSelectorBrowser();
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: (!!title || !Equal.ValEqual(tabBarProps !== null && tabBarProps !== void 0 ? tabBarProps : {}, {}) || !!(buttonGroup !== null && buttonGroup !== void 0 && buttonGroup.length) || !Equal.ValEqual(tableTools !== null && tableTools !== void 0 ? tableTools : {}, {})) && /*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.ToolBar, _defineProperty({}, styles.legacyNoTitleTabBar, legacyHasSelector && !hasTitleTabBar)),
+      children: [hasTitleTabBar && /*#__PURE__*/_jsxs("div", {
+        className: styles.title_tabBar,
+        children: [(!!title || !!tips) && /*#__PURE__*/_jsxs("div", {
+          className: styles.title,
+          children: [title && /*#__PURE__*/_jsx("span", {
+            children: title
+          }), tips && /*#__PURE__*/_jsx("div", {
+            className: styles.tips,
+            children: tips
+          })]
+        }), !Equal.ValEqual(tabBarProps !== null && tabBarProps !== void 0 ? tabBarProps : {}, {}) && /*#__PURE__*/_jsx(TabBar, _objectSpread(_objectSpread({}, tabBarProps), {}, {
+          className: classNames(styles.tabBar, tabBarProps === null || tabBarProps === void 0 ? void 0 : tabBarProps.className)
+        }))]
+      }), (!!(buttonGroup !== null && buttonGroup !== void 0 && buttonGroup.length) || !Equal.ValEqual(tableTools !== null && tableTools !== void 0 ? tableTools : {}, {})) && /*#__PURE__*/_jsxs("div", {
+        className: styles.btns_tools,
+        children: [otherTool, !!(buttonGroup !== null && buttonGroup !== void 0 && buttonGroup.length) && /*#__PURE__*/_jsx("div", {
+          className: styles.buttonGroup,
+          children: buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.map(function (button, idx) {
+            var title = button.title,
+              children = button.children,
+              buttonProps = _objectWithoutProperties(button, _excluded);
+            return /*#__PURE__*/_jsx(Button.Chakra, _objectSpread(_objectSpread({}, buttonProps), {}, {
+              children: title || children
+            }), idx);
+          })
+        }), !Equal.ValEqual(tableTools !== null && tableTools !== void 0 ? tableTools : {}, {}) && /*#__PURE__*/_jsx("div", {
+          className: styles.tableTools,
+          children: columnMgt && /*#__PURE__*/_jsx(Icon, {
+            icon: "lets-icons:setting-line",
+            className: classNames(styles.toolItem, _defineProperty({}, styles.disabled, !(columns !== null && columns !== void 0 && (_columns$filter = columns.filter(function (i) {
+              return i.dataIndex;
+            })) !== null && _columns$filter !== void 0 && _columns$filter.length))),
+            onClick: function onClick() {
+              var _columns$filter2;
+              if (columns !== null && columns !== void 0 && (_columns$filter2 = columns.filter(function (i) {
+                return i.dataIndex;
+              })) !== null && _columns$filter2 !== void 0 && _columns$filter2.length) {
+                setShowColumnMgt === null || setShowColumnMgt === void 0 || setShowColumnMgt(true);
+              }
+            }
+          })
+        })]
+      })]
+    })
+  });
+};
+export default ToolBar;

package/es/components/Panel/ListPanel/_components/ToolBar/index.module.less

@@ -0,0 +1,83 @@
+.ToolBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  min-height: max-content;
+
+  .title_tabBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 10px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+      flex-wrap: wrap;
+
+      font-size: 14px;
+      font-weight: bold;
+
+      white-space: nowrap;
+      word-break: keep-all;
+
+      cursor: default;
+
+      .tips {
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+
+    .tabBar {
+      height: 32px;
+    }
+  }
+
+  &:not(:has(.title_tabBar)) {
+    .btns_tools {
+      width: 100%;
+    }
+  }
+
+  &.legacyNoTitleTabBar {
+    .btns_tools {
+      width: 100%;
+    }
+  }
+
+  .btns_tools {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+
+    .buttonGroup {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+    }
+
+    .tableTools {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+
+      .toolItem {
+        font-size: 16px;
+
+        opacity: 0.6;
+
+        cursor: pointer;
+
+        &.disabled {
+          opacity: 0.3;
+
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/es/components/Panel/ListPanel/index.d.ts

@@ -0,0 +1,69 @@
+import { BreadcrumbProps } from "antd";
+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 { TreeProps } from "../../Tree";
+import { ListModalPanelProps } from "./ListModalPanel";
+interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+    title?: ReactNode;
+    children?: ReactNode;
+}
+interface TableTools {
+    onTableRefresh?: () => void;
+    columnMgt?: IColumnMgt;
+}
+export interface ListPanelTabelProps 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 ListPanelProps<T extends SearchModeKeys = "Default"> {
+    className?: string;
+    wrapperClassName?: string;
+    headerTabBarProps?: TabBarProps;
+    headerTabBarContainerClassName?: string;
+    headerTabBarChildren?: ReactNode;
+    treeProps?: TreeProps;
+    searchProps?: SearchModePropsMap[T];
+    /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+    searchMode?: T;
+    tableProps?: ListPanelTabelProps;
+    hasPermi?: string[];
+    baseTreeBreadcrumb?: BreadcrumbProps["items"];
+    showTreeBreadcrumb?: boolean;
+    treeResize?: {
+        enabled?: boolean;
+        defaultWidth?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        minContentWidth?: number;
+    };
+}
+export interface ListPanelFC extends React.FC<ListPanelProps<SearchModeKeys>> {
+    Modal: React.FC<ListModalPanelProps<SearchModeKeys>>;
+}
+declare const ListPanel: ListPanelFC;
+export default ListPanel;