"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" import { useTheme } from "next-themes" interface MessageDetail { id: string from_address?: string to_address?: string subject: string content?: string html?: string received_at?: number sent_at?: number } interface SharedMessageDetailProps { message: MessageDetail | null loading?: boolean t: { messageContent: string selectMessage: string loading: string from: string to: string subject: string time: string htmlFormat: string textFormat: string } } type ViewMode = "html" | "text" export function SharedMessageDetail({ message, loading = false, t, }: SharedMessageDetailProps) { const [viewMode, setViewMode] = useState("html") const iframeRef = useRef(null) const { theme } = useTheme() // 如果没有HTML内容，默认显示文本 useEffect(() => { if (message) { if (!message.html && message.content) { setViewMode("text") } else if (message.html) { setViewMode("html") } } }, [message]) const updateIframeContent = () => { 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() } } } } useEffect(() => { updateIframeContent() }, [message?.html, viewMode, theme]) if (loading) { return (
{t.loading}
) } if (!message) { return (
{t.selectMessage}
) } return (

{message.subject}

{message.from_address && (

{t.from}: {message.from_address}

)} {message.to_address && (

{t.to}: {message.to_address}

)}

{t.time}:{" "} {new Date( message.sent_at || message.received_at || 0 ).toLocaleString()}

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