feat: thread pool

threadpool/console-new/craco.config.js

@@ -41,7 +41,6 @@ module.exports = {
   webpack: {
     alias: {
       '@': resolve('src'),
-      '@i18': resolve('public/locales'),
     },
   },
   devServer: {

threadpool/console-new/src/App.tsx

@@ -1,25 +1,26 @@
 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';
+type MenuItem = Required<MenuProps>['items'][number];
 
-const sideMenuList = [
+const App = () => {
-  {
+  const sideMenuList: MenuItem[] = [
-    label: <a href="/about">about</a>,
-    key: 'mail',
-    icon: <MailOutlined />,
-  },
     {
-    label: <a href="/home">主页</a>,
+      label: useTran(STR_MAP.DYNAMIC_THREAD_POOL),
-    key: 'app',
+      key: STR_MAP.DYNAMIC_THREAD_POOL,
-    icon: <AppstoreOutlined />,
+      children: [
+        { label: <Link to={'/thread-poll/index'}>{useTran(STR_MAP.THREAD_POOL)}</Link>, key: STR_MAP.THREAD_POOL },
+      ],
     },
   ];
 
-const App = () => {
   return (
-    <LayoutCom sideMenuList={sideMenuList} isSider={false}>
+    <LayoutCom sideMenuList={sideMenuList} isSider={true}>
       <Routes>
         <Route path="/Login" Component={Login}></Route>
         {routeList.map(item => (

threadpool/console-new/src/components/header/index.tsx

@@ -2,7 +2,7 @@ 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 { useThemeMode } from '@/hooks';
 import { MyContext } from '@/context';
 import IconFont from '@/components/icon';
 

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

@@ -1,15 +1,16 @@
 import { useState, useContext, ReactNode } 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';
+type MenuItem = Required<MenuProps>['items'][number];
 
 const { Header, Sider, Content } = Layout;
 
 interface ILayoutCom {
   children?: ReactNode;
-  sideMenuList: IMenuList[];
+  sideMenuList: MenuItem[];
   isSider?: boolean;
 }
 const LayoutCom = (props: ILayoutCom) => {
@@ -31,7 +32,9 @@ const LayoutCom = (props: ILayoutCom) => {
             <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={sideMenuList} />
           </Sider>
         )}
-        <Content className={style.content}>{children}</Content>
+        <Content className={style.content} style={{ backgroundColor: myThemes.backgroundColor.bgContent }}>
+          {children}
+        </Content>
       </Layout>
     </main>
   );

threadpool/console-new/src/config/i18n/locales/constants.ts

@@ -0,0 +1,9 @@
+export enum STR_MAP {
+  DYNAMIC_THREAD_POOL = 'dynamicThreadPool',
+  THREAD_POOL = 'threadPool',
+  PROJECT = 'project',
+  SEARCH = 'search',
+  ADD = 'add',
+  SERIAL_NUMBER = 'serial_number',
+  TENANTRY = 'tenantry',
+}

threadpool/console-new/src/config/i18n/locales/en.ts

@@ -1,5 +1,13 @@
+import { STR_MAP } from './constants';
+
 const enTranslationMap: { [key: string]: string } = {
-  hello: 'hello',
+  [STR_MAP.DYNAMIC_THREAD_POOL]: 'Dynamic thread pool',
+  [STR_MAP.THREAD_POOL]: 'Thread pool management',
+  [STR_MAP.PROJECT]: 'project',
+  [STR_MAP.SEARCH]: 'search',
+  [STR_MAP.ADD]: 'add',
+  [STR_MAP.SERIAL_NUMBER]: 'number',
+  [STR_MAP.TENANTRY]: 'tenantry',
 };
 
 export default enTranslationMap;

threadpool/console-new/src/config/i18n/locales/zh.ts

@@ -1,5 +1,13 @@
+import { STR_MAP } from './constants';
+
 const zhTranslationMap: { [key: string]: string } = {
-  hello: '你好',
+  [STR_MAP.DYNAMIC_THREAD_POOL]: '动态线程池',
+  [STR_MAP.THREAD_POOL]: '线程池管理',
+  [STR_MAP.PROJECT]: '项目',
+  [STR_MAP.SEARCH]: '搜索',
+  [STR_MAP.ADD]: '添加',
+  [STR_MAP.SERIAL_NUMBER]: '序号',
+  [STR_MAP.TENANTRY]: '租户',
 };
 
 export default zhTranslationMap;

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

@@ -5,6 +5,7 @@ export const darkAlgorithm = {
     borderRadius: 6,
     colorPrimary: darkDefaultTheme.primary,
     fontSize: 14,
+    fontSizeHeading1: 18,
   },
   components: {
     Layout: {
@@ -12,17 +13,17 @@ export const darkAlgorithm = {
       headerBg: darkDefaultTheme.backgroundColor.bgHeader,
     },
     Button: {
-      fontSize: 14,
+      // fontSize: 14,
     },
     Table: {
       // borderRadius: 0,
       // borderRadiusLG: 0,
-      padding: 10,
+      // padding: 10,
-      paddingXS: 5,
+      // paddingXS: 5,
-      margin: 0,
+      // margin: 0,
-      fontSize: 14,
+      // fontSize: 14,
-      colorBorderSecondary: darkDefaultTheme.borderColor.bl1,
+      // colorBorderSecondary: darkDefaultTheme.borderColor.bl1,
-      paddingContentVerticalLG: 4,
+      // paddingContentVerticalLG: 4,
     },
     Modal: {
       borderRadiusLG: 2,

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

@@ -5,41 +5,41 @@ export const defaultAlgorithm = {
     borderRadius: 6,
     colorPrimary: lightDefaultTheme.primary,
     fontSize: 14,
-    // colorBgBase: lightDefaultTheme.backgroundColor.bg1,
+    fontSizeHeading1: 18,
   },
   components: {
     Layout: {
       bodyBg: lightDefaultTheme.backgroundColor.bg1,
       headerBg: lightDefaultTheme.backgroundColor.bgHeader,
     },
-    // Button: {
+    Button: {
       // fontSize: 14,
-    // },
+    },
-    // Table: {
+    Table: {
       // padding: 10,
       // paddingXS: 5,
       // margin: 0,
       // fontSize: 14,
       // colorBorderSecondary: lightDefaultTheme.borderColor.bl1,
       // paddingContentVerticalLG: 4,
-    // },
+    },
-    // Modal: {
+    Modal: {
-    //   borderRadiusLG: 2,
+      borderRadiusLG: 2,
-    //   borderRadiusSM: 2,
+      borderRadiusSM: 2,
-    //   colorText: lightDefaultTheme.fontColor.fc3,
+      colorText: lightDefaultTheme.fontColor.fc3,
-    //   borderRadius: 2,
+      borderRadius: 2,
-    //   paddingContentHorizontalLG: 0,
+      paddingContentHorizontalLG: 0,
-    //   paddingMD: 0,
+      paddingMD: 0,
-    // },
+    },
-    // Menu: {
+    Menu: {
-    //   itemBg: lightDefaultTheme.backgroundColor.bg1,
+      itemBg: lightDefaultTheme.backgroundColor.bg1,
-    //   activeBarWidth: 0,
+      activeBarWidth: 0,
-    //   activeBarHeight: 0,
+      activeBarHeight: 0,
-    //   activeBarBorderWidth: 0,
+      activeBarBorderWidth: 0,
-    //   subMenuItemBorderRadius: 8,
+      subMenuItemBorderRadius: 8,
-    //   horizontalItemBorderRadius: 8,
+      horizontalItemBorderRadius: 8,
-    //   itemBorderRadius: 8,
+      itemBorderRadius: 8,
-    // },
+    },
   },
   algorithm: theme.defaultAlgorithm,
 };

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

@@ -0,0 +1,2 @@
+export * from './useThemeMode';
+export * from './useTransLate';

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

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

threadpool/console-new/src/hooks/useTransLate.ts

@@ -0,0 +1,6 @@
+import { useTranslation } from 'react-i18next';
+
+export const useTran = (str: string): string => {
+  const { t } = useTranslation();
+  return t(str);
+};

threadpool/console-new/src/page/thread-pool/index.tsx

@@ -0,0 +1,45 @@
+import { Button, Form, Select, Space, Table, Typography } from 'antd';
+import { useTran } from '@/hooks';
+import { STR_MAP } from '@/config/i18n/locales/constants';
+import { ColumnProps } from 'antd/es/table';
+const { Title } = Typography;
+const { Item } = Form;
+
+const ThreadPoll = () => {
+  const [form] = Form.useForm();
+  const columns: ColumnProps<any>[] = [
+    {
+      title: useTran(STR_MAP.SERIAL_NUMBER),
+      dataIndex: 'order',
+    },
+    {
+      title: useTran(STR_MAP.SERIAL_NUMBER),
+      dataIndex: 'tenantry',
+    },
+    {
+      title: useTran(STR_MAP.SERIAL_NUMBER),
+      dataIndex: 'tenantry',
+    },
+  ];
+  return (
+    <Space direction="vertical" style={{ width: '100%' }} size="large">
+      <Title>{useTran(STR_MAP.THREAD_POOL)}</Title>
+      <Form form={form} layout="inline">
+        <Item name="project" style={{ flex: 1 }}>
+          <Select options={[{ label: '哈哈哈', value: 1 }]} placeholder={useTran(STR_MAP.PROJECT)}></Select>
+        </Item>
+        <Item name="thpool" style={{ flex: 1 }}>
+          <Select options={[{ label: '哈哈哈', value: 1 }]} placeholder={useTran(STR_MAP.PROJECT)}></Select>
+        </Item>
+        <Item style={{ flex: 4 }}>
+          <Space>
+            <Button type="primary">{useTran(STR_MAP.SEARCH)}</Button>
+            <Button type="primary">{useTran(STR_MAP.ADD)}</Button>
+          </Space>
+        </Item>
+      </Form>
+      <Table columns={columns}></Table>
+    </Space>
+  );
+};
+export default ThreadPoll;

threadpool/console-new/src/page/thread-pool/router.ts

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

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

@@ -1,6 +1,7 @@
 import { IRouterList } from '@/typings';
 import homeRouter from '@/page/home/router';
 import aboutRouter from '@/page/about/router';
+import ThreadPoolRouter from '@/page/thread-pool/router';
 
-const routerList: IRouterList[] = [...homeRouter, ...aboutRouter];
+const routerList: IRouterList[] = [...homeRouter, ...aboutRouter, ...ThreadPoolRouter];
 export default routerList;