refactor: table filters ux

src/components/overlay-scroller/index.tsx

@@ -11,7 +11,7 @@ export type { OverlayScrollerOptions };
 
 export const OverlayScroller: React.FC<
   OverlayScrollerOptions & {
-    maxHeight?: number;
+    maxHeight?: number | string;
     style?: React.CSSProperties;
     styles?: {
       wrapper?: React.CSSProperties;

src/components/page-tools/filters-button.less

@@ -0,0 +1,47 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  .count {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: 500;
+    background-color: var(--ant-color-bg-text-active);
+    color: var(--ant-color-text-secondary);
+  }
+}
+
+.buttonWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .close-btn {
+    border-radius: 50%;
+    color: var(--ant-color-text-quaternary);
+    display: none;
+    font-size: 16px;
+
+    &:hover {
+      color: var(--ant-color-text-tertiary);
+    }
+  }
+
+  &:hover {
+    .count {
+      display: none;
+    }
+
+    .close-btn {
+      display: block;
+    }
+  }
+}

src/components/page-tools/index.tsx

@@ -1,5 +1,6 @@
 import DropDownActions from '@/components/drop-down-actions';
 import {
+  CloseCircleFilled,
   DeleteOutlined,
   DownOutlined,
   PlusOutlined,
@@ -9,7 +10,9 @@ import {
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space } from 'antd';
 import React, { useMemo } from 'react';
+import IconFont from '../icon-font';
 import BaseSelect from '../seal-form/base/select';
+import filtersButtonCss from './filters-button.less';
 import './index.less';
 
 type PageToolsProps = {
@@ -20,6 +23,49 @@ type PageToolsProps = {
   style?: React.CSSProperties;
 };
 
+export const FiltersButton = ({
+  onClick,
+  onClear,
+  count
+}: {
+  onClick: () => void;
+  onClear: () => void;
+  count?: number;
+}) => {
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClear();
+  };
+  const intl = useIntl();
+
+  return (
+    <div className={filtersButtonCss.buttonWrapper}>
+      <Button
+        onClick={onClick}
+        style={{
+          color: 'var(--ant-color-text-tertiary)'
+        }}
+        icon={
+          <IconFont type="icon-filter-list" style={{ fontSize: 14 }}></IconFont>
+        }
+      >
+        <span className={filtersButtonCss.wrapper}>
+          <span>{intl.formatMessage({ id: 'common.filter.label' })}</span>
+          {!!count && <span className={filtersButtonCss.count}>{count}</span>}
+          {!!count && (
+            <span
+              className={filtersButtonCss['close-btn']}
+              onClick={handleClear}
+            >
+              <CloseCircleFilled />
+            </span>
+          )}
+        </span>
+      </Button>
+    </div>
+  );
+};
+
 const PageTools: React.FC<PageToolsProps> = (props) => {
   const {
     left,
@@ -77,6 +123,12 @@ interface FilterBarProps {
   showDeleteButton?: boolean;
   right?: React.ReactNode;
   left?: React.ReactNode;
+  filtersButtonProps?: {
+    show: boolean;
+    count: number;
+    onClick: () => void;
+    onClear: () => void;
+  };
   widths?: {
     input?: number;
     select?: number;
@@ -103,13 +155,21 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
     selectHolder,
     right,
     left,
-    widths
+    widths,
+    filtersButtonProps
   } = props;
   const intl = useIntl();
 
   const renderLeft = () => {
     return (
       <Space>
+        {filtersButtonProps?.show && (
+          <FiltersButton
+            onClear={filtersButtonProps.onClear}
+            onClick={filtersButtonProps.onClick}
+            count={filtersButtonProps.count}
+          ></FiltersButton>
+        )}
         <Input
           prefix={
             <SearchOutlined

src/components/seal-table/index.tsx

@@ -10,6 +10,7 @@ import { SealColumnProps, SealTableProps } from './types';
 import useSorter from './use-sorter';
 
 const Wrapper = styled.div<{ $token: any }>`
+  width: 100%;
   --ant-table-cell-padding-inline: ${(props) =>
     props.$token.cellPaddingInline}px;
   --ant-table-cell-padding-block: ${(props) => props.$token.cellPaddingBlock}px;