From 1daa291bb68315e9b375482eaea522bffa1caaec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=96=AF=E7=8B=82=E7=9A=84=E7=8B=AE=E5=AD=90Li?=
 <15040126243@163.com>
Date: Thu, 26 Mar 2026 17:34:51 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=B6=88=E6=81=AF=E7=9B=92=E5=AD=90?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8C=89=E7=B1=BB=E5=9E=8B=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/notice/index.vue | 109 ++++++++++++++-----------
 src/store/modules/notice.ts            |   1 +
 src/utils/push-message.ts              |  35 ++++++++
 src/utils/push.ts                      |   8 +-
 4 files changed, 101 insertions(+), 52 deletions(-)

diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index cd4d2ec..0361808 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -1,12 +1,17 @@
 <template>
   <div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
     <div class="head-box">
-      <div class="head-box-title">通知公告</div>
+      <div class="head-box-title">消息盒子</div>
       <div class="head-box-btn" @click="readAll">全部已读</div>
     </div>
+    <el-tabs v-model="activeTab" class="message-tabs" stretch>
+      <el-tab-pane :label="`系统 ${tabCount.system}`" name="system"></el-tab-pane>
+      <el-tab-pane :label="`通知 ${tabCount.notice}`" name="notice"></el-tab-pane>
+      <el-tab-pane :label="`工作 ${tabCount.workflow}`" name="workflow"></el-tab-pane>
+    </el-tabs>
     <div v-loading="state.loading" class="content-box">
-      <template v-if="newsList.length > 0">
-        <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
+      <template v-if="currentNewsList.length > 0">
+        <div v-for="(v, k) in currentNewsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
           <div class="item-conten">
             <div class="content-box-title">{{ v.title || '消息' }}</div>
             <div>{{ v.message }}</div>
@@ -18,15 +23,15 @@
           <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
         </div>
       </template>
-      <el-empty v-else :description="'消息为空'"></el-empty>
+      <el-empty v-else :description="emptyDescription"></el-empty>
     </div>
-    <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>
   </div>
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
 import { useNoticeStore } from '@/store/modules/notice';
 import router from '@/router';
+import { NOTICE_GROUP } from '@/utils/push-message';
 
 const noticeStore = useNoticeStore();
 const { readAll } = useNoticeStore();
@@ -35,24 +40,35 @@ const { readAll } = useNoticeStore();
 const state = reactive({
   loading: false
 });
-const newsList = ref([]) as any;
+const activeTab = ref<string>(NOTICE_GROUP.SYSTEM);
+const newsList = computed(() => noticeStore.state.notices);
 
-/**
- * 初始化数据
- * @returns
- */
-const getTableData = async () => {
-  state.loading = true;
-  newsList.value = noticeStore.state.notices;
-  state.loading = false;
-};
+const tabCount = computed(() => ({
+  system: newsList.value.filter((item: any) => (item.category || NOTICE_GROUP.SYSTEM) === NOTICE_GROUP.SYSTEM).length,
+  notice: newsList.value.filter((item: any) => item.category === NOTICE_GROUP.NOTICE).length,
+  workflow: newsList.value.filter((item: any) => item.category === NOTICE_GROUP.WORKFLOW).length
+}));
+
+const currentNewsList = computed(() => {
+  return newsList.value.filter((item: any) => {
+    return (item.category || NOTICE_GROUP.SYSTEM) === activeTab.value;
+  });
+});
+
+const emptyDescription = computed(() => {
+  if (activeTab.value === NOTICE_GROUP.NOTICE) {
+    return '暂无通知公告消息';
+  }
+  if (activeTab.value === NOTICE_GROUP.WORKFLOW) {
+    return '暂无工作流消息';
+  }
+  return '暂无系统消息';
+});
 
 //点击消息，写入已读
 const onNewsClick = async (item: any) => {
-  newsList.value[item].read = true;
-  //并且写入pinia
-  noticeStore.state.notices = newsList.value;
-  const current = newsList.value[item];
+  currentNewsList.value[item].read = true;
+  const current = currentNewsList.value[item];
   if (current?.path) {
     await router.push({
       path: current.path,
@@ -60,17 +76,6 @@ const onNewsClick = async (item: any) => {
     });
   }
 };
-
-// 前往通知中心点击
-const onGoToGiteeClick = () => {
-  window.open('https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/');
-};
-
-onMounted(() => {
-  nextTick(() => {
-    getTableData();
-  });
-});
 </script>
 
 <style lang="scss" scoped>
@@ -79,7 +84,7 @@ onMounted(() => {
   flex-direction: column;
   min-width: 0;
 
-  .head-box {
+    .head-box {
     display: flex;
     border-bottom: 1px solid rgba(148, 163, 184, 0.14);
     box-sizing: border-box;
@@ -107,11 +112,34 @@ onMounted(() => {
     }
   }
 
+  .message-tabs {
+    padding-top: 6px;
+
+    :deep(.el-tabs__header) {
+      margin-bottom: 0;
+    }
+
+    :deep(.el-tabs__nav-wrap::after) {
+      background: rgba(148, 163, 184, 0.14);
+    }
+
+    :deep(.el-tabs__item) {
+      font-size: 12px;
+      height: 34px;
+      color: var(--app-text-muted);
+    }
+
+    :deep(.el-tabs__item.is-active) {
+      color: var(--app-accent-strong);
+      font-weight: 600;
+    }
+  }
+
   .content-box {
     height: 300px;
     overflow: auto;
     font-size: 13px;
-    padding: 8px 0;
+    padding: 8px 0 0;
 
     .content-box-item {
       display: flex;
@@ -167,23 +195,6 @@ onMounted(() => {
     }
   }
 
-  .foot-box {
-    height: 40px;
-    color: var(--app-accent-strong);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    opacity: 0.8;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-top: 1px solid rgba(148, 163, 184, 0.14);
-    margin-top: 4px;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
   :deep(.el-empty__description p) {
     font-size: 13px;
   }
diff --git a/src/store/modules/notice.ts b/src/store/modules/notice.ts
index 0dbc2cb..eda6473 100644
--- a/src/store/modules/notice.ts
+++ b/src/store/modules/notice.ts
@@ -3,6 +3,7 @@ import { reactive } from 'vue';
 
 export interface NoticeItem {
   title?: string;
+  category?: string;
   type?: string;
   source?: string;
   read: boolean;
diff --git a/src/utils/push-message.ts b/src/utils/push-message.ts
index 2b69060..81fe6b0 100644
--- a/src/utils/push-message.ts
+++ b/src/utils/push-message.ts
@@ -5,6 +5,20 @@ export const PUSH_MESSAGE_TYPE = {
   CUSTOM: 'custom'
 } as const;
 
+export const PUSH_MESSAGE_SOURCE = {
+  BACKEND: 'backend',
+  NOTICE: 'notice',
+  WORKFLOW: 'workflow',
+  LLM: 'llm',
+  CLIENT: 'client'
+} as const;
+
+export const NOTICE_GROUP = {
+  SYSTEM: 'system',
+  NOTICE: 'notice',
+  WORKFLOW: 'workflow'
+} as const;
+
 export interface PushMessagePayload {
   type?: string;
   source?: string;
@@ -45,3 +59,24 @@ export const parsePushMessage = (raw: string): PushMessagePayload => {
 export const shouldAppendNotice = (payload: PushMessagePayload) => {
   return MESSAGE_CENTER_TYPES.has(payload.type ?? PUSH_MESSAGE_TYPE.MESSAGE);
 };
+
+export const resolveNoticeGroup = (payload: PushMessagePayload) => {
+  if (payload.type === PUSH_MESSAGE_TYPE.NOTICE || payload.source === PUSH_MESSAGE_SOURCE.NOTICE) {
+    return NOTICE_GROUP.NOTICE;
+  }
+  if (payload.source === PUSH_MESSAGE_SOURCE.WORKFLOW) {
+    return NOTICE_GROUP.WORKFLOW;
+  }
+  return NOTICE_GROUP.SYSTEM;
+};
+
+export const resolveNoticeTitle = (payload: PushMessagePayload) => {
+  const group = resolveNoticeGroup(payload);
+  if (group === NOTICE_GROUP.NOTICE) {
+    return '通知公告消息';
+  }
+  if (group === NOTICE_GROUP.WORKFLOW) {
+    return '工作流消息';
+  }
+  return '系统消息';
+};
diff --git a/src/utils/push.ts b/src/utils/push.ts
index f091b6c..f7f81fb 100644
--- a/src/utils/push.ts
+++ b/src/utils/push.ts
@@ -1,7 +1,7 @@
 import { getToken } from '@/utils/auth';
 import { ElNotification } from 'element-plus';
 import { useNoticeStore } from '@/store/modules/notice';
-import { parsePushMessage, PUSH_MESSAGE_TYPE, shouldAppendNotice } from '@/utils/push-message';
+import { parsePushMessage, resolveNoticeGroup, resolveNoticeTitle, shouldAppendNotice } from '@/utils/push-message';
 
 let closePushConnection: (() => void) | undefined;
 
@@ -10,8 +10,10 @@ const appendNotice = (raw: string) => {
   if (!shouldAppendNotice(payload)) {
     return;
   }
+  const title = resolveNoticeTitle(payload);
   useNoticeStore().addNotice({
-    title: payload.type === PUSH_MESSAGE_TYPE.NOTICE ? '通知公告' : '系统消息',
+    title,
+    category: resolveNoticeGroup(payload),
     type: payload.type,
     source: payload.source,
     message: payload.message ?? '',
@@ -23,7 +25,7 @@ const appendNotice = (raw: string) => {
     time: new Date(payload.timestamp ?? Date.now()).toLocaleString()
   });
   ElNotification({
-    title: payload.type === PUSH_MESSAGE_TYPE.NOTICE ? '通知公告' : '消息',
+    title,
     message: payload.message ?? '',
     type: 'success',
     duration: 3000