基于 Vue3 + Element Plus 的【无人值守共享自烘焙咖啡吧与智能拉花机预约点单系统】设计与实现（含PRD/三端源码/大屏）

一、项目背景与痛点：新零售无人自助浪潮下的精品咖啡工业化革新

随着全球现磨精品咖啡市场的爆发与夜间经济的繁荣，传统精品咖啡馆长期面临“咖啡师人工与租金成本高昂导致无法24小时营业、咖啡师水平参差导致拉花与风味出品不稳定、咖啡发烧友无法现场体验深度生豆烘焙乐趣、高峰期人工点单排队流失顾客”四大核心痛点。

为此，我们基于 Vue 3.4+ + Vite 5 + Pinia + Element Plus + ECharts 5.5 打造了商业级【基于 Vue3 的无人值守共享自烘焙咖啡吧与智能拉花机预约点单系统】，贯通电脑 PC 端咖啡极客自烘焙工作台/机械臂拉花设计室、手机移动端 H5 扫码点单/动态取杯口令、门店 24 小时 IoT 物联网与出杯态势中控大屏三端一体化架构，实现精品生豆烘焙曲线定制、6轴协作机械臂毫秒级艺术拉花、恒温保温无感取杯与全店耗材温控预警全闭环。

二、传统人工咖啡馆 vs 智慧无人共享自烘焙咖啡吧核心指标量化对比

三、核心业务算法：基于热风烘焙动力学的温升速率 (ROR) 与发展率 (DTR) 控温模型

在精品咖啡生豆烘焙中，温升速率（Rate of Rise, ROR）与发展时间比率（Development Time Ratio, DTR）决定了咖啡豆的花果香气、酸质与醇厚度平衡。系统通过 Pinia 状态机实现了烘焙曲线动态拟合算法：

// 核心算法：咖啡豆热风烘焙温控曲线与 DTR 黄金比率计算
import { defineStore } from 'pinia'

export const useRoastCurveEngine = defineStore('roastCurve', {
  state: () => ({
    // 烘焙阶段基准温度常数 (℃)
    stagesTemp: {
      dryEnd: 160.0,      // 脱水完成点
      maillardEnd: 185.0, // 美拉德反应终点
      firstCrack: 198.5   // 一爆起始点
    }
  }),
  actions: {
    // 计算烘焙发展率 DTR 与风味倾向
    calculateDTR(totalTimeSec, firstCrackTimeSec, dropTemp) {
      if (totalTimeSec <= firstCrackTimeSec) return { dtr: 0, profile: '未达一爆' }

      const devTime = totalTimeSec - firstCrackTimeSec
      const dtrPercentage = parseFloat(((devTime / totalTimeSec) * 100).toFixed(1))

      let flavorProfile = '平衡复合风味'
      let roastLevel = '中度烘焙'

      if (dtrPercentage < 13.0) {
        flavorProfile = '明亮活泼果酸 / 凸显花香与茉莉调性'
        roastLevel = '极浅烘焙 (Cinnamon Roast)'
      } else if (dtrPercentage <= 16.0) {
        flavorProfile = '黄金甜感平衡 / 柔和柑橘与蜂蜜坚果'
        roastLevel = '浅中烘焙 (City Roast - 推荐)'
      } else {
        flavorProfile = '浓郁黑巧克力 / 焦糖甜香与高醇厚度'
        roastLevel = '深中烘焙 (Full City Roast)'
      }

      return {
        devTimeSec: devTime,
        dtrPercentage,
        roastLevel,
        flavorProfile,
        isDropTempSafe: dropTemp <= 215.0
      }
    }
  }
})

四、三端一体化高保真系统全景架构与功能深度解读

1. 电脑 PC 端 · 咖啡体验与自烘焙风味定制门户

【业务价值与前端实现】：咖啡体验大厅首页，集中展示累计出杯量（382杯）、自烘焙咖啡豆（48.5kg）、机械臂拉花出品（268杯）与平均制作耗时（75秒）四大核心运营指标，以及今日精选产区特色豆单。前端采用 Vue 3.4 组合式 API + Element Plus 暖啡深色奢华质感主题。

【业务价值与前端实现】：咖啡豆智能自烘焙工作台，搭载 ECharts 5.5 动态双 Y 轴折线图，同时绘制豆温（BT）与升温速率（ROR），支持实时标记脱水点、美拉德期、一爆点及发展率（DTR），参数可一键下发至热风烘豆机。

【业务价值与前端实现】：机械臂拉花艺术设计室，内置经典倾心、优雅天鹅、3D立体小熊及自定义文字微雕四大类图案，清晰展示机械臂运动耗时，支持将图案轨迹矢量代码下发至 6 轴机械臂控制器。

【业务价值与前端实现】：会员云端豆库与风味档案中心，集中管理会员托管的生豆与熟豆资产、剩余保鲜天数及烘焙状态，支持随时发起“取豆自烘焙”或“直接研磨冲煮”。

【业务价值与前端实现】：咖啡实时制作进度与恒温取杯口令，动态呈现称重研磨、9Bar萃取、机械臂拉花、恒温待取 4 步工序进度条，并生成唯一的 6 位动态恒温取杯口令。

【业务价值与前端实现】：咖啡会员中心与段位勋章，展示累计品鉴杯数、云端豆库库存、会员积分与烘焙大师 Lv.3、拉花设计师等荣誉勋章。

2. 手机移动端 (Mobile H5 – 掌上扫码特调与取杯口令)

【业务价值与前端实现】：移动端扫码点单首页，顶部智能感知附近 24h 无人吧台与机械臂空闲状态，四大金刚区入口一键跳转，下方陈列产区精品豆单。

【业务价值与前端实现】：掌上个性化特调与拉花选择，支持自由定制豆种（耶加雪菲/粉红波旁/普洱）、奶品（鲜奶/燕麦奶/厚椰乳）与拉花图案（心形/天鹅/小熊），一键下单生成取杯码。

【业务价值与前端实现】：动态取杯口令与制作流水，超大字号展示 6 位动态取杯口令（如 682-901），并实时倒计时提示机械臂当前作业步骤。

【业务价值与前端实现】：移动端会员中心，快捷查看托管咖啡生豆与保鲜赏味期，支持随行杯环保打卡积分累计。

3. 运营中后台 · 门店 IoT 物联网与营收调度大屏 (Admin)

【业务价值与前端实现】：门店 24 小时运营大屏，通过 4 大运营 KPI（出杯 382 杯、营收 9550 元、活跃会员 218 人、设备在线率 99.8%）与 ECharts 5.5 图表矩阵（24小时出杯波峰折线图、豆种销量环形图、拉花图案排行柱状图、运营健康度雷达图）实现全店数字化监控。

【业务价值与前端实现】：智能设备与机械臂台账，实时采集水温、萃取水压、冷藏奶温及保温箱格位占用情况，支持远程一键复位与高温杀菌操作。

五、高频业务与技术 FAQ (Direct Answer 常见问题解答)

六、本地极速启动与工程部署指南

# 1. 进入无人值守咖啡吧系统工程目录
cd shared-coffee-system

# 2. 安装前端依赖包
npm install

# 3. 启动本地高保真原型交互服务
npm run dev
# 浏览器访问: http://localhost:3000