wip: 消息通知

src/components/Notify/NotifyList.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>欢迎 PR !!!</template>
+
+<style lang="scss" scoped></style>

src/components/Notify/data.ts

@@ -0,0 +1,66 @@
+export interface ListItem {
+  avatar?: string
+  title: string
+  datetime?: string
+  description?: string
+  status?: "" | "success" | "info" | "warning" | "danger"
+  extra?: string
+}
+
+export const notifyData: ListItem[] = [
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
+    title: "V3 Admin Vite 上线啦",
+    datetime: "半年前",
+    description:
+      "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
+  },
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+    title: "V3 Admin 上线啦",
+    datetime: "一年前",
+    description: "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus 和 Pinia"
+  }
+]
+
+export const messageData: ListItem[] = [
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+    title: "来自楚门的世界",
+    description: "如果再也不能见到你，祝你早安、午安和晚安",
+    datetime: "1998-06-05"
+  },
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+    title: "来自大话西游",
+    description: "如果非要在这份爱上加上一个期限，我希望是一万年",
+    datetime: "1995-02-04"
+  },
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+    title: "来自龙猫",
+    description: "心存善意，定能途遇天使",
+    datetime: "1988-04-16"
+  }
+]
+
+export const todoData: ListItem[] = [
+  {
+    title: "任务名称",
+    description: "任务描述",
+    extra: "未开始",
+    status: "info"
+  },
+  {
+    title: "任务名称",
+    description: "任务描述",
+    extra: "进行中",
+    status: ""
+  },
+  {
+    title: "任务名称",
+    description: "任务描述",
+    extra: "已超时",
+    status: "danger"
+  }
+]

src/components/Notify/index.vue

@@ -2,6 +2,7 @@
 import { ref, computed } from "vue"
 import { ElMessage } from "element-plus"
 import { Bell } from "@element-plus/icons-vue"
+import NotifyList from "./NotifyList.vue"
 
 type TabNameType = "通知" | "消息" | "待办"
 
@@ -71,7 +72,9 @@ const handleHistory = () => {
               {{ item.name }}
               <el-badge :value="item.list.length" :max="badgeMax" :type="item.type" />
             </template>
-            <el-scrollbar height="400px">测试数据</el-scrollbar>
+            <el-scrollbar height="400px">
+              <NotifyList :list="item.list" />
+            </el-scrollbar>
           </el-tab-pane>
         </el-tabs>
         <div class="notify-history">