fix: optimize arrow style (#40521)

* perf: optimize arrow style

* chore: code clean

* chore: code clean

components/date-picker/style/index.ts

@@ -919,7 +919,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
   const {
     componentCls,
     antCls,
-    boxShadowPopoverArrow,
     controlHeight,
     fontSize,
     inputPaddingHorizontal,
@@ -960,6 +959,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     controlItemBgHover,
     presetsWidth,
     presetsMaxWidth,
+    boxShadowPopoverArrow,
   } = token;
 
   return [

components/dropdown/style/index.ts

@@ -424,15 +424,12 @@ export default genComponentStyleHook(
       lineHeight,
       paddingXXS,
       componentCls,
-      borderRadiusOuter,
       borderRadiusLG,
     } = token;
 
     const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2;
     const { dropdownArrowOffset } = getArrowOffset({
-      sizePopupArrow,
       contentRadius: borderRadiusLG,
-      borderRadiusOuter,
     });
 
     const dropdownToken = mergeToken<DropdownToken>(token, {

components/style/placementArrow.ts

@@ -10,17 +10,14 @@ function connectArrowCls(classList: string[], showArrowCls: string = '') {
 export const MAX_VERTICAL_CONTENT_RADIUS = 8;
 
 export function getArrowOffset(options: {
-  sizePopupArrow: number;
   contentRadius: number;
-  borderRadiusOuter: number;
   limitVerticalRadius?: boolean;
 }) {
   const maxVerticalContentRadius = MAX_VERTICAL_CONTENT_RADIUS;
-  const { sizePopupArrow, contentRadius, borderRadiusOuter, limitVerticalRadius } = options;
-  const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(borderRadiusOuter * (Math.sqrt(2) - 1));
-  const dropdownArrowOffset = (contentRadius > 12 ? contentRadius + 2 : 12) - arrowInnerOffset;
+  const { contentRadius, limitVerticalRadius } = options;
+  const dropdownArrowOffset = contentRadius > 12 ? contentRadius + 2 : 12;
   const dropdownArrowOffsetVertical = limitVerticalRadius
-    ? maxVerticalContentRadius - arrowInnerOffset
+    ? maxVerticalContentRadius
     : dropdownArrowOffset;
   return { dropdownArrowOffset, dropdownArrowOffsetVertical };
 }
@@ -51,9 +48,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
   } = options;
 
   const { dropdownArrowOffsetVertical, dropdownArrowOffset } = getArrowOffset({
-    sizePopupArrow,
     contentRadius,
-    borderRadiusOuter,
     limitVerticalRadius,
   });
   const dropdownArrowDistance = sizePopupArrow / 2 + marginXXS;

components/style/roundedArrow.ts

@@ -10,31 +10,44 @@ export const roundedArrow = (
 ): CSSObject => {
   const unitWidth = width / 2;
 
-  const ax = unitWidth - outerRadius * (Math.sqrt(2) - 1);
+  const ax = 0;
   const ay = unitWidth;
-  const bx = unitWidth + outerRadius * (1 - 1 / Math.sqrt(2));
+  const bx = (outerRadius * 1) / Math.sqrt(2);
   const by = unitWidth - outerRadius * (1 - 1 / Math.sqrt(2));
-  const cx = 2 * unitWidth - innerRadius * (1 / Math.sqrt(2));
-  const cy = innerRadius * (1 / Math.sqrt(2));
-  const dx = 4 * unitWidth - cx;
+  const cx = unitWidth - innerRadius * (1 / Math.sqrt(2));
+  const cy = outerRadius * (Math.sqrt(2) - 1) + innerRadius * (1 / Math.sqrt(2));
+  const dx = 2 * unitWidth - cx;
   const dy = cy;
-  const ex = 4 * unitWidth - bx;
+  const ex = 2 * unitWidth - bx;
   const ey = by;
-  const fx = 4 * unitWidth - ax;
+  const fx = 2 * unitWidth - ax;
   const fy = ay;
 
+  const shadowWidth = unitWidth * Math.sqrt(2) + outerRadius * (Math.sqrt(2) - 2);
+
   return {
     borderRadius: { _skip_check_: true, value: `0 0 ${innerRadius}px` },
     pointerEvents: 'none',
-    width: width * 2,
-    height: width * 2,
+    width,
+    height: width,
     overflow: 'hidden',
 
+    '&::before': {
+      position: 'absolute',
+      bottom: 0,
+      insetInlineStart: 0,
+      width,
+      height: width / 2,
+      background: bgColor,
+      clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 0 ${fx} ${fy} Z')`,
+      content: '""',
+    },
+
     '&::after': {
       content: '""',
       position: 'absolute',
-      width: width / Math.sqrt(2),
-      height: width / Math.sqrt(2),
+      width: shadowWidth,
+      height: shadowWidth,
       bottom: 0,
       insetInline: 0,
       margin: 'auto',
@@ -47,16 +60,5 @@ export const roundedArrow = (
       zIndex: 0,
       background: 'transparent',
     },
-
-    '&::before': {
-      position: 'absolute',
-      bottom: 0,
-      insetInlineStart: 0,
-      width: width * 2,
-      height: width / 2,
-      background: bgColor,
-      clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 0 ${fx} ${fy} Z')`,
-      content: '""',
-    },
   };
 };

components/theme/util/alias.ts

@@ -152,8 +152,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     screenXXL,
     screenXXLMin: screenXXL,
 
-    // FIXME: component box-shadow, should be removed
-    boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)',
+    boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
     boxShadowCard: `
       0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
       0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},