feat(dev/main): ✨️更新错误页面展示内容

src/i18n/translations/en-US.json

@@ -1,9 +1,14 @@
 {
   "AppTitle": "AI Livesteam",
+  "go_to_home": "Go to Homepage" ,
   "Hello": "Hello",
   "cancel": "Cancel",
   "close": "Close",
   "service_error": "Service exception, please contact customer support.",
+  "error_401": "You do not have permission to access this page",
+  "error_403": "You do not have permission to access this page",
+  "error_404": "Page not found",
+  "error_500": "Service exception, please contact customer support.",
   "confirm": {
     "push_title": "Push Notice",
     "push_video": "Are you sure editing selected news?",

src/i18n/translations/zh-CN.json

@@ -1,9 +1,14 @@
 {
   "AppTitle": "数字人直播",
+  "go_to_home": "返回首页" ,
   "Hello": "你好",
   "cancel": "取消",
   "close": "关闭",
   "service_error": "新闻异常，无法生成，请咨询客服",
+  "error_401": "您没有权限访问本页面",
+  "error_403": "您没有权限访问本页面",
+  "error_404": "访问的页面不存在",
+  "error_500": "服务异常,请咨询客服.",
   "confirm": {
     "push_title": "推流提示",
     "push_video": "是否确定一键推流选中新闻视频？",

src/routes/error.tsx

@@ -1,47 +1,53 @@
-import React from "react";
+import React, {useMemo} from "react";
 import {isRouteErrorResponse, useNavigate, useRouteError} from 'react-router-dom';
 import {Button} from "antd";
 
 import error500 from "@/assets/images/error/Error500.png";
+import {useTranslation} from "react-i18next";
 // ==============================|| ELEMENT ERROR - COMMON ||============================== //
 const ErrorBoundary: React.FC<{
 	minHeight?: string | number;
 	errorCode?: 401 | 404 | 503
-}> = ({ errorCode}) => {
+}> = ({errorCode}) => {
+	const {t, i18n} = useTranslation()
 	const error = useRouteError() as Error;
-	let errorMessage = '服务异常,请稍后再试或者联系管理员.'
-
-	const errorConfig: {
-		[key: number]: string
-	} = {
-		401: '您没有权限访问本页面!',
-		404: '访问的页面不存在!',
-		503: '服务异常请联系管理员!',
-	}
-	if (isRouteErrorResponse(error)) {
-		if (errorConfig[error.status]) {
-			errorMessage = `Error ${error.status} - ${errorConfig[error.status]}`;
+	console.log(error)
+	const errorMessage = useMemo(() => {
+		let _message = t('error_500')
+		const errorConfig: {
+			[key: number]: string
+		} = {
+			401: t('error_401'),
+			403: t('error_403'),
+			404: t('error_404'),
+			500: t('error_500'),
 		}
-	}
-	if (errorCode) {
-		if (errorConfig[errorCode]) {
-			errorMessage = `Error ${errorCode} - ${errorConfig[errorCode]}`;
+		if (isRouteErrorResponse(error)) {
+			if (errorConfig[error.status]) {
+				_message = `Error ${error.status} - ${errorConfig[error.status]}`;
+			}
 		}
-	}
+		if (errorCode) {
+			if (errorConfig[errorCode]) {
+				_message = `Error ${errorCode} - ${errorConfig[errorCode]}`;
+			}
+		}
+		return _message
+	}, [i18n, errorCode])
 	const navigate = useNavigate()
 	const handleGoBack = () => {
 		navigate('/')
 	}
-	return (<div className="max-w-screen-lg mx-auto flex items-center h-screen">
-		<div className={'flex flex-row '}>
+	return (<div className="max-w-screen-lg mx-auto flex justify-center items-center h-screen">
+		<div className={'flex flex-row items-center'}>
 			<div className="flex-col">
 				<div className="sm:w-396px">
 					<img src={error500} alt="error" className="w-full"/>
 				</div>
 			</div>
-			<div className="flex-col md:w-full ml-10">
+			<div className="flex-col md:w-full ml-20">
 				<div className="text-center">
-					<div className="text-4xl">
+					<div className="text-3xl">
 						Internal Server Error
 					</div>
 					<div className="text-gray-400 my-5">
@@ -62,10 +68,10 @@ const ErrorBoundary: React.FC<{
 	                            whiteSpace: 'break-spaces'
                             }}>{error.stack}</code>
                         </pre>
-                    </div>}
-					<div className="flex flex-grow gap-2 mt-5 justify-center">
+          </div>}
+					<div className="flex flex-grow gap-2 mt-10 justify-center">
 						<Button type='primary' className="px-5" onClick={handleGoBack}>
-							<h1>返回首页</h1>
+							<h1>{t('go_to_home')}</h1>
 						</Button>
 					</div>
 				</div>

src/routes/index.tsx

@@ -16,7 +16,7 @@ import useGlobalConfig from "@/hooks/useGlobalConfig.ts";
 
 const router = createBrowserRouter([
 	...routes,
-	{path: '*', element: <ErrorBoundary/>}
+	{path: '*', element: <ErrorBoundary errorCode={404}/>}
 ], {
 	basename: import.meta.env.VITE_APP_BASE_NAME,
 	future: {
@@ -28,9 +28,9 @@ const router = createBrowserRouter([
 	}
 })
 
-const {globalConfig} = useGlobalConfig();
 // future={{v7_startTransition: true,v7_relativeSplatPath: true}}
 const AppRouter = () => {
+	const {globalConfig} = useGlobalConfig();
 	const {t,i18n} = useTranslation();
 	
 	useEffect(() => {