chore: playground mutilmodel input

src/components/echarts/chart.tsx

@@ -50,7 +50,7 @@ const Chart: React.FC<{
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, [resize, chart]);
+  }, [resize]);
 
   return <div ref={container} style={{ width: width, height }}></div>;
 };

src/components/seal-table/components/header.tsx

@@ -48,4 +48,4 @@ const Header: React.FC<HeaderProps> = (props) => {
   );
 };
 
-export default Header;
+export default React.memo(Header);

src/components/seal-table/index.tsx

@@ -8,7 +8,7 @@ import {
   type PaginationProps
 } from 'antd';
 import _ from 'lodash';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Header from './components/header';
 import TableRow from './components/table-row';
 import './styles/index.less';
@@ -75,7 +75,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     pagination?.onShowSizeChange?.(current, size);
   };
 
-  const renderHeaderPrefix = () => {
+  const renderHeaderPrefix = useMemo(() => {
     if (expandable && rowSelection) {
       return (
         <div className="header-row-prefix-wrapper">
@@ -107,9 +107,9 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
       );
     }
     return null;
-  };
+  }, [expandable, rowSelection, selectAll, indeterminate]);
 
-  const renderContent = useCallback(() => {
+  const renderContent = useMemo(() => {
     if (!props.dataSource.length) {
       return (
         <div className="empty-wrapper">
@@ -148,12 +148,12 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
       <div className="seal-table-container">
         {
           <div className="header-row-wrapper">
-            {renderHeaderPrefix()}
+            {renderHeaderPrefix}
             <Header onSort={onSort}>{children}</Header>
           </div>
         }
 
-        <Spin spinning={loading}>{renderContent()}</Spin>
+        <Spin spinning={loading}>{renderContent}</Spin>
       </div>
       {pagination && (
         <div className="pagination-wrapper">

src/components/status-tag/copy.less

@@ -0,0 +1,20 @@
+:local(.status-content-wrapper) {
+  // padding-top: 24px;
+  &:hover {
+    :global(.copy-button-wrapper) {
+      display: block;
+    }
+  }
+
+  :global {
+    .copy-button-wrapper {
+      display: none;
+      background-color: #383838;
+      position: absolute;
+      z-index: 10;
+      right: 0;
+      top: 0;
+      border-radius: 0 8px 0 4px;
+    }
+  }
+}

src/components/status-tag/index.tsx

@@ -3,7 +3,9 @@ import { StatusType } from '@/config/types';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import CopyButton from '../copy-button';
+import CopyStyle from './copy.less';
 import './index.less';
 
 export const StatusMaps = {
@@ -58,6 +60,20 @@ const StatusTag: React.FC<StatusTagProps> = ({
     }
     return <span>{text}</span>;
   };
+  const renderTitle = useMemo(() => {
+    return (
+      <div className={CopyStyle['status-content-wrapper']}>
+        <div className="copy-button-wrapper">
+          <CopyButton
+            style={{ color: 'rgba(255,255,255,.8)' }}
+            text={statusValue.message || ''}
+            size="small"
+          ></CopyButton>
+        </div>
+        <div>{statusValue.message}</div>
+      </div>
+    );
+  }, [statusValue]);
   return (
     <span
       className={classNames('status-tag', {
@@ -70,7 +86,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
     >
       {statusValue.message ? (
         <Tooltip
-          title={statusValue.message}
+          title={renderTitle}
           overlayInnerStyle={{ maxHeight: 200, overflow: 'auto' }}
         >
           <span className="m-r-5">