fix: copy button not work

2 years ago · 3842006f6e
parent b48be3b883
commit 3842006f6e
6 changed files with 78 additions and 44 deletions
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "antd-style": "^3.6.2",
    "axios": "^1.7.2",
    "classnames": "^2.5.1",
+    "clipboard": "^2.0.11",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.11",
    "echarts": "^5.5.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -38,6 +38,9 @@ dependencies:
  classnames:
    specifier: ^2.5.1
    version: 2.5.1
+  clipboard:
+    specifier: ^2.0.11
+    version: 2.0.11
  crypto-js:
    specifier: ^4.2.0
    version: 4.2.0
@ -4435,7 +4438,7 @@ packages:
    dependencies:
      '@babel/core': 7.24.5
      postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
    transitivePeerDependencies:
      - supports-color
    dev: false
@ -4476,7 +4479,7 @@ packages:
      postcss-syntax: '>=0.36.2'
    dependencies:
      postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
      remark: 13.0.0
      unist-util-find-all-after: 3.0.2
    transitivePeerDependencies:
@ -7837,6 +7840,14 @@ packages:
    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
    dev: false

+  /clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==, tarball: https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz}
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+    dev: false
+
  /cliui@8.0.1:
    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
    engines: {node: '>=12'}
@ -8483,6 +8494,10 @@ packages:
    engines: {node: '>=0.4.0'}
    dev: false

+  /delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==, tarball: https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz}
+    dev: false
+
  /depd@2.0.0:
    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
    engines: {node: '>= 0.8'}
@ -10318,6 +10333,12 @@ packages:
      minimist: 1.2.8
    dev: false

+  /good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==, tarball: https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz}
+    dependencies:
+      delegate: 3.2.0
+    dev: false
+
  /gopd@1.0.1:
    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
    dependencies:
@ -13072,7 +13093,7 @@ packages:
    dependencies:
      htmlparser2: 3.10.1
      postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
    dev: false

  /postcss-image-set-function@4.0.7(postcss@8.4.38):
@ -13546,30 +13567,6 @@ packages:
      lodash: 4.17.21
      postcss: 8.4.38

-  /postcss-syntax@0.36.2(postcss@7.0.39):
-    resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
-    peerDependencies:
-      postcss: '>=5.0.0'
-      postcss-html: '*'
-      postcss-jsx: '*'
-      postcss-less: '*'
-      postcss-markdown: '*'
-      postcss-scss: '*'
-    peerDependenciesMeta:
-      postcss-html:
-        optional: true
-      postcss-jsx:
-        optional: true
-      postcss-less:
-        optional: true
-      postcss-markdown:
-        optional: true
-      postcss-scss:
-        optional: true
-    dependencies:
-      postcss: 7.0.39
-    dev: false
-
  /postcss-syntax@0.36.2(postcss@8.4.38):
    resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
    peerDependencies:
@ -16044,6 +16041,10 @@ packages:
    resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
    dev: false

+  /select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==, tarball: https://registry.npmjs.org/select/-/select-1.1.2.tgz}
+    dev: false
+
  /semver@5.7.2:
    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==, tarball: https://registry.npmjs.org/semver/-/semver-5.7.2.tgz}
    hasBin: true
@ -16723,7 +16724,7 @@ packages:
      postcss-sass: 0.4.4
      postcss-scss: 2.1.1
      postcss-selector-parser: 6.0.16
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
      postcss-value-parser: 4.2.0
      resolve-from: 5.0.0
      slash: 3.0.0
@ -17032,6 +17033,10 @@ packages:
      next-tick: 1.1.0
    dev: false

+  /tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==, tarball: https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz}
+    dev: false
+
  /tiny-invariant@1.3.3:
    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==, tarball: https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz}
    dev: false
--- a/src/components/copy-button/index.tsx
+++ b/src/components/copy-button/index.tsx
@ -1,6 +1,8 @@
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard';
 import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Button, message } from 'antd';
+import ClipboardJS from 'clipboard';
+import { useEffect, useRef, useState } from 'react';

 type CopyButtonProps = {
  text: string;
@ -21,19 +23,45 @@ const CopyButton: React.FC<CopyButtonProps> = ({
  style,
  size = 'middle'
 }) => {
-  const { copied, copyToClipboard } = useCopyToClipboard();
+  const intl = useIntl();
+  const [copied, setCopied] = useState(false);
+  const buttonRef = useRef(null);
+  const clipboardRef = useRef<any>(null);

-  const handleCopy = async (e: any) => {
-    e.stopPropagation();
-    await copyToClipboard(text);
+  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.success(
+          intl.formatMessage({ id: 'common.copy.fail' }) as string
+        );
+        e.clearSelection();
+      });
+    }
  };
+
+  useEffect(() => {
+    initClipboard();
+    return () => {
+      clipboardRef.current?.destroy();
+    };
+  }, [buttonRef]);
+
  return (
    <Button
+      ref={buttonRef}
      type={type}
      shape={shape}
      size={size}
-      onClick={handleCopy}
      disabled={!!disabled}
+      data-clipboard-text={text}
      icon={
        copied ? (
          <CheckCircleFilled
--- a/src/locales/en-US/dashboard.ts
+++ b/src/locales/en-US/dashboard.ts
@ -9,11 +9,11 @@ export default {
  'dashboard.memory': 'RAM',
  'dashboard.disk': 'Storage',
  'dashboard.vram': 'VRAM',
-  'dashboard.cpuutilization': 'CPU Utilization',
-  'dashboard.memoryutilization': 'RAM Utilization',
+  'dashboard.cpuutilization': 'Average CPU Utilization',
+  'dashboard.memoryutilization': 'Average RAM Utilization',
  'dashboard.diskutilization': 'Storage Utilization',
-  'dashboard.vramutilization': 'VRAM Utilization',
-  'dashboard.gpuutilization': 'GPU Utilization',
+  'dashboard.vramutilization': 'Average VRAM Utilization',
+  'dashboard.gpuutilization': 'Average GPU Utilization',
  'dashboard.usage': 'Usage',
  'dashboard.apirequest': 'API Requests',
  'dashboard.tokens': 'Token Usage',
--- a/src/locales/zh-CN/dashboard.ts
+++ b/src/locales/zh-CN/dashboard.ts
@ -9,11 +9,11 @@ export default {
  'dashboard.memory': '内存',
  'dashboard.disk': '磁盘',
  'dashboard.vram': '显存',
-  'dashboard.cpuutilization': 'CPU 利用率',
-  'dashboard.memoryutilization': '内存利用率',
+  'dashboard.cpuutilization': '平均 CPU 利用率',
+  'dashboard.memoryutilization': '平均内存利用率',
  'dashboard.diskutilization': '磁盘利用率',
-  'dashboard.vramutilization': '显存利用率',
-  'dashboard.gpuutilization': 'GPU 利用率',
+  'dashboard.vramutilization': '平均显存利用率',
+  'dashboard.gpuutilization': '平均 GPU 利用率',
  'dashboard.usage': '使用量',
  'dashboard.apirequest': 'API 请求',
  'dashboard.tokens': 'Token 使用量',
--- a/src/pages/playground/components/view-code-modal.tsx
+++ b/src/pages/playground/components/view-code-modal.tsx
@ -143,7 +143,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
    readOnly: true,
    formatOnType: true,
    formatOnPaste: true,
-    fontWeight: 700,
+    fontWeight: 'bold',
    scrollbar: {
      verticalSliderSize: 8
    }