From 76be404c6981f9aacfcae9909a7b4a523f6bdc97 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Apr 2026 00:30:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(Message):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=93=83=E9=93=9B=E5=AF=B9=E9=BD=90=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=B8=BA=20flex-c?=
 =?UTF-8?q?enter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Message/src/Message.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
index d33b3b640..d4fe8e28c 100644
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -89,6 +89,22 @@ onMounted(() => {
   </div>
 </template>
 <style lang="scss" scoped>
+// 铃铛对齐修复：
+// DOM 链路 div.message > ElPopover > ElBadge(inline-block) > Icon
+// 默认 ElBadge 是 inline-block，在父 flex 容器里按 baseline 对齐，导致图标比其他 ElIcon 视觉偏下 1-2px
+// 解法：让 .message 本身变 flex-center 容器，且穿透设置内部 .el-badge 也为 flex-center
+// 这样从父到子整条链路都走几何中心对齐，不再受 inline-block baseline 影响
+.message {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  :deep(.el-badge) {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .message-empty {
   display: flex;
   flex-direction: column;