Feat oe thread pool (#1468)

* feat: thread pool * feat: remove yarnloack --------- Co-authored-by: yikai <[email protected]>
opengoofy · Sep 17, 2023 · 35cf5d8 · 35cf5d8
1 parent ac3cb9a
commit 35cf5d8
Show file tree

Hide file tree

Showing 23 changed files with 458 additions and 86 deletions.
diff --git a/threadpool/console-new/craco.config.js b/threadpool/console-new/craco.config.js
@@ -41,7 +41,6 @@ module.exports = {
   webpack: {
     alias: {
       '@': resolve('src'),
-      '@i18': resolve('public/locales'),
     },
   },
   devServer: {

diff --git a/threadpool/console-new/package.json b/threadpool/console-new/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ahooksjs/use-url-state": "^3.5.1",
     "@ant-design/icons": "^5.2.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

diff --git a/threadpool/console-new/public/locales/en.json b/threadpool/console-new/public/locales/en.json
diff --git a/threadpool/console-new/public/locales/zh.json b/threadpool/console-new/public/locales/zh.json
diff --git a/threadpool/console-new/src/App.tsx b/threadpool/console-new/src/App.tsx
@@ -1,25 +1,29 @@
 import LayoutCom from './components/layout-com';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, Link } from 'react-router-dom';
+
 import routeList from './route';
 import Login from '@/page/login';
-import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
+import { MenuProps } from 'antd';
+import { useTran } from './hooks';
+import { STR_MAP } from './config/i18n/locales/constants';
+import IconFont from './components/icon';
 
-const sideMenuList = [
-  {
-    label: <a href="/about">about</a>,
-    key: 'mail',
-    icon: <MailOutlined />,
-  },
-  {
-    label: <a href="/home">主页</a>,
-    key: 'app',
-    icon: <AppstoreOutlined />,
-  },
-];
+type MenuItem = Required<MenuProps>['items'][number];
 
 const App = () => {
+  const sideMenuList: MenuItem[] = [
+    {
+      label: useTran(STR_MAP.DYNAMIC_THREAD_POOL),
+      key: STR_MAP.DYNAMIC_THREAD_POOL,
+      icon: <IconFont type="icon-hot-for-ux"></IconFont>,
+      children: [
+        { label: <Link to={'/thread-poll/index'}>{useTran(STR_MAP.THREAD_POOL)}</Link>, key: '/thread-poll/index' },
+      ],
+    },
+  ];
+
   return (
-    <LayoutCom sideMenuList={sideMenuList} isSider={false}>
+    <LayoutCom sideMenuList={sideMenuList} isSider={true} isHeader={true}>
       <Routes>
         <Route path="/Login" Component={Login}></Route>
         {routeList.map(item => (

diff --git a/threadpool/console-new/src/components/header/index.tsx b/threadpool/console-new/src/components/header/index.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import style from './index.module.less';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Col, Dropdown, Row, Switch, Tag } from 'antd';
-import useThemeMode from '@/hooks/useThemeMode';
+import { Avatar, Button, Col, Dropdown, Row, Switch } from 'antd';
+import { useThemeMode } from '@/hooks';
 import { MyContext } from '@/context';
 import IconFont from '@/components/icon';
 

diff --git a/threadpool/console-new/src/components/icon/index.tsx b/threadpool/console-new/src/components/icon/index.tsx
@@ -5,7 +5,7 @@ interface Props {
 }
 
 const MyIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4254722_1xl4w1k5c53.js', // 在 iconfont.cn 上生成
+  scriptUrl: '//at.alicdn.com/t/c/font_4254722_3l4m6by7h34.js', // 在 iconfont.cn 上生成
 });
 
 const IconFont = (props: Props) => {

diff --git a/threadpool/console-new/src/components/layout-com/index.module.less b/threadpool/console-new/src/components/layout-com/index.module.less
@@ -9,14 +9,13 @@
     align-items: center;
   }
   .sider {
-    height: calc(100vh - 48px);
     padding-top: 24px;
   }
   .content {
     margin: 10px 10px 0px;
     border-radius: 12px 12px 0 0;
-    min-height: 100%;
     flex: 1;
-    padding: 10px 12px;
+    padding: 16px;
+    overflow-y: auto;
   }
 }
diff --git a/threadpool/console-new/src/components/layout-com/index.tsx b/threadpool/console-new/src/components/layout-com/index.tsx
@@ -1,37 +1,63 @@
-import { useState, useContext, ReactNode } from 'react';
+import { useState, useContext, ReactNode, useEffect } from 'react';
 import { DefaultTheme, ThemeContext } from 'styled-components';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, MenuProps } from 'antd';
 import HeaderChild from '../header';
-import { IMenuList } from '@/typings';
 import style from './index.module.less';
+import { useLocation } from 'react-router-dom';
+import { useThemeMode } from '@/hooks';
+type MenuItem = Required<MenuProps>['items'][number];
 
 const { Header, Sider, Content } = Layout;
 
 interface ILayoutCom {
   children?: ReactNode;
-  sideMenuList: IMenuList[];
+  sideMenuList: MenuItem[];
   isSider?: boolean;
+  isHeader?: boolean;
 }
 const LayoutCom = (props: ILayoutCom) => {
-  const { sideMenuList, children, isSider = true } = props;
+  const { sideMenuList, children, isSider = true, isHeader = true } = props;
   const myThemes: DefaultTheme = useContext<any>(ThemeContext);
-  const [current, setCurrent] = useState('mail');
+  const [currentKey, setCurrentKey] = useState<string>('');
+  const { isDark } = useThemeMode();
+
+  const location = useLocation();
+  useEffect(() => {
+    setCurrentKey(location.pathname);
+  }, [location]);
+
   const onClick = (e: any) => {
-    setCurrent(e.key);
+    setCurrentKey(e.key);
   };
 
+  useEffect(() => {
+    document.body.style.backgroundColor = myThemes.backgroundColor.bg1;
+  }, [isDark, myThemes]);
+
   return (
     <main className={style.container} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
-      <Header className={style.header}>
-        <HeaderChild />
-      </Header>
-      <Layout style={{ backgroundColor: myThemes.backgroundColor.bg1, height: 'calc(100vh - 64px)' }}>
+      {isHeader && (
+        <Header className={style.header}>
+          <HeaderChild />
+        </Header>
+      )}
+      <Layout
+        style={{ backgroundColor: myThemes.backgroundColor.bg1, height: `calc(100vh - ${isHeader ? '64px' : 0})` }}
+      >
         {isSider && (
-          <Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
-            <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={sideMenuList} />
+          <Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }} collapsible>
+            <Menu onClick={onClick} selectedKeys={[currentKey]} mode="inline" items={sideMenuList} />
           </Sider>
         )}
-        <Content className={style.content}>{children}</Content>
+        <Content
+          className={style.content}
+          style={{
+            backgroundColor: myThemes.backgroundColor.bgContent,
+            height: `calc(100vh - ${isHeader ? '64px' : 0})`,
+          }}
+        >
+          {children}
+        </Content>
       </Layout>
     </main>
   );

diff --git a/threadpool/console-new/src/config/i18n/locales/constants.ts b/threadpool/console-new/src/config/i18n/locales/constants.ts
@@ -0,0 +1,20 @@
+export enum STR_MAP {
+  DYNAMIC_THREAD_POOL = 'dynamicThreadPool',
+  THREAD_POOL_MANAGE = 'threadPoolManage',
+  PROJECT = 'project',
+  SEARCH = 'search',
+  ADD = 'add',
+  SERIAL_NUMBER = 'serialNumber',
+  TENANTRY = 'tenantry',
+  THREAD_POOL = 'threadPool',
+  CORE_THREAD = 'coreThread',
+  MAXIMUM_THREAD = 'maximumThread',
+  QUEUE_TYPE = 'queueType',
+  QUEUE_CAPACITY = 'queueCapacity',
+  REJECTION_STRATEGY = 'rejectionStrategy',
+  EXECUTION_TIMEOUT = 'executionTimeout',
+  ALARM_OR_NOT = 'alarmOrNot',
+  CREATION_TIME = 'creationTime',
+  UPDATE_TIME = 'update time',
+  EDIT = 'edit',
+}
diff --git a/threadpool/console-new/src/config/i18n/locales/en.ts b/threadpool/console-new/src/config/i18n/locales/en.ts
@@ -1,5 +1,24 @@
+import { STR_MAP } from './constants';
+
 const enTranslationMap: { [key: string]: string } = {
-  hello: 'hello',
+  [STR_MAP.DYNAMIC_THREAD_POOL]: 'Dynamic thread pool',
+  [STR_MAP.THREAD_POOL_MANAGE]: 'Thread pool management',
+  [STR_MAP.PROJECT]: 'project',
+  [STR_MAP.SEARCH]: 'search',
+  [STR_MAP.ADD]: 'add',
+  [STR_MAP.SERIAL_NUMBER]: 'number',
+  [STR_MAP.TENANTRY]: 'tenantry',
+  [STR_MAP.THREAD_POOL]: 'thread pool',
+  [STR_MAP.CORE_THREAD]: 'core thread',
+  [STR_MAP.MAXIMUM_THREAD]: 'maximum thread',
+  [STR_MAP.QUEUE_TYPE]: 'queue type',
+  [STR_MAP.QUEUE_CAPACITY]: 'queue capacity',
+  [STR_MAP.REJECTION_STRATEGY]: 'rejection strategy',
+  [STR_MAP.EXECUTION_TIMEOUT]: 'execution timeout',
+  [STR_MAP.ALARM_OR_NOT]: 'alarm or not',
+  [STR_MAP.CREATION_TIME]: 'creation time',
+  [STR_MAP.UPDATE_TIME]: 'update time',
+  [STR_MAP.EDIT]: 'edit',
 };
 
 export default enTranslationMap;
diff --git a/threadpool/console-new/src/config/i18n/locales/zh.ts b/threadpool/console-new/src/config/i18n/locales/zh.ts
@@ -1,5 +1,24 @@
+import { STR_MAP } from './constants';
+
 const zhTranslationMap: { [key: string]: string } = {
-  hello: '你好',
+  [STR_MAP.DYNAMIC_THREAD_POOL]: '动态线程池',
+  [STR_MAP.THREAD_POOL_MANAGE]: '线程池管理',
+  [STR_MAP.PROJECT]: '项目',
+  [STR_MAP.SEARCH]: '搜索',
+  [STR_MAP.ADD]: '添加',
+  [STR_MAP.SERIAL_NUMBER]: '序号',
+  [STR_MAP.TENANTRY]: '租户',
+  [STR_MAP.THREAD_POOL]: '线程池',
+  [STR_MAP.CORE_THREAD]: '核心线程',
+  [STR_MAP.MAXIMUM_THREAD]: '最大线程',
+  [STR_MAP.QUEUE_TYPE]: '队列类型',
+  [STR_MAP.QUEUE_CAPACITY]: '队列容量',
+  [STR_MAP.REJECTION_STRATEGY]: '拒绝策略',
+  [STR_MAP.EXECUTION_TIMEOUT]: '执行超时',
+  [STR_MAP.ALARM_OR_NOT]: '是否报警',
+  [STR_MAP.CREATION_TIME]: '创建时间',
+  [STR_MAP.UPDATE_TIME]: '更新时间',
+  [STR_MAP.EDIT]: '操作',
 };
 
 export default zhTranslationMap;
diff --git a/threadpool/console-new/src/config/theme/dark-algorithm.ts b/threadpool/console-new/src/config/theme/dark-algorithm.ts
@@ -4,25 +4,28 @@ export const darkAlgorithm = {
   token: {
     colorPrimary: darkDefaultTheme.primary,
     fontSize: 14,
+    fontSizeHeading1: 18,
   },
   components: {
     Layout: {
       bodyBg: darkDefaultTheme.backgroundColor.bg1,
       headerBg: darkDefaultTheme.backgroundColor.bgHeader,
+      triggerBg: darkDefaultTheme.backgroundColor.bg1,
+      triggerColor: darkDefaultTheme.fontColor.fc1,
     },
     Button: {
-      fontSize: 14,
+      // fontSize: 14,
+    },
+    Table: {
+      // borderRadius: 0,
+      // borderRadiusLG: 0,
+      // padding: 10,
+      // paddingXS: 5,
+      // margin: 0,
+      // fontSize: 14,
+      // colorBorderSecondary: darkDefaultTheme.borderColor.bl1,
+      // paddingContentVerticalLG: 4,
     },
-    // Table: {
-    //   borderRadius: 0,
-    //   borderRadiusLG: 0,
-    //   padding: 10,
-    //   paddingXS: 5,
-    //   margin: 0,
-    //   fontSize: 14,
-    //   colorBorderSecondary: darkDefaultTheme.borderColor.bl1,
-    //   paddingContentVerticalLG: 4,
-    // },
     Modal: {
       borderRadiusLG: 2,
       borderRadiusSM: 2,
@@ -33,12 +36,14 @@ export const darkAlgorithm = {
     },
     Menu: {
       itemBg: darkDefaultTheme.backgroundColor.bg1,
+      // itemSelectedBg: darkDefaultTheme.primary,
+      // itemSelectedColor: darkDefaultTheme.fontColor.fc1,
       activeBarWidth: 0,
       activeBarHeight: 0,
       activeBarBorderWidth: 0,
-      subMenuItemBorderRadius: 8,
-      horizontalItemBorderRadius: 8,
-      itemBorderRadius: 8,
+      // subMenuItemBorderRadius: 8,
+      // horizontalItemBorderRadius: 8,
+      // itemBorderRadius: 8,
     },
   },
   algorithm: theme.darkAlgorithm,

diff --git a/threadpool/console-new/src/config/theme/default-algnorithm.ts b/threadpool/console-new/src/config/theme/default-algnorithm.ts
@@ -4,41 +4,45 @@ export const defaultAlgorithm = {
   token: {
     colorPrimary: lightDefaultTheme.primary,
     fontSize: 14,
-    // colorBgBase: lightDefaultTheme.backgroundColor.bg1,
+    fontSizeHeading1: 18,
   },
   components: {
     Layout: {
       bodyBg: lightDefaultTheme.backgroundColor.bg1,
       headerBg: lightDefaultTheme.backgroundColor.bgHeader,
+      triggerBg: lightDefaultTheme.backgroundColor.bg1,
+      triggerColor: lightDefaultTheme.fontColor.fc1,
+    },
+    Button: {
+      // fontSize: 14,
+    },
+    Table: {
+      // padding: 10,
+      // paddingXS: 5,
+      // margin: 0,
+      // fontSize: 14,
+      // colorBorderSecondary: lightDefaultTheme.borderColor.bl1,
+      // paddingContentVerticalLG: 4,
+    },
+    Modal: {
+      borderRadiusLG: 2,
+      borderRadiusSM: 2,
+      colorText: lightDefaultTheme.fontColor.fc3,
+      borderRadius: 2,
+      paddingContentHorizontalLG: 0,
+      paddingMD: 0,
+    },
+    Menu: {
+      itemBg: lightDefaultTheme.backgroundColor.bg1,
+      // itemSelectedBg: lightDefaultTheme.primary,
+      // itemSelectedColor: lightDefaultTheme.fontColor.fc1,
+      activeBarWidth: 0,
+      activeBarHeight: 0,
+      activeBarBorderWidth: 0,
+      // subMenuItemBorderRadius: 8,
+      // horizontalItemBorderRadius: 8,
+      // itemBorderRadius: 8,
     },
-    // Button: {
-    //   fontSize: 14,
-    // },
-    // Table: {
-    //   padding: 10,
-    //   paddingXS: 5,
-    //   margin: 0,
-    //   fontSize: 14,
-    //   colorBorderSecondary: lightDefaultTheme.borderColor.bl1,
-    //   paddingContentVerticalLG: 4,
-    // },
-    // Modal: {
-    //   borderRadiusLG: 2,
-    //   borderRadiusSM: 2,
-    //   colorText: lightDefaultTheme.fontColor.fc3,
-    //   borderRadius: 2,
-    //   paddingContentHorizontalLG: 0,
-    //   paddingMD: 0,
-    // },
-    // Menu: {
-    //   itemBg: lightDefaultTheme.backgroundColor.bg1,
-    //   activeBarWidth: 0,
-    //   activeBarHeight: 0,
-    //   activeBarBorderWidth: 0,
-    //   subMenuItemBorderRadius: 8,
-    //   horizontalItemBorderRadius: 8,
-    //   itemBorderRadius: 8,
-    // },
   },
   algorithm: theme.defaultAlgorithm,
 };
diff --git a/threadpool/console-new/src/hooks/index.ts b/threadpool/console-new/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useThemeMode';
+export * from './useTransLate';
+export * from './useFormToUrl';