赵忠林
d5e040b1e6
- 新建模块级全局单例 useOrderNotify，统一轮询检测新订单，避免多组件重复请求 - 轮询检测到新订单时触发叮声、语音播报，通知所有已注册回调刷新数据 - 订单管理菜单及 dashboard 快速入口显示红点提示新订单未查看 - 进入订单列表页时调用 clearBadge 同步最新订单ID并清除红点，标记订单已查看 - layout 全局启动新订单提醒，任意页面均生效 - menu-title 组件新增纯红点（dot）徽章显示支持 - dashboard 快速入口图标加红点显示及脉冲动画，提升视觉提示效果 - 维护新订单提醒回调集合，组件卸载自动移除回调避免内存泄漏 - 新订单提醒配置项和状态均为模块共享响应式，支持多组件无冲突使用
22 lines
579 B
Vue
22 lines
579 B
Vue
<template>
|
||
<span>{{ item.meta.title }}</span>
|
||
<div v-if="item.meta && item.meta.badge" class="ele-menu-badge">
|
||
<!-- dot 模式：纯红点，不显示数字（用于新订单提醒等） -->
|
||
<a-badge v-if="item.meta.badge === 'dot'" dot />
|
||
<!-- 数字徽章模式 -->
|
||
<a-badge
|
||
v-else
|
||
:count="item.meta.badge"
|
||
:number-style="{ background: item.meta.badgeColor as string }"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import type { MenuItemType } from 'ele-admin-pro/es';
|
||
|
||
defineProps<{
|
||
item: MenuItemType;
|
||
}>();
|
||
</script>
|