feat: 添加了通用的错误页面组件,用于处理路由和应用错误并提供重载和返回首页功能
This commit is contained in:
@@ -36,22 +36,93 @@ const ErrorPage: React.FC = () => {
|
|||||||
// window.location.href = '/';
|
// 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 (
|
return (
|
||||||
<div className="error-page">
|
<div className="error-page" style={styles.page}>
|
||||||
<div className="error-card glass-panel">
|
<div className="error-card glass-panel" style={styles.card}>
|
||||||
<div className="error-icon-wrapper">
|
<div className="error-icon-wrapper" style={styles.iconWrapper}>
|
||||||
<Icon icon="solar:danger-triangle-bold-duotone" width="64" className="error-icon" />
|
<Icon icon="solar:danger-triangle-bold-duotone" width="64" className="error-icon" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="error-title">{errorStatus === 'Error' ? 'Oops!' : errorStatus}</h1>
|
<h1 className="error-title" style={styles.title}>{errorStatus === 'Error' ? 'Oops!' : errorStatus}</h1>
|
||||||
<p className="error-message">{errorMessage}</p>
|
<p className="error-message" style={styles.message}>{errorMessage}</p>
|
||||||
|
|
||||||
<div className="error-actions">
|
<div className="error-actions" style={styles.actions}>
|
||||||
<button onClick={handleReload} className="error-btn error-btn--primary">
|
<button onClick={handleReload} className="error-btn error-btn--primary" style={{ ...styles.button, ...styles.btnPrimary }}>
|
||||||
<Icon icon="solar:refresh-circle-bold-duotone" width="20" />
|
<Icon icon="solar:refresh-circle-bold-duotone" width="20" />
|
||||||
Reload Page
|
Reload Page
|
||||||
</button>
|
</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" />
|
<Icon icon="solar:home-smile-bold-duotone" width="20" />
|
||||||
Go Home
|
Go Home
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user