[BugFix][Web]Fix datastudio footer state (#3927)

Co-authored-by: zackyoungh <[email protected]>

dinky-web/src/pages/DataStudio/FooterContainer/index.tsx

@@ -18,12 +18,11 @@
  */
 
 import { l } from '@/utils/intl';
-import { connect, useModel } from '@@/exports';
+import { useModel } from '@@/exports';
 import { Button, GlobalToken, Space } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { SseData, Topic } from '@/models/UseWebSocketModel';
-import { CenterTab, DataStudioState } from '@/pages/DataStudio/model';
-import { mapDispatchToProps } from '@/pages/DataStudio/DvaFunction';
+import { DataStudioState } from '@/pages/DataStudio/model';
 import { formatDate } from '@/pages/DataStudio/FooterContainer/function';
 
 type ButtonRoute = {
@@ -32,10 +31,7 @@ type ButtonRoute = {
   onClick?: () => void;
 };
 
-const FooterContainer = (props: {
-  token: GlobalToken;
-  centerContent?: DataStudioState['centerContent'];
-}) => {
+export default (props: { token: GlobalToken; centerContent: DataStudioState['centerContent'] }) => {
   const { token, centerContent } = props;
   const [memDetailInfo, setMemDetailInfo] = useState('0/0M');
   const { subscribeTopic } = useModel('UseWebSocketModel', (model: any) => ({
@@ -53,7 +49,6 @@ const FooterContainer = (props: {
       );
     });
   }, []);
-
   const route: ButtonRoute[] = [
     {
       text: (
@@ -98,9 +93,7 @@ const FooterContainer = (props: {
     ));
   };
   const renderFooterLastUpdate = () => {
-    const currentTab = centerContent?.tabs.find(
-      (item, index) => item.id === centerContent?.activeTab
-    );
+    const currentTab = centerContent?.tabs.find((item) => item.id === centerContent?.activeTab);
     if (currentTab && currentTab.tabType === 'task') {
       return (
         <div>
@@ -139,10 +132,3 @@ const FooterContainer = (props: {
     </>
   );
 };
-
-export default connect(
-  ({ DataStudio }: { DataStudio: DataStudioState }) => ({
-    centerContent: DataStudio.centerContent
-  }),
-  mapDispatchToProps
-)(FooterContainer);

dinky-web/src/pages/DataStudio/Toolbar/Project/JobModal/components/TemplateSelect.tsx

@@ -37,7 +37,7 @@ const TemplateSelect: React.FC<{ type: string; onChange: (v: string) => void }>
 
   const renderItem = (item: Document) => {
     return (
-      <div style={{ padding: 10}}>
+      <div style={{ padding: 10 }}>
         <ProCard
           checked={item.id == currentSelect?.id}
           hoverable

dinky-web/src/pages/DataStudio/Toolbar/Project/function.tsx

@@ -284,9 +284,7 @@ export const buildProjectTree = (
           parentId: item.parentId,
           label: searchTreeNode(item.name, searchValue),
           icon: item.type && item.children.length === 0 && (
-            <Space size={'small'}>
-              {getTabIcon(item.type, 20)}
-            </Space>
+            <Space size={'small'}>{getTabIcon(item.type, 20)}</Space>
           ),
           value: item.id,
           path: currentPath,

dinky-web/src/pages/DataStudio/css/index.less

@@ -11,6 +11,7 @@
   --text-color: #424242;
   --panel-extra-btn-color: #000000;
   --scroll-bg-color: #daecff;
+  --close-btn-img: url('./imgs/close-light.svg');
 }
 
 .dark-theme {
@@ -26,6 +27,7 @@
   --text-color: #fafafa;
   --panel-extra-btn-color: #fafafa;
   --scroll-bg-color: #4d4e51;
+  --close-btn-img: url('./imgs/close-dark.svg');
 }
 
 .page-container {
@@ -280,20 +282,29 @@ body > .dragging-layer > div:last-child {
 .dock-tab-close-btn {
   position: absolute;
   cursor: pointer;
-  font-family: 'Fredoka One', sans-serif;
   color: var(--text-color);
-  right: -5px;
+  right: -7px;
   font-size: 12px;
-  width: 16px;
+
   text-align: center;
   top: 12px;
   outline: none;
   transition: all 0.25s ease-in-out;
+  content: '';
+  width: 14px;
+  height: 14px;
+  background-image: var(--close-btn-img);
+  background-position: center;
 }
-
 .dock-tab-close-btn:before {
-  content: 'X';
-  font-family: emoji;
+  content: '';
+}
+.dock-tab-close-btn:hover {
+  background-size: 14px;
+  border: 1px solid #0b7ec4;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
 }
 
 .dock-tab-close-btn:hover,

dinky-web/src/pages/DataStudio/index.tsx

@@ -20,7 +20,7 @@
 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 { Col, ConfigProvider, Row, Spin, theme as antdTheme } from 'antd';
 import Toolbar from '@/pages/DataStudio/Toolbar';
 import { DataStudioActionType, RightContextMenuState } from '@/pages/DataStudio/data.d';
 import {
@@ -30,8 +30,6 @@ import {
   handleRightClick,
   InitContextMenuPosition
 } from '@/pages/DataStudio/function';
-// import 'rc-dock/dist/rc-dock.css';
-// import 'rc-dock/dist/rc-dock-dark.css';
 import RightContextMenu, { useRightMenuItem } from '@/pages/DataStudio/RightContextMenu';
 import { MenuInfo } from 'rc-menu/es/interface';
 import { lazyComponent, ToolbarRoutes } from '@/pages/DataStudio/Toolbar/ToolbarRoute';
@@ -326,7 +324,7 @@ const DataStudio: React.FC = (props: any) => {
     return { id, group, title };
   };
   const loadTab = (tab: TabData) => {
-    const { id, title, group } = tab;
+    const { id, 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();
@@ -641,7 +639,7 @@ const DataStudio: React.FC = (props: any) => {
               </Col>
             </Row>
 
-            <FooterContainer token={token} />
+            <FooterContainer token={token} centerContent={dataStudioState.centerContent} />
 
             {/* 边缘区域布局右键菜单*/}
             <RightContextMenu