移除国际化
This commit is contained in:
parent
c87ca8333b
commit
0cd329ae7d
@ -4,9 +4,7 @@ import { join } from 'path';
|
||||
import defaultSettings from './defaultSettings';
|
||||
import proxy from './proxy';
|
||||
import routes from './routes';
|
||||
|
||||
const { REACT_APP_ENV = 'dev' } = process.env;
|
||||
|
||||
export default defineConfig({
|
||||
/**
|
||||
* @name 开启 hash 模式
|
||||
@ -14,7 +12,6 @@ export default defineConfig({
|
||||
* @doc https://umijs.org/docs/api/config#hash
|
||||
*/
|
||||
hash: true,
|
||||
|
||||
/**
|
||||
* @name 兼容性设置
|
||||
* @description 设置 ie11 不一定完美兼容，需要检查自己使用的所有依赖
|
||||
@ -93,15 +90,7 @@ export default defineConfig({
|
||||
/**
|
||||
* @name 国际化插件
|
||||
* @doc https://umijs.org/docs/max/i18n
|
||||
*/
|
||||
locale: {
|
||||
// default zh-CN
|
||||
default: 'zh-CN',
|
||||
antd: true,
|
||||
// default true, when it is true, will use `navigator.language` overwrite default
|
||||
baseNavigator: true,
|
||||
},
|
||||
/**
|
||||
*/ /**
|
||||
* @name antd 插件
|
||||
* @description 内置了 babel import 插件
|
||||
* @doc https://umijs.org/docs/max/antd#antd
|
||||
@ -125,7 +114,10 @@ export default defineConfig({
|
||||
*/
|
||||
headScripts: [
|
||||
// 解决首次加载时白屏的问题
|
||||
{ src: '/scripts/loading.js', async: true },
|
||||
{
|
||||
src: '/scripts/loading.js',
|
||||
async: true,
|
||||
},
|
||||
],
|
||||
//================ pro 插件配置 =================
|
||||
presets: ['umi-presets-pro'],
|
||||
|
||||
@ -1,63 +1,21 @@
|
||||
/**
|
||||
* @name umi 的路由配置
|
||||
* @description 只支持 path,component,routes,redirect,wrappers,name,icon 的配置
|
||||
* @param path path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。
|
||||
* @param component 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
|
||||
* @param routes 配置子路由，通常在需要为多个路径增加 layout 组件时使用。
|
||||
* @param redirect 配置路由跳转
|
||||
* @param wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
|
||||
* @param name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置 name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题
|
||||
* @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
|
||||
* @doc https://umijs.org/docs/guides/routes
|
||||
*/
|
||||
export default [
|
||||
{
|
||||
path: '/user',
|
||||
layout: false,
|
||||
routes: [
|
||||
{
|
||||
name: 'login',
|
||||
path: '/user/login',
|
||||
component: './User/Login',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/welcome',
|
||||
name: 'welcome',
|
||||
icon: 'smile',
|
||||
component: './Welcome',
|
||||
routes: [{ name: '登录', path: '/user/login', component: './User/Login' }],
|
||||
},
|
||||
{ path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome' },
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
name: '管理页',
|
||||
icon: 'crown',
|
||||
access: 'canAdmin',
|
||||
routes: [
|
||||
{
|
||||
path: '/admin',
|
||||
redirect: '/admin/sub-page',
|
||||
},
|
||||
{
|
||||
path: '/admin/sub-page',
|
||||
name: 'sub-page',
|
||||
component: './Admin',
|
||||
},
|
||||
{ path: '/admin', redirect: '/admin/sub-page' },
|
||||
{ path: '/admin/sub-page', name: '二级管理页', component: './Admin' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'list.table-list',
|
||||
icon: 'table',
|
||||
path: '/list',
|
||||
component: './TableList',
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/welcome',
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
layout: false,
|
||||
component: './404',
|
||||
},
|
||||
{ name: '查询表格', icon: 'table', path: '/list', component: './TableList' },
|
||||
{ path: '/', redirect: '/welcome' },
|
||||
{ path: '*', layout: false, component: './404' },
|
||||
];
|
||||
|
||||
@ -76,8 +76,11 @@
|
||||
"@umijs/fabric": "^2.14.1",
|
||||
"@umijs/lint": "^4.0.52",
|
||||
"@umijs/max": "^4.0.52",
|
||||
"add": "^2.0.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-unicorn": "^47.0.0",
|
||||
"express": "^4.18.2",
|
||||
"gh-pages": "^3.2.3",
|
||||
"husky": "^7.0.4",
|
||||
@ -89,7 +92,8 @@
|
||||
"swagger-ui-dist": "^4.15.5",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.9.5",
|
||||
"umi-presets-pro": "^2.0.2"
|
||||
"umi-presets-pro": "^2.0.2",
|
||||
"yarn": "^1.22.19"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import Footer from '@/components/Footer';
|
||||
import { Question, SelectLang } from '@/components/RightContent';
|
||||
import { Question } from '@/components/RightContent';
|
||||
import { LinkOutlined } from '@ant-design/icons';
|
||||
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
|
||||
import { SettingDrawer } from '@ant-design/pro-components';
|
||||
import type { RunTimeLayoutConfig } from '@umijs/max';
|
||||
import { history, Link } from '@umijs/max';
|
||||
import defaultSettings from '../config/defaultSettings';
|
||||
import { AvatarDropdown, AvatarName } from './components/RightContent/AvatarDropdown';
|
||||
import { errorConfig } from './requestErrorConfig';
|
||||
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
|
||||
import React from 'react';
|
||||
import { AvatarDropdown, AvatarName } from './components/RightContent/AvatarDropdown';
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const loginPath = '/user/login';
|
||||
|
||||
@ -52,7 +51,7 @@ export async function getInitialState(): Promise<{
|
||||
// ProLayout 支持的api https://procomponents.ant.design/components/layout
|
||||
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
|
||||
return {
|
||||
actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
|
||||
actionsRender: () => [<Question key="doc" />],
|
||||
avatarProps: {
|
||||
src: initialState?.currentUser?.avatar,
|
||||
title: <AvatarName />,
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
import { GithubOutlined } from '@ant-design/icons';
|
||||
import { DefaultFooter } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import '@umijs/max';
|
||||
import React from 'react';
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const defaultMessage = intl.formatMessage({
|
||||
id: 'app.copyright.produced',
|
||||
defaultMessage: '蚂蚁集团体验技术部出品',
|
||||
});
|
||||
|
||||
const defaultMessage = '蚂蚁集团体验技术部出品';
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<DefaultFooter
|
||||
style={{
|
||||
@ -41,5 +34,4 @@ const Footer: React.FC = () => {
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import { SelectLang as UmiSelectLang } from '@umijs/max';
|
||||
import React from 'react';
|
||||
|
||||
import '@umijs/max';
|
||||
export type SiderTheme = 'light' | 'dark';
|
||||
|
||||
export const SelectLang = () => {
|
||||
return (
|
||||
<UmiSelectLang
|
||||
@ -13,7 +10,6 @@ export const SelectLang = () => {
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Question = () => {
|
||||
return (
|
||||
<div
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import { useIntl } from '@umijs/max';
|
||||
import '@umijs/max';
|
||||
import { Button, message, notification } from 'antd';
|
||||
import defaultSettings from '../config/defaultSettings';
|
||||
|
||||
const { pwa } = defaultSettings;
|
||||
const isHttps = document.location.protocol === 'https:';
|
||||
|
||||
const clearCache = () => {
|
||||
// remove all caches
|
||||
if (window.caches) {
|
||||
@ -23,7 +21,7 @@ const clearCache = () => {
|
||||
if (pwa) {
|
||||
// Notify user if offline now
|
||||
window.addEventListener('sw.offline', () => {
|
||||
message.warning(useIntl().formatMessage({ id: 'app.pwa.offline' }));
|
||||
message.warning('当前处于离线状态');
|
||||
});
|
||||
|
||||
// Pop up a prompt on the page asking the user if they want to use the latest version
|
||||
@ -46,9 +44,13 @@ if (pwa) {
|
||||
resolve(msgEvent.data);
|
||||
}
|
||||
};
|
||||
worker.postMessage({ type: 'skip-waiting' }, [channel.port2]);
|
||||
worker.postMessage(
|
||||
{
|
||||
type: 'skip-waiting',
|
||||
},
|
||||
[channel.port2],
|
||||
);
|
||||
});
|
||||
|
||||
clearCache();
|
||||
window.location.reload();
|
||||
return true;
|
||||
@ -62,12 +64,12 @@ if (pwa) {
|
||||
reloadSW();
|
||||
}}
|
||||
>
|
||||
{useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated.ok' })}
|
||||
{'刷新'}
|
||||
</Button>
|
||||
);
|
||||
notification.open({
|
||||
message: useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated' }),
|
||||
description: useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
|
||||
message: '有新内容',
|
||||
description: '请点击“刷新”按钮或者手动刷新页面',
|
||||
btn,
|
||||
key,
|
||||
onClose: async () => null,
|
||||
@ -86,6 +88,5 @@ if (pwa) {
|
||||
serviceWorker.getRegistration().then((sw) => {
|
||||
if (sw) sw.unregister();
|
||||
});
|
||||
|
||||
clearCache();
|
||||
}
|
||||
|
||||
@ -1,24 +1,14 @@
|
||||
import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import '@umijs/max';
|
||||
import { Alert, Card, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const Admin: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<PageContainer
|
||||
content={intl.formatMessage({
|
||||
id: 'pages.admin.subPage.title',
|
||||
defaultMessage: 'This page can only be viewed by admin',
|
||||
})}
|
||||
>
|
||||
<PageContainer content={' 这个页面只有 admin 权限才能查看'}>
|
||||
<Card>
|
||||
<Alert
|
||||
message={intl.formatMessage({
|
||||
id: 'pages.welcome.alertMessage',
|
||||
defaultMessage: 'Faster and stronger heavy-duty components have been released.',
|
||||
})}
|
||||
message={'更快更强的重型组件，已经发布。'}
|
||||
type="success"
|
||||
showIcon
|
||||
banner
|
||||
@ -27,11 +17,21 @@ const Admin: React.FC = () => {
|
||||
marginBottom: 48,
|
||||
}}
|
||||
/>
|
||||
<Typography.Title level={2} style={{ textAlign: 'center' }}>
|
||||
<Typography.Title
|
||||
level={2}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
|
||||
</Typography.Title>
|
||||
</Card>
|
||||
<p style={{ textAlign: 'center', marginTop: 24 }}>
|
||||
<p
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
marginTop: 24,
|
||||
}}
|
||||
>
|
||||
Want to add more pages? Please refer to{' '}
|
||||
<a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
|
||||
use block
|
||||
@ -41,5 +41,4 @@ const Admin: React.FC = () => {
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Admin;
|
||||
|
||||
@ -6,10 +6,9 @@ import {
|
||||
ProFormTextArea,
|
||||
StepsForm,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import '@umijs/max';
|
||||
import { Modal } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
@ -17,16 +16,13 @@ export type FormValueType = {
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.RuleListItem>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalOpen: boolean;
|
||||
values: Partial<API.RuleListItem>;
|
||||
};
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
@ -36,12 +32,11 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
bodyStyle={{
|
||||
padding: '32px 40px 48px',
|
||||
}}
|
||||
destroyOnClose
|
||||
title={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleConfig',
|
||||
defaultMessage: '规则配置',
|
||||
})}
|
||||
title={'规则配置'}
|
||||
open={props.updateModalOpen}
|
||||
footer={submitter}
|
||||
onCancel={() => {
|
||||
@ -59,50 +54,28 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
name: props.values.name,
|
||||
desc: props.values.desc,
|
||||
}}
|
||||
title={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.basicConfig',
|
||||
defaultMessage: '基本信息',
|
||||
})}
|
||||
title={'基本信息'}
|
||||
>
|
||||
<ProFormText
|
||||
name="name"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleName.nameLabel',
|
||||
defaultMessage: '规则名称',
|
||||
})}
|
||||
label={'规则名称'}
|
||||
width="md"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.updateForm.ruleName.nameRules"
|
||||
defaultMessage="请输入规则名称！"
|
||||
/>
|
||||
),
|
||||
message: '请输入规则名称！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleDesc.descLabel',
|
||||
defaultMessage: '规则描述',
|
||||
})}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleDesc.descPlaceholder',
|
||||
defaultMessage: '请输入至少五个字符',
|
||||
})}
|
||||
label={'规则描述'}
|
||||
placeholder={'请输入至少五个字符'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.updateForm.ruleDesc.descRules"
|
||||
defaultMessage="请输入至少五个字符的规则描述！"
|
||||
/>
|
||||
),
|
||||
message: '请输入至少五个字符的规则描述！',
|
||||
min: 5,
|
||||
},
|
||||
]}
|
||||
@ -113,18 +86,12 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleProps.title',
|
||||
defaultMessage: '配置规则属性',
|
||||
})}
|
||||
title={'配置规则属性'}
|
||||
>
|
||||
<ProFormSelect
|
||||
name="target"
|
||||
width="md"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.object',
|
||||
defaultMessage: '监控对象',
|
||||
})}
|
||||
label={'监控对象'}
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
@ -133,10 +100,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
<ProFormSelect
|
||||
name="template"
|
||||
width="md"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleProps.templateLabel',
|
||||
defaultMessage: '规则模板',
|
||||
})}
|
||||
label={'规则模板'}
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
@ -144,10 +108,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.ruleProps.typeLabel',
|
||||
defaultMessage: '规则类型',
|
||||
})}
|
||||
label={'规则类型'}
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
@ -165,36 +126,22 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.schedulingPeriod.title',
|
||||
defaultMessage: '设定调度周期',
|
||||
})}
|
||||
title={'设定调度周期'}
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
width="md"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.schedulingPeriod.timeLabel',
|
||||
defaultMessage: '开始时间',
|
||||
})}
|
||||
label={'开始时间'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.updateForm.schedulingPeriod.timeRules"
|
||||
defaultMessage="请选择开始时间！"
|
||||
/>
|
||||
),
|
||||
message: '请选择开始时间！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label={intl.formatMessage({
|
||||
id: 'pages.searchTable.updateForm.object',
|
||||
defaultMessage: '监控对象',
|
||||
})}
|
||||
label={'监控对象'}
|
||||
width="md"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
@ -205,5 +152,4 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
</StepsForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateForm;
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
ProFormTextArea,
|
||||
ProTable,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import '@umijs/max';
|
||||
import { Button, Drawer, Input, message } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import type { FormValueType } from './components/UpdateForm';
|
||||
@ -24,7 +24,9 @@ import UpdateForm from './components/UpdateForm';
|
||||
const handleAdd = async (fields: API.RuleListItem) => {
|
||||
const hide = message.loading('正在添加');
|
||||
try {
|
||||
await addRule({ ...fields });
|
||||
await addRule({
|
||||
...fields,
|
||||
});
|
||||
hide();
|
||||
message.success('Added successfully');
|
||||
return true;
|
||||
@ -50,7 +52,6 @@ const handleUpdate = async (fields: FormValueType) => {
|
||||
key: fields.key,
|
||||
});
|
||||
hide();
|
||||
|
||||
message.success('Configuration is successful');
|
||||
return true;
|
||||
} catch (error) {
|
||||
@ -82,7 +83,6 @@ const handleRemove = async (selectedRows: API.RuleListItem[]) => {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const TableList: React.FC = () => {
|
||||
/**
|
||||
* @en-US Pop-up window of new window
|
||||
@ -94,9 +94,7 @@ const TableList: React.FC = () => {
|
||||
* @zh-CN 分布更新窗口的弹窗
|
||||
* */
|
||||
const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
|
||||
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
|
||||
@ -105,16 +103,10 @@ const TableList: React.FC = () => {
|
||||
* @en-US International configuration
|
||||
* @zh-CN 国际化配置
|
||||
* */
|
||||
const intl = useIntl();
|
||||
|
||||
const columns: ProColumns<API.RuleListItem>[] = [
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.updateForm.ruleName.nameLabel"
|
||||
defaultMessage="Rule name"
|
||||
/>
|
||||
),
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
tip: 'The rule name is the unique key',
|
||||
render: (dom, entity) => {
|
||||
@ -131,70 +123,42 @@ const TableList: React.FC = () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleDesc" defaultMessage="Description" />,
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleCallNo"
|
||||
defaultMessage="Number of service calls"
|
||||
/>
|
||||
),
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
hideInForm: true,
|
||||
renderText: (val: string) =>
|
||||
`${val}${intl.formatMessage({
|
||||
id: 'pages.searchTable.tenThousand',
|
||||
defaultMessage: ' 万 ',
|
||||
})}`,
|
||||
renderText: (val: string) => `${val}${'万'}`,
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleStatus" defaultMessage="Status" />,
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
hideInForm: true,
|
||||
valueEnum: {
|
||||
0: {
|
||||
text: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.nameStatus.default"
|
||||
defaultMessage="Shut down"
|
||||
/>
|
||||
),
|
||||
text: '关闭',
|
||||
status: 'Default',
|
||||
},
|
||||
1: {
|
||||
text: (
|
||||
<FormattedMessage id="pages.searchTable.nameStatus.running" defaultMessage="Running" />
|
||||
),
|
||||
text: '运行中',
|
||||
status: 'Processing',
|
||||
},
|
||||
2: {
|
||||
text: (
|
||||
<FormattedMessage id="pages.searchTable.nameStatus.online" defaultMessage="Online" />
|
||||
),
|
||||
text: '已上线',
|
||||
status: 'Success',
|
||||
},
|
||||
3: {
|
||||
text: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.nameStatus.abnormal"
|
||||
defaultMessage="Abnormal"
|
||||
/>
|
||||
),
|
||||
text: '异常',
|
||||
status: 'Error',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleUpdatedAt"
|
||||
defaultMessage="Last scheduled time"
|
||||
/>
|
||||
),
|
||||
title: '上次调度时间',
|
||||
sorter: true,
|
||||
dataIndex: 'updatedAt',
|
||||
valueType: 'dateTime',
|
||||
@ -204,21 +168,13 @@ const TableList: React.FC = () => {
|
||||
return false;
|
||||
}
|
||||
if (`${status}` === '3') {
|
||||
return (
|
||||
<Input
|
||||
{...rest}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.searchTable.exception',
|
||||
defaultMessage: 'Please enter the reason for the exception!',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
return <Input {...rest} placeholder={'请输入异常原因！'} />;
|
||||
}
|
||||
return defaultRender(item);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
@ -229,25 +185,18 @@ const TableList: React.FC = () => {
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="pages.searchTable.config" defaultMessage="Configuration" />
|
||||
配置
|
||||
</a>,
|
||||
<a key="subscribeAlert" href="https://procomponents.ant.design/">
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.subscribeAlert"
|
||||
defaultMessage="Subscribe to alerts"
|
||||
/>
|
||||
订阅警报
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<API.RuleListItem, API.PageParams>
|
||||
headerTitle={intl.formatMessage({
|
||||
id: 'pages.searchTable.title',
|
||||
defaultMessage: 'Enquiry form',
|
||||
})}
|
||||
headerTitle={'查询表格'}
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{
|
||||
@ -261,7 +210,7 @@ const TableList: React.FC = () => {
|
||||
handleModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
||||
<PlusOutlined /> 新建
|
||||
</Button>,
|
||||
]}
|
||||
request={rule}
|
||||
@ -276,17 +225,17 @@ const TableList: React.FC = () => {
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
<FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
|
||||
|
||||
已选择{' '}
|
||||
<a
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{selectedRowsState.length}
|
||||
</a>{' '}
|
||||
项
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.totalServiceCalls"
|
||||
defaultMessage="Total number of service calls"
|
||||
/>{' '}
|
||||
{selectedRowsState.reduce((pre, item) => pre + item.callNo!, 0)}{' '}
|
||||
<FormattedMessage id="pages.searchTable.tenThousand" defaultMessage="万" />
|
||||
服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo!, 0)} 万
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@ -298,24 +247,13 @@ const TableList: React.FC = () => {
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.batchDeletion"
|
||||
defaultMessage="Batch deletion"
|
||||
/>
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.batchApproval"
|
||||
defaultMessage="Batch approval"
|
||||
/>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<ModalForm
|
||||
title={intl.formatMessage({
|
||||
id: 'pages.searchTable.createForm.newRule',
|
||||
defaultMessage: 'New rule',
|
||||
})}
|
||||
title={'新建规则'}
|
||||
width="400px"
|
||||
open={createModalOpen}
|
||||
onOpenChange={handleModalOpen}
|
||||
@ -333,12 +271,7 @@ const TableList: React.FC = () => {
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.ruleName"
|
||||
defaultMessage="Rule name is required"
|
||||
/>
|
||||
),
|
||||
message: '规则名称为必填项',
|
||||
},
|
||||
]}
|
||||
width="md"
|
||||
@ -393,5 +326,4 @@ const TableList: React.FC = () => {
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
|
||||
@ -16,12 +16,11 @@ import {
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { useEmotionCss } from '@ant-design/use-emotion-css';
|
||||
import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
|
||||
import { Helmet, history, useModel } from '@umijs/max';
|
||||
import { Alert, message, Tabs } from 'antd';
|
||||
import Settings from '../../../../config/defaultSettings';
|
||||
import React, { useState } from 'react';
|
||||
import { flushSync } from 'react-dom';
|
||||
|
||||
import Settings from '../../../../config/defaultSettings';
|
||||
const ActionIcons = () => {
|
||||
const langClassName = useEmotionCss(({ token }) => {
|
||||
return {
|
||||
@ -36,7 +35,6 @@ const ActionIcons = () => {
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<AlipayCircleOutlined key="AlipayCircleOutlined" className={langClassName} />
|
||||
@ -45,7 +43,6 @@ const ActionIcons = () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Lang = () => {
|
||||
const langClassName = useEmotionCss(({ token }) => {
|
||||
return {
|
||||
@ -60,14 +57,8 @@ const Lang = () => {
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={langClassName} data-lang>
|
||||
{SelectLang && <SelectLang />}
|
||||
</div>
|
||||
);
|
||||
return;
|
||||
};
|
||||
|
||||
const LoginMessage: React.FC<{
|
||||
content: string;
|
||||
}> = ({ content }) => {
|
||||
@ -82,12 +73,10 @@ const LoginMessage: React.FC<{
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
|
||||
const [type, setType] = useState<string>('account');
|
||||
const { initialState, setInitialState } = useModel('@@initialState');
|
||||
|
||||
const containerClassName = useEmotionCss(() => {
|
||||
return {
|
||||
display: 'flex',
|
||||
@ -99,9 +88,6 @@ const Login: React.FC = () => {
|
||||
backgroundSize: '100% 100%',
|
||||
};
|
||||
});
|
||||
|
||||
const intl = useIntl();
|
||||
|
||||
const fetchUserInfo = async () => {
|
||||
const userInfo = await initialState?.fetchUserInfo?.();
|
||||
if (userInfo) {
|
||||
@ -113,16 +99,15 @@ const Login: React.FC = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: API.LoginParams) => {
|
||||
try {
|
||||
// 登录
|
||||
const msg = await login({ ...values, type });
|
||||
const msg = await login({
|
||||
...values,
|
||||
type,
|
||||
});
|
||||
if (msg.status === 'ok') {
|
||||
const defaultLoginSuccessMessage = intl.formatMessage({
|
||||
id: 'pages.login.success',
|
||||
defaultMessage: '登录成功！',
|
||||
});
|
||||
const defaultLoginSuccessMessage = '登录成功！';
|
||||
message.success(defaultLoginSuccessMessage);
|
||||
await fetchUserInfo();
|
||||
const urlParams = new URL(window.location.href).searchParams;
|
||||
@ -133,25 +118,17 @@ const Login: React.FC = () => {
|
||||
// 如果失败去设置用户错误信息
|
||||
setUserLoginState(msg);
|
||||
} catch (error) {
|
||||
const defaultLoginFailureMessage = intl.formatMessage({
|
||||
id: 'pages.login.failure',
|
||||
defaultMessage: '登录失败，请重试！',
|
||||
});
|
||||
const defaultLoginFailureMessage = '登录失败，请重试！';
|
||||
console.log(error);
|
||||
message.error(defaultLoginFailureMessage);
|
||||
}
|
||||
};
|
||||
const { status, type: loginType } = userLoginState;
|
||||
|
||||
return (
|
||||
<div className={containerClassName}>
|
||||
<Helmet>
|
||||
<title>
|
||||
{intl.formatMessage({
|
||||
id: 'menu.login',
|
||||
defaultMessage: '登录页',
|
||||
})}
|
||||
- {Settings.title}
|
||||
{'登录'}- {Settings.title}
|
||||
</title>
|
||||
</Helmet>
|
||||
<Lang />
|
||||
@ -168,18 +145,11 @@ const Login: React.FC = () => {
|
||||
}}
|
||||
logo={<img alt="logo" src="/logo.svg" />}
|
||||
title="Ant Design"
|
||||
subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
|
||||
subTitle={'Ant Design 是西湖区最具影响力的 Web 设计规范'}
|
||||
initialValues={{
|
||||
autoLogin: true,
|
||||
}}
|
||||
actions={[
|
||||
<FormattedMessage
|
||||
key="loginWith"
|
||||
id="pages.login.loginWith"
|
||||
defaultMessage="其他登录方式"
|
||||
/>,
|
||||
<ActionIcons key="icons" />,
|
||||
]}
|
||||
actions={['其他登录方式 :', <ActionIcons key="icons" />]}
|
||||
onFinish={async (values) => {
|
||||
await handleSubmit(values as API.LoginParams);
|
||||
}}
|
||||
@ -191,28 +161,17 @@ const Login: React.FC = () => {
|
||||
items={[
|
||||
{
|
||||
key: 'account',
|
||||
label: intl.formatMessage({
|
||||
id: 'pages.login.accountLogin.tab',
|
||||
defaultMessage: '账户密码登录',
|
||||
}),
|
||||
label: '账户密码登录',
|
||||
},
|
||||
{
|
||||
key: 'mobile',
|
||||
label: intl.formatMessage({
|
||||
id: 'pages.login.phoneLogin.tab',
|
||||
defaultMessage: '手机号登录',
|
||||
}),
|
||||
label: '手机号登录',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{status === 'error' && loginType === 'account' && (
|
||||
<LoginMessage
|
||||
content={intl.formatMessage({
|
||||
id: 'pages.login.accountLogin.errorMessage',
|
||||
defaultMessage: '账户或密码错误(admin/ant.design)',
|
||||
})}
|
||||
/>
|
||||
<LoginMessage content={'错误的用户名和密码(admin/ant.design)'} />
|
||||
)}
|
||||
{type === 'account' && (
|
||||
<>
|
||||
@ -222,19 +181,11 @@ const Login: React.FC = () => {
|
||||
size: 'large',
|
||||
prefix: <UserOutlined />,
|
||||
}}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.login.username.placeholder',
|
||||
defaultMessage: '用户名: admin or user',
|
||||
})}
|
||||
placeholder={'用户名: admin or user'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.login.username.required"
|
||||
defaultMessage="请输入用户名!"
|
||||
/>
|
||||
),
|
||||
message: '用户名是必填项！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -244,19 +195,11 @@ const Login: React.FC = () => {
|
||||
size: 'large',
|
||||
prefix: <LockOutlined />,
|
||||
}}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.login.password.placeholder',
|
||||
defaultMessage: '密码: ant.design',
|
||||
})}
|
||||
placeholder={'密码: ant.design'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.login.password.required"
|
||||
defaultMessage="请输入密码！"
|
||||
/>
|
||||
),
|
||||
message: '密码是必填项！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -272,28 +215,15 @@ const Login: React.FC = () => {
|
||||
prefix: <MobileOutlined />,
|
||||
}}
|
||||
name="mobile"
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.login.phoneNumber.placeholder',
|
||||
defaultMessage: '手机号',
|
||||
})}
|
||||
placeholder={'请输入手机号！'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.login.phoneNumber.required"
|
||||
defaultMessage="请输入手机号！"
|
||||
/>
|
||||
),
|
||||
message: '手机号是必填项！',
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.login.phoneNumber.invalid"
|
||||
defaultMessage="手机号格式错误！"
|
||||
/>
|
||||
),
|
||||
message: '不合法的手机号！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -305,32 +235,18 @@ const Login: React.FC = () => {
|
||||
captchaProps={{
|
||||
size: 'large',
|
||||
}}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.login.captcha.placeholder',
|
||||
defaultMessage: '请输入验证码',
|
||||
})}
|
||||
placeholder={'请输入验证码！'}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${intl.formatMessage({
|
||||
id: 'pages.getCaptchaSecondText',
|
||||
defaultMessage: '获取验证码',
|
||||
})}`;
|
||||
return `${count} ${'秒后重新获取'}`;
|
||||
}
|
||||
return intl.formatMessage({
|
||||
id: 'pages.login.phoneLogin.getVerificationCode',
|
||||
defaultMessage: '获取验证码',
|
||||
});
|
||||
return '获取验证码';
|
||||
}}
|
||||
name="captcha"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="pages.login.captcha.required"
|
||||
defaultMessage="请输入验证码！"
|
||||
/>
|
||||
),
|
||||
message: '验证码是必填项！',
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async (phone) => {
|
||||
@ -351,14 +267,14 @@ const Login: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<ProFormCheckbox noStyle name="autoLogin">
|
||||
<FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
|
||||
自动登录
|
||||
</ProFormCheckbox>
|
||||
<a
|
||||
style={{
|
||||
float: 'right',
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
|
||||
忘记密码 ?
|
||||
</a>
|
||||
</div>
|
||||
</LoginForm>
|
||||
@ -367,5 +283,4 @@ const Login: React.FC = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user