zhongyidian
4ce7520066
- Added keyframes and animation for a smooth scale-in effect in the Tailwind configuration. - Updated Image component to improve quality handling and style definitions. - Introduced WordViewer and WordViewerModal components for document viewing capabilities. - Enhanced Modal component to support embedded mode with customizable position and dimensions. - Integrated IframeModal across various pages for user assistance and content display. - Updated Content and Menu pages to utilize new components and improve user interaction. - Added utility function to retrieve public paths for resources.
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { X } from "lucide-react";
|
|
import { WordViewer } from "./WordViewer";
|
|
import { useEffect } from "react";
|
|
|
|
interface WordViewerModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
docPath: string;
|
|
title?: string;
|
|
}
|
|
|
|
export const WordViewerModal = ({
|
|
isOpen,
|
|
onClose,
|
|
docPath,
|
|
title = "活动文稿",
|
|
}: WordViewerModalProps) => {
|
|
// 监听 ESC 键关闭弹窗
|
|
useEffect(() => {
|
|
const handleEscape = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape" && isOpen) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", handleEscape);
|
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
}, [isOpen, onClose]);
|
|
|
|
// 阻止背景滚动
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "unset";
|
|
}
|
|
|
|
return () => {
|
|
document.body.style.overflow = "unset";
|
|
};
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* 背景遮罩 */}
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* 弹窗内容 */}
|
|
<div className="relative w-[90vw] h-[90vh] bg-white rounded-2xl shadow-2xl overflow-hidden">
|
|
{/* 头部 */}
|
|
<div className="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-[#82B2D6] to-[#6a9bc4] text-white">
|
|
<h2 className="text-2xl font-bold">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-white/20 rounded-lg transition-colors"
|
|
aria-label="关闭"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 文档内容区域 */}
|
|
<div className="h-[calc(100%-64px)] overflow-hidden">
|
|
<WordViewer docPath={docPath} className="w-full h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|