refactor: 重构 Notify 组件结构

src/components/Notify/List.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import type { ListItem } from "./data"
+import type { NotifyItem } from "./type"
 
 interface Props {
-  list: ListItem[]
+  data: NotifyItem[]
 }
 
 const props = defineProps<Props>()
 </script>
 
 <template>
-  <el-empty v-if="props.list.length === 0" />
+  <el-empty v-if="props.data.length === 0" />
-  <el-card v-else v-for="(item, index) in props.list" :key="index" shadow="never" class="card-container">
+  <el-card v-else v-for="(item, index) in props.data" :key="index" shadow="never" class="card-container">
     <template #header>
       <div class="card-header">
         <div>

src/components/Notify/data.ts

@@ -1,28 +1,21 @@
-export interface ListItem {
+import type { NotifyItem } from "./type"
-  avatar?: string
-  title: string
-  datetime?: string
-  description?: string
-  status?: "primary" | "success" | "info" | "warning" | "danger"
-  extra?: string
-}
 
-export const notifyData: ListItem[] = [
+export const notifyData: NotifyItem[] = [
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
     title: "V3 Admin Vite 上线啦",
-    datetime: "一年前",
+    datetime: "两年前",
     description: "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
   },
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
     title: "V3 Admin 上线啦",
-    datetime: "两年前",
+    datetime: "三年前",
     description: "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus 和 Pinia"
   }
 ]
 
-export const messageData: ListItem[] = [
+export const messageData: NotifyItem[] = [
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
     title: "来自楚门的世界",
@@ -43,7 +36,7 @@ export const messageData: ListItem[] = [
   }
 ]
 
-export const todoData: ListItem[] = [
+export const todoData: NotifyItem[] = [
   {
     title: "任务名称",
     description: "这家伙很懒，什么都没留下",

src/components/Notify/index.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import type { ListItem } from "./data"
+import type { NotifyItem } from "./type"
 import { Bell } from "@element-plus/icons-vue"
 import { ElMessage } from "element-plus"
 import { computed, ref } from "vue"
 import { messageData, notifyData, todoData } from "./data"
-import NotifyList from "./NotifyList.vue"
+import List from "./List.vue"
 
 type TabName = "通知" | "消息" | "待办"
 
 interface DataItem {
   name: TabName
   type: "primary" | "success" | "warning" | "danger" | "info"
-  list: ListItem[]
+  list: NotifyItem[]
 }
 
 /** 角标当前值 */
@@ -69,7 +69,7 @@ function handleHistory() {
               <el-badge :value="item.list.length" :max="badgeMax" :type="item.type" />
             </template>
             <el-scrollbar height="400px">
-              <NotifyList :list="item.list" />
+              <List :data="item.list" />
             </el-scrollbar>
           </el-tab-pane>
         </el-tabs>

src/components/Notify/type.ts

@@ -0,0 +1,8 @@
+export interface NotifyItem {
+  avatar?: string
+  title: string
+  datetime?: string
+  description?: string
+  status?: "primary" | "success" | "info" | "warning" | "danger"
+  extra?: string
+}

tests/components/Notify.test.ts

@@ -1,5 +1,5 @@
 import Notify from "@/components/Notify/index.vue"
-import NotifyList from "@/components/Notify/NotifyList.vue"
+import NotifyList from "@/components/Notify/List.vue"
 import { shallowMount } from "@vue/test-utils"
 import { describe, expect, it } from "vitest"
 
@@ -14,7 +14,7 @@ describe("notifyList", () => {
   it("list 长度为 0", () => {
     const wrapper = shallowMount(NotifyList, {
       props: {
-        list: []
+        data: []
       }
     })
     expect(wrapper.find("el-empty").exists()).toBe(true)
@@ -22,7 +22,7 @@ describe("notifyList", () => {
   it("list 长度不为 0", () => {
     const wrapper = shallowMount(NotifyList, {
       props: {
-        list: [
+        data: [
           {
             title: ""
           }