From b1bc5fa0bd1c28796ba3a35d195d0617ecf72e97 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Thu, 18 Jun 2026 16:55:40 -0700 Subject: [PATCH] =?UTF-8?q?fix(im)=EF=BC=9A=E4=BF=AE=E5=A4=8D=E4=BC=9A?= =?UTF-8?q?=E8=AF=9D=E4=BE=A7=E6=A0=8F=E6=8A=BD=E5=B1=89=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=88=E5=88=86=E9=9A=94=E5=BA=95=E8=89=B2=20/=20body=20?= =?UTF-8?q?=E5=86=85=E8=BE=B9=E8=B7=9D=20/=20=E7=A9=BA=20header=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - web-antd 私聊侧栏：残留的 .el-drawer__body 改为 antd 的 .ant-drawer-body， 去掉抽屉默认 24px 内边距，内容铺满贴边；底色与行分隔线对齐群聊侧栏 - web-antd 私聊 / 群聊侧栏：卡片间灰底 --im-conversation-side-bg 的亮色定义改用 :global()， 修复 antd Drawer 传送到 body 后 scoped data-v 落不到、灰色分隔条亮色下失效（显白）的问题 - web-ele 私聊 / 群聊侧栏：ElDrawer 补 :with-header="false" 去掉空 header； 群聊 --im-conversation-side-bg 同样改 :global()，对齐 Vue3 + EP --- .../conversation/conversation-group-side.vue | 4 +++- .../conversation-private-side.vue | 20 +++++++++++++++---- .../conversation/conversation-group-side.vue | 6 ++++-- .../conversation-private-side.vue | 2 +- 4 files changed, 24 insertions(+), 8 deletions(-) diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue index 1260e777c..513a5b273 100644 --- a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue +++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue @@ -813,7 +813,9 @@ function handleOpenTransferOwner() { background-color: var(--ant-color-primary-bg); } -.im-conversation-group-side__modal { +/* 必须 :global —— antd Drawer 传送到 body 后只带 root-class-name、不带 scoped data-v， + 普通作用域选择器匹配不到，会导致灰色分隔底色（--im-conversation-side-bg）失效、区块间隔显白 */ +:global(.im-conversation-group-side__modal) { --im-conversation-side-bg: #f5f7fa; } diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue index 007de9d25..b48dac2b1 100644 --- a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue +++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue @@ -149,7 +149,7 @@ function handleGroupCreated(groupId: number) {
-
+
@@ -271,15 +271,27 @@ function handleGroupCreated(groupId: number) { fill: currentColor !important; } +/* 抽屉内「卡片之间」的浅底色，与群聊抽屉保持一致。 + 必须 :global —— antd Drawer 传送到 body 后只带 root-class-name、不带 scoped data-v， + 普通作用域选择器匹配不到，会导致灰色分隔底色失效、区块间隔显白 */ +:global(.im-conversation-private-side__modal) { + --im-conversation-side-bg: #f5f7fa; +} + /* 相邻信息行加分隔线； 相邻兄弟选择器无法用工具类表达 */ .im-conversation-private-side__row + .im-conversation-private-side__row { - border-top: 1px solid var(--ant-color-border-secondary); + border-top: 1px solid var(--im-border-color-lighter); +} + +/* 整体放进 :global()，避免 Vue scoped 把 `:global(.dark) .xxx` 塌缩成裸 `.dark` 而把变量刷到 */ +:global(.dark .im-conversation-private-side__modal) { + --im-conversation-side-bg: rgb(255 255 255 / 5%); } - + diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue index 5dd7b5b1b..78322b19c 100644 --- a/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue +++ b/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue @@ -421,9 +421,9 @@ function handleOpenTransferOwner() {
@@ -816,7 +816,9 @@ function handleOpenTransferOwner() { background-color: var(--ant-color-primary-bg); } -.im-conversation-group-side__modal { +/* 必须 :global —— el-drawer append-to-body 后 modal-class 落在 .el-overlay 上、不带 scoped data-v， + 普通作用域选择器匹配不到，会导致灰色分隔底色（--im-conversation-side-bg）失效、区块间隔显白 */ +:global(.im-conversation-group-side__modal) { --im-conversation-side-bg: #f5f7fa; } diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue index 5c731442c..3784edcbd 100644 --- a/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue +++ b/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue @@ -137,9 +137,9 @@ function handleGroupCreated(groupId: number) {