feat: 新增 WebSocket 消息通知 (#20)

.env.development

@@ -5,6 +5,7 @@ VITE_API_PREFIX = '/api'
 
 # 接口地址
 VITE_API_BASE_URL = 'http://localhost:8000'
+VITE_API_WS_URL = 'ws://localhost:8000'
 
 # 地址前缀
 VITE_BASE = '/'

package.json

@@ -35,6 +35,7 @@
     "md-editor-v3": "^4.13.4",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
+    "moment": "^2.30.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.16",
     "pinia-plugin-persistedstate": "^3.1.0",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ dependencies:
   mockjs:
     specifier: ^1.1.0
     version: 1.1.0
+  moment:
+    specifier: ^2.30.1
+    version: 2.30.1
   nprogress:
     specifier: ^0.2.0
     version: 0.2.0
@@ -5901,6 +5904,10 @@ packages:
     dependencies:
       commander: 12.1.0
 
+  /moment@2.30.1:
+    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
+    dev: false
+
   /mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}

src/apis/system/notice.ts

@@ -27,3 +27,9 @@ export function updateNotice(data: any, id: string) {
 export function deleteNotice(ids: string | Array<number>) {
   return http.del(`${BASE_URL}/${ids}`)
 }
+export function getNoticeList(type: string | Array<number>) {
+  return http.get(`/system/message?page=1&size=10&sort=createTime,desc&isRead=false&type=${type}`)
+}
+export function endAllMessage() {
+  return http.patch(`/system/message/read`)
+}

src/layout/components/HeaderRightBar/Message.vue

@@ -1,45 +1,67 @@
 <template>
   <div class="message">
     <a-tabs default-active-key="1">
-      <a-tab-pane key="1" disabled>
-        <template #title>通知(1)</template>
+      <a-tab-pane key="1">
+        <template #title>通知({{ props.list.length }})</template>
+        <section>
+          <a-comment v-for="item in props.list" :key="item.id"
+                     :author="item.createUserString" :content="item.content" :datetime="item.createTime">
+            <template #actions></template>
+          </a-comment>
+          <Empty :fetch="props.fetch" :list="props.list" />
+        </section>
       </a-tab-pane>
-      <a-tab-pane key="2" disabled>
-        <template #title>关注(1)</template>
+      <a-tab-pane key="2">
+        <template #title>关注({{ props.follwlist?.length || 0 }})</template>
+        <section>
+          <template v-if="props.follwlist.length > 0">
+            <a-comment v-for="(item, index) in props.follwlist" :key="index"
+                       :author="item.createUserString" :content="item.content" :datetime="item.createTime">
+              <template #actions></template>
+            </a-comment>
+          </template>
+          <Empty :fetch="props.fetch" :list="props.follwlist" />
+        </section>
       </a-tab-pane>
-      <a-tab-pane key="3" disabled>
-        <template #title>待办(2)</template>
+      <a-tab-pane key="3">
+        <template #title>待办({{ props.todulist?.length || 0 }})</template>
+
+        <section>
+          <template v-if="props.todulist.length > 0">
+            <a-comment v-for="(item, index) in props.todulist" :key="index"
+                       :author="item.createUserString" :content="item.content" :datetime="item.createTime">
+              <template #actions></template>
+            </a-comment>
+          </template>
+          <Empty :fetch="props.fetch" :list="props.todulist" />
+        </section>
       </a-tab-pane>
     </a-tabs>
-
-    <section>
-      <a-comment
-        v-for="(item, index) in list"
-        :key="index"
-        :author="item.name"
-        :content="item.content"
-        :datetime="item.datetime"
-      >
-        <template #actions></template>
-        <template #avatar>
-          <a-avatar><img :src="item.avatar" alt="avatar" /></a-avatar>
-        </template>
-      </a-comment>
-    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'Message' })
+import Empty from './empty.vue'
 
-const list = [
-  {
-    name: 'Socrates',
-    datetime: '1小时之前',
-    content: 'v3.1.0 重构消息通知',
-    avatar: 'https://lolicode.gitee.io/scui-doc/demo/img/avatar2.gif'
+defineOptions({ name: 'Message' })
+const props = defineProps({
+  list: {
+    type: Array as PropType<any>, // 简化数据结构以便测试
+    required: true
+  },
+  todulist: {
+    type: Array as PropType<any>, // 简化数据结构以便测试
+    required: true
+  },
+  follwlist: {
+    type: Array as PropType<any>, // 简化数据结构以便测试
+    required: true
+  },
+  fetch: {
+    type: Function, // 简化数据结构以便测试
+    required: true
   }
-]
+})
 </script>
 
 <style lang="scss" scoped></style>

src/layout/components/HeaderRightBar/empty.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-empty v-if="props.list.length === 0">
+    <template #image>
+      <img src="./emp.svg" />
+    </template>
+    暂无数据
+  </a-empty>
+  <div class="footer">
+    <a class="more_btn" @click="open">查看更多 ></a>
+    <a class="end_all_btn" @click="endAll">一键已读</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { endAllMessage } from '@/apis'
+
+// 定义组件名称
+defineOptions({ name: 'Empty' })
+
+const props = defineProps({
+  list: {
+    type: Array as PropType<any>, // 简化数据结构以便测试
+    required: true
+  },
+  fetch: {
+    type: Function, // 简化数据结构以便测试
+    required: true
+  }
+})
+const open = () => {
+  window.open('/#/setting/message')
+}
+const endAll = async () => {
+  const response = await endAllMessage('1')
+  if (response?.code === 200) {
+    props.fetch()
+    Message.success('全部已读')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 5px;
+
+  .more_btn {
+    color: rgb(0, 119, 255);
+    cursor: pointer;
+  }
+
+  .end_all_btn {
+    color: rgb(0, 119, 255);
+    cursor: pointer;
+  }
+}
+</style>

src/layout/components/HeaderRightBar/index.vue

@@ -11,16 +11,16 @@
       </a-tooltip>
 
       <!-- 消息通知 -->
-      <a-popover position="bottom" trigger="click">
-        <a-badge :count="9" dot>
-          <a-button size="mini" class="gi_hover_btn">
+      <a-popover position="bottom">
+        <a-badge :count="list.length > 0 || todulist.length > 0 || follwlist.length > 0 ? 9 : 0" dot>
+          <a-button size="mini" class="gi_hover_btn" @click="handleClick">
             <template #icon>
               <icon-notification :size="18" />
             </template>
           </a-button>
         </a-badge>
         <template #content>
-          <Message></Message>
+          <Message :fetch="fetchData" :list="list" :follwlist="follwlist" :todulist="todulist"></Message>
         </template>
       </a-popover>
 
@@ -68,12 +68,76 @@
 <script setup lang="ts">
 import { Modal } from '@arco-design/web-vue'
 import { useFullscreen } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+import moment from 'moment'
 import SettingDrawer from './SettingDrawer.vue'
 import Message from './Message.vue'
 import { useUserStore } from '@/stores'
 import { isMobile } from '@/utils'
+import { getToken } from '@/utils/auth'
+import { getNoticeList } from '@/apis'
 
 defineOptions({ name: 'HeaderRight' })
+let socket: WebSocket
+const sys = 'SYSTEM'
+const list = ref<Array<any>>([])
+const follwlist = ref<Array<any>>([])
+const todulist = ref<Array<any>>([])
+const hover = ref<boolean>(false)
+
+onBeforeUnmount(() => {
+  if (socket) {
+    socket.close()
+  }
+})
+const createWebSocket = (token) => {
+  socket = new WebSocket(`${import.meta.env.VITE_API_WS_URL}/ws?token=${token}`)
+
+  socket.onopen = () => {
+    console.log('WebSocket connection opened')
+  }
+
+  socket.onmessage = (event) => {
+    // fetchData()
+    const data = JSON.parse(event.data)
+    // const data = messageData.content
+    console.log(data)
+    if (data.msgType === 1) {
+      list.value.unshift({
+        createUserString: data.fromName,
+        content: data?.content,
+        createTime:
+          data?.sendTime
+          && moment(data.sendTime).format('YYYY-MM-DD HH:mm:ss')
+      })
+    }
+  }
+
+  socket.onerror = (error) => {
+    console.error('WebSocket error:', error)
+  }
+
+  socket.onclose = () => {
+    console.log('WebSocket connection closed')
+  }
+}
+
+const fetchData = async () => {
+  try {
+    const token = getToken()
+    const response = await getNoticeList('1')
+    list.value = response?.data?.list || []
+    if (token) {
+      createWebSocket(token)
+    }
+    const follwResponse = await getNoticeList('2')
+    const toduResponse = await getNoticeList('3')
+    follwlist.value = follwResponse?.data?.list || []
+    todulist.value = toduResponse?.data?.list || []
+  } catch (error) {
+    console.error('Error fetching data:', error)
+  }
+}
 
 const { isFullscreen, toggle } = useFullscreen()
 
@@ -126,7 +190,11 @@ const checkPasswordExpired = () => {
 
 onMounted(() => {
   checkPasswordExpired()
+  fetchData()
 })
+const handleClick = () => {
+  window.open('/#/setting/message')
+}
 </script>
 
 <style lang="scss" scoped>

src/types/shims-vue.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component

src/views/setting/message/index.vue

@@ -46,8 +46,9 @@
         <a-tooltip :content="record.content"><span>{{ record.title }}</span></a-tooltip>
       </template>
       <template #isRead="{ record }">
-        <a-tag v-if="record.isRead">已读</a-tag>
-        <a-tag v-else color="arcoblue">未读</a-tag>
+        <a-tag :color="record.isRead ? '' : 'arcoblue'">
+          {{ record.isRead ? '已读' : '未读' }}
+        </a-tag>
       </template>
       <template #type="{ record }">
         <GiCellTag :value="record.type" :dict="message_type" />