feat(shop): 实现新订单声音和语音提醒功能
- 新增 useOrderNotify 组合式函数,支持每60秒轮询检测新订单 - 采用 Web Audio API 播放叮声,Speech Synthesis API 进行语音播报 - shopOrder 页面添加提醒开关栏,包含开关、提示和测试按钮 - 开关默认关闭,需用户点击启用后启动声音和轮询功能 - 测试按钮仅在提醒开启时可用,用于验证提醒效果 - 完善样式,提升提醒栏的视觉效果和交互体验 - 统一更新相关环境变量,调整项目名称和接口地址
This commit is contained in:
33
.workbuddy/memory/2026-07-06.md
Normal file
33
.workbuddy/memory/2026-07-06.md
Normal 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 常量
|
||||
Reference in New Issue
Block a user