优化评查详情，新增信息提示框组件
This commit is contained in:
+112
-25
@@ -1,5 +1,14 @@
|
||||
// app/components/ui/Modal.tsx
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import modalStyles from '~/styles/components/modal.css?url';
|
||||
|
||||
// 导出样式
|
||||
export function links() {
|
||||
return [{ rel: 'stylesheet', href: modalStyles }];
|
||||
}
|
||||
|
||||
// 模态框尺寸
|
||||
export type ModalSize = 'small' | 'medium' | 'large' | 'full';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -8,65 +17,143 @@ interface ModalProps {
|
||||
children: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
width?: number | string;
|
||||
size?: ModalSize;
|
||||
className?: string;
|
||||
closeOnEsc?: boolean;
|
||||
closeOnBackdropClick?: boolean;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, title, children, footer, width = 500 }: ModalProps) {
|
||||
// 点击ESC键关闭模态框
|
||||
useEffect(() => {
|
||||
const handleEsc = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleEsc);
|
||||
return () => window.removeEventListener('keydown', handleEsc);
|
||||
}, [isOpen, onClose]);
|
||||
export function Modal({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
children,
|
||||
footer,
|
||||
width,
|
||||
size = 'medium',
|
||||
className = '',
|
||||
closeOnEsc = true,
|
||||
closeOnBackdropClick = true
|
||||
}: ModalProps) {
|
||||
// 引用模态框内容元素
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
// 保存之前的活动元素，以便关闭时恢复焦点
|
||||
const previousActiveElement = useRef<HTMLElement | null>(null);
|
||||
|
||||
// 禁用背景滚动
|
||||
// 自动聚焦第一个可聚焦元素并保存先前的焦点元素
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
previousActiveElement.current = document.activeElement as HTMLElement;
|
||||
|
||||
if (contentRef.current) {
|
||||
const focusableElements = contentRef.current.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
|
||||
if (focusableElements.length > 0) {
|
||||
(focusableElements[0] as HTMLElement).focus();
|
||||
} else {
|
||||
contentRef.current.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// 当模态框打开时禁止背景滚动
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
} else if (previousActiveElement.current) {
|
||||
// 当模态框关闭时，恢复之前的焦点
|
||||
previousActiveElement.current.focus();
|
||||
// 恢复背景滚动
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// 处理背景点击事件
|
||||
const handleBackdropClick = () => {
|
||||
if (closeOnBackdropClick) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
// 获取尺寸样式类
|
||||
const sizeClass = width ? '' : `modal-${size}`;
|
||||
|
||||
// 计算宽度样式
|
||||
const widthStyle = width ?
|
||||
{ width: typeof width === 'number' ? `${width}px` : width, maxWidth: typeof width === 'number' ? `${width}px` : width } : {};
|
||||
|
||||
// 使用useEffect添加键盘事件监听器
|
||||
useEffect(() => {
|
||||
const handleEscKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && closeOnEsc) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscKey);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscKey);
|
||||
};
|
||||
}, [closeOnEsc, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="modal-backdrop"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
style={{ maxWidth: typeof width === 'number' ? `${width}px` : width }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
ref={contentRef}
|
||||
className={`modal-content ${sizeClass} ${className}`}
|
||||
style={widthStyle}
|
||||
tabIndex={-1}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h3 className="text-lg font-medium">{title}</h3>
|
||||
<h3 id="modal-title" className="modal-title">{title}</h3>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-500"
|
||||
className="modal-close"
|
||||
onClick={onClose}
|
||||
aria-label="关闭"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<i className="ri-close-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body py-4">
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
</div>
|
||||
{footer && (
|
||||
<div className="modal-footer flex justify-end space-x-2 pt-4 border-t border-gray-100">
|
||||
<div className="modal-footer">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* 背景点击处理 */}
|
||||
<button
|
||||
className="modal-backdrop-button"
|
||||
onClick={handleBackdropClick}
|
||||
aria-label="关闭模态框"
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'default',
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -54,6 +54,7 @@ export function Toast({
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
|
||||
const [messageLines, setMessageLines] = useState<number>(1);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
// 在客户端渲染时获取 portal 容器
|
||||
useEffect(() => {
|
||||
@@ -89,7 +90,7 @@ export function Toast({
|
||||
|
||||
// 自动关闭
|
||||
useEffect(() => {
|
||||
if (isOpen && autoClose) {
|
||||
if (isOpen && autoClose && !isHovered) {
|
||||
// 根据消息长度调整显示时间，长消息显示更长时间
|
||||
const adjustedDelay = Math.min(
|
||||
autoCloseDelay + (message.length > 100 ? 2000 : 0),
|
||||
@@ -101,7 +102,16 @@ export function Toast({
|
||||
}, adjustedDelay);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isOpen, autoClose, autoCloseDelay, handleClose, message]);
|
||||
}, [isOpen, autoClose, autoCloseDelay, handleClose, message, isHovered]);
|
||||
|
||||
// 鼠标悬停处理
|
||||
const handleMouseEnter = () => {
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
// 渲染图标
|
||||
const renderIcon = () => {
|
||||
@@ -138,10 +148,10 @@ export function Toast({
|
||||
return createPortal(
|
||||
<div
|
||||
className={`toast toast-${type} ${isClosing ? 'closing' : ''} ${className} ${messageLines > 3 ? 'toast-multiline' : ''}`}
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
onKeyDown={handleKeyDown}
|
||||
tabIndex={0}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<div className="toast-content">
|
||||
<div className="toast-icon-wrapper">
|
||||
@@ -155,6 +165,7 @@ export function Toast({
|
||||
className="toast-close"
|
||||
onClick={handleClose}
|
||||
aria-label="关闭"
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<i className="ri-close-line"></i>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user