feat(shop): 实现新订单声音和语音提醒功能

- 新增 useOrderNotify 组合式函数,支持每60秒轮询检测新订单
- 采用 Web Audio API 播放叮声,Speech Synthesis API 进行语音播报
- shopOrder 页面添加提醒开关栏,包含开关、提示和测试按钮
- 开关默认关闭,需用户点击启用后启动声音和轮询功能
- 测试按钮仅在提醒开启时可用,用于验证提醒效果
- 完善样式,提升提醒栏的视觉效果和交互体验
- 统一更新相关环境变量,调整项目名称和接口地址
This commit is contained in:
2026-07-06 12:41:05 +08:00
parent d4ca571c01
commit ac574335a9
6 changed files with 328 additions and 6 deletions

View File

@@ -0,0 +1,33 @@
# 2026-07-06 工作日志
## 新订单声音/语音提醒功能
### 需求
订单管理页面 `/shop/shopOrder` 实现新订单的语音提醒("您有一条新的订单")和"叮"声提醒。
### 背景
- 订单页面原为纯 HTTP 请求获取数据(用户手动触发),无轮询、无 WebSocket
- 项目中无任何声音/音频系统
### 方案
采用**轮询检测 + Web Audio API 叮声 + Speech Synthesis API 语音播报**,纯前端实现,零依赖。
### 实现
1. 新建 `src/views/shop/shopOrder/useOrderNotify.ts` 组合式函数
- 每 60 秒轮询 `pageShopOrder({ page: 1, limit: 1, type: 0 })` 查询最新订单
- 比较最新 orderId首次查询记录基准值不触发之后检测到新 orderId 则触发提醒
- Web Audio API 生成 880Hz 正弦波"叮"声(含攻击+指数衰减包络)
- Speech Synthesis API 播报"您有一条新的订单"
- 组件卸载时自动清理定时器onBeforeUnmount
2. 修改 `src/views/shop/shopOrder/index.vue`
- 表格上方添加提醒开关栏a-switch + tooltip + 测试按钮)
- 导入 InfoCircleOutlined 图标
- 集成 useOrderNotify 组合式函数
- 添加 .order-notify-bar 样式
### 注意事项
- 浏览器策略要求音频播放需用户交互后才能触发,所以开关默认关闭
- 开关由用户点击开启,此时初始化 AudioContext 并启动轮询
- "测试提醒"按钮仅在开关开启后可用,方便用户验证声音效果
- 轮询间隔可修改 useOrderNotify.ts 中的 POLL_INTERVAL 常量