肆季花坊
花店全业务经营管理平台
基于 Next.js 16 + Ant Design 6 + Prisma 7 的花店 ERP + 客户 H5 商城一体化系统,覆盖花材采购、BOM 配方、库存批次、订单配送、会员营销、数据分析全链路
1Demo 简介
是什么
肆季花坊管理系统是一套面向花店行业的全渠道经营管理平台(Web 应用),采用管理后台 + 客户 H5 商城双端架构。管理端供花店经营者/花艺师员工使用,客户端 H5 供终端消费者自助选品下单。覆盖从花材采购、库存批次管理、花束 BOM 配方、订单制作与配送、到 VIP 会员营销的完整业务闭环。
面向谁
花店经营者
需要一套数字化工具管理多门店、采购、库存、成本和利润的小微零售企业主
花艺师/店员
日常需要处理订单、管理花材库存、制作花束、配送管理的门店一线员工
终端消费者
通过 H5 商城浏览花束、下单购买、管理订阅和查看订单状态的购花客户
主要功能
花材 BOM 配方引擎
花束成本 = 物料成本 + 人工成本 + 辅材成本。支持按门店差异化定价,订单留存成本快照防止历史失真
库存批次 FIFO 管理
按批次入库管理花材,FIFO 扣减、保质期/过期管理、盘点与流水记录,精确追踪每批花材去向
多门店多支付体系
双门店独立定价、配送距离规则(10km/25km 分级)、门店级微信/支付宝/云闪付/抖音支付配置
花店特色营销
每周鲜花订阅、每周主题花、鲜花盲盒(权重池)、节日促销自动发券(含农历节日)、生日提醒发券
精细化数据分析
销售趋势、成本分析、库存周转、月度净利(毛利-固定成本-增值税-损耗)、热力图、对比报表
安全审计体系
PBKDF2 密码加密、JWT 双重存储、三层角色权限矩阵、关键写操作审计日志、验证码限流防爆破
2Demo 创作思路
灵感来源
花店是典型的小微零售业态,日常经营面临多重痛点:花材是易腐品,库存管理容不得半点马虎;花束定价需要精确计算物料成本,但大多数花店仍在用 Excel 甚至纸笔记录;多门店经营时,价格、库存、配送范围都需要独立管理。市面上的通用电商系统无法满足花材 BOM 配方、批次保质期、花束订阅等行业特色需求,而专业花店软件又价格不菲且功能僵化。
在调研重庆璧山区和西藏拉萨的两家实体花店后,我发现这些痛点真实而普遍。于是决定用 TRAE 从零打造一套懂花店业务的经营管理系统。
想解决的问题
| 用户痛点 | 现有方案的不足 | 肆季花坊的解决思路 |
|---|---|---|
| 花材成本核算不精确 | Excel 手动计算,容易遗漏辅材和人工成本 | BOM 配方引擎:物料+人工+辅材三维度自动核算,订单留存成本快照 |
| 花材库存过期损耗大 | 先进先出靠记忆,过期花材无法预警 | 库存批次 FIFO 扣减 + 保质期管理 + 过期预警 |
| 多门店管理混乱 | 各门店用不同系统或表格,数据割裂 | 统一平台 + 门店级独立定价/支付/配送配置 |
| 客户复购率低 | 缺乏会员体系和营销工具 | VIP 4 级会员 + 每周鲜花订阅 + 节日自动发券 + 生日提醒 |
| 配送范围难以管控 | 电话沟通确认距离,效率低易出错 | 高德地图 API 集成 + 10km/25km 分级配送规则 + 自动审批队列 |
| 利润分析不清晰 | 只看流水不看净利,忽视固定成本和增值税 | 月度净利 = 毛利 - 固定成本 - 增值税 - 损耗,全维度成本分析 |
为什么做这个方向
选择花店行业而非通用电商,是因为花材的易腐性、花束的BOM 配方结构、以及花店的订阅制营销模式带来了独特的技术挑战和产品价值。这些行业特性让系统不只是"又一个电商",而是真正解决花店经营者日常痛点的工具。同时,选择 SQLite 作为数据库降低了部署门槛,让小微花店也能零成本上手。
3Demo 体验地址
以下为预置测试账号,可直接登录体验不同角色的功能视图:
| 角色 | 手机号 | 密码 | 可体验功能 |
|---|---|---|---|
| 管理员 | 13800000001 |
admin123 |
全部功能:系统配置、员工管理、采购、供应商、成本分析、审计日志 |
| 员工 | 13800000002 |
staff123 |
订单处理、库存管理、配送、客户服务、商品查看 |
| 客户 | 13900000001 |
验证码登录 | H5 商城选品、下单、VIP 中心、订单查询、收藏 |
客户端 H5 入口:登录后访问 /m/selection 进入选品商城,或在管理员/员工后台点击右上角"客户端预览"。
体验路径推荐
- 管理员视角:登录后查看仪表盘 → 商品中心(BOM 配方)→ 库存批次 → 采购管理 → 数据报表(成本分析/月度净利)
- 员工视角:登录后处理订单 → 库存入库 → 配送管理 → 客户服务
- 客户视角:H5 商城选品 → 加入购物车 → 结算下单 → 查看订单 → VIP 中心
4TRAE 实践过程
开发环境与工具
开发工具
TRAE IDE(全程使用 AI 辅助编码)
技术栈
Next.js 16 + Ant Design 6 + Prisma 7 + SQLite + TypeScript 5
开发方式
自然语言描述需求 → TRAE AI 生成代码 → 人工审查调整 → 迭代优化
系统架构
flowchart TB
subgraph Frontend["前端层 (Next.js App Router)"]
direction LR
AUTH["认证页面
/login, /register"]
ADMIN["管理后台
/(dashboard)"]
H5["客户端 H5
/(customer)/m/*"]
end
subgraph API["API 层 (Next.js API Routes)"]
direction LR
AUTH_API["认证 & 权限"]
BIZ_API["业务 API
商品/订单/库存/客户"]
PAY_API["支付 & 配送
支付宝/微信/顺丰"]
end
subgraph Service["服务层 (src/lib/)"]
direction LR
BOM_SVC["BOM 配方引擎"]
FIFO_SVC["库存 FIFO 扣减"]
COST_SVC["成本核算"]
CRON_SVC["定时任务
超时订单取消"]
end
subgraph Data["数据层"]
DB[("SQLite
(Prisma ORM)")]
end
subgraph External["第三方集成"]
direction LR
AMAP["高德地图"]
SF["顺丰同城"]
PAY["支付宝/微信
云闪付/抖音"]
FEISHU["飞书通知"]
end
Frontend --> API
API --> Service
Service --> DB
API --> External
Service --> External
开发流程时间线
需求分析与数据建模
通过 TRAE 对话描述花店业务场景,AI 辅助生成 Prisma Schema。从需求到 40+ 数据模型的完整定义,包含商品/SKU/BOM、库存/批次、订单/退款、客户/VIP/优惠券等核心实体。
Session ID: 6a4b1a85e609827fdf65957b认证与权限体系
实现 PBKDF2 密码加密、JWT 双重存储(HttpOnly Cookie + Bearer Token)、三层角色权限矩阵(管理员/员工/客户)。员工权限可细粒度配置,敏感字段按角色自动过滤。登录页统一入口,自动识别账号类型。
Session ID: 6a4b0134e609827fdf658e38商品 BOM 与库存批次
花束 BOM 配方引擎(物料+人工+辅材三维度成本核算)、库存批次 FIFO 扣减、保质期管理、盘点与流水记录。支持按批次入库功能,一次采购多种花材手动分类录入。
Session ID: 6a4b1a85e609827fdf65957b订单与配送支付
订单全状态流转(pending → confirmed → making → delivering → completed)、高德地图配送距离校验(10km/25km 分级)、30 分钟未支付自动取消(node-cron 定时任务)、多支付渠道集成。
Session ID: 6a4b1dece609827fdf6596f4客户端 H5 商城
选品商城、商品详情与评价、购物车、结算下单、订单支付、自提取件码扫码、VIP 中心、每周鲜花订阅、个人中心/修改密码、亲属管理、地址管理。
Session ID: 6a4a6841e609827fdf657588营销与数据分析
VIP 4 级会员体系、积分系统、优惠券(折扣/直减/满减)、每周鲜花订阅、鲜花盲盒权重池、节日促销自动发券(农历节日支持)、生日提醒发券。销售趋势、成本分析、月度净利、库存周转、热力图等报表。
Session ID: 6a4b1dece609827fdf6596f4安全审计与部署
关键写操作审计日志、登录留痕、验证码限流防爆破。评价审核机制(pending → published → rejected/hidden)、负面评价飞书预警。最终部署到火山云服务器。
Session ID: 6a4b0134e609827fdf658e38关键技术实现
1. 花束 BOM 配方引擎
每个花束商品关联一组 BOM 配方项(BomItem),每项指定花材 SKU、数量和单位。下单时系统自动按配方扣减库存,并按"物料成本 + 人工成本 + 辅材成本"计算花束成本。订单项留存成本快照(costSnapshot),确保历史订单利润分析不受后续价格变动影响。
// 订单创建时计算成本快照
const bomItems = await getBomItems(product.id);
const materialCost = bomItems.reduce((sum, item) =>
sum + item.sku.costPrice * item.quantity, 0
);
const totalCost = materialCost + product.laborCost + product.auxiliaryCost;
orderItem.costSnapshot = { materialCost, laborCost, totalCost };
2. 库存批次 FIFO 扣减
花材按批次入库(InventoryBatch),每批记录数量、采购价、保质期。出库时按 FIFO 规则从最早批次开始扣减。库存不足时抛出异常,防止超卖。退货/取消订单时按原批次逆向回退库存。
3. 配送距离分级校验
集成高德地图 API 计算客户地址到门店的直线距离。10km 内正常下单;10-25km 标记 deliveryOverridden=true 进入管理员审批队列;25km 以上系统拦截。管理员和客户 API 双重校验。
4. 30 分钟未支付订单自动取消
通过 node-cron 注册每分钟扫描任务(runPaymentTimeoutScan),查找 status=pending, payStatus=unpaid, createdAt < now-30min 的订单,自动取消并执行回退库存、回退消费券、写 OrderStatusLog、发 SSE 通知。
5. 三层角色权限矩阵
| 功能模块 | 管理员 | 员工 | 客户 |
|---|---|---|---|
| 订单管理 | 全部 + 删除 | 读写 | 查看自己的 |
| 商品管理 | 全部 + 编辑/删除 | 只读 | 浏览 |
| 库存管理 | 全部 | 读写 | - |
| 采购/供应商 | 全部 | 无权限 | - |
| 成本/利润分析 | 全部 | 仅销售数据 | - |
| 系统配置/审计 | 全部 | 无权限 | - |
| 优惠券发放 | 全部 | 无权限 | 使用 |
TRAE 开发心得
从需求到代码的快速转化:用自然语言描述"花店需要一个 BOM 配方引擎,支持花束成本三维度核算",TRAE 能直接生成完整的数据模型、API 路由和前端组件。跨模块一致性:TRAE 在生成新功能时能参考已有代码风格和约定,保持代码库一致性。测试用例自动生成:描述测试场景后,AI 自动生成 110+ 个 Vitest 测试用例,覆盖订单、库存、BOM、优惠券、退款等核心逻辑。
Next.js 16 路由初始化问题:布局级 401 回调使用 router.replace 会触发"Router action dispatched before initialization"错误,改为 window.location.replace 解决。Ant Design v6 弃用 API:Drawer 的 height → size、Image 的 visible → open 等迁移。better-sqlite3 原生模块编译:需确保 Node.js 版本与预编译二进制匹配,通过 npm rebuild 修复。
Session ID 汇总
以下为开发过程中关键任务的 TRAE 对话 Session ID,双击对话头像可复制:
- 需求分析与数据建模:6a4b1a85e609827fdf65957b
- 认证安全与页面布局修复:6a4b0134e609827fdf658e38
- 订单配送支付与客户端 H5:6a4b1dece609827fdf6596f4
- 花材图片生成与配方完善:6a4a6841e609827fdf657588
5技术栈
| 层级 | 技术选型 | 版本 | 用途 |
|---|---|---|---|
| 前端框架 | Next.js (App Router) | 16.2.9 | 全栈框架,SSR + API Routes |
| UI 组件库 | Ant Design | 6.x | 管理端组件 |
| 样式方案 | Tailwind CSS | 4.x | 客户端 H5 样式 |
| 状态管理 | Zustand | 5.x | 全局状态(用户/购物车/门店) |
| ORM | Prisma | 7.x | 数据模型定义与查询 |
| 数据库 | SQLite (better-sqlite3) | 12.x | 轻量级嵌入式数据库 |
| 编程语言 | TypeScript | 5.x | 类型安全 |
| 定时任务 | node-cron | 4.x | 超时订单自动取消 |
| 测试框架 | Vitest + Testing Library | 4.x | 单元测试与组件测试 |
| 地图服务 | 高德地图 API | - | 地址选择与距离计算 |
| 配送服务 | 顺丰同城 | - | 即时配送 |
| 支付服务 | 支付宝/微信/云闪付/抖音 | - | 多渠道支付 |
| 通知服务 | 飞书 Webhook | - | 负面评价预警等通知 |
6总结
肆季花坊管理系统是一个从真实行业痛点出发、用 TRAE IDE 全程开发的花店经营管理平台。它不是通用电商系统的简单改版,而是深入花店业务场景,实现了花材 BOM 配方、库存批次 FIFO、多门店差异化定价、花店特色营销等行业专属功能。
在 TRAE 的辅助下,从需求分析到 40+ 数据模型定义、从 API 开发到前端页面、从测试用例到部署上线,整个开发过程高效而连贯。TRAE 不仅加速了代码生成,更在跨模块一致性、测试覆盖、代码规范等方面提供了持续的保障。
社区报名帖链接(需替换为实际通过的报名帖 URL)