社会服务赛道

肆季花坊
花店全业务经营管理平台

基于 Next.js 16 + Ant Design 6 + Prisma 7 的花店 ERP + 客户 H5 商城一体化系统,覆盖花材采购、BOM 配方、库存批次、订单配送、会员营销、数据分析全链路

TRAE IDE 全程开发 Next.js 16 / AntD 6 / Prisma 7 40+ 数据模型 / 110+ 测试用例

1Demo 简介

是什么

肆季花坊管理系统是一套面向花店行业的全渠道经营管理平台(Web 应用),采用管理后台 + 客户 H5 商城双端架构。管理端供花店经营者/花艺师员工使用,客户端 H5 供终端消费者自助选品下单。覆盖从花材采购、库存批次管理、花束 BOM 配方、订单制作与配送、到 VIP 会员营销的完整业务闭环。

面向谁

🌹

花店经营者

需要一套数字化工具管理多门店、采购、库存、成本和利润的小微零售企业主

📋

花艺师/店员

日常需要处理订单、管理花材库存、制作花束、配送管理的门店一线员工

📱

终端消费者

通过 H5 商城浏览花束、下单购买、管理订阅和查看订单状态的购花客户

主要功能

🌸

花材 BOM 配方引擎

花束成本 = 物料成本 + 人工成本 + 辅材成本。支持按门店差异化定价,订单留存成本快照防止历史失真

📦

库存批次 FIFO 管理

按批次入库管理花材,FIFO 扣减、保质期/过期管理、盘点与流水记录,精确追踪每批花材去向

🛒

多门店多支付体系

双门店独立定价、配送距离规则(10km/25km 分级)、门店级微信/支付宝/云闪付/抖音支付配置

🎁

花店特色营销

每周鲜花订阅、每周主题花、鲜花盲盒(权重池)、节日促销自动发券(含农历节日)、生日提醒发券

📈

精细化数据分析

销售趋势、成本分析、库存周转、月度净利(毛利-固定成本-增值税-损耗)、热力图、对比报表

🔐

安全审计体系

PBKDF2 密码加密、JWT 双重存储、三层角色权限矩阵、关键写操作审计日志、验证码限流防爆破

40+
数据模型
50+
API 路由
80+
页面路由
110+
测试用例

2Demo 创作思路

灵感来源

花店是典型的小微零售业态,日常经营面临多重痛点:花材是易腐品,库存管理容不得半点马虎;花束定价需要精确计算物料成本,但大多数花店仍在用 Excel 甚至纸笔记录;多门店经营时,价格、库存、配送范围都需要独立管理。市面上的通用电商系统无法满足花材 BOM 配方、批次保质期、花束订阅等行业特色需求,而专业花店软件又价格不菲且功能僵化。

在调研重庆璧山区和西藏拉萨的两家实体花店后,我发现这些痛点真实而普遍。于是决定用 TRAE 从零打造一套懂花店业务的经营管理系统。

想解决的问题

核心痛点与解决方案
用户痛点 现有方案的不足 肆季花坊的解决思路
花材成本核算不精确 Excel 手动计算,容易遗漏辅材和人工成本 BOM 配方引擎:物料+人工+辅材三维度自动核算,订单留存成本快照
花材库存过期损耗大 先进先出靠记忆,过期花材无法预警 库存批次 FIFO 扣减 + 保质期管理 + 过期预警
多门店管理混乱 各门店用不同系统或表格,数据割裂 统一平台 + 门店级独立定价/支付/配送配置
客户复购率低 缺乏会员体系和营销工具 VIP 4 级会员 + 每周鲜花订阅 + 节日自动发券 + 生日提醒
配送范围难以管控 电话沟通确认距离,效率低易出错 高德地图 API 集成 + 10km/25km 分级配送规则 + 自动审批队列
利润分析不清晰 只看流水不看净利,忽视固定成本和增值税 月度净利 = 毛利 - 固定成本 - 增值税 - 损耗,全维度成本分析

为什么做这个方向

设计取舍

选择花店行业而非通用电商,是因为花材的易腐性、花束的BOM 配方结构、以及花店的订阅制营销模式带来了独特的技术挑战和产品价值。这些行业特性让系统不只是"又一个电商",而是真正解决花店经营者日常痛点的工具。同时,选择 SQLite 作为数据库降低了部署门槛,让小微花店也能零成本上手。

3Demo 体验地址

在线体验地址
http://69.5.22.194
测试账号

以下为预置测试账号,可直接登录体验不同角色的功能视图:

角色 手机号 密码 可体验功能
管理员 13800000001 admin123 全部功能:系统配置、员工管理、采购、供应商、成本分析、审计日志
员工 13800000002 staff123 订单处理、库存管理、配送、客户服务、商品查看
客户 13900000001 验证码登录 H5 商城选品、下单、VIP 中心、订单查询、收藏

客户端 H5 入口:登录后访问 /m/selection 进入选品商城,或在管理员/员工后台点击右上角"客户端预览"。

体验路径推荐

  1. 管理员视角:登录后查看仪表盘 → 商品中心(BOM 配方)→ 库存批次 → 采购管理 → 数据报表(成本分析/月度净利)
  2. 员工视角:登录后处理订单 → 库存入库 → 配送管理 → 客户服务
  3. 客户视角: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 开发心得

AI 辅助开发的优势

从需求到代码的快速转化:用自然语言描述"花店需要一个 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 Design6.x管理端组件
样式方案Tailwind CSS4.x客户端 H5 样式
状态管理Zustand5.x全局状态(用户/购物车/门店)
ORMPrisma7.x数据模型定义与查询
数据库SQLite (better-sqlite3)12.x轻量级嵌入式数据库
编程语言TypeScript5.x类型安全
定时任务node-cron4.x超时订单自动取消
测试框架Vitest + Testing Library4.x单元测试与组件测试
地图服务高德地图 API-地址选择与距离计算
配送服务顺丰同城-即时配送
支付服务支付宝/微信/云闪付/抖音-多渠道支付
通知服务飞书 Webhook-负面评价预警等通知

6总结

肆季花坊管理系统是一个从真实行业痛点出发、用 TRAE IDE 全程开发的花店经营管理平台。它不是通用电商系统的简单改版,而是深入花店业务场景,实现了花材 BOM 配方、库存批次 FIFO、多门店差异化定价、花店特色营销等行业专属功能。

在 TRAE 的辅助下,从需求分析到 40+ 数据模型定义、从 API 开发到前端页面、从测试用例到部署上线,整个开发过程高效而连贯。TRAE 不仅加速了代码生成,更在跨模块一致性、测试覆盖、代码规范等方面提供了持续的保障。

报名帖链接

社区报名帖链接(需替换为实际通过的报名帖 URL)