作品

2026年01月12日 至 2026年06月05日
业务系统
零售电商
自动化
Vue 3
TypeScript
FastAPI
Python
PostgreSQL
Cloudflare R2
SSE
Gemini AI
Playwright
PySide6

独立设计并开发的前后端分离电商运营自动化系统,面向 Temu POD 跨境电商卖家,覆盖订单处理、商品模板管理、Excel 批量生成、图片并发上传、AI 图像批处理、印花库与标签管理、底图批量渲染、渲染任务追踪、日志统计、MCP 接入,以及妙手定制商品 SPU、SKU 和价格操作等业务场景。后端基于 FastAPI + PostgreSQL,所有长任务通过 SSE 实时推流;前端采用 Vue 3 + TypeScript + Naive UI 构建,集成 Google Gemini 多模态 API、Cloudflare R2、Playwright 浏览器自动化和 PySide6 桌面工具链。

Temu平台POD电商自动化运营平台订单处理界面截图

自动化驱动运营,让电商卖家从重复劳动中解放出来。


项目背景

Temu 平台 POD 商品的日常运营高度依赖手工操作:按品类规则填写商品 Excel、维护模板 SKU 与颜色尺寸、逐一上传产品图到云存储、从订单导出文件解析 SKU 并匹配消费者定制图片、手动去除产品图水印、批量生成商品效果图,再导出烫画图和带专色通道的 TIF 文件……这些流程繁琐、易出错,且没有任何可复用的工程化积累。

这个项目是我以工程师视角接手这些业务后,独立完成并持续扩展的全链路自动化系统。核心目标不只是“少点几下”,而是把商品、素材、订单、渲染任务、出图文件和浏览器自动化操作收束到同一套可配置、可追踪、可扩展的工具链里。

Project Info
角色独立全栈开发
周期2026.01 — 2026.06
类型前后端分离 · 运营自动化
规模12 页面 · 15 Router · 桌面工具
12
运营页面
SSE
实时推流
182
商品模板
6823
印花素材

System Architecture
前端 · Vue 3 SPA

Vue 3 Composition API
TypeScript · Vite
Naive UI · Pinia
Vue Router · ofetch

useSSETaskuseOrderTaskusePlanEditor
HTTP · SSE
后端 · FastAPI

Python 3.12 · Uvicorn
Pydantic · SQLModel
Alembic · boto3
google-genai · Playwright

/excel/upload/order/ai-generate/mockup-render/mcp+9 more
ORM · S3 API
存储 · 多数据源

PostgreSQL — 图库元数据
SQLite — 订单历史
JSON — SKU 映射 · 索引
Cloudflare R2 — 图片 CDN

按访问模式选型,职责分离


业务闭环

商品与素材

模板管理、SKU/颜色/尺寸维护、标题库、印花库、标签导入、PSD 与静态图状态检查。

模板管理印花库标题库
上架与运营

根据 upload_plan 编排多店铺任务,批量生成 Temu / 妙手 Excel,上传图片到 R2,并处理活动与价格相关操作。

ExcelR2 上传活动管理
订单与出图

解析订单导出文件,校验消费者定制图片,导出烫画图、按 SKU 或订单分组导出 TIF,并支持自定义图片批量生成 TIF。

订单处理烫画图TIF

当前运行版本已经不再只是“生成 Excel + 上传图片”的工具,而是覆盖 POD 商品运营全流程的工作台:前端包含订单处理、活动管理、模板管理、Excel 生成、图片上传、AI 去水印、印花库、印花标签、批量渲染、渲染任务、日志统计和 MCP 接入 12 个主要页面。所有高耗时任务通过统一任务接口和 SSE 日志流反馈状态,减少运营人员在表格、终端、浏览器和本地文件夹之间来回切换。

运行状态截图

运营工作台核心页面

从真实运行中的平台截取,展示订单、模板和印花素材三个核心运营入口。

订单处理:批量处理、失败图片检查、烫画图与 TIF 导出 订单处理:批量处理、失败图片检查、烫画图与 TIF 导出
模板管理:182 个商品模板、SKU、颜色、PSD 和图片状态 模板管理:182 个商品模板、SKU、颜色、PSD 和图片状态
印花库:6823 条印花素材与标签导入管理 印花库:6823 条印花素材与标签导入管理
批量渲染与任务追踪

渲染任务中可查看批次级进度,例如 QB015 模板 6 张底图生成 2006 张结果图,用时约 5 分 26 秒。

底图印花渲染:选择模板、配置印花区域并提交批量生成 底图印花渲染:选择模板、配置印花区域并提交批量生成
渲染任务:批次状态、进度、耗时和吞吐量统计 渲染任务:批次状态、进度、耗时和吞吐量统计
早期模板管理界面截图 早期模板管理界面截图

POD OPERATIONS SYSTEM

从模板、印花到订单出图的一条运营流水线

把原本分散在表格、浏览器、文件夹和本地脚本里的 POD 工作,收束成可配置、可追踪、可复用的自动化平台。
01 商品模板 SKU、颜色、尺码、PSD 与素材状态
02 上架任务 计划编排、Excel 生成、R2 上传
03 图像处理 AI 去水印、印花标签、素材清理
04 批量渲染 底图区域配置与千图级合成
05 订单出图 烫画图、W1 专色 TIF 与失败检查

LIVE WORKSPACE

不是脚本合集,而是给运营使用的工作台

当前平台包含 12 个主要页面:订单处理、活动管理、模板管理、Excel 生成、图片上传、AI 去水印、印花库、印花标签、批量渲染、渲染任务、日志统计和 MCP 接入。所有长任务沿用统一的任务提交与 SSE 日志流,运营人员可以在界面里看到执行状态,而不是守着终端等结果。

12 运营页面
15 后端 Router
182 商品模板
6823 印花素材
Temu POD 订单处理页面截图

CORE PIPELINE

业务流不是直线,而是围绕素材状态持续回流

模板 维护商品基础信息、颜色尺码、PSD 导入状态
印花 按标签、前缀、组合 ID 管理可渲染素材
计划 用 upload_plan 编排多店铺和多日期任务
渲染 按印花区域批量生成商品效果图
订单 解析导出订单并匹配消费者定制图片
出图 生成烫画图、SKU/订单分组 TIF 和失败清单
POD 状态闭环
01 SSE 实时任务 FastAPI StreamingResponse + useSSETask,让 Excel、上传、AI、渲染和订单处理共享同一套进度反馈。
02 配置驱动 settings.yaml、catalog.yaml 与 upload_plan.json 把店铺、模板、目录和任务日期从代码中抽离。
03 并发上传 ThreadPoolExecutor + boto3 对接 Cloudflare R2,上传完成后重建资源索引,供订单与模板模块复用。
04 AI 图像处理 Gemini 2.5 Flash 处理复杂水印场景,失败图片进入重试队列,全程通过日志流回传。
05 模板渲染 PSD 区域、OpenCV 合成、印花标签与渲染任务拆分为独立模块,避免模板配置和出图逻辑互相污染。
06 妙手自动化 PySide6 桌面工具与 Playwright 浏览器自动化补齐 SPU、SKU、价格等平台外操作。

BATCH RENDERING

把“做效果图”变成可观察的批处理任务

渲染任务页按批次展示状态、进度、耗时和吞吐量。例如 QB015 批次从 6 张底图生成 2006 张结果图,耗时约 5 分 26 秒。这个视图让运营能快速判断任务是否卡住、失败或需要清理资源。

2006 张单批结果图6.2 img/s 峰值吞吐SSE 进度流失败可追踪
Temu POD 渲染任务页面截图

订单出图链路

01
导入 选择一个或多个订单项目
02
校验 检查消费者定制图片与缺失素材
03
处理 普通/定制订单走不同 Pipeline
04
导出 烫画图、处理后图、W1 专色 TIF
01SSE · ASYNC
SSE 实时日志流架构
Server-Sent Events · StreamingResponse · Composable Pattern

所有长任务都面临同一问题:耗时数秒到数分钟,用户需要实时进度反馈。我选择 SSE 而非 WebSocket——纯 HTTP 单向推流,无需升级协议,与 FastAPI StreamingResponse 天然契合。后端为每个任务分配 UUID,前端 useSSETask composable 统一管理连接生命周期,各模块零重复接入

SSE FLOW
POST /process触发任务
uuid4()生成任务 ID
GET /sse/{id}前端订阅
StreamingResponse逐行推流
LogStream.vue实时渲染
@router.get("/sse/{task_id}")
async def sse_stream(task_id: str):
  async def event_generator():
      queue = task_queues.get(task_id)
      while True:
          msg = await queue.get()
          if msg is None: break       # 任务结束信号
          yield f"data: {msg}\n\n"
  return StreamingResponse(event_generator(), media_type="text/event-stream")
02CONCURRENCY
48 线程并发上传 Pipeline
ThreadPoolExecutor · boto3 · Cloudflare R2 · 资源索引重建

图片上传是 I/O 密集型任务——网络传输时间远大于 CPU 计算时间。用 ThreadPoolExecutor(max_workers=48) 实现并发,将串行耗时压缩到约 1/48。48 是通过实验调参得出的 R2 API 限速与本地带宽的最优平衡点。上传完成后自动重建 data.json 资源索引,作为与订单模块之间唯一的数据契约。

THROUGHPUT COMPARISON
串行上传1 张/次
并发 ×48~48× 提速
with ThreadPoolExecutor(max_workers=48) as executor:
  futures = {executor.submit(upload_single, p, bucket): p for p in paths}
  for future in as_completed(futures):
      try:
          future.result()
          task_queue.put(f"✓ {futures[future].name}")  # SSE 推流
      except Exception as e:
          failed.append((futures[future], str(e)))
rebuild_index(bucket)   # 重建资源索引
03VUE 3 · TS
Vue 3 Composition API 前端架构
Composable · Pinia · TypeScript · 关注点分离

核心原则:视图层只做渲染,业务逻辑封装在 Composable。四个 Composable 各司其职,且可相互组合——useOrderTask 内部组合了 useSSETask,复用日志流逻辑。TypeScript 在 10 个 API 模块中统一了请求/响应类型,多次重构中精准捕获字段改名引发的编译错误。

useSSETask通用

SSE 连接生命周期管理,暴露 logs / isRunning,所有模块复用

useOrderTask订单

订单选择、预处理、批量提交,维护 failedImages,组合 useSSETask

usePlanEditor配置

YAML Plan 的 CRUD:GET 加载 → 本地编辑 → POST 持久化

useUploadEditor上传

上传任务配置管理,模式同 usePlanEditor,增加字段校验

04FASTAPI · DB
FastAPI 模块化后端 · 多数据源设计
Router · Service 层 · Pydantic · SQLModel · Alembic
Router 层
  • 仅暴露 HTTP 端点
  • Pydantic 入参校验
  • 调用 Service,不含业务逻辑
  • 15 个按业务域拆分的路由
Service 层
  • 核心业务逻辑
  • 可独立单元测试
  • 跨 Router 逻辑复用
  • 封装外部 API / 浏览器自动化调用
存储层
  • PostgreSQL — 结构化元数据
  • SQLite — 轻量本地历史
  • JSON/YAML — 配置与索引
  • R2 — 图片对象存储

SQLModel(SQLAlchemy + Pydantic 的融合)让同一个 Model 类同时充当 ORM 映射与 API Schema,消除了重复定义。Alembic 管理 PostgreSQL 迁移历史,每次字段变更都有版本记录。三类数据源按访问模式选型,不是过度设计,是针对各自场景的最优解。

05AI · GEMINI
Google Gemini 多模态 AI 集成
Gemini 2.5 Flash · 多模态推理 · 批处理 · 提示工程

传统水印去除依赖固定位置遮罩,但产品图的水印位置、字体、透明度各不相同。引入 Gemini 2.5 Flash 多模态模型,将图片与自然语言指令共同输入,让模型理解语义后执行图像编辑。

工程重点在提示工程:形成”描述任务 + 约束格式 + 给出示例”模板,针对纯色背景与复杂背景分别设计策略。批处理失败的图片进入重试队列,全程 SSE 推送进度。

AI PIPELINE
输入产品图 + 提示词模板
推理Gemini 2.5 Flash 多模态
输出处理后图片 base64
回写保存结果 + SSE 通知
失败入重试队列
06ORDER · TIF
订单处理、烫画图与专色 TIF 导出
Order parser · failed image check · PermPipeline · W1 spot-channel TIF

订单处理模块围绕“从平台导出订单到可交付图片文件”设计:先选择一个或多个订单项目,按普通/定制类型执行预处理或直接处理,再检查失败图片、导出烫画图,最后按 SKU 或订单号/包裹分组导出带 W1 专色通道的 TIF。对于无需 SKU 的临时素材,也支持选择本地目录或多张图片批量生成自定义 TIF。

ORDER OUTPUT FLOW
订单选择一个或多个导出项目
处理预处理定制资源或直接执行
校验检查失败图片并导出原图对比
出图导出烫画图与处理后素材
TIF按 SKU / 订单分组生成专色通道文件

这部分的重点是把人工文件整理动作变成可重复的 Pipeline:失败图片单独收集,烫画图批量打包,TIF 导出时集中展示缺失 perm_size 或印花图等配置警告。前端通过 Naive UI 的通知系统把警告完整展示给运营人员,避免“任务成功但文件不可用”的隐性错误。

07CONFIG · PLAN
配置驱动的多店铺任务编排
YAML · upload_plan.json · catalog merge · CLI / API 双入口

早期脚本的主要问题是参数散落在代码里:换店铺、换模板、换输出目录都要改脚本。现在系统将任务描述从执行逻辑中抽离出来,使用 settings.yaml 描述默认路径和全局变量,用 catalog.yaml 合并商品目录,用 upload_plan.json 编排按日期执行的批量任务。后端同一套 Pipeline 同时暴露 CLI 与 HTTP API,开发调试可以走命令行,运营执行可以走前端按钮。

配置加载
› settings.yaml 默认值
› settings.local.yaml 本地覆写
› catalog.yaml 商品目录合并
任务编排
› 按日期筛选任务
› 跳过 done=true 条目
› 支持单任务与计划模式
执行出口
› Typer CLI 调试
› FastAPI HTTP 调用
› SSE 日志统一回传
08RENDER · ASSET
模板、印花库与批量渲染链路
PSD import · OpenCV · print tags · render jobs · resource cleanup

POD 商品图不是简单的图片上传,而是由模板底图、印花、颜色、定制类型和输出格式共同决定。平台将模板配置、印花标签、PSD 导入、区域配置和渲染任务拆成独立模块:模板页负责维护商品基础信息,印花库负责管理素材和标签,批量渲染模块根据印花区域把素材合成到底图上,渲染任务页负责查看异步任务状态。

ASSET PIPELINE
模板SKU / 颜色 / 尺寸 / PSD 信息
印花名称、前缀、标签、组合 ID
区域导入 PSD 或手动配置印花区域
渲染普通 / 图片定制 / 文字定制
清理删除模板时级联预览 R2 与本地资源

12
前端页面
15
Router 模块
182
商品模板
6823
印花素材
2006
单批渲染图
SSE
实时推流