fix(form): fix LigthFilter close icon style error

close #7089

Author: chenshuai2144

packages/utils/src/components/FieldLabel/index.tsx

@@ -1,4 +1,4 @@
-import { CloseOutlined, DownOutlined } from '@ant-design/icons';
+import { CloseCircleFilled, DownOutlined } from '@ant-design/icons';
 import { useIntl } from '@ant-design/pro-provider';
 import { ConfigProvider } from 'antd';
 import type { SizeType } from 'antd/lib/config-provider/SizeContext';
@@ -164,7 +164,7 @@ const FieldLabelFunction: React.ForwardRefRenderFunction<
     >
       {getTextByValue(label, value)}
       {(value || value === 0) && allowClear && (
-        <CloseOutlined
+        <CloseCircleFilled
           role="button"
           title={intl.getMessage('form.lightFilter.clear', '清除')}
           className={classNames(
@@ -182,7 +182,11 @@ const FieldLabelFunction: React.ForwardRefRenderFunction<
       {downIcon !== false
         ? downIcon ?? (
             <DownOutlined
-              className={classNames(`${prefixCls}-icon`, `${prefixCls}-arrow`)}
+              className={classNames(
+                `${prefixCls}-icon`,
+                hashId,
+                `${prefixCls}-arrow`,
+              )}
             />
           )
         : null}

packages/utils/src/components/FieldLabel/style.ts

@@ -23,7 +23,7 @@ const genProStyle: GenerateStyle<ProToken> = (token) => {
       },
       '&-active': {
         paddingBlock: 0,
-        paddingInline: 12,
+        paddingInline: 8,
         backgroundColor: token.colorBgTextHover,
         [`&${token.componentCls}-allow-clear:hover:not(${token.componentCls}-disabled)`]:
           {
@@ -39,17 +39,13 @@ const genProStyle: GenerateStyle<ProToken> = (token) => {
         paddingBlock: 1,
         paddingInline: 1,
         color: token.colorIcon,
-        fontSize: '12px',
+        fontSize: 14,
         verticalAlign: 'middle',
         [`&${token.componentCls}-close`]: {
           display: 'none',
-          height: 1,
           alignItems: 'center',
           justifyContent: 'center',
-          width: 12,
-          color: token.colorBgContainer,
-          fontSize: 8,
-          backgroundColor: token.colorTextPlaceholder,
+          color: token.colorTextPlaceholder,
           borderRadius: '50%',
           '&:hover': {
             color: token.colorIcon,
@@ -87,7 +83,7 @@ const genProStyle: GenerateStyle<ProToken> = (token) => {
       '&-bordered': {
         height: '32px',
         paddingBlock: 0,
-        paddingInline: 12,
+        paddingInline: 8,
         border: `${token.lineWidth}px solid ${token.colorBorder}`,
         borderRadius: '@border-radius-base',
       },