feat(mail): 支持邮件正文 HTML 翻译并切换显示译文
- 后端翻译接口新增返回 translatedHtml，优先翻译邮件 HTML 文本节点并跳过脚本、样式等标签。 - 前端合并翻译结果展示，支持在原文与译文之间切换，并直接渲染翻译后的邮件 HTML。
This commit is contained in:
LanQin
+23
-20
@@ -1341,8 +1341,7 @@ export function MailPage() {
|
||||
</div>
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="p-6">
|
||||
<MessageTranslateBox message={selected} language={language} />
|
||||
<MailHtmlFrame message={selected} />
|
||||
<TranslatableMailBody message={selected} language={language} />
|
||||
{selected.attachments && selected.attachments.length > 0 && <div className="mt-8 rounded-lg border p-4"><div className="mb-3 font-medium">附件</div><div className="space-y-2">{selected.attachments.map((a) => canDownloadAttachments ? <a className="flex items-center justify-between rounded-md border p-3 text-sm hover:bg-accent" href={attachmentHref(selected, a.id)} key={a.id}><span className="flex items-center gap-2"><Paperclip className="h-4 w-4" />{a.filename}</span><span className="text-muted-foreground">{formatBytes(a.sizeBytes)}</span></a> : <div className="flex items-center justify-between rounded-md border p-3 text-sm text-muted-foreground" key={a.id}><span className="flex items-center gap-2"><Paperclip className="h-4 w-4" />{a.filename}</span><span>{formatBytes(a.sizeBytes)}</span></div>)}</div></div>}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
@@ -2457,8 +2456,7 @@ function CompactMessageDetail({
|
||||
/>
|
||||
</div>
|
||||
<div className="py-6 sm:py-8">
|
||||
<MessageTranslateBox message={selected} language={language} />
|
||||
<MailHtmlFrame message={selected} />
|
||||
<TranslatableMailBody message={selected} language={language} />
|
||||
{selected.attachments && selected.attachments.length > 0 && <div className="mt-8 rounded-lg border p-4"><div className="mb-3 font-medium">附件</div><div className="space-y-2">{selected.attachments.map((a) => canDownloadAttachments ? <a className="flex flex-col gap-1 rounded-md border p-3 text-sm hover:bg-accent sm:flex-row sm:items-center sm:justify-between" href={attachmentHref(selected, a.id)} key={a.id}><span className="flex min-w-0 items-center gap-2"><Paperclip className="h-4 w-4 shrink-0" /><span className="truncate">{a.filename}</span></span><span className="text-muted-foreground">{formatBytes(a.sizeBytes)}</span></a> : <div className="flex flex-col gap-1 rounded-md border p-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between" key={a.id}><span className="flex min-w-0 items-center gap-2"><Paperclip className="h-4 w-4 shrink-0" /><span className="truncate">{a.filename}</span></span><span>{formatBytes(a.sizeBytes)}</span></div>)}</div></div>}
|
||||
</div>
|
||||
</div>
|
||||
@@ -2469,18 +2467,22 @@ function CompactMessageDetail({
|
||||
}
|
||||
|
||||
|
||||
function MessageTranslateBox({ message, language }: { message: MailMessage; language: Language }) {
|
||||
|
||||
function TranslatableMailBody({ message, language }: { message: MailMessage; language: Language }) {
|
||||
const [translatedText, setTranslatedText] = React.useState("")
|
||||
const [translatedHtml, setTranslatedHtml] = React.useState("")
|
||||
const [showTranslated, setShowTranslated] = React.useState(false)
|
||||
const [truncated, setTruncated] = React.useState(false)
|
||||
const { toast } = useToast()
|
||||
const targetLanguage = normalizeTranslationLanguage(language)
|
||||
const sourceText = React.useMemo(() => (message.bodyText || stripHtml(message.bodyHtml || message.snippet || "")).trim(), [message.bodyHtml, message.bodyText, message.snippet])
|
||||
const shouldShow = targetLanguage && shouldOfferMessageTranslation(sourceText, language)
|
||||
const translatedMessage = React.useMemo<MailMessage>(() => ({ ...message, bodyText: translatedText, bodyHtml: translatedHtml }), [message, translatedHtml, translatedText])
|
||||
const translate = useMutation({
|
||||
mutationFn: () => message.externalAccountId ? api.translateExternalMessage(message.externalAccountId, message.id, targetLanguage!) : api.translateMessage(message.id, targetLanguage!),
|
||||
onSuccess: (result) => {
|
||||
setTranslatedText(result.translatedText)
|
||||
setTranslatedHtml(result.translatedHtml || "")
|
||||
setTruncated(result.truncated)
|
||||
setShowTranslated(true)
|
||||
},
|
||||
@@ -2489,29 +2491,30 @@ function MessageTranslateBox({ message, language }: { message: MailMessage; lang
|
||||
|
||||
React.useEffect(() => {
|
||||
setTranslatedText("")
|
||||
setTranslatedHtml("")
|
||||
setShowTranslated(false)
|
||||
setTruncated(false)
|
||||
translate.reset()
|
||||
}, [message.id, language])
|
||||
|
||||
if (!shouldShow && !translatedText) return null
|
||||
|
||||
return (
|
||||
<div className="mb-4 rounded-lg border bg-muted/30 p-3 text-sm">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="text-muted-foreground">
|
||||
{translatedText ? `已翻译为 ${translationTargetLabel(language)}` : `检测到邮件可能不是当前语言，可翻译为 ${translationTargetLabel(language)}`}
|
||||
{truncated && <span className="ml-1">（内容较长，仅翻译前半部分）</span>}
|
||||
<>
|
||||
{(shouldShow || translatedText) && (
|
||||
<div className="mb-4 rounded-lg border bg-muted/30 p-3 text-sm">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="text-muted-foreground">
|
||||
{translatedText ? `已翻译为 ${translationTargetLabel(language)}，当前${showTranslated ? "显示译文" : "显示原文"}` : `检测到邮件可能不是当前语言，可翻译为 ${translationTargetLabel(language)}`}
|
||||
{truncated && <span className="ml-1">（内容较长，仅翻译前半部分）</span>}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{translatedText && <Button type="button" variant="ghost" size="sm" onClick={() => setShowTranslated((value) => !value)}>{showTranslated ? "显示原文" : "显示译文"}</Button>}
|
||||
<Button type="button" variant="outline" size="sm" disabled={translate.isPending} onClick={() => translate.mutate()}>{translate.isPending ? "翻译中..." : translatedText ? "重新翻译" : "翻译"}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{translatedText && <Button type="button" variant="ghost" size="sm" onClick={() => setShowTranslated((value) => !value)}>{showTranslated ? "查看原文" : "查看译文"}</Button>}
|
||||
<Button type="button" variant="outline" size="sm" disabled={translate.isPending} onClick={() => translate.mutate()}>{translate.isPending ? "翻译中..." : translatedText ? "重新翻译" : "翻译"}</Button>
|
||||
</div>
|
||||
</div>
|
||||
{translatedText && showTranslated && (
|
||||
<div className="mt-3 whitespace-pre-wrap rounded-md bg-background p-3 leading-7 text-foreground">{translatedText}</div>
|
||||
)}
|
||||
</div>
|
||||
{translatedText && showTranslated ? <MailHtmlFrame message={translatedMessage} /> : <MailHtmlFrame message={message} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user