mirror of
https://github.com/oiov/wr.do.git
synced 2026-07-01 16:44:18 +08:00
304 lines
10 KiB
TypeScript
304 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { ForwardEmail } from "@prisma/client";
|
||
import {
|
||
File,
|
||
FileArchive,
|
||
FileAudio,
|
||
FileImage,
|
||
FileSpreadsheet,
|
||
FileText,
|
||
FileVideo,
|
||
} from "lucide-react";
|
||
import { useTranslations } from "next-intl";
|
||
|
||
import { siteConfig } from "@/config/site";
|
||
import { cn, downloadFile, formatDate, formatFileSize } from "@/lib/utils";
|
||
import { Icons } from "@/components/shared/icons";
|
||
|
||
import { BlurImg } from "../shared/blur-image";
|
||
import { Button } from "../ui/button";
|
||
import { Modal } from "../ui/modal";
|
||
import {
|
||
Tooltip,
|
||
TooltipContent,
|
||
TooltipProvider,
|
||
TooltipTrigger,
|
||
} from "../ui/tooltip";
|
||
import EmailViewer from "./EmailViewer";
|
||
|
||
interface EmailDetailProps {
|
||
email: ForwardEmail | undefined;
|
||
selectedEmailId: string | null;
|
||
onClose: () => void;
|
||
onMarkAsRead: () => void;
|
||
}
|
||
|
||
interface Attachment {
|
||
filename: string;
|
||
r2Path: string;
|
||
mimeType: string;
|
||
size: number;
|
||
}
|
||
|
||
const fileTypeMap: { [key: string]: string } = {
|
||
"application/pdf": "pdf",
|
||
"image/jpeg": "jpeg",
|
||
"image/png": "png",
|
||
"image/gif": "gif",
|
||
"application/msword": "doc",
|
||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
|
||
"docx",
|
||
"application/vnd.ms-excel": "xls",
|
||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
|
||
|
||
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
|
||
"pptx",
|
||
"audio/mpeg": "mp3",
|
||
"video/mp4": "mp4",
|
||
"application/zip": "zip",
|
||
default: "unknown",
|
||
};
|
||
|
||
const fileTypeIcons: { [key: string]: React.ComponentType<any> } = {
|
||
"application/pdf": FileText, // PDF 文件
|
||
"image/jpeg": FileImage, // JPEG 图片
|
||
"image/png": FileImage, // PNG 图片
|
||
"image/gif": FileImage, // GIF 图片
|
||
"application/msword": FileText, // Word 文档 (.doc)
|
||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
|
||
FileText, // Word 文档 (.docx)
|
||
"application/vnd.ms-excel": FileSpreadsheet, // Excel 表格 (.xls)
|
||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
|
||
FileSpreadsheet, // Excel 表格 (.xlsx)
|
||
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
|
||
FileSpreadsheet, // PowerPoint 文档
|
||
"audio/mpeg": FileAudio, // MP3 音频
|
||
"video/mp4": FileVideo, // MP4 视频
|
||
"application/zip": FileArchive, // ZIP 压缩文件
|
||
default: File, // 默认图标
|
||
};
|
||
|
||
export default function EmailDetail({
|
||
email,
|
||
selectedEmailId,
|
||
onClose,
|
||
onMarkAsRead,
|
||
}: EmailDetailProps) {
|
||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||
const t = useTranslations("Email");
|
||
|
||
function getFileIcon(type: string): React.ComponentType<any> {
|
||
const icon = Object.keys(fileTypeIcons).find((key) =>
|
||
type.toLowerCase().startsWith(key),
|
||
);
|
||
return fileTypeIcons[icon || "default"];
|
||
}
|
||
|
||
const handleDownload = async (attachment: Attachment) => {
|
||
downloadFile(
|
||
`${siteConfig.emailR2Domain}/${attachment.r2Path}`,
|
||
attachment.filename,
|
||
);
|
||
// downloadFileFromUrl(
|
||
// `${siteConfig.emailR2Domain}/${attachment.r2Path}`,
|
||
// attachment.filename,
|
||
// );
|
||
};
|
||
|
||
if (!email) return null;
|
||
|
||
let attachments: Attachment[] = [];
|
||
try {
|
||
if (email.attachments) {
|
||
attachments = JSON.parse(email.attachments);
|
||
}
|
||
} catch (error) {
|
||
console.log("Failed to parse attachments:", error);
|
||
}
|
||
|
||
// 处理邮件内容中的图片链接
|
||
const processContent = (content: string): string => {
|
||
if (!content || attachments.length === 0) return content;
|
||
|
||
let processedContent = content;
|
||
|
||
// 如果是 HTML，解析 DOM 并替换 <img> 标签的 src
|
||
if (email.html) {
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString(content, "text/html");
|
||
const images = Array.from(doc.getElementsByTagName("img")); // 转换为数组
|
||
|
||
images.forEach((img) => {
|
||
const alt = img.getAttribute("alt") || "";
|
||
const matchingAttachment = attachments.find(
|
||
(att) => att.filename === alt,
|
||
);
|
||
if (matchingAttachment) {
|
||
img.setAttribute(
|
||
"src",
|
||
`${siteConfig.emailR2Domain}/${matchingAttachment.r2Path}`,
|
||
);
|
||
}
|
||
});
|
||
processedContent = doc.documentElement.outerHTML; // 返回完整的 HTML
|
||
} else if (email.text) {
|
||
// 如果是纯文本，替换文件名
|
||
attachments.forEach((attachment) => {
|
||
const regex = new RegExp(`\\b${attachment.filename}\\b`, "g");
|
||
processedContent = processedContent.replace(
|
||
regex,
|
||
`${siteConfig.emailR2Domain}/${attachment.r2Path}`,
|
||
);
|
||
});
|
||
}
|
||
|
||
return processedContent;
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex h-full flex-col bg-primary-foreground text-primary shadow-md",
|
||
selectedEmailId ? "animate-fade-in-right" : "animate-fade-in-left",
|
||
)}
|
||
>
|
||
<div className="flex items-start justify-between gap-2 border-b px-2 py-2">
|
||
<div
|
||
onClick={onClose}
|
||
className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-900 text-sm font-bold text-white"
|
||
>
|
||
{email.subject?.[0].toUpperCase() ||
|
||
email.fromName?.[0].toUpperCase() ||
|
||
"U"}
|
||
</div>
|
||
<div className="max-w-[80%] grow text-neutral-600 dark:text-neutral-300">
|
||
<p className="text-sm">
|
||
<strong>{email.subject}</strong>
|
||
</p>
|
||
<TooltipProvider>
|
||
<Tooltip delayDuration={100}>
|
||
<TooltipTrigger className="line-clamp-2 text-wrap text-left text-xs">
|
||
<strong>{t("From")}:</strong> {email.fromName} <{email.from}
|
||
>
|
||
</TooltipTrigger>
|
||
<TooltipContent side="bottom" className="w-60 text-wrap text-xs">
|
||
{email.fromName} <br />
|
||
{email.from}
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
<p className="text-xs">
|
||
<strong>{t("To")}:</strong> {email.to}
|
||
</p>
|
||
{email.replyTo && email.replyTo !== '""' && (
|
||
<p className="text-xs">
|
||
<strong>{t("Reply-To")}:</strong> {email.replyTo}
|
||
</p>
|
||
)}
|
||
<p className="text-xs">
|
||
<strong>{t("Date")}:</strong> {formatDate(email.date as any)}
|
||
</p>
|
||
{attachments.length > 0 && (
|
||
<p className="text-xs">
|
||
<strong>{t("Attachments")}</strong>: {attachments.length}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<Button
|
||
className="ml-auto size-8 grow-0 px-1 py-1"
|
||
size={"sm"}
|
||
onClick={onClose}
|
||
variant={"outline"}
|
||
>
|
||
<Icons.close className="size-4" />
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="scrollbar-hidden flex h-full flex-col justify-between overflow-y-auto">
|
||
{/* <div
|
||
className=""
|
||
dangerouslySetInnerHTML={{
|
||
__html: processContent(email.html || email.text || ""),
|
||
}}
|
||
/> */}
|
||
<EmailViewer email={processContent(email.html || email.text || "")} />
|
||
|
||
{attachments.length > 0 && (
|
||
<div className="mt-auto border-t border-dashed px-2 py-3">
|
||
<h3 className="mb-2 text-sm font-semibold text-neutral-700 dark:text-neutral-400">
|
||
{t("Attachments")} ({attachments.length})
|
||
</h3>
|
||
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
|
||
{attachments.map((attachment, index) => {
|
||
const FileIcon = getFileIcon(attachment.mimeType); // 动态获取图标
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="group relative flex items-center justify-between rounded-md border border-dotted bg-gray-100 p-2 transition-shadow hover:border-dashed dark:bg-neutral-800"
|
||
>
|
||
<div className="flex items-center gap-2 overflow-hidden">
|
||
{attachment.mimeType.startsWith("image/") ? (
|
||
<BlurImg
|
||
src={`${siteConfig.emailR2Domain}/${attachment.r2Path}`}
|
||
alt={attachment.filename}
|
||
className="h-10 w-10 cursor-pointer rounded object-cover"
|
||
onClick={() =>
|
||
setPreviewImage(
|
||
`${siteConfig.emailR2Domain}/${attachment.r2Path}`,
|
||
)
|
||
}
|
||
/>
|
||
) : (
|
||
<FileIcon className="size-4 text-neutral-500 dark:text-neutral-400" />
|
||
)}
|
||
<div>
|
||
<p
|
||
className="max-w-full truncate text-xs text-neutral-800 dark:text-neutral-400"
|
||
title={attachment.filename}
|
||
>
|
||
{attachment.filename}
|
||
</p>
|
||
<p className="text-xs text-neutral-500">
|
||
{fileTypeMap[attachment.mimeType] ||
|
||
attachment.mimeType}{" "}
|
||
• {formatFileSize(attachment.size)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
onClick={() => handleDownload(attachment)}
|
||
className="absolute right-1 top-1 hidden h-7 animate-fade-in px-2 group-hover:block"
|
||
size="sm"
|
||
variant="default"
|
||
>
|
||
<Icons.download className="size-3" />
|
||
</Button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 图片预览 Modal */}
|
||
{previewImage && (
|
||
<Modal
|
||
showModal={!!previewImage}
|
||
setShowModal={() => setPreviewImage(null)}
|
||
>
|
||
<div className="flex flex-col items-center p-2">
|
||
<img
|
||
src={previewImage}
|
||
alt="Preview"
|
||
className="max-h-[80vh] max-w-full object-contain"
|
||
/>
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|