refactor: 修改通知为antdv版本

longyi-xw · Feb 13, 2024 · cb91389 · cb91389
1 parent 58910bc
commit cb91389
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/Notify/NotifyList.vue b/src/components/Notify/NotifyList.vue
@@ -10,13 +10,13 @@ const props = defineProps<Props>();
 
 <template>
   <a-empty v-if="props.list.length === 0" />
-  <el-card v-else v-for="(item, index) in props.list" :key="index" shadow="never" class="card-container">
-    <template #header>
+  <a-card v-else v-for="(item, index) in props.list" :key="index" class="card-container">
+    <template #title>
       <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 class="card-title">{{ item.title }}{{ item.status }}</span>
+            <a-tag v-if="item.extra" :color="item.status" size="small">{{ item.extra }}</a-tag>
           </span>
           <div class="card-time">{{ item.datetime }}</div>
         </div>
@@ -28,29 +28,34 @@ const props = defineProps<Props>();
     <div class="card-body">
       {{ item.description ?? "No Data" }}
     </div>
-  </el-card>
+  </a-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;
   }

diff --git a/src/components/Notify/data.ts b/src/components/Notify/data.ts
@@ -3,7 +3,7 @@ export interface ListItem {
   title: string;
   datetime?: string;
   description?: string;
-  status?: "" | "success" | "info" | "warning" | "danger";
+  status?: "processing" | "success" | "default" | "warning" | "error";
   extra?: string;
 }
 
@@ -49,18 +49,18 @@ export const todoData: ListItem[] = [
     title: "任务名称",
     description: "这家伙很懒，什么都没留下",
     extra: "未开始",
-    status: "info"
+    status: "default"
   },
   {
     title: "任务名称",
     description: "这家伙很懒，什么都没留下",
     extra: "进行中",
-    status: ""
+    status: "processing"
   },
   {
     title: "任务名称",
     description: "这家伙很懒，什么都没留下",
     extra: "已超时",
-    status: "danger"
+    status: "error"
   }
 ];