"use client" import { useState, useEffect, useRef } from "react" import { Loader2 } from "lucide-react" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" interface Message { id: string from_address: string subject: string content: string html: string | null received_at: number } interface MessageViewProps { emailId: string messageId: string onClose: () => void } type ViewMode = "html" | "text" export function MessageView({ emailId, messageId }: MessageViewProps) { const [message, setMessage] = useState(null) const [loading, setLoading] = useState(true) const [viewMode, setViewMode] = useState("html") const iframeRef = useRef(null) useEffect(() => { const fetchMessage = async () => { try { const response = await fetch(`/api/emails/${emailId}/${messageId}`) const data = await response.json() as { message: Message } setMessage(data.message) if (!data.message.html) { setViewMode("text") } } catch (error) { console.error("Failed to fetch message:", error) } finally { setLoading(false) } } fetchMessage() }, [emailId, messageId]) // 处理 iframe 内容 useEffect(() => { if (viewMode === "html" && message?.html && iframeRef.current) { const iframe = iframeRef.current const doc = iframe.contentDocument || iframe.contentWindow?.document if (doc) { doc.open() doc.write(` ${message.html} `) doc.close() // 更新高度以填充容器 const updateHeight = () => { const container = iframe.parentElement if (container) { iframe.style.height = `${container.clientHeight}px` } } updateHeight() window.addEventListener('resize', updateHeight) // 监听内容变化 const resizeObserver = new ResizeObserver(updateHeight) resizeObserver.observe(doc.body) // 监听图片加载 doc.querySelectorAll('img').forEach((img: HTMLImageElement) => { img.onload = updateHeight }) return () => { window.removeEventListener('resize', updateHeight) resizeObserver.disconnect() } } } }, [message?.html, viewMode]) if (loading) { return (
) } if (!message) return null return (

{message.subject}

发件人：{message.from_address}

时间：{new Date(message.received_at).toLocaleString()}

{message.html && (
setViewMode(value as ViewMode)} className="flex items-center gap-4" >
)}
{viewMode === "html" && message.html ? (