1. 立项背景和目标
鲜花行业从业者日常需要大量专业知识支撑:花材识别依赖经验积累、教程制作耗时耗力、店铺运营数据分散在多个平台。本项目旨在打造一款一站式鲜花行业AI辅助工具,通过AI视觉识别和自然语言处理技术,降低花艺从业者的专业门槛,提升工作效率。目标用户为花店店主、花艺师及鲜花批发商。
2. 软件功能、核心功能模块的介绍
系统包含五大核心功能模块:
花材智能识别模块:支持上传花束照片或视频,基于GPT-4 Vision模型自动识别花材种类、数量与位置信息,返回置信度评分与花材详情(别名、寓意、养护建议等),并支持识别历史记录管理。
一键下单模块:识别完成后可直接跳转至"花易来"鲜花批发平台完成花材采购下单,打通从识别到采购的完整链路。
AI教程生成模块:根据选定的花材种类、使用场景(生日/情人节/婚礼等8种)、设计风格(经典/韩式/现代等7种)和难度等级,自动生成包含分步骤图文指导、所需材料清单、制作要点的专业花艺教程。
图片分析工具模块:提供二维码/条形码自动检测功能和密集花束场景下的鲜花数量统计功能,辅助库存盘点和信息采集。
美团店铺运营助手模块:对接美团开放平台API,读取店铺订单、商品、销售数据后,由AI自动生成运营方案报告,包含销量趋势分析、热门商品排行、客户画像洞察。
3. 业务流程、功能路径描述
主业务流程为:用户上传图片 → AI识别花材 → 查看识别结果 → 选择操作路径(一键采购到花易来 / AI生成教程 / 存入历史)。
次级流程包括:进入图片分析页进行二维码检测或花束计数;进入美团运营页授权数据源并生成报告。整体采用左侧导航栏切换模块的单页应用架构,各功能模块独立入口但数据可互通流转(如识别结果可作为教程生成的输入参数)。
1. 整体架构和设计思路,不同模块使用的技术栈
项目采用前后端分离架构:
前端:Vite 5.x 构建工具 + React 18 框架 + TypeScript 强类型语言 + Material-UI (MUI) 5.x 组件库 + Tailwind CSS 原子化样式 + Zustand 轻量状态管理 + React Router v6 路由
后端:Node.js + Express.js 轻量代理层,统一对接 OpenAI GPT-4 Vision API(花材识别)、GPT-4 API(教程生成)、美团开放平台 API 和花易来批发平台 API
通信:RESTful HTTP 接口 + Axios 封装(含 Token 自动刷新拦截器)
整体设计遵循分层架构:页面组件(Pages) → 业务组件(Components) → 自定义Hooks → 服务层(Services) → API配置(Config),TypeScript interfaces 类型定义贯穿全链路确保类型安全。
2. "我"的负责模块和结果(量化)
本人作为项目交付负责人主导了完整软件开发生命周期,具体成果:
维度 量化指标
PRD文档 完成3大核心功能模块的需求定义与优先级排序
架构设计 输出50+源文件的文件结构规划、15+API端点设计、数据模型与时序图
代码交付 45个前端源文件 + 12个后端文件,Vite构建通过(exit code 0)
Bug修复 修复运行时崩溃3项、UI白屏2项、配置缺失1项、空壳页面1项
最终状态 MVP版本可运行,Mock模式下核心功能流程完整可演示
3. "我"遇到的难点、坑,和解决方式
难点一:浏览器环境兼容性崩溃
问题:apiConfig.ts 使用 Node.js 的 process.env 访问环境变量,Vite 浏览器产物中 process 不存在,整个 React 应用 ReferenceError 白屏
排查:ErrorBoundary 捕获错误 → 定位 config 文件 → 发现 process is not defined
解决:所有 process.env 替换为 Vite 标准的 import.meta.env 语法
难点二:API端点结构不一致
问题:服务层用 API_CONFIG.ENDPOINTS.RECOGNITION.HISTORY 嵌套访问,原始 config 仅扁平映射,undefined.HISTORY 报错
解决:重构 apiConfig.ts 同时保留扁平映射(ApiEndpoint枚举) 和 嵌套分组(服务层引用) 两套结构,补齐15个缺失端点
难点三:路由配置遗漏
问题:侧边栏导航 /tutorial 但 Router 仅注册 /tutorial/:id,被通配符踢回首页