From 3459dc623741ef87943f385c71b685f58e35b987 Mon Sep 17 00:00:00 2001
From: admin <1297598740@qq.com>
Date: Fri, 30 Jan 2026 10:15:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=86=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E9=94=99=E8=AF=AF=E9=A1=B5=E9=9D=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E7=94=A8=E4=BA=8E=E5=A4=84=E7=90=86=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E5=92=8C=E5=BA=94=E7=94=A8=E9=94=99=E8=AF=AF=E5=B9=B6?=
 =?UTF-8?q?=E6=8F=90=E4=BE=9B=E9=87=8D=E8=BD=BD=E5=92=8C=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ErrorPage/ErrorPage.tsx | 87 +++++++++++++++++--
 1 file changed, 79 insertions(+), 8 deletions(-)

diff --git a/src/components/common/ErrorPage/ErrorPage.tsx b/src/components/common/ErrorPage/ErrorPage.tsx
index b68c4db..1cde590 100644
--- a/src/components/common/ErrorPage/ErrorPage.tsx
+++ b/src/components/common/ErrorPage/ErrorPage.tsx
@@ -36,22 +36,93 @@ const ErrorPage: React.FC = () => {
         // window.location.href = '/'; 
     };
 
+    const styles = {
+        page: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '100vh',
+            padding: '24px',
+            backgroundColor: '#f8fafc',
+            color: '#334155',
+            fontFamily: 'system-ui, -apple-system, sans-serif'
+        },
+        card: {
+            maxWidth: '480px',
+            width: '100%',
+            padding: '48px 32px',
+            textAlign: 'center' as const,
+            background: 'rgba(255, 255, 255, 0.9)',
+            backdropFilter: 'blur(12px)',
+            borderRadius: '24px',
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.1)',
+            border: '1px solid rgba(255, 255, 255, 0.5)'
+        },
+        iconWrapper: {
+            display: 'inline-flex',
+            padding: '16px',
+            borderRadius: '50%',
+            backgroundColor: 'rgba(239, 68, 68, 0.1)',
+            color: '#ef4444',
+            marginBottom: '24px'
+        },
+        title: {
+            fontSize: '32px',
+            fontWeight: '700',
+            marginBottom: '12px',
+            margin: '0 0 12px 0',
+            color: '#1e293b'
+        },
+        message: {
+            color: '#64748b',
+            fontSize: '16px',
+            lineHeight: '1.6',
+            marginBottom: '32px'
+        },
+        actions: {
+            display: 'flex',
+            gap: '16px',
+            justifyContent: 'center'
+        },
+        button: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '12px 24px',
+            borderRadius: '12px',
+            fontWeight: '600',
+            fontSize: '14px',
+            cursor: 'pointer',
+            border: 'none',
+            transition: 'all 0.2s ease'
+        },
+        btnPrimary: {
+            backgroundColor: '#3b82f6',
+            color: 'white',
+            boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)'
+        },
+        btnSecondary: {
+            backgroundColor: '#f1f5f9',
+            color: '#334155'
+        }
+    };
+
     return (
-        <div className="error-page">
-            <div className="error-card glass-panel">
-                <div className="error-icon-wrapper">
+        <div className="error-page" style={styles.page}>
+            <div className="error-card glass-panel" style={styles.card}>
+                <div className="error-icon-wrapper" style={styles.iconWrapper}>
                     <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>
+                <h1 className="error-title" style={styles.title}>{errorStatus === 'Error' ? 'Oops!' : errorStatus}</h1>
+                <p className="error-message" style={styles.message}>{errorMessage}</p>
 
-                <div className="error-actions">
-                    <button onClick={handleReload} className="error-btn error-btn--primary">
+                <div className="error-actions" style={styles.actions}>
+                    <button onClick={handleReload} className="error-btn error-btn--primary" style={{ ...styles.button, ...styles.btnPrimary }}>
                         <Icon icon="solar:refresh-circle-bold-duotone" width="20" />
                         Reload Page
                     </button>
-                    <button onClick={handleGoHome} className="error-btn error-btn--secondary">
+                    <button onClick={handleGoHome} className="error-btn error-btn--secondary" style={{ ...styles.button, ...styles.btnSecondary }}>
                         <Icon icon="solar:home-smile-bold-duotone" width="20" />
                         Go Home
                     </button>