♻️Refactor: NotFound Page

web/src/i18n/locales/en.json

@@ -1388,5 +1388,6 @@
   "基于New API的项目": "Projects Based on New API",
   "版权所有": "All rights reserved",
   "设计与开发由": "Designed & Developed with love by",
-  "演示站点": "Demo Site"
+  "演示站点": "Demo Site",
+  "页面未找到，请检查您的浏览器地址是否正确": "Page not found, please check if your browser address is correct"
 }

web/src/pages/NotFound/index.js

@@ -1,13 +1,19 @@
 import React from 'react';
-import { Message } from 'semantic-ui-react';
+import { Empty } from '@douyinfe/semi-ui';
+import { IllustrationNotFound, IllustrationNotFoundDark } from '@douyinfe/semi-illustrations';
+import { useTranslation } from 'react-i18next';
 
-const NotFound = () => (
-  <>
-    <Message negative>
-      <Message.Header>页面不存在</Message.Header>
-      <p>请检查你的浏览器地址是否正确</p>
-    </Message>
-  </>
-);
+const NotFound = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex justify-center items-center h-screen p-8">
+      <Empty
+        image={<IllustrationNotFound style={{ width: 250, height: 250 }} />}
+        darkModeImage={<IllustrationNotFoundDark style={{ width: 250, height: 250 }} />}
+        description={t('页面未找到，请检查您的浏览器地址是否正确')}
+      />
+    </div>
+  );
+};
 
 export default NotFound;