feat(shopOrder): 订单提醒时同步刷新列表数据

- Dashboard 欢迎横幅标题改为显示当前用户租户名称
- useOrderNotify 新增 onNewOrder 回调参数
- 新订单提醒触发时调用 onNewOrder 回调刷新表格数据
- shopOrder 页面调用 useOrderNotify 时传入刷新回调
- 保证新订单提醒时语音播放与表格数据同步更新
This commit is contained in:
2026-07-14 19:36:36 +08:00
parent 3989c755e8
commit ad1a9f9839
3 changed files with 32 additions and 4 deletions

View File

@@ -398,7 +398,9 @@
const activeKey = ref<string>('undelivered');
// ============ 新订单提醒 ============
const { enabled: notifyEnabled, toggle: onNotifyToggle, testNotify: onTestNotify } = useOrderNotify();
const { enabled: notifyEnabled, toggle: onNotifyToggle, testNotify: onTestNotify } = useOrderNotify({
onNewOrder: () => reload()
});
// 表格数据源
const datasource: DatasourceFunction = ({
page,

View File

@@ -9,6 +9,7 @@ import type { ShopOrder } from '@/api/shop/shopOrder/model';
* 1. 定时轮询 pageShopOrder只查最新 1 条)
* 2. 与上次记录的 orderId 比较,不同则说明有新订单
* 3. 播放"叮"声Web Audio API + 语音播报"您有一条新的订单"Speech Synthesis API
* 4. 同时触发 onNewOrder 回调,通知调用方刷新页面数据
*
* 浏览器策略:音频播放需要用户交互后才允许。
* 默认开启轮询,音频在用户首次交互后自动解锁。
@@ -51,6 +52,9 @@ let initialized = false;
/** 用户交互解锁音频的监听器(一次性) */
let unlockHandler: (() => void) | null = null;
/** 新订单回调函数(由调用方传入,用于刷新页面数据) */
let onNewOrderCallback: (() => void) | null = null;
// ============ 声音播放 ============
/**
@@ -143,13 +147,17 @@ function speak(text: string) {
}
/**
* 触发提醒:叮声 + 语音播报
* 触发提醒:叮声 + 语音播报 + 刷新页面
*/
function triggerNotify() {
// 尝试初始化音频上下文(如果已解锁则生效,未解锁则静默失败)
initAudioContext();
playDingSound();
speak(SPEECH_TEXT);
// 通知调用方刷新页面数据
if (onNewOrderCallback) {
onNewOrderCallback();
}
}
// ============ 轮询逻辑 ============
@@ -231,11 +239,18 @@ function stopPolling() {
*
* 用法:
* ```ts
* const { enabled, toggle } = useOrderNotify();
* const { enabled, toggle } = useOrderNotify({
* onNewOrder: () => reload() // 检测到新订单时刷新表格
* });
* // 用户点击开关时调用 toggle(true/false)
* ```
*
* @param options.onNewOrder 检测到新订单时的回调(通常用于刷新页面数据)
*/
export function useOrderNotify() {
export function useOrderNotify(options?: { onNewOrder?: () => void }) {
// 缓存回调
onNewOrderCallback = options?.onNewOrder ?? null;
// 组件挂载时自动启动(默认开启)
onMounted(() => {
// 注册用户交互解锁音频监听器
@@ -253,6 +268,8 @@ export function useOrderNotify() {
document.removeEventListener('keydown', unlockHandler);
unlockHandler = null;
}
// 清理回调引用
onNewOrderCallback = null;
});
/**