feat: 添加通用错误页面组件及样式，用于处理路由和应用错误。

src/components/common/ErrorPage/ErrorPage.css

@@ -44,6 +44,7 @@
     margin-bottom: 12px;
     background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 

src/components/common/ErrorPage/ErrorPage.tsx

@@ -5,66 +5,66 @@ import { Icon } from '@iconify/react';
 import './ErrorPage.css';
 
 const ErrorPage: React.FC = () => {
-  const error = useRouteError();
-  const navigate = useNavigate();
+    const error = useRouteError();
+    const navigate = useNavigate();
 
-  let errorMessage = 'An unexpected error has occurred.';
-  let errorStatus = 'Error';
+    let errorMessage = 'An unexpected error has occurred.';
+    let errorStatus = 'Error';
 
-  if (isRouteErrorResponse(error)) {
-    // Handle specific router errors (404, 401, etc.)
-    errorStatus = `${error.status}`;
-    errorMessage = error.statusText || error.data?.message || 'Page not found';
-  } else if (error instanceof Error) {
-    // Handle standard generic errors
-    errorMessage = error.message;
-    // Special handling for Minified React Error #310 or similar
-    if (errorMessage.includes('Minified React error')) {
-      errorMessage = 'Application encountered a rendering error. Please reload.';
+    if (isRouteErrorResponse(error)) {
+        // Handle specific router errors (404, 401, etc.)
+        errorStatus = `${error.status}`;
+        errorMessage = error.statusText || error.data?.message || 'Page not found';
+    } else if (error instanceof Error) {
+        // Handle standard generic errors
+        errorMessage = error.message;
+        // Special handling for Minified React Error #310 or similar
+        if (errorMessage.includes('Minified React error')) {
+            errorMessage = 'Application encountered a rendering error. Please reload.';
+        }
+    } else if (typeof error === 'string') {
+        errorMessage = error;
     }
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  }
 
-  const handleReload = () => {
-    window.location.reload();
-  };
+    const handleReload = () => {
+        window.location.reload();
+    };
 
-  const handleGoHome = () => {
-    navigate('/');
-    // Optional: reload specific parts or reset state if needed
-    // window.location.href = '/'; 
-  };
+    const handleGoHome = () => {
+        navigate('/');
+        // Optional: reload specific parts or reset state if needed
+        // window.location.href = '/'; 
+    };
 
-  return (
-    <div className="error-page">
-      <div className="error-card glass-panel">
-        <div className="error-icon-wrapper">
-          <Icon icon="solar:danger-triangle-bold-duotone" width="64" className="error-icon" />
+    return (
+        <div className="error-page">
+            <div className="error-card glass-panel">
+                <div className="error-icon-wrapper">
+                    <Icon icon="solar:danger-triangle-bold-duotone" width="64" className="error-icon" />
+                </div>
+
+                <h1 className="error-title">{errorStatus === 'Error' ? 'Oops!' : errorStatus}</h1>
+                <p className="error-message">{errorMessage}</p>
+
+                <div className="error-actions">
+                    <button onClick={handleReload} className="error-btn error-btn--primary">
+                        <Icon icon="solar:refresh-circle-bold-duotone" width="20" />
+                        Reload Page
+                    </button>
+                    <button onClick={handleGoHome} className="error-btn error-btn--secondary">
+                        <Icon icon="solar:home-smile-bold-duotone" width="20" />
+                        Go Home
+                    </button>
+                </div>
+
+                {import.meta.env.DEV && error instanceof Error && (
+                    <div className="error-stack">
+                        <pre>{error.stack}</pre>
+                    </div>
+                )}
+            </div>
         </div>
-        
-        <h1 className="error-title">{errorStatus === 'Error' ? 'Oops!' : errorStatus}</h1>
-        <p className="error-message">{errorMessage}</p>
-        
-        <div className="error-actions">
-          <button onClick={handleReload} className="error-btn error-btn--primary">
-            <Icon icon="solar:refresh-circle-bold-duotone" width="20" />
-            Reload Page
-          </button>
-          <button onClick={handleGoHome} className="error-btn error-btn--secondary">
-            <Icon icon="solar:home-smile-bold-duotone" width="20" />
-            Go Home
-          </button>
-        </div>
-
-        {process.env.NODE_ENV === 'development' && error instanceof Error && (
-          <div className="error-stack">
-            <pre>{error.stack}</pre>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+    );
 };
 
 export default ErrorPage;