From da6c2628d5cf685a73e150759bb07a35c2aa7908 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 6 Jun 2023 15:00:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20`notice`=E6=B6=88=E6=81=AF=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E7=BB=84=E4=BB=B6=E7=A9=BA=E6=95=B0=E6=8D=AE=E6=97=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0`el-empty`=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/notice/index.vue | 40 ++++++++++++++++----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 7d3ee76a6..3a3772099 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -22,19 +22,31 @@ notices.value.map(v => (noticesNum.value += v.list.length));
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
-          <template v-for="item in notices" :key="item.key">
-            <el-tab-pane
-              :label="`${item.name}(${item.list.length})`"
-              :name="`${item.key}`"
-            >
-              <el-scrollbar max-height="330px">
-                <div class="noticeList-container">
-                  <NoticeList :list="item.list" />
-                </div>
-              </el-scrollbar>
-            </el-tab-pane>
-          </template>
+        <el-tabs
+          :stretch="true"
+          v-model="activeKey"
+          class="dropdown-tabs"
+          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
+        >
+          <el-empty
+            v-if="notices.length === 0"
+            description="暂无消息"
+            :image-size="60"
+          />
+          <span v-else>
+            <template v-for="item in notices" :key="item.key">
+              <el-tab-pane
+                :label="`${item.name}(${item.list.length})`"
+                :name="`${item.key}`"
+              >
+                <el-scrollbar max-height="330px">
+                  <div class="noticeList-container">
+                    <NoticeList :list="item.list" />
+                  </div>
+                </el-scrollbar>
+              </el-tab-pane>
+            </template>
+          </span>
         </el-tabs>
       </el-dropdown-menu>
     </template>
@@ -57,8 +69,6 @@ notices.value.map(v => (noticesNum.value += v.list.length));
 }
 
 .dropdown-tabs {
-  width: 330px;
-
   .noticeList-container {
     padding: 15px 24px 0;
   }