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

src/views/dashboard/index.vue

@@ -2,7 +2,6 @@
   <page-layer>
     <template #main>
       <div style="display: flex">
-        <!-- 左边部分 -->
         <div class="left-pane">
           <div class="divider-line">
             <div class="divider-text">
@@ -17,21 +16,43 @@
               <MyClock :show-logo="false" size="small"/>
             </div>
           </div>
-          <div style="display: flex; flex-wrap: wrap; height: 480px; overflow-y: auto">
+          <div style="display: flex; flex-wrap: wrap; height: calc(100vh - 200px); overflow-y: auto">
             <Inpatient v-for="(itm, index) in briefs" :key="index" :brief="itm"/>
           </div>
         </div>
-        <!-- 右边部分 -->
-        <div class="right-pane">
-          <div class="check-more" @click="fetchMoreMessages">查看更多</div>
-          <el-timeline v-for="item in messages" :key="item.id">
-            <el-timeline-item :timestamp="item.simpledate" placement="top" icon="Warning" color="orange">
-              <el-card>
-                <div style="margin-bottom: 12px; font-size: 16px; font-weight: bold">{{ item.title }}</div>
-                <div v-html="item.content"></div>
-              </el-card>
-            </el-timeline-item>
-          </el-timeline>
+
+        <div class="message-popup">
+          <el-button
+              class="popup-trigger"
+              icon="Message"
+              type="primary"
+              circle
+              @click="isPopupShow = !isPopupShow"
+          ></el-button>
+
+          <div class="popup-content" v-if="isPopupShow">
+            <div class="popup-header">
+              <span class="header-title">系统消息</span>
+              <el-button
+                  class="close-btn"
+                  icon="Close"
+                  type="text"
+                  @click="isPopupShow = false"
+              ></el-button>
+            </div>
+
+            <div class="check-more" @click="fetchMoreMessages">查看更多</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">
+                  <el-card>
+                    <div style="margin-bottom: 12px; font-size: 16px; font-weight: bold">{{ item.title }}</div>
+                    <div v-html="item.content"></div>
+                  </el-card>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </div>
         </div>
       </div>
     </template>
@@ -80,7 +101,6 @@ onActivated(() => {
 })
 
 const briefs = ref([])
-
 onMounted(() => {
   if (isInpatientStaff()) {
     selectInpatientBriefs(userInfo.deptCode).then((list) => {
@@ -88,25 +108,81 @@ onMounted(() => {
     })
   }
 })
+
+const isPopupShow = ref(false)
 </script>
 
 <style lang="scss" scoped>
 .left-pane {
   margin-top: 20px;
-  width: 68%;
+  width: 100%; /* 关键改动：移除右侧后占满宽度 */
   background-image: linear-gradient(#d0ddee, #64b6e6);
   height: 120px;
   border-radius: 6px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 }
 
-.right-pane {
-  margin-top: 20px;
-  margin-left: 12px;
-  width: 30%;
-  padding-right: 20px;
-  height: calc(100vh - 120px);
-  overflow-y: scroll;
+.message-popup {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  z-index: 1000;
+
+  .popup-trigger {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+    box-shadow: 0 4px 12px rgba(16, 128, 240, 0.3);
+  }
+
+  .popup-content {
+    width: 400px;
+    max-height: 600px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    margin-bottom: 10px;
+    overflow: hidden;
+
+    .popup-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      border-bottom: 1px solid #e5e7eb;
+      background: #f8fafc;
+
+      .header-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1e293b;
+      }
+
+      .close-btn {
+        color: #64748b;
+        &:hover {
+          color: #0f172a;
+        }
+      }
+    }
+
+    .check-more {
+      width: 100%;
+      text-align: right;
+      padding: 8px 16px;
+      color: #409eff;
+      cursor: pointer;
+      &:hover {
+        color: #165dff;
+      }
+    }
+
+    .message-list {
+      padding: 0 16px 16px;
+      max-height: calc(600px - 50px);
+      overflow-y: auto;
+    }
+  }
 }
 
 .avatar-box__inner {
@@ -120,16 +196,6 @@ onMounted(() => {
   z-index: 600;
 }
 
-.check-more {
-  width: 60%;
-  text-align: right;
-  color: #409eff;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
 .divider-line {
   display: block;
   height: 1px;
@@ -160,4 +226,5 @@ onMounted(() => {
   font-size: 20px;
   font-weight: bold;
 }
+
 </style>