wip: 消息通知

src/components/Notify/index.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { ref, computed } from "vue"
+import { ElMessage } from "element-plus"
+import { Bell } from "@element-plus/icons-vue"
+
+type TabNameType = "通知" | "消息" | "待办"
+
+interface IDataItem {
+  name: TabNameType
+  type: "primary" | "success" | "warning" | "danger" | "info"
+  list: any[]
+}
+
+/** 角标当前值 */
+const badgeValue = computed(() => {
+  let value = 0
+  for (let i = 0; i < data.value.length; i++) {
+    value += data.value[i].list.length
+  }
+  return value
+})
+/** 角标最大值 */
+const badgeMax = 99
+/** 面板宽度 */
+const popoverWidth = 350
+/** 当前 Tab */
+const activeName = ref<TabNameType>("通知")
+/** 所有数据 */
+const data = ref<IDataItem[]>([
+  // 通知数据
+  {
+    name: "通知",
+    type: "primary",
+    list: []
+  },
+  // 消息数据
+  {
+    name: "消息",
+    type: "danger",
+    list: []
+  },
+  // 待办数据
+  {
+    name: "待办",
+    type: "warning",
+    list: []
+  }
+])
+
+const handleHistory = () => {
+  ElMessage.success(`跳转到${activeName.value}历史页面`)
+}
+</script>
+
+<template>
+  <div class="notify">
+    <el-popover placement="bottom" :width="popoverWidth" trigger="click">
+      <template #reference>
+        <el-badge :value="badgeValue" :max="badgeMax" :hidden="badgeValue === 0">
+          <el-tooltip effect="dark" content="消息通知" placement="bottom">
+            <el-icon :size="20">
+              <Bell />
+            </el-icon>
+          </el-tooltip>
+        </el-badge>
+      </template>
+      <template #default>
+        <el-tabs v-model="activeName" class="demo-tabs" stretch>
+          <el-tab-pane v-for="(item, index) in data" :name="item.name" :key="index">
+            <template #label>
+              {{ item.name }}
+              <el-badge :value="item.list.length" :max="badgeMax" :type="item.type" />
+            </template>
+            <el-scrollbar height="400px">测试数据</el-scrollbar>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="notify-history">
+          <el-button link @click="handleHistory">查看{{ activeName }}历史</el-button>
+        </div>
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.notify {
+  margin-right: 10px;
+  color: var(--el-text-color-regular);
+}
+.notify-history {
+  text-align: center;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color);
+}
+</style>

src/layout/components/NavigationBar/index.vue

@@ -9,6 +9,7 @@ import Breadcrumb from "../Breadcrumb/index.vue"
 import Hamburger from "../Hamburger/index.vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import Screenfull from "@/components/Screenfull/index.vue"
+import Notify from "@/components/Notify/index.vue"
 
 const router = useRouter()
 const appStore = useAppStore()
@@ -41,6 +42,7 @@ const logout = () => {
     <div class="right-menu">
       <Screenfull v-if="showScreenfull" class="right-menu-item" />
       <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
+      <Notify class="right-menu-item" />
       <el-dropdown class="right-menu-item">
         <el-avatar :icon="UserFilled" :size="34" />
         <template #dropdown>