feat: Tidy directory structure (#1456)

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

threadpool/console-new/.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-echo "pre-commit";
-npm run lint;

threadpool/console-new/craco.config.js

@@ -39,11 +39,8 @@ module.exports = {
     },
   },
   devServer: {
-    // 本地服务的端口号
     port: 3001,
-    // 本地服务的响应头设置
     headers: {
-      // 允许跨域
       'Access-Control-Allow-Origin': '*',
     },
   },

threadpool/console-new/package.json

@@ -19,8 +19,7 @@
     "build": "craco build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint -c .eslintrc.js src --ext .ts,.tsx,.js,.jsx --fix",
+    "lint": "eslint -c .eslintrc.js src --ext .ts,.tsx,.js,.jsx --fix"
-    "prepare": "husky install"
   },
   "eslintConfig": {
     "extends": [
@@ -42,6 +41,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
+    "@types/http-errors": "^2.0.1",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.26",
     "@types/react": "^18.2.6",

threadpool/console-new/src/App.tsx

@@ -1,7 +1,31 @@
 import LayoutCom from './components/layout-com';
+import { Routes, Route } from 'react-router-dom';
+import routeList from './route';
+import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
 
-function App() {
+const sideMenuList = [
-  return <LayoutCom></LayoutCom>;
+  {
-}
+    label: <a href="/about">about</a>,
+    key: 'mail',
+    icon: <MailOutlined />,
+  },
+  {
+    label: <a href="/home">主页</a>,
+    key: 'app',
+    icon: <AppstoreOutlined />,
+  },
+];
+
+const App = () => {
+  return (
+    <LayoutCom sideMenuList={sideMenuList} isSider={false}>
+      <Routes>
+        {routeList.map(item => (
+          <Route key={item.path} path={item.path} Component={item.component} />
+        ))}
+      </Routes>
+    </LayoutCom>
+  );
+};
 
 export default App;

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

@@ -6,17 +6,13 @@
     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);
-    // flex-direction: column;
-    // justify-content: center;
     padding-top: 24px;
   }
   .content {
     margin: 10px 10px 0px;
     border-radius: 12px 12px 0 0;
-    padding: 16px 24px;
+    min-height: 100%;
-    height: 100%;
     flex: 1;
   }
 }

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

@@ -1,97 +1,25 @@
-import React, { useEffect, useState, useContext } from 'react';
+import { useState, useContext, ReactNode } from 'react';
 import { DefaultTheme, ThemeContext } from 'styled-components';
-
+import { Layout, Button, Menu } from 'antd';
-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';
-import style from './index.module.less';
-import TableBox from '../table';
-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';
+import { IMenuList } from '@/typings';
+import style from './index.module.less';
 
 const { Header, Sider, Content } = Layout;
 
-interface ThemeProps {
+interface ILayoutCom {
-  children: React.ReactNode;
+  children?: ReactNode;
+  sideMenuList: IMenuList[];
+  isSider?: boolean;
 }
-
+const LayoutCom = (props: ILayoutCom) => {
-const items = [
+  const { sideMenuList, children, isSider = true } = props;
-  {
-    label: <a href="/about">Navigation One</a>,
-    key: 'mail',
-    icon: <MailOutlined />,
-  },
-  {
-    label: 'Navigation Two',
-    key: 'app',
-    icon: <AppstoreOutlined />,
-    disabled: true,
-  },
-  {
-    label: <a href="/about">Navigation One</a>,
-    key: 'app',
-    icon: <AppstoreOutlined />,
-  },
-  {
-    label: 'Navigation Three - Submenu',
-    key: 'SubMenu',
-    icon: <SettingOutlined />,
-    children: [
-      {
-        type: 'group',
-        label: 'Item 1',
-        children: [
-          {
-            label: 'Option 1',
-            key: 'setting:1',
-          },
-          {
-            label: 'Option 2',
-            key: 'setting:2',
-          },
-        ],
-      },
-      {
-        type: 'group',
-        label: 'Item 2',
-        children: [
-          {
-            label: 'Option 3',
-            key: 'setting:3',
-          },
-          {
-            label: 'Option 4',
-            key: 'setting:4',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: (
-      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-        Navigation Four - Link
-      </a>
-    ),
-    key: 'alipay',
-  },
-];
-
-const LayoutCom = () => {
   const myThemes: DefaultTheme = useContext<any>(ThemeContext);
   const [current, setCurrent] = useState('mail');
   const onClick = (e: any) => {
     setCurrent(e.key);
   };
-  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.bg2 }}>
@@ -100,18 +28,10 @@ const LayoutCom = () => {
       <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} />
+            <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={sideMenuList} />
           </Sider>
         )}
-        <Content className={style.content}>
+        <Content className={style.content}>{children}</Content>
-          <Routes>
-            <Route path="/Search" Component={Search}></Route>
-            <Route path="/Table" Component={TableBox}></Route>
-            <Route path="/Login" Component={Login}></Route>
-            <Route path="/home" Component={Home}></Route>
-            <Route path="/about" Component={About}></Route>
-          </Routes>
-        </Content>
       </Layout>
     </main>
   );

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

@@ -1,22 +1,3 @@
 body {
   background-color: #ebebf2;
 }
-.container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #ebebf2;
-  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 {
-    height: calc(100vh - 48px);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .content {
-    margin: 24px;
-  }
-}

threadpool/console-new/src/index.tsx

@@ -11,9 +11,9 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      {/* 全局配置主体context */}
+      {/* theme context */}
       <ThemeStore>
-        {/* 提供主体色配置 */}
+        {/* theme config context */}
         <ThemeComponent>
           <App />
         </ThemeComponent>

threadpool/console-new/src/page/about/router.tsx

@@ -0,0 +1,11 @@
+import { IRouterList } from '@/typings';
+import About from '.';
+
+const routerList: IRouterList[] = [
+  {
+    path: '/about',
+    component: About,
+  },
+];
+
+export default routerList;

threadpool/console-new/src/page/home/router.tsx

@@ -0,0 +1,5 @@
+import Home from './index';
+import { IRouterList } from '@/typings';
+
+const routerList: IRouterList[] = [{ path: '/home', component: Home }];
+export default routerList;

threadpool/console-new/src/react-app-env.d.ts

@@ -1,88 +1,2 @@
 /// <reference types="react-scripts" />
 declare module '*.less';
-// import { DefaultTheme } from 'styled-components'
- 
-// export const lightDefaultTheme: DefaultTheme = {
-//     primary: "#3495EE",
- 
-//     baseColor: {
-//         // 前两个是固定的，用于，有颜色按钮 字体颜色等固定不会变的颜色值
-//         bc1: "#fff",
-//         bc2: "#000000",
-//         bc3: "#ED2D00",
-//         bc4: "#10CC55",
-//         bc5: "#3094f1",
-//     },
-//     fontColor: {
-//         fc1: "#333",
-//         fc2: "#000",
-//         fc3: "#666",
-//         fc4: '#D2E0F4',
-//         fc5: "#000000",
-//         fc6: "#FFFFFF",
-//     },
-//     borderColor: {
-//         bl1: "#E2E2E2",
-//         bl2: "#d8dbe2",
-//         bl3: "#B5BDCE",
-//     },
-//     backgroundColor: {
-//         bg1: "#FFFFFF",
-//         bg2: "#EEEFF4",
-//         // title的及表格头部背景极
-//         bg3: "#EDEDED",
-//         bg5: "#F8F8F8",
-//         bg4: "#F6F6F6",
-//         bg6: "rgba(0, 0, 0, 0.70)",
-//     },
-//     hoverColor: {
-//         hc1: 'rgba(24, 144, 255, 0)',
-//         // 表格的hover及选 中
-//         hc2: '#F5F8FA'
-//     }
-// }
- 
-// export const darkDefaultTheme: DefaultTheme = {
-//     primary: "#177DDC",
-//     baseColor: {
-//         bc1: "#fff",
-//         bc2: "#000000",
-//         bc3: "#FF3D3D",
-//         bc4: "#10CC55",
-//         bc5: "#3094f1",
-//         // 固定为白色，有颜色按钮文字颜色  fixedcolor
-//     },
-//     fontColor: {
-//         fc1: "#ffffff",
-//         fc2: "#B4B6B8",
-//         fc3: "#555555",
-//         fc4: '#666666',
-//         fc5: "#FFFFFF",
-//         fc6: "#FFFFFF",
-//     },
-//     borderColor: {
-//         bl1: "#6A6A6A",
-//         bl2: "#4A4B51",
-//         bl3: "#424242",
- 
-//     },
-//     backgroundColor: {
-//         // 大面积色
-//         bg1: "#1C1D21",
-//         // tab顶部颜色
-//         bg2: "#323337",
-//         // title 颜色
-//         bg3: "#2A2B2E",
-//         bg5: "#4A4B51",
-//         // 菜单选中
-//         bg4: "#0F3C66",
-//         //  锁定背景色
-//         bg6: "rgba(255, 255, 255, 0.70)",
-//         // bg3: "rgba(255, 255, 255, 0.70)",
-//         // bg4: "rgba(250, 250, 250, 1)",
-//     },
-//     hoverColor: {
-//         hc1: 'rgba(24, 144, 255, 0)',
-//         hc2: '#2A2B2E'
-//     }
-// }

threadpool/console-new/src/route/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import { IRouterList } from '@/typings';
+import homeRouter from '@/page/home/router';
+import aboutRouter from '@/page/about/router';
 
-const Fc = () => {
+const routerList: IRouterList[] = [...homeRouter, ...aboutRouter];
-  return <div>hhh</div>;
+export default routerList;
-};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import React from 'react';
+
+export type IRouterList = {
+  path: string;
+  component: () => React.JSX.Element;
+};
+
+export type IMenuList = {
+  label: string | ReactNode;
+  key: string;
+  icon?: ReactNode;
+};