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