生活娱乐赛道 | 肆季花坊 · 花店全业务经营管理平台
预览地址：http://69.5.22.194/
sihua-demo-submission.html (35.5 KB)
TRAE IDE 全程开发 | Next.js 16 / AntD 6 / Prisma 7 | 40+ 数据模型 / 110+ 测试用例
1. Demo 简介
是什么
肆季花坊管理系统是一套面向花店行业的全渠道经营管理平台（Web 应用），采用管理后台 + 客户 H5 商城双端架构。管理端供花店经营者/花艺师员工使用，客户端 H5 供终端消费者自助选品下单。覆盖从花材采购、库存批次管理、花束 BOM 配方、订单制作与配送、到 VIP 会员营销的完整业务闭环。
面向谁
- 花店经营者 — 需要一套数字化工具管理多门店、采购、库存、成本和利润的小微零售企业主
- 花艺师/店员 — 日常需要处理订单、管理花材库存、制作花束、配送管理的门店一线员工
- 终端消费者 — 通过 H5 商城浏览花束、下单购买、管理订阅和查看订单状态的购花客户
主要功能
| 功能 | 描述 |
|---|---|
| 花材 BOM 配方引擎 | 花束成本 = 物料成本 + 人工成本 + 辅材成本。支持按门店差异化定价，订单留存成本快照 |
| 库存批次 FIFO 管理 | 按批次入库管理花材，FIFO 扣减、保质期/过期管理、盘点与流水记录 |
| 多门店多支付体系 | 双门店独立定价、配送距离规则（10km/25km 分级）、门店级微信/支付宝/云闪付/抖音支付配置 |
| 花店特色营销 | 每周鲜花订阅、每周主题花、鲜花盲盒（权重池）、节日促销自动发券、生日提醒发券 |
| 精细化数据分析 | 销售趋势、成本分析、库存周转、月度净利、热力图、对比报表 |
| 安全审计体系 | PBKDF2 密码加密、JWT 双重存储、三层角色权限矩阵、审计日志 |
项目规模：40+ 数据模型 / 50+ API 路由 / 80+ 页面路由 / 110+ 测试用例
2. Demo 创作思路
灵感来源
花店是典型的小微零售业态，花材是易腐品，库存管理不能马虎；花束定价需要精确计算物料成本，但大多数花店仍在用 Excel 甚至纸笔记录；多门店经营时价格、库存、配送范围都需要独立管理。市面上的通用电商系统无法满足花材 BOM 配方、批次保质期、花束订阅等行业特色需求。在调研重庆璧山区和西藏拉萨的两家实体花店后，决定用 TRAE 从零打造一套懂花店业务的经营管理系统。
核心痛点与解决思路
| 用户痛点 | 现有不足 | 肆季花坊方案 |
|---|---|---|
| 花材成本核算不精确 | Excel 手动计算，遗漏辅材和人工 | BOM 配方引擎：三维度自动核算 + 成本快照 |
| 花材库存过期损耗大 | 先进先出靠记忆，无过期预警 | 库存批次 FIFO + 保质期管理 + 过期预警 |
| 多门店管理混乱 | 各门店数据割裂 | 统一平台 + 门店级独立定价/支付/配送配置 |
| 客户复购率低 | 缺乏会员体系和营销工具 | VIP 4 级会员 + 订阅 + 节日自动发券 + 生日提醒 |
| 配送范围难管控 | 电话确认距离，效率低 | 高德地图 API + 10km/25km 分级配送 + 自动审批 |
| 利润分析不清晰 | 只看流水不看净利 | 月度净利 = 毛利 - 固定成本 - 增值税 - 损耗 |
设计取舍
选择花店行业而非通用电商，是因为花材的易腐性、花束的BOM 配方结构、以及花店的订阅制营销模式带来了独特的技术挑战。SQLite 作为数据库降低了部署门槛，让小微花店也能零成本上手。
3. Demo 体验地址
在线体验地址：http://69.5.22.194
测试账号
| 角色 | 手机号 | 密码 | 可体验功能 |
|---|---|---|---|
| 管理员 | 13800000001 |
admin123 |
全部功能：系统配置、员工管理、采购、供应商、成本分析、审计日志 |
| 员工 | 13800000002 |
staff123 |
订单处理、库存管理、配送、客户服务、商品查看 |
| 客户 | 13900000001 |
验证码登录 | H5 商城选品、下单、VIP 中心、订单查询、收藏 |
客户端 H5 入口：登录后访问 /m/selection 进入选品商城。
推荐体验路径
- 管理员视角：登录 → 仪表盘 → 商品中心（BOM 配方）→ 库存批次 → 采购管理 → 数据报表
- 员工视角：登录 → 订单处理 → 库存入库 → 配送管理 → 客户服务
- 客户视角：H5 商城选品 → 加入购物车 → 结算下单 → 订单查看 → VIP 中心
4. TRAE 实践过程
开发环境与工具
- 开发工具：TRAE IDE（全程使用 AI 辅助编码）
- 技术栈：Next.js 16 + Ant Design 6 + Prisma 7 + SQLite + TypeScript 5
- 开发方式：自然语言描述需求 → TRAE AI 生成代码 → 人工审查调整 → 迭代优化
系统架构
flowchart TB
subgraph Frontend["前端层 (Next.js App Router)"]
AUTH["认证页面<br/>/login, /register"]
ADMIN["管理后台<br/>/(dashboard)"]
H5["客户端 H5<br/>/(customer)/m/*"]
end
subgraph API["API 层 (Next.js API Routes)"]
AUTH_API["认证 & 权限"]
BIZ_API["业务 API<br/>商品/订单/库存/客户"]
PAY_API["支付 & 配送<br/>支付宝/微信/顺丰"]
end
subgraph Service["服务层 (src/lib/)"]
BOM_SVC["BOM 配方引擎"]
FIFO_SVC["库存 FIFO 扣减"]
COST_SVC["成本核算"]
CRON_SVC["定时任务"]
end
subgraph Data["数据层"]
DB[("SQLite (Prisma ORM)")]
end
subgraph External["第三方集成"]
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 双重存储、三层角色权限矩阵。员工权限可细粒度配置，敏感字段按角色自动过滤。登录页统一入口，自动识别账号类型。
Session ID: 6a4b0134e609827fdf658e38
阶段三 — 商品 BOM 与库存批次
花束 BOM 配方引擎（物料+人工+辅材三维度成本核算）、库存批次 FIFO 扣减、保质期管理、盘点与流水记录。
Session ID: 6a4b1a85e609827fdf65957b
阶段四 — 订单与配送支付
订单全状态流转、高德地图配送距离校验（10km/25km 分级）、30 分钟未支付自动取消（node-cron）、多支付渠道集成。
Session ID: 6a4b1dece609827fdf6596f4
阶段五 — 客户端 H5 商城
选品商城、商品详情与评价、购物车、结算下单、订单支付、自提取件码扫码、VIP 中心、每周鲜花订阅。
Session ID: 6a4a6841e609827fdf657588
阶段六 — 营销与数据分析
VIP 4 级会员体系、积分系统、优惠券、鲜花盲盒权重池、节日促销自动发券（农历）、生日提醒发券。销售趋势、成本分析、月度净利等报表。
Session ID: 6a4b1dece609827fdf6596f4
阶段七 — 安全审计与部署
关键写操作审计日志、验证码限流防爆破。评价审核机制、负面评价飞书预警。最终部署到火山云服务器。
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 以上系统拦截。
4. 30 分钟未支付订单自动取消
通过 node-cron 注册每分钟扫描任务，查找 status=pending, payStatus=unpaid, createdAt < now-30min 的订单，自动取消并回退库存、消费券、写状态日志、发 SSE 通知。
5. 三层角色权限矩阵
| 功能模块 | 管理员 | 员工 | 客户 |
|---|---|---|---|
| 订单管理 | 全部 + 删除 | 读写 | 查看自己的 |
| 商品管理 | 全部 + 编辑/删除 | 只读 | 浏览 |
| 库存管理 | 全部 | 读写 | - |
| 采购/供应商 | 全部 | 无权限 | - |
| 成本/利润分析 | 全部 | 仅销售数据 | - |
| 系统配置/审计 | 全部 | 无权限 | - |
| 优惠券发放 | 全部 | 无权限 | 使用 |
TRAE 开发心得
- 从需求到代码的快速转化：用自然语言描述需求，TRAE 能直接生成完整的数据模型、API 路由和前端组件
- 跨模块一致性：TRAE 生成新功能时能参考已有代码风格和约定，保持代码库一致性
- 测试用例自动生成：描述测试场景后，AI 自动生成 110+ 个 Vitest 测试用例
踩坑与解决：
- Next.js 16 路由初始化问题：用
window.location.replace替代router.replace - Ant Design v6 弃用 API 迁移：Drawer
height→size、Imagevisible→open - better-sqlite3 原生模块编译：
npm rebuild修复版本匹配
Session ID 汇总
| 阶段 | 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 开发到前端页面、从测试用例到部署上线，整个开发过程高效而连贯。
报名帖链接：【生活娱乐赛道】花语智管 - 花店智能管理系统
肆季花坊管理系统 v0.1.0 | 基于 TRAE IDE 全程开发 | TRAE AI 创造力大赛参赛作品
一天天瞎搞的，这个玩意比打游戏等等活动还要上瘾。