UI UPGRADE PATH ANALYSIS
邮箱 UI 升级路径分析
基于 dreamhunter2333 项目现状与 QQ Mail 参考布局的差距评估。给出四条升级路径,对比时间成本、金钱成本、运维负担和可达体验上限。
§ 01
现状(5 分钟改造后)
项目自带"全局选项卡位置"配置。把 Tab 放到"左侧"后,结构上已经从 Tab 切换变成 Sidebar 布局,跟 QQ Mail 一致:
- 左侧导航:收件箱、发件箱、发送邮件、账户、外观
- 中栏:邮件列表(含多选、过滤、分页、自动刷新)
- 右栏:邮件内容(含回复、转发、删除、下载、纯文本切换、全屏)
- 顶部:当前邮箱选择、地址管理、复制凭证
这是项目原生功能,无需任何代码改动。当前 https://mail.whxysl.com 已是这个布局。
§ 02
与 QQ Mail 的具体差距
下面列出当前 UI 与 QQ Mail 的所有可见差异,标注实现这些功能的工作量层级:纯前端(仅 Vue 改造)、需后端(D1 表结构改动)、重大改动(架构级)。
-
UI未读邮件数
QQ Mail 收件箱旁显示未读数(913)。当前项目没有"已读/未读"概念。
需后端加 read_at 字段
-
UI日期分组
QQ Mail 按 今天、本周、上周、更早分组显示。当前项目按时间倒序平铺。
纯前端2 至 4 小时
-
UI星标 / 重要标记
QQ Mail 有星标和"重要联系人"过滤。当前项目无标记系统。
需后端加 starred 字段 + UI
-
UI自定义文件夹
QQ Mail 支持创建分类文件夹移动邮件。当前项目只有"收件 / 发件"两个固定容器。
需后端新表 + 移动 API
-
UI邮件列表预览
QQ Mail 列表项含发件人头像、主题、正文摘要两行。当前项目只显示主题 + 日期 + 发件人。
纯前端4 至 6 小时
-
UI顶部 Compose 按钮
QQ Mail 左上角有大号 Compose 按钮常驻。当前项目要切换到"发送邮件"Tab。
纯前端1 至 2 小时
-
UI会话线程
QQ Mail / Gmail 把同主题往来邮件合并为一个对话。当前项目每封邮件独立显示。
需后端thread_id 索引
-
UI搜索全文
QQ Mail 搜索可匹配主题、发件人、正文。当前项目仅"过滤当前页"。
需后端FTS 索引
-
UI邮件分类标签
QQ Mail 自动区分主要、推广、社交、动态等。当前项目无分类。
重大AI 分类逻辑
-
UI地址簿 / 联系人
QQ Mail 有 Important Contacts。当前项目无地址簿。
需后端contacts 表
-
UI富文本编辑器升级
当前已有 wangeditor 富文本,但工具栏简陋。QQ Mail 的编辑器更专业。
纯前端3 至 5 小时
-
视觉整体风格
字体、配色、间距、icon 等视觉细节。当前是 Naive UI 默认风格,QQ Mail 有自家品牌设计。
纯前端6 至 10 小时
总计工作量:纯前端约 16 至 28 小时(含日期分组、列表预览、顶部 Compose、富文本升级、视觉风格)。需后端工作量再加 15 至 25 小时(星标、文件夹、未读、地址簿、线程、FTS 搜索)。
§ 03
四条升级路径对比
路径 A 维持现状 + 基础 UI 微调
推荐
当前布局已经是 sidebar,功能上收发邮件都可用。只做这几件低成本的事:
- 纯前端加日期分组(4 小时)
- 列表项加发件人头像 + 正文预览(5 小时)
- 顶部加 Compose 按钮(2 小时)
- 合计 11 小时左右
成本:约 1.5 个工作日开发,0 服务器费用
体验上限:80 分 QQ Mail 水准,对 B2B 工业客户够用
风险:维护一个 fork,未来上游版本要手动 merge
路径 B 全面 fork + 完整 UI 重设计 + 后端功能补充
谨慎
把所有差距都补上:日期分组、星标、文件夹、未读、线程、搜索、联系人、视觉风格全套重做。
成本:35 至 50 小时,约 5 至 7 个工作日
体验上限:95 分 QQ Mail 水准
风险:维护一个深度 fork,上游更新基本无法 merge,未来 Bug 只能自己修。对一个 3,300 合同来说投入产出比偏差
路径 C 切到付费托管邮箱(Migadu / Zoho / 腾讯付费版)
备选
把邮箱整体迁移到专业邮件服务商,他们提供原生 Webmail 界面。
| 方案 | 年费 | Webmail 体验 | 限制 |
| Migadu Mini | $19 | Roundcube 现代版 | 1GB 单账号 |
| Zoho Mail Premium | $12 / 账号 | 专业级 | 需付费才能用 IMAP |
| 腾讯企业邮箱 VIP | ¥950 | QQ Mail 同款 | 账号不限,32GB |
成本:年费 ¥130 至 ¥950,迁移工作量 4 小时
体验上限:100 分(就是真正的专业邮箱)
风险:客户承担年费,需重新办营业执照核验流程(腾讯)或英文界面(Migadu / Zoho)
路径 D 自建 Mailcow + Roundcube(VPS)
不建议
租 VPS 跑完整邮件栈(Postfix + Dovecot + Roundcube)。
成本:VPS $5 至 $10/月,部署 16 小时,运维持续
体验上限:100 分
风险:IP 信誉、SSL 续期、安全补丁、备份、GFW 跨境,对小项目运维成本爆炸。前面已经说过这条不推荐,列在这里仅作完整性参考
§ 04
路径汇总对比
| 路径 |
体验上限 |
开发时间 |
年成本 |
维护负担 |
| A 现状 + 微调 |
80 / 100 |
11 小时 |
0 |
低(小 fork) |
| B 完整 UI 重设计 |
95 / 100 |
35 至 50 小时 |
0 |
高(深 fork) |
| C 付费托管 |
100 / 100 |
4 小时迁移 |
¥130 至 ¥950 |
零 |
| D 自建 VPS |
100 / 100 |
16+ 小时 |
¥430 至 ¥860 |
非常高 |
§ 05
诚实建议
这个合同 3,300 元,邮箱搭建本就是附加服务。继续在邮箱 UI 上投入 50 小时不划算。
建议这样推进:
- 本次合同范围内:走路径 A,做 11 小时的纯前端微调(日期分组、列表预览、Compose 按钮)。当前已经是 sidebar 布局,这三项加上后视觉上接近 QQ Mail 70 至 80 分体验,B2B 工业客户用不出问题。
- 给客户的话术:当前是基于 Cloudflare 的轻量级方案,每年零运维费用。如客户后期对邮箱功能有更高要求(如团队协作、海量存储、专业搜索),可以升级到腾讯企业邮箱 VIP(950 元/年,34 张账号 + 32GB 存储),无需重做网站项目。
- 不要做路径 B:35 至 50 小时投入对单客户不值。除非你计划把这套工具产品化(卖给后续多个客户),那 fork 投入才有边际效应。
- 客户主动提出升级时:给他报价(增项 800 至 1,500 元,看具体需求),双方约定额外工时。这样合同边界清晰,你也不亏。
如果你坚持要做路径 B 的完整 UI 重设计,告诉我,我可以分阶段交付:
- 阶段一:日期分组 + 列表预览 + Compose 按钮(11 小时)
- 阶段二:未读 + 星标 + 视觉风格(15 小时)
- 阶段三:文件夹 + 线程 + 搜索(15 至 20 小时)
每个阶段都可独立交付测试,不会一次性投入全部时间。
§ 06
需要你决定的事
- 选哪条路径:A、B 阶段一、B 全套、还是 C 付费托管?
- 客户认知:你想让客户体验是"够用"还是"惊艳"?
- 时间预算:愿意为邮箱 UI 投入多少额外小时?