feat: Topic 详情消息 Value 列支持复制

km-console/packages/layout-clusters-fe/src/components/CopyContent/index.less

@@ -0,0 +1,32 @@
+.content-with-copy {
+    display: flex;
+    align-items: center;
+    .content {
+      flex: 1;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+    }
+    .copy-icon {
+        width: 20px;
+        height: 20px;
+        padding-top: 2px;
+        border-radius: 50%;
+        margin-left: 4px;
+        font-size: 16px;
+        color: #adb5bc;
+        opacity: 0;
+        &:hover {
+        background: rgba(33, 37, 41, 0.04);
+        color: #74788d;
+        }
+    }
+}
+
+.dcloud-table-cell-row-hover {
+    .copy-icon {
+        opacity: 1;
+    }
+}

km-console/packages/layout-clusters-fe/src/components/CopyContent/index.tsx

@@ -0,0 +1,35 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Tooltip } from 'knowdesign';
+import React, { useState } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { IconFont } from '@knowdesign/icons';
+import './index.less';
+
+const ContentWithCopy = (props: { content: string }) => {
+  const { content } = props;
+  const [visible, setVisible] = useState(false);
+  return (
+    <CopyToClipboard text={content}>
+      <div className="content-with-copy">
+        <Tooltip title={content}>
+          <span className="content">{content}</span>
+        </Tooltip>
+        {content && (
+          <Tooltip
+            title={
+              <span>
+                <CheckCircleFilled style={{ color: '#00b365' }} /> 复制成功
+              </span>
+            }
+            visible={visible}
+            onVisibleChange={() => setVisible(false)}
+          >
+            <IconFont className="copy-icon" type="icon-fuzhi" onClick={() => setVisible(true)} />
+          </Tooltip>
+        )}
+      </div>
+    </CopyToClipboard>
+  );
+};
+
+export default ContentWithCopy;

km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { AppContainer, Divider, Drawer, IconFont, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, Drawer, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
 import { DRangeTime } from 'knowdesign';
 import { CHART_COLOR_LIST, getBasicChartConfig } from '@src/constants/chartConfig';
 import Api from '@src/api/index';
 import { hashDataParse } from '@src/constants/common';
 import { ClustersPermissionMap } from '../CommonConfig';
 import ResetOffsetDrawer from './ResetOffsetDrawer';
-import { CheckCircleFilled } from '@ant-design/icons';
 import SwitchTab from '@src/components/SwitchTab';
+import ContentWithCopy from '@src/components/CopyContent';
 
 const { Option } = Select;
 
@@ -44,33 +44,6 @@ const metricWithType = [
   { metricName: 'Lag', metricType: 102 },
 ];
 
-const ContentWithCopy = (props: { content: string }) => {
-  const { content } = props;
-  const [visible, setVisible] = useState(false);
-  return (
-    <CopyToClipboard text={content}>
-      <div className="content-with-copy">
-        <Tooltip title={content}>
-          <span className="content">{content}</span>
-        </Tooltip>
-        {content && (
-          <Tooltip
-            title={
-              <span>
-                <CheckCircleFilled style={{ color: '#00b365' }} /> 复制成功
-              </span>
-            }
-            visible={visible}
-            onVisibleChange={() => setVisible(false)}
-          >
-            <IconFont className="copy-icon" type="icon-fuzhi" onClick={() => setVisible(true)} />
-          </Tooltip>
-        )}
-      </div>
-    </CopyToClipboard>
-  );
-};
-
 export default (props: any) => {
   const { scene } = props;
   const params = useParams<{
@@ -104,6 +77,9 @@ export default (props: any) => {
       title: 'Topic Partition',
       dataIndex: 'partitionId',
       key: 'partitionId',
+      lineClampOne: true,
+      needTooltip: true,
+      width: 180,
       render: (v: string, record: any) => {
         return `${record.topicName}-${v}`;
       },

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import moment from 'moment';
 import { timeFormat } from '../../constants/common';
-import { IconFont, Tooltip } from 'knowdesign';
-
+import { message, Tooltip, Utils } from 'knowdesign';
+import { IconFont } from '@knowdesign/icons';
+import ContentWithCopy from '@src/components/CopyContent';
 const aclOperationType: any = {
   0: 'UNKNOWN',
   1: 'ANY',
@@ -80,6 +81,7 @@ export const getTopicMessagesColmns = () => {
       title: 'Offset',
       dataIndex: 'offset',
       key: 'offset',
+      render: (t: number) => (t ? t.toLocaleString() : '-'),
     },
     {
       title: 'Timestamp',
@@ -100,8 +102,9 @@ export const getTopicMessagesColmns = () => {
       dataIndex: 'value',
       key: 'value',
       width: 280,
-      lineClampTwo: true,
-      needTooltip: true,
+      render: (t: string) => {
+        return t ? <ContentWithCopy content={t} /> : '-';
+      },
     },
     {
       title: 'Header',