feat(组件): 新增 HTML 预览模态框组件
- 支持桌面端、平板、手机三种设备预览模式 - 提供代码视图和预览视图切换 - 支持全屏预览和代码下载功能 - 添加键盘快捷键 ESC 关闭和 F11 全屏
This commit is contained in:
gaoziman
parent
5307255844
commit
959fedf1d0
392
src/components/ui/HtmlPreviewModal.tsx
Normal file
392
src/components/ui/HtmlPreviewModal.tsx
Normal file
@ -0,0 +1,392 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import {
|
||||
X,
|
||||
Monitor,
|
||||
Tablet,
|
||||
Smartphone,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
RefreshCw,
|
||||
Code,
|
||||
Eye,
|
||||
Copy,
|
||||
Check,
|
||||
Download,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { CodeBlock } from '@/components/markdown/CodeBlock';
|
||||
|
||||
interface HtmlPreviewModalProps {
|
||||
/** HTML 代码内容 */
|
||||
htmlCode: string;
|
||||
/** 是否打开 */
|
||||
isOpen: boolean;
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
/** 语言类型，默认 html */
|
||||
language?: string;
|
||||
}
|
||||
|
||||
// 设备尺寸配置
|
||||
type DeviceType = 'desktop' | 'tablet' | 'mobile';
|
||||
|
||||
interface DeviceConfig {
|
||||
type: DeviceType;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>;
|
||||
width: string;
|
||||
frameClass: string;
|
||||
}
|
||||
|
||||
const deviceConfigs: DeviceConfig[] = [
|
||||
{
|
||||
type: 'desktop',
|
||||
label: '桌面端',
|
||||
icon: Monitor,
|
||||
width: '100%',
|
||||
frameClass: 'rounded',
|
||||
},
|
||||
{
|
||||
type: 'tablet',
|
||||
label: '平板',
|
||||
icon: Tablet,
|
||||
width: '768px',
|
||||
frameClass: 'rounded-lg',
|
||||
},
|
||||
{
|
||||
type: 'mobile',
|
||||
label: '手机',
|
||||
icon: Smartphone,
|
||||
width: '375px',
|
||||
frameClass: 'rounded-xl',
|
||||
},
|
||||
];
|
||||
|
||||
// 视图模式
|
||||
type ViewMode = 'preview' | 'code';
|
||||
|
||||
export function HtmlPreviewModal({
|
||||
htmlCode,
|
||||
isOpen,
|
||||
onClose,
|
||||
language = 'html',
|
||||
}: HtmlPreviewModalProps) {
|
||||
const [device, setDevice] = useState<DeviceType>('desktop');
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('preview');
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [iframeKey, setIframeKey] = useState(0); // 用于刷新 iframe
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 获取当前设备配置
|
||||
const currentDevice = deviceConfigs.find((d) => d.type === device) || deviceConfigs[0];
|
||||
|
||||
// ESC 关闭 / F11 全屏切换
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
if (isFullscreen) {
|
||||
setIsFullscreen(false);
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
// F11 切换全屏
|
||||
if (e.key === 'F11') {
|
||||
e.preventDefault();
|
||||
setIsFullscreen((prev) => !prev);
|
||||
}
|
||||
};
|
||||
|
||||
window.document.addEventListener('keydown', handleKeyDown);
|
||||
window.document.body.style.overflow = 'hidden';
|
||||
|
||||
return () => {
|
||||
window.document.removeEventListener('keydown', handleKeyDown);
|
||||
window.document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen, isFullscreen, onClose]);
|
||||
|
||||
// 复制代码
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(htmlCode);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy:', error);
|
||||
}
|
||||
}, [htmlCode]);
|
||||
|
||||
// 下载 HTML 文件
|
||||
const handleDownload = useCallback(() => {
|
||||
const blob = new Blob([htmlCode], { type: 'text/html;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = window.document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'preview.html';
|
||||
window.document.body.appendChild(link);
|
||||
link.click();
|
||||
window.document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}, [htmlCode]);
|
||||
|
||||
// 刷新预览
|
||||
const handleRefresh = useCallback(() => {
|
||||
setIframeKey((prev) => prev + 1);
|
||||
}, []);
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
setIsFullscreen((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'fixed inset-0 z-50 flex items-center justify-center',
|
||||
'bg-black/70 backdrop-blur-sm',
|
||||
'animate-fade-in-fast'
|
||||
)}
|
||||
onClick={onClose}
|
||||
>
|
||||
{/* 主容器 */}
|
||||
<div
|
||||
ref={modalRef}
|
||||
className={cn(
|
||||
'relative bg-[var(--color-bg-primary)] shadow-2xl flex flex-col overflow-hidden',
|
||||
'animate-scale-in-fast',
|
||||
isFullscreen
|
||||
? 'w-full h-full rounded-none'
|
||||
: 'w-[95vw] max-w-6xl h-[90vh] rounded-md'
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 头部工具栏 */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
|
||||
{/* 左侧：标题和视图切换 */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* 标题 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye size={18} className="text-[var(--color-primary)]" />
|
||||
<span className="font-medium text-[var(--color-text-primary)]">
|
||||
HTML 预览
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 视图切换 Tab */}
|
||||
<div className="flex items-center bg-[var(--color-bg-tertiary)] rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setViewMode('preview')}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-150',
|
||||
viewMode === 'preview'
|
||||
? 'bg-[var(--color-bg-primary)] text-[var(--color-primary)] shadow-sm'
|
||||
: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
>
|
||||
<Eye size={14} />
|
||||
<span>预览</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('code')}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-150',
|
||||
viewMode === 'code'
|
||||
? 'bg-[var(--color-bg-primary)] text-[var(--color-primary)] shadow-sm'
|
||||
: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
>
|
||||
<Code size={14} />
|
||||
<span>代码</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 中间：设备切换器（仅预览模式显示） */}
|
||||
{viewMode === 'preview' && (
|
||||
<div className="flex items-center gap-1 bg-[var(--color-bg-tertiary)] rounded-lg p-1">
|
||||
{deviceConfigs.map((config) => {
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<button
|
||||
key={config.type}
|
||||
onClick={() => setDevice(config.type)}
|
||||
className={cn(
|
||||
'flex items-center justify-center w-9 h-9 rounded-md transition-all duration-150',
|
||||
device === config.type
|
||||
? 'bg-[var(--color-bg-primary)] text-[var(--color-primary)] shadow-sm'
|
||||
: 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
title={config.label}
|
||||
>
|
||||
<Icon size={18} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 右侧：操作按钮 */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* 复制按钮 */}
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm transition-colors duration-150',
|
||||
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]',
|
||||
'hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
title="复制代码"
|
||||
>
|
||||
{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 transition-colors duration-150',
|
||||
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]',
|
||||
'hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
title="下载 HTML 文件"
|
||||
>
|
||||
<Download size={16} />
|
||||
<span>下载</span>
|
||||
</button>
|
||||
|
||||
{/* 分隔线 */}
|
||||
<div className="w-px h-6 bg-[var(--color-border)] mx-1" />
|
||||
|
||||
{/* 刷新按钮（仅预览模式） */}
|
||||
{viewMode === 'preview' && (
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className={cn(
|
||||
'w-9 h-9 flex items-center justify-center rounded-lg transition-colors duration-150',
|
||||
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]',
|
||||
'hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
title="刷新预览"
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 全屏切换按钮 */}
|
||||
<button
|
||||
onClick={toggleFullscreen}
|
||||
className={cn(
|
||||
'w-9 h-9 flex items-center justify-center rounded-lg transition-colors duration-150',
|
||||
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]',
|
||||
'hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
title={isFullscreen ? '退出全屏 (ESC)' : '全屏 (F11)'}
|
||||
>
|
||||
{isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
|
||||
</button>
|
||||
|
||||
{/* 关闭按钮 */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
'w-9 h-9 flex items-center justify-center rounded-lg transition-colors duration-150',
|
||||
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]',
|
||||
'hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
title="关闭 (ESC)"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 overflow-hidden bg-[var(--color-bg-tertiary)]">
|
||||
{viewMode === 'preview' ? (
|
||||
/* 预览模式 */
|
||||
<div className="w-full h-full flex items-center justify-center p-4 overflow-auto">
|
||||
{/* 设备框架 */}
|
||||
<div
|
||||
className={cn(
|
||||
'bg-white shadow-2xl transition-all duration-300 ease-out overflow-hidden',
|
||||
currentDevice.frameClass,
|
||||
// 非桌面模式添加设备边框效果
|
||||
device !== 'desktop' && 'border-8 border-gray-800'
|
||||
)}
|
||||
style={{
|
||||
width: currentDevice.width,
|
||||
height: device === 'desktop' ? '100%' : device === 'tablet' ? '85%' : '90%',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
}}
|
||||
>
|
||||
{/* 手机顶部刘海 */}
|
||||
{device === 'mobile' && (
|
||||
<div className="h-6 bg-gray-800 flex items-center justify-center">
|
||||
<div className="w-20 h-4 bg-black rounded-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* iframe 预览 */}
|
||||
<iframe
|
||||
key={iframeKey}
|
||||
srcDoc={htmlCode}
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
className="w-full bg-white"
|
||||
style={{
|
||||
height: device === 'mobile' ? 'calc(100% - 24px)' : '100%',
|
||||
border: 'none',
|
||||
}}
|
||||
title="HTML 预览"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* 代码模式 */
|
||||
<div className="w-full h-full overflow-auto">
|
||||
<CodeBlock
|
||||
code={htmlCode}
|
||||
language={language}
|
||||
showLineNumbers={true}
|
||||
className="my-0 rounded-none h-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 底部状态栏 */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
|
||||
<div className="flex items-center gap-4 text-xs text-[var(--color-text-tertiary)]">
|
||||
<span>
|
||||
{htmlCode.length.toLocaleString()} 字符
|
||||
</span>
|
||||
<span>
|
||||
{htmlCode.split('\n').length} 行
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-[var(--color-text-tertiary)]">
|
||||
ESC 关闭 · F11 全屏
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user