fix(im): 修复 antd next 一些样式问题
YunaiV
parent
c71e250b79
commit
efc75e2608
|
|
@ -420,7 +420,6 @@ function handleOpenTransferOwner() {
|
|||
<!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC -->
|
||||
<Drawer
|
||||
v-model:open="visible"
|
||||
:body-style="{ padding: 0 }"
|
||||
:closable="false"
|
||||
placement="right"
|
||||
width="380px"
|
||||
|
|
@ -814,12 +813,6 @@ function handleOpenTransferOwner() {
|
|||
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 到当前色 */
|
||||
.im-conversation-group-side__icon-tile :deep(svg) {
|
||||
fill: currentColor !important;
|
||||
|
|
@ -829,11 +822,6 @@ function handleOpenTransferOwner() {
|
|||
.im-conversation-group-side__row + .im-conversation-group-side__row {
|
||||
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 -->
|
||||
|
|
|
|||
|
|
@ -136,7 +136,6 @@ function handleGroupCreated(groupId: number) {
|
|||
-->
|
||||
<Drawer
|
||||
v-model:open="visible"
|
||||
:body-style="{ padding: 0 }"
|
||||
:closable="false"
|
||||
placement="right"
|
||||
width="340px"
|
||||
|
|
@ -272,22 +271,10 @@ 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(--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 -->
|
||||
|
|
|
|||
|
|
@ -420,11 +420,9 @@ function handleOpenTransferOwner() {
|
|||
<!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC -->
|
||||
<Drawer
|
||||
v-model:open="visible"
|
||||
:body-style="{ padding: 0 }"
|
||||
:closable="false"
|
||||
placement="right"
|
||||
width="380px"
|
||||
root-class-name="im-conversation-group-side__modal"
|
||||
:styles="{ wrapper: { width: '380px' }, body: { padding: 0 } }"
|
||||
>
|
||||
<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);
|
||||
}
|
||||
|
||||
/* 必须 :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 到当前色 */
|
||||
.im-conversation-group-side__icon-tile :deep(svg) {
|
||||
fill: currentColor !important;
|
||||
|
|
@ -829,16 +821,4 @@ function handleOpenTransferOwner() {
|
|||
.im-conversation-group-side__row + .im-conversation-group-side__row {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -136,11 +136,9 @@ function handleGroupCreated(groupId: number) {
|
|||
-->
|
||||
<Drawer
|
||||
v-model:open="visible"
|
||||
:body-style="{ padding: 0 }"
|
||||
:closable="false"
|
||||
placement="right"
|
||||
width="340px"
|
||||
root-class-name="im-conversation-private-side__modal"
|
||||
:styles="{ wrapper: { width: '340px' }, body: { padding: 0 } }"
|
||||
>
|
||||
<!-- friend 缺失场景：陌生人会话刚打开 / 好友数据还没补拉到；空白会让用户以为抽屉坏了，给个加载占位 -->
|
||||
<div
|
||||
|
|
@ -272,27 +270,8 @@ 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(--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>
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
v-model:open="visible"
|
||||
:title="title"
|
||||
destroy-on-close
|
||||
width="65%"
|
||||
:styles="{ wrapper: { width: '65%' } }"
|
||||
@after-open-change="handleOpenChange"
|
||||
>
|
||||
<ItemFormModal @success="handleRefresh" />
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ defineExpose({ open });
|
|||
</script>
|
||||
|
||||
<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">
|
||||
<DescriptionsItem label="群编号">{{ detail.id }}</DescriptionsItem>
|
||||
<DescriptionsItem label="群名称">{{ detail.name }}</DescriptionsItem>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ defineExpose({ open });
|
|||
</script>
|
||||
|
||||
<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">
|
||||
<DescriptionsItem label="编号">{{ detail.id }}</DescriptionsItem>
|
||||
<DescriptionsItem label="业务通话编号">{{ detail.room }}</DescriptionsItem>
|
||||
|
|
|
|||
|
|
@ -816,12 +816,6 @@ function handleOpenTransferOwner() {
|
|||
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 到当前色 */
|
||||
.im-conversation-group-side__icon-tile :deep(svg) {
|
||||
fill: currentColor !important;
|
||||
|
|
@ -831,9 +825,4 @@ function handleOpenTransferOwner() {
|
|||
.im-conversation-group-side__row + .im-conversation-group-side__row {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue