diff --git a/src/api/siteMessage.js b/src/api/siteMessage.js
new file mode 100644
index 0000000..c32c9a8
--- /dev/null
+++ b/src/api/siteMessage.js
@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+// 获取站内信分页列表
+export function getSiteMessagePage(query) {
+    console.log('js接收参数', query)
+    return request({
+        url: '/siteMessage/pageList',
+        method: 'get',
+        params: query,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        }
+    })
+}
+
+// 更改消息状态
+export function updateSiteMessageStatus(query) {
+    return request({
+        url: '/siteMessage/getSiteMessage',
+        method: 'get',
+        pamras: query,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        }
+    })
+}
+
+// 一键已读/清除
+export function oneClickClear(query) {
+    return request({
+        url: '/siteMessage/oneClickClear',
+        method: 'get',
+        pamras: query,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        }
+    })
+} 
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d91378e..8fdec2d 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -35,8 +35,8 @@
               <size-select id="size-select" class="right-menu-item hover-effect" />
             </el-tooltip>
           </template> -->
-          <el-badge is-dot class="myBadge">
-            <img :src="messageIcon" class="custom-icon" />
+          <el-badge :is-dot="isShowDot" class="myBadge">
+            <img :src="messageIcon" class="custom-icon" @click="openMessage" />
           </el-badge>
 
 
@@ -62,17 +62,51 @@
 
         </el-col>
       </el-row>
-
-
-
-
     </div>
+    <!-- 消息弹窗 -->
+    <el-dialog v-model="visible" :show-close="false" :is-bar="true" :width="800">
+      <template #header="{ titleId }">
+        <div class="el-bar el-bar__standard el-dialog__title">
+          <div v-for="(item, index) in messaeOptions"
+            :class="activeIndex === index ? 'cursor-pointer activeTab' : 'cursor-pointer'"
+            @click="handleChageTab(index)">
+            {{ item }}</div>
+          <div style="flex-grow: 1 !important" />
+          <el-icon @click="closeMessage">
+            <Close />
+          </el-icon>
+        </div>
+      </template>
+      <ul class="messages" v-if="messageDateList.length > 0">
+        <li class="message-item system" v-for="item in messageDateList">
+          <div class="message-content">
+            <div style="width: 100%;">
+              <div class="message-text">{{ item.content }}</div>
+              <div class="message-time">{{ item.noticeTime }}</div>
+            </div>
+          </div>
+          <template v-if="activeIndex == 0">
+            <div class="view-detail" v-if="isLink(item.msgType)" @click="handleOpenLink(item.id, item.msgType)">去处理
+            </div>
+            <div class="view-detail" v-else @click="handleReadMessage(item.id)">查看详情</div>
+          </template>
+        </li>
+      </ul>
+      <div class="moreBtnPanel" v-if="messageDateList.length > 0">
+        <el-button text class="messageBtn" @click="handleClearAll">一键清除</el-button>
+        <el-button text class="messageBtn" @click="handleLoadMore">查看更多</el-button>
+      </div>
+      <el-empty :image-size="200" v-if="messageDateList.length == 0" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Close } from '@element-plus/icons-vue'
+// import { ElBar, ElDialog, ElIcon } from '@hc/element-plus'
 import systemlogo from '@/assets/logo/systemLogo.png'
-
 import messageIcon from '@/assets/images/messageIcon.png'
 import { ElMessageBox } from 'element-plus'
 import Breadcrumb from '@/components/Breadcrumb'
@@ -86,11 +120,175 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
+import { getSiteMessagePage, updateSiteMessageStatus, oneClickClear } from "@/api/siteMessage"
 
 const appStore = useAppStore()
 const userStore = useUserStore()
+const router = useRouter()
 const settingsStore = useSettingsStore()
 
+const { proxy } = getCurrentInstance()
+const timer = ref(null)
+const isShowDot = ref(false)
+const visible = ref(false)
+const messaeOptions = ref(['未读', '已读'])
+const activeIndex = ref(0)
+// 消息列表查询条件
+const tableParamsQuery = ref({
+  readFlag: 0,
+  pageNum: 1,
+  pageSize: 1
+})
+const messageDateList = ref([])
+
+// 初始化
+onMounted(() => {
+  // 每隔5s定时刷新 是否有新消息
+  timer.value = setInterval(() => {
+    InitDot()
+  }, 5000)
+});
+onBeforeUnmount(() => {
+  clearInterval(timer.value)
+});
+
+// 判断是否跳转
+const isLink = (msgType) => {
+  return [10, 20, 30, 40, 50].includes(msgType)
+}
+
+
+//  查看消息
+const openMessage = () => {
+  visible.value = true
+  if (activeIndex.value == 0) InitMessage()
+  else InitReadMessage()
+}
+//  关闭消息
+const closeMessage = () => {
+  visible.value = false
+}
+// tab切换
+const handleChageTab = (index) => {
+  activeIndex.value = index
+  tableParamsQuery.value.readFlag = index
+  if (index == 0) InitMessage()
+  else InitReadMessage()
+}
+// 查看更多
+const handleLoadMore = () => {
+  tableParamsQuery.value.pageNum = tableParamsQuery.value.pageNum + 1
+  tableParamsQuery.value.readFlag = activeIndex.value
+  if (activeIndex.value == 0) getMessage()
+  else getReadMessage()
+}
+// 查询未读数据，判读是否显示黄点
+const InitDot = () => {
+  const search = {
+    readFlag: 0,
+    pageNum: 1,
+    pageSize: 1
+  }
+  getSiteMessagePage(search).then(res => {
+    if (res.code == 200) {
+      isShowDot.value = res.rows.length > 0 ? true : false
+    } else {
+      isShowDot.value = false
+    }
+  })
+}
+// 查询未读消息
+const InitMessage = () => {
+  tableParamsQuery.value.pageNum = 1
+  getSiteMessagePage(tableParamsQuery.value).then(res => {
+    if (res.code == 200) {
+      messageDateList.value = res.rows
+    }
+  })
+}
+// 查询更多未读消息
+const getMessage = () => {
+  getSiteMessagePage(tableParamsQuery.value).then(res => {
+    if (res.code == 200) {
+      if (res.rows.length > 0) {
+        messageDateList.value = messageDateList.value.concat(res.rows);
+      }
+      else {
+        proxy.$modal.msgSuccess(`没有更多了...`)
+        if (tableParamsQuery.value.pageNum != 1) {
+          tableParamsQuery.value.pageNum = tableParamsQuery.value.pageNum - 1
+        }
+      }
+    }
+  })
+}
+// 查询已读消息
+const InitReadMessage = () => {
+  tableParamsQuery.value.pageNum = 1
+  getSiteMessagePage(tableParamsQuery.value).then(res => {
+    if (res.code == 200) {
+      messageDateList.value = res.rows;
+    }
+  })
+}
+// 查询更多已读消息
+const getReadMessage = () => {
+  getSiteMessagePage(tableParamsQuery.value).then(res => {
+    if (res.code == 200) {
+      if (res.rows.length > 0) {
+        messageDateList.value = messageDateList.value.concat(res.rows);
+      }
+      else {
+        proxy.$modal.msgSuccess(`没有更多了...`)
+        if (tableParamsQuery.value.pageNum != 1) {
+          tableParamsQuery.value.pageNum = tableParamsQuery.value.pageNum - 1
+        }
+      }
+    }
+  })
+}
+// 一键已读/一键删除
+const handleClearAll = () => {
+  oneClickClear({ readFlag: activeIndex.value }).then(res => {
+    if (res.code == 200) {
+      if (activeIndex.value == 0) InitMessage()
+      else InitReadMessage()
+    } else {
+      proxy.$modal.msgError(`操作失败...`)
+    }
+  })
+}
+// 跳转
+const handleOpenLink = (messageId, msgType) => {
+  updateSiteMessageStatus({ id: messageId }).then(res => {
+    if (res.code == 200) {
+      // 新用户注册审核提醒 esc
+      if (msgType == 10) router.push('/system/userApproval')
+      // 资质申请审核 esc
+      if (msgType == 20) router.push('/qualification/qualificationEscApproval')
+      // 标签申请审核 esc
+      if (msgType == 30) router.push('/labelManage/escApproval')
+      // 高压安全审查整改提醒 esc
+      if (msgType == 40) router.push('/safetyReview/examinerEscTask')
+      // 工具过期 esc
+      if (msgType == 50) router.push('/ppeTool')
+    } else {
+      proxy.$modal.msgError(`操作失败...`)
+    }
+  })
+}
+// 标记已读
+const handleReadMessage = (messageId) => {
+  updateSiteMessageStatus({ id: messageId }).then(res => {
+    if (res.code == 200) {
+      if (activeIndex.value == 0) InitMessage()
+      else InitReadMessage()
+    } else {
+      proxy.$modal.msgError(`操作失败...`)
+    }
+  })
+}
+
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -281,10 +479,138 @@ function toggleTheme() {
     height: 10px;
     background-color: #DDA100;
   }
+
   :deep(.el-badge__content.is-fixed) {
     top: 20px;
     right: 16px;
   }
 
 }
+
+:deep(.el-dialog__header) {
+  padding-bottom: 0px !important;
+  word-break: break-all !important;
+}
+
+:deep(.el-dialog) {
+  position: absolute;
+  bottom: 4px;
+  left: auto;
+  right: 10px;
+  padding: 0;
+  margin: 0;
+}
+
+.el-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  background: #ffffff !important;
+  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+}
+
+.el-bar__standard {
+  padding: 0 12px 0 0;
+  font-size: 18px;
+  border-radius: 6px 6px 0 0;
+}
+
+.el-bar>div:first-child {
+  margin-left: 300px;
+}
+
+.el-bar>div,
+.el-bar>div+.el-icon {
+  margin-left: 40px;
+}
+
+.el-bar>.el-icon {
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+:deep(.el-dialog__body) {
+  max-height: 760px !important;
+  padding: 0 !important;
+  color: var(--el-text-color-regular);
+  font-size: var(--el-dialog-content-font-size);
+  word-break: break-all;
+  overflow-y: auto;
+}
+
+.cursor-pointer {
+  width: 86px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  cursor: pointer;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 22px;
+  color: #1E1E1E;
+}
+
+.activeTab {
+  font-family: Microsoft YaHei;
+  font-weight: 600;
+  font-size: 22px;
+  color: #1E1E1E;
+  border-bottom: 3px solid #1A75E6;
+}
+
+.messages {
+  list-style: none;
+  padding: 0px !important;
+  margin: 6px 0px;
+}
+
+.message-item {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.message-item:hover {
+  background-color: #fafafa;
+}
+
+.message-content {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 150px);
+  overflow: hidden;
+}
+
+.message-text {
+  font-size: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.message-time {
+  font-size: 16px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.view-detail {
+  color: #1890ff;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.moreBtnPanel {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+
+.messageBtn {
+  font-size: 18px;
+}
 </style>