From 8546bb149f2ff7aca6a8bdfe76ad602dbd3d5cd3 Mon Sep 17 00:00:00 2001
From: aiwenmo <32723967+aiwenmo@users.noreply.github.com>
Date: Sat, 2 Sep 2023 23:06:34 +0800
Subject: [PATCH] [Optimization-2284][web] Optimize dinky web and fix some bugs
 (#2285)

* [Optimization-2284][web] Optimize dinky web and fix some bugs

* spotless apply

* Resolve code conflicts

---------

Co-authored-by: wenmo <32723967+wenmo@users.noreply.github.com>
---
 .../org/dinky/data/model/TaskExtConfig.java   |   7 +-
 dinky-web/src/app.tsx                         |  37 +--
 .../src/components/RightContent/index.tsx     |  69 +++--
 dinky-web/src/global.less                     |  20 +-
 dinky-web/src/locales/en-US/pages.ts          |   2 +
 dinky-web/src/locales/zh-CN/pages.ts          |   2 +
 .../LeftContainer/Project/JobModal/index.tsx  |   1 -
 .../LeftContainer/Project/function.tsx        |   4 +-
 dinky-web/src/pages/DataStudio/index.tsx      | 243 +++++++++---------
 .../src/pages/Home/DevOverView/index.tsx      |  14 +-
 .../Home/JobOverView/JobErrorView/index.tsx   |   2 +-
 .../src/pages/Home/JobOverView/index.tsx      |  44 ++--
 .../Login/LoginForm/MainWithStyle/index.tsx   |   5 +-
 .../RegCenter/Cluster/Configuration/index.tsx |   6 +-
 .../RegCenter/Cluster/Instance/index.tsx      |   6 +-
 .../src/pages/RegCenter/DataSource/index.tsx  |   6 +-
 .../src/pages/RegCenter/Resource/index.tsx    |   6 +-
 .../SettingCenter/GlobalSetting/index.tsx     |   5 +-
 18 files changed, 247 insertions(+), 232 deletions(-)

diff --git a/dinky-admin/src/main/java/org/dinky/data/model/TaskExtConfig.java b/dinky-admin/src/main/java/org/dinky/data/model/TaskExtConfig.java
index 0d501ef9ea..f1a309139f 100644
--- a/dinky-admin/src/main/java/org/dinky/data/model/TaskExtConfig.java
+++ b/dinky-admin/src/main/java/org/dinky/data/model/TaskExtConfig.java
@@ -19,8 +19,11 @@
 
 package org.dinky.data.model;
 
+import org.dinky.assertion.Asserts;
+
 import java.io.Serializable;
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@@ -54,7 +57,9 @@ public List<String> getCustomConfigKeys() {
 
     // 获取自定义配置的所有key-value
     public Map<String, String> getCustomConfigMaps() {
-        return customConfig.stream().collect(Collectors.toMap(ConfigItem::getKey, ConfigItem::getValue));
+        return Asserts.isNotNullCollection(customConfig)
+                ? customConfig.stream().collect(Collectors.toMap(ConfigItem::getKey, ConfigItem::getValue))
+                : new HashMap<>();
     }
 
     // 是否包含某个key
diff --git a/dinky-web/src/app.tsx b/dinky-web/src/app.tsx
index deadf7444e..993a743cc9 100644
--- a/dinky-web/src/app.tsx
+++ b/dinky-web/src/app.tsx
@@ -61,7 +61,6 @@ const queryUserInfo = async () => {
   return getDataByParamsReturnResult(API_CONSTANTS.CURRENT_USER).then(
     (result) => {
       const { user, roleList, tenantList, currentTenant, menuList, saTokenInfo } = result.datas;
-      extraRoutes = menuList;
       const currentUser: API.CurrentUser = {
         user: {
           ...user,
@@ -74,17 +73,10 @@ const queryUserInfo = async () => {
         tokenInfo: saTokenInfo
       };
       return currentUser;
-    },
-    (error) => {
-      history.push(loginPath);
-      console.log(error);
-      return undefined;
     }
   );
 };
 
-const fetchUserInfo = async () => await queryUserInfo();
-
 /**
  * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
  * */
@@ -94,10 +86,21 @@ export async function getInitialState(): Promise<{
   loading?: boolean;
   fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
 }> {
+
+  const fetchUserInfo = async () => {
+    try {
+      return await queryUserInfo();
+    } catch (error) {
+      history.push(loginPath);
+    }
+    return undefined;
+  };
+
   // 如果不是登录页面，执行
   const { location } = history;
   if (location.pathname !== loginPath) {
     const currentUser = await fetchUserInfo();
+    extraRoutes = currentUser?.menuList;
     return {
       fetchUserInfo,
       currentUser,
@@ -129,11 +132,11 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     rightContentRender: () => <RightContent />,
     footerRender: () => <Footer />,
     siderWidth: 180,
-    waterMarkProps: {
+    /*waterMarkProps: {
       content: initialState?.currentUser?.user.username + ' ' + new Date().toLocaleString(),
       fontColor:
         theme === THEME.light || undefined ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.15)'
-    },
+    },*/
     isChildrenLayout: true,
     onPageChange: () => {
       const { location } = history;
@@ -191,7 +194,7 @@ const patch = (oldRoutes: any, routes: SysMenu[]) => {
   oldRoutes[1].routes = oldRoutes[1].routes.map(
     (route: { routes: { path: any; element: JSX.Element }[]; path: string }) => {
       if (route.routes?.length) {
-        const redirect = routes.filter((r) => r.path.startsWith(route.path));
+        const redirect = routes?.filter((r) => r.path.startsWith(route.path));
         if (redirect.length) {
           route.routes.shift();
           route.routes.unshift({
@@ -217,11 +220,11 @@ export function patchClientRoutes({ routes }: { routes: SysMenu[] }) {
  * 路由切换并只加载首次
  */
 export function onRouteChange({
-  location,
-  clientRoutes,
-  routes,
-  action
-}: {
+                                location,
+                                clientRoutes,
+                                routes,
+                                action
+                              }: {
   location: any;
   clientRoutes: any;
   routes: any;
@@ -229,7 +232,7 @@ export function onRouteChange({
 }) {
   if (location.pathname !== loginPath && !rendered) {
     const filterMenus = (menus: SysMenu[]) => {
-      return menus.filter((menu) => menu.type !== 'F');
+      return menus?.filter((menu) => menu.type !== 'F');
     };
     extraRoutes = filterMenus(extraRoutes);
     patchClientRoutes({ routes: clientRoutes });
diff --git a/dinky-web/src/components/RightContent/index.tsx b/dinky-web/src/components/RightContent/index.tsx
index fe4b0b15a1..a6db184fd8 100644
--- a/dinky-web/src/components/RightContent/index.tsx
+++ b/dinky-web/src/components/RightContent/index.tsx
@@ -60,44 +60,38 @@ const GlobalHeaderRight: React.FC = () => {
   /**
    * css
    */
-  const actionClassName = useEmotionCss(({ token }) => {
-    return {
-      display: 'flex',
-      float: 'right',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '48px',
-      marginLeft: 'auto',
-      overflow: 'hidden',
-      cursor: 'pointer',
-      padding: '0 9px',
-      color: '#fff',
-      borderRadius: token.borderRadius,
-      '&:hover': {
-        backgroundColor: token.colorBgTextHover
-      }
-    };
-  });
+  const actionClassName = {
+    display: 'flex',
+    float: 'right',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '48px',
+    marginLeft: 'auto',
+    overflow: 'hidden',
+    cursor: 'pointer',
+    padding: '0 9px',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#fff'
+    }
+  };
 
   /**
    * full screen css
    */
-  const fullScreenClassName = useEmotionCss(({ token }) => {
-    return {
-      display: 'flex',
-      float: 'right',
-      height: '48px',
-      marginLeft: 'auto',
-      overflow: 'hidden',
-      cursor: 'pointer',
-      padding: '0 12px',
-      borderRadius: token.borderRadius,
-      color: 'red',
-      '&:hover': {
-        backgroundColor: token.colorPrimary
-      }
-    };
-  });
+  const fullScreenClassName = {
+    display: 'flex',
+    float: 'right',
+    height: '48px',
+    marginLeft: 'auto',
+    overflow: 'hidden',
+    cursor: 'pointer',
+    padding: '0 12px',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#fff'
+    }
+  };
 
   /**
    * full screen or exit full screen
@@ -110,8 +104,7 @@ const GlobalHeaderRight: React.FC = () => {
   };
 
   const fullScreenProps = {
-    style: { color: 'white' },
-    className: fullScreenClassName
+    style: fullScreenClassName
   };
 
   const menuVersion = l('menu.version', '', { version: VERSION });
@@ -129,9 +122,9 @@ const GlobalHeaderRight: React.FC = () => {
       </Tooltip>
       <Avatar />
       <Tooltip placement='bottom' title={<span>{menuVersion}</span>}>
-        <Space className={actionClassName}>{menuVersion}</Space>
+        <Space style={actionClassName}>{menuVersion}</Space>
       </Tooltip>
-      <SelectLang icon={<GlobalOutlined />} className={actionClassName} />
+      <SelectLang icon={<GlobalOutlined />} style={actionClassName} />
       <Switch
         key={'themeSwitch'}
         checked={theme === THEME.dark}
diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
index 794cefd414..51fd0de963 100644
--- a/dinky-web/src/global.less
+++ b/dinky-web/src/global.less
@@ -24,8 +24,8 @@ body,
   overflow-x: auto;
   overflow-y: auto;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
 }
 
 // .login-form style --- start ----
@@ -48,8 +48,8 @@ body,
 
 .logo {
   position: absolute;
-  top: -5vh;
-  left: -30vw;
+  top: 10vh;
+  left: 20vw;
   display: flex;
   flex: auto;
   flex-flow: column-reverse;
@@ -57,6 +57,8 @@ body,
 }
 
 .desc {
+  font-weight: 600;
+  font-size: 24px;
   margin-top: 2rem;
   margin-bottom: 1rem;
   //color: @text-color-secondary;
@@ -82,6 +84,7 @@ body,
     margin-bottom: -15vh;
     margin-left: 60vw;
     box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
+    border-radius: 10px;
   }
 
   .loginform {
@@ -244,18 +247,12 @@ ol {
     .ant-tree-node-content-wrapper {
       display: flex;
 
-      :hover {
-        color: #1eef07;
-      }
     }
   }
 }
 .ant-tree-node-content-wrapper {
   display: flex;
 
-  :hover {
-    color: #1eef07;
-  }
 }
 .gitCodeTree {
   min-height: 70vh;
@@ -381,7 +378,7 @@ h5 {
   justify-content: space-between;
   line-height: 32px;
   padding-inline: 10px;
-  padding-block: 5px;
+  padding-block: 1px;
   border-block: 1px solid;
 }
 
@@ -421,3 +418,4 @@ h5 {
   display: flex !important;
   align-items: baseline !important;
 }
+
diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
index d5918953ec..cb01c0d594 100644
--- a/dinky-web/src/locales/en-US/pages.ts
+++ b/dinky-web/src/locales/en-US/pages.ts
@@ -71,12 +71,14 @@ export default {
   'home.job.failed.name': 'Job Name',
   'home.job.failed.time': 'Abnormal Time',
   'home.develop': 'Data Develop',
+  'home.job.development': 'Development',
   'home.job.batch': 'Batch Job',
   'home.job.stream': 'Streaming Job',
   'home.job.total': 'Number of Jobs',
   'home.job.onlineRate': 'Number of Jobs Online Rate',
   'home.job.type': 'Job Type',
   'home.job.rate': 'Proportion of Jobs',
+  'home.develop.re': 'Resource Registration',
   'home.develop.re.ci': 'Flink Cluster Instance',
   'home.develop.re.cc': 'Cluster Configuration',
   'home.develop.re.ds': 'Data Source',
diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
index ff24761376..4566b8201e 100644
--- a/dinky-web/src/locales/zh-CN/pages.ts
+++ b/dinky-web/src/locales/zh-CN/pages.ts
@@ -68,12 +68,14 @@ export default {
   'home.job.failed.name': '任务名称',
   'home.job.failed.time': '已异常时间',
   'home.develop': ' 数据开发',
+  'home.job.development': '建设情况',
   'home.job.batch': '批作业',
   'home.job.stream': '流作业',
   'home.job.total': '作业数',
   'home.job.onlineRate': '作业上线率',
   'home.job.type': '作业类型',
   'home.job.rate': '作业占比',
+  'home.develop.re': '资源注册情况',
   'home.develop.re.ci': 'Flink 集群实例',
   'home.develop.re.cc': '集群配置',
   'home.develop.re.ds': '数据源',
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx
index f2a0bb0e3d..ef67ddfe1c 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx
@@ -125,7 +125,6 @@ const JobModal: React.FC<JobModalProps> = (props) => {
           name='note'
           label={l('catalog.note')}
           placeholder={l('catalog.note.placeholder')}
-          rules={[{ required: true, message: l('catalog.note.placeholder') }]}
         />
         {isUDF(jobType) && (
           <>
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx
index 289a95470d..aa6b48f68d 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx
@@ -41,7 +41,7 @@ export const buildProjectTree = (
   searchValue: string = '',
   path?: string[]
 ): any =>
-  data.map((item: Catalogue) => {
+  data?data.map((item: Catalogue) => {
     const currentPath = path ? [...path, item.name] : [item.name];
     return {
       // isLeaf: (item.type && item.children.length === 0) ,
@@ -60,7 +60,7 @@ export const buildProjectTree = (
       taskId: item.taskId,
       children: buildProjectTree(item.children, searchValue, currentPath)
     };
-  });
+  }):[];
 
 export const isUDF = (jobType: string) => {
   return jobType === 'Scala' || jobType === 'Python' || jobType === 'Java';
diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
index 7cc5945eea..ec71a30db4 100644
--- a/dinky-web/src/pages/DataStudio/index.tsx
+++ b/dinky-web/src/pages/DataStudio/index.tsx
@@ -49,6 +49,7 @@ import { Layout, Menu, Modal, theme, Typography } from 'antd';
 import { useEffect, useState } from 'react';
 import { PersistGate } from 'redux-persist/integration/react';
 import { connect, getDvaApp } from 'umi';
+import { PageContainer } from '@ant-design/pro-layout';
 
 const { Text } = Typography;
 
@@ -177,7 +178,7 @@ const DataStudio = (props: any) => {
         return false;
       }
 
-      if (JSON.stringify(res[key]) !== JSON.stringify(params.taskData[key])) {
+      if (res && JSON.stringify(res[key]) !== JSON.stringify(params.taskData[key])) {
         return true;
       }
     });
@@ -226,134 +227,136 @@ const DataStudio = (props: any) => {
   const access = useAccess();
 
   return (
-    <PersistGate loading={null} persistor={persist}>
-      <div style={{ marginInline: -10, marginBlock: -5 }}>
-        {/* 渲染 header */}
-        {renderHeaderContainer()}
-        <Layout hasSider style={{ minHeight: size.contentHeight, paddingInline: 0 }}>
-          {/*渲染左侧侧边栏*/}
-          <Sider collapsed collapsedWidth={40}>
-            <Menu
-              mode='inline'
-              selectedKeys={[leftContainer.selectKey]}
-              items={LeftSide.filter((x) =>
-                AuthorizedObject({ path: x.auth, children: x, access })
-              ).map((x) => ({
-                key: x.key,
-                label: x.label,
-                icon: x.icon
-              }))}
-              style={{
-                height: '50%',
-                borderBlockStart: `1px solid ${themeValue.borderColor}`,
-                borderInlineEnd: `1px solid ${themeValue.borderColor}`
-              }}
-              onClick={(item) =>
-                updateSelectLeftKey(item.key === leftContainer.selectKey ? '' : item.key)
-              }
-            />
-
-            {/*底部菜单*/}
-            <Menu
-              mode='inline'
-              selectedKeys={[bottomContainer.selectKey]}
-              items={LeftBottomSide.filter((x) =>
-                AuthorizedObject({ path: x.auth, children: x, access })
-              ).map((x) => ({
-                key: x.key,
-                label: x.label,
-                icon: x.icon
-              }))}
-              style={{
-                display: 'flex',
-                height: '50%',
-                flexDirection: 'column-reverse',
-                borderInlineEnd: `1px solid ${themeValue.borderColor}`
-              }}
-              onClick={(item) => {
-                updateSelectBottomKey(item.key === bottomContainer.selectKey ? '' : item.key);
-                if (
-                  bottomContainer.selectKey !== '' &&
-                  !bottomContainer.selectSubKey[item.key] &&
-                  LeftBottomMoreTabs[item.key]
-                ) {
-                  updateSelectBottomSubKey(LeftBottomMoreTabs[item.key][0].key);
+    <PageContainer title={false} breadcrumb={{ style: { display: 'none' } }}>
+      <PersistGate loading={null} persistor={persist}>
+        <div style={{ marginInline: -10, marginBlock: -5 }}>
+          {/* 渲染 header */}
+          {renderHeaderContainer()}
+          <Layout hasSider style={{ minHeight: size.contentHeight, paddingInline: 0 }}>
+            {/*渲染左侧侧边栏*/}
+            <Sider collapsed collapsedWidth={40}>
+              <Menu
+                mode='inline'
+                selectedKeys={[leftContainer.selectKey]}
+                items={LeftSide.filter((x) =>
+                  AuthorizedObject({ path: x.auth, children: x, access })
+                ).map((x) => ({
+                  key: x.key,
+                  label: x.label,
+                  icon: x.icon
+                }))}
+                style={{
+                  height: '50%',
+                  borderBlockStart: `1px solid ${themeValue.borderColor}`,
+                  borderInlineEnd: `1px solid ${themeValue.borderColor}`
+                }}
+                onClick={(item) =>
+                  updateSelectLeftKey(item.key === leftContainer.selectKey ? '' : item.key)
                 }
-              }}
-            />
-          </Sider>
-
-          <Content
-            style={{
-              flexDirection: 'column-reverse',
-              display: 'flex',
-              height: size.contentHeight
-            }}
-          >
-            {/*渲染底部内容*/}
-            {<BottomContainer size={size} />}
-
-            <div
+              />
+
+              {/*底部菜单*/}
+              <Menu
+                mode='inline'
+                selectedKeys={[bottomContainer.selectKey]}
+                items={LeftBottomSide.filter((x) =>
+                  AuthorizedObject({ path: x.auth, children: x, access })
+                ).map((x) => ({
+                  key: x.key,
+                  label: x.label,
+                  icon: x.icon
+                }))}
+                style={{
+                  display: 'flex',
+                  height: '50%',
+                  flexDirection: 'column-reverse',
+                  borderInlineEnd: `1px solid ${themeValue.borderColor}`
+                }}
+                onClick={(item) => {
+                  updateSelectBottomKey(item.key === bottomContainer.selectKey ? '' : item.key);
+                  if (
+                    bottomContainer.selectKey !== '' &&
+                    !bottomContainer.selectSubKey[item.key] &&
+                    LeftBottomMoreTabs[item.key]
+                  ) {
+                    updateSelectBottomSubKey(LeftBottomMoreTabs[item.key][0].key);
+                  }
+                }}
+              />
+            </Sider>
+
+            <Content
               style={{
+                flexDirection: 'column-reverse',
                 display: 'flex',
-                position: 'absolute',
-                top: VIEW.headerHeight,
-                width: size.width - VIEW.sideWidth * 2
+                height: size.contentHeight
               }}
             >
-              {renderLeftContainer()}
+              {/*渲染底部内容*/}
+              {<BottomContainer size={size} />}
 
-              <Content
+              <div
                 style={{
-                  width:
-                    size.width - 2 * VIEW.sideWidth - leftContainer.width - rightContainer.width
+                  display: 'flex',
+                  position: 'absolute',
+                  top: VIEW.headerHeight,
+                  width: size.width - VIEW.sideWidth * 2
                 }}
               >
-                <MiddleContainer />
-              </Content>
-
-              {renderRightContainer()}
-            </div>
-          </Content>
-
-          {/* 渲染右侧侧边栏 */}
-          <Sider collapsed collapsedWidth={40}>
-            <Menu
-              selectedKeys={[rightContainer.selectKey]}
-              mode='inline'
-              style={{
-                height: '100%',
-                borderInlineStart: `1px solid ${themeValue.borderColor}`,
-                borderBlockStart: `1px solid ${themeValue.borderColor}`
-              }}
-              items={RightSide.filter((x) =>
-                AuthorizedObject({ path: x.auth, children: x, access })
-              )
-                .filter((x) => {
-                  if (!x.isShow) {
-                    return true;
-                  }
-                  if (parseInt(tabs.activeKey) < 0) {
-                    return TabsPageType.None;
-                  }
-                  const v = (tabs.panes as TabsItemType[]).find(
-                    (item) => item.key === tabs.activeKey
-                  );
-                  return x.isShow(v?.type ?? TabsPageType.None, v?.subType);
-                })
-                .map((x) => {
-                  return { key: x.key, label: x.label, icon: x.icon };
-                })}
-              onClick={(item) =>
-                updateSelectRightKey(item.key === rightContainer.selectKey ? '' : item.key)
-              }
-            />
-          </Sider>
-        </Layout>
-        {/* 页脚 */}
-        {<FooterContainer token={token} />}
-      </div>
-    </PersistGate>
+                {renderLeftContainer()}
+
+                <Content
+                  style={{
+                    width:
+                      size.width - 2 * VIEW.sideWidth - leftContainer.width - rightContainer.width
+                  }}
+                >
+                  <MiddleContainer />
+                </Content>
+
+                {renderRightContainer()}
+              </div>
+            </Content>
+
+            {/* 渲染右侧侧边栏 */}
+            <Sider collapsed collapsedWidth={40}>
+              <Menu
+                selectedKeys={[rightContainer.selectKey]}
+                mode='inline'
+                style={{
+                  height: '100%',
+                  borderInlineStart: `1px solid ${themeValue.borderColor}`,
+                  borderBlockStart: `1px solid ${themeValue.borderColor}`
+                }}
+                items={RightSide.filter((x) =>
+                  AuthorizedObject({ path: x.auth, children: x, access })
+                )
+                  .filter((x) => {
+                    if (!x.isShow) {
+                      return true;
+                    }
+                    if (parseInt(tabs.activeKey) < 0) {
+                      return TabsPageType.None;
+                    }
+                    const v = (tabs.panes as TabsItemType[]).find(
+                      (item) => item.key === tabs.activeKey
+                    );
+                    return x.isShow(v?.type ?? TabsPageType.None, v?.subType);
+                  })
+                  .map((x) => {
+                    return { key: x.key, label: x.label, icon: x.icon };
+                  })}
+                onClick={(item) =>
+                  updateSelectRightKey(item.key === rightContainer.selectKey ? '' : item.key)
+                }
+              />
+            </Sider>
+          </Layout>
+          {/* 页脚 */}
+          {<FooterContainer token={token} />}
+        </div>
+      </PersistGate>
+    </PageContainer>
   );
 };
 
diff --git a/dinky-web/src/pages/Home/DevOverView/index.tsx b/dinky-web/src/pages/Home/DevOverView/index.tsx
index 94ca0520c8..0ebba16534 100644
--- a/dinky-web/src/pages/Home/DevOverView/index.tsx
+++ b/dinky-web/src/pages/Home/DevOverView/index.tsx
@@ -27,6 +27,11 @@ import { Badge } from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
 import React, { useState } from 'react';
 
+const noPadding = {
+  paddingInline: '0',
+  paddingBlock: '0'
+};
+
 const DevOverView: React.FC = () => {
   const [split, setSplit] = useState<'vertical' | 'horizontal' | undefined>('vertical');
 
@@ -48,9 +53,10 @@ const DevOverView: React.FC = () => {
         bordered
         size='small'
         split={split}
+        bodyStyle={noPadding}
       >
-        <ProCard split='vertical'>
-          <ProCard split='horizontal' colSpan={'40%'}>
+        <ProCard split='vertical' bodyStyle={noPadding}>
+          <ProCard title={l('home.job.development')} split='horizontal' colSpan={'40%'} bodyStyle={noPadding}>
             <ProCard>
               <BatchStreamProportion />
             </ProCard>
@@ -59,10 +65,10 @@ const DevOverView: React.FC = () => {
             </ProCard>
           </ProCard>
 
-          <ProCard colSpan={'30%'}>
+          <ProCard title={l('home.job.onlineRate')} colSpan={'30%'} bodyStyle={noPadding}>
             <TaskDialectRadar />
           </ProCard>
-          <ProCard>
+          <ProCard title={l('home.develop.re')} bodyStyle={noPadding}>
             <ResourceView />
           </ProCard>
         </ProCard>
diff --git a/dinky-web/src/pages/Home/JobOverView/JobErrorView/index.tsx b/dinky-web/src/pages/Home/JobOverView/JobErrorView/index.tsx
index 9b75bf76a8..666190e346 100644
--- a/dinky-web/src/pages/Home/JobOverView/JobErrorView/index.tsx
+++ b/dinky-web/src/pages/Home/JobOverView/JobErrorView/index.tsx
@@ -129,7 +129,7 @@ const JobErrorView: React.FC = () => {
       />
       <ProTable
         columns={columns}
-        scroll={{ y: 230 }}
+        scroll={{ y: 200 }}
         dataSource={data}
         search={false}
         toolBarRender={false}
diff --git a/dinky-web/src/pages/Home/JobOverView/index.tsx b/dinky-web/src/pages/Home/JobOverView/index.tsx
index d4d39a6571..8e1b38accb 100644
--- a/dinky-web/src/pages/Home/JobOverView/index.tsx
+++ b/dinky-web/src/pages/Home/JobOverView/index.tsx
@@ -23,11 +23,16 @@ import JobRecoveryView from '@/pages/Home/JobOverView/JobRecoveryView';
 import JobRunView from '@/pages/Home/JobOverView/JobRunView';
 import JobStatusPie from '@/pages/Home/JobOverView/JobStatusPie';
 import LoadScoreGauge from '@/pages/Home/JobOverView/LoadScoreGauge';
-import { l } from '@/utils/intl';
-import { ProCard } from '@ant-design/pro-components';
-import { Badge } from 'antd';
+import {l} from '@/utils/intl';
+import {ProCard} from '@ant-design/pro-components';
+import {Badge} from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
-import React, { useState } from 'react';
+import React, {useState} from 'react';
+
+const noPadding = {
+  paddingInline: '0',
+  paddingBlock: '0'
+};
 
 const JobOverView: React.FC = () => {
   const [split, setSplit] = useState<'vertical' | 'horizontal' | undefined>('vertical');
@@ -42,7 +47,7 @@ const JobOverView: React.FC = () => {
       <ProCard
         title={
           <>
-            <Badge status='processing' />
+            <Badge status='processing'/>
             {l('home.job.metrics')}
           </>
         }
@@ -50,29 +55,30 @@ const JobOverView: React.FC = () => {
         bordered
         size='small'
         split={split}
+        bodyStyle={noPadding}
       >
-        <ProCard split={split}>
+        <ProCard split={split} bodyStyle={noPadding}>
           <ProCard split='horizontal'>
-            <ProCard bodyStyle={{ padding: '0 12px' }}>
-              <JobRunView />
+            <ProCard bodyStyle={{padding: '0 12px'}}>
+              <JobRunView/>
             </ProCard>
-            <ProCard bodyStyle={{ padding: '0 12px' }}>
-              <JobFinishedView />
+            <ProCard bodyStyle={{padding: '0 12px'}}>
+              <JobFinishedView/>
             </ProCard>
-            <ProCard bodyStyle={{ padding: '0 12px' }}>
-              <JobRecoveryView />
+            <ProCard bodyStyle={{padding: '0 12px'}}>
+              <JobRecoveryView/>
             </ProCard>
           </ProCard>
-          <ProCard title={l('home.job.running.status')}>
-            <JobStatusPie />
+          <ProCard title={l('home.job.running.status')} bodyStyle={noPadding}>
+            <JobStatusPie/>
           </ProCard>
         </ProCard>
-        <ProCard split={split}>
-          <ProCard title={l('home.server.load')}>
-            <LoadScoreGauge />
+        <ProCard split={split} bodyStyle={noPadding}>
+          <ProCard title={l('home.server.load')} bodyStyle={noPadding}>
+            <LoadScoreGauge/>
           </ProCard>
-          <ProCard split='horizontal'>
-            <JobErrorView />
+          <ProCard split='horizontal' bodyStyle={noPadding}>
+            <JobErrorView/>
           </ProCard>
         </ProCard>
       </ProCard>
diff --git a/dinky-web/src/pages/Other/Login/LoginForm/MainWithStyle/index.tsx b/dinky-web/src/pages/Other/Login/LoginForm/MainWithStyle/index.tsx
index aa12ee06ec..80b1a44653 100644
--- a/dinky-web/src/pages/Other/Login/LoginForm/MainWithStyle/index.tsx
+++ b/dinky-web/src/pages/Other/Login/LoginForm/MainWithStyle/index.tsx
@@ -25,12 +25,9 @@ const MainWithStyle = (props: any) => {
 
   return (
     <div className={style.loginformMain} style={{ backgroundImage: `url('/icons/main-bg.svg')` }}>
-      <Scale>
-        <img className={style.logo} src={Settings.logo} />
-      </Scale>
+      <img className={style.logo} src={Settings.logo} />
       <div className={style.form}>
         <div className={style.top}>
-          <div className={style.header}>Dinky</div>
           <div className={style.desc}>{l('layouts.userLayout.title')}</div>
         </div>
         {children}
diff --git a/dinky-web/src/pages/RegCenter/Cluster/Configuration/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Configuration/index.tsx
index 3578e3288b..89efd6cd95 100644
--- a/dinky-web/src/pages/RegCenter/Cluster/Configuration/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Cluster/Configuration/index.tsx
@@ -17,16 +17,16 @@
  *
  */
 
-import Pop from '@/components/Animation/Pop';
+import SlowlyAppear from '@/components/Animation/SlowlyAppear';
 import ConfigurationList from '@/pages/RegCenter/Cluster/Configuration/components/ConfigurationList';
 import { PageContainer } from '@ant-design/pro-components';
 
 export default () => {
   return (
-    <Pop>
+    <SlowlyAppear>
       <PageContainer title={false}>
         <ConfigurationList />
       </PageContainer>
-    </Pop>
+    </SlowlyAppear>
   );
 };
diff --git a/dinky-web/src/pages/RegCenter/Cluster/Instance/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Instance/index.tsx
index faa751dddc..bf0fbfc020 100644
--- a/dinky-web/src/pages/RegCenter/Cluster/Instance/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Cluster/Instance/index.tsx
@@ -17,16 +17,16 @@
  *
  */
 
-import Pop from '@/components/Animation/Pop';
+import SlowlyAppear from '@/components/Animation/SlowlyAppear';
 import InstanceList from '@/pages/RegCenter/Cluster/Instance/components/InstanceList';
 import { PageContainer } from '@ant-design/pro-components';
 
 export default () => {
   return (
-    <Pop>
+    <SlowlyAppear>
       <PageContainer title={false}>
         <InstanceList />
       </PageContainer>
-    </Pop>
+    </SlowlyAppear>
   );
 };
diff --git a/dinky-web/src/pages/RegCenter/DataSource/index.tsx b/dinky-web/src/pages/RegCenter/DataSource/index.tsx
index 0faaac3429..40db77c47f 100644
--- a/dinky-web/src/pages/RegCenter/DataSource/index.tsx
+++ b/dinky-web/src/pages/RegCenter/DataSource/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import Pop from '@/components/Animation/Pop';
+import SlowlyAppear from '@/components/Animation/SlowlyAppear';
 import DataSourceTable from '@/pages/RegCenter/DataSource/components/DataSourceList';
 import { PageContainer } from '@ant-design/pro-components';
 
@@ -24,10 +24,10 @@ import { PageContainer } from '@ant-design/pro-components';
  */
 export default () => {
   return (
-    <Pop>
+    <SlowlyAppear>
       <PageContainer title={false}>
         <DataSourceTable />
       </PageContainer>
-    </Pop>
+    </SlowlyAppear>
   );
 };
diff --git a/dinky-web/src/pages/RegCenter/Resource/index.tsx b/dinky-web/src/pages/RegCenter/Resource/index.tsx
index ab2ac87fa2..af6fe84725 100644
--- a/dinky-web/src/pages/RegCenter/Resource/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Resource/index.tsx
@@ -17,16 +17,16 @@
  *
  */
 
-import Scale from '@/components/Animation/Scale';
+import SlowlyAppear from '@/components/Animation/SlowlyAppear';
 import ResourceOverView from '@/pages/RegCenter/Resource/components/ResourceOverView';
 import { PageContainer } from '@ant-design/pro-components';
 
 export default () => {
   return (
-    <Scale>
+    <SlowlyAppear>
       <PageContainer breadcrumb={{ style: { display: 'none' } }} title={false}>
         <ResourceOverView />
       </PageContainer>
-    </Scale>
+    </SlowlyAppear>
   );
 };
diff --git a/dinky-web/src/pages/SettingCenter/GlobalSetting/index.tsx b/dinky-web/src/pages/SettingCenter/GlobalSetting/index.tsx
index c8d09f9568..927d94ec4a 100644
--- a/dinky-web/src/pages/SettingCenter/GlobalSetting/index.tsx
+++ b/dinky-web/src/pages/SettingCenter/GlobalSetting/index.tsx
@@ -17,13 +17,14 @@
 
 import SettingOverView from '@/pages/SettingCenter/GlobalSetting/SettingOverView';
 import { PageContainer } from '@ant-design/pro-components';
+import SlowlyAppear from "@/components/Animation/SlowlyAppear";
 
 export default () => {
   return (
-    <>
+    <SlowlyAppear>
       <PageContainer title={false}>
         <SettingOverView />
       </PageContainer>
-    </>
+    </SlowlyAppear>
   );
 };