From cbacf391f3b244f4f403c661a73d0afc977aed1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=93=87=E5=A1=9E=E5=A4=A7=E5=98=B4=E5=A5=BD=E5=B8=A5?=
 <66861267+DaZuiZui@users.noreply.github.com>
Date: Sun, 18 Jun 2023 01:13:32 +0800
Subject: [PATCH] =?UTF-8?q?fix=20#247=20=E4=BF=AE=E5=A4=8D=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C=E7=BB=93=E6=9E=9C=E6=97=A0=E6=B3=95=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=EF=BC=8C=E6=89=A7=E8=A1=8Csql=E5=8F=AA=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E6=88=90=E5=8A=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #247 修复执行结果无法关闭，执行sql只显示执行成功
---
 .../src/components/Tabs/index.tsx             | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/ali-dbhub-client/src/components/Tabs/index.tsx b/ali-dbhub-client/src/components/Tabs/index.tsx
index 9f6cbd180..877d1fe1d 100644
--- a/ali-dbhub-client/src/components/Tabs/index.tsx
+++ b/ali-dbhub-client/src/components/Tabs/index.tsx
@@ -1,7 +1,7 @@
 import React, { memo, ReactNode, useState } from 'react';
 import styles from './index.less';
 import classnames from 'classnames';
-import { Tabs as AntdTabs } from 'antd';
+import { Tabs as AntdTabs, Button } from 'antd';
 
 export interface ITab {
   label: ReactNode;
@@ -17,21 +17,37 @@ interface IProps {
 }
 
 export default memo(function Tabs({ className, tabs, currentTab, onChange, extra }: IProps) {
+  const [hiddenTabs, setHiddenTabs] = useState<string[]>([]);
+
   function myChange(key: string) {
-    const index = tabs.findIndex(t => {
-      return t.key === key
-    })
-    onChange(key, index)
+    const index = tabs.findIndex(t => t.key === key);
+    onChange(key, index);
+  }
+
+  function handleClose(key: string) {
+    const updatedHiddenTabs = [...hiddenTabs, key];
+    setHiddenTabs(updatedHiddenTabs);
   }
 
-  return <div className={classnames(className, styles.box)}>
-    <AntdTabs
-      defaultActiveKey={currentTab}
-      onChange={myChange}
-      items={tabs}
-    />
-    <div className={styles.extra}>
-      {extra}
+  const visibleTabs = tabs.filter(tab => !hiddenTabs.includes(tab.key));
+
+  return (
+    <div className={classnames(className, styles.box)}>
+      <AntdTabs defaultActiveKey={currentTab} onChange={myChange}>
+        {visibleTabs.map(tab => (
+          <AntdTabs.TabPane tab={
+            <span>
+              <span style={{float:'left'}}> {tab.label}  </span> 
+              <a onClick={() => handleClose(tab.key)}>X</a>
+            </span>
+          } key={tab.key} />
+        ))}
+      </AntdTabs>
+      <div className={styles.extra}>
+        
+        {extra}
+      </div>
     </div>
-  </div>
-})
+  );
+});
+