因为socket项目无法启动，只能按照首页改了，首页消息栏换成右下角的框，不知道是否能解决多次弹消息框的烦恼

src/views/dashboard/index.vue

@@ -2,6 +2,7 @@
   <page-layer>
     <template #main>
       <div style="display: flex">
+        <!-- 左边部分 -->
         <div class="left-pane">
           <div class="divider-line">
             <div class="divider-text">
@@ -21,6 +22,7 @@
           </div>
         </div>
 
+        <!-- 右下角消息弹窗 -->
         <div class="message-popup">
           <el-button
               class="popup-trigger"
@@ -41,7 +43,11 @@
               ></el-button>
             </div>
 
-            <div class="check-more" @click="fetchMoreMessages">查看更多</div>
+            <div class="check-more" @click="fetchMoreMessages" :class="{ disabled: loading }">
+              查看更多
+              <el-loading v-if="loading" size="small" />
+              <span v-if="noMore && !loading" class="no-more-text">没有更多消息</span>
+            </div>
             <div class="message-list">
               <el-timeline v-for="item in messages" :key="item.id">
                 <el-timeline-item :timestamp="item.simpledate" placement="top" icon="Warning" color="orange">
@@ -51,6 +57,15 @@
                   </el-card>
                 </el-timeline-item>
               </el-timeline>
+
+              <div v-if="messages.length === 0 && !loading" class="empty-message">
+                暂无消息
+              </div>
+
+              <div v-if="loading && messages.length === 0" class="loading-message">
+                <el-loading size="small" />
+                <span>加载中...</span>
+              </div>
             </div>
           </div>
         </div>
@@ -72,16 +87,40 @@ import PageLayer from "@/layout/PageLayer";
 import {useUserStore} from "@/pinia/user-store";
 
 const messages = ref([])
+const loading = ref(false)
+const noMore = ref(false) // 仅作为UI提示，不阻止查询
+
+// 确保每次点击都触发查询
 const fetchMoreMessages = () => {
+  if (loading.value) return; // 仅在加载中时阻止重复点击
+
+  loading.value = true;
+  noMore.value = false; // 每次查询前重置"没有更多"状态
+
   let lastdate = 'latest'
   if (messages.value.length > 0) {
-    lastdate = formatDate(messages.value[0].simpledate)
+    // 确保日期格式正确，与后端要求一致
+    lastdate = formatDate(messages.value[0].simpledate, 'YYYY-MM-DD HH:mm:ss');
   }
-  selectSystemMessages(lastdate).then((res) => {
-    res.forEach((item) => {
-      messages.value.unshift(item)
-    })
-  })
+
+  selectSystemMessages(lastdate)
+      .then((res) => {
+        if (res.length > 0) {
+          // 新消息添加到列表前面
+          messages.value.unshift(...res);
+          noMore.value = false;
+        } else {
+          // 结果为空时仅更新UI提示，不阻止下次查询
+          noMore.value = true;
+        }
+      })
+      .catch((error) => {
+        console.error('获取消息失败:', error);
+        // 错误情况下也允许用户再次尝试
+      })
+      .finally(() => {
+        loading.value = false;
+      });
 }
 
 const userInfo = useUserStore().userInfo
@@ -93,11 +132,15 @@ const makeTextPortrait = () => {
 }
 
 onActivated(() => {
-  setTimeout(() => {
-    selectSystemMessages('latest').then((res) => {
-      messages.value = res
-    })
-  }, 500)
+  loading.value = true;
+  selectSystemMessages('latest')
+      .then((res) => {
+        messages.value = res;
+        noMore.value = res.length === 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
 })
 
 const briefs = ref([])
@@ -115,7 +158,7 @@ const isPopupShow = ref(false)
 <style lang="scss" scoped>
 .left-pane {
   margin-top: 20px;
-  width: 100%; /* 关键改动：移除右侧后占满宽度 */
+  width: 100%;
   background-image: linear-gradient(#d0ddee, #64b6e6);
   height: 120px;
   border-radius: 6px;
@@ -172,9 +215,24 @@ const isPopupShow = ref(false)
       padding: 8px 16px;
       color: #409eff;
       cursor: pointer;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+
       &:hover {
         color: #165dff;
       }
+
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+
+      .no-more-text {
+        color: #94a3b8;
+        font-size: 14px;
+      }
     }
 
     .message-list {
@@ -182,6 +240,22 @@ const isPopupShow = ref(false)
       max-height: calc(600px - 50px);
       overflow-y: auto;
     }
+
+    .empty-message {
+      text-align: center;
+      padding: 20px;
+      color: #94a3b8;
+    }
+
+    .loading-message {
+      text-align: center;
+      padding: 20px;
+      color: #94a3b8;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+    }
   }
 }
 
@@ -226,5 +300,4 @@ const isPopupShow = ref(false)
   font-size: 20px;
   font-weight: bold;
 }
-
 </style>