feat: Tidy up front end layout (#1454)

Co-authored-by: yikai <yikai@didiglobal.com>

threadpool/console-new/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ahooks": "^3.7.8",
     "antd": "^5.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

threadpool/console-new/src/components/layout-com/index.module.less

@@ -1,19 +1,22 @@
 .container {
   width: 100vw;
   height: 100vh;
-  background-color: #eee;
-  color: #fff;
   .header {
     height: 48px;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
   }
   .sider {
+    // display: flex;
     height: calc(100vh - 48px);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    // flex-direction: column;
+    // justify-content: center;
+    padding-top: 24px;
   }
   .content {
-    margin: 24px;
+    margin: 10px 10px 0px;
+    border-radius: 12px 12px 0 0;
+    padding: 16px 24px;
+    height: 100%;
+    flex: 1;
   }
 }

threadpool/console-new/src/components/layout-com/index.tsx

@@ -3,6 +3,7 @@ import { DefaultTheme, ThemeContext } from 'styled-components';
 
 import { Layout, Button, Menu, Table } from 'antd';
 import { Routes, Route, Link } from 'react-router-dom';
+import { useLocalStorageState } from 'ahooks';
 import Home from '@/page/home';
 import About from '@/page/about';
 import Login from '@/page/login';
@@ -12,6 +13,7 @@ import Search from '@/page/search';
 
 import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
 import { THEME_NAME, MyThemeContext } from '@/context/themeContext';
+import useThemeMode from '@/hooks/useThemeMode';
 
 const { Header, Sider, Content } = Layout;
 
@@ -83,27 +85,24 @@ const items = [
 
 const LayoutCom = () => {
   const myThemes: DefaultTheme = useContext<any>(ThemeContext);
-  const { themeName, setThemeName } = useContext<any>(MyThemeContext);
   const [current, setCurrent] = useState('mail');
   const onClick = (e: any) => {
-    console.log('click ', e);
     setCurrent(e.key);
   };
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT);
-  }, [isDark, setThemeName]);
+  const [isSider, setIsSider] = useState(true);
+  const [setIsDark] = useThemeMode();
 
   return (
     <main className={style.container} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
-      <Header className={style.header} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
+      <Header className={style.header} style={{ backgroundColor: myThemes.backgroundColor.bg2 }}>
         <Button onClick={() => setIsDark(pre => !pre)}>切换主题</Button>
       </Header>
-      <Layout>
-        <Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
-          <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={items} />
-        </Sider>
+      <Layout style={{ backgroundColor: myThemes.backgroundColor.bg1, height: 'calc(100vh - 64px)' }}>
+        {isSider && (
+          <Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
+            <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={items} />
+          </Sider>
+        )}
         <Content className={style.content}>
           <Routes>
             <Route path="/Search" Component={Search}></Route>

threadpool/console-new/src/hooks/useThemeMode.tsx

@@ -0,0 +1,16 @@
+import { useContext, useEffect } from 'react';
+import { useLocalStorageState } from 'ahooks';
+import { MyThemeContext, THEME_NAME } from '@/context/themeContext';
+
+const useThemeMode = () => {
+  const [isDark, setIsDark] = useLocalStorageState<boolean>('current-mode', { defaultValue: false });
+  const { setThemeName } = useContext<any>(MyThemeContext);
+
+  useEffect(() => {
+    isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT);
+  }, [isDark, setThemeName]);
+
+  return [setIsDark];
+};
+
+export default useThemeMode;

threadpool/console-new/src/index.module.less

@@ -1,7 +1,10 @@
+body {
+  background-color: #ebebf2;
+}
 .container {
   width: 100vw;
   height: 100vh;
-  background-color: #eee;
+  background-color: #ebebf2;
   color: #fff;
   .header {
     height: 48px;

threadpool/console-new/src/theme/dark-algorithm.ts

@@ -28,6 +28,15 @@ export const darkAlgorithm = {
       paddingContentHorizontalLG: 0,
       paddingMD: 0,
     },
+    Menu: {
+      itemBg: darkDefaultTheme.backgroundColor.bg1,
+      activeBarWidth: 0,
+      activeBarHeight: 0,
+      activeBarBorderWidth: 0,
+      subMenuItemBorderRadius: 8,
+      horizontalItemBorderRadius: 8,
+      itemBorderRadius: 8,
+    },
   },
   algorithm: theme.darkAlgorithm,
 };

threadpool/console-new/src/theme/default-algnorithm.ts

@@ -29,6 +29,15 @@ export const defaultAlgorithm = {
       paddingContentHorizontalLG: 0,
       paddingMD: 0,
     },
+    Menu: {
+      itemBg: lightDefaultTheme.backgroundColor.bg1,
+      activeBarWidth: 0,
+      activeBarHeight: 0,
+      activeBarBorderWidth: 0,
+      subMenuItemBorderRadius: 8,
+      horizontalItemBorderRadius: 8,
+      itemBorderRadius: 8,
+    },
   },
   algorithm: theme.defaultAlgorithm,
 };

threadpool/console-new/src/theme/index.ts

@@ -2,7 +2,6 @@ import { DefaultTheme } from 'styled-components';
 
 export const lightDefaultTheme: DefaultTheme = {
   primary: '#0d68a8',
-
   baseColor: {
     // 前两个是固定的，用于，有颜色按钮 字体颜色等固定不会变的颜色值
     bc1: '#fff',
@@ -25,8 +24,10 @@ export const lightDefaultTheme: DefaultTheme = {
     bl3: '#B5BDCE',
   },
   backgroundColor: {
-    bg1: '#FFFFFF',
-    bg2: '#EEEFF4',
+    // main bgc
+    bg1: '#ebebf2',
+    // app or head bgc
+    bg2: '#fff',
     // title的及表格头部背景极
     bg3: '#EDEDED',
     bg5: '#F8F8F8',