优化报错页面

README.md

@@ -148,4 +148,11 @@ http://localhost:4000/#/knowledgeChat?showMenu=false&chatMode=LOCAL&appId=292481
     const loginUrl = 'http://esc.sribs.com.cn:8080/esc-sso/oauth2.0/authorize?client_id=e97f94cf93761f4d69e8&response_type=code';
     const externalLoginUrl = loginUrl + `&redirect_uri=${encodeURIComponent(originUrl)}&state=${encodeURIComponent(fullUrl)}`;
     location.replace(externalLoginUrl);
-  }
+  }
+ # 分支对应项目
+  app-permission --- 目前线上
+  dev/app
+  dev/second
+  master
+  plusSingle --- 招聘
+  single

app/components/error.scss

@@ -0,0 +1,56 @@
+.error{
+    text-align: center;
+    padding: 50px;
+    font-family: Arial, sans-serif;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 50% !important;
+      .error-icon {
+      font-size: 3rem;
+      color: #dc3545;
+      margin-bottom: 0.3rem;
+    }
+    .error-title {
+      font-size: 1.8rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: #212529;
+    }
+    .error-desc {
+      font-size: 1rem;
+      line-height: 1.6;
+      margin-bottom: 2rem;
+      opacity: 0.8;
+    }
+    .error-actions {
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+    }
+     .btn {
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      border: none;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .btn-primary {
+      background-color: #007bff;
+      color: white;
+    }
+    .btn-primary:hover {
+      background-color: #0056b3;
+    }
+    .btn-outline {
+      background-color: transparent;
+      border: 1px solid #ced4da;
+      color: #495057;
+    }
+    .btn-outline:hover {
+      background-color: #f1f3f5;
+    }
+}

app/components/error.tsx

@@ -4,7 +4,9 @@ import React from "react";
 import { IconButton } from "./button";
 import ResetIcon from "../icons/reload.svg";
 import Locale from "../locales";
-
+import './error.scss';
+import { Button} from 'antd';
+import { Color } from "antd/es/color-picker";
 
 interface IErrorBoundaryState {
   hasError: boolean;
@@ -34,21 +36,41 @@ export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
       // Render error message
       return (
         <div className="error">
-          <h2>Oops, something went wrong!</h2>
-          <pre>
+          <div className="error-icon">❌</div>
+          <h2 className="error-title">哎呀，出了点小问题！</h2>
+          <p className="error-desc">系统遇到了意外状况，别担心，我们的技术团队已经收到通知。您可以尝试刷新页面或清除数据来解决问题。</p>
+          <div className="error-actions">
+            {/* <IconButton
+              icon={<ResetIcon />}
+              text="Clear All Data"
+              onClick={() => {
+                this.clearAndSaveData();
+              }}
+              bordered
+            /> */}
+            <Button className="btn" type="primary" onClick={()=>{
+              location.reload();
+            }}> 刷新页面</Button>
+            <Button className="btn btn-outline" onClick={() => {
+                this.clearAndSaveData();
+              }}>清除所有数据</Button>
+          </div>
+
+          {/* 注释掉错误信息 */}
+          {/* <pre>
             <code>{this.state.error?.toString()}</code>
             <code>{this.state.info?.componentStack}</code>
-          </pre>
+          </pre> */}
 
           <div style={{ display: "flex", justifyContent: "center" }}>
-            <IconButton
+            {/* <IconButton
               icon={<ResetIcon />}
               text="Clear All Data"
               onClick={() => {
                 this.clearAndSaveData();
               }}
               bordered
-            />
+            /> */}
           </div>
         </div>
       );