From 0579fb83d330bba2043069ade2fc7b7cc4d45835 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Sun, 8 Jan 2023 21:56:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=8E=AF=E5=A2=83=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=80=BC=E7=9C=81=E7=95=A5=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |  2 ++
 pnpm-lock.yaml           | 31 ++++++++++++++++++++++++++++++-
 shell/update.sh          |  2 +-
 src/components/copy.tsx  | 39 +++++++++++++++++++++++++++++++++++++++
 src/pages/env/index.less |  6 ++++++
 src/pages/env/index.tsx  | 33 ++++++++++++++++++---------------
 6 files changed, 96 insertions(+), 17 deletions(-)
 create mode 100644 src/components/copy.tsx

diff --git a/package.json b/package.json
index e1abed0d..374088c2 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "@types/nodemailer": "^6.4.4",
     "@types/qrcode.react": "^1.0.2",
     "@types/react": "^18.0.20",
+    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.6",
     "@types/serve-handler": "^6.1.1",
     "@types/sockjs": "^0.3.33",
@@ -131,6 +132,7 @@
     "rc-tween-one": "^3.0.6",
     "react": "18.2.0",
     "react-codemirror2": "^7.2.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-diff-viewer": "^3.1.1",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7eb71dfa..7a0c5ee6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,7 @@ specifiers:
   '@types/nodemailer': ^6.4.4
   '@types/qrcode.react': ^1.0.2
   '@types/react': ^18.0.20
+  '@types/react-copy-to-clipboard': ^5.0.4
   '@types/react-dom': ^18.0.6
   '@types/serve-handler': ^6.1.1
   '@types/sockjs': ^0.3.33
@@ -68,6 +69,7 @@ specifiers:
   rc-tween-one: ^3.0.6
   react: 18.2.0
   react-codemirror2: ^7.2.1
+  react-copy-to-clipboard: ^5.1.0
   react-diff-viewer: ^3.1.1
   react-dnd: ^14.0.2
   react-dnd-html5-backend: ^14.0.0
@@ -149,6 +151,7 @@ devDependencies:
   '@types/nodemailer': 6.4.7
   '@types/qrcode.react': 1.0.2
   '@types/react': 18.0.26
+  '@types/react-copy-to-clipboard': 5.0.4
   '@types/react-dom': 18.0.10
   '@types/serve-handler': 6.1.1
   '@types/sockjs': 0.3.33
@@ -172,6 +175,7 @@ devDependencies:
   rc-tween-one: 3.0.6_biqbaboplfbrettd7655fr4n2y
   react: 18.2.0
   react-codemirror2: 7.2.1_6fkkduvahq4qazxosqpy7jy52m
+  react-copy-to-clipboard: 5.1.0_react@18.2.0
   react-diff-viewer: 3.1.1_biqbaboplfbrettd7655fr4n2y
   react-dnd: 14.0.5_h4mwivtpqi233hpr42kd7pn62u
   react-dnd-html5-backend: 14.1.0
@@ -4027,6 +4031,12 @@ packages:
     resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
     dev: true
 
+  /@types/react-copy-to-clipboard/5.0.4:
+    resolution: {integrity: sha512-otTJsJpofYAeaIeOwV5xBUGpo6exXG2HX7X4nseToCB2VgPEBxGBHCm/FecZ676doNR7HCSTVtmohxfG2b3/yQ==}
+    dependencies:
+      '@types/react': 18.0.26
+    dev: true
+
   /@types/react-dom/18.0.10:
     resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
     dependencies:
@@ -5022,6 +5032,7 @@ packages:
     resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
     engines: {node: '>=0.10.0'}
     dev: false
+    optional: true
 
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
@@ -5976,6 +5987,7 @@ packages:
     resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
     engines: {node: '>=0.10.0'}
     dev: false
+    optional: true
 
   /codemirror/5.65.11:
     resolution: {integrity: sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A==}
@@ -8772,6 +8784,7 @@ packages:
     dependencies:
       number-is-nan: 1.0.1
     dev: false
+    optional: true
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -10052,6 +10065,7 @@ packages:
     resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==}
     engines: {node: '>=0.10.0'}
     dev: false
+    optional: true
 
   /oauth-sign/0.9.0:
     resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
@@ -12463,6 +12477,19 @@ packages:
       react: 18.2.0
     dev: true
 
+  /react-copy-to-clipboard/5.1.0_react@18.2.0:
+    resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==}
+    peerDependencies:
+      react: ^15.3.0 || 16 || 17 || 18
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      copy-to-clipboard: 3.3.3
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: true
+
   /react-diff-viewer/3.1.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-rmvwNdcClp6ZWdS11m1m01UnBA4OwYaLG/li0dB781e/bQEzsGyj+qewVd6W5ztBwseQ72pO7nwaCcq5jnlzcw==}
     engines: {node: '>= 8'}
@@ -13724,6 +13751,7 @@ packages:
       is-fullwidth-code-point: 1.0.0
       strip-ansi: 3.0.1
     dev: false
+    optional: true
 
   /string-width/4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -13790,6 +13818,7 @@ packages:
     dependencies:
       ansi-regex: 2.1.1
     dev: false
+    optional: true
 
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
@@ -14959,7 +14988,7 @@ packages:
   /wide-align/1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
     dependencies:
-      string-width: 1.0.2
+      string-width: 4.2.3
     dev: false
 
   /win-release/1.1.1:
diff --git a/shell/update.sh b/shell/update.sh
index 48e2e4a8..e09decf0 100755
--- a/shell/update.sh
+++ b/shell/update.sh
@@ -224,7 +224,7 @@ update_qinglong() {
   if [ "$githubStatus" == "" ]; then
     mirror="gitee"
   fi
-  echo -e "\n使用 ${mirror} 源更新...\n"
+  echo -e "使用 ${mirror} 源更新...\n"
   export isFirstStartServer=false
 
   local all_branch=$(cd ${dir_root} && git branch -a)
diff --git a/src/components/copy.tsx b/src/components/copy.tsx
new file mode 100644
index 00000000..88459c2f
--- /dev/null
+++ b/src/components/copy.tsx
@@ -0,0 +1,39 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Tooltip, Typography } from 'antd';
+import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+const { Link } = Typography;
+
+const Copy = ({ text }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+  const copyIdRef = useRef<number>();
+
+  const copyText = (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    setCopied(true);
+
+    cleanCopyId();
+    copyIdRef.current = window.setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  };
+
+  const cleanCopyId = () => {
+    window.clearTimeout(copyIdRef.current!);
+  };
+
+  return (
+    <Link onClick={copyText} style={{ marginLeft: 1 }}>
+      <CopyToClipboard text={text}>
+        <Tooltip key="copy" title={copied ? '复制成功' : '复制'}>
+          {copied ? <CheckOutlined /> : <CopyOutlined />}
+        </Tooltip>
+      </CopyToClipboard>
+    </Link>
+  );
+};
+
+export default Copy;
diff --git a/src/pages/env/index.less b/src/pages/env/index.less
index 17c955e6..12f66c4e 100644
--- a/src/pages/env/index.less
+++ b/src/pages/env/index.less
@@ -5,3 +5,9 @@ tr.drop-over-downward td {
 tr.drop-over-upward td {
   border-top: 2px dashed #1890ff;
 }
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
index 82fa867f..19994004 100644
--- a/src/pages/env/index.tsx
+++ b/src/pages/env/index.tsx
@@ -32,8 +32,8 @@ import { exportJson } from '@/utils/index';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
-
-const { Text, Paragraph } = Typography;
+import Copy from '../../components/copy';
+const { Text } = Typography;
 const { Search } = Input;
 
 enum Status {
@@ -128,17 +128,12 @@ const Env = () => {
       width: '35%',
       render: (text: string, record: any) => {
         return (
-          <Paragraph
-            style={{
-              wordBreak: 'break-all',
-              marginBottom: 0,
-              textAlign: 'left',
-            }}
-            ellipsis={{ tooltip: text, rows: 2 }}
-            copyable
-          >
-            {text}
-          </Paragraph>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Tooltip title={text} placement="topLeft">
+              <div className="text-ellipsis">{text}</div>
+            </Tooltip>
+            <Copy text={text} />
+          </div>
         );
       },
     },
@@ -147,6 +142,13 @@ const Env = () => {
       dataIndex: 'remarks',
       key: 'remarks',
       align: 'center' as const,
+      render: (text: string, record: any) => {
+        return (
+          <Tooltip title={text} placement="topLeft">
+            <div className="text-ellipsis">{text}</div>
+          </Tooltip>
+        );
+      },
     },
     {
       title: '更新时间',
@@ -256,7 +258,7 @@ const Env = () => {
   const [searchText, setSearchText] = useState('');
   const [importLoading, setImportLoading] = useState(false);
   const tableRef = useRef<any>();
-  const tableScrollHeight = useTableScrollHeight(tableRef, 59)
+  const tableScrollHeight = useTableScrollHeight(tableRef, 59);
 
   const getEnvs = () => {
     setLoading(true);
@@ -286,7 +288,8 @@ const Env = () => {
       onOk() {
         request
           .put(
-            `${config.apiPrefix}envs/${record.status === Status.已禁用 ? 'enable' : 'disable'
+            `${config.apiPrefix}envs/${
+              record.status === Status.已禁用 ? 'enable' : 'disable'
             }`,
             {
               data: [record.id],