feat 消息通知

src/components/registerGlobComp.ts

@@ -5,6 +5,8 @@ import { Icon } from './Icon'
 import {
   Layout,
   Input,
+  Badge,
+  Popover,
   InputNumber,
   Empty,
   Popconfirm,
@@ -49,6 +51,8 @@ export function registerGlobComp(app: App) {
   app.use(Tag)
   app.use(Tabs)
   app.use(Upload)
+  app.use(Badge)
+  app.use(Popover)
   app.use(Checkbox)
   app.use(List)
   app.use(Space)

src/layouts/default/header/components/notify/SiteMessage.api.ts

@@ -0,0 +1,22 @@
+import { defHttp } from '/@/utils/http/axios'
+import { BaseEntity } from '/#/web'
+import { PageResult, Result } from '/#/axios'
+
+/**
+ * 未读消息数量
+ */
+export function countByReceiveNotRead() {
+  return defHttp.get<Result<number>>({
+    url: '/site/message/countByReceiveNotRead',
+  })
+}
+
+/**
+ * 接收站内信消息分页查询
+ */
+export function pageByReceive(params) {
+  return defHttp.get<Result<PageResult>>({
+    url: '/site/message/pageByReceive',
+    params: params,
+  })
+}

src/layouts/default/header/components/notify/index.vue

@@ -1,91 +1,105 @@
 <template>
   <div :class="prefixCls">
-    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
+    <a-popover
-      <Badge :count="count" dot :numberStyle="numberStyle">
+      v-model:visible="visible"
+      trigger="click"
+      overlayClassName="header-notice-wrapper"
+      @visibleChange="visibleChange"
+      :overlayStyle="{ width: '300px' }"
+    >
+      <a-badge :count="notReadMsgCount" dot>
         <BellOutlined />
-      </Badge>
+      </a-badge>
       <template #content>
-        <Tabs>
+        <a-spin :spinning="loading">
-          <template v-for="item in listData" :key="item.key">
+          <a-list>
-            <TabPane>
+            <a-list-item v-for="o in notReadMsgList" :key="o.id">
-              <template #tab>
+              <a href="javascript:" @click="showMessage(o)">
-                {{ item.name }}
+                <a-list-item-meta :description="o.senderTime">
-                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
+                  <template #title>
-              </template>
+                    <a-tag color="red">未读</a-tag>
-              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
+                    <a-typography-text :ellipsis="{ tooltip: o.title }" :content="o.title" />
-              <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
+                  </template>
-              <NoticeList :list="item.list" v-else />
+                </a-list-item-meta>
-            </TabPane>
+              </a>
-          </template>
+              <span>{{ o.senderName }}</span>
-        </Tabs>
+            </a-list-item>
+          </a-list>
+          <div style="margin-top: 5px; text-align: center">
+            <a-button @click="toSiteMessage" type="dashed" block>查看更多</a-button>
+          </div>
+        </a-spin>
       </template>
-    </Popover>
+    </a-popover>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { computed, defineComponent, ref } from 'vue'
+  import { onMounted, ref } from 'vue'
-  import { Popover, Tabs, Badge } from 'ant-design-vue'
   import { BellOutlined } from '@ant-design/icons-vue'
   import { tabListData, ListItem } from './data'
-  import NoticeList from './NoticeList.vue'
   import { useDesign } from '/@/hooks/web/useDesign'
   import { useMessage } from '/@/hooks/web/useMessage'
+  import { $ref } from 'vue/macros'
+  import { countByReceiveNotRead, pageByReceive } from '/@/layouts/default/header/components/notify/SiteMessage.api'
 
-  export default defineComponent({
+  const { prefixCls } = useDesign('header-notify')
-    components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
+  const { createMessage } = useMessage()
-    setup() {
+  const listData = ref(tabListData)
-      const { prefixCls } = useDesign('header-notify')
-      const { createMessage } = useMessage()
-      const listData = ref(tabListData)
 
-      const count = computed(() => {
+  let loading = $ref(false)
-        let count = 0
+  let visible = $ref(false)
-        for (let i = 0; i < tabListData.length; i++) {
+  // 未读消息数量
-          count += tabListData[i].list.length
+  let notReadMsgCount = $ref(0)
-        }
+  let notReadMsgList = $ref<any>([])
-        return count
+  onMounted(() => {
-      })
+    receivedCount()
-
-      function onNoticeClick(record: ListItem) {
-        createMessage.success('你点击了通知，ID=' + record.id)
-        // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
-        record.titleDelete = !record.titleDelete
-      }
-
-      return {
-        prefixCls,
-        listData,
-        count,
-        onNoticeClick,
-        numberStyle: {},
-      }
-    },
   })
+
+  // 查询当前用户的未读消息数量
+  function receivedCount() {
+    countByReceiveNotRead().then(({ data }) => {
+      notReadMsgCount = data
+    })
+  }
+
+  // 打开列表页
+  function fetchNotice() {
+    loading = false
+    pageByReceive({
+      current: 1,
+      size: 3,
+      haveRead: false,
+    }).then(({ data }) => {
+      notReadMsgList = data.records
+      loading = false
+    })
+  }
+
+  // 变化回调
+  function visibleChange() {
+    if (visible) {
+      fetchNotice()
+    }
+  }
+
+  // 跳转到站内信界面
+  function toSiteMessage() {}
+
+  // 查看我的消息
+  function showMessage(message) {}
+  function onNoticeClick(record: ListItem) {
+    createMessage.success('你点击了通知，ID=' + record.id)
+    // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
+    record.titleDelete = !record.titleDelete
+  }
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-header-notify';
+  .header-notice {
+    display: inline-block;
+    transition: all 0.3s;
 
-  .@{prefix-cls} {
+    span {
-    padding-top: 2px;
+      vertical-align: initial;
-
-    &__overlay {
-      max-width: 360px;
-    }
-
-    .ant-tabs-content {
-      width: 300px;
-    }
-
-    .ant-badge {
-      font-size: 18px;
-
-      .ant-badge-multiple-words {
-        padding: 0 4px;
-      }
-
-      svg {
-        width: 0.9em;
-      }
     }
   }
 </style>