feat(email): 支持邮箱别名规范化识别与显示优化

Author: iding2959

README.md

@@ -4,7 +4,7 @@
 
 一个基于 Cloudflare Workers + D1 + R2 构建的**开源临时邮箱服务**，支持邮件接收、发送、转发、用户管理等完整功能。
 
-**当前版本：V5.0** - 全新 UI 设计，深色模式支持，优化用户管理页面的布局
+**当前版本：V5.1** - 邮箱别名规范化支持，xx.abc@ex.com 邮件会收到 abc@ex.com
 
 `转发的地址需要在cloudflare Email Addresses中验证`
 
@@ -48,6 +48,7 @@
 
 | 版本 | 主要更新 |
 |------|----------|
+| **V5.1** | 邮箱别名规范化支持 · xx.abc@ex.co 邮件会收到 abc@ex.co |
 | **V5.0** | 全新 UI · SVG 图标 · 深色模式 · 管理面板统计与布局优化 |
 | **V4.8** | 单个邮箱转发 · 收藏功能 · 按状态筛选 |
 | **V4.5** | 多域名 Resend 密钥配置 |

public/css/app-compose.css

@@ -250,18 +250,19 @@
   color: var(--muted);
   font-size: 13px;
 }
-.email-meta{ /* 统一左对齐布局：发件人标签/发件人内容/时间 */
-  display: grid; 
-  grid-template-columns: 1fr auto; /* 左侧内容自适应，右侧时间固定自动宽度 */
-  gap: 10px;
+.email-meta{ /* 统一布局：发件人/收件人/时间 */
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  gap: 8px 12px;
 }
 .email-meta .meta-from{ 
   display: flex; 
   align-items: center; 
   gap: 6px; 
-  min-width: 0; /* 允许收缩 */
-  overflow: hidden; /* 防止内容溢出 */
+  min-width: 0;
+  max-width: 280px;
+  overflow: hidden;
 }
 .email-meta .meta-label{ 
   font-size: 12px; 
@@ -271,23 +272,40 @@
   border-radius: 999px; 
   padding: 2px 8px;
   white-space: nowrap;
-  flex-shrink: 0; /* 标签不收缩 */
+  flex-shrink: 0;
 }
 .email-meta .meta-from-text{ 
   color: var(--text); 
   font-weight: 600; 
   white-space: nowrap; 
   overflow: hidden; 
   text-overflow: ellipsis;
-  min-width: 0; /* 允许收缩 */
+  min-width: 0;
+}
+.email-meta .meta-to{
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 280px;
+  overflow: hidden;
+}
+.email-meta .meta-to-text{
+  color: var(--primary);
+  font-weight: 500;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 .email-time{
   color: var(--muted2);
   font-size: 0.85em;
   font-weight: 500;
-  justify-self: end; /* 时间右对齐 */
-  text-align: right;
-  white-space: nowrap; /* 防止时间换行 */
+  margin-left: auto; /* 推到右侧 */
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .email-actions{

public/css/app-mobile.css

@@ -99,18 +99,19 @@
 
   /* 移动端邮件列表布局全面重构 */
   .email-meta{
-    display: grid;
-    grid-template-columns: 1fr 88px;
-    gap: 8px;
-    align-items: start;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 10px;
     margin-bottom: 8px;
   }
 
   .email-meta .meta-from{
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 5px;
     min-width: 0;
+    max-width: calc(100vw - 140px);
   }
 
   .email-meta .meta-label{
@@ -132,18 +133,34 @@
     overflow: hidden;
     text-overflow: ellipsis;
     min-width: 0;
-    max-width: calc(100vw - 148px);
+  }
+
+  .email-meta .meta-to{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+    max-width: calc(100vw - 140px);
+  }
+
+  .email-meta .meta-to-text{
+    color: var(--primary);
+    font-weight: 500;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
   }
 
   .email-time{
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+    align-items: center;
     font-size: 11px;
     color: var(--muted2);
-    line-height: 1.1;
-    text-align: right;
-    gap: 1px;
+    margin-left: auto;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .email-time .time-icon{

public/js/modules/app/email-list.js

@@ -150,28 +150,30 @@ export function renderEmailItem(email, isMobile = false) {
   const listCode = (e.verification_code || '').toString().trim() || extractCode(rawContent || '');
   const senderText = escapeHtml(e.sender || '');
 
+  // 解析收件人地址（用于发件箱和收件箱）
   let recipientsDisplay = '';
-  if (isSentView) {
-    const raw = (e.recipients || e.to_addrs || '').toString();
-    const arr = raw.split(',').map(s => s.trim()).filter(Boolean);
-    if (arr.length) {
-      recipientsDisplay = arr.slice(0, 2).join(', ');
-      if (arr.length > 2) recipientsDisplay += ` 等${arr.length}人`;
-    } else {
-      recipientsDisplay = raw;
-    }
+  const rawToAddrs = (e.recipients || e.to_addrs || '').toString();
+  const toAddrsArr = rawToAddrs.split(',').map(s => s.trim()).filter(Boolean);
+  if (toAddrsArr.length) {
+    recipientsDisplay = toAddrsArr.slice(0, 2).join(', ');
+    if (toAddrsArr.length > 2) recipientsDisplay += ` 等${toAddrsArr.length}人`;
+  } else {
+    recipientsDisplay = rawToAddrs;
   }
 
   const subjectText = escapeHtml(e.subject || '(无主题)');
   const previewText = escapeHtml(preview);
   const metaLabel = isSentView ? '收件人' : '发件人';
   const metaText = isSentView ? escapeHtml(recipientsDisplay) : senderText;
   const timeDisplay = isMobile ? formatTsMobile(e.received_at || e.created_at) : formatTs(e.received_at || e.created_at);
+  // 收件箱视图时显示收件人地址（别名地址）
+  const toAddrDisplay = !isSentView && recipientsDisplay ? escapeHtml(recipientsDisplay) : '';
 
   return `
     <div class="email-item clickable" onclick="${isSentView ? `showSentEmail(${e.id})` : `showEmail(${e.id})`}">
       <div class="email-meta">
         <span class="meta-from"><span class="meta-label">${metaLabel}</span><span class="meta-from-text">${metaText}</span></span>
+        ${!isSentView && toAddrDisplay ? `<span class="meta-to"><span class="meta-label">收件人</span><span class="meta-to-text">${toAddrDisplay}</span></span>` : ''}
         <span class="email-time"><span class="time-icon">🕐</span>${timeDisplay}</span>
       </div>
       <div class="email-content">

public/js/modules/app/email-viewer.js

@@ -29,7 +29,9 @@ export async function showEmailDetail(id, elements, api, showToast) {
     const code = email.verification_code || extractCode(email.content || email.html_content || '');
 
     let metaHtml = `<div class="email-meta-inline">`;
-    if (email.sender) metaHtml += `<span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="/icons/sprites.svg#icon-user"/></svg> ${escapeHtml(email.sender)}</span>`;
+    if (email.sender) metaHtml += `<span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="/icons/sprites.svg#icon-user"/></svg> 发件人：${escapeHtml(email.sender)}</span>`;
+    // 展示收件人地址（别名地址）
+    if (email.to_addrs) metaHtml += `<span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="/icons/sprites.svg#icon-mail"/></svg> 收件人：${escapeHtml(email.to_addrs)}</span>`;
     if (email.received_at) {
       const d = new Date((email.received_at.includes('T') ? email.received_at : email.received_at.replace(' ', 'T')) + 'Z');
       const timeStr = new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false, year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(d);

src/api/emails.js

@@ -49,7 +49,7 @@ export async function handleEmailsApi(request, db, url, path, options) {
 
       try {
         const { results } = await db.prepare(`
-          SELECT id, sender, subject, received_at, is_read, preview, verification_code
+          SELECT id, sender, to_addrs, subject, received_at, is_read, preview, verification_code
           FROM messages 
           WHERE mailbox_id = ?${timeFilter}
           ORDER BY received_at DESC 
@@ -58,7 +58,7 @@ export async function handleEmailsApi(request, db, url, path, options) {
         return Response.json(results);
       } catch (e) {
         const { results } = await db.prepare(`
-          SELECT id, sender, subject, received_at, is_read,
+          SELECT id, sender, to_addrs, subject, received_at, is_read,
                  CASE WHEN content IS NOT NULL AND content <> ''
                       THEN SUBSTR(content, 1, 120)
                       ELSE SUBSTR(COALESCE(html_content, ''), 1, 120)
@@ -110,7 +110,7 @@ export async function handleEmailsApi(request, db, url, path, options) {
         return Response.json(results || []);
       } catch (e) {
         const { results } = await db.prepare(`
-          SELECT id, sender, subject, content, html_content, received_at, is_read
+          SELECT id, sender, to_addrs, subject, content, html_content, received_at, is_read
           FROM messages WHERE id IN (${placeholders})${timeFilter}
         `).bind(...ids, ...timeParam).all();
         return Response.json(results || []);
@@ -236,7 +236,7 @@ export async function handleEmailsApi(request, db, url, path, options) {
       return Response.json({ ...row, content, html_content, download: row.r2_object_key ? `/api/email/${emailId}/download` : '' });
     } catch (e) {
       const { results } = await db.prepare(`
-        SELECT id, sender, subject, content, html_content, received_at, is_read
+        SELECT id, sender, to_addrs, subject, content, html_content, received_at, is_read
         FROM messages WHERE id = ?
       `).bind(emailId).all();
       if (!results || !results.length) return errorResponse('未找到邮件', 404);

src/email/receiver.js

@@ -3,7 +3,7 @@
  * @module email/receiver
  */
 
-import { extractEmail } from '../utils/common.js';
+import { extractEmail, normalizeEmailAlias } from '../utils/common.js';
 import { getOrCreateMailboxId } from '../db/index.js';
 import { parseEmailBody, extractVerificationCode } from './parser.js';
 
@@ -23,7 +23,9 @@ export async function handleEmailReceive(request, db, env) {
     const text = String(emailData?.text || '');
     const html = String(emailData?.html || '');
 
-    const mailbox = extractEmail(to);
+    // 提取并规范化邮箱地址（支持别名邮箱，例如 ab.c@qq.ss -> c@qq.ss）
+    const rawMailbox = extractEmail(to);
+    const mailbox = normalizeEmailAlias(rawMailbox);
     const sender = extractEmail(from);
     const mailboxId = await getOrCreateMailboxId(db, mailbox);
 

src/server.js

@@ -13,7 +13,7 @@
 import { initDatabase, getInitializedDatabase } from './db/index.js';
 import { createRouter, authMiddleware } from './routes/index.js';
 import { createAssetManager } from './assets/index.js';
-import { extractEmail } from './utils/common.js';
+import { extractEmail, normalizeEmailAlias } from './utils/common.js';
 import { forwardByLocalPart, forwardByMailboxConfig } from './email/forwarder.js';
 import { parseEmailBody, extractVerificationCode } from './email/parser.js';
 import { getForwardTarget } from './db/mailboxes.js';
@@ -94,10 +94,13 @@ export default {
 
       const resolvedRecipient = (envelopeTo || toHeader || '').toString();
       const resolvedRecipientAddr = extractEmail(resolvedRecipient);
-      const localPart = (resolvedRecipientAddr.split('@')[0] || '').toLowerCase();
+      // 应用别名邮箱规范化：例如 ab.c@qq.ss -> c@qq.ss
+      const normalizedRecipientAddr = normalizeEmailAlias(resolvedRecipientAddr);
+      const localPart = (normalizedRecipientAddr.split('@')[0] || '').toLowerCase();
 
       // 处理邮件转发（优先使用邮箱配置，否则使用全局规则）
-      const mailboxForwardTo = await getForwardTarget(DB, resolvedRecipientAddr);
+      // 使用规范化后的地址查询转发配置
+      const mailboxForwardTo = await getForwardTarget(DB, normalizedRecipientAddr);
       if (mailboxForwardTo) {
         forwardByMailboxConfig(message, mailboxForwardTo, ctx);
       } else {
@@ -121,7 +124,8 @@ export default {
         htmlContent = '';
       }
 
-      const mailbox = extractEmail(resolvedRecipient || toHeader);
+      // 使用规范化后的地址作为实际收件箱
+      const mailbox = normalizedRecipientAddr || normalizeEmailAlias(extractEmail(toHeader));
       const sender = extractEmail(fromHeader);
 
       // 存储到 R2

src/utils/common.js

@@ -16,6 +16,49 @@ export function extractEmail(addr) {
   return s.split(/\s/)[0] || s;
 }
 
+/**
+ * 规范化邮箱别名地址
+ * 类似谷歌别名邮箱功能：点号(.)前面的部分被视为别名前缀
+ * 只保留最后一个点后面的部分作为真正的本地部分
+ * 
+ * 例如：
+ * - ab.c@qq.ss → c@qq.ss
+ * - cds.c@qq.ss → c@qq.ss  
+ * - x.y.z@domain.com → z@domain.com
+ * - simple@domain.com → simple@domain.com (无点则保持不变)
+ * 
+ * @param {string} email - 邮箱地址
+ * @returns {string} 规范化后的邮箱地址
+ */
+export function normalizeEmailAlias(email) {
+  const normalized = String(email || '').trim().toLowerCase();
+  if (!normalized) return '';
+  
+  const atIndex = normalized.indexOf('@');
+  if (atIndex <= 0) return normalized;
+  
+  const localPart = normalized.slice(0, atIndex);
+  const domain = normalized.slice(atIndex + 1);
+  
+  // 查找本地部分中最后一个点的位置
+  const lastDotIndex = localPart.lastIndexOf('.');
+  
+  // 如果没有点，或者点在第一个位置，保持原样
+  if (lastDotIndex <= 0) {
+    return normalized;
+  }
+  
+  // 取最后一个点后面的部分作为真正的本地部分
+  const realLocalPart = localPart.slice(lastDotIndex + 1);
+  
+  // 如果点后面没有内容，保持原样
+  if (!realLocalPart) {
+    return normalized;
+  }
+  
+  return `${realLocalPart}@${domain}`;
+}
+
 /**
  * 生成指定长度的随机ID
  * @param {number} length - ID长度，默认为8