chore: add cancel query model

src/components/highlight-code/code-viewer.tsx

@@ -1,5 +1,6 @@
 import hljs from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
+import { memo, useMemo } from 'react';
 import CopyButton from '../copy-button';
 import { escapeHtml } from './utils';
 
@@ -19,7 +20,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     copyable = true
   } = props || {};
 
-  const renderCode = () => {
+  const highlightedCode = useMemo(() => {
     const autodetectLang = autodetect && !lang;
     const cannotDetectLanguage = !autodetectLang && !hljs.getLanguage(lang);
     let className = '';
@@ -52,9 +53,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
       value: result.value,
       className: className
     };
-  };
-
-  const highlightedCode = renderCode();
+  }, [code, lang, autodetect, ignoreIllegals]);
 
   return (
     <pre className="code-pre">
@@ -64,13 +63,15 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
           __html: highlightedCode.value
         }}
       ></code>
-      <CopyButton
-        text={code}
-        size="small"
-        style={{ color: '#abb2bf' }}
-      ></CopyButton>
+      {copyable && (
+        <CopyButton
+          text={code}
+          size="small"
+          style={{ color: '#abb2bf' }}
+        ></CopyButton>
+      )}
     </pre>
   );
 };
 
-export default CodeViewer;
+export default memo(CodeViewer);

src/components/highlight-code/index.tsx

@@ -4,12 +4,13 @@ import './style.less';
 const HighlightCode: React.FC<{
   code: string;
   lang?: string;
+  copyable?: boolean;
 }> = (props) => {
-  const { code, lang = 'bash' } = props;
+  const { code, lang = 'bash', copyable = true } = props;
 
   return (
     <div className="high-light-wrapper">
-      <CodeViewer lang={lang} code={code} />
+      <CodeViewer lang={lang} code={code} copyable={copyable} />
     </div>
   );
 };

src/components/status-tag/copy.less

@@ -16,5 +16,13 @@
       top: 0;
       border-radius: 0 8px 0 4px;
     }
+
+    .simplebar-scrollbar::before {
+      background: var(--color-scroll-bg);
+    }
+
+    .simplebar-content {
+      width: max-content;
+    }
   }
 }

src/components/status-tag/index.less

@@ -11,6 +11,16 @@
   font-size: var(--font-size-base);
   overflow: hidden;
 
+  .txt {
+    display: flex;
+    align-items: center;
+    height: 20px;
+
+    &.err {
+      cursor: default;
+    }
+  }
+
   &.download {
     border: 1px solid #93ecc5 !important;
   }

src/components/status-tag/index.tsx

@@ -4,6 +4,8 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import CopyButton from '../copy-button';
 import CopyStyle from './copy.less';
 import './index.less';
@@ -70,7 +72,14 @@ const StatusTag: React.FC<StatusTagProps> = ({
             size="small"
           ></CopyButton>
         </div>
-        <div>{statusValue.message}</div>
+
+        <SimpleBar style={{ maxHeight: 200 }}>
+          <div
+            style={{ width: 'max-content', maxWidth: 250, paddingInline: 10 }}
+          >
+            {statusValue.message}
+          </div>
+        </SimpleBar>
       </div>
     );
   }, [statusValue]);
@@ -87,15 +96,18 @@ const StatusTag: React.FC<StatusTagProps> = ({
       {statusValue.message ? (
         <Tooltip
           title={renderTitle}
-          overlayInnerStyle={{ maxHeight: 200, overflow: 'auto' }}
+          destroyTooltipOnHide={true}
+          overlayInnerStyle={{ paddingInline: 0 }}
         >
-          <span className="m-r-5">
-            <InfoCircleOutlined />
+          <span className="txt err">
+            <span className="m-r-5">
+              <InfoCircleOutlined />
+            </span>
+            {renderContent()}
           </span>
-          {renderContent()}
         </Tooltip>
       ) : (
-        renderContent()
+        <span className="txt">{renderContent()}</span>
       )}
     </span>
   );