外贸业务管理系统 · 内部提效平台
Vue 3 + Node.js 全栈 · 客户 / 报价 / 邮件一体化
这是公司自己内部使用的业务管理系统，不是外包客户项目——老板希望用它把分散在 Excel 和邮箱里的客户资料、报价单、开发信流程整合到一套系统里，提升整个业务团队的协作效率。系统采用 Vue 3 全家桶 + TypeScript + Vite + Element Plus + Axios 前端、Node.js (Express) + MySQL 后端，实现了 RBAC 动态路由与按钮级双层权限管控、客户 Excel 批量导入与多字段组合筛选、客户跟进记录、报价单 PDF 导出与数据导入导出、邮件营销异步群发等完整功能。
项目背景
这套系统服务于公司自己的外贸业务团队，不是客户项目。此前客户资料散落在各人的 Excel、报价单靠人工排版、开发信群发用个人邮箱手动发送，人员一流动客户资源就跟着流失。老板的目标很明确：用一套内部系统把客户管理、跟进追踪、在线报价、邮件营销这些日常环节串起来，让业务员把时间花在客户身上，而不是整理表格上。
技术架构
Vue 3 全家桶 + TS
Vue 3 + Vue Router + Pinia + TypeScript + Vite，类型安全、开发体验流畅
Element Plus + Axios
Element Plus 构建中后台界面，Axios 二次封装统一处理 token 与错误
Node.js (Express)
Express 提供 RESTful API，承接权限校验、文件导入导出与邮件发送
MySQL 数据库
客户、报价、跟进、用户权限等业务数据结构化存储，关系清晰可追溯
RBAC 权限体系与 Axios 封装
系统供公司多角色协作使用，权限是第一道防线。登录后后端返回当前用户的权限标识，前端据此动态生成菜单与路由；页面按钮按权限显隐，后端接口再做一层拦截，形成按钮级双层管控；同时业务员之间数据相互隔离。
- 动态路由：按角色权限实时生成菜单与可访问页面，未授权路由直接拦截
- 按钮级双层管控：前端按钮按权限标识显隐，后端接口二次校验，越权操作无路可走
- 数据隔离：业务员仅能查看自己的客户与报价，管理者可见团队全量数据
- Axios 二次封装：请求自动注入 JWT token，响应统一错误处理，登录失效自动跳转
客户资源统一管理
客户是外贸公司的核心资产。历史客户 Excel 可一键批量导入，多字段组合筛选让业务员从上千条客户中快速定位目标，客户资料的查看与编辑也全部在系统内完成。
- Excel 批量导入：模板下载、批量上传，自动校验并提示错误行，历史客户快速入库
- 多字段组合筛选：国家、客户来源、等级、跟进状态等条件自由叠加，精准定位目标客户
- 资料详情 / 编辑一体化：联系人、来源、备注结构化沉淀，不再依赖个人表格
客户跟进记录
每一次客户沟通都有据可查。业务员随时登记跟进记录，系统按时间线呈现完整沟通过程，管理者也能实时掌握团队的业务推进节奏，客户资源不再随人员流动流失。
- 随时登记跟进：沟通方式、沟通内容、客户反馈、下次跟进时间一次录完
- 历史时间线：客户从初次接触到成单的完整推进过程一目了然
- 资产不流失：跟进记录随客户存档，人员变动后客户关系平稳交接
在线报价单
报价是外贸成单的关键环节。业务员在线录入产品明细，系统自动汇总金额；可一键导出统一样式的 PDF 直接发给海外客户；报价数据还能导入导出存档，老报价随时调出二次编辑复用。
- 在线制作：产品明细、数量、单价、币种结构化录入，金额自动汇总
- PDF 导出：一键生成统一样式报价单 PDF，专业规范，可直接发送客户
- 导入 / 导出存档：报价数据可备份留存，随时导入进行二次编辑
邮件营销模块
SMTP / 邮件 API 对接
后端 Node.js 对接第三方 SMTP 与邮件 API 服务，保障开发信稳定送达
富文本编辑
内置富文本编辑器，图文邮件随手排版，产品推荐与公司介绍更加专业
邮件模板管理
常用开发信沉淀为模板，新人也能快速发出规范、专业的营销邮件
异步发送 + 进度反馈
大批量群发异步执行，前端实时反馈发送进度与结果，页面不卡顿
系统界面一览
工程质量保障
ESLint 代码检查
统一代码规范，潜在错误与坏味道在编写阶段即被发现
Prettier 格式统一
全团队代码风格一致，diff 干净、代码评审更高效
Husky 提交卡点
Git 提交前自动执行检查，不规范代码无法进入仓库