feat(UI): 添加模态框、图片灯箱和文档预览组件
Modal 组件： - 支持 ESC 键关闭和点击遮罩关闭 - 可配置关闭按钮显示、最大宽度、全屏模式 - 添加淡入和缩放动画效果 ImageLightbox 组件： - 支持多图片浏览和左右键导航 - 实现缩放、下载功能 - 支持触摸手势滑动切换 - 底部指示点和图片计数显示 DocumentPreview 组件： - 支持代码文件语法高亮显示 - Markdown 文件渲染预览 - 提供复制和下载功能
This commit is contained in:
gaoziman
parent
e99c72f02a
commit
cb01e2dffb
332
src/components/ui/DocumentPreview.tsx
Normal file
332
src/components/ui/DocumentPreview.tsx
Normal file
@ -0,0 +1,332 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useCallback, useEffect } from 'react';
|
||||||
|
import { X, Copy, Download, Check, FileText, FileCode, File } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { CodeBlock } from '@/components/markdown/CodeBlock';
|
||||||
|
import { MarkdownRenderer } from '@/components/markdown/MarkdownRenderer';
|
||||||
|
|
||||||
|
export interface DocumentData {
|
||||||
|
name: string;
|
||||||
|
content: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DocumentPreviewProps {
|
||||||
|
documentData: DocumentData | null;
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据文件扩展名获取语言
|
||||||
|
function getLanguageFromFileName(fileName: string): string {
|
||||||
|
const ext = fileName.split('.').pop()?.toLowerCase() || '';
|
||||||
|
const languageMap: Record<string, string> = {
|
||||||
|
// JavaScript/TypeScript
|
||||||
|
js: 'javascript',
|
||||||
|
jsx: 'jsx',
|
||||||
|
ts: 'typescript',
|
||||||
|
tsx: 'tsx',
|
||||||
|
mjs: 'javascript',
|
||||||
|
cjs: 'javascript',
|
||||||
|
// Python
|
||||||
|
py: 'python',
|
||||||
|
pyw: 'python',
|
||||||
|
// Web
|
||||||
|
html: 'markup',
|
||||||
|
htm: 'markup',
|
||||||
|
xml: 'markup',
|
||||||
|
svg: 'markup',
|
||||||
|
css: 'css',
|
||||||
|
scss: 'scss',
|
||||||
|
sass: 'scss',
|
||||||
|
less: 'css',
|
||||||
|
// Data
|
||||||
|
json: 'json',
|
||||||
|
yaml: 'yaml',
|
||||||
|
yml: 'yaml',
|
||||||
|
toml: 'yaml',
|
||||||
|
// Shell
|
||||||
|
sh: 'bash',
|
||||||
|
bash: 'bash',
|
||||||
|
zsh: 'bash',
|
||||||
|
fish: 'bash',
|
||||||
|
// C family
|
||||||
|
c: 'c',
|
||||||
|
h: 'c',
|
||||||
|
cpp: 'cpp',
|
||||||
|
cc: 'cpp',
|
||||||
|
cxx: 'cpp',
|
||||||
|
hpp: 'cpp',
|
||||||
|
cs: 'csharp',
|
||||||
|
// Others
|
||||||
|
java: 'java',
|
||||||
|
go: 'go',
|
||||||
|
rs: 'rust',
|
||||||
|
rb: 'ruby',
|
||||||
|
php: 'php',
|
||||||
|
sql: 'sql',
|
||||||
|
md: 'markdown',
|
||||||
|
markdown: 'markdown',
|
||||||
|
// Config
|
||||||
|
env: 'bash',
|
||||||
|
ini: 'ini',
|
||||||
|
conf: 'ini',
|
||||||
|
// Plain text
|
||||||
|
txt: 'text',
|
||||||
|
log: 'text',
|
||||||
|
csv: 'text',
|
||||||
|
};
|
||||||
|
return languageMap[ext] || 'text';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断文件类型
|
||||||
|
function getFileType(fileName: string): 'code' | 'markdown' | 'pdf' | 'text' {
|
||||||
|
const ext = fileName.split('.').pop()?.toLowerCase() || '';
|
||||||
|
|
||||||
|
if (ext === 'pdf') {
|
||||||
|
return 'pdf';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ext === 'md' || ext === 'markdown') {
|
||||||
|
return 'markdown';
|
||||||
|
}
|
||||||
|
|
||||||
|
const codeExtensions = [
|
||||||
|
'js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs',
|
||||||
|
'py', 'pyw',
|
||||||
|
'html', 'htm', 'xml', 'svg', 'css', 'scss', 'sass', 'less',
|
||||||
|
'json', 'yaml', 'yml', 'toml',
|
||||||
|
'sh', 'bash', 'zsh', 'fish',
|
||||||
|
'c', 'h', 'cpp', 'cc', 'cxx', 'hpp', 'cs',
|
||||||
|
'java', 'go', 'rs', 'rb', 'php', 'sql',
|
||||||
|
'env', 'ini', 'conf',
|
||||||
|
];
|
||||||
|
|
||||||
|
if (codeExtensions.includes(ext)) {
|
||||||
|
return 'code';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'text';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据文件类型获取图标
|
||||||
|
function getFileIcon(type: 'code' | 'markdown' | 'pdf' | 'text') {
|
||||||
|
switch (type) {
|
||||||
|
case 'code':
|
||||||
|
return FileCode;
|
||||||
|
case 'markdown':
|
||||||
|
case 'text':
|
||||||
|
return FileText;
|
||||||
|
case 'pdf':
|
||||||
|
return File;
|
||||||
|
default:
|
||||||
|
return FileText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化文件大小
|
||||||
|
function formatFileSize(bytes: number): string {
|
||||||
|
if (bytes === 0) return '0 B';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DocumentPreview({ documentData, isOpen, onClose }: DocumentPreviewProps) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
// ESC 关闭
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.document.addEventListener('keydown', handleKeyDown);
|
||||||
|
window.document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
window.document.body.style.overflow = '';
|
||||||
|
};
|
||||||
|
}, [isOpen, onClose]);
|
||||||
|
|
||||||
|
// 复制内容
|
||||||
|
const handleCopy = useCallback(async () => {
|
||||||
|
if (!documentData) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(documentData.content);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to copy:', error);
|
||||||
|
}
|
||||||
|
}, [documentData]);
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const handleDownload = useCallback(() => {
|
||||||
|
if (!documentData) return;
|
||||||
|
|
||||||
|
const blob = new Blob([documentData.content], { type: 'text/plain;charset=utf-8' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = window.document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = documentData.name;
|
||||||
|
window.document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
window.document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}, [documentData]);
|
||||||
|
|
||||||
|
if (!isOpen || !documentData) return null;
|
||||||
|
|
||||||
|
const fileType = getFileType(documentData.name);
|
||||||
|
const language = getLanguageFromFileName(documentData.name);
|
||||||
|
const Icon = getFileIcon(fileType);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in-fast"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
{/* 内容区域 */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'relative bg-[var(--color-bg-primary)] rounded-xl shadow-2xl',
|
||||||
|
'animate-scale-in-fast',
|
||||||
|
'w-[90vw] max-w-4xl max-h-[90vh] flex flex-col overflow-hidden'
|
||||||
|
)}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{/* 头部 */}
|
||||||
|
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--color-border)]">
|
||||||
|
{/* 文件信息 */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 flex items-center justify-center rounded-lg bg-[var(--color-primary-light)]">
|
||||||
|
<Icon size={20} className="text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-base font-medium text-[var(--color-text-primary)] truncate max-w-[300px]">
|
||||||
|
{documentData.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-[var(--color-text-tertiary)]">
|
||||||
|
{formatFileSize(documentData.size)} · {language.toUpperCase()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 操作按钮 */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* 复制按钮（PDF 不支持复制） */}
|
||||||
|
{fileType !== 'pdf' && (
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm',
|
||||||
|
'bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-hover)]',
|
||||||
|
'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'transition-colors duration-150'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<>
|
||||||
|
<Check size={16} className="text-green-500" />
|
||||||
|
<span className="text-green-500">已复制</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy size={16} />
|
||||||
|
<span>复制</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 下载按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={handleDownload}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm',
|
||||||
|
'bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-hover)]',
|
||||||
|
'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'transition-colors duration-150'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Download size={16} />
|
||||||
|
<span>下载</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className={cn(
|
||||||
|
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)] transition-colors duration-150'
|
||||||
|
)}
|
||||||
|
aria-label="关闭"
|
||||||
|
>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 内容区域 */}
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{fileType === 'code' && (
|
||||||
|
<div className="p-0">
|
||||||
|
<CodeBlock
|
||||||
|
code={documentData.content}
|
||||||
|
language={language}
|
||||||
|
showLineNumbers={true}
|
||||||
|
className="my-0 rounded-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{fileType === 'markdown' && (
|
||||||
|
<div className="p-6">
|
||||||
|
<MarkdownRenderer content={documentData.content} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{fileType === 'text' && (
|
||||||
|
<div className="p-6">
|
||||||
|
<pre className="text-sm text-[var(--color-text-primary)] whitespace-pre-wrap font-mono leading-relaxed">
|
||||||
|
{documentData.content}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{fileType === 'pdf' && (
|
||||||
|
<div className="h-full min-h-[60vh] flex items-center justify-center bg-[var(--color-bg-secondary)]">
|
||||||
|
<div className="text-center p-8">
|
||||||
|
<File size={48} className="mx-auto mb-4 text-[var(--color-text-tertiary)]" />
|
||||||
|
<p className="text-[var(--color-text-secondary)] mb-2">
|
||||||
|
PDF 预览暂不支持
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-[var(--color-text-tertiary)]">
|
||||||
|
请点击下载按钮查看文件
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部提示 */}
|
||||||
|
<div className="px-5 py-3 border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
|
||||||
|
<p className="text-xs text-[var(--color-text-tertiary)] text-center">
|
||||||
|
ESC 关闭 · 点击外部区域关闭
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
297
src/components/ui/ImageLightbox.tsx
Normal file
297
src/components/ui/ImageLightbox.tsx
Normal file
@ -0,0 +1,297 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
|
import { X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface ImageLightboxProps {
|
||||||
|
images: string[];
|
||||||
|
initialIndex?: number;
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ImageLightbox({
|
||||||
|
images,
|
||||||
|
initialIndex = 0,
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
}: ImageLightboxProps) {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||||
|
const [isZoomed, setIsZoomed] = useState(false);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// 触摸手势相关
|
||||||
|
const touchStartX = useRef<number>(0);
|
||||||
|
const touchEndX = useRef<number>(0);
|
||||||
|
const minSwipeDistance = 50;
|
||||||
|
|
||||||
|
// 重置索引
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
setCurrentIndex(initialIndex);
|
||||||
|
setIsZoomed(false);
|
||||||
|
}
|
||||||
|
}, [isOpen, initialIndex]);
|
||||||
|
|
||||||
|
// 上一张
|
||||||
|
const goToPrevious = useCallback(() => {
|
||||||
|
setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
|
||||||
|
setIsZoomed(false);
|
||||||
|
}, [images.length]);
|
||||||
|
|
||||||
|
// 下一张
|
||||||
|
const goToNext = useCallback(() => {
|
||||||
|
setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
|
||||||
|
setIsZoomed(false);
|
||||||
|
}, [images.length]);
|
||||||
|
|
||||||
|
// 键盘导航
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'Escape':
|
||||||
|
onClose();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
goToPrevious();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
goToNext();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
};
|
||||||
|
}, [isOpen, onClose, goToPrevious, goToNext]);
|
||||||
|
|
||||||
|
// 触摸事件处理
|
||||||
|
const handleTouchStart = (e: React.TouchEvent) => {
|
||||||
|
touchStartX.current = e.touches[0].clientX;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchMove = (e: React.TouchEvent) => {
|
||||||
|
touchEndX.current = e.touches[0].clientX;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchEnd = () => {
|
||||||
|
const distance = touchStartX.current - touchEndX.current;
|
||||||
|
|
||||||
|
if (Math.abs(distance) > minSwipeDistance) {
|
||||||
|
if (distance > 0) {
|
||||||
|
// 向左滑动 -> 下一张
|
||||||
|
goToNext();
|
||||||
|
} else {
|
||||||
|
// 向右滑动 -> 上一张
|
||||||
|
goToPrevious();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载图片
|
||||||
|
const handleDownload = async () => {
|
||||||
|
const imageUrl = images[currentIndex];
|
||||||
|
try {
|
||||||
|
// 处理 base64 或 URL
|
||||||
|
if (imageUrl.startsWith('data:')) {
|
||||||
|
// Base64 图片
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = imageUrl;
|
||||||
|
link.download = `image-${currentIndex + 1}.png`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} else {
|
||||||
|
// URL 图片
|
||||||
|
const response = await fetch(imageUrl);
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `image-${currentIndex + 1}.png`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('下载图片失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换缩放
|
||||||
|
const toggleZoom = () => {
|
||||||
|
setIsZoomed(!isZoomed);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen || images.length === 0) return null;
|
||||||
|
|
||||||
|
const currentImage = images[currentIndex];
|
||||||
|
const hasMultipleImages = images.length > 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in-fast"
|
||||||
|
onClick={onClose}
|
||||||
|
onTouchStart={handleTouchStart}
|
||||||
|
onTouchMove={handleTouchMove}
|
||||||
|
onTouchEnd={handleTouchEnd}
|
||||||
|
>
|
||||||
|
{/* 顶部工具栏 */}
|
||||||
|
<div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between p-4 bg-gradient-to-b from-black/50 to-transparent">
|
||||||
|
{/* 左侧：图片计数 */}
|
||||||
|
<div className="text-white/90 text-sm font-medium">
|
||||||
|
{hasMultipleImages && (
|
||||||
|
<span>{currentIndex + 1} / {images.length}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧：操作按钮 */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* 缩放按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
toggleZoom();
|
||||||
|
}}
|
||||||
|
className="w-10 h-10 flex items-center justify-center rounded-full bg-black/30 text-white/90 hover:bg-black/50 hover:text-white transition-colors"
|
||||||
|
title={isZoomed ? '缩小' : '放大'}
|
||||||
|
>
|
||||||
|
{isZoomed ? <ZoomOut size={20} /> : <ZoomIn size={20} />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 下载按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleDownload();
|
||||||
|
}}
|
||||||
|
className="w-10 h-10 flex items-center justify-center rounded-full bg-black/30 text-white/90 hover:bg-black/50 hover:text-white transition-colors"
|
||||||
|
title="下载图片"
|
||||||
|
>
|
||||||
|
<Download size={20} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
|
className="w-10 h-10 flex items-center justify-center rounded-full bg-black/30 text-white/90 hover:bg-black/50 hover:text-white transition-colors"
|
||||||
|
title="关闭"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 图片容器 */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'relative flex items-center justify-center w-full h-full px-16',
|
||||||
|
'transition-transform duration-200',
|
||||||
|
isZoomed && 'cursor-zoom-out'
|
||||||
|
)}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (isZoomed) {
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsZoomed(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={currentImage}
|
||||||
|
alt={`图片 ${currentIndex + 1}`}
|
||||||
|
className={cn(
|
||||||
|
'max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl',
|
||||||
|
'transition-transform duration-200 animate-scale-in-fast',
|
||||||
|
isZoomed ? 'scale-150 cursor-zoom-out' : 'cursor-zoom-in'
|
||||||
|
)}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
toggleZoom();
|
||||||
|
}}
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 左侧导航按钮 */}
|
||||||
|
{hasMultipleImages && (
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
goToPrevious();
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'absolute left-4 top-1/2 -translate-y-1/2 z-10',
|
||||||
|
'w-12 h-12 flex items-center justify-center rounded-full',
|
||||||
|
'bg-black/30 text-white/90 hover:bg-black/50 hover:text-white',
|
||||||
|
'transition-all duration-150',
|
||||||
|
'hover:scale-110'
|
||||||
|
)}
|
||||||
|
title="上一张 (←)"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={28} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 右侧导航按钮 */}
|
||||||
|
{hasMultipleImages && (
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
goToNext();
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'absolute right-4 top-1/2 -translate-y-1/2 z-10',
|
||||||
|
'w-12 h-12 flex items-center justify-center rounded-full',
|
||||||
|
'bg-black/30 text-white/90 hover:bg-black/50 hover:text-white',
|
||||||
|
'transition-all duration-150',
|
||||||
|
'hover:scale-110'
|
||||||
|
)}
|
||||||
|
title="下一张 (→)"
|
||||||
|
>
|
||||||
|
<ChevronRight size={28} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 底部指示点 */}
|
||||||
|
{hasMultipleImages && (
|
||||||
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 z-10">
|
||||||
|
{images.map((_, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setCurrentIndex(index);
|
||||||
|
setIsZoomed(false);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'w-2 h-2 rounded-full transition-all duration-150',
|
||||||
|
index === currentIndex
|
||||||
|
? 'bg-white w-6'
|
||||||
|
: 'bg-white/50 hover:bg-white/80'
|
||||||
|
)}
|
||||||
|
title={`第 ${index + 1} 张`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 底部提示 */}
|
||||||
|
<div className="absolute bottom-14 left-1/2 -translate-x-1/2 text-white/60 text-xs">
|
||||||
|
{hasMultipleImages ? '← → 切换图片 · ESC 关闭 · 点击图片缩放' : 'ESC 关闭 · 点击图片缩放'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
146
src/components/ui/Modal.tsx
Normal file
146
src/components/ui/Modal.tsx
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useCallback, useRef } from 'react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface ModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
/** 是否显示关闭按钮 */
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
/** 点击遮罩是否关闭 */
|
||||||
|
closeOnBackdrop?: boolean;
|
||||||
|
/** 按 ESC 是否关闭 */
|
||||||
|
closeOnEsc?: boolean;
|
||||||
|
/** 自定义类名 */
|
||||||
|
className?: string;
|
||||||
|
/** 遮罩类名 */
|
||||||
|
backdropClassName?: string;
|
||||||
|
/** 内容区域最大宽度 */
|
||||||
|
maxWidth?: string;
|
||||||
|
/** 是否全屏 */
|
||||||
|
fullScreen?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Modal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
closeOnBackdrop = true,
|
||||||
|
closeOnEsc = true,
|
||||||
|
className,
|
||||||
|
backdropClassName,
|
||||||
|
maxWidth = '800px',
|
||||||
|
fullScreen = false,
|
||||||
|
}: ModalProps) {
|
||||||
|
const contentRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// ESC 关闭
|
||||||
|
const handleKeyDown = useCallback(
|
||||||
|
(e: KeyboardEvent) => {
|
||||||
|
if (closeOnEsc && e.key === 'Escape') {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[closeOnEsc, onClose]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 绑定键盘事件
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
// 禁止背景滚动
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
};
|
||||||
|
}, [isOpen, handleKeyDown]);
|
||||||
|
|
||||||
|
// 点击遮罩关闭
|
||||||
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
||||||
|
if (closeOnBackdrop && e.target === e.currentTarget) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-0 z-50 flex items-center justify-center',
|
||||||
|
'bg-black/60 backdrop-blur-sm',
|
||||||
|
'animate-fade-in-fast',
|
||||||
|
backdropClassName
|
||||||
|
)}
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
>
|
||||||
|
{/* 内容区域 */}
|
||||||
|
<div
|
||||||
|
ref={contentRef}
|
||||||
|
className={cn(
|
||||||
|
'relative bg-[var(--color-bg-primary)] rounded-xl shadow-2xl',
|
||||||
|
'animate-scale-in-fast',
|
||||||
|
fullScreen ? 'w-full h-full rounded-none' : 'max-h-[90vh]',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
style={!fullScreen ? { maxWidth } : undefined}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
{showCloseButton && (
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className={cn(
|
||||||
|
'absolute top-3 right-3 z-10',
|
||||||
|
'w-8 h-8 flex items-center justify-center rounded-full',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)] transition-colors duration-150'
|
||||||
|
)}
|
||||||
|
aria-label="关闭"
|
||||||
|
>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加动画样式到 globals.css
|
||||||
|
// 这里导出需要添加的 CSS
|
||||||
|
export const modalAnimationStyles = `
|
||||||
|
@keyframes fadeInFast {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scaleInFast {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in-fast {
|
||||||
|
animation: fadeInFast 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-scale-in-fast {
|
||||||
|
animation: scaleInFast 0.15s ease-out;
|
||||||
|
}
|
||||||
|
`;
|
||||||
Loading…
Reference in New Issue
Block a user