refactor: add scale and clip-path effects for stack notifications

- Add notificationIndex and stackInThreshold props to Notification component
- Implement CSS scale transformation based on notification index
- Add clip-path animation for stacked notifications
- Update tests to verify notification index attributes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

assets/geek.less

@@ -1,5 +1,6 @@
 @notificationPrefixCls: notification;
 @notificationMotionDuration: 0.3s;
+// @notificationMotionDuration: 10s;
 @notificationMotionEase: cubic-bezier(0.22, 1, 0.36, 1);
 @notificationMotionOffset: 64px;
 
@@ -42,10 +43,13 @@
     // transform: translate3d(var(--notification-x, 0), var(--notification-y, 0), 0);
     right: var(--notification-x, 0);
     top: var(--notification-y, 0);
+    transform: scale(var(--notification-scale, 1));
     transition:
       transform @notificationMotionDuration @notificationMotionEase,
       inset @notificationMotionDuration @notificationMotionEase,
+      clip-path @notificationMotionDuration @notificationMotionEase,
       opacity @notificationMotionDuration @notificationMotionEase;
+    transform-origin: center bottom;
     padding: 14px 16px;
     border: 2px solid #111;
     border-radius: 14px;
@@ -89,8 +93,21 @@
   }
 
   &-stack {
+    .@{notificationPrefixCls}-notice {
+      clip-path: inset(-50% -50% -50% -50%);
+    }
+
     &:not(.@{notificationPrefixCls}-stack-expanded) {
-      .@{notificationPrefixCls}-list-item:nth-last-child(n + 4) {
+      .@{notificationPrefixCls}-notice {
+        --notification-scale: ~'calc(1 - min(var(--notification-index, 0), 2) * 0.06)';
+        clip-path: inset(50% -50% -50% -50%);
+      }
+
+      .@{notificationPrefixCls}-notice[data-notification-index='0'] {
+        clip-path: inset(-50% -50% -50% -50%);
+      }
+
+      .@{notificationPrefixCls}-notice:not(.@{notificationPrefixCls}-notice-stack-in-threshold) {
         opacity: 0;
         pointer-events: none;
       }
@@ -106,28 +123,28 @@
 .notification-fade-appear-prepare,
 .notification-fade-enter-prepare {
   opacity: 0;
-  transform: translateX(@notificationMotionOffset);
+  transform: translateX(@notificationMotionOffset) scale(var(--notification-scale, 1));
   transition: none;
 }
 
 .notification-fade-appear-start,
 .notification-fade-enter-start {
   opacity: 0;
-  transform: translateX(@notificationMotionOffset);
+  transform: translateX(@notificationMotionOffset) scale(var(--notification-scale, 1));
 }
 
 .notification-fade-appear-active,
 .notification-fade-enter-active {
   opacity: 1;
-  transform: translateX(0);
+  transform: translateX(0) scale(var(--notification-scale, 1));
 }
 
 .notification-fade-leave-start {
   opacity: 1;
-  transform: translateX(0);
+  transform: translateX(0) scale(var(--notification-scale, 1));
 }
 
 .notification-fade-leave-active {
   opacity: 0;
-  transform: translateX(@notificationMotionOffset);
+  transform: translateX(@notificationMotionOffset) scale(var(--notification-scale, 1));
 }

src/Notification.tsx

@@ -47,6 +47,8 @@ export interface NotificationProps {
     x: number;
     y: number;
   };
+  notificationIndex?: number;
+  stackInThreshold?: boolean;
   props?: React.HTMLAttributes<HTMLDivElement> & Record<string, any>;
 
   // Behavior
@@ -81,6 +83,8 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
     actions,
     closable,
     offset,
+    notificationIndex,
+    stackInThreshold,
     props: rootProps,
 
     // Behavior
@@ -156,6 +160,7 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
   }
 
   const mergedOffset = offset ?? offsetRef.current;
+  const mergedNotificationIndex = notificationIndex ?? 0;
 
   // ======================== Content =========================
   const titleNode =
@@ -199,24 +204,32 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
   }
 
   // ========================= Render =========================
+  const mergedStyle: React.CSSProperties & {
+    '--notification-index'?: number;
+    '--notification-x'?: string;
+    '--notification-y'?: string;
+  } = {
+    '--notification-index': mergedNotificationIndex,
+    ...styles?.root,
+    ...style,
+  };
+
+  if (mergedOffset) {
+    mergedStyle['--notification-x'] = `${mergedOffset.x}px`;
+    mergedStyle['--notification-y'] = `${mergedOffset.y}px`;
+  }
+
   return (
     <div
       {...rootProps}
       ref={ref}
+      data-notification-index={mergedNotificationIndex}
       // Styles
       className={clsx(noticePrefixCls, className, classNames?.root, {
         [`${noticePrefixCls}-closable`]: mergedClosable,
+        [`${noticePrefixCls}-stack-in-threshold`]: stackInThreshold,
       })}
-      style={{
-        ...styles?.root,
-        ...(mergedOffset
-          ? {
-              '--notification-x': `${mergedOffset.x}px`,
-              '--notification-y': `${mergedOffset.y}px`,
-            }
-          : null),
-        ...style,
-      }}
+      style={mergedStyle}
       // Events
       onClick={onClick}
       onMouseEnter={onInternalMouseEnter}

src/NotificationList.tsx

@@ -152,9 +152,11 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
             }
           }}
         >
-          {({ config, className: motionClassName, style: motionStyle }, nodeRef) => {
-            const { key, placement: _placement, ...notificationConfig } = config;
+          {({ config, className: motionClassName, style: motionStyle, index = 0 }, nodeRef) => {
+            const { key, placement: itemPlacement, ...notificationConfig } = config;
             const strKey = String(key);
+            const notificationIndex = keyList.length - index - 1;
+            const stackInThreshold = stackEnabled && notificationIndex < threshold;
 
             const setItemRef = (node: HTMLDivElement | null) => {
               setNodeSize(strKey, node);
@@ -167,6 +169,8 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
                 ref={composeRef(nodeRef, setItemRef)}
                 prefixCls={prefixCls}
                 offset={notificationPosition.get(strKey)}
+                notificationIndex={notificationIndex}
+                stackInThreshold={stackInThreshold}
                 className={clsx(contextClassNames?.notice, config.className)}
                 style={config.style}
                 classNames={{

tests/stack.test.tsx

@@ -41,6 +41,25 @@ describe('stack', () => {
     expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
     expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
 
+    const notices = Array.from(document.querySelectorAll<HTMLElement>('.rc-notification-notice'));
+    expect(notices.map((notice) => notice.getAttribute('data-notification-index'))).toEqual([
+      '4',
+      '3',
+      '2',
+      '1',
+      '0',
+    ]);
+    expect(
+      notices
+        .slice(0, 2)
+        .every((notice) => !notice.matches('.rc-notification-notice-stack-in-threshold')),
+    ).toBeTruthy();
+    expect(
+      notices
+        .slice(2)
+        .every((notice) => notice.matches('.rc-notification-notice-stack-in-threshold')),
+    ).toBeTruthy();
+
     fireEvent.mouseEnter(document.querySelector('.rc-notification-list'));
     expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
   });
@@ -203,6 +222,8 @@ describe('stack', () => {
       .querySelector('.context-content-second')
       ?.closest<HTMLElement>('.rc-notification-notice');
 
+    expect(firstNotice?.getAttribute('data-notification-index')).toBe('1');
+    expect(secondNotice?.getAttribute('data-notification-index')).toBe('0');
     expect(firstNotice?.style.getPropertyValue('--notification-y')).toBe('58px');
     expect(secondNotice?.style.getPropertyValue('--notification-y')).toBe('0px');