diff --git a/threadpool/console-new/craco.config.js b/threadpool/console-new/craco.config.js index 0d7d72a2..5ad94a67 100644 --- 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/src/App.tsx b/threadpool/console-new/src/App.tsx index 709464e4..d4e2ec2f 100644 --- a/threadpool/console-new/src/App.tsx +++ b/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'; - -const sideMenuList = [ - { - label: about, - key: 'mail', - icon: , - }, - { - label: 主页, - key: 'app', - icon: , - }, -]; +import { MenuProps } from 'antd'; +import { useTran } from './hooks'; +import { STR_MAP } from './config/i18n/locales/constants'; +type MenuItem = Required['items'][number]; const App = () => { + const sideMenuList: MenuItem[] = [ + { + label: useTran(STR_MAP.DYNAMIC_THREAD_POOL), + key: STR_MAP.DYNAMIC_THREAD_POOL, + children: [ + { label: {useTran(STR_MAP.THREAD_POOL)}, key: STR_MAP.THREAD_POOL }, + ], + }, + ]; + return ( - + {routeList.map(item => ( diff --git a/threadpool/console-new/src/components/header/index.tsx b/threadpool/console-new/src/components/header/index.tsx index 2619f290..27c882f5 100644 --- a/threadpool/console-new/src/components/header/index.tsx +++ b/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'; diff --git a/threadpool/console-new/src/components/layout-com/index.tsx b/threadpool/console-new/src/components/layout-com/index.tsx index 13d25217..c6214ba3 100644 --- a/threadpool/console-new/src/components/layout-com/index.tsx +++ b/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['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) => { )} - {children} + + {children} + ); diff --git a/threadpool/console-new/src/config/i18n/locales/constants.ts b/threadpool/console-new/src/config/i18n/locales/constants.ts new file mode 100644 index 00000000..82fb7804 --- /dev/null +++ b/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', +} diff --git a/threadpool/console-new/src/config/i18n/locales/en.ts b/threadpool/console-new/src/config/i18n/locales/en.ts index 9c4e9957..11edd1dc 100644 --- a/threadpool/console-new/src/config/i18n/locales/en.ts +++ b/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; diff --git a/threadpool/console-new/src/config/i18n/locales/zh.ts b/threadpool/console-new/src/config/i18n/locales/zh.ts index dbf8591d..6584254b 100644 --- a/threadpool/console-new/src/config/i18n/locales/zh.ts +++ b/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; diff --git a/threadpool/console-new/src/config/theme/dark-algorithm.ts b/threadpool/console-new/src/config/theme/dark-algorithm.ts index e7d20afc..fc6bb908 100644 --- a/threadpool/console-new/src/config/theme/dark-algorithm.ts +++ b/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, - paddingXS: 5, - margin: 0, - fontSize: 14, - colorBorderSecondary: darkDefaultTheme.borderColor.bl1, - paddingContentVerticalLG: 4, + // padding: 10, + // paddingXS: 5, + // margin: 0, + // fontSize: 14, + // colorBorderSecondary: darkDefaultTheme.borderColor.bl1, + // paddingContentVerticalLG: 4, }, Modal: { borderRadiusLG: 2, diff --git a/threadpool/console-new/src/config/theme/default-algnorithm.ts b/threadpool/console-new/src/config/theme/default-algnorithm.ts index be07d984..9420cd26 100644 --- a/threadpool/console-new/src/config/theme/default-algnorithm.ts +++ b/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: { - // 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, - // }, + 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 new file mode 100644 index 00000000..9524fd3f --- /dev/null +++ b/threadpool/console-new/src/hooks/index.ts @@ -0,0 +1,2 @@ +export * from './useThemeMode'; +export * from './useTransLate'; diff --git a/threadpool/console-new/src/hooks/useThemeMode.ts b/threadpool/console-new/src/hooks/useThemeMode.ts new file mode 100644 index 00000000..170b3afe --- /dev/null +++ b/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('current-mode', { defaultValue: false }); + const { setThemeName } = useContext(MyContext); + + useEffect(() => { + isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT); + }, [isDark, setThemeName]); + + return { isDark, setIsDark }; +}; diff --git a/threadpool/console-new/src/hooks/useTransLate.ts b/threadpool/console-new/src/hooks/useTransLate.ts new file mode 100644 index 00000000..de37118e --- /dev/null +++ b/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); +}; diff --git a/threadpool/console-new/src/page/thread-pool/index.tsx b/threadpool/console-new/src/page/thread-pool/index.tsx new file mode 100644 index 00000000..63bca247 --- /dev/null +++ b/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[] = [ + { + 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 ( + + {useTran(STR_MAP.THREAD_POOL)} +
+ + + + + + + + + + + + +
+
+ + ); +}; +export default ThreadPoll; diff --git a/threadpool/console-new/src/page/thread-pool/router.ts b/threadpool/console-new/src/page/thread-pool/router.ts new file mode 100644 index 00000000..a981458d --- /dev/null +++ b/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; diff --git a/threadpool/console-new/src/route/index.tsx b/threadpool/console-new/src/route/index.tsx index d5f6f838..80443ee0 100644 --- a/threadpool/console-new/src/route/index.tsx +++ b/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;