From 1f6fff708b2aae14070d1ec8395e1ba34d01102c Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Thu, 11 Jun 2026 16:39:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E5=B1=89=E4=B8=8E=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element-ui.scss             | 39 ++++++++++++++-----
 src/assets/styles/ruoyi.scss                  |  5 ---
 src/views/message/components/GroupSetting.vue |  7 ++--
 src/views/message/components/SearchRecord.vue | 11 +++---
 4 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index e436f9d..2ce3255 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -48,15 +48,23 @@
 
 // to fixed https://github.com/ElemeFE/element/issues/2461
 .el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-  border: 1px solid $base-menu-background;
+  position: absolute;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  margin: 0 !important;
 
   .el-dialog__header {
     background: #eff6f6;
-
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 16px;
+      background-color: #009688;
+      border-radius: 2px;
+      margin-right: 8px;
+    }
     .el-dialog__title {
       color: $base-menu-background;
     }
@@ -68,12 +76,25 @@
   border: 1px solid $base-menu-background;
 
   .el-drawer__header {
+    padding: 20px 20px 10px;
     background: #eff6f6;
-
-    .el-drawer__title {
-      color: $base-menu-background;
+    margin-bottom: 0;
+    color: $base-menu-background;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 16px;
+      background-color: #009688;
+      border-radius: 2px;
+      margin-right: 8px;
     }
   }
+
+  .el-drawer__body {
+    padding: 8px 20px !important;
+  }
 }
 
 .el-card {
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index cb1314d..a9ab6bb 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -76,11 +76,6 @@
 .el-message-box__status + .el-message-box__message{
   word-break: break-word;
 }
-
-.el-dialog:not(.is-fullscreen) {
-  margin-top: 6vh !important;
-}
-
 .el-dialog__body {
   padding: 8px 20px !important;
 }
diff --git a/src/views/message/components/GroupSetting.vue b/src/views/message/components/GroupSetting.vue
index 809ee4a..9ea5f0e 100644
--- a/src/views/message/components/GroupSetting.vue
+++ b/src/views/message/components/GroupSetting.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
-    <el-dialog
+    <el-drawer
       title="群设置"
       :visible.sync="visible"
-      width="400px"
+      :size="400"
       append-to-body
+      direction="rtl"
     >
       <div class="group-setting">
         <!-- 群头像和名称 -->
@@ -111,7 +112,7 @@
           </el-button>
         </div>
       </div>
-    </el-dialog>
+    </el-drawer>
 
     <!-- 添加成员弹窗 -->
     <CreateGroupDialog
diff --git a/src/views/message/components/SearchRecord.vue b/src/views/message/components/SearchRecord.vue
index b41df0a..3deafe6 100644
--- a/src/views/message/components/SearchRecord.vue
+++ b/src/views/message/components/SearchRecord.vue
@@ -1,9 +1,10 @@
 <template>
-  <el-dialog
+  <el-drawer
     title="聊天记录"
     :visible.sync="visible"
-    width="40%"
+    :size="400"
     append-to-body
+    direction="rtl"
   >
     <div class="search-record">
       <!-- 分类标签 -->
@@ -85,7 +86,7 @@
         </div>
       </div>
     </div>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <script>
@@ -102,7 +103,7 @@ export default {
       query: {},
       list: [],
       page: 1,
-      size: 10,
+      size: 20,
       loadingMore: false,
       isNoMore: false,
       // 用户信息缓存
@@ -298,7 +299,7 @@ export default {
 
 <style lang="scss" scoped>
 .search-record {
-  height: 500px;
+  height: calc(100vh - 120px);
   display: flex;
   flex-direction: column;
 }