赵忠林
f0b0280c4f
- 新增 useOrderNotify 组合式函数，支持每60秒轮询检测新订单 - 采用 Web Audio API 播放叮声，Speech Synthesis API 进行语音播报 - shopOrder 页面添加提醒开关栏，包含开关、提示和测试按钮 - 开关默认关闭，需用户点击启用后启动声音和轮询功能 - 测试按钮仅在提醒开启时可用，用于验证提醒效果 - 完善样式，提升提醒栏的视觉效果和交互体验 - 统一更新相关环境变量，调整项目名称和接口地址
35 lines
1.7 KiB
Markdown
35 lines
1.7 KiB
Markdown
# 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 样式
|
||
|
||
### 注意事项
|
||
- 开关**默认开启**，进入订单页面即自动开始轮询
|
||
- 浏览器策略要求音频播放需用户交互后才能触发，因此注册了 document click/keydown 一次性监听器，用户首次点击或按键时自动解锁音频
|
||
- 用户未交互前检测到新订单时，语音和叮声可能静默失败，交互后即恢复正常
|
||
- "测试提醒"按钮仅在开关开启后可用，方便用户验证声音效果
|
||
- 轮询间隔可修改 useOrderNotify.ts 中的 POLL_INTERVAL 常量
|