从0到1搭建DTF智能排版系统——技术选型与架构设计

作为云计算专业的学生，我一直对工业软件和自动化系统充满兴趣。今年我开始了一个名为DTF智能印花排版系统的项目——这是一个面向TEMU POD T恤卖家的全栈工业自动化平台。

背景：为什么要做这个系统

DTF印花行业中，TEMU平台的POD卖家每天需要印刷400-700个不同的设计图案。传统流程中，美工需要用Photoshop手动排版上百个图案，一个80个设计的订单要花1-2小时——而排版只是纯粹的体力活。

核心矛盾：图的种类极多，每种印量极少。这正是算法能发挥价值的地方。

技术选型

前端：Vue 3 + TypeScript + Element Plus

选择Vue 3而非React，主要考虑到Element Plus在企业级表单、表格、标签等组件上的成熟度——这个系统有大量表格编辑和拖拽交互场景。

后端：NestJS + TypeScript

NestJS模块化架构非常适合多角色（客户/美工/财务/管理员）的权限管理和API组织。TypeORM处理12张业务表的关联查询也很顺手。

算法服务：Python FastAPI

排版引擎是整个系统的技术核心。选择了像素碰撞Bottom-Left Fill算法而非传统的矩形Skyline——因为T恤图案是不规则形状的透明底PNG，用矩形包围框会浪费15-30%的PET膜。在每天几百个图的生产规模下，这个差异就是实实在在的成本。

通过numpy向量化碰撞检测、空间哈希网格优化、五条排序策略并行取最优，做到了300个异构矩形15秒内完成排版，利用率85%+。

部署：Docker Compose + frp隧道

客户通过公网访问（云服务器Nginx + frps隧道穿透到本地），美工和财务在局域网直连本地服务器。混合部署解决了公司无公网IP的问题。

技术栈一览

Frontend:  Vue 3 + TypeScript + Vite + Element Plus + Pinia
Backend:   NestJS + TypeORM + PostgreSQL + Redis
Algorithm: Python FastAPI + numpy + Pillow + pytoshop
Deploy:    Docker Compose + Nginx + frp + GitHub Actions

下一步

项目已经完成了全部技术设计评审，进入开发阶段。后续会在博客持续记录：像素碰撞算法的具体实现、匹配工作台的拖拽交互设计、PSD生成的技术细节等等。

如果你对工业软件、全栈开发、或DTF印花行业感兴趣，欢迎关注后续更新。