fix: copy button do not work

src/components/copy-button/index.tsx

@@ -1,8 +1,7 @@
 import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Tooltip, message } from 'antd';
-import ClipboardJS from 'clipboard';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Typography } from 'antd';
+import React, { useMemo } from 'react';
 
 type CopyButtonProps = {
   children?: React.ReactNode;
@@ -40,65 +39,32 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   size = 'middle'
 }) => {
   const intl = useIntl();
-  const [copied, setCopied] = useState(false);
-  const buttonRef = useRef(null);
-  const clipboardRef = useRef<any>(null);
 
-  const initClipboard = () => {
-    if (buttonRef.current) {
-      clipboardRef.current = new ClipboardJS(buttonRef.current);
-      clipboardRef.current.on('success', () => {
-        setCopied(true);
-        setTimeout(() => {
-          setCopied(false);
-        }, 3000);
-      });
-
-      clipboardRef.current.on('error', (e: any) => {
-        message.error(intl.formatMessage({ id: 'common.copy.fail' }) as string);
-        e.clearSelection();
-      });
-    }
-  };
-
-  const tipTitle = useMemo(() => {
-    if (copied) {
-      return intl.formatMessage({ id: 'common.button.copied' });
-    }
-    return tips ?? intl.formatMessage({ id: 'common.button.copy' });
-  }, [copied, intl, tips]);
-
-  useEffect(() => {
-    initClipboard();
-    return () => {
-      clipboardRef.current?.destroy();
-    };
-  }, [buttonRef]);
+  const tooltips = useMemo(() => {
+    return [
+      intl.formatMessage({ id: 'common.button.copy' }),
+      intl.formatMessage({ id: 'common.button.copied' })
+    ];
+  }, [intl]);
 
   return (
-    <Tooltip title={tipTitle} placement={placement}>
-      <Button
-        className="copy-button"
-        ref={buttonRef}
-        type={type}
-        shape={shape}
-        size={size}
-        disabled={!!disabled}
-        data-clipboard-text={text}
-        style={{ ...btnStyle }}
-        icon={
-          copied ? (
-            <CheckCircleFilled
-              style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
-            />
-          ) : (
-            <CopyOutlined style={{ fontSize: fontSize, ...style }} />
-          )
-        }
-      >
-        {children}
-      </Button>
-    </Tooltip>
+    <Typography.Text
+      style={{ ...btnStyle }}
+      disabled={!!disabled}
+      copyable={{
+        text: text,
+        tooltips: tooltips,
+        icon: [
+          <CopyOutlined style={{ fontSize: fontSize, ...style }} key="copy" />,
+          <CheckCircleFilled
+            style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
+            key="check"
+          />
+        ]
+      }}
+    >
+      {children}
+    </Typography.Text>
   );
 };