yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(im)：修复会话侧栏抽屉样式（分隔底色 / body 内边距 / 空 header） 

- 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
pull/367/head
YunaiV 2026-06-18 16:55:40 -07:00
parent dfe4c8a040
commit b1bc5fa0bd
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
View File

@ -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;
}

20
apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
View File

@ -149,7 +149,7 @@ function handleGroupCreated(groupId: number) {
<Spin tip="加载中..." />
</div>
<div v-else class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
<div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
<div class="flex-1 overflow-y-auto bg-[var(--im-conversation-side-bg)]">
<!-- 好友宫格：原 tile + "+" tile，对齐 GroupSide 视觉，让两种抽屉看起来是一家的 -->
<div class="flex flex-wrap gap-1 px-4 pt-4 pb-[14px] bg-[var(--ant-color-bg-container)]">
<div class="flex flex-col items-center w-[66px]">
@ -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` 而把变量刷到 <html> */
:global(.dark .im-conversation-private-side__modal) {
--im-conversation-side-bg: rgb(255 255 255 / 5%);
}
</style>
<!-- 同 GroupSide：el-drawer append-to-body 后 scoped CSS 的 data-v 不会落到 body 上，靠 modal-class 作祖先选择器写一段全局规则 -->
<!-- 同 GroupSide：antd Drawer 传送到 body 后 scoped data-v 落不到 body 上，靠 root-class-name 作祖先选择器写全局规则压掉默认 padding -->
<style>
.im-conversation-private-side__modal .el-drawer__body {
.im-conversation-private-side__modal .ant-drawer-body {
padding: 0;
}
</style>

6
apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
View File

@ -421,9 +421,9 @@ function handleOpenTransferOwner() {
<ElDrawer
v-model="visible"
body-class="!p-0"
:closable="false"
modal-class="im-conversation-group-side__modal"
placement="right"
:with-header="false"
width="380px"
>
<div v-if="group" class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
@ -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;
}

2
apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
View File

@ -137,9 +137,9 @@ function handleGroupCreated(groupId: number) {
<ElDrawer
v-model="visible"
body-class="!p-0"
:closable="false"
modal-class="im-conversation-private-side__modal"
placement="right"
:with-header="false"
width="340px"
>
<!-- friend 缺失场景：陌生人会话刚打开 / 好友数据还没补拉到；空白会让用户以为抽屉坏了，给个加载占位 -->