From 3e7b970fe7c0fee2047314f7f20a71b406c03b8f Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Sat, 12 Oct 2024 11:32:05 +0800
Subject: [PATCH] style: Set special receiver to optimize the scroll wheel
 display

---
 src/styles/index.scss                      |  6 ++++
 src/views/settings/Msg/Subscribe/index.vue | 34 ++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index c8c17612a..9741489d7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -593,3 +593,9 @@ li.rmenu i.fa {
     height: 6px; /* 设置水平滚动条的高度 */
   }
 }
+
+.black-theme-popover {
+  width: 300px;
+  max-height: 700px;
+  overflow-y: scroll;
+}
diff --git a/src/views/settings/Msg/Subscribe/index.vue b/src/views/settings/Msg/Subscribe/index.vue
index 72e6157ad..ea3e8eeca 100644
--- a/src/views/settings/Msg/Subscribe/index.vue
+++ b/src/views/settings/Msg/Subscribe/index.vue
@@ -26,11 +26,14 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column :label="$tc('Receivers')" show-overflow-tooltip>
-          <template v-slot="scope">
-            <span v-if="!scope.row.children">
-              {{ scope.row.receivers.map(item => item.name).join(', ') }}
-            </span>
+        <el-table-column :label="$tc('Receivers')">
+          <template slot-scope="scope">
+            <el-popover trigger="hover" placement="top" popper-class="black-theme-popover">
+              <p v-for="item in scope.row.receivers" :key="item.name">{{ item.name }}</p>
+              <span v-if="!scope.row.children" slot="reference" class="name-wrapper">
+                {{ scope.row.receivers.map(item => item.name).join(', ') }}
+              </span>
+            </el-popover>
           </template>
         </el-table-column>
         <el-table-column :label="$tc('Actions')" width="200">
@@ -186,4 +189,25 @@ export default {
   margin-bottom: 0;
   width: 50%;
 }
+
+::v-deep .el-table .cell {
+  display: flex;
+
+  .name-wrapper {
+    display: inline-block;
+    max-height: 55px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+}
+
+::v-deep .black-theme-popover .el-popover__inner {
+  background-color: #000 !important;
+  color: #fff !important;
+  border-color: #000 !important;
+}
 </style>