106 lines
4.0 KiB
JavaScript
106 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { Button } from 'antd';
|
|
import { ECode } from '../../types/ErrorPage';
|
|
import { ReactComponent as Light403Icon } from './assets/svg/assets-result-403.svg';
|
|
import { ReactComponent as Light404Icon } from './assets/svg/assets-result-404.svg';
|
|
import { ReactComponent as Light500Icon } from './assets/svg/assets-result-500.svg';
|
|
import { ReactComponent as LightMaintenanceIcon } from './assets/svg/assets-result-maintenance.svg';
|
|
import { ReactComponent as LightBrowserIncompatibleIcon } from './assets/svg/assets-result-browser-incompatible.svg';
|
|
import { ReactComponent as LightNetworkErrorIcon } from './assets/svg/assets-result-network-error.svg';
|
|
import './web.less';
|
|
const errorInfo = {
|
|
[ECode.forbidden]: {
|
|
title: '403 Forbidden',
|
|
desc: '抱歉，您无权限访问此页面。',
|
|
icon: <Light403Icon />,
|
|
},
|
|
[ECode.notFound]: {
|
|
title: '404 Not Found',
|
|
desc: '抱歉，您访问的页面不存在。',
|
|
icon: <Light404Icon />,
|
|
},
|
|
[ECode.error]: {
|
|
title: '500 Internal Server Error',
|
|
desc: '抱歉，服务器出错啦！',
|
|
icon: <Light500Icon />,
|
|
},
|
|
[ECode.networkError]: {
|
|
title: '网络异常',
|
|
desc: '网络异常，请稍后再试。',
|
|
icon: <LightNetworkErrorIcon />,
|
|
},
|
|
[ECode.browserIncompatible]: {
|
|
title: '浏览器版本低',
|
|
desc: '抱歉，您正在使用的浏览器版本过低，无法打开当前网页。',
|
|
icon: <LightBrowserIncompatibleIcon />,
|
|
},
|
|
[ECode.maintenance]: {
|
|
title: '系统维护中',
|
|
desc: '系统维护中，请稍后再试。',
|
|
icon: <LightMaintenanceIcon />,
|
|
},
|
|
[ECode.pageCrash]: {
|
|
title: '抱歉，网页崩溃了',
|
|
desc: '网页似乎遇到了问题，我们将尽快解决，请稍后重新加载。',
|
|
icon: <Light404Icon />,
|
|
},
|
|
[ECode.pageUpdate]: {
|
|
title: '网页有更新',
|
|
desc: '检查到网页有更新，请刷新以查看最新内容。',
|
|
icon: <Light404Icon />,
|
|
},
|
|
[ECode.pageDataCacheFailure]: {
|
|
title: '数据缓存失效',
|
|
desc: '非常抱歉，数据缓存已失效。请点击【清除缓存】以更新信息。',
|
|
icon: <Light404Icon />,
|
|
},
|
|
};
|
|
export default function Render(props) {
|
|
const { code, icon, title, desc, children, content } = props.data;
|
|
const { t, goBack, clearData } = props.methods;
|
|
const info = errorInfo[code];
|
|
const prefixCls = 'oak';
|
|
const backed = code === ECode.notFound || code === ECode.forbidden;
|
|
return (<div className={`${prefixCls}-errorPage`}>
|
|
{icon || info?.icon}
|
|
<div className={`${prefixCls}-errorPage__title`}>
|
|
{title || info?.title}
|
|
</div>
|
|
<div className={`${prefixCls}-errorPage__description`}>
|
|
{desc || info?.desc}
|
|
</div>
|
|
{content}
|
|
{children || (<Button type="primary" onClick={() => {
|
|
switch (code) {
|
|
case ECode.forbidden:
|
|
case ECode.notFound: {
|
|
goBack();
|
|
break;
|
|
}
|
|
case ECode.pageDataCacheFailure: {
|
|
clearData();
|
|
window.location.reload();
|
|
break;
|
|
}
|
|
case ECode.networkError:
|
|
case ECode.browserIncompatible:
|
|
case ECode.maintenance:
|
|
case ECode.pageCrash:
|
|
case ECode.pageUpdate:
|
|
default: {
|
|
window.location.reload();
|
|
break;
|
|
}
|
|
}
|
|
}}>
|
|
{backed
|
|
? t('common::back', {
|
|
'#oakModule': 'oak-frontend-base',
|
|
})
|
|
: t('common::refresh', {
|
|
'#oakModule': 'oak-frontend-base',
|
|
})}
|
|
</Button>)}
|
|
</div>);
|
|
}
|