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): 修复 antd next 一些样式问题

pull/367/head
YunaiV 2026-06-19 02:11:26 -07:00
parent c71e250b79
commit efc75e2608
8 changed files with 5 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -420,7 +420,6 @@ function handleOpenTransferOwner() {
<!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC --> <!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC -->
<Drawer <Drawer
v-model:open="visible" v-model:open="visible"
:body-style="{ padding: 0 }"
:closable="false" :closable="false"
placement="right" placement="right"
width="380px" width="380px"
@ -814,12 +813,6 @@ function handleOpenTransferOwner() {
background-color: var(--ant-color-primary-bg); background-color: var(--ant-color-primary-bg);
} }
/* 必须 :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;
}
/* :deep 穿透 Icon 内部 svg； el-icon 全局 color 在暗色模式下被主题盖过，锁 fill 到当前色 */ /* :deep 穿透 Icon 内部 svg； el-icon 全局 color 在暗色模式下被主题盖过，锁 fill 到当前色 */
.im-conversation-group-side__icon-tile :deep(svg) { .im-conversation-group-side__icon-tile :deep(svg) {
fill: currentColor !important; fill: currentColor !important;
@ -829,11 +822,6 @@ function handleOpenTransferOwner() {
.im-conversation-group-side__row + .im-conversation-group-side__row { .im-conversation-group-side__row + .im-conversation-group-side__row {
border-top: 1px solid var(--im-border-color-lighter); border-top: 1px solid var(--im-border-color-lighter);
} }
/* 整体放进 :global()，避免 Vue scoped 把 `:global(.dark) .xxx` 塌缩成裸 `.dark` 而把变量刷到 <html> */
:global(.dark .im-conversation-group-side__modal) {
--im-conversation-side-bg: rgb(255 255 255 / 5%);
}
</style> </style>
<!-- AntD Drawer 被传送出当前 scoped 边界，这里靠 root-class-name 压掉默认 padding --> <!-- AntD Drawer 被传送出当前 scoped 边界，这里靠 root-class-name 压掉默认 padding -->

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

@ -136,7 +136,6 @@ function handleGroupCreated(groupId: number) {
--> -->
<Drawer <Drawer
v-model:open="visible" v-model:open="visible"
:body-style="{ padding: 0 }"
:closable="false" :closable="false"
placement="right" placement="right"
width="340px" width="340px"
@ -272,22 +271,10 @@ function handleGroupCreated(groupId: number) {
fill: currentColor !important; 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 { .im-conversation-private-side__row + .im-conversation-private-side__row {
border-top: 1px solid var(--im-border-color-lighter); 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> </style>
<!-- 同 GroupSide：antd Drawer 传送到 body 后 scoped data-v 落不到 body 上，靠 root-class-name 作祖先选择器写全局规则压掉默认 padding --> <!-- 同 GroupSide：antd Drawer 传送到 body 后 scoped data-v 落不到 body 上，靠 root-class-name 作祖先选择器写全局规则压掉默认 padding -->

22
apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
View File

@ -420,11 +420,9 @@ function handleOpenTransferOwner() {
<!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC --> <!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC -->
<Drawer <Drawer
v-model:open="visible" v-model:open="visible"
:body-style="{ padding: 0 }"
:closable="false" :closable="false"
placement="right" placement="right"
width="380px" :styles="{ wrapper: { width: '380px' }, body: { padding: 0 } }"
root-class-name="im-conversation-group-side__modal"
> >
<div v-if="group" class="flex flex-col h-full bg-[var(--ant-color-bg-container)]"> <div v-if="group" class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
<!-- 上部：可滚动内容区 --> <!-- 上部：可滚动内容区 -->
@ -814,12 +812,6 @@ function handleOpenTransferOwner() {
background-color: var(--ant-color-primary-bg); background-color: var(--ant-color-primary-bg);
} }
/* 必须 :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;
}
/* :deep 穿透 Icon 内部 svg； el-icon 全局 color 在暗色模式下被主题盖过，锁 fill 到当前色 */ /* :deep 穿透 Icon 内部 svg； el-icon 全局 color 在暗色模式下被主题盖过，锁 fill 到当前色 */
.im-conversation-group-side__icon-tile :deep(svg) { .im-conversation-group-side__icon-tile :deep(svg) {
fill: currentColor !important; fill: currentColor !important;
@ -829,16 +821,4 @@ function handleOpenTransferOwner() {
.im-conversation-group-side__row + .im-conversation-group-side__row { .im-conversation-group-side__row + .im-conversation-group-side__row {
border-top: 1px solid var(--im-border-color-lighter); border-top: 1px solid var(--im-border-color-lighter);
} }
/* 整体放进 :global()，避免 Vue scoped 把 `:global(.dark) .xxx` 塌缩成裸 `.dark` 而把变量刷到 <html> */
:global(.dark .im-conversation-group-side__modal) {
--im-conversation-side-bg: rgb(255 255 255 / 5%);
}
</style>
<!-- AntD Drawer 被传送出当前 scoped 边界，这里靠 root-class-name 压掉默认 padding -->
<style>
.im-conversation-group-side__modal .ant-drawer-body {
padding: 0;
}
</style> </style>

23
apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
View File

@ -136,11 +136,9 @@ function handleGroupCreated(groupId: number) {
--> -->
<Drawer <Drawer
v-model:open="visible" v-model:open="visible"
:body-style="{ padding: 0 }"
:closable="false" :closable="false"
placement="right" placement="right"
width="340px" :styles="{ wrapper: { width: '340px' }, body: { padding: 0 } }"
root-class-name="im-conversation-private-side__modal"
> >
<!-- friend 缺失场景：陌生人会话刚打开 / 好友数据还没补拉到；空白会让用户以为抽屉坏了，给个加载占位 --> <!-- friend 缺失场景：陌生人会话刚打开 / 好友数据还没补拉到；空白会让用户以为抽屉坏了，给个加载占位 -->
<div <div
@ -272,27 +270,8 @@ function handleGroupCreated(groupId: number) {
fill: currentColor !important; 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 { .im-conversation-private-side__row + .im-conversation-private-side__row {
border-top: 1px solid var(--im-border-color-lighter); 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：antd Drawer 传送到 body 后 scoped data-v 落不到 body 上，靠 root-class-name 作祖先选择器写全局规则压掉默认 padding -->
<style>
.im-conversation-private-side__modal .ant-drawer-body {
padding: 0;
}
</style> </style>

2
apps/web-antdv-next/src/views/im/manager/face/pack/modules/item-drawer.vue
View File

@ -149,7 +149,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
v-model:open="visible" v-model:open="visible"
:title="title" :title="title"
destroy-on-close destroy-on-close
width="65%" :styles="{ wrapper: { width: '65%' } }"
@after-open-change="handleOpenChange" @after-open-change="handleOpenChange"
> >
<ItemFormModal @success="handleRefresh" /> <ItemFormModal @success="handleRefresh" />

2
apps/web-antdv-next/src/views/im/manager/group/modules/detail.vue
View File

@ -74,7 +74,7 @@ defineExpose({ open });
</script> </script>
<template> <template>
<Drawer v-model:open="visible" destroy-on-close title="群详情" width="900"> <Drawer v-model:open="visible" destroy-on-close title="群详情" :styles="{ wrapper: { width: '900px' } }">
<Descriptions bordered :column="2"> <Descriptions bordered :column="2">
<DescriptionsItem label="群编号">{{ detail.id }}</DescriptionsItem> <DescriptionsItem label="群编号">{{ detail.id }}</DescriptionsItem>
<DescriptionsItem label="群名称">{{ detail.name }}</DescriptionsItem> <DescriptionsItem label="群名称">{{ detail.name }}</DescriptionsItem>

2
apps/web-antdv-next/src/views/im/manager/rtc/modules/detail.vue
View File

@ -75,7 +75,7 @@ defineExpose({ open });
</script> </script>
<template> <template>
<Drawer v-model:open="visible" destroy-on-close title="通话记录详情" width="900"> <Drawer v-model:open="visible" destroy-on-close title="通话记录详情" :styles="{ wrapper: { width: '900px' } }">
<Descriptions bordered :column="2"> <Descriptions bordered :column="2">
<DescriptionsItem label="编号">{{ detail.id }}</DescriptionsItem> <DescriptionsItem label="编号">{{ detail.id }}</DescriptionsItem>
<DescriptionsItem label="业务通话编号">{{ detail.room }}</DescriptionsItem> <DescriptionsItem label="业务通话编号">{{ detail.room }}</DescriptionsItem>

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

@ -816,12 +816,6 @@ function handleOpenTransferOwner() {
background-color: var(--ant-color-primary-bg); background-color: var(--ant-color-primary-bg);
} }
/* 必须 :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;
}
/* :deep 穿透 Icon 内部 svg； el-icon 全局 color 在暗色模式下被主题盖过，锁 fill 到当前色 */ /* :deep 穿透 Icon 内部 svg； el-icon 全局 color 在暗色模式下被主题盖过，锁 fill 到当前色 */
.im-conversation-group-side__icon-tile :deep(svg) { .im-conversation-group-side__icon-tile :deep(svg) {
fill: currentColor !important; fill: currentColor !important;
@ -831,9 +825,4 @@ function handleOpenTransferOwner() {
.im-conversation-group-side__row + .im-conversation-group-side__row { .im-conversation-group-side__row + .im-conversation-group-side__row {
border-top: 1px solid var(--im-border-color-lighter); border-top: 1px solid var(--im-border-color-lighter);
} }
/* 整体放进 :global()，避免 Vue scoped 把 `:global(.dark) .xxx` 塌缩成裸 `.dark` 而把变量刷到 <html> */
:global(.dark .im-conversation-group-side__modal) {
--im-conversation-side-bg: rgb(255 255 255 / 5%);
}
</style> </style>