NoticeDropdown 通知下拉

通知下拉组件，用于显示系统通知和消息提醒。

🎯 在线体验：登录 https://vue.youlai.tech 后，点击右上角导航栏的通知图标即可查看消息。

功能特性

• 🔔 消息提醒 - 显示未读消息数量徽章
• 📋 消息列表 - 下拉展示消息列表
• 👁️ 已读标记 - 支持单条已读和全部已读
• 📄 详情查看 - 点击消息查看详细内容
• 🏷️ 类型标签 - 使用 DictTag 显示消息类型

基础用法

<template>
  <NoticeDropdown />
</template>

<script setup lang="ts">
import NoticeDropdown from '@/components/NoticeDropdown/index.vue'
</script>

在导航栏中使用

<template>
  <div class="navbar">
    <div class="navbar-right">
      <NoticeDropdown />
      <UserDropdown />
    </div>
  </div>
</template>

功能说明

消息徽章

• 有未读消息时显示数量徽章
• 最大显示 99+
• 无消息时只显示铃铛图标

消息列表

• 显示消息类型标签（使用 DictTag）
• 显示消息标题（超长截断）
• 显示发布时间

消息操作

操作	说明
点击消息	标记为已读并查看详情
全部已读	将所有消息标记为已读
查看更多	跳转到消息中心页面

组件结构

NoticeDropdown/
├── index.vue      # 主组件
└── useNotice.ts   # 逻辑 Composable

useNotice

组件内部使用 useNotice Composable 管理状态和逻辑：

const {
  list,           // 消息列表
  detail,         // 当前查看的消息详情
  dialogVisible,  // 详情弹窗显示状态
  read,           // 标记单条已读
  readAll,        // 标记全部已读
  goMore          // 跳转到消息中心
} = useNotice()

消息数据结构

interface NoticeItem {
  id: number
  title: string
  content: string
  type: number | string  // 消息类型，对应字典 notice_type
  publishTime: string
  publisherName: string
}

样式定制

// 自定义下拉面板宽度
:deep(.el-dropdown-menu) {
  width: 350px;
}

// 自定义消息项样式
.notice-item {
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  
  &:hover {
    background-color: var(--el-fill-color-light);
  }
}

注意事项

1. 字典配置：需要配置 notice_type 字典用于显示消息类型
2. API 对接：需要对接后端消息通知接口
3. 实时推送：可配合 WebSocket 实现消息实时推送

相关链接

• DictTag 字典标签
• 实时通信