修改环境变量值省略展示

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;

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;
+}

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],