From b0a27b155ea44a75ea41946e8d9e2638af53f295 Mon Sep 17 00:00:00 2001
From: Zzm0809 <Zzm0809@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:28:01 +0000
Subject: [PATCH 1/2] Spotless Apply

---
 .../components/CallBackButton/CircleBtn.tsx   |  67 +-
 .../BottomContainer/TableData/index.tsx       | 126 ++--
 .../DataStudio/BottomContainer/index.tsx      | 582 +++++++++---------
 .../LeftContainer/BtnContext/index.tsx        | 163 +++--
 .../LeftContainer/Catalog/index.tsx           |   6 +-
 .../LeftContainer/DataSource/index.tsx        |   4 +-
 .../LeftContainer/Project/JobTree/index.tsx   |   5 +-
 .../Project/ProjectTitle/index.tsx            |   6 +-
 .../LeftContainer/Project/index.tsx           |   3 +-
 .../pages/DataStudio/LeftContainer/index.tsx  |   4 +-
 dinky-web/src/pages/DataStudio/TabRoute.tsx   |  40 +-
 dinky-web/src/pages/DataStudio/index.tsx      |  18 +-
 dinky-web/src/pages/DataStudio/route.tsx      | 428 +++++++------
 13 files changed, 737 insertions(+), 715 deletions(-)

diff --git a/dinky-web/src/components/CallBackButton/CircleBtn.tsx b/dinky-web/src/components/CallBackButton/CircleBtn.tsx
index 58f3481f31..d81c7c2911 100644
--- a/dinky-web/src/components/CallBackButton/CircleBtn.tsx
+++ b/dinky-web/src/components/CallBackButton/CircleBtn.tsx
@@ -17,46 +17,51 @@
  *
  */
 
-import {TabsItemType, TaskDataType} from '@/pages/DataStudio/model';
-import {Button} from 'antd';
+import { TabsItemType, TaskDataType } from '@/pages/DataStudio/model';
+import { Tab } from '@/pages/DataStudio/route';
+import { Button } from 'antd';
 import React from 'react';
-import {Tab} from '@/pages/DataStudio/route';
 
 export type CircleButtonProps = {
-    icon: React.ReactNode;
-    loading?: boolean;
-    onClick?: () => void;
-    title?: string;
-    key?: string;
+  icon: React.ReactNode;
+  loading?: boolean;
+  onClick?: () => void;
+  title?: string;
+  key?: string;
 };
 export type CircleBottomButtonProps = {
-    icon: React.ReactNode;
-    loading?: boolean;
-    onClick?: (tabs: Tab[], key: string, data: TaskDataType | undefined,refresh:any) => Promise<void>;
-    title?: string;
-    key?: string;
+  icon: React.ReactNode;
+  loading?: boolean;
+  onClick?: (
+    tabs: Tab[],
+    key: string,
+    data: TaskDataType | undefined,
+    refresh: any
+  ) => Promise<void>;
+  title?: string;
+  key?: string;
 };
 export type CircleDataStudioButtonProps = {
-    icon: React.ReactNode;
-    loading?: boolean;
-    onClick?: (panes: TabsItemType[], activeKey: string) => void;
-    title?: string;
-    key?: string;
-    isShow?: boolean;
+  icon: React.ReactNode;
+  loading?: boolean;
+  onClick?: (panes: TabsItemType[], activeKey: string) => void;
+  title?: string;
+  key?: string;
+  isShow?: boolean;
 };
 
 export const CircleBtn: React.FC<CircleButtonProps> = (props) => {
-    const {onClick, title, icon, loading} = props;
+  const { onClick, title, icon, loading } = props;
 
-    return (
-        <Button
-            title={title}
-            loading={loading}
-            icon={icon}
-            block
-            type={'text'}
-            shape={'circle'}
-            onClick={onClick}
-        />
-    );
+  return (
+    <Button
+      title={title}
+      loading={loading}
+      icon={icon}
+      block
+      type={'text'}
+      shape={'circle'}
+      onClick={onClick}
+    />
+  );
 };
diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx
index 8fa211e9f8..335a4928de 100644
--- a/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx
+++ b/dinky-web/src/pages/DataStudio/BottomContainer/TableData/index.tsx
@@ -17,79 +17,85 @@
  *
  */
 
-import {SseData} from '@/models/Sse';
-import {TaskDataType} from '@/pages/DataStudio/model';
-import {SSE_TOPIC} from '@/pages/DevOps/constants';
-import {postAll} from '@/services/api';
-import {l} from '@/utils/intl';
-import {useModel} from '@@/exports';
-import {Modal, Select} from 'antd';
+import { SseData } from '@/models/Sse';
+import { TaskDataType } from '@/pages/DataStudio/model';
+import { SSE_TOPIC } from '@/pages/DevOps/constants';
+import { postAll } from '@/services/api';
+import { l } from '@/utils/intl';
+import { useModel } from '@@/exports';
+import { Modal, Select } from 'antd';
 import TextArea from 'antd/es/input/TextArea';
-import {Tab} from 'rc-tabs/lib/interface.d';
-import * as React from 'react';
-import {useEffect, useState} from 'react';
+import { Tab } from 'rc-tabs/lib/interface.d';
+import { useEffect, useState } from 'react';
 
 export async function getPrintTables(statement: string) {
-    return postAll('api/printTable/getPrintTables', {statement});
+  return postAll('api/printTable/getPrintTables', { statement });
 }
 
 /*--- Clear Console ---*/
 export type PrintTable = {
-    tableName: string;
-    fullTableName: string;
+  tableName: string;
+  fullTableName: string;
 };
 
 export const DataPage = (props: any) => {
-    const {style, title} = props;
-    const [consoleInfo, setConsoleInfo] = useState<string>('');
-    const {subscribeTopic} = useModel('Sse', (model: any) => ({
-        subscribeTopic: model.subscribeTopic
-    }));
-    const [tableName, setTableName] = useState<string>('');
+  const { style, title } = props;
+  const [consoleInfo, setConsoleInfo] = useState<string>('');
+  const { subscribeTopic } = useModel('Sse', (model: any) => ({
+    subscribeTopic: model.subscribeTopic
+  }));
+  const [tableName, setTableName] = useState<string>('');
 
-    useEffect(() => {
-        if (title) {
-            setTableName(title.tableName);
-            const topic = `${SSE_TOPIC.PRINT_TABLE}/${title.fullTableName}`;
-            return subscribeTopic([topic], (data: SseData) => {
-                setConsoleInfo((preConsoleInfo) => preConsoleInfo + '\n' + data.data);
-            });
-        }
-    }, []);
+  useEffect(() => {
+    if (title) {
+      setTableName(title.tableName);
+      const topic = `${SSE_TOPIC.PRINT_TABLE}/${title.fullTableName}`;
+      return subscribeTopic([topic], (data: SseData) => {
+        setConsoleInfo((preConsoleInfo) => preConsoleInfo + '\n' + data.data);
+      });
+    }
+  }, []);
 
-    return <TextArea value={consoleInfo} style={{width: style.width, height: style.height}}/>;
+  return <TextArea value={consoleInfo} style={{ width: style.width, height: style.height }} />;
 };
 
-export const onAdd = async (tabs: Tab[], key: string, data: TaskDataType | undefined, refresh: any) => {
-    const statement = data?.statement;
+export const onAdd = async (
+  tabs: Tab[],
+  key: string,
+  data: TaskDataType | undefined,
+  refresh: any
+) => {
+  const statement = data?.statement;
 
-    if (!statement) return;
-    const tabNames = tabs.map((tab) => tab.label);
-    const result = await getPrintTables(statement);
-    const tables: PrintTable[] = result.data.filter((table: PrintTable) => !tabNames.includes(table.tableName));
+  if (!statement) return;
+  const tabNames = tabs.map((tab) => tab.label);
+  const result = await getPrintTables(statement);
+  const tables: PrintTable[] = result.data.filter(
+    (table: PrintTable) => !tabNames.includes(table.tableName)
+  );
 
-    let selectTable: PrintTable;
-    Modal.confirm({
-        title: l('pages.datastudio.print.table.inputTableName'),
-        content: (
-            <Select
-                defaultValue=''
-                style={{width: '90%'}}
-                onChange={(e, t: any) => {
-                    selectTable = {tableName: t.label, fullTableName: t.value};
-                }}
-                options={tables.map((table) => ({label: table.tableName, value: table.fullTableName}))}
-            />
-        ),
-        onOk() {
-            tabs.push({
-                key: key + "/" + selectTable.tableName,
-                label: selectTable.tableName,
-                children: <DataPage title={selectTable} style={{width: '100%', height: '100%'}}/>
-            });
-            refresh()
-            // onOk(selectTable);
-        },
-        zIndex: 1000
-    });
-}
\ No newline at end of file
+  let selectTable: PrintTable;
+  Modal.confirm({
+    title: l('pages.datastudio.print.table.inputTableName'),
+    content: (
+      <Select
+        defaultValue=''
+        style={{ width: '90%' }}
+        onChange={(e, t: any) => {
+          selectTable = { tableName: t.label, fullTableName: t.value };
+        }}
+        options={tables.map((table) => ({ label: table.tableName, value: table.fullTableName }))}
+      />
+    ),
+    onOk() {
+      tabs.push({
+        key: key + '/' + selectTable.tableName,
+        label: selectTable.tableName,
+        children: <DataPage title={selectTable} style={{ width: '100%', height: '100%' }} />
+      });
+      refresh();
+      // onOk(selectTable);
+    },
+    zIndex: 1000
+  });
+};
diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx
index ac2df1fb97..b26277f49d 100644
--- a/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx
+++ b/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx
@@ -17,310 +17,334 @@
  *
  */
 
-import {CircleBtn} from '@/components/CallBackButton/CircleBtn';
+import { CircleBtn } from '@/components/CallBackButton/CircleBtn';
 import Title from '@/components/Front/Title';
 import ContentScroll from '@/components/Scroll/ContentScroll';
 import MovableSidebar from '@/components/Sidebar/MovableSidebar';
+import { getCurrentData } from '@/pages/DataStudio/function';
 import {
-    StateType,
-    STUDIO_MODEL,
-    TabsItemType,
-    TabsPageType,
-    VIEW
+  StateType,
+  STUDIO_MODEL,
+  TabsItemType,
+  TabsPageType,
+  VIEW
 } from '@/pages/DataStudio/model';
-import {BottomBtnRoute, LeftBottomMoreTabs, LeftBottomSide, Tab} from '@/pages/DataStudio/route';
-import {l} from '@/utils/intl';
-import {connect} from '@@/exports';
-import {ConfigProvider, Space, Tabs} from 'antd';
-import React, {useEffect, useState} from 'react';
-import {getCurrentData} from "@/pages/DataStudio/function";
-import {BottomTabRoute} from "@/pages/DataStudio/TabRoute";
+import { BottomBtnRoute, LeftBottomMoreTabs, LeftBottomSide, Tab } from '@/pages/DataStudio/route';
+import { BottomTabRoute } from '@/pages/DataStudio/TabRoute';
+import { l } from '@/utils/intl';
+import { connect } from '@@/exports';
+import { ConfigProvider, Space, Tabs } from 'antd';
+import React, { useEffect, useState } from 'react';
 
 export type BottomContainerProps = {
-    size: number;
-    height: number | string;
+  size: number;
+  height: number | string;
 };
 
 const BottomContainer: React.FC<BottomContainerProps> = (props: any) => {
-    const {
-        dispatch,
-        size,
-        bottomContainer,
-        height,
-        tabs: {activeKey, panes}
-    } = props;
-    const currentData = getCurrentData(panes, activeKey);
-    const taskId = currentData?.id ?? 0;
-    const [tabState, setTabState] = useState<Record<string, Tab[]>>(Object.keys(BottomTabRoute).map(x => ({[x]: []})).reduce((a, b) => ({...a, ...b}), {}));
-    const tabItems = (LeftBottomMoreTabs[bottomContainer.selectKey] ?? []).map((item: any) => {
-        return {
-            key: bottomContainer.selectKey + '/' + item.key,
-            label: (<span>{item.icon}{item.label}</span>)
-        };
-    })
-    useEffect(() => {
-        setTabState({...tabState, [bottomContainer.selectKey]: []});
-    },[taskId,bottomContainer.selectKey])
-    const refresh = () => {
-        const tabs = tabState?.[bottomContainer.selectKey] ?? [];
-        setTabState({...tabState, [bottomContainer.selectKey]: [...tabs]})
-    }
+  const {
+    dispatch,
+    size,
+    bottomContainer,
+    height,
+    tabs: { activeKey, panes }
+  } = props;
+  const currentData = getCurrentData(panes, activeKey);
+  const taskId = currentData?.id ?? 0;
+  const [tabState, setTabState] = useState<Record<string, Tab[]>>(
+    Object.keys(BottomTabRoute)
+      .map((x) => ({ [x]: [] }))
+      .reduce((a, b) => ({ ...a, ...b }), {})
+  );
+  const tabItems = (LeftBottomMoreTabs[bottomContainer.selectKey] ?? []).map((item: any) => {
+    return {
+      key: bottomContainer.selectKey + '/' + item.key,
+      label: (
+        <span>
+          {item.icon}
+          {item.label}
+        </span>
+      )
+    };
+  });
+  useEffect(() => {
+    setTabState({ ...tabState, [bottomContainer.selectKey]: [] });
+  }, [taskId, bottomContainer.selectKey]);
+  const refresh = () => {
+    const tabs = tabState?.[bottomContainer.selectKey] ?? [];
+    setTabState({ ...tabState, [bottomContainer.selectKey]: [...tabs] });
+  };
 
-    const width = document.documentElement.clientWidth - VIEW.sideWidth * 2;
+  const width = document.documentElement.clientWidth - VIEW.sideWidth * 2;
 
-    /**
-     * 侧边栏最小化
-     */
-    const handleMinimize = () => {
-        dispatch({
-            type: STUDIO_MODEL.updateSelectBottomKey,
-            payload: ''
-        });
-    };
+  /**
+   * 侧边栏最小化
+   */
+  const handleMinimize = () => {
+    dispatch({
+      type: STUDIO_MODEL.updateSelectBottomKey,
+      payload: ''
+    });
+  };
 
-    /**
-     * 更新底部高度
-     * @param {number} height
-     */
-    const updateBottomHeight = (height: number) => {
-        dispatch({
-            type: STUDIO_MODEL.updateBottomHeight,
-            payload: height
-        });
-    };
+  /**
+   * 更新底部高度
+   * @param {number} height
+   */
+  const updateBottomHeight = (height: number) => {
+    dispatch({
+      type: STUDIO_MODEL.updateBottomHeight,
+      payload: height
+    });
+  };
 
-    /**
-     * 更新中间内容高度
-     * @param {number} height
-     */
-    const updateCenterContentHeight = (height: number) => {
-        dispatch({
-            type: STUDIO_MODEL.updateCenterContentHeight,
-            payload: height
-        });
-    };
+  /**
+   * 更新中间内容高度
+   * @param {number} height
+   */
+  const updateCenterContentHeight = (height: number) => {
+    dispatch({
+      type: STUDIO_MODEL.updateCenterContentHeight,
+      payload: height
+    });
+  };
 
-    const updateSelectBottomSubKey = (key: string) => {
-        dispatch({
-            type: STUDIO_MODEL.updateSelectBottomSubKey,
-            payload: key
-        });
-    };
+  const updateSelectBottomSubKey = (key: string) => {
+    dispatch({
+      type: STUDIO_MODEL.updateSelectBottomSubKey,
+      payload: key
+    });
+  };
 
-    const updateSelectBottomKey = (key: string) => {
-        dispatch({
-            type: STUDIO_MODEL.updateSelectBottomKey,
-            payload: key
-        });
-    };
+  const updateSelectBottomKey = (key: string) => {
+    dispatch({
+      type: STUDIO_MODEL.updateSelectBottomKey,
+      payload: key
+    });
+  };
+
+  /**
+   * 更新工具栏内容高度
+   * @param {number} height
+   */
+  const updateToolContentHeight = (height: number) => {
+    dispatch({
+      type: STUDIO_MODEL.updateToolContentHeight,
+      payload: height
+    });
+  };
+  const getSubTabs = () => {
+    // @ts-ignore
+    return Object.values(
+      Object.keys(LeftBottomMoreTabs).map((x) =>
+        LeftBottomMoreTabs[x].map((y) => {
+          return { ...y, key: x + '/' + y.key };
+        })
+      )
+    ).flatMap((x) => x);
+  };
 
-    /**
-     * 更新工具栏内容高度
-     * @param {number} height
-     */
-    const updateToolContentHeight = (height: number) => {
-        dispatch({
-            type: STUDIO_MODEL.updateToolContentHeight,
-            payload: height
-        });
+  /**
+   * 拖动回调
+   * @param event
+   * @param direction
+   * @param {{offsetHeight: any}} elementRef
+   */
+  const resizeCallback = (
+    event: any,
+    direction: any,
+    elementRef: {
+      offsetHeight: any;
+    }
+  ) => {
+    const centerContentHeight =
+      document.documentElement.clientHeight -
+      VIEW.headerHeight -
+      VIEW.headerNavHeight -
+      VIEW.footerHeight -
+      VIEW.otherHeight -
+      elementRef.offsetHeight;
+    updateBottomHeight(elementRef.offsetHeight);
+    updateCenterContentHeight(centerContentHeight);
+    updateToolContentHeight(centerContentHeight - VIEW.leftMargin);
+  };
+
+  const renderTabPane = () => {
+    const onChange = (activeKey: string) => {
+      updateSelectBottomSubKey(activeKey.split('/')[1]);
     };
-    const getSubTabs = () => {
-        // @ts-ignore
-        return Object.values(
-            Object.keys(LeftBottomMoreTabs).map((x) =>
-                LeftBottomMoreTabs[x].map((y) => {
-                    return {...y, key: x + '/' + y.key};
-                })
-            )
-        ).flatMap((x) => x);
+    const onEdit = async (
+      targetKey: React.MouseEvent | React.KeyboardEvent | string,
+      action: 'add' | 'remove'
+    ) => {
+      switch (action) {
+        case 'add':
+          await BottomTabRoute[bottomContainer.selectKey].onAdd(
+            tabState?.[bottomContainer.selectKey] ?? [],
+            bottomContainer.selectKey,
+            currentData,
+            refresh
+          );
+          break;
+        case 'remove':
+          const newPanes = tabState?.[bottomContainer.selectKey].filter(
+            (pane) => pane.key !== targetKey
+          );
+          setTabState({ ...tabState, [bottomContainer.selectKey]: newPanes });
+          break;
+      }
     };
+    return (
+      <>
+        <Tabs
+          style={{ height: '32px', display: '-webkit-box' }}
+          items={tabItems}
+          type='card'
+          onChange={(key: string) => {
+            updateSelectBottomSubKey(key.split('/')[1]);
+          }}
+          activeKey={
+            bottomContainer.selectKey +
+            '/' +
+            bottomContainer.selectSubKey[bottomContainer.selectKey]
+          }
+          size='small'
+          tabPosition='top'
+        />
+        {BottomTabRoute[bottomContainer.selectKey] && (
+          <Tabs
+            style={{ height: '32px', display: '-webkit-box' }}
+            items={tabState?.[bottomContainer.selectKey].map((x) => ({
+              key: x.key,
+              label: x.label
+            }))}
+            onEdit={onEdit}
+            activeKey={
+              bottomContainer.selectKey +
+              '/' +
+              bottomContainer.selectSubKey[bottomContainer.selectKey]
+            }
+            onChange={onChange}
+            type='editable-card'
+            size='small'
+            tabPosition='top'
+          />
+        )}
+      </>
+    );
+  };
+  const renderItems = () => {
+    return [
+      ...LeftBottomSide.filter((tab) => {
+        if (!tab.isShow) {
+          return true;
+        }
+        if (parseInt(activeKey) < 0) {
+          return TabsPageType.None;
+        }
+        const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey);
+        const show = tab.isShow(currentTab?.type ?? TabsPageType.None, currentTab?.subType);
+        // 如果当前打开的菜单等于 状态存的菜单 且 菜单不显示状态下，先切换到项目key(因为项目key 不可能不显示) 在关闭这个
+        // if current open menu equal status menu and menu is not show status, first switch to project key(because project key is not show) and close this
+        // if (tab.key === bottomContainer.selectKey && !show) {
+        //   updateSelectBottomKey(
+        //     currentTab?.subType?.toLowerCase() === DIALECT.FLINKSQLENV
+        //     || currentTab?.subType?.toLowerCase() === DIALECT.SCALA
+        //     || currentTab?.subType?.toLowerCase() === DIALECT.JAVA
+        //     || currentTab?.subType?.toLowerCase() === DIALECT.PYTHON_LONG
+        //       ? LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql环境，scala，java，python，切换到工具栏
+        //       : currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL
+        //       || currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR
+        //       || isSql(currentTab?.subType  ?? '')
+        //     ? LeftBottomKey.CONSOLE_KEY : LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql，flinkjar，切换到控制台
+        //   );
+        // }
+        return show;
+      }).map((x) => {
+        return { ...x, key: x.key + '/' };
+      }),
+      ...getSubTabs(),
+      ...(tabState?.[bottomContainer.selectKey] ?? [])
+    ].map((item) => {
+      return {
+        ...item,
+        children: (
+          <ContentScroll height={props.height - VIEW.leftMargin}>{item.children}</ContentScroll>
+        )
+      };
+    });
+  };
 
-    /**
-     * 拖动回调
-     * @param event
-     * @param direction
-     * @param {{offsetHeight: any}} elementRef
-     */
-    const resizeCallback = (
+  return (
+    <MovableSidebar
+      title={
+        <ConfigProvider
+          theme={{
+            components: {
+              Tabs: {
+                horizontalMargin: '0',
+                cardPaddingSM: '6px',
+                horizontalItemPadding: '0'
+              }
+            }
+          }}
+        >
+          <Space>
+            <Title>{l(bottomContainer.selectKey)}</Title>
+            {renderTabPane()}
+          </Space>
+        </ConfigProvider>
+      }
+      visible={bottomContainer.selectKey}
+      style={{
+        zIndex: 999,
+        height: height,
+        marginTop: 0,
+        backgroundColor: '#fff',
+        position: 'fixed',
+        bottom: VIEW.footerHeight
+      }}
+      defaultSize={{ width: '100%', height: height }}
+      minHeight={VIEW.midMargin}
+      maxHeight={size.contentHeight - 40}
+      onResize={(
         event: any,
         direction: any,
         elementRef: {
-            offsetHeight: any;
+          offsetHeight: any;
         }
-    ) => {
-        const centerContentHeight =
-            document.documentElement.clientHeight -
-            VIEW.headerHeight -
-            VIEW.headerNavHeight -
-            VIEW.footerHeight -
-            VIEW.otherHeight -
-            elementRef.offsetHeight;
-        updateBottomHeight(elementRef.offsetHeight);
-        updateCenterContentHeight(centerContentHeight);
-        updateToolContentHeight(centerContentHeight - VIEW.leftMargin);
-    };
-
-    const renderTabPane = () => {
-        const onChange = (activeKey: string) => {
-            updateSelectBottomSubKey(activeKey.split('/')[1]);
+      ) => resizeCallback(event, direction, elementRef)}
+      btnGroup={BottomBtnRoute[bottomContainer.selectKey]?.map((x) => (
+        <CircleBtn
+          key={x.key}
+          icon={x.icon}
+          onClick={async () => {
+            const tabs = tabState?.[bottomContainer.selectKey] ?? [];
+            await x.onClick?.(tabs, bottomContainer.selectKey, currentData, refresh);
+            refresh();
+          }}
+        />
+      ))}
+      enable={{ top: true }}
+      handlerMinimize={handleMinimize}
+      maxWidth={width}
+    >
+      <Tabs
+        activeKey={
+          bottomContainer.selectKey +
+          '/' +
+          (bottomContainer.selectSubKey[bottomContainer.selectKey]
+            ? bottomContainer.selectSubKey[bottomContainer.selectKey]
+            : '')
         }
-        const onEdit = async (
-            targetKey: React.MouseEvent | React.KeyboardEvent | string,
-            action: 'add' | 'remove'
-        ) => {
-            switch (action) {
-                case 'add':
-                    await BottomTabRoute[bottomContainer.selectKey].onAdd(tabState?.[bottomContainer.selectKey] ?? [], bottomContainer.selectKey, currentData, refresh);
-                    break;
-                case 'remove':
-                    const newPanes = tabState?.[bottomContainer.selectKey].filter(pane => pane.key !== targetKey);
-                    setTabState({...tabState, [bottomContainer.selectKey]: newPanes});
-                    break;
-            }
-        };
-        return (
-            <>
-                <Tabs
-                    style={{height: '32px', display: '-webkit-box'}}
-                    items={tabItems}
-                    type='card'
-                    onChange={(key: string) => {
-                        updateSelectBottomSubKey(key.split('/')[1]);
-                    }}
-                    activeKey={
-                        bottomContainer.selectKey +
-                        '/' +
-                        bottomContainer.selectSubKey[bottomContainer.selectKey]
-                    }
-                    size='small'
-                    tabPosition='top'
-                />
-                {BottomTabRoute[bottomContainer.selectKey] &&
-                    <Tabs
-                        style={{height: '32px', display: '-webkit-box'}}
-                        items={tabState?.[bottomContainer.selectKey].map(x => ({key: x.key, label: x.label}))}
-                        onEdit={onEdit}
-                        activeKey={
-                            bottomContainer.selectKey +
-                            '/'  +
-                            bottomContainer.selectSubKey[bottomContainer.selectKey]
-                        }
-                        onChange={onChange}
-                        type='editable-card'
-                        size='small'
-                        tabPosition='top'
-                    />
-                }
-            </>
-        );
-    };
-    const renderItems = () => {
-        return [
-            ...LeftBottomSide.filter((tab) => {
-                if (!tab.isShow) {
-                    return true;
-                }
-                if (parseInt(activeKey) < 0) {
-                    return TabsPageType.None;
-                }
-                const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey);
-                const show = tab.isShow(currentTab?.type ?? TabsPageType.None, currentTab?.subType);
-                // 如果当前打开的菜单等于 状态存的菜单 且 菜单不显示状态下，先切换到项目key(因为项目key 不可能不显示) 在关闭这个
-                // if current open menu equal status menu and menu is not show status, first switch to project key(because project key is not show) and close this
-                // if (tab.key === bottomContainer.selectKey && !show) {
-                //   updateSelectBottomKey(
-                //     currentTab?.subType?.toLowerCase() === DIALECT.FLINKSQLENV
-                //     || currentTab?.subType?.toLowerCase() === DIALECT.SCALA
-                //     || currentTab?.subType?.toLowerCase() === DIALECT.JAVA
-                //     || currentTab?.subType?.toLowerCase() === DIALECT.PYTHON_LONG
-                //       ? LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql环境，scala，java，python，切换到工具栏
-                //       : currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL
-                //       || currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR
-                //       || isSql(currentTab?.subType  ?? '')
-                //     ? LeftBottomKey.CONSOLE_KEY : LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql，flinkjar，切换到控制台
-                //   );
-                // }
-                return show;
-            }).map((x) => {
-                return {...x, key: x.key + '/'};
-            }),
-            ...getSubTabs(), ...tabState?.[bottomContainer.selectKey] ?? []
-        ].map((item) => {
-            return {
-                ...item,
-                children: (
-                    <ContentScroll height={props.height - VIEW.leftMargin}>{item.children}</ContentScroll>
-                )
-            };
-        });
-    };
-
-    return (
-        <MovableSidebar
-            title={
-                <ConfigProvider
-                    theme={{
-                        components: {
-                            Tabs: {
-                                horizontalMargin: '0',
-                                cardPaddingSM: '6px',
-                                horizontalItemPadding: '0'
-                            }
-                        }
-                    }}
-                >
-                    <Space>
-                        <Title>{l(bottomContainer.selectKey)}</Title>
-                        {renderTabPane()}
-                    </Space>
-                </ConfigProvider>
-            }
-            visible={bottomContainer.selectKey}
-            style={{
-                zIndex: 999,
-                height: height,
-                marginTop: 0,
-                backgroundColor: '#fff',
-                position: 'fixed',
-                bottom: VIEW.footerHeight
-            }}
-            defaultSize={{width: '100%', height: height}}
-            minHeight={VIEW.midMargin}
-            maxHeight={size.contentHeight - 40}
-            onResize={(
-                event: any,
-                direction: any,
-                elementRef: {
-                    offsetHeight: any;
-                }
-            ) => resizeCallback(event, direction, elementRef)}
-            btnGroup={BottomBtnRoute[bottomContainer.selectKey]?.map(x => <CircleBtn key={x.key} icon={x.icon}
-                                                                                     onClick={async () => {
-                                                                                         const tabs = tabState?.[bottomContainer.selectKey] ?? [];
-                                                                                         await x.onClick?.(tabs, bottomContainer.selectKey, currentData, refresh);
-                                                                                         refresh()
-                                                                                     }}
-            />)}
-            enable={{top: true}}
-            handlerMinimize={handleMinimize}
-            maxWidth={width}
-        >
-            <Tabs
-                activeKey={
-                    bottomContainer.selectKey +
-                    '/' +
-                    (bottomContainer.selectSubKey[bottomContainer.selectKey]
-                        ? bottomContainer.selectSubKey[bottomContainer.selectKey]
-                        : '')
-                }
-                items={renderItems()}
-                tabBarStyle={{display: 'none'}}
-            />
-        </MovableSidebar>
-    );
+        items={renderItems()}
+        tabBarStyle={{ display: 'none' }}
+      />
+    </MovableSidebar>
+  );
 };
 
-export default connect(({Studio}: { Studio: StateType }) => ({
-    bottomContainer: Studio.bottomContainer,
-    tabs: Studio.tabs
+export default connect(({ Studio }: { Studio: StateType }) => ({
+  bottomContainer: Studio.bottomContainer,
+  tabs: Studio.tabs
 }))(BottomContainer);
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx
index c334df505a..5dd11cf39b 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/BtnContext/index.tsx
@@ -17,110 +17,97 @@
  *
  */
 
-import {CircleDataStudioButtonProps} from "@/components/CallBackButton/CircleBtn";
+import { CircleDataStudioButtonProps } from '@/components/CallBackButton/CircleBtn';
+import { l } from '@/utils/intl';
 import {
-    ArrowsAltOutlined,
-    EnvironmentOutlined,
-    PlusCircleOutlined,
-    PlusOutlined,
-    ReloadOutlined,
-    ShrinkOutlined
-} from "@ant-design/icons";
-import {l} from "@/utils/intl";
-import React, {createContext, useContext, useReducer} from "react";
+  ArrowsAltOutlined,
+  EnvironmentOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  ShrinkOutlined
+} from '@ant-design/icons';
+import { createContext, useContext, useReducer } from 'react';
 
 export const BtnRoute: { [c: string]: CircleDataStudioButtonProps[] } = {
-    'menu.datastudio.datasource': [
-        {
-            icon: <PlusOutlined/>,
-            title: l('button.create'),
-            onClick: () => {
-            }
-        },
-        {
-            icon: <ReloadOutlined/>,
-            title: l('button.refresh'),
-            onClick: () => {
-            }
-        }
-    ],
-    'menu.datastudio.catalog': [
-        {
-            icon: <ReloadOutlined/>,
-            title: l('button.refresh'),
-            onClick: () => {
-            }
-        }
-    ],
-    'menu.datastudio.project': [
-        {
-            icon: <PlusCircleOutlined/>,
-            title: l('right.menu.createRoot'),
-            key: 'right.menu.createRoot',
-            onClick: () => {
-            }
-        },
-        {
-            icon: <ArrowsAltOutlined/>,
-            title: l('button.expand-all'),
-            key: 'button.expand-all',
-            onClick: () => {
-            }
-        },
-        {
-            icon: <ShrinkOutlined/>,
-            title: l('button.collapse-all'),
-            key: 'button.collapse-all',
-            onClick: () => {
-            }
-        },
-        {
-            icon: <EnvironmentOutlined/>,
-            title: l('button.position'),
-            key: 'button.position',
-            onClick: () => {
-            }
-        }
-    ]
+  'menu.datastudio.datasource': [
+    {
+      icon: <PlusOutlined />,
+      title: l('button.create'),
+      onClick: () => {}
+    },
+    {
+      icon: <ReloadOutlined />,
+      title: l('button.refresh'),
+      onClick: () => {}
+    }
+  ],
+  'menu.datastudio.catalog': [
+    {
+      icon: <ReloadOutlined />,
+      title: l('button.refresh'),
+      onClick: () => {}
+    }
+  ],
+  'menu.datastudio.project': [
+    {
+      icon: <PlusCircleOutlined />,
+      title: l('right.menu.createRoot'),
+      key: 'right.menu.createRoot',
+      onClick: () => {}
+    },
+    {
+      icon: <ArrowsAltOutlined />,
+      title: l('button.expand-all'),
+      key: 'button.expand-all',
+      onClick: () => {}
+    },
+    {
+      icon: <ShrinkOutlined />,
+      title: l('button.collapse-all'),
+      key: 'button.collapse-all',
+      onClick: () => {}
+    },
+    {
+      icon: <EnvironmentOutlined />,
+      title: l('button.position'),
+      key: 'button.position',
+      onClick: () => {}
+    }
+  ]
 };
 
 type BtnAction = {
-    type: 'change',
-    selectKey: string,
-    payload: CircleDataStudioButtonProps[]
-}
+  type: 'change';
+  selectKey: string;
+  payload: CircleDataStudioButtonProps[];
+};
 
 export const BtnContext = createContext(BtnRoute);
 
-const BtnDispatchContext = createContext((params: BtnAction) => {
-});
+const BtnDispatchContext = createContext((params: BtnAction) => {});
 
 export function useTasksDispatch() {
-    return useContext(BtnDispatchContext);
+  return useContext(BtnDispatchContext);
 }
 
 function BtnReducer(state = BtnRoute, action: BtnAction) {
-    switch (action.type) {
-        case 'change': {
-            return {...state, [action.selectKey]: action.payload}
-        }
-        default:
-            return {...state}
+  switch (action.type) {
+    case 'change': {
+      return { ...state, [action.selectKey]: action.payload };
     }
+    default:
+      return { ...state };
+  }
 }
 
 // @ts-ignore
-export function BtnProvider({children}) {
-    const [btn, dispatch] = useReducer(
-        BtnReducer,
-        BtnRoute
-    );
+export function BtnProvider({ children }) {
+  const [btn, dispatch] = useReducer(BtnReducer, BtnRoute);
 
-    return (
-        <BtnContext.Provider value={btn}>
-            <BtnDispatchContext.Provider value={dispatch}>
-                {children}
-            </BtnDispatchContext.Provider>
-        </BtnContext.Provider>
-    );
-}
\ No newline at end of file
+  return (
+    <BtnContext.Provider value={btn}>
+      <BtnDispatchContext.Provider value={dispatch}>{children}</BtnDispatchContext.Provider>
+    </BtnContext.Provider>
+  );
+}
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx
index bd24d17e18..e975b495b6 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/Catalog/index.tsx
@@ -19,6 +19,7 @@
 
 import { getCurrentData } from '@/pages/DataStudio/function';
 import { isSql } from '@/pages/DataStudio/HeaderContainer/service';
+import { BtnRoute, useTasksDispatch } from '@/pages/DataStudio/LeftContainer/BtnContext';
 import { TableDataNode } from '@/pages/DataStudio/LeftContainer/Catalog/data';
 import { StateType } from '@/pages/DataStudio/model';
 import ColumnInfo from '@/pages/RegCenter/DataSource/components/DataSourceDetail/RightTagsRouter/SchemaDesc/ColumnInfo';
@@ -38,9 +39,8 @@ import { Button, Col, Empty, Modal, Row, Select, Spin, Tabs } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import DirectoryTree from 'antd/es/tree/DirectoryTree';
 import { DefaultOptionType } from 'rc-select/lib/Select';
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import { getMSCatalogs, getMSColumns, getMSSchemaInfo } from './service';
-import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const Catalog: React.FC = (props: connect) => {
   const { tabs } = props;
@@ -86,7 +86,7 @@ const Catalog: React.FC = (props: connect) => {
     type: 'change',
     selectKey: currentTabName,
     payload: btnEvent
-  })
+  });
 
   useEffect(() => {
     getCatalogs();
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx
index 73429a4b6d..24dd7787b5 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/DataSource/index.tsx
@@ -18,6 +18,7 @@
  */
 
 import { TagAlignLeft } from '@/components/StyledComponents';
+import { BtnRoute, useTasksDispatch } from '@/pages/DataStudio/LeftContainer/BtnContext';
 import SchemaTree from '@/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree';
 import DataSourceModal from '@/pages/RegCenter/DataSource/components/DataSourceModal';
 import { handleTest, saveOrUpdateHandle } from '@/pages/RegCenter/DataSource/service';
@@ -30,7 +31,6 @@ import { Spin, Tag } from 'antd';
 import { useEffect, useState } from 'react';
 import { StateType, STUDIO_MODEL } from '../../model';
 import { clearDataSourceTable, getDataSourceList, showDataSourceTable } from './service';
-import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const DataSource = (props: any) => {
   const {
@@ -106,7 +106,7 @@ const DataSource = (props: any) => {
     type: 'change',
     selectKey: currentTabName,
     payload: btnEvent
-  })
+  });
 
   /**
    * 构建数据库列表 下拉框
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx
index e1c6cc2f10..f5e0cacd43 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx
@@ -31,7 +31,7 @@ import { Key } from '@ant-design/pro-components';
 import { Empty, Tree } from 'antd';
 import Search from 'antd/es/input/Search';
 import React, { useEffect, useState } from 'react';
-import {BtnRoute, useTasksDispatch} from '../../BtnContext';
+import { BtnRoute, useTasksDispatch } from '../../BtnContext';
 
 const { DirectoryTree } = Tree;
 
@@ -62,7 +62,6 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
   const [data, setData] = useState<any[]>(buildProjectTree(projectData, searchValue));
   const btnDispatch = useTasksDispatch();
 
-
   useEffect(() => {
     setData(buildProjectTree(projectData, searchValue));
   }, [searchValue, projectData]);
@@ -138,7 +137,7 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
     type: 'change',
     selectKey: currentTabName,
     payload: btnEvent
-  })
+  });
 
   return (
     <>
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx
index 48bd67cfd9..3d4bc654e9 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/ProjectTitle/index.tsx
@@ -18,6 +18,7 @@
  */
 
 import Title from '@/components/Front/Title';
+import { BtnRoute, useTasksDispatch } from '@/pages/DataStudio/LeftContainer/BtnContext';
 import FolderModal from '@/pages/DataStudio/LeftContainer/Project/FolderModal';
 import { StateType, STUDIO_MODEL_ASYNC } from '@/pages/DataStudio/model';
 import { handleAddOrUpdate } from '@/services/BusinessCrud';
@@ -27,7 +28,6 @@ import { l } from '@/utils/intl';
 import { connect } from '@umijs/max';
 import { Space } from 'antd';
 import React, { useState } from 'react';
-import {BtnRoute, useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const ProjectTitle: React.FC<StateType & connect> = (props) => {
   const {
@@ -72,9 +72,9 @@ const ProjectTitle: React.FC<StateType & connect> = (props) => {
   btn[0].onClick = () => handleCreateClick();
   btnDispatch({
     type: 'change',
-    selectKey:currentTabName,
+    selectKey: currentTabName,
     payload: btn
-  })
+  });
 
   /**
    * 渲染侧边栏标题
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx
index 14a15ee35f..2ccf7f6aeb 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx
@@ -20,6 +20,7 @@
 import RightContextMenu from '@/components/RightContextMenu';
 import { LeftBottomKey } from '@/pages/DataStudio/data.d';
 import { getTabByTaskId } from '@/pages/DataStudio/function';
+import { useTasksDispatch } from '@/pages/DataStudio/LeftContainer/BtnContext';
 import {
   FOLDER_RIGHT_MENU,
   JOB_RIGHT_MENU
@@ -53,7 +54,6 @@ import { Modal, Typography } from 'antd';
 import { MenuInfo } from 'rc-menu/es/interface';
 import React, { Key, useEffect, useState } from 'react';
 import { connect } from 'umi';
-import {useTasksDispatch} from "@/pages/DataStudio/LeftContainer/BtnContext";
 
 const { Text } = Typography;
 
@@ -67,7 +67,6 @@ const Project: React.FC = (props: connect) => {
   const [projectState, setProjectState] = useState<ProjectState>(InitProjectState);
   const btnDispatch = useTasksDispatch();
 
-
   useEffect(() => {
     setProjectState((prevState) => ({
       ...prevState,
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx
index c872df63a3..24949fb440 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/index.tsx
@@ -20,13 +20,13 @@
 import { CircleBtn, CircleDataStudioButtonProps } from '@/components/CallBackButton/CircleBtn';
 import MovableSidebar, { MovableSidebarProps } from '@/components/Sidebar/MovableSidebar';
 import useThemeValue from '@/hooks/useThemeValue';
+import { BtnContext } from '@/pages/DataStudio/LeftContainer/BtnContext';
 import ProjectTitle from '@/pages/DataStudio/LeftContainer/Project/ProjectTitle';
 import { StateType, STUDIO_MODEL, VIEW } from '@/pages/DataStudio/model';
 import { LeftSide } from '@/pages/DataStudio/route';
 import { connect } from '@@/exports';
 import { Tabs } from 'antd';
-import React, {useContext} from 'react';
-import {BtnContext} from "@/pages/DataStudio/LeftContainer/BtnContext";
+import React, { useContext } from 'react';
 
 export type LeftContainerProps = {
   size: number;
diff --git a/dinky-web/src/pages/DataStudio/TabRoute.tsx b/dinky-web/src/pages/DataStudio/TabRoute.tsx
index e94295178a..b840a789a8 100644
--- a/dinky-web/src/pages/DataStudio/TabRoute.tsx
+++ b/dinky-web/src/pages/DataStudio/TabRoute.tsx
@@ -17,25 +17,29 @@
  *
  */
 
-import React from "react";
-import {Tab} from "@/pages/DataStudio/route";
-import {TaskDataType} from "@/pages/DataStudio/model";
-import {LeftBottomKey} from "@/pages/DataStudio/data.d";
-import {onAdd} from "@/pages/DataStudio/BottomContainer/TableData";
+import { onAdd } from '@/pages/DataStudio/BottomContainer/TableData';
+import { LeftBottomKey } from '@/pages/DataStudio/data.d';
+import { TaskDataType } from '@/pages/DataStudio/model';
+import { Tab } from '@/pages/DataStudio/route';
+import React from 'react';
 
 export type BottomTabProps = {
-    icon?: React.ReactNode;
-    onAdd: (tabs: Tab[], key: string, data: TaskDataType | undefined, operator: any) => Promise<void>;
-    onRemove?: (tabs: Tab[], key: string, data: TaskDataType | undefined, tabKey: string, refresh: any) => Promise<void>;
-    key: string;
+  icon?: React.ReactNode;
+  onAdd: (tabs: Tab[], key: string, data: TaskDataType | undefined, operator: any) => Promise<void>;
+  onRemove?: (
+    tabs: Tab[],
+    key: string,
+    data: TaskDataType | undefined,
+    tabKey: string,
+    refresh: any
+  ) => Promise<void>;
+  key: string;
 };
 export const BottomTabRoute: { [c: string]: BottomTabProps } = {
-    [LeftBottomKey.TABLE_DATA_KEY]:
-        {
-            key: 'add table data',
-            onAdd: async (tabs, key, data, operator) => {
-                await onAdd(tabs, key, data, operator);
-            }
-        }
-
-}
\ No newline at end of file
+  [LeftBottomKey.TABLE_DATA_KEY]: {
+    key: 'add table data',
+    onAdd: async (tabs, key, data, operator) => {
+      await onAdd(tabs, key, data, operator);
+    }
+  }
+};
diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
index 9741bf8088..23f707fb58 100644
--- a/dinky-web/src/pages/DataStudio/index.tsx
+++ b/dinky-web/src/pages/DataStudio/index.tsx
@@ -26,6 +26,7 @@ import FooterContainer from '@/pages/DataStudio/FooterContainer';
 import { isProjectTabs, mapDispatchToProps } from '@/pages/DataStudio/function';
 import SecondHeaderContainer from '@/pages/DataStudio/HeaderContainer';
 import LeftContainer from '@/pages/DataStudio/LeftContainer';
+import { BtnProvider } from '@/pages/DataStudio/LeftContainer/BtnContext';
 import { getDataSourceList } from '@/pages/DataStudio/LeftContainer/DataSource/service';
 import { getTaskData } from '@/pages/DataStudio/LeftContainer/Project/service';
 import MiddleContainer from '@/pages/DataStudio/MiddleContainer';
@@ -44,12 +45,11 @@ import {
 } from '@/pages/DataStudio/RightContainer/JobConfig/service';
 import { LeftBottomMoreTabs, LeftBottomSide, LeftSide, RightSide } from '@/pages/DataStudio/route';
 import { PageContainer } from '@ant-design/pro-layout';
+import { useAsyncEffect } from 'ahooks';
 import { Layout, Menu, theme } from 'antd';
 import { useEffect, useState } from 'react';
 import { PersistGate } from 'redux-persist/integration/react';
 import { connect, getDvaApp } from 'umi';
-import {BtnProvider} from "@/pages/DataStudio/LeftContainer/BtnContext";
-import {useAsyncEffect} from "ahooks";
 
 const { Sider, Content } = Layout;
 
@@ -279,13 +279,13 @@ const DataStudio = (props: any) => {
 
             <Content style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
               <div style={{ display: 'flex' }}>
-                  <BtnProvider>
-                    <LeftContainer
-                      size={size}
-                      leftContainer={leftContainer}
-                      rightContainer={rightContainer}
-                    />
-                  </BtnProvider>
+                <BtnProvider>
+                  <LeftContainer
+                    size={size}
+                    leftContainer={leftContainer}
+                    rightContainer={rightContainer}
+                  />
+                </BtnProvider>
                 <Content
                   style={{
                     width:
diff --git a/dinky-web/src/pages/DataStudio/route.tsx b/dinky-web/src/pages/DataStudio/route.tsx
index 43b6555027..e1c029b406 100644
--- a/dinky-web/src/pages/DataStudio/route.tsx
+++ b/dinky-web/src/pages/DataStudio/route.tsx
@@ -17,255 +17,253 @@
  *
  */
 
-import {
-    CircleBottomButtonProps
-} from '@/components/CallBackButton/CircleBtn';
+import { CircleBottomButtonProps } from '@/components/CallBackButton/CircleBtn';
 import Console from '@/pages/DataStudio/BottomContainer/Console';
 import JobExecHistory from '@/pages/DataStudio/BottomContainer/JobExecHistory';
 import Lineage from '@/pages/DataStudio/BottomContainer/Lineage';
 import Result from '@/pages/DataStudio/BottomContainer/Result';
 import JsonToSql from '@/pages/DataStudio/BottomContainer/Tools/JsonToSql';
 import TextComparison from '@/pages/DataStudio/BottomContainer/Tools/TextComparison';
-import {LeftBottomKey, LeftMenuKey, RightMenuKey} from '@/pages/DataStudio/data.d';
-import {isSql} from '@/pages/DataStudio/HeaderContainer/service';
+import { LeftBottomKey, LeftMenuKey, RightMenuKey } from '@/pages/DataStudio/data.d';
+import { isSql } from '@/pages/DataStudio/HeaderContainer/service';
 import Catalog from '@/pages/DataStudio/LeftContainer/Catalog';
 import DataSource from '@/pages/DataStudio/LeftContainer/DataSource';
 import GlobalVariable from '@/pages/DataStudio/LeftContainer/GlobaleVar';
 import Project from '@/pages/DataStudio/LeftContainer/Project';
-import {TabsPageSubType, TabsPageType} from '@/pages/DataStudio/model';
+import { TabsPageSubType, TabsPageType } from '@/pages/DataStudio/model';
 import HistoryVersion from '@/pages/DataStudio/RightContainer/HistoryVersion';
 import JobConfig from '@/pages/DataStudio/RightContainer/JobConfig';
 import JobInfo from '@/pages/DataStudio/RightContainer/JobInfo';
 import PreViewConfig from '@/pages/DataStudio/RightContainer/PreViewConfig';
 import SavePoints from '@/pages/DataStudio/RightContainer/SavePoints';
-import {DIALECT} from '@/services/constants';
-import {l} from '@/utils/intl';
+import { DIALECT } from '@/services/constants';
+import { l } from '@/utils/intl';
 import {
-    ApartmentOutlined,
-    ConsoleSqlOutlined,
-    DatabaseOutlined,
-    FolderOutlined,
-    FunctionOutlined,
-    HistoryOutlined,
-    InfoCircleOutlined,
-    InsertRowRightOutlined,
-    MonitorOutlined,
-    RightSquareOutlined,
-    RotateRightOutlined,
-    SettingOutlined,
-    TableOutlined,
-    ToolOutlined
+  ApartmentOutlined,
+  ConsoleSqlOutlined,
+  DatabaseOutlined,
+  FolderOutlined,
+  FunctionOutlined,
+  HistoryOutlined,
+  InfoCircleOutlined,
+  InsertRowRightOutlined,
+  MonitorOutlined,
+  RightSquareOutlined,
+  RotateRightOutlined,
+  SettingOutlined,
+  TableOutlined,
+  ToolOutlined
 } from '@ant-design/icons';
-import React, {ReactNode} from 'react';
-import {TabPaneProps} from "antd";
+import { TabPaneProps } from 'antd';
+import React, { ReactNode } from 'react';
 
 export const LeftSide: TabProp[] = [
-    {
-        auth: '/datastudio/left/project',
-        key: LeftMenuKey.PROJECT_KEY,
-        icon: <ConsoleSqlOutlined/>,
-        label: l(LeftMenuKey.PROJECT_KEY),
-        children: <Project/>
-    },
-    {
-        auth: '/datastudio/left/catalog',
-        key: LeftMenuKey.CATALOG_KEY,
-        icon: <TableOutlined/>,
-        label: l(LeftMenuKey.CATALOG_KEY),
-        children: <Catalog/>,
-        isShow: (type, subType) =>
-            (type === TabsPageType.project || type === TabsPageType.metadata) &&
-            subType?.toLowerCase() !== DIALECT.FLINKJAR &&
-            subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
-            subType?.toLowerCase() !== DIALECT.SCALA &&
-            subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
-            subType?.toLowerCase() !== DIALECT.JAVA &&
-            subType?.toLowerCase() !== DIALECT.FLINKSQLENV
-    },
-    {
-        auth: '/datastudio/left/datasource',
-        key: LeftMenuKey.DATASOURCE_KEY,
-        icon: <DatabaseOutlined/>,
-        label: l(LeftMenuKey.DATASOURCE_KEY),
-        children: <DataSource/>
-    },
-    {
-        auth: '/datastudio/left/globalVariable',
-        key: LeftMenuKey.FRAGMENT_KEY,
-        icon: <FunctionOutlined/>,
-        label: l(LeftMenuKey.FRAGMENT_KEY),
-        children: <GlobalVariable/>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project &&
-            !isSql(subType ?? '') &&
-            subType?.toLowerCase() !== DIALECT.SCALA &&
-            subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
-            subType?.toLowerCase() !== DIALECT.JAVA
-    }
+  {
+    auth: '/datastudio/left/project',
+    key: LeftMenuKey.PROJECT_KEY,
+    icon: <ConsoleSqlOutlined />,
+    label: l(LeftMenuKey.PROJECT_KEY),
+    children: <Project />
+  },
+  {
+    auth: '/datastudio/left/catalog',
+    key: LeftMenuKey.CATALOG_KEY,
+    icon: <TableOutlined />,
+    label: l(LeftMenuKey.CATALOG_KEY),
+    children: <Catalog />,
+    isShow: (type, subType) =>
+      (type === TabsPageType.project || type === TabsPageType.metadata) &&
+      subType?.toLowerCase() !== DIALECT.FLINKJAR &&
+      subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
+      subType?.toLowerCase() !== DIALECT.SCALA &&
+      subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+      subType?.toLowerCase() !== DIALECT.JAVA &&
+      subType?.toLowerCase() !== DIALECT.FLINKSQLENV
+  },
+  {
+    auth: '/datastudio/left/datasource',
+    key: LeftMenuKey.DATASOURCE_KEY,
+    icon: <DatabaseOutlined />,
+    label: l(LeftMenuKey.DATASOURCE_KEY),
+    children: <DataSource />
+  },
+  {
+    auth: '/datastudio/left/globalVariable',
+    key: LeftMenuKey.FRAGMENT_KEY,
+    icon: <FunctionOutlined />,
+    label: l(LeftMenuKey.FRAGMENT_KEY),
+    children: <GlobalVariable />,
+    isShow: (type, subType) =>
+      type === TabsPageType.project &&
+      !isSql(subType ?? '') &&
+      subType?.toLowerCase() !== DIALECT.SCALA &&
+      subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+      subType?.toLowerCase() !== DIALECT.JAVA
+  }
 ];
 
 export const RightSide: TabProp[] = [
-    {
-        auth: '/datastudio/right/jobConfig',
-        key: RightMenuKey.JOB_CONFIG_KEY,
-        icon: <SettingOutlined/>,
-        label: l(RightMenuKey.JOB_CONFIG_KEY),
-        children: <JobConfig/>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project &&
-            (TabsPageSubType.flinkSql === subType || TabsPageSubType.flinkJar === subType)
-    },
-    {
-        auth: '/datastudio/right/previewConfig',
-        key: RightMenuKey.PREVIEW_CONFIG_KEY,
-        icon: <InsertRowRightOutlined/>,
-        label: l(RightMenuKey.PREVIEW_CONFIG_KEY),
-        children: <PreViewConfig/>,
-        isShow: (type, subType) =>
-            (type === TabsPageType.project && TabsPageSubType.flinkSql === subType) ||
-            isSql(subType ?? '')
-    },
-    {
-        auth: '/datastudio/right/savePoint',
-        key: RightMenuKey.SAVEPOINT_KEY,
-        icon: <FolderOutlined/>,
-        label: l(RightMenuKey.SAVEPOINT_KEY),
-        children: <SavePoints/>,
-        isShow: (type, subType) => type === TabsPageType.project && TabsPageSubType.flinkSql === subType
-    },
-    {
-        auth: '/datastudio/right/historyVision',
-        key: RightMenuKey.HISTORY_VISION_KEY,
-        icon: <HistoryOutlined/>,
-        label: l(RightMenuKey.HISTORY_VISION_KEY),
-        children: <HistoryVersion/>,
-        isShow: (type, subType) => type === TabsPageType.project && TabsPageSubType.flinkSql === subType
-    },
-    {
-        auth: '/datastudio/right/jobInfo',
-        key: RightMenuKey.JOB_INFO_KEY,
-        icon: <InfoCircleOutlined/>,
-        label: l(RightMenuKey.JOB_INFO_KEY),
-        children: <JobInfo/>,
-        isShow: (type) => type === TabsPageType.project
-    }
+  {
+    auth: '/datastudio/right/jobConfig',
+    key: RightMenuKey.JOB_CONFIG_KEY,
+    icon: <SettingOutlined />,
+    label: l(RightMenuKey.JOB_CONFIG_KEY),
+    children: <JobConfig />,
+    isShow: (type, subType) =>
+      type === TabsPageType.project &&
+      (TabsPageSubType.flinkSql === subType || TabsPageSubType.flinkJar === subType)
+  },
+  {
+    auth: '/datastudio/right/previewConfig',
+    key: RightMenuKey.PREVIEW_CONFIG_KEY,
+    icon: <InsertRowRightOutlined />,
+    label: l(RightMenuKey.PREVIEW_CONFIG_KEY),
+    children: <PreViewConfig />,
+    isShow: (type, subType) =>
+      (type === TabsPageType.project && TabsPageSubType.flinkSql === subType) ||
+      isSql(subType ?? '')
+  },
+  {
+    auth: '/datastudio/right/savePoint',
+    key: RightMenuKey.SAVEPOINT_KEY,
+    icon: <FolderOutlined />,
+    label: l(RightMenuKey.SAVEPOINT_KEY),
+    children: <SavePoints />,
+    isShow: (type, subType) => type === TabsPageType.project && TabsPageSubType.flinkSql === subType
+  },
+  {
+    auth: '/datastudio/right/historyVision',
+    key: RightMenuKey.HISTORY_VISION_KEY,
+    icon: <HistoryOutlined />,
+    label: l(RightMenuKey.HISTORY_VISION_KEY),
+    children: <HistoryVersion />,
+    isShow: (type, subType) => type === TabsPageType.project && TabsPageSubType.flinkSql === subType
+  },
+  {
+    auth: '/datastudio/right/jobInfo',
+    key: RightMenuKey.JOB_INFO_KEY,
+    icon: <InfoCircleOutlined />,
+    label: l(RightMenuKey.JOB_INFO_KEY),
+    children: <JobInfo />,
+    isShow: (type) => type === TabsPageType.project
+  }
 ];
 
 export const LeftBottomSide: TabProp[] = [
+  {
+    auth: '/datastudio/bottom/console',
+    key: LeftBottomKey.CONSOLE_KEY,
+    icon: <RightSquareOutlined />,
+    label: l(LeftBottomKey.CONSOLE_KEY),
+    children: <Console />,
+    isShow: (type, subType) =>
+      type === TabsPageType.project &&
+      subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
+      subType?.toLowerCase() !== DIALECT.SCALA &&
+      subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+      subType?.toLowerCase() !== DIALECT.JAVA
+  },
+  {
+    auth: '/datastudio/bottom/result',
+    key: LeftBottomKey.RESULT_KEY,
+    icon: <MonitorOutlined />,
+    label: l(LeftBottomKey.RESULT_KEY),
+    children: <Result />,
+    isShow: (type, subType) =>
+      type === TabsPageType.project &&
+      subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
+      subType?.toLowerCase() !== DIALECT.FLINKJAR &&
+      subType?.toLowerCase() !== DIALECT.SCALA &&
+      subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+      subType?.toLowerCase() !== DIALECT.JAVA
+  },
+  {
+    auth: '/datastudio/bottom/lineage',
+    key: LeftBottomKey.LINEAGE_KEY,
+    icon: <ApartmentOutlined />,
+    label: l(LeftBottomKey.LINEAGE_KEY),
+    children: <Lineage />,
+    isShow: (type, subType) =>
+      type === TabsPageType.project &&
+      subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
+      subType?.toLowerCase() !== DIALECT.FLINKJAR &&
+      subType?.toLowerCase() !== DIALECT.SCALA &&
+      subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+      subType?.toLowerCase() !== DIALECT.JAVA
+  },
+  {
+    auth: '/datastudio/bottom/history',
+    key: LeftBottomKey.HISTORY_KEY,
+    icon: <HistoryOutlined />,
+    label: l(LeftBottomKey.HISTORY_KEY),
+    children: <JobExecHistory />,
+    isShow: (type, subType) =>
+      type === TabsPageType.project &&
+      !isSql(subType ?? '') &&
+      subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
+      subType?.toLowerCase() !== DIALECT.FLINKJAR &&
+      subType?.toLowerCase() !== DIALECT.SCALA &&
+      subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
+      subType?.toLowerCase() !== DIALECT.JAVA
+  },
+  {
+    auth: '/datastudio/bottom/table-data',
+    key: LeftBottomKey.TABLE_DATA_KEY,
+    icon: <TableOutlined />,
+    label: l(LeftBottomKey.TABLE_DATA_KEY),
+    children: <></>,
+    isShow: (type, subType) =>
+      type === TabsPageType.project && subType?.toLowerCase() === DIALECT.FLINK_SQL
+  },
+  {
+    auth: '/datastudio/bottom/tool',
+    key: LeftBottomKey.TOOLS_KEY,
+    icon: <ToolOutlined />,
+    label: l(LeftBottomKey.TOOLS_KEY),
+    children: <></>
+  }
+];
+
+export const LeftBottomMoreTabs: { [c: string]: TabProp[] } = {
+  'menu.datastudio.tool': [
     {
-        auth: '/datastudio/bottom/console',
-        key: LeftBottomKey.CONSOLE_KEY,
-        icon: <RightSquareOutlined/>,
-        label: l(LeftBottomKey.CONSOLE_KEY),
-        children: <Console/>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project &&
-            subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
-            subType?.toLowerCase() !== DIALECT.SCALA &&
-            subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
-            subType?.toLowerCase() !== DIALECT.JAVA
-    },
-    {
-        auth: '/datastudio/bottom/result',
-        key: LeftBottomKey.RESULT_KEY,
-        icon: <MonitorOutlined/>,
-        label: l(LeftBottomKey.RESULT_KEY),
-        children: <Result/>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project &&
-            subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
-            subType?.toLowerCase() !== DIALECT.FLINKJAR &&
-            subType?.toLowerCase() !== DIALECT.SCALA &&
-            subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
-            subType?.toLowerCase() !== DIALECT.JAVA
-    },
-    {
-        auth: '/datastudio/bottom/lineage',
-        key: LeftBottomKey.LINEAGE_KEY,
-        icon: <ApartmentOutlined/>,
-        label: l(LeftBottomKey.LINEAGE_KEY),
-        children: <Lineage/>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project &&
-            subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
-            subType?.toLowerCase() !== DIALECT.FLINKJAR &&
-            subType?.toLowerCase() !== DIALECT.SCALA &&
-            subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
-            subType?.toLowerCase() !== DIALECT.JAVA
-    },
-    {
-        auth: '/datastudio/bottom/history',
-        key: LeftBottomKey.HISTORY_KEY,
-        icon: <HistoryOutlined/>,
-        label: l(LeftBottomKey.HISTORY_KEY),
-        children: <JobExecHistory/>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project &&
-            !isSql(subType ?? '') &&
-            subType?.toLowerCase() !== DIALECT.FLINKSQLENV &&
-            subType?.toLowerCase() !== DIALECT.FLINKJAR &&
-            subType?.toLowerCase() !== DIALECT.SCALA &&
-            subType?.toLowerCase() !== DIALECT.PYTHON_LONG &&
-            subType?.toLowerCase() !== DIALECT.JAVA
-    },
-    {
-        auth: '/datastudio/bottom/table-data',
-        key: LeftBottomKey.TABLE_DATA_KEY,
-        icon: <TableOutlined/>,
-        label: l(LeftBottomKey.TABLE_DATA_KEY),
-        children: <></>,
-        isShow: (type, subType) =>
-            type === TabsPageType.project && subType?.toLowerCase() === DIALECT.FLINK_SQL
+      key: 'menu.datastudio.tool.text-comparison',
+      icon: <ToolOutlined />,
+      label: l('menu.datastudio.tool.text-comparison'),
+      children: <TextComparison />
     },
     {
-        auth: '/datastudio/bottom/tool',
-        key: LeftBottomKey.TOOLS_KEY,
-        icon: <ToolOutlined/>,
-        label: l(LeftBottomKey.TOOLS_KEY),
-        children: <></>
+      key: 'menu.datastudio.tool.jsonToSql',
+      icon: <RotateRightOutlined />,
+      label: l('menu.datastudio.tool.jsonToSql'),
+      children: <JsonToSql />
     }
-];
-
-export const LeftBottomMoreTabs: { [c: string]: TabProp[] } = {
-    'menu.datastudio.tool': [
-        {
-            key: 'menu.datastudio.tool.text-comparison',
-            icon: <ToolOutlined/>,
-            label: l('menu.datastudio.tool.text-comparison'),
-            children: <TextComparison/>
-        },
-        {
-            key: 'menu.datastudio.tool.jsonToSql',
-            icon: <RotateRightOutlined/>,
-            label: l('menu.datastudio.tool.jsonToSql'),
-            children: <JsonToSql/>
-        }
-    ]
+  ]
 };
 
 export const BottomBtnRoute: { [c: string]: CircleBottomButtonProps[] } = {
-    // todo 右边按钮功能有待完善
-    // [LeftBottomKey.TABLE_DATA_KEY]: [
-    //     {
-    //         icon: <PlusOutlined/>,
-    //         title: l('test'),
-    //         key: 'test',
-    //         onClick: async (tabs, key, data, refresh) => {
-    //         }
-    //     }
-    // ]
-}
+  // todo 右边按钮功能有待完善
+  // [LeftBottomKey.TABLE_DATA_KEY]: [
+  //     {
+  //         icon: <PlusOutlined/>,
+  //         title: l('test'),
+  //         key: 'test',
+  //         onClick: async (tabs, key, data, refresh) => {
+  //         }
+  //     }
+  // ]
+};
 
 export type TabProp = {
-    key: string;
-    icon: ReactNode;
-    label: string;
-    children: ReactNode;
-    isShow?: (type: TabsPageType, subType?: TabsPageSubType) => boolean;
-    auth?: string;
+  key: string;
+  icon: ReactNode;
+  label: string;
+  children: ReactNode;
+  isShow?: (type: TabsPageType, subType?: TabsPageSubType) => boolean;
+  auth?: string;
 };
 
 export interface Tab extends Omit<TabPaneProps, 'tab'> {
-    key: string;
-    label: React.ReactNode;
-}
\ No newline at end of file
+  key: string;
+  label: React.ReactNode;
+}

From 1d5ce261093eaecbae4658d88e9aa5c5c3557c53 Mon Sep 17 00:00:00 2001
From: Zzm0809 <934230207@qq.com>
Date: Tue, 19 Dec 2023 12:53:57 +0800
Subject: [PATCH 2/2] fix user admin delete bug

---
 .../main/java/org/dinky/service/impl/UserServiceImpl.java    | 5 +++++
 dinky-common/src/main/java/org/dinky/data/enums/Status.java  | 1 +
 .../src/main/resources/i18n/messages_en_US.properties        | 1 +
 .../src/main/resources/i18n/messages_zh_CN.properties        | 1 +
 .../pages/AuthCenter/User/components/UserProTable/index.tsx  | 2 +-
 5 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/dinky-admin/src/main/java/org/dinky/service/impl/UserServiceImpl.java b/dinky-admin/src/main/java/org/dinky/service/impl/UserServiceImpl.java
index 5c8bc20841..d5fe4abb9e 100644
--- a/dinky-admin/src/main/java/org/dinky/service/impl/UserServiceImpl.java
+++ b/dinky-admin/src/main/java/org/dinky/service/impl/UserServiceImpl.java
@@ -31,6 +31,7 @@
 import org.dinky.data.enums.Status;
 import org.dinky.data.enums.UserType;
 import org.dinky.data.exception.AuthException;
+import org.dinky.data.exception.BusException;
 import org.dinky.data.model.SysToken;
 import org.dinky.data.model.SystemConfiguration;
 import org.dinky.data.model.rbac.Menu;
@@ -152,6 +153,10 @@ public Result<Void> modifyPassword(ModifyPasswordDTO modifyPasswordDTO) {
 
     @Override
     public Boolean removeUser(Integer id) {
+        User user = getById(id);
+        if (user.getSuperAdminFlag()) {
+            throw new BusException(Status.USER_SUPERADMIN_CANNOT_DELETE);
+        }
         return baseMapper.deleteById(id) > 0;
     }
 
diff --git a/dinky-common/src/main/java/org/dinky/data/enums/Status.java b/dinky-common/src/main/java/org/dinky/data/enums/Status.java
index ac3f2185d9..1e77d7f0b7 100644
--- a/dinky-common/src/main/java/org/dinky/data/enums/Status.java
+++ b/dinky-common/src/main/java/org/dinky/data/enums/Status.java
@@ -124,6 +124,7 @@ public enum Status {
     KICK_OUT(10024, "kick.out"),
     TOKEN_FREEZED(10025, "token.freezed"),
     NO_PREFIX(10026, "no.prefix"),
+    USER_SUPERADMIN_CANNOT_DELETE(10027, "user.superadmin.cannot.delete"),
 
     // role
     ROLE_ALREADY_EXISTS(10101, "role.already.exists"),
diff --git a/dinky-common/src/main/resources/i18n/messages_en_US.properties b/dinky-common/src/main/resources/i18n/messages_en_US.properties
index f9e16b4975..f8fcd47744 100644
--- a/dinky-common/src/main/resources/i18n/messages_en_US.properties
+++ b/dinky-common/src/main/resources/i18n/messages_en_US.properties
@@ -7,6 +7,7 @@ ldap.user.duplicat=The ldap matches to multiple user data
 git.branch.not.found=Git Branch Not Found
 copy.success=Copy Successfully
 user.superadmin.cannot.disable=User SuperAdmin Cannot Disable
+user.superadmin.cannot.delete=User SuperAdmin Cannot Delete
 ds.work.flow.not.save=Please Save Workflow First
 schedule.status.unknown=Unknown Status: {0}
 user.binding.role.delete.all=User Binding Role Delete All
diff --git a/dinky-common/src/main/resources/i18n/messages_zh_CN.properties b/dinky-common/src/main/resources/i18n/messages_zh_CN.properties
index dff82a03a5..ff7459310f 100644
--- a/dinky-common/src/main/resources/i18n/messages_zh_CN.properties
+++ b/dinky-common/src/main/resources/i18n/messages_zh_CN.properties
@@ -7,6 +7,7 @@ ldap.user.duplicat=ldap匹配到多个用户数据
 git.branch.not.found=获取不到分支信息
 copy.success=复制成功
 user.superadmin.cannot.disable=超级管理员用户不能停用
+user.superadmin.cannot.delete=超级管理员用户不能删除
 ds.work.flow.not.save=请先保存工作流
 schedule.status.unknown=未知状态: {0}
 user.binding.role.delete.all=用户绑定角色删除所有
diff --git a/dinky-web/src/pages/AuthCenter/User/components/UserProTable/index.tsx b/dinky-web/src/pages/AuthCenter/User/components/UserProTable/index.tsx
index c67eb68fd6..0025063a97 100644
--- a/dinky-web/src/pages/AuthCenter/User/components/UserProTable/index.tsx
+++ b/dinky-web/src/pages/AuthCenter/User/components/UserProTable/index.tsx
@@ -276,7 +276,7 @@ const UserProTable = () => {
         </Authorized>,
         <Authorized key={`${record.id}_delete_auth`} path='/auth/user/delete'>
           <>
-            {access.isAdmin && !record.isDelete && (
+            {access.isAdmin && !record.isDelete && !record.superAdminFlag && (
               <PopconfirmDeleteBtn
                 key={`${record.id}_delete`}
                 onClick={() => handleDeleteUser(record)}