Skip to content

Commit

Permalink
feat: login en and happy work (opengoofy#1479)
Browse files Browse the repository at this point in the history
* stash code

* fix active router

* feat: login en and happy work

---------

Co-authored-by: yikai <[email protected]>
  • Loading branch information
bobowiki and yikai authored Sep 25, 2023
1 parent 159fd9c commit f70fee6
Show file tree
Hide file tree
Showing 27 changed files with 495 additions and 69 deletions.
3 changes: 3 additions & 0 deletions threadpool/console-new/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@ahooksjs/use-url-state": "^3.5.1",
"@ant-design/happy-work-theme": "^1.0.0",
"@ant-design/icons": "^5.2.6",
"@tanem/react-nprogress": "^5.0.51",
"@testing-library/jest-dom": "^5.16.5",
Expand All @@ -13,6 +14,8 @@
"antd": "^5.4.7",
"classnames": "^2.3.2",
"dayjs": "^1.11.9",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
"i18next": "^23.5.1",
"i18next-browser-languagedetector": "^7.1.0",
"lodash": "^4.17.21",
Expand Down
30 changes: 18 additions & 12 deletions threadpool/console-new/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { MenuProps } from 'antd';
import { useTran } from './hooks';
import { STR_MAP } from './config/i18n/locales/constants';
import IconFont from './components/icon';
import { HappyProvider } from '@ant-design/happy-work-theme';

type MenuItem = Required<MenuProps>['items'][number];

Expand All @@ -16,39 +17,44 @@ const App = () => {
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' },
{
label: <Link to={'/thread-poll/index'}>{useTran(STR_MAP.THREAD_POOL_MANAGE)}</Link>,
key: '/thread-poll/index',
},
],
},
{
label: <Link to={'/tenant'}>{useTran(STR_MAP.TENANT_MANAGE)}</Link>,
key: STR_MAP.TENANT_MANAGE,
key: '/tenant',
icon: <IconFont type="icon-hot-for-ux"></IconFont>,
},
{
label: <Link to={'/item'}>{useTran(STR_MAP.PROJECT_MANAGE)}</Link>,
key: STR_MAP.PROJECT_MANAGE,
key: '/item',
icon: <IconFont type="icon-hot-for-ux"></IconFont>,
},
{
label: <Link to={'/user'}>{useTran(STR_MAP.USER_MANAGE)}</Link>,
key: STR_MAP.USER_MANAGE,
key: '/user',
icon: <IconFont type="icon-hot-for-ux"></IconFont>,
},
{
label: <Link to={'/log'}>{useTran(STR_MAP.LOG_MANAGE)}</Link>,
key: STR_MAP.LOG_MANAGE,
key: '/log',
icon: <IconFont type="icon-hot-for-ux"></IconFont>,
},
];

return (
<LayoutCom sideMenuList={sideMenuList}>
<Routes>
{routeList.map(item => (
<Route key={item.path} path={item.path} Component={item.component} />
))}
</Routes>
</LayoutCom>
<HappyProvider>
<LayoutCom sideMenuList={sideMenuList}>
<Routes>
{routeList.map(item => (
<Route key={item.path} path={item.path} Component={item.component} />
))}
</Routes>
</LayoutCom>
</HappyProvider>
);
};

Expand Down
2 changes: 1 addition & 1 deletion threadpool/console-new/src/components/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const HeaderChild = () => {
return (
<div className={style['header-wrapper']}>
<div className={style['logo']} onClick={() => navigate('/home')}>
<img src="https://nageoffer.com/img/logo3.png" alt="" />
<img src="https://nageoffer.com/img/logo3.png" alt="" style={{ cursor: 'pointer' }} />
</div>
<div className={style['edit-container']}>
<Row gutter={[16, 16]}>
Expand Down
3 changes: 3 additions & 0 deletions threadpool/console-new/src/components/icon/index.module.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// .custom-icon {
// color: red !important;
// }
14 changes: 7 additions & 7 deletions threadpool/console-new/src/components/icon/index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { createFromIconfontCN } from '@ant-design/icons';

interface Props {
type: string;
}
import React from 'react';
import style from './index.module.less';

const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4254722_3l4m6by7h34.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/c/font_4254722_vw34zn7su2.js', // 在 iconfont.cn 上生成
});

const IconFont = (props: Props) => {
return <MyIcon {...props}></MyIcon>;
type MyComponentProps = React.HTMLProps<HTMLDivElement> & { type: string };

const IconFont: React.FC<MyComponentProps> = props => {
return <MyIcon className={style['custom-icon']} {...props}></MyIcon>;
};

export default IconFont;
27 changes: 27 additions & 0 deletions threadpool/console-new/src/components/with-button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Button, ButtonProps } from 'antd';
import React from 'react';
import { SearchOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';

function withSearchIconButton<P extends ButtonProps>(WrappedComponent: React.ComponentType<P>) {
return function EnhancedComponent(props: P) {
return <WrappedComponent icon={<SearchOutlined></SearchOutlined>} {...props} />;
};
}

function withAddIconButton<P extends ButtonProps>(WrappedComponent: React.ComponentType<P>) {
return function EnhancedComponent(props: P) {
return <WrappedComponent icon={<PlusOutlined />} {...props}></WrappedComponent>;
};
}

function withResetIconButton<P extends ButtonProps>(WrappedComponent: React.ComponentType<P>) {
return function EnhancedComponent(props: P) {
return <WrappedComponent {...props} icon={<RedoOutlined />}></WrappedComponent>;
};
}

export const SearchButton = withSearchIconButton(Button);

export const AddButton = withAddIconButton(Button);

export const ResetButton = withResetIconButton(Button);
14 changes: 13 additions & 1 deletion threadpool/console-new/src/config/i18n/locales/constants.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export enum STR_MAP {
GLOBAL_TITLE = 'globalTitle',
DYNAMIC_THREAD_POOL = 'dynamicThreadPool',
THREAD_POOL_MANAGE = 'threadPoolManage',
PROJECT = 'project',
Expand All @@ -15,10 +16,21 @@ export enum STR_MAP {
EXECUTION_TIMEOUT = 'executionTimeout',
ALARM_OR_NOT = 'alarmOrNot',
CREATION_TIME = 'creationTime',
UPDATE_TIME = 'update time',
UPDATE_TIME = 'updateTime',
EDIT = 'edit',
TENANT_MANAGE = 'tenantManage',
LOG_MANAGE = 'logManage',
PROJECT_MANAGE = 'projectManage',
USER_MANAGE = 'userManage',
LOGIN_SUCCESSFUL = 'loginSuccessful',
USER_INPUT_MESSAGE = 'userInputMessage',
USRE_NAME = 'username',
PASSWORD_INPUT_MESSAGE = 'passwordInputMessage',
REMERBER_PASSWORD = 'rememberPassWord',
FORGOT_PASSWORD = 'forgotPassword',
ACCOUNT_PASSWORD_LOGIN = 'accountPasswordLogin',
PASSWOR = 'password',
LOGIN = 'login',
PHONE_LOGIN = 'phoneLogin',
ALARM_EDITING_SUCCESS = 'alarmEditingSuccess',
}
12 changes: 12 additions & 0 deletions threadpool/console-new/src/config/i18n/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@ const enTranslationMap: { [key: string]: string } = {
[STR_MAP.PROJECT_MANAGE]: 'project management',
[STR_MAP.USER_MANAGE]: 'user management',
[STR_MAP.LOG_MANAGE]: 'log management',
[STR_MAP.LOGIN_SUCCESSFUL]: 'login successful',
[STR_MAP.USER_INPUT_MESSAGE]: 'please enter your username',
[STR_MAP.USRE_NAME]: 'username',
[STR_MAP.PASSWORD_INPUT_MESSAGE]: 'please enter password',
[STR_MAP.REMERBER_PASSWORD]: 'remember the password',
[STR_MAP.FORGOT_PASSWORD]: 'forgot password',
[STR_MAP.ACCOUNT_PASSWORD_LOGIN]: 'account password login',
[STR_MAP.GLOBAL_TITLE]: `The world's best thread pool management tool`,
[STR_MAP.PASSWOR]: 'password',
[STR_MAP.LOGIN]: 'login',
[STR_MAP.PHONE_LOGIN]: 'Mobile login',
[STR_MAP.ALARM_EDITING_SUCCESS]: 'alarm editing success',
};

export default enTranslationMap;
12 changes: 12 additions & 0 deletions threadpool/console-new/src/config/i18n/locales/zh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@ const zhTranslationMap: { [key: string]: string } = {
[STR_MAP.PROJECT_MANAGE]: '项目管理',
[STR_MAP.USER_MANAGE]: '用户权限',
[STR_MAP.LOG_MANAGE]: '日志管理',
[STR_MAP.LOGIN_SUCCESSFUL]: '登录成功',
[STR_MAP.USER_INPUT_MESSAGE]: '请输入用户名',
[STR_MAP.USRE_NAME]: '用户名',
[STR_MAP.PASSWORD_INPUT_MESSAGE]: '请输入密码',
[STR_MAP.REMERBER_PASSWORD]: '记住密码',
[STR_MAP.FORGOT_PASSWORD]: '忘记密码',
[STR_MAP.ACCOUNT_PASSWORD_LOGIN]: '账号密码登录',
[STR_MAP.GLOBAL_TITLE]: `全球最好用的线程池管理工具`,
[STR_MAP.PASSWOR]: '密码',
[STR_MAP.LOGIN]: '登录',
[STR_MAP.PHONE_LOGIN]: '手机号登录',
[STR_MAP.ALARM_EDITING_SUCCESS]: '报警编辑成功',
};

export default zhTranslationMap;
2 changes: 1 addition & 1 deletion threadpool/console-new/src/config/theme/dark-algorithm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const darkAlgorithm = {
// padding: 10,
// paddingXS: 5,
// margin: 0,
// fontSize: 14,
// cellFontSize: 12,
// colorBorderSecondary: darkDefaultTheme.borderColor.bl1,
// paddingContentVerticalLG: 4,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const defaultAlgorithm = {
// padding: 10,
// paddingXS: 5,
// margin: 0,
// fontSize: 14,
// cellFontSize: 12,
// colorBorderSecondary: lightDefaultTheme.borderColor.bl1,
// paddingContentVerticalLG: 4,
},
Expand Down
1 change: 0 additions & 1 deletion threadpool/console-new/src/page/item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ const Tenant: React.FC = () => {
</Form>
<Table
{...tableProps}
bordered
rowKey="index"
scroll={{ x: 1000 }}
columns={[
Expand Down
1 change: 0 additions & 1 deletion threadpool/console-new/src/page/log/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ const Tenant: React.FC = () => {
</Form>
<Table
{...tableProps}
bordered
rowKey="id"
scroll={{ x: 1000 }}
columns={[
Expand Down
27 changes: 15 additions & 12 deletions threadpool/console-new/src/page/login/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import style from './index.module.less';
import { useRequest } from 'ahooks';
import { setToken } from '@/utils';
import { useNavigate } from 'react-router-dom';
import { STR_MAP } from '@/config/i18n/locales/constants';
import { useTranslation } from 'react-i18next';

const { Paragraph } = Typography;

Expand All @@ -19,12 +21,13 @@ const Login = () => {
const navigate = useNavigate();
const { validateFields } = form;
const [remenberMe, setRemenberMe] = useState(0);
const { t } = useTranslation();

const { run, loading } = useRequest(service.fetchLogin, {
manual: true,
onSuccess: res => {
if (res) {
message.success('登陆成功');
message.success(t(STR_MAP.LOGIN_SUCCESSFUL));
navigate('/thread-poll/index');
setToken(res?.data);
}
Expand Down Expand Up @@ -54,12 +57,12 @@ const Login = () => {
rules={[
{
required: true,
message: '请输入用户名!',
message: t(STR_MAP.USER_INPUT_MESSAGE),
},
]}
>
<Input
placeholder="用户名"
placeholder={t(STR_MAP.USER_INPUT_MESSAGE)}
prefix={<UserOutlined className={'prefixIcon'} />}
size="large"
allowClear
Expand All @@ -71,12 +74,12 @@ const Login = () => {
rules={[
{
required: true,
message: '请输入密码!',
message: t(STR_MAP.PASSWORD_INPUT_MESSAGE),
},
]}
>
<Input.Password
placeholder="密码"
placeholder={t(STR_MAP.PASSWORD_INPUT_MESSAGE)}
prefix={<LockOutlined className={'prefixIcon'} />}
size="large"
allowClear
Expand All @@ -91,9 +94,9 @@ const Login = () => {
setRemenberMe(e.target.checked ? 1 : 0);
}}
>
记住密码
{t(STR_MAP.REMERBER_PASSWORD)}
</Checkbox>
<Button type="link">忘记密码</Button>
<a>{t(STR_MAP.FORGOT_PASSWORD)}</a>
</div>
</Form.Item>
<Form.Item>
Expand All @@ -105,23 +108,23 @@ const Login = () => {
onClick={handleLogin}
loading={loading}
>
登陆
{t(STR_MAP.LOGIN)}
</Button>
</Form.Item>
</Form>
),
[form, loading, handleLogin]
[form, loading, handleLogin, t]
);

const items: TabsProps['items'] = [
{
key: TABS_KEY.LOGIN,
label: '账号密码登陆',
label: t(STR_MAP.ACCOUNT_PASSWORD_LOGIN),
children: formNode,
},
{
key: TABS_KEY.PHONE,
label: '手机号登陆',
label: t(STR_MAP.PHONE_LOGIN),
children: formNode,
},
];
Expand All @@ -132,7 +135,7 @@ const Login = () => {
<div className={style['img-wrapper']}>
<img src="https://nageoffer.com/img/logo3.png" alt="" />
</div>
<Paragraph className={style['tip']}>全球最好用的线程池管理工具</Paragraph>
<Paragraph className={style['tip']}>{t(STR_MAP.GLOBAL_TITLE)}</Paragraph>
<div className={style['form-content']}>
<Tabs centered defaultActiveKey={TABS_KEY.LOGIN} items={items} />
</div>
Expand Down
1 change: 0 additions & 1 deletion threadpool/console-new/src/page/tenant/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ const Tenant: React.FC = () => {
</Form>
<Table
{...tableProps}
bordered
rowKey="id"
columns={[
...baseColumns,
Expand Down
Empty file.
34 changes: 34 additions & 0 deletions threadpool/console-new/src/page/thread-pool-monitor/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useEffect } from 'react';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

const ThreadPoolMonitor = () => {
useEffect(() => {
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
},
],
};
option && myChart.setOption(option);
});
return <div id="main" style={{ width: '400px', height: '400px' }}></div>;
};

export default ThreadPoolMonitor;
Loading

0 comments on commit f70fee6

Please sign in to comment.