feat(shopOrder): 实现电脑版后台全局新订单红点提示

- 新建模块级全局单例 useOrderNotify,统一轮询检测新订单,避免多组件重复请求
- 轮询检测到新订单时触发叮声、语音播报,通知所有已注册回调刷新数据
- 订单管理菜单及 dashboard 快速入口显示红点提示新订单未查看
- 进入订单列表页时调用 clearBadge 同步最新订单ID并清除红点,标记订单已查看
- layout 全局启动新订单提醒,任意页面均生效
- menu-title 组件新增纯红点(dot)徽章显示支持
- dashboard 快速入口图标加红点显示及脉冲动画,提升视觉提示效果
- 维护新订单提醒回调集合,组件卸载自动移除回调避免内存泄漏
- 新订单提醒配置项和状态均为模块共享响应式,支持多组件无冲突使用
This commit is contained in:
2026-07-15 15:26:48 +08:00
parent 3a951c70f5
commit d5e040b1e6
6 changed files with 266 additions and 106 deletions

View File

@@ -113,3 +113,19 @@
- 引入 `getCompressedImageUrl`(来自 `src/utils/image.ts`),将商品图片 `:src="record.goodsImage"` 改为 `:src="getCompressedImageUrl(record.goodsImage)"`
-`shopGoods``shopOrder``dashboard` 等页面保持一致:默认宽度 240px、质量 90、自动补全 OSS 域名、跳过已含 `x-oss-process` 的 URL。
- 预览行为未改(仍走 a-image 默认 src 预览)。
## 电脑版后台新订单红点提示(全局)
- 需求:电脑版后台有新订单时显示红点,让管理员知道有新订单。
- 关键发现:系统已有菜单红点基础设施(`menu-title.vue``item.meta.badge` 渲染徽章;`user.ts` `setMenuBadge(path,value,color)``layout/index.vue``.ele-menu-badge` 样式),但 `useOrderNotify` 原为组件级dashboard/cms dashboard/shopOrder 三处各自独立轮询),未接通红点。
- 改造 `src/views/shop/shopOrder/useOrderNotify.ts` 为**模块级全局单例**
- 轮询/状态/红点全部模块级变量enabled、hasNewOrder、lastOrderId、timer多组件调用只一个轮询。
- 检测到新订单 → triggerNotify叮声+语音+遍历回调Set+ `setOrderBadge(true)``userStore.setMenuBadge('/shop/shopOrder','dot','#ff4d4f')`
- 新增 `clearBadge()`:立即清红点 + 重查最新订单同步 lastOrderId标记"已查看")。
- `onNewOrder` 回调用 Set 管理,组件 onBeforeUnmount 自动移除;`start()` 幂等,由 layout 调一次。
- `src/layout/components/menu-title.vue``badge==='dot'` 时用 `<a-badge dot />` 纯红点,否则原数字徽章逻辑。
- `src/layout/index.vue`setup 调 `useOrderNotify().start()` 全局启动,后台任意页面生效。
- `src/views/shop/shopOrder/index.vue``onMounted` + `onActivated``clearBadge()`(兼容 keep-alive `cache-key`,用 `orderBadgeMounted` 标志防首次双触发)。
- `src/views/shop/dashboard/index.vue``quickLinks` 改 computed订单管理项 `badge: hasNewOrder.value``quick-icon` 加红点 span + pulse 动画样式。
- 决策(用户确认):红点=新订单未查看(进订单页清除);位置=订单管理菜单+dashboard快速入口订单管理图标声音保留并全局化。
- 构建验证:`vite build --outDir dist_verify` 通过EXIT:0。原 `pnpm build` 失败仅因 vite 清空 `dist/assets` 被安全删除保护拦截83文件>50阈值与代码无关。