chore: add copy button for run command

src/components/copy-button/index.tsx

@@ -1,42 +1,24 @@
 import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Typography } from 'antd';
+import { TextProps } from 'antd/es/typography/Text';
 import React, { useMemo } from 'react';
 
 type CopyButtonProps = {
   children?: React.ReactNode;
   text: string;
-  disabled?: boolean;
   fontSize?: string;
-  type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
-  size?: 'small' | 'middle' | 'large';
-  shape?: 'circle' | 'round' | 'default';
-  tips?: string;
-  placement?:
-    | 'top'
-    | 'left'
-    | 'right'
-    | 'bottom'
-    | 'topLeft'
-    | 'topRight'
-    | 'bottomLeft'
-    | 'bottomRight';
   btnStyle?: React.CSSProperties;
   style?: React.CSSProperties;
 };
 
-const CopyButton: React.FC<CopyButtonProps> = ({
+const CopyButton: React.FC<CopyButtonProps & TextProps> = ({
   children,
-  tips,
   text,
-  disabled,
-  type = 'text',
-  shape = 'default',
   fontSize = '14px',
   style,
   btnStyle,
-  placement,
-  size = 'middle'
+  ...rest
 }) => {
   const intl = useIntl();
 
@@ -50,6 +32,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   return (
     <Typography.Text
       style={{ ...btnStyle }}
+      {...rest}
       copyable={{
         text: text,
         tooltips: tooltips,

src/pages/backends/forms/version-info.tsx

@@ -1,8 +1,9 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import CopyButton from '@/components/copy-button';
 import BaseSelect from '@/components/seal-form/base/select';
 import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import { useIntl } from '@umijs/max';
-import { Empty } from 'antd';
+import { Empty, Typography } from 'antd';
 import { useState } from 'react';
 import styled from 'styled-components';
 import {
@@ -135,11 +136,16 @@ export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
             <span className="label">
               {intl.formatMessage({ id: 'backend.imageName' })}:
             </span>
-            <AutoTooltip ghost minWidth={20}>
+            <CopyButton
+              text={data.image_name}
+              ellipsis={{
+                tooltip: !data.is_built_in ? data.image_name : false
+              }}
+            >
               {data.is_built_in
                 ? intl.formatMessage({ id: 'backend.versionInfo.autoImage' })
                 : data.image_name}
-            </AutoTooltip>
+            </CopyButton>
           </InfoItem>
         )}
         {data.entrypoint && (
@@ -157,9 +163,9 @@ export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
             <span className="label">
               {intl.formatMessage({ id: 'backend.runCommand' })}:
             </span>
-            <AutoTooltip ghost minWidth={20}>
+            <Typography.Text ellipsis={{ tooltip: data.run_command }}>
               {data.run_command}
-            </AutoTooltip>
+            </Typography.Text>
           </InfoItem>
         )}
         <InfoItem>