gxwebsoft/guilixu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
main
guilixu-admin/.workbuddy/memory/2026-07-06.md
赵忠林 f0b0280c4f feat(shop): 实现新订单声音和语音提醒功能 
- 新增 useOrderNotify 组合式函数，支持每60秒轮询检测新订单
- 采用 Web Audio API 播放叮声，Speech Synthesis API 进行语音播报
- shopOrder 页面添加提醒开关栏，包含开关、提示和测试按钮
- 开关默认关闭，需用户点击启用后启动声音和轮询功能
- 测试按钮仅在提醒开启时可用，用于验证提醒效果
- 完善样式，提升提醒栏的视觉效果和交互体验
- 统一更新相关环境变量，调整项目名称和接口地址
2026-07-06 12:43:04 +08:00

1.7 KiB
Raw Permalink Blame History

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 常量