{emptyMessage}
}
{!messages.isLoading && hasMoreMessages && (
@@ -695,7 +772,7 @@ export function MailPage() {
- { setComposeOpen(open); if (!open) setComposeDraft(undefined) }} onSent={() => { setComposeOpen(false); setComposeDraft(undefined); qc.invalidateQueries({ queryKey: ["messages"] }); qc.invalidateQueries({ queryKey: ["folders"] }); qc.invalidateQueries({ queryKey: ["mail-stats"] }); qc.invalidateQueries({ queryKey: ["labels"] }) }} />
+ { setComposeOpen(open); if (!open) setComposeDraft(undefined) }} onSent={() => { setComposeOpen(false); setComposeDraft(undefined); qc.invalidateQueries({ queryKey: ["messages"] }); qc.invalidateQueries({ queryKey: ["folders"] }); qc.invalidateQueries({ queryKey: ["mail-stats"] }); qc.invalidateQueries({ queryKey: ["labels"] }); qc.invalidateQueries({ queryKey: ["scheduled-sends"] }) }} />
({
+function buildMailMenuItems(folders: MailFolder[], starredCount: number, scheduledCount: number): MailMenuItem[] {
+ const byName = new Map(folders.map((item) => [item.name, item]))
+ const normalizedFolders = ["Inbox", "Drafts", "Sent", "Archive", "Spam", "Trash"].map((name) => byName.get(name) || { id: `virtual-${name}`, name, role: name.toLowerCase(), unreadCount: 0, totalCount: 0 })
+ for (const item of folders) {
+ if (!normalizedFolders.some((folder) => folder.name === item.name)) normalizedFolders.push(item)
+ }
+ const folderItems: MailMenuItem[] = normalizedFolders.map((item) => ({
type: "folder",
key: item.id,
folderName: item.name,
label: folderLabels[item.name] || item.name,
icon: folderIcons[item.role] ||
{loading && onToggleSelected(message.id, checked)} onClick={() => onSelect(message.id)} onStar={() => onStar(message)} />)}
+ {messages.map((message) => onToggleSelected(message.id, checked)} onClick={() => onSelect(message.id)} onStar={() => onStar(message)} />)}
{!loading && messages.length === 0 &&
{Array.from({ length: 6 }).map((_, i) =>
}
+function getEmptyMessage(mailView: MailView, folder: string, total: number) {
+ if (mailView === "scheduled") return total === 0 ? "没有待发送邮件" : "当前搜索没有匹配的定时邮件"
+ if (total > 0) return "当前筛选条件下没有邮件"
+ if (mailView === "starred") return "暂无星标邮件"
+ if (mailView === "label") return "当前标签没有邮件"
+ if (folder === "Inbox") return "收件箱暂时为空"
+ if (folder === "Drafts") return "还没有草稿"
+ if (folder === "Sent") return "还没有已发送邮件"
+ if (folder === "Trash") return "回收站是空的"
+ if (folder === "Spam") return "暂无垃圾邮件"
+ return "当前文件夹没有邮件"
+}
+
function NoMailboxState({ onOpenSettings }: { onOpenSettings: () => void }) {
return (
@@ -745,6 +841,79 @@ function NoMailboxState({ onOpenSettings }: { onOpenSettings: () => void }) {
)
}
+function ScheduledSendView({ compact, items, total, loading, query, cancelingId, onCancel }: { compact: boolean; items: ScheduledSend[]; total: number; loading: boolean; query: string; cancelingId: string; onCancel: (item: ScheduledSend) => void }) {
+ const empty = query.trim() ? "当前搜索没有匹配的定时邮件" : "没有待发送邮件"
+ return (
+
+ {label}
+
+ )
+}
+
type BulkAction = "read" | "unread" | "star" | "unstar" | "archive" | "trash" | "spam" | "delete"
function BulkActionMenu({ pending, onAction }: { pending: boolean; onAction: (action: BulkAction) => void }) {
@@ -789,6 +958,7 @@ function CompactMailView({
onSelect,
onSelectAll,
onToggleSelected,
+ scheduledDraftIds,
onLoadMore,
onCloseReader,
onStar,
@@ -821,6 +991,7 @@ function CompactMailView({
onSelect: (id: string | null) => void
onSelectAll: (checked: boolean) => void
onToggleSelected: (id: string, checked: boolean) => void
+ scheduledDraftIds: Set
onLoadMore: () => void
onCloseReader: () => void
onStar: (message: MailMessage) => void
@@ -881,7 +1052,7 @@ function CompactMailView({
+
+ {loading && onCancel(item)} />
+ ))}
+
+
+ )
+}
+
+function ScheduledSendSkeleton() {
+ return (
+
+
+
+
+ {items.length} / {total} 封定时邮件
+ {empty}
}
+ {!loading && items.map((item) => (
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ )
+}
+
+function ScheduledSendRow({ item, compact, pending, onCancel }: { item: ScheduledSend; compact: boolean; pending: boolean; onCancel: () => void }) {
+ const recipients = item.to?.length ? item.to.join(", ") : "未填写收件人"
+ const failed = item.status === "failed"
+ return (
+
+
+ ))}
+
+
+ )
+}
+
+function ScheduledStatusBadge({ status }: { status: ScheduledSend["status"] }) {
+ const label = status === "pending" ? "等待发送" : status === "sending" ? "发送中" : status === "failed" ? "发送失败" : status === "sent" ? "已发送" : "已取消"
+ return (
+
+
+
+
+
+ {item.subject || "(无主题)"}
+
+ 发给 {recipients}
+ {item.snippet && {item.snippet}
}
+ {failed && item.error && {item.error}
}
+
+
+ 发送时间
+ {formatDateTime(item.sendAt)}
+
+
+
+ {emptyMessage}
}
{!loading && hasMore && (
@@ -935,12 +1106,18 @@ function CompactMessageDetail({
+
+ ) {
+ event.preventDefault()
+ const date = new Date(value)
+ if (!value || Number.isNaN(date.getTime()) || !date.getTime()) {
+ toast({ title: "请选择发送时间" })
+ return
+ }
+ if (date.getTime() <= Date.now() + 30_000) {
+ toast({ title: "发送时间需要晚于当前时间" })
+ return
+ }
+ onConfirm(date.toISOString())
+ }
+
+ return (
+
+ )
+}
+
+type ComposerValue = { text: string; html: string }
+type InsertDialogState = { kind: "link" | "image"; selectedText: string }
+type InsertDialogValue = { url: string; text: string; alt: string }
+type EditorToolbarState = {
+ bold: boolean
+ italic: boolean
+ underline: boolean
+ strikeThrough: boolean
+ unorderedList: boolean
+ orderedList: boolean
+ justifyLeft: boolean
+ justifyCenter: boolean
+ justifyRight: boolean
+ fontName: string
+ fontSize: string
+}
+
+const defaultToolbarState: EditorToolbarState = {
+ bold: false,
+ italic: false,
+ underline: false,
+ strikeThrough: false,
+ unorderedList: false,
+ orderedList: false,
+ justifyLeft: false,
+ justifyCenter: false,
+ justifyRight: false,
+ fontName: "",
+ fontSize: "3",
+}
+const composerFontOptions = ["Arial", "Georgia", "Times New Roman", "Courier New", "Microsoft YaHei"]
+const composerFontSizeOptions = [
+ ["2", "小号"],
+ ["3", "正文"],
+ ["4", "中号"],
+ ["5", "大号"],
+] as const
+const composerEmojiOptions = ["😀", "😄", "😊", "🙂", "😉", "😍", "😘", "😎", "🤔", "👍", "👏", "🙏", "💪", "🎉", "🔥", "✨", "❤️", "✅", "📌", "📅", "☕", "💡", "🚀", "⭐"]
+
+function queryCommandState(command: string) {
+ try {
+ return document.queryCommandState(command)
+ } catch {
+ return false
+ }
+}
+
+function queryCommandValue(command: string) {
+ try {
+ return String(document.queryCommandValue(command) || "")
+ } catch {
+ return ""
+ }
+}
+
+function normalizeFontName(value: string) {
+ const cleaned = value.replace(/["']/g, "").split(",")[0]?.trim() || ""
+ if (!cleaned || cleaned === "默认字体") return ""
+ if (/microsoft yahei/i.test(cleaned) || cleaned.includes("微软雅黑")) return "Microsoft YaHei"
+ const lower = cleaned.toLowerCase()
+ return composerFontOptions.find((font) => {
+ const option = font.toLowerCase()
+ return lower === option || lower.includes(option) || option.includes(lower)
+ }) || ""
+}
+
+function normalizeFontSize(value: string) {
+ const cleaned = value.trim().toLowerCase()
+ if (!cleaned) return ""
+ if (composerFontSizeOptions.some(([size]) => size === cleaned)) return cleaned
+ const px = Number(cleaned.replace("px", ""))
+ if (Number.isFinite(px)) {
+ if (px <= 13) return "2"
+ if (px <= 17) return "3"
+ if (px <= 22) return "4"
+ return "5"
+ }
+ if (cleaned.includes("small")) return "2"
+ if (cleaned.includes("large") || cleaned.includes("x-large")) return "5"
+ if (cleaned.includes("medium") || cleaned.includes("normal")) return "3"
+ return ""
+}
+
+function fontLabel(value: string) {
+ const normalized = normalizeFontName(value)
+ if (!normalized) return "默认字体"
+ return normalized === "Microsoft YaHei" ? "微软雅黑" : normalized
+}
+
+function fontSizeLabel(value: string) {
+ const normalized = normalizeFontSize(value) || "3"
+ return composerFontSizeOptions.find(([size]) => size === normalized)?.[1] || "正文"
+}
+
+function selectionElementInside(root: HTMLElement | null) {
+ const selection = window.getSelection()
+ const node = selection?.anchorNode
+ if (!root || !node || !root.contains(node)) return null
+ return node instanceof HTMLElement ? node : node.parentElement
+}
+
+function normalizeInsertUrl(value: string, kind: InsertDialogState["kind"]) {
+ const trimmed = value.trim()
+ if (!trimmed) return ""
+ const allowed = kind === "image" ? /^(https?:|cid:|data:image\/|\/)/i : /^(https?:|mailto:|tel:|#|\/)/i
+ return allowed.test(trimmed) ? trimmed : `https://${trimmed}`
+}
+
+function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onChange, onPickFiles, onRemoveFile }: { defaultValue: string; defaultHtml?: string; files: File[]; signatureText: string; onChange: (value: ComposerValue) => void; onPickFiles: (files: File[]) => void; onRemoveFile: (index: number) => void }) {
const editorRef = React.useRef(null)
const fileInputRef = React.useRef(null)
- const initialHtmlRef = React.useRef(plainTextToHtml(defaultValue))
+ const selectionRef = React.useRef(null)
+ const initialHtmlRef = React.useRef(defaultHtml !== undefined ? DOMPurify.sanitize(defaultHtml) : plainTextToHtml(defaultValue))
const dirtyRef = React.useRef(false)
const lastDefaultRef = React.useRef(defaultValue)
const [formatOpen, setFormatOpen] = React.useState(true)
+ const [scheduleOpen, setScheduleOpen] = React.useState(false)
+ const [emojiOpen, setEmojiOpen] = React.useState(false)
+ const [insertDialog, setInsertDialog] = React.useState(null)
+ const [toolbarState, setToolbarState] = React.useState(defaultToolbarState)
const [empty, setEmpty] = React.useState(!defaultValue.trim())
React.useEffect(() => {
- const next = plainTextComposerValue(defaultValue)
+ const next = defaultHtml !== undefined ? htmlComposerValue(defaultHtml) : plainTextComposerValue(defaultValue)
onChange(next)
setEmpty(!next.text.trim())
}, [])
@@ -1392,17 +1873,47 @@ function MailBodyComposer({ defaultValue, files, signatureText, onChange, onPick
if (defaultValue === lastDefaultRef.current) return
lastDefaultRef.current = defaultValue
if (!dirtyRef.current) {
- const next = plainTextComposerValue(defaultValue)
+ const next = defaultHtml !== undefined ? htmlComposerValue(defaultHtml) : plainTextComposerValue(defaultValue)
if (editorRef.current) editorRef.current.innerHTML = next.html
setEmpty(!next.text.trim())
onChange(next)
}
- }, [defaultValue, onChange])
+ }, [defaultValue, defaultHtml, onChange])
+
+ React.useEffect(() => {
+ function handleSelectionChange() {
+ const selection = window.getSelection()
+ const anchorNode = selection?.anchorNode
+ if (!anchorNode || !editorRef.current?.contains(anchorNode)) return
+ saveSelection()
+ updateToolbarState()
+ }
+ document.addEventListener("selectionchange", handleSelectionChange)
+ return () => document.removeEventListener("selectionchange", handleSelectionChange)
+ }, [])
function focusEditor() {
window.requestAnimationFrame(() => editorRef.current?.focus())
}
+ function saveSelection() {
+ const selection = window.getSelection()
+ const anchorNode = selection?.anchorNode
+ if (!selection || selection.rangeCount === 0 || !anchorNode || !editorRef.current?.contains(anchorNode)) return
+ selectionRef.current = selection.getRangeAt(0).cloneRange()
+ }
+
+ function restoreSelection() {
+ if (!selectionRef.current) return
+ try {
+ const selection = window.getSelection()
+ selection?.removeAllRanges()
+ selection?.addRange(selectionRef.current)
+ } catch {
+ selectionRef.current = null
+ }
+ }
+
function syncEditor() {
const next = composerValueFromElement(editorRef.current)
setEmpty(!next.text.trim())
@@ -1412,21 +1923,57 @@ function MailBodyComposer({ defaultValue, files, signatureText, onChange, onPick
function runCommand(command: string, value?: string) {
dirtyRef.current = true
editorRef.current?.focus()
+ restoreSelection()
document.execCommand(command, false, value)
+ saveSelection()
syncEditor()
+ updateToolbarState()
}
- function insertLink() {
- const url = window.prompt("链接地址")
+ function updateToolbarState() {
+ const currentElement = selectionElementInside(editorRef.current)
+ const computedStyle = currentElement ? window.getComputedStyle(currentElement) : null
+ setToolbarState((current) => ({
+ ...current,
+ bold: queryCommandState("bold"),
+ italic: queryCommandState("italic"),
+ underline: queryCommandState("underline"),
+ strikeThrough: queryCommandState("strikeThrough"),
+ unorderedList: queryCommandState("insertUnorderedList"),
+ orderedList: queryCommandState("insertOrderedList"),
+ justifyLeft: queryCommandState("justifyLeft"),
+ justifyCenter: queryCommandState("justifyCenter"),
+ justifyRight: queryCommandState("justifyRight"),
+ fontName: normalizeFontName(queryCommandValue("fontName")) || normalizeFontName(computedStyle?.fontFamily || "") || current.fontName,
+ fontSize: normalizeFontSize(queryCommandValue("fontSize")) || normalizeFontSize(computedStyle?.fontSize || "") || current.fontSize,
+ }))
+ }
+
+ function applyFont(font: string) {
+ runCommand("fontName", font)
+ setToolbarState((current) => ({ ...current, fontName: font }))
+ }
+
+ function applyFontSize(size: string) {
+ runCommand("fontSize", size)
+ setToolbarState((current) => ({ ...current, fontSize: size }))
+ }
+
+ function openInsertDialog(kind: InsertDialogState["kind"]) {
+ saveSelection()
+ setInsertDialog({ kind, selectedText: selectionRef.current?.toString().trim() || "" })
+ }
+
+ function confirmInsert(value: InsertDialogValue) {
+ if (!insertDialog) return
+ const url = normalizeInsertUrl(value.url, insertDialog.kind)
if (!url) return
- const selected = window.getSelection()?.toString()
- if (selected) runCommand("createLink", url)
- else runCommand("insertHTML", `${escapeHtml(url)}`)
- }
-
- function insertImage() {
- const url = window.prompt("图片链接")
- if (url) runCommand("insertImage", url)
+ if (insertDialog.kind === "link") {
+ const text = value.text.trim() || insertDialog.selectedText || value.url.trim()
+ runCommand("insertHTML", `${escapeHtml(text)}`)
+ return
+ }
+ runCommand("insertHTML", `})
`)
}
function insertSignature() {
@@ -1434,6 +1981,17 @@ function MailBodyComposer({ defaultValue, files, signatureText, onChange, onPick
runCommand("insertHTML", `
--
${plainTextToHtmlFragment(signatureText)}`) } + function insertSchedule(schedule: ScheduleDraft) { + const normalized = normalizeSchedule(schedule) + runCommand("insertHTML", scheduleToHtml(normalized)) + onPickFiles([scheduleToFile(normalized)]) + } + + function insertEmoji(emoji: string) { + runCommand("insertText", emoji) + setEmojiOpen(false) + } + function handlePickedFiles(event: React.ChangeEvent) {
const nextFiles = Array.from(event.currentTarget.files || [])
if (nextFiles.length > 0) onPickFiles(nextFiles)
@@ -1443,11 +2001,11 @@ function MailBodyComposer({ defaultValue, files, signatureText, onChange, onPick
return (
- {selected && }
+ {selected?.folder === "Drafts" ? (
+
+ ) : (
+ <>
+ {selected && }
+ {selected && }
+ {selected && }
+ {selected && }
+ {selected && }
+
+ )}
{selected && }
- {selected && }
- {selected && }
- {selected && }
- {selected && }
@@ -988,7 +1165,7 @@ function CompactMessageDetail({
)
}
-function CompactMessageRow({ message, active, checked, onCheckedChange, onClick, onStar }: { message: MailMessage; active: boolean; checked: boolean; onCheckedChange: (checked: boolean) => void; onClick: () => void; onStar: () => void }) {
+function CompactMessageRow({ message, active, checked, scheduled, onCheckedChange, onClick, onStar }: { message: MailMessage; active: boolean; checked: boolean; scheduled?: boolean; onCheckedChange: (checked: boolean) => void; onClick: () => void; onStar: () => void }) {
const visibleLabels = (message.labels || []).slice(0, 2)
const senderName = senderDisplayName(message)
return (
@@ -999,6 +1176,7 @@ function CompactMessageRow({ message, active, checked, onCheckedChange, onClick,
{message.subject}
{message.snippet}
+ {scheduled && 已定时 }
{visibleLabels.map((label) =>
@@ -1142,6 +1320,7 @@ function MessageRow({
message,
active,
checked,
+ scheduled,
onCheckedChange,
onClick,
onStar,
@@ -1149,6 +1328,7 @@ function MessageRow({
message: MailMessage
active: boolean
checked: boolean
+ scheduled?: boolean
onCheckedChange: (checked: boolean) => void
onClick: () => void
onStar: () => void
@@ -1184,6 +1364,7 @@ function MessageRow({
{message.subject}
+ {scheduled && 已定时 }
{visibleLabels.map((label) => +{hiddenLabelCount} }
{message.hasAttachments && ([])
+ const [draftAttachments, setDraftAttachments] = React.useState([])
+ const [attachmentsTouched, setAttachmentsTouched] = React.useState(false)
+ const [draftId, setDraftId] = React.useState(draft?.id || "")
+ const [toValue, setToValue] = React.useState(draft?.to || "")
+ const [ccValue, setCcValue] = React.useState(draft?.cc || "")
+ const [bccValue, setBccValue] = React.useState(draft?.bcc || "")
+ const [subjectValue, setSubjectValue] = React.useState(draft?.subject || "")
+ const [draftStatus, setDraftStatus] = React.useState<"idle" | "saving" | "saved" | "error">("idle")
+ const [lastSavedAt, setLastSavedAt] = React.useState(null)
+ const [scheduleDialogOpen, setScheduleDialogOpen] = React.useState(false)
+ const sendStartedRef = React.useRef(false)
+ const lastSavedPayloadRef = React.useRef("")
const [showCc, setShowCc] = React.useState(Boolean(draft?.cc))
const [showBcc, setShowBcc] = React.useState(Boolean(draft?.bcc))
const [sendSeparately, setSendSeparately] = React.useState(false)
const defaultSignature = useQuery({ queryKey: ["signature", "default", mailbox?.id], queryFn: () => api.defaultSignature(mailbox?.id), enabled: open && !!mailbox?.id })
const signatureText = defaultSignature.data?.signature?.content || ""
- const composerText = draft?.text !== undefined ? draft.text : signatureText ? `\n\n-- \n${signatureText}` : ""
- const [body, setBody] = React.useState(() => plainTextComposerValue(composerText))
+ const composerText = draft?.html || (draft?.text !== undefined ? draft.text : signatureText ? `\n\n-- \n${signatureText}` : "")
+ const [body, setBody] = React.useState(() => draft?.html !== undefined ? htmlComposerValue(draft.html) : plainTextComposerValue(composerText))
+ const activeMailboxId = draft?.mailboxId || mailbox?.id || ""
+ const composePayload = React.useMemo(() => ({
+ mailboxId: activeMailboxId,
+ to: splitEmails(toValue),
+ cc: showCc ? splitEmails(ccValue) : [],
+ bcc: showBcc ? splitEmails(bccValue) : [],
+ subject: subjectValue,
+ text: body.text,
+ html: body.html || plainTextToHtml(body.text),
+ ...(attachmentsTouched ? { attachments: draftAttachments } : {}),
+ }), [activeMailboxId, toValue, showCc, ccValue, showBcc, bccValue, subjectValue, body, attachmentsTouched, draftAttachments])
+ const hasDraftContent = open && !!activeMailboxId && (toValue.trim() || ccValue.trim() || bccValue.trim() || subjectValue.trim() || body.text.trim() || body.html.trim())
const send = useMutation({
mutationFn: async (payloads: SendPayload[]) => {
const sent: MailMessage[] = []
for (const payload of payloads) sent.push(await api.send(payload))
return sent
},
- onSuccess: (_, payloads) => {
+ onSuccess: async (_, payloads) => {
+ if (draftId) {
+ try {
+ await api.deleteDraft(draftId)
+ } catch {}
+ }
toast({ title: payloads.length > 1 ? `已分别发送 ${payloads.length} 封邮件` : "发送成功" })
setFiles([])
+ setDraftId("")
onSent()
},
onError: (e) => toast({ title: "发送失败", description: e.message }),
})
+ const scheduleSend = useMutation({
+ mutationFn: (payload: SendPayload & { draftId?: string; sendAt: string }) => api.scheduleSend(payload),
+ onSuccess: (scheduled) => {
+ sendStartedRef.current = true
+ toast({ title: `已定时发送 ${formatDateTime(scheduled.sendAt)}` })
+ setScheduleDialogOpen(false)
+ setFiles([])
+ void Promise.all([
+ qc.invalidateQueries({ queryKey: ["messages"] }),
+ qc.invalidateQueries({ queryKey: ["folders"] }),
+ qc.invalidateQueries({ queryKey: ["mail-stats"] }),
+ qc.invalidateQueries({ queryKey: ["scheduled-sends"] }),
+ ])
+ onSent()
+ },
+ onError: (e) => toast({ title: "定时发送失败", description: e.message }),
+ })
React.useEffect(() => {
if (!open) return
- setShowCc(Boolean(draft?.cc))
- setShowBcc(Boolean(draft?.bcc))
+ sendStartedRef.current = false
+ const nextShowCc = Boolean(draft?.cc)
+ const nextShowBcc = Boolean(draft?.bcc)
+ const nextBody = draft?.html !== undefined ? htmlComposerValue(draft.html) : plainTextComposerValue(composerText)
+ lastSavedPayloadRef.current = JSON.stringify({
+ mailboxId: draft?.mailboxId || mailbox?.id || "",
+ to: splitEmails(draft?.to || ""),
+ cc: nextShowCc ? splitEmails(draft?.cc || "") : [],
+ bcc: nextShowBcc ? splitEmails(draft?.bcc || "") : [],
+ subject: draft?.subject || "",
+ text: nextBody.text,
+ html: nextBody.html || plainTextToHtml(nextBody.text),
+ draftId: draft?.id || "",
+ })
+ setDraftId(draft?.id || "")
+ setToValue(draft?.to || "")
+ setCcValue(draft?.cc || "")
+ setBccValue(draft?.bcc || "")
+ setSubjectValue(draft?.subject || "")
+ setBody(nextBody)
+ setDraftStatus("idle")
+ setLastSavedAt(null)
+ setShowCc(nextShowCc)
+ setShowBcc(nextShowBcc)
setSendSeparately(false)
- setFiles([])
- }, [open, draft?.key, draft?.cc, draft?.bcc])
+ setFiles(draft?.files || [])
+ setDraftAttachments([])
+ setAttachmentsTouched(false)
+ }, [open, draft?.key, draft?.id, draft?.mailboxId, draft?.to, draft?.cc, draft?.bcc, draft?.subject, draft?.html, draft?.files, mailbox?.id, composerText])
+
+ React.useEffect(() => {
+ let cancelled = false
+ Promise.all(files.map(fileToAttachment)).then((attachments) => {
+ if (!cancelled) setDraftAttachments(attachments)
+ })
+ return () => { cancelled = true }
+ }, [files])
+
+ React.useEffect(() => {
+ if (!open || sendStartedRef.current || !hasDraftContent) return
+ const payloadKey = JSON.stringify({ ...composePayload, draftId })
+ if (payloadKey === lastSavedPayloadRef.current) return
+ const timer = window.setTimeout(async () => {
+ try {
+ setDraftStatus("saving")
+ const saved = await api.saveDraft(composePayload, draftId || undefined)
+ setDraftId(saved.id)
+ lastSavedPayloadRef.current = JSON.stringify({ ...composePayload, draftId: saved.id })
+ setLastSavedAt(new Date())
+ setDraftStatus("saved")
+ await Promise.all([
+ qc.invalidateQueries({ queryKey: ["messages"] }),
+ qc.invalidateQueries({ queryKey: ["folders"] }),
+ qc.invalidateQueries({ queryKey: ["mail-stats"] }),
+ ])
+ } catch {
+ setDraftStatus("error")
+ }
+ }, 5000)
+ return () => window.clearTimeout(timer)
+ }, [open, hasDraftContent, composePayload, draftId, qc])
async function submit(e: React.FormEvent) {
e.preventDefault()
@@ -1287,26 +1572,51 @@ function ComposeDialog({ mailbox, open, draft, onOpenChange, onSent }: { mailbox
toast({ title: "请选择发件邮箱" })
return
}
- const form = new FormData(e.currentTarget)
+ sendStartedRef.current = true
const attachments = await Promise.all(files.map(fileToAttachment))
- const to = splitEmails(String(form.get("to") || ""))
- const cc = showCc ? splitEmails(String(form.get("cc") || "")) : []
- const bcc = showBcc ? splitEmails(String(form.get("bcc") || "")) : []
+ const to = splitEmails(toValue)
+ const cc = showCc ? splitEmails(ccValue) : []
+ const bcc = showBcc ? splitEmails(bccValue) : []
const text = body.text
const html = body.html || plainTextToHtml(text)
- const payload: SendPayload = { mailboxId: mailbox.id, to, cc, bcc, subject: String(form.get("subject") || ""), text, html, attachments }
+ const payload: SendPayload = { mailboxId: mailbox.id, to, cc, bcc, subject: subjectValue, text, html, attachments }
const separateRecipients = Array.from(new Set([...to, ...cc, ...bcc]))
const payloads = sendSeparately && separateRecipients.length > 0
? separateRecipients.map((recipient): SendPayload => ({ ...payload, to: [recipient], cc: [], bcc: [] }))
: [payload]
send.mutate(payloads)
}
+ async function scheduleAt(sendAt: string) {
+ if (!mailbox) {
+ toast({ title: "请选择发件邮箱" })
+ return
+ }
+ const attachments = await Promise.all(files.map(fileToAttachment))
+ const payload: SendPayload & { draftId?: string; sendAt: string } = {
+ mailboxId: mailbox.id,
+ to: splitEmails(toValue),
+ cc: showCc ? splitEmails(ccValue) : [],
+ bcc: showBcc ? splitEmails(bccValue) : [],
+ subject: subjectValue,
+ text: body.text,
+ html: body.html || plainTextToHtml(body.text),
+ attachments,
+ draftId: draftId || undefined,
+ sendAt,
+ }
+ scheduleSend.mutate(payload)
+ }
return (
--
${plainTextToHtmlFragment(signatureText)}`) } + function insertSchedule(schedule: ScheduleDraft) { + const normalized = normalizeSchedule(schedule) + runCommand("insertHTML", scheduleToHtml(normalized)) + onPickFiles([scheduleToFile(normalized)]) + } + + function insertEmoji(emoji: string) { + runCommand("insertText", emoji) + setEmojiOpen(false) + } + function handlePickedFiles(event: React.ChangeEvent
- { if (!open) setInsertDialog(null) }} onConfirm={confirmInsert} />
+ { insertSchedule(schedule); setScheduleOpen(false) }} />
)
}
function ToolbarTextButton({ label, icon, active, disabled, onClick }: { label: string; icon: React.ReactNode; active?: boolean; disabled?: boolean; onClick?: () => void }) {
return (
-
+
runCommand("undo")}>
runCommand("redo")}>
fileInputRef.current?.click()}>
- 链接
- openInsertDialog("link")}>链接
+ openInsertDialog("image")}>
runCommand("insertHorizontalRule")}>分隔线
+
+
+
+
+
+
)}
+
+ {composerEmojiOptions.map((emoji) => (
+
+ ))}
+
+
+
runCommand("removeFormat")}>
-
- {["Arial", "Georgia", "Times New Roman", "Courier New"].map((font) => (
- runCommand("fontName", font)}>{font}
+ {composerFontOptions.map((font) => (
+ applyFont(font)}>
+
))}
-
- {[["2", "小号"], ["3", "正文"], ["4", "中号"], ["5", "大号"]].map(([size, label]) => (
- runCommand("fontSize", size)}>{label}
+ {composerFontSizeOptions.map(([size, label]) => (
+ applyFontSize(size)}>
+
))}
runCommand("bold")}>
- runCommand("italic")}>
- runCommand("underline")}>
- runCommand("strikeThrough")}>
+ runCommand("bold")}>
+ runCommand("italic")}>
+ runCommand("underline")}>
+ runCommand("strikeThrough")}>
runCommand("insertUnorderedList")}>
- runCommand("insertOrderedList")}>
+ runCommand("insertUnorderedList")}>
+ runCommand("insertOrderedList")}>
runCommand("outdent")}>
runCommand("indent")}>
runCommand("justifyLeft")}>
- runCommand("justifyCenter")}>
- runCommand("justifyRight")}>
+ runCommand("justifyLeft")}>
+ runCommand("justifyCenter")}>
+ runCommand("justifyRight")}>
runCommand("formatBlock", "blockquote")}>
runCommand("formatBlock", "pre")}>
@@ -1553,8 +2132,10 @@ function MailBodyComposer({ defaultValue, files, signatureText, onChange, onPick
contentEditable
suppressContentEditableWarning
className="mail-html min-h-[280px] overflow-y-auto px-6 py-5 text-base leading-7 outline-none"
- onFocus={focusEditor}
- onInput={() => { dirtyRef.current = true; syncEditor() }}
+ onFocus={() => { saveSelection(); updateToolbarState() }}
+ onMouseUp={() => { saveSelection(); updateToolbarState() }}
+ onKeyUp={() => { saveSelection(); updateToolbarState() }}
+ onInput={() => { dirtyRef.current = true; saveSelection(); syncEditor(); updateToolbarState() }}
onBlur={syncEditor}
dangerouslySetInnerHTML={{ __html: initialHtmlRef.current }}
/>
@@ -1575,24 +2156,378 @@ function MailBodyComposer({ defaultValue, files, signatureText, onChange, onPick