ErrorHandler.css•6.82 kB
/* 错误处理器主容器 */
.error-handler {
position: fixed;
top: 20px;
right: 20px;
max-width: 400px;
min-width: 300px;
background: white;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border-left: 4px solid #ef4444;
z-index: 1000;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
}
.error-handler.visible {
transform: translateX(0);
opacity: 1;
}
/* 错误类型样式 */
.error-handler.network {
border-left-color: #f59e0b;
}
.error-handler.validation {
border-left-color: #f59e0b;
}
.error-handler.server {
border-left-color: #ef4444;
}
.error-handler.client {
border-left-color: #8b5cf6;
}
.error-handler.unknown {
border-left-color: #6b7280;
}
/* 错误内容 */
.error-content {
padding: 16px;
}
.error-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.error-icon {
font-size: 20px;
flex-shrink: 0;
}
.error-title {
flex: 1;
font-weight: 600;
font-size: 16px;
color: #374151;
}
.error-close {
background: none;
border: none;
font-size: 16px;
color: #6b7280;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: background-color 0.2s;
}
.error-close:hover {
background-color: #f3f4f6;
color: #374151;
}
/* 错误主体 */
.error-body {
margin-bottom: 16px;
}
.error-message {
font-size: 14px;
color: #374151;
line-height: 1.5;
margin-bottom: 8px;
}
.error-code {
font-size: 12px;
color: #6b7280;
font-family: monospace;
background: #f3f4f6;
padding: 4px 8px;
border-radius: 4px;
margin-bottom: 8px;
display: inline-block;
}
.error-suggestion {
font-size: 13px;
color: #6b7280;
font-style: italic;
margin-bottom: 8px;
}
.error-details {
margin-top: 12px;
padding: 12px;
background: #f9fafb;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.error-details-header {
font-size: 12px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.error-details-content {
font-size: 12px;
color: #6b7280;
font-family: monospace;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
max-height: 150px;
overflow-y: auto;
}
.error-toggle-details {
background: none;
border: none;
color: #3b82f6;
font-size: 12px;
cursor: pointer;
text-decoration: underline;
padding: 0;
margin-top: 8px;
}
.error-toggle-details:hover {
color: #1d4ed8;
}
/* 错误操作按钮 */
.error-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.error-action {
padding: 8px 12px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 4px;
}
.error-action.retry {
background: #3b82f6;
color: white;
}
.error-action.retry:hover {
background: #2563eb;
}
.error-action.report {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.error-action.report:hover {
background: #e5e7eb;
}
.error-action.dismiss {
background: #f3f4f6;
color: #6b7280;
border: 1px solid #d1d5db;
}
.error-action.dismiss:hover {
background: #e5e7eb;
color: #374151;
}
/* 错误提示框 */
.error-toast {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 8px;
max-width: 350px;
z-index: 1000;
transform: translateY(100%);
opacity: 0;
transition: all 0.3s ease;
}
.error-toast.visible {
transform: translateY(0);
opacity: 1;
}
.error-toast.error {
border-left: 4px solid #ef4444;
}
.error-toast.warning {
border-left: 4px solid #f59e0b;
}
.error-toast.info {
border-left: 4px solid #3b82f6;
}
.toast-icon {
font-size: 16px;
flex-shrink: 0;
}
.toast-message {
flex: 1;
font-size: 14px;
color: #374151;
line-height: 1.4;
}
.toast-close {
background: none;
border: none;
font-size: 14px;
color: #6b7280;
cursor: pointer;
padding: 2px;
border-radius: 2px;
transition: background-color 0.2s;
}
.toast-close:hover {
background-color: #f3f4f6;
color: #374151;
}
/* 错误边界 */
.error-boundary {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 20px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
margin: 20px;
}
.error-boundary-content {
text-align: center;
max-width: 400px;
}
.error-boundary-icon {
font-size: 48px;
margin-bottom: 16px;
}
.error-boundary-content h3 {
color: #dc2626;
margin-bottom: 8px;
font-size: 18px;
}
.error-boundary-content p {
color: #6b7280;
margin-bottom: 16px;
line-height: 1.5;
}
.error-boundary-actions {
margin-bottom: 16px;
}
.error-boundary-details {
text-align: left;
margin-top: 16px;
padding: 12px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
.error-boundary-details summary {
cursor: pointer;
font-weight: 500;
color: #374151;
margin-bottom: 8px;
}
.error-boundary-details pre {
font-size: 12px;
color: #6b7280;
white-space: pre-wrap;
word-break: break-word;
margin: 8px 0;
padding: 8px;
background: #f9fafb;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
}
/* 响应式设计 */
@media (max-width: 480px) {
.error-handler {
left: 10px;
right: 10px;
max-width: none;
min-width: auto;
}
.error-toast {
left: 10px;
right: 10px;
max-width: none;
}
.error-actions {
flex-direction: column;
}
.error-action {
width: 100%;
justify-content: center;
}
}
/* 动画效果 */
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOutDown {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
}
/* 滚动条样式 */
.error-details-content::-webkit-scrollbar,
.error-boundary-details pre::-webkit-scrollbar {
width: 6px;
}
.error-details-content::-webkit-scrollbar-track,
.error-boundary-details pre::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.error-details-content::-webkit-scrollbar-thumb,
.error-boundary-details pre::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.error-details-content::-webkit-scrollbar-thumb:hover,
.error-boundary-details pre::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}