From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目

---
 src/layout/components/Message/src/Message.vue |  137 +++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 137 insertions(+), 0 deletions(-)

diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
new file mode 100644
index 0000000..d33b3b6
--- /dev/null
+++ b/src/layout/components/Message/src/Message.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'Message' })
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const { push } = useRouter()
+const userStore = useUserStoreWithOut()
+const activeName = ref('notice')
+const unreadCount = ref(0) // 鏈娑堟伅鏁伴噺
+const list = ref<any[]>([]) // 娑堟伅鍒楄〃
+
+// 鑾峰緱娑堟伅鍒楄〃
+const getList = async () => {
+  list.value = await NotifyMessageApi.getUnreadNotifyMessageList()
+  // 寮哄埗璁剧疆 unreadCount 涓� 0锛岄伩鍏嶅皬绾㈢偣鍥犱负杞澶參锛屼笉娑堥櫎
+  unreadCount.value = 0
+}
+
+// 鑾峰緱鏈娑堟伅鏁�
+const getUnreadCount = async () => {
+  NotifyMessageApi.getUnreadNotifyMessageCount().then((data) => {
+    unreadCount.value = data
+  })
+}
+
+// 璺宠浆鎴戠殑绔欏唴淇�
+const goMyList = () => {
+  push({
+    name: 'MyNotifyMessage'
+  })
+}
+
+// ========== 鍒濆鍖� =========
+onMounted(() => {
+  // 棣栨鍔犺浇灏忕孩鐐�
+  getUnreadCount()
+  // 杞鍒锋柊灏忕孩鐐�
+  setInterval(
+    () => {
+      if (userStore.getIsSetUser) {
+        getUnreadCount()
+      } else {
+        unreadCount.value = 0
+      }
+    },
+    1000 * 60 * 2
+  )
+})
+</script>
+<template>
+  <div class="message">
+    <ElPopover :width="400" placement="bottom" trigger="click">
+      <template #reference>
+        <ElBadge :is-dot="unreadCount > 0" class="item">
+          <Icon :size="18" class="cursor-pointer" icon="ep:bell" :color="color" @click="getList" />
+        </ElBadge>
+      </template>
+      <ElTabs v-model="activeName">
+        <ElTabPane label="鎴戠殑绔欏唴淇�" name="notice">
+          <el-scrollbar class="message-list">
+            <template v-for="item in list" :key="item.id">
+              <div class="message-item">
+                <img alt="" class="message-icon" src="@/assets/imgs/avatar.gif" />
+                <div class="message-content">
+                  <span class="message-title">
+                    {{ item.templateNickname }}锛歿{ item.templateContent }}
+                  </span>
+                  <span class="message-date">
+                    {{ formatDate(item.createTime) }}
+                  </span>
+                </div>
+              </div>
+            </template>
+          </el-scrollbar>
+        </ElTabPane>
+      </ElTabs>
+      <!-- 鏇村 -->
+      <div style="margin-top: 10px; text-align: right">
+        <XButton preIcon="ep:view" title="鏌ョ湅鍏ㄩ儴" type="primary" @click="goMyList" />
+      </div>
+    </ElPopover>
+  </div>
+</template>
+<style lang="scss" scoped>
+.message-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 260px;
+  line-height: 45px;
+}
+
+.message-list {
+  display: flex;
+  height: 400px;
+  flex-direction: column;
+
+  .message-item {
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--el-border-color-light);
+
+    &:last-child {
+      border: none;
+    }
+
+    .message-icon {
+      width: 40px;
+      height: 40px;
+      margin: 0 20px 0 5px;
+    }
+
+    .message-content {
+      display: flex;
+      flex-direction: column;
+
+      .message-title {
+        margin-bottom: 5px;
+      }
+
+      .message-date {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+</style>

--
Gitblit v1.8.0