diff --git a/dinky-web/src/pages/DataStudioNew/index.tsx b/dinky-web/src/pages/DataStudioNew/index.tsx
index ee47253f54..0728fb8eba 100644
--- a/dinky-web/src/pages/DataStudioNew/index.tsx
+++ b/dinky-web/src/pages/DataStudioNew/index.tsx
@@ -17,12 +17,12 @@
  *
  */
 
-import {DockLayout, TabData} from 'rc-dock';
-import React, {lazy, useEffect, useMemo, useRef, useState} from 'react';
-import {PageContainer} from '@ant-design/pro-layout';
-import {Col, ConfigProvider, Row, Space, Spin, theme as antdTheme} from 'antd';
+import { DockLayout, TabData } from 'rc-dock';
+import React, { lazy, useEffect, useMemo, useRef, useState } from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Col, ConfigProvider, Row, Space, Spin, theme as antdTheme } from 'antd';
 import Toolbar from '@/pages/DataStudioNew/Toolbar';
-import {DataStudioActionType, RightContextMenuState} from '@/pages/DataStudioNew/data.d';
+import { DataStudioActionType, RightContextMenuState } from '@/pages/DataStudioNew/data.d';
 import {
   getAllPanel,
   getLayoutState,
@@ -32,27 +32,27 @@ import {
 } from '@/pages/DataStudioNew/function';
 // import 'rc-dock/dist/rc-dock.css';
 // import 'rc-dock/dist/rc-dock-dark.css';
-import RightContextMenu, {useRightMenuItem} from '@/pages/DataStudioNew/RightContextMenu';
-import {MenuInfo} from 'rc-menu/es/interface';
-import {lazyComponent, ToolbarRoutes} from '@/pages/DataStudioNew/Toolbar/ToolbarRoute';
-import {ToolbarPosition, ToolbarRoute} from '@/pages/DataStudioNew/Toolbar/data.d';
-import {groups} from '@/pages/DataStudioNew/ContentLayout';
-import {connect} from 'umi';
-import {CenterTab, DataStudioState} from '@/pages/DataStudioNew/model';
-import {mapDispatchToProps} from '@/pages/DataStudioNew/DvaFunction';
-import {AliveScope, KeepAlive, useAliveController} from 'react-activation';
-import {activeTab, createNewPanel} from '@/pages/DataStudioNew/DockLayoutFunction';
+import RightContextMenu, { useRightMenuItem } from '@/pages/DataStudioNew/RightContextMenu';
+import { MenuInfo } from 'rc-menu/es/interface';
+import { lazyComponent, ToolbarRoutes } from '@/pages/DataStudioNew/Toolbar/ToolbarRoute';
+import { ToolbarPosition, ToolbarRoute } from '@/pages/DataStudioNew/Toolbar/data.d';
+import { groups } from '@/pages/DataStudioNew/ContentLayout';
+import { connect } from 'umi';
+import { CenterTab, DataStudioState } from '@/pages/DataStudioNew/model';
+import { mapDispatchToProps } from '@/pages/DataStudioNew/DvaFunction';
+import { AliveScope, KeepAlive, useAliveController } from 'react-activation';
+import { activeTab, createNewPanel } from '@/pages/DataStudioNew/DockLayoutFunction';
 import * as Algorithm from './Algorithm';
-import {PanelData} from 'rc-dock/lib/DockData';
-import {useAsyncEffect} from 'ahooks';
-import {useTheme} from '@/hooks/useThemeValue';
-import {DataStudioContext} from '@/pages/DataStudioNew/DataStudioContext';
+import { PanelData } from 'rc-dock/lib/DockData';
+import { useAsyncEffect } from 'ahooks';
+import { useTheme } from '@/hooks/useThemeValue';
+import { DataStudioContext } from '@/pages/DataStudioNew/DataStudioContext';
 import './css/index.less';
-import {getTenantByLocalStorage} from '@/utils/function';
+import { getTenantByLocalStorage } from '@/utils/function';
 import FooterContainer from '@/pages/DataStudioNew/FooterContainer';
-import {useToken} from 'antd/es/theme/internal';
-import {TAG_RIGHT_CONTEXT_MENU} from "@/pages/DataStudioNew/constants";
-import {ContextMenuSpace} from "@/pages/DataStudioNew/ContextMenuSpace";
+import { useToken } from 'antd/es/theme/internal';
+import { TAG_RIGHT_CONTEXT_MENU } from '@/pages/DataStudioNew/constants';
+import { ContextMenuSpace } from '@/pages/DataStudioNew/ContextMenuSpace';
 
 const SqlTask = lazy(() => import('@/pages/DataStudioNew/CenterTabContent/SqlTask'));
 const DataSourceDetail = lazy(
@@ -82,8 +82,8 @@ const DataStudioNew: React.FC = (props: any) => {
   const [_, token] = useToken();
 
   const dockLayoutRef = useRef<DockLayout>(null);
-  const {drop} = useAliveController();
-  const menuItem = useRightMenuItem({dataStudioState});
+  const { drop } = useAliveController();
+  const menuItem = useRightMenuItem({ dataStudioState });
 
   // 作业树右键弹出框状态
   const [edgeAreaRightMenuState, setEdgeAreaRightMenuState] = useState<RightContextMenuState>({
@@ -132,10 +132,10 @@ const DataStudioNew: React.FC = (props: any) => {
     await queryFlinkUdfOptions();
     await queryDataSourceDataList();
     await querySuggestions();
-    await queryUserData({id: getTenantByLocalStorage()});
+    await queryUserData({ id: getTenantByLocalStorage() });
   }, []);
   useEffect(() => {
-    const {actionType, params} = dataStudioState.action;
+    const { actionType, params } = dataStudioState.action;
     if (actionType?.includes('task-run-')) {
       const dockLayout = dockLayoutRef.current!!;
       let position: ToolbarPosition = 'leftBottom';
@@ -227,7 +227,7 @@ const DataStudioNew: React.FC = (props: any) => {
    * @param values
    */
   const handleEdgeAreaRightMenuClick = (values: MenuInfo) => {
-    setEdgeAreaRightMenuState((prevState) => ({...prevState, show: false}));
+    setEdgeAreaRightMenuState((prevState) => ({ ...prevState, show: false }));
 
     switch (values.key) {
       case 'showToolbarDesc':
@@ -283,9 +283,9 @@ const DataStudioNew: React.FC = (props: any) => {
    * @param {MenuInfo} node
    */
   const handleTagRightMenuClick = (node: MenuInfo) => {
-    setTagRightMenuState((prevState) => ({...prevState, show: false}));
-    const {key} = node;
-    console.log('key', key,node);
+    setTagRightMenuState((prevState) => ({ ...prevState, show: false }));
+    const { key } = node;
+    console.log('key', key, node);
     switch (key) {
       case 'closeAll':
         console.log('closeAll');
@@ -301,11 +301,11 @@ const DataStudioNew: React.FC = (props: any) => {
   };
 
   const saveTab = (tabData: TabData & any) => {
-    let {id, group, title} = tabData;
-    return {id, group, title};
+    let { id, group, title } = tabData;
+    return { id, group, title };
   };
   const loadTab = (tab: TabData) => {
-    const {id, title, group} = tab;
+    const { id, title, group } = tab;
     if (group !== 'centerContent') {
       const route = ToolbarRoutes.find((x) => x.key === id) as ToolbarRoute;
       const content = ToolbarRoutes.find((item) => item.key === route.key)!!.content();
@@ -342,30 +342,36 @@ const DataStudioNew: React.FC = (props: any) => {
         switch (tabData.tabType) {
           case 'task':
             const titleContent = (
-              <ContextMenuSpace onContextMenu={tagRightMenuHandle} >
+              <ContextMenuSpace onContextMenu={tagRightMenuHandle}>
                 {getTabIcon(tabData.params.dialect, 19)} {tabData.title}
               </ContextMenuSpace>
             );
             if (tabData.isUpdate) {
               return (
-                <ContextMenuSpace onContextMenu={tagRightMenuHandle} >
-                  <span style={{color: '#52c41a'}}>
+                <ContextMenuSpace onContextMenu={tagRightMenuHandle}>
+                  <span style={{ color: '#52c41a' }}>
                     {titleContent}
-                      {'  *'}
+                    {'  *'}
                   </span>
                 </ContextMenuSpace>
               );
             }
-            return <ContextMenuSpace onContextMenu={tagRightMenuHandle}>{titleContent}</ContextMenuSpace>;
+            return (
+              <ContextMenuSpace onContextMenu={tagRightMenuHandle}>{titleContent}</ContextMenuSpace>
+            );
           case 'dataSource':
             const dialect = tabData.params.type;
             return (
-              <ContextMenuSpace onContextMenu={tagRightMenuHandle} >
+              <ContextMenuSpace onContextMenu={tagRightMenuHandle}>
                 {getTabIcon(dialect, 19)} {tabData.title}
               </ContextMenuSpace>
             );
           default:
-            return <ContextMenuSpace  onContextMenu={tagRightMenuHandle}>{tabData.title}</ContextMenuSpace>;
+            return (
+              <ContextMenuSpace onContextMenu={tagRightMenuHandle}>
+                {tabData.title}
+              </ContextMenuSpace>
+            );
         }
       };
 
@@ -377,7 +383,7 @@ const DataStudioNew: React.FC = (props: any) => {
       // todo 添加中间tab内容
       switch (tabData.tabType) {
         case 'task':
-          content = <SqlTask tabData={tabData}/>;
+          content = <SqlTask tabData={tabData} />;
           break;
         case 'dataSource':
           content = <DataSourceDetail {...currentData} />;
@@ -463,7 +469,7 @@ const DataStudioNew: React.FC = (props: any) => {
     });
   };
   return (
-    <DataStudioContext.Provider value={{theme: theme}}>
+    <DataStudioContext.Provider value={{ theme: theme }}>
       <ConfigProvider
         theme={{
           token: {
@@ -486,11 +492,11 @@ const DataStudioNew: React.FC = (props: any) => {
         <PageContainer
           breadcrumb={{}}
           title={false}
-          childrenContentStyle={{margin: 0, padding: 0}}
+          childrenContentStyle={{ margin: 0, padding: 0 }}
           className={(theme === 'light' ? 'light-theme' : 'dark-theme') + ' page-container'}
         >
           <Spin spinning={loading} size={'large'} tip={'loading'}>
-            <Row style={{height: 'calc(100vh - 81px)'}}>
+            <Row style={{ height: 'calc(100vh - 81px)' }}>
               {/*左边工具栏*/}
               <Col
                 style={{
@@ -501,7 +507,7 @@ const DataStudioNew: React.FC = (props: any) => {
                 onContextMenu={edgeAreaRightMenuHandle}
               >
                 {/*左上工具栏*/}
-                <Col style={{width: 'inherit', height: '50%'}}>
+                <Col style={{ width: 'inherit', height: '50%' }}>
                   <Toolbar
                     height={toolbarSize}
                     showDesc={dataStudioState.toolbar.showDesc}
@@ -531,14 +537,14 @@ const DataStudioNew: React.FC = (props: any) => {
               </Col>
 
               {/* 中间内容栏*/}
-              <Col style={{height: 'inherit'}} flex='auto' className={'content-container'}>
+              <Col style={{ height: 'inherit' }} flex='auto' className={'content-container'}>
                 <AliveScope>
                   <DockLayout
                     ref={dockLayoutRef}
                     layout={layout}
                     groups={groups(updateAction)}
                     dropMode={'edge'}
-                    style={{position: 'absolute', left: 0, top: 0, right: 0, bottom: 0}}
+                    style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 }}
                     onLayoutChange={async (newLayout, currentTabId, direction) => {
                       // todo 这里移到方向会导致布局和算法异常，先暂时规避掉
                       if (
@@ -555,7 +561,7 @@ const DataStudioNew: React.FC = (props: any) => {
                         currentTabId &&
                         direction === 'remove' &&
                         (dockLayoutRef.current?.find(currentTabId) as PanelData)?.group ===
-                        'centerContent'
+                          'centerContent'
                       ) {
                         drop(currentTabId).then();
 
@@ -595,7 +601,7 @@ const DataStudioNew: React.FC = (props: any) => {
 
               {/*右边工具栏*/}
               <Col
-                style={{width: toolbarSize, height: 'inherit'}}
+                style={{ width: toolbarSize, height: 'inherit' }}
                 flex='none'
                 onContextMenu={edgeAreaRightMenuHandle}
               >
@@ -610,14 +616,14 @@ const DataStudioNew: React.FC = (props: any) => {
               </Col>
             </Row>
 
-            <FooterContainer token={token}/>
+            <FooterContainer token={token} />
 
             {/* 边缘区域布局右键菜单*/}
             <RightContextMenu
               contextMenuPosition={edgeAreaRightMenuState.position}
               open={edgeAreaRightMenuState.show}
               openChange={() =>
-                 setEdgeAreaRightMenuState((prevState) => ({...prevState, show: false}))
+                setEdgeAreaRightMenuState((prevState) => ({ ...prevState, show: false }))
               }
               items={menuItem}
               onClick={handleEdgeAreaRightMenuClick}
@@ -628,7 +634,9 @@ const DataStudioNew: React.FC = (props: any) => {
               items={TAG_RIGHT_CONTEXT_MENU}
               contextMenuPosition={tagRightMenuState.position}
               open={tagRightMenuState.show}
-              openChange={() => setTagRightMenuState(prevState => ({...prevState, show: false}))}
+              openChange={() =>
+                setTagRightMenuState((prevState) => ({ ...prevState, show: false }))
+              }
             />
           </Spin>
         </PageContainer>
@@ -638,7 +646,7 @@ const DataStudioNew: React.FC = (props: any) => {
 };
 
 export default connect(
-  ({DataStudio}: { DataStudio: DataStudioState }) => ({
+  ({ DataStudio }: { DataStudio: DataStudioState }) => ({
     dataStudioState: DataStudio
   }),
   mapDispatchToProps