From 167aecc20a85b251bcf703e881c3b37019c63d1b Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Mon, 1 Jun 2026 13:52:30 +0800
Subject: [PATCH] update tooltip ui

---
 src/assets/css/app.css                      |  1 -
 src/components/dialog/new-table-dialog.js   |  5 +++--
 src/components/dialog/new-view-dialog.js    |  5 +++--
 src/components/dialog/rename-view-dialog.js |  7 ++++---
 src/pages/body/widgets/export-button.js     |  6 +++---
 src/pages/header/index.js                   | 17 +++++++++++------
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/app.css b/src/assets/css/app.css
index 6faefbc..d101411 100644
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
@@ -53,7 +53,6 @@
 }
 
 .sql-query-plugin .sql-input-container .query-sql-button {
-  height: 40px;
   margin-left: 16px;
 }
 
diff --git a/src/components/dialog/new-table-dialog.js b/src/components/dialog/new-table-dialog.js
index cdb7eb2..f89299e 100644
--- a/src/components/dialog/new-table-dialog.js
+++ b/src/components/dialog/new-table-dialog.js
@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
 import isHotkey from 'is-hotkey';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 const NewTableDialog = (props) => {
   const { tableName: defaultName, getTables, onNewTableConfirm, onNewTableCancel } = props;
@@ -63,7 +64,7 @@ const NewTableDialog = (props) => {
 
   return (
     <Modal isOpen toggle={toggle} autoFocus={false}>
-      <ModalHeader toggle={toggle}>{intl.get('New_table')}</ModalHeader>
+      <DTableModalHeader toggle={toggle}>{intl.get('New_table')}</DTableModalHeader>
       <ModalBody>
         <Form>
           <FormGroup>
diff --git a/src/components/dialog/new-view-dialog.js b/src/components/dialog/new-view-dialog.js
index 76dcc02..f636100 100644
--- a/src/components/dialog/new-view-dialog.js
+++ b/src/components/dialog/new-view-dialog.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
 import intl from 'react-intl-universal';
 import isHotkey from 'is-hotkey';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 class NewViewDialog extends React.Component {
 
@@ -65,7 +66,7 @@ class NewViewDialog extends React.Component {
 
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{intl.get('New_view')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('New_view')}</DTableModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/src/components/dialog/rename-view-dialog.js b/src/components/dialog/rename-view-dialog.js
index 0824071..45f97f4 100644
--- a/src/components/dialog/rename-view-dialog.js
+++ b/src/components/dialog/rename-view-dialog.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 class RenameViewDialog extends Component {
   constructor(props) {
@@ -50,9 +51,9 @@ class RenameViewDialog extends Component {
 
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>
+        <DTableModalHeader toggle={this.toggle}>
           {intl.get('Rename_view')}
-        </ModalHeader>
+        </DTableModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/src/pages/body/widgets/export-button.js b/src/pages/body/widgets/export-button.js
index 06a6dd0..dd77a67 100644
--- a/src/pages/body/widgets/export-button.js
+++ b/src/pages/body/widgets/export-button.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import { DTableToolTip } from 'dtable-ui-component';
 import intl from 'react-intl-universal';
 
 class ExportButton extends Component {
@@ -20,9 +20,9 @@ class ExportButton extends Component {
         >
           <i className="dtable-font dtable-icon-export-to-new-table"></i>
         </div>
-        <UncontrolledTooltip placement="bottom" target={this.exportButtonRef} fade={false}>
+        <DTableToolTip placement="bottom" target={this.exportButtonRef} >
           {intl.get('Export_to_a_new_table')}
-        </UncontrolledTooltip>
+        </DTableToolTip>
       </Fragment>
     );
   }
diff --git a/src/pages/header/index.js b/src/pages/header/index.js
index a35fb23..6a02067 100644
--- a/src/pages/header/index.js
+++ b/src/pages/header/index.js
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import LOGO from '../../assets/images/sql-query.png';
 import Views from './views';
 import { NewViewDialog } from '../../components';
+import { IconButton } from 'dtable-ui-component';
 
 import '../../assets/css/header.css';
 
@@ -42,13 +43,17 @@ class Header extends Component {
           </div>
           <div className="sql-query-plugin-header-center mr-9">
             <Views {...this.props} ref={ref => this.viewsRef = ref}/>
-            <div className="sql-query-plugin-header-view-add" onClick={this.openNewViewDialog}>
-              <i className="dtable-font dtable-icon-add-table"></i>
-            </div>
-          </div>
-          <div className="sql-query-plugin-header-right" onClick={this.props.onCloseToggle}>
-            <i title={intl.get('Close')} className="dtable-font dtable-icon-x"></i>
+            <IconButton
+              icon='add-table'
+              title={intl.get('New_view')}
+              onClick={this.openNewViewDialog}
+            />
           </div>
+          <IconButton
+            icon='x'
+            title={intl.get('Close')}
+            onClick={this.props.onCloseToggle}
+          />
         </div>
         {isNewViewDialogDisplay && (
           <NewViewDialog