From 23667181e1c8b65d8e3bd4a38a52747347a09565 Mon Sep 17 00:00:00 2001
From: longyi-xw <2691049525@qq.com>
Date: Tue, 13 Feb 2024 21:27:56 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Notify/NotifyList.vue |  2 +-
 src/components/Notify/index.vue      | 43 +++++++++++++---------------
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/components/Notify/NotifyList.vue b/src/components/Notify/NotifyList.vue
index 9b3c142..dccda81 100644
--- a/src/components/Notify/NotifyList.vue
+++ b/src/components/Notify/NotifyList.vue
@@ -9,7 +9,7 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <el-empty v-if="props.list.length === 0" />
+  <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>
       <div class="card-header">
diff --git a/src/components/Notify/index.vue b/src/components/Notify/index.vue
index 9e22dad..666ef5c 100644
--- a/src/components/Notify/index.vue
+++ b/src/components/Notify/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import { ElMessage } from "element-plus";
-import { Bell } from "@element-plus/icons-vue";
+import { BellOutlined } from "@ant-design/icons-vue";
 import NotifyList from "./NotifyList.vue";
 import { type ListItem, notifyData, messageData, todoData } from "./data";
 
@@ -9,7 +9,7 @@ type TabName = "通知" | "消息" | "待办";
 
 interface DataItem {
   name: TabName;
-  type: "primary" | "success" | "warning" | "danger" | "info";
+  type: "default" | "success" | "warning" | "error" | "processing";
   list: ListItem[];
 }
 
@@ -28,13 +28,13 @@ const data = ref<DataItem[]>([
   // 通知数据
   {
     name: "通知",
-    type: "primary",
+    type: "default",
     list: notifyData
   },
   // 消息数据
   {
     name: "消息",
-    type: "danger",
+    type: "error",
     list: messageData
   },
   // 待办数据
@@ -52,33 +52,30 @@ const handleHistory = () => {
 
 <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" />
+    <a-popover placement="bottomRight" :overlayStyle="{ width: popoverWidth + 'px' }" trigger="click">
+      <a-badge :count="badgeValue" :overflowCount="badgeMax" :showZero="badgeValue !== 0">
+        <a-tooltip effect="dark" title="消息通知" placement="bottom">
+          <BellOutlined :style="{ fontSize: '20px' }" />
+        </a-tooltip>
+      </a-badge>
+      <template #content>
+        <a-tabs v-model="activeName" class="demo-tabs" centered :tabBarGutter="100">
+          <a-tab-pane v-for="(item, index) in data" :key="index">
+            <template #tab>
+              <a-badge :count="item.list.length" :overflowCount="badgeMax" dot :status="item.type">
+                {{ item.name }}
+              </a-badge>
             </template>
             <el-scrollbar height="400px">
               <NotifyList :list="item.list" />
             </el-scrollbar>
-          </el-tab-pane>
-        </el-tabs>
+          </a-tab-pane>
+        </a-tabs>
         <div class="notify-history">
           <a-button type="link" @click="handleHistory">查看{{ activeName }}历史</a-button>
         </div>
       </template>
-    </el-popover>
+    </a-popover>
   </div>
 </template>