萝卜头门户网站产品系统

一、立项原因

本项目面向定制服饰及 POD 按需生产业务，建设统一的 Web 门户系统。当前业务涉及用户注册登录、服饰选择、在线设计、商品保存、购物车、订单确认、支付、订单跟踪、客户管理和账单管理等多个环节，流程较长、角色较多，需要一个统一平台承载核心操作。

通过本项目建设，可以将设计、下单、支付和履约查询等能力集中到同一门户中，提升用户操作效率，减少流程跳转，增强系统整体协同能力。

二、解决的产品问题

项目主要解决以下问题：

降低定制服饰设计门槛，支持用户在线完成图片上传、文字编辑、模板选择、AI 图片、裁剪和预览等操作。

打通从底衫选择、在线设计、商品保存到购物车和订单确认的完整流程。

支持普通用户、主理人、业务员等不同角色的差异化操作场景。

提供订单列表、订单详情、支付状态、物流信息等能力，方便用户查看订单进度。

支持多种支付方式和分享支付场景，完善订单支付流程。

提供客户管理、个人中心、地址簿和账单中心等基础管理能力。

三、行业场景
本项目适用于定制服饰、按需生产、个性化商品设计、线上下单和订单履约管理等场景。
在该类业务中，用户通常需要先选择基础服饰，再进行图案或文字设计，随后完成下单、支付和订单查询。平台需要同时支撑设计工具、商品管理、订单管理、支付管理和用户信息管理，保证从设计到履约的流程顺畅。
四、业务背景
Robot / Robotees 门户项目定位为定制服饰 POD 门户系统，核心是围绕“服饰选择、在线设计、商品生成、订单提交、支付确认、履约查看”建立完整的线上流程。
用户进入系统后，可以完成注册登录、选择底衫、在线创建设计、保存商品、加入购物车、确认订单并完成支付。不同角色可以根据权限进入对应工作台，处理订单、客户、账单和个人信息等相关事项。

本项目主要包括门户账号、工作台、底衫库、在线设计、商品管理、购物车、订单、支付、客户管理、个人中心、账单中心等功能模块。

门户账号模块支持首页展示、登录、注册、忘记密码、重置密码及第三方登录承接；工作台模块根据不同角色展示常用入口、待处理事项和业务概览；底衫库模块支持服饰基础款浏览、详情查看、颜色尺码选择、价格和库存展示。

在线设计模块是核心功能，支持图片上传、文字添加、模板素材、AI 图片、颜色调整、裁剪、擦除、撤销重做、设计预览和商品保存；商品管理模块用于查看已创建商品及相关设计参数；购物车模块支持商品列表、数量调整、SKU 修改、删除和下单前确认。

订单模块支持普通下单、代理下单、订单列表、订单详情、订单状态、物流轨迹和确认收货；支付模块支持订单支付、支付结果、分享支付链接和多种支付方式；客户管理模块支持客户列表、搜索、新建、权限管理和审核操作；个人中心用于维护用户资料、账号及结算信息；账单中心支持账单列表、详情查看、状态筛选、确认和导出。

系统同时提供页面布局、菜单导航、语言切换、路由权限、接口请求、异常提示和全局状态管理等基础能力，保障各业务模块稳定运行。

我主要负责门户项目中底衫库、商品管理、订单链路、支付联动及账单中心等模块的开发与维护。具体包括：底衫列表与详情接口对接、颜色尺码参数处理、价格区间展示、收藏及跳转逻辑；商品管理页面开发、商品接口联调、SKU 编辑、加入购物车、商品价格展示及角色控制；订单列表、订单详情、订单状态、物流信息、支付后刷新、取消支付刷新、自提场景、下单校验等功能；账单中心的接口对接、账单详情、账单导出、角色权限控制、账单状态流转及多语言文案维护。

技术实现上，基于 Vue 3 + Vite 架构，结合 Element Plus、Pinia、Vue Router、Axios、vue-i18n、SCSS 等技术栈，按业务模块拆分页面、组件、API、adapter 和语言包，形成较清晰的前端模块化结构。

实现难点主要在于多角色权限、商品价格与订单状态联动、支付/订单/购物车状态同步、账单流程流转、接口字段频繁调整后的兼容处理。亮点是通过角色判断、兜底校验、无感刷新、数据适配层和国际化拆分，提升了复杂业务流程的稳定性和可维护性。