Repository: ant-design/ant-design-mobile (ts)

Issue:
Dialog.onConfirm() 在关闭中时可以点击确认按钮
### Version of antd-mobile

5.32.0

### Operating system and its version

Android

### Browser and its version

Edge 114

### Sandbox to reproduce

https://codesandbox.io/embed/staging-fire-8sl76k?fontsize=14&hidenavigation=1&theme=dark

### What happened?

在Dialog.onConfirm()开始关闭时,确认按钮会结束loading状态,导致它在完全关闭前是可以点击的

### Relevant log output

_No response_

Pull request:
fix(CenterPopup): set pointer-events none while animating
fix #6333

Patch:
diff --git a/docs/components/components/Main/MainSection/index.tsx b/docs/components/components/Main/MainSection/index.tsx
index 581202793..71c5bd33b 100644
--- a/docs/components/components/Main/MainSection/index.tsx
+++ b/docs/components/components/Main/MainSection/index.tsx
@@ -31,7 +31,7 @@ export default (props: { isWidthScreen: boolean }) => {
         <div className={styles.mainSectionDescription}>
           {trans(
             'Research the final experience of mobile',
-            '探索移动端 Web 的体验极限'
+            '探索移动端 Web 的极致体验'
           )}
         </div>
         <div className={styles.mainSectionButtonAction}>
diff --git a/package.json b/package.json
index dc19ecab0..71c73e801 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.32.1",
+  "version": "5.32.3",
   "scripts": {
     "start": "dumi dev",
     "build": "gulp",
diff --git a/src/components/center-popup/center-popup.tsx b/src/components/center-popup/center-popup.tsx
index 94a1ac63d..9cfcc14e7 100644
--- a/src/components/center-popup/center-popup.tsx
+++ b/src/components/center-popup/center-popup.tsx
@@ -114,7 +114,15 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
           role={props.role}
           aria-label={props['aria-label']}
         >
-          <animated.div style={style} ref={ref}>
+          <animated.div
+            style={{
+              ...style,
+              pointerEvents: style.opacity.to(v =>
+                v === 1 ? 'unset' : 'none'
+              ),
+            }}
+            ref={ref}
+          >
             {props.showCloseButton && (
               <a
                 className={classNames(
diff --git a/src/components/result-page/result-page.less b/src/components/result-page/result-page.less
index 61ff53ad1..cbaabd499 100644
--- a/src/components/result-page/result-page.less
+++ b/src/components/result-page/result-page.less
@@ -118,6 +118,7 @@
     justify-content: center;
     background-color: var(--adm-color-box);
     z-index: 3;
+    box-sizing: border-box;
 
     &-btn {
       flex: 1;
diff --git a/src/components/water-mark/water-mark.tsx b/src/components/water-mark/water-mark.tsx
index e97b5ba40..e966da7df 100644
--- a/src/components/water-mark/water-mark.tsx
+++ b/src/components/water-mark/water-mark.tsx
@@ -131,7 +131,9 @@ export const WaterMark: FC<WaterMarkProps> = p => {
       style={{
         zIndex,
         backgroundSize: `${gapX + width}px`,
-        backgroundImage: `url('${base64Url}')`,
+
+        // Not give `url` if its empty. Which will cause 404 error.
+        backgroundImage: base64Url === '' ? undefined : `url('${base64Url}')`,
       }}
     />
   )
diff --git a/src/global/global.less b/src/global/global.less
index e90cd9bd5..d2ad61f68 100644
--- a/src/global/global.less
+++ b/src/global/global.less
@@ -5,11 +5,14 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+html {
+  background-color: var(--adm-color-background-body);
+}
+
 body {
   color: var(--adm-color-text);
   font-size: var(--adm-font-size-main);
   font-family: var(--adm-font-family);
-  background-color: var(--adm-color-background);
 }
 
 a,
diff --git a/src/global/theme-dark.less b/src/global/theme-dark.less
index dac1688d8..59f27b3fb 100644
--- a/src/global/theme-dark.less
+++ b/src/global/theme-dark.less
@@ -17,6 +17,8 @@ html[data-prefers-color-scheme='dark'] {
   --adm-color-box: #0a0a0a;
   --adm-color-background: #1a1a1a;
 
+  --adm-color-background-body: var(--adm-color-background);
+
   // The variables below are deprecated and only exist for backward compatibility:
   --adm-border-color: var(--adm-color-border);
 }


Test patch:
diff --git a/src/components/water-mark/tests/water-mark.test.tsx b/src/components/water-mark/tests/water-mark.test.tsx
index 5c3ffde47..e9745ffbe 100644
--- a/src/components/water-mark/tests/water-mark.test.tsx
+++ b/src/components/water-mark/tests/water-mark.test.tsx
@@ -45,6 +45,34 @@ describe('WaterMark', () => {
     expect(getByTestId('mask')).not.toHaveClass(`${classPrefix}-full-page`)
   })
 
+  test('mount should not set base64Url', () => {
+    let exceeded = false
+
+    const Demo = () => {
+      const divRef = React.useRef<HTMLDivElement>(null)
+
+      React.useLayoutEffect(() => {
+        exceeded = true
+
+        const { style } = divRef.current?.querySelector(
+          '.adm-water-mark'
+        ) as HTMLElement
+
+        expect(style.backgroundImage).toBeFalsy()
+      }, [])
+
+      return (
+        <div ref={divRef}>
+          <WaterMark content='Ant Design Mobile' />
+        </div>
+      )
+    }
+
+    render(<Demo />)
+
+    expect(exceeded).toBeTruthy()
+  })
+
   test('throw error when Canvas is not supported', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
     const mockCanvasContext = jest.spyOn(