[pull] master from ant-design:master

.circleci/config.yml

@@ -7,9 +7,7 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:21.1-browsers
-    environment:
-      NODE_OPTIONS: --openssl-legacy-provider
+      - image: cimg/node:21.2-browsers
     steps:
       - checkout
       - run:

.codesandbox/ci.json

@@ -1,4 +1,4 @@
 {
-  "sandboxes": ["antd-reproduction-template-y9vgcf"],
-  "node": "14"
+  "sandboxes": ["antd-reproduction-template-forked-jyh2k9"],
+  "node": "18"
 }

.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx

@@ -19,6 +19,7 @@ import {
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 
+import Tilt from './Tilt';
 import useLocale from '../../../../hooks/useLocale';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
@@ -79,7 +80,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       flex-direction: column;
       row-gap: ${gap}px;
-      opacity: 0.65;
+      opacity: 0.8;
     `,
 
     flex: css`
@@ -117,7 +118,11 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
   const { styles } = useStyle();
 
   return (
-    <div className={classNames(className, styles.holder)} style={style}>
+    <Tilt
+      options={{ max: 20, glare: true, scale: 1 }}
+      className={classNames(className, styles.holder)}
+      style={style}
+    >
       <ModalPanel title="Ant Design 5.0" width="100%">
         {locale.text}
       </ModalPanel>
@@ -252,7 +257,7 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
       <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
 
       <Alert message="Ant Design love you!" type="success" />
-    </div>
+    </Tilt>
   );
 };
 

.dumi/pages/index/components/PreviewBanner/Tilt.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import VanillaTilt, { type TiltOptions } from 'vanilla-tilt';
+
+interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
+  options?: TiltOptions;
+}
+
+// https://micku7zu.github.io/vanilla-tilt.js/index.html
+const defaultTiltOptions = {
+  scale: 1.02,
+  max: 8,
+  speed: 1500,
+  glare: true,
+  'max-glare': 0.8,
+};
+
+const Tilt: React.FC<TiltProps> = ({ options, ...props }) => {
+  const node = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (node.current) {
+      VanillaTilt.init(node.current, {
+        ...defaultTiltOptions,
+        ...options,
+      });
+    }
+    return () => {
+      (node.current as any)?.vanillaTilt.destroy();
+    };
+  }, []);
+  return <div ref={node} {...props} />;
+};
+
+export default Tilt;

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -7,7 +7,6 @@ import useLocale from '../../../../hooks/useLocale';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import { GroupMask } from '../Group';
-import useMouseTransform from './useMouseTransform';
 
 const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));
 
@@ -28,7 +27,6 @@ const locales = {
 const useStyle = () => {
   const { direction } = React.useContext(ConfigProvider.ConfigContext);
   const isRTL = direction === 'rtl';
-
   return createStyles(({ token, css, cx }) => {
     const textShadow = `0 0 3px ${token.colorBgContainer}`;
 
@@ -37,7 +35,9 @@ const useStyle = () => {
       inset: 0;
       backdrop-filter: blur(4px);
       opacity: 1;
-      transition: opacity 1s ease;
+      background: rgba(255, 255, 255, 0.2);
+      transition: all 1s ease;
+      pointer-events: none;
     `);
 
     return {
@@ -114,10 +114,8 @@ const PreviewBanner: React.FC<PreviewBannerProps> = (props) => {
   const { pathname, search } = useLocation();
   const isZhCN = utils.isZhCN(pathname);
 
-  const [componentsBlockStyle, mouseEvents] = useMouseTransform();
-
   return (
-    <GroupMask {...mouseEvents}>
+    <GroupMask>
       {/* Image Left Top */}
       <img
         style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
@@ -134,7 +132,11 @@ const PreviewBanner: React.FC<PreviewBannerProps> = (props) => {
       <div className={styles.holder}>
         {/* Mobile not show the component preview */}
         <Suspense fallback={null}>
-          {!isMobile && <ComponentsBlock className={styles.block} style={componentsBlockStyle} />}
+          {isMobile ? null : (
+            <div className={styles.block}>
+              <ComponentsBlock />
+            </div>
+          )}
         </Suspense>
         <div className={styles.mask} />
 

.dumi/theme/common/LiveCode.tsx

@@ -16,11 +16,11 @@ const useStyle = createStyles(({ token, css }) => {
         outline: none;
 
         &:hover {
-          border: 1px solid ${colorPrimaryBorder} !important;
+          box-shadow: inset 0 0 0 1px ${colorPrimaryBorder} !important;
         }
 
         &:focus {
-          border: 1px solid ${colorPrimary} !important;
+          box-shadow: inset 0 0 0 1px ${colorPrimary} !important;
         }
       }
     `,

.dumi/theme/locales/en-US.json

@@ -111,6 +111,8 @@
   "app.footer.seeconf": "Experience Tech Conference",
   "app.footer.xtech": "Ant Financial Experience Tech",
   "app.footer.xtech.slogan": "Experience The Beauty",
+  "app.footer.galacean": "Galacean",
+  "app.footer.galacean.slogan": "Interactive Graphics Solution",
   "app.docs.color.pick-primary": "Pick your primary color",
   "app.docs.color.pick-background": "Pick your background color",
   "app.docs.components.icon.search.placeholder": "Search icons here, click icon to copy code",

.dumi/theme/locales/zh-CN.json

@@ -110,6 +110,8 @@
   "app.footer.seeconf": "蚂蚁体验科技大会",
   "app.footer.xtech": "蚂蚁体验科技",
   "app.footer.xtech.slogan": "让用户体验美好",
+  "app.footer.galacean": "Galacean",
+  "app.footer.galacean.slogan": "互动图形解决方案",
   "app.docs.color.pick-primary": "选择你的主色",
   "app.docs.color.pick-background": "选择你的背景色",
   "app.docs.components.icon.search.placeholder": "在此搜索图标，点击图标可复制代码",

.dumi/theme/slots/Footer/index.tsx

@@ -363,6 +363,20 @@ const Footer: React.FC = () => {
           url: 'https://kitchen.alipay.com',
           openExternal: true,
         },
+        {
+          icon: (
+            <img
+              src="https://mdn.alipayobjects.com/huamei_j9rjmc/afts/img/A*3ittT5OEo2gAAAAAAAAAAAAADvGmAQ/original"
+              width={16}
+              height={16}
+              alt="Galacean"
+            />
+          ),
+          title: <FormattedMessage id="app.footer.galacean" />,
+          description: <FormattedMessage id="app.footer.galacean.slogan" />,
+          url: 'https://galacean.antgroup.com/',
+          openExternal: true,
+        },
         {
           icon: (
             <img

.dumi/theme/slots/Header/index.tsx

@@ -25,15 +25,16 @@ const RESPONSIVE_SM = 1200;
 
 const locales = {
   cn: {
-    message:
-      '语雀公益计划：大学生认证教育邮箱，即可免费获得语雀会员。语雀，支付宝匠心打造的在线文档平台。',
-    shortMessage: '支付宝语雀 · 大学生公益计划火热进行中！',
-    more: '了解更多',
+    message: 'Galacean Effects · 所见即所得的动效新方案。',
+    shortMessage: 'Galacean Effects · 所见即所得的动效新方案。',
+    more: '前往了解',
+    link: 'https://galacean.antgroup.com/effects/',
   },
   en: {
     message: '',
     shortMessage: '',
     more: '',
+    link: '',
   },
 };
 
@@ -366,26 +367,21 @@ const Header: React.FC = () => {
         </Popover>
       )}
       {isZhCN && bannerVisible && (
-        <ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
+        <ConfigProvider theme={{ token: { colorInfoBg: '#ceebf9', colorTextBase: '#000' } }}>
           <Alert
             className={styles.banner}
             message={
               <>
-                <img
-                  className={styles.icon}
-                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-                  alt="yuque"
-                />
                 <span>{isMobile ? locale.shortMessage : locale.message}</span>
                 <a
                   className={styles.link}
-                  href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
+                  href={locale.link}
                   target="_blank"
                   rel="noreferrer"
                   onClick={() => {
                     window.gtag?.('event', '点击', {
                       event_category: 'top_banner',
-                      event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
+                      event_label: locale.link,
                     });
                   }}
                 >

.eslintrc.js

@@ -25,7 +25,16 @@ module.exports = {
     },
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['react', '@babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
+  plugins: [
+    'react',
+    '@babel',
+    'jest',
+    '@typescript-eslint',
+    'react-hooks',
+    'unicorn',
+    'markdown',
+    'lodash',
+  ],
   // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
   overrides: [
     {
@@ -156,6 +165,7 @@ module.exports = {
     'react/no-unused-class-component-methods': 0,
     'import/extensions': 0,
     'import/no-cycle': 2,
+    'lodash/import-scope': 2,
     'import/no-extraneous-dependencies': [
       'error',
       {

.github/workflows/issue-labeled.yml

@@ -40,7 +40,9 @@ jobs:
           body: |
             Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
 
-            你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+
+            > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
 
             ![](https://gw.alipayobjects.com/zos/antfincdn/y9kwg7DVCd/reproduce.gif)
 

.github/workflows/pr-open-check.yml

@@ -19,10 +19,13 @@ jobs:
           refuse-issue-label: '🎱 Collaborate PR only'
           need-creator-authority: 'write'
           comment: |
-            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊
+            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. Thank you for your contribution! 😊
 
-            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊
-          close: true
+            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认！感谢您的贡献！😊
+          close: false
+          reviewers: |
+            MadCcc
+            zombieJ
 
   check-changelog:
     permissions: