feat: 消息通知列表 (#24)

src/components/Notify/NotifyList.vue

@@ -1,5 +1,59 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { PropType } from "vue"
+import { type IListItem } from "./data"
 
-<template>欢迎 PR !!!</template>
+const props = defineProps({
+  list: {
+    type: Object as PropType<IListItem[]>,
+    required: true
+  }
+})
+</script>
 
-<style lang="scss" scoped></style>
+<template>
+  <el-card v-for="(item, index) in props.list" :key="index" shadow="never" class="card-container">
+    <template #header>
+      <div class="card-header">
+        <div>
+          <span>
+            <span class="card-title">{{ item.title }}</span>
+            <el-tag v-if="item.extra" :type="item.status" effect="plain" size="small">{{ item.extra }}</el-tag>
+          </span>
+          <div class="card-time">{{ item.datetime }}</div>
+        </div>
+        <div v-if="item.avatar" class="card-avatar">
+          <img :src="item.avatar" width="34" />
+        </div>
+      </div>
+    </template>
+    <div class="card-body">
+      {{ item.description ?? "No Data" }}
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.card-container {
+  margin-bottom: 10px;
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .card-title {
+      font-weight: bold;
+      margin-right: 10px;
+    }
+    .card-time {
+      font-size: 12px;
+      color: grey;
+    }
+    .card-avatar {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .card-body {
+    font-size: 12px;
+  }
+}
+</style>

src/components/Notify/data.ts

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

src/components/Notify/index.vue

@@ -3,13 +3,14 @@ import { ref, computed } from "vue"
 import { ElMessage } from "element-plus"
 import { Bell } from "@element-plus/icons-vue"
 import NotifyList from "./NotifyList.vue"
+import { type IListItem, notifyData, messageData, todoData } from "./data"
 
 type TabNameType = "通知" | "消息" | "待办"
 
 interface IDataItem {
   name: TabNameType
   type: "primary" | "success" | "warning" | "danger" | "info"
-  list: any[]
+  list: IListItem[]
 }
 
 /** 角标当前值 */
@@ -32,19 +33,19 @@ const data = ref<IDataItem[]>([
   {
     name: "通知",
     type: "primary",
-    list: []
+    list: notifyData
   },
   // 消息数据
   {
     name: "消息",
     type: "danger",
-    list: []
+    list: messageData
   },
   // 待办数据
   {
     name: "待办",
     type: "warning",
-    list: []
+    list: todoData
   }
 ])