fix: 消息展示修正

src/components/message-box/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <a-spin style="display: block" :loading="loading">
+  <a-spin class="message-box" :class="{ 'is-empty': !renderList.length }" style="display: block" :loading="loading">
     <a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
       <a-tab-pane v-for="item in tabList" :key="item.key">
         <template #title>
           <span>{{ item.title }}{{ formatUnreadLength(item.key) }}</span>
         </template>
-        <a-result v-if="!renderList.length" status="404">
+        <a-result v-if="!renderList.length" class="message-empty" status="404">
           <template #subtitle>{{ $t('messageBox.noContent') }}</template>
         </a-result>
         <List
@@ -193,6 +193,32 @@ useNotificationSocket<MessageRecord>({
 </script>
 
 <style scoped lang="less">
+.message-box {
+  width: 400px;
+  overflow: hidden;
+
+  :deep(.arco-spin-children) {
+    overflow: hidden;
+  }
+
+  :deep(.arco-tabs-content) {
+    max-height: 360px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &.is-empty {
+    :deep(.arco-tabs-content) {
+      max-height: none;
+      overflow: hidden;
+    }
+
+    :deep(.message-empty) {
+      padding: 34px 0 22px;
+    }
+  }
+}
+
 :deep(.arco-popover-popup-content) {
   padding: 0;
 }

src/components/message-box/list.vue

@@ -54,7 +54,7 @@
       </div>
     </a-list-item>
     <template #footer>
-      <a-space fill :size="0" :class="{ 'add-border-top': renderList.length < showMax }">
+      <a-space fill :size="0" class="message-footer-actions" :class="{ 'add-border-top': renderList.length < showMax }">
         <div class="footer-wrap">
           <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
         </div>
@@ -147,10 +147,20 @@ const showMax = 3
   .arco-list-footer {
     padding: 0;
     height: 50px;
-    line-height: 50px;
+    line-height: normal;
     border-top: none;
-    .arco-space-item {
+
+    .message-footer-actions {
+      display: flex;
       width: 100%;
+      height: 50px;
+    }
+
+    .arco-space-item {
+      display: flex;
+      flex: 1;
+      width: 50%;
+      height: 50px;
       border-right: 1px solid rgb(var(--gray-3));
       &:last-child {
         border-right: none;
@@ -161,7 +171,20 @@ const showMax = 3
     }
   }
   .footer-wrap {
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 50px;
+
+    :deep(.arco-link) {
+      line-height: 1;
+    }
+
+    :deep(.arco-link:focus-visible) {
+      background-color: transparent;
+      box-shadow: none;
+    }
   }
   .arco-typography {
     margin-bottom: 0;

src/components/navbar/index.vue

@@ -62,7 +62,7 @@
         <a-popover
           trigger="click"
           :arrow-style="{ display: 'none' }"
-          :content-style="{ padding: 0, minWidth: '400px' }"
+          :content-style="{ padding: 0, minWidth: '400px', overflow: 'hidden' }"
           content-class="message-popover"
         >
           <div ref="refBtn" class="ref-btn"></div>