From e63ac508f3d52e1aad4fbc8676dd4d3586468faa Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Tue, 13 May 2025 17:15:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E8=AE=B0=E5=BD=95dialog?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message/components/DialogForMsgList.vue   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/views/message/components/DialogForMsgList.vue b/src/views/message/components/DialogForMsgList.vue
index 716e988..c235e2a 100644
--- a/src/views/message/components/DialogForMsgList.vue
+++ b/src/views/message/components/DialogForMsgList.vue
@@ -1,6 +1,7 @@
 <script setup lang="jsx">
 import { ref, onMounted, computed, watch, createApp, h } from 'vue'
-import { ElDialog, ElLoading } from 'element-plus'
+import { ElDialog, ElLoading, ElIcon } from 'element-plus'
+import { Close } from '@element-plus/icons-vue'
 import {
   useUserStore,
   useUserCardStore,
@@ -493,7 +494,6 @@ const onShowUserCard = (account) => {
       class="dialog-msg-list"
       :model-value="props.isShow"
       :modal="false"
-      draggable
       :width="'600px'"
       :top="`${30 + (props.tier || 0)}vh`"
       :z-index="1000"
@@ -501,10 +501,12 @@ const onShowUserCard = (account) => {
         minHeight: '360px',
         marginLeft: `calc(50% - 300px + ${props.tier || 0} * 1vw)`
       }"
+      :show-close="false"
       @closed="onClose"
     >
       <template #header>
         <span class="title bdr-b">{{ props.title }}</span>
+        <el-icon class="close-button" @click="onClose"><Close /></el-icon>
       </template>
       <div class="dialog-msg-item-container my-scrollbar">
         <div
@@ -563,13 +565,31 @@ const onShowUserCard = (account) => {
 .dialog-msg-list-wrapper {
   :deep(.el-dialog) {
     .el-dialog__header {
+      position: relative;
       .title {
         width: 100%;
         display: flex;
         justify-content: center;
-        padding-bottom: 4px;
+        padding-bottom: 16px;
         font-size: 16px;
       }
+
+      .close-button {
+        width: 16px;
+        height: 16px;
+        color: gray;
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+        z-index: 1;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
     }
   }