fix: adjust border raduis

src/pages/_components/column-settings.tsx

@@ -36,11 +36,12 @@ const Title = styled.div`
 `;
 
 const LabelWrapper = styled.span`
-  color: var(--color-text-secondary);
+  color: var(--ant-color-text-secondary);
   > span {
     display: flex;
     align-items: center;
     gap: 4px;
+    color: var(--ant-color-text-secondary);
     .sub-title {
       display: none;
     }

src/pages/_components/filter-form.tsx

@@ -1,13 +1,13 @@
+import IconFont from '@/components/icon-font';
 import OverlayScroller from '@/components/overlay-scroller';
-import { CloseCircleFilled, FilterOutlined } from '@ant-design/icons';
+import { CloseCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Badge, Button, Form, Popover } from 'antd';
+import { Button, Divider, Form, Popover } from 'antd';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div`
-  padding: 8px;
-  padding-right: 0px;
+  padding: 12px 8px;
   .title {
     font-weight: 500;
     margin-bottom: 12px;
@@ -26,25 +26,34 @@ const Container = styled.div`
   }
 `;
 
+const Filters = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0;
+  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);
+  }
+`;
+
 const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  .badge {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-  }
   .close-btn {
-    position: absolute;
-    display: none;
-    top: -4px;
-    right: -4px;
-    font-size: 12px;
     border-radius: 50%;
     color: var(--ant-color-text-quaternary);
-    background-color: var(--ant-color-bg-container);
     &:hover {
       color: var(--ant-color-text-tertiary);
     }
@@ -62,6 +71,7 @@ const FilterForm: React.FC<
     contentHeight?: number;
     initialValues?: any;
     hasFilters?: boolean;
+    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     onClose?: () => void;
     onValuesChange?: (ChangeValues: any, allValues: any) => void;
   }
@@ -70,6 +80,7 @@ const FilterForm: React.FC<
   width = 300,
   contentHeight = 400,
   initialValues = {},
+  placement = 'bottomLeft',
   onClose,
   onValuesChange
 }) => {
@@ -88,9 +99,10 @@ const FilterForm: React.FC<
 
   const handleOnReset = () => {
     form.resetFields(Object.keys(initialValues));
-    onValuesChange?.({}, initialValues);
     setOpen(false);
     setHasFilters(false);
+    form.resetFields();
+    onValuesChange?.({}, form.getFieldsValue());
   };
 
   const handleOnClose = () => {
@@ -106,19 +118,42 @@ const FilterForm: React.FC<
     setHasFilters(hasActiveFilters);
   };
 
+  const handleOnClear = () => {
+    handleOnReset();
+  };
+
+  const filtersCount = Object.values(form.getFieldsValue()).filter(
+    (value) => value !== undefined && value !== null && value !== ''
+  ).length;
+
+  const renderFooter = () => {
+    return (
+      <div className="btn-wrapper">
+        <Button size="middle" onClick={handleOnReset}>
+          {intl.formatMessage({ id: 'common.button.reset' })}
+        </Button>
+        <div className="buttons">
+          <Button size="middle" type="primary" onClick={handleOnClose}>
+            {intl.formatMessage({ id: 'common.button.close' })}
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Popover
       open={open}
-      trigger={'click'}
+      trigger={['click', 'hover']}
       arrow={false}
-      placement="bottomRight"
+      placement={placement}
       content={
         <Container>
           <OverlayScroller
             maxHeight={contentHeight}
             styles={{
               wrapper: {
-                paddingInlineStart: 0
+                paddingInline: 8
               }
             }}
           >
@@ -126,26 +161,29 @@ const FilterForm: React.FC<
               onValuesChange={handleOnValuesChange}
               initialValues={initialValues}
               form={form}
+              layout="vertical"
+              styles={{
+                label: {
+                  lineHeight: 1,
+                  height: 'auto',
+                  marginBottom: 8,
+                  fontWeight: 500
+                },
+                content: {
+                  minHeight: 0
+                }
+              }}
             >
               {children}
             </Form>
           </OverlayScroller>
-          <div className="btn-wrapper">
-            <Button size="middle" onClick={handleOnReset}>
-              {intl.formatMessage({ id: 'common.button.reset' })}
-            </Button>
-            <div className="buttons">
-              <Button size="middle" type="primary" onClick={handleOnClose}>
-                {intl.formatMessage({ id: 'common.button.close' })}
-              </Button>
-            </div>
-          </div>
         </Container>
       }
       onOpenChange={handleOpenChange}
       styles={{
         container: {
-          padding: 8
+          padding: 8,
+          border: '1px solid var(--ant-color-split)'
         },
         root: {
           width: width
@@ -153,25 +191,45 @@ const FilterForm: React.FC<
       }}
     >
       <ButtonWrapper>
-        <Button icon={<FilterOutlined />} onClick={handleToggle}></Button>
-        {hasFilters && (
-          <Badge
-            dot
-            color={'var(--ant-color-primary-text-hover)'}
-            className="badge"
-          />
-        )}
-        {hasFilters && (
-          <span className="close-btn">
-            <CloseCircleFilled
-              style={{ fontSize: 12 }}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleOnReset();
+        <Divider orientation="vertical" style={{ height: 16 }} />
+        <Button
+          size="small"
+          type="text"
+          variant="filled"
+          color="default"
+          shape="round"
+        >
+          <Filters>
+            <span
+              style={{
+                fontSize: 12,
+                color: 'var(--ant-color-text-secondary)',
+                fontWeight: 400
               }}
-            />
-          </span>
-        )}
+            >
+              More Filters
+            </span>
+            {filtersCount > 0 ? (
+              <>
+                <span className="count">{filtersCount}</span>
+                <span className="close-btn">
+                  <CloseCircleFilled
+                    style={{ fontSize: 16 }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleOnClear();
+                    }}
+                  />
+                </span>
+              </>
+            ) : (
+              <IconFont
+                type="icon-filter-list"
+                style={{ fontSize: 14 }}
+              ></IconFont>
+            )}
+          </Filters>
+        </Button>
       </ButtonWrapper>
     </Popover>
   );

src/pages/_components/page-box.tsx

@@ -1,9 +1,11 @@
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { ExtraContent } from '@/layouts/extraRender';
 import {
   PageContainer,
   RouteContext,
   type PageContainerProps
 } from '@ant-design/pro-components';
+import { Divider } from 'antd';
 import classNames from 'classnames';
 import { useContext, useEffect, useRef } from 'react';
 import pageBoxCss from './styles/page-box.less';
@@ -38,6 +40,7 @@ export const PageContainerInner: React.FC<
         {...rest}
         fixedHeader={false}
         title={false}
+        pageHeaderRender={false}
         style={{
           flex: 1
         }}
@@ -49,9 +52,15 @@ export const PageContainerInner: React.FC<
           <div className={pageBoxCss.left}>
             {leftContent || pageContext.title}
           </div>
-          {rightContent && (
-            <div className={pageBoxCss.right}>{rightContent}</div>
-          )}
+          <div className={pageBoxCss.right}>
+            {rightContent && (
+              <div>
+                {rightContent}
+                <Divider orientation="vertical" style={{ margin: '0 16px' }} />
+              </div>
+            )}
+            <ExtraContent />
+          </div>
         </div>
         <div
           className={classNames(pageBoxCss.contentWrapper)}

src/pages/_components/pill-button-group/index.tsx

@@ -0,0 +1,61 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import React from 'react';
+import pillButtonCss from './styles.less';
+
+type Option = {
+  label: string;
+  value: string | number;
+  icon?: React.ReactNode;
+};
+
+type Props = {
+  value?: string | number;
+  onChange?: (value: string | number | undefined) => void;
+  options: Option[];
+  disabled?: boolean;
+  variant?: 'filled' | 'outlined' | 'solid';
+};
+
+const PillButtonGroup: React.FC<Props> = ({
+  value,
+  onChange,
+  options,
+  disabled,
+  variant = 'outlined'
+}) => {
+  return (
+    <div className={pillButtonCss['wrapper']}>
+      {options.map((item) => {
+        const active = value === item.value;
+
+        return (
+          <AutoTooltip
+            ghost
+            title={item.label}
+            key={item.value}
+            maxWidth={'100%'}
+          >
+            <span
+              className={`${pillButtonCss['pill-item']} ${active ? pillButtonCss['active'] : ''}`}
+              key={item.value}
+              color="default"
+              onClick={() => {
+                if (item.value !== value) {
+                  onChange?.(item.value);
+                }
+                if (item.value === value) {
+                  onChange?.(undefined);
+                }
+              }}
+            >
+              {item.icon}
+              {item.label}
+            </span>
+          </AutoTooltip>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PillButtonGroup;

src/pages/_components/pill-button-group/styles.less

@@ -0,0 +1,31 @@
+.pill-item {
+  height: 28px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  border-radius: var(--ant-border-radius);
+  background-color: var(--ant-color-fill-tertiary);
+  color: var(--ant-color-text-secondary);
+  padding: 0 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &.active {
+    background-color: var(--ant-color-fill);
+    color: var(--ant-color-text);
+    font-weight: 500;
+  }
+
+  &:not(.active):hover {
+    background-color: var(--ant-color-fill-secondary);
+  }
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+  align-items: center;
+}

src/pages/_components/styles/page-box.less

@@ -18,7 +18,7 @@
     }
 
     .ant-pro-page-container-children-container {
-      height: calc(100vh - 56px);
+      height: calc(100vh - 16px);
       display: flex;
       flex-direction: column;
       border: 1px solid var(--color-border-container);