From 0d047fbaf115f005615b5df06170e526283d9335 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Fri, 10 Jun 2022 15:47:51 +0800 Subject: [PATCH] feat(console): add 404 page in admin console --- .../src/assets/images/error.svg} | 0 .../src/pages/NotFound/index.module.scss | 16 +++++ packages/console/src/pages/NotFound/index.tsx | 15 ++++- packages/phrases/src/locales/en.ts | 1 + packages/phrases/src/locales/zh-cn.ts | 1 + packages/ui/src/assets/icons/error.svg | 66 +++++++++++++++++++ packages/ui/src/pages/ErrorPage/index.tsx | 4 +- 7 files changed, 100 insertions(+), 3 deletions(-) rename packages/{ui/src/assets/icons/error-icon.svg => console/src/assets/images/error.svg} (100%) create mode 100644 packages/console/src/pages/NotFound/index.module.scss create mode 100644 packages/ui/src/assets/icons/error.svg diff --git a/packages/ui/src/assets/icons/error-icon.svg b/packages/console/src/assets/images/error.svg similarity index 100% rename from packages/ui/src/assets/icons/error-icon.svg rename to packages/console/src/assets/images/error.svg diff --git a/packages/console/src/pages/NotFound/index.module.scss b/packages/console/src/pages/NotFound/index.module.scss new file mode 100644 index 000000000..0d027c3a4 --- /dev/null +++ b/packages/console/src/pages/NotFound/index.module.scss @@ -0,0 +1,16 @@ +@use '@/scss/underscore' as _; + +.container { + height: 100%; + color: var(--color-text); + text-align: center; + overflow: hidden; + + img { + margin: 15% 0 _.unit(4); + } + + .message { + font: var(--font-body-medium); + } +} diff --git a/packages/console/src/pages/NotFound/index.tsx b/packages/console/src/pages/NotFound/index.tsx index 544c763e4..029df3eb5 100644 --- a/packages/console/src/pages/NotFound/index.tsx +++ b/packages/console/src/pages/NotFound/index.tsx @@ -1,7 +1,20 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import errorImage from '@/assets/images/error.svg'; +import Card from '@/components/Card'; + +import * as styles from './index.module.scss'; const NotFound = () => { - return
NotFound
; + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return ( + + error +
{t('errors.page_not_found')}
+ + ); }; export default NotFound; diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 594101523..6927f7105 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -111,6 +111,7 @@ const translation = { }, errors: { something_went_wrong: 'Oops! Something went wrong', + page_not_found: 'Page not found', unknown_server_error: 'Unknown server error occurred.', empty: 'No data', missing_total_number: 'Unable to find Total-Number in response headers.', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index bc039576e..beff252cd 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -111,6 +111,7 @@ const translation = { }, errors: { something_went_wrong: '哎哟喂，遇到了一个错误', + page_not_found: '找不到页面', unknown_server_error: '服务器发生未知错误。', empty: '没有数据', missing_total_number: '无法从返回的头部信息中找到 Total-Number。', diff --git a/packages/ui/src/assets/icons/error.svg b/packages/ui/src/assets/icons/error.svg new file mode 100644 index 000000000..6d22a8ae7 --- /dev/null +++ b/packages/ui/src/assets/icons/error.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/pages/ErrorPage/index.tsx b/packages/ui/src/pages/ErrorPage/index.tsx index abf792f14..5ff673d01 100644 --- a/packages/ui/src/pages/ErrorPage/index.tsx +++ b/packages/ui/src/pages/ErrorPage/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { TFuncKey, useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import ErrorIcon from '@/assets/icons/error-icon.svg'; +import ErrorImage from '@/assets/icons/error.svg'; import Button from '@/components/Button'; import NavBar from '@/components/NavBar'; @@ -24,7 +24,7 @@ const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Pro
- +
{t(title)}
{errorMessage &&
{errorMessage}
}