From c71e250b79cb4603b9ff6e3477706532093a14c5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 19 Jun 2026 01:46:54 -0700
Subject: [PATCH] =?UTF-8?q?fix(im):=20=E4=BF=AE=E5=A4=8D=20antd=20next=20?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../conversation/conversation-group-side.vue  |  3 ++-
 .../conversation-private-side.vue             |  3 ++-
 .../src/views/im/home/index.vue               | 27 +++++++++++++++++++
 .../conversation/conversation-group-side.vue  |  3 ++-
 .../conversation-private-side.vue             |  3 ++-
 .../conversation/conversation-group-side.vue  |  2 +-
 6 files changed, 36 insertions(+), 5 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 513a5b273..91866fe44 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
@@ -420,6 +420,7 @@ function handleOpenTransferOwner() {
   <!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC -->
   <Drawer
     v-model:open="visible"
+    :body-style="{ padding: 0 }"
     :closable="false"
     placement="right"
     width="380px"
@@ -427,7 +428,7 @@ function handleOpenTransferOwner() {
   >
     <div v-if="group" class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
       <!-- 上部：可滚动内容区 -->
-      <div class="flex-1 overflow-y-auto bg-[var(--im-conversation-side-bg)]">
+      <div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
         <!-- ==================== 群成员区 ==================== -->
         <div class="px-4 pt-4 pb-[10px] bg-[var(--ant-color-bg-container)]">
           <Input v-model:value="searchText" placeholder="搜索群成员" allow-clear>
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 b48dac2b1..68f192320 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
@@ -136,6 +136,7 @@ function handleGroupCreated(groupId: number) {
   -->
   <Drawer
     v-model:open="visible"
+    :body-style="{ padding: 0 }"
     :closable="false"
     placement="right"
     width="340px"
@@ -149,7 +150,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(--im-conversation-side-bg)]">
+      <div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
         <!-- 好友宫格：原 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]">
diff --git a/apps/web-antdv-next/src/views/im/home/index.vue b/apps/web-antdv-next/src/views/im/home/index.vue
index fa474ab22..430574ed7 100644
--- a/apps/web-antdv-next/src/views/im/home/index.vue
+++ b/apps/web-antdv-next/src/views/im/home/index.vue
@@ -288,4 +288,31 @@ watch(
   --ant-color-fill-tertiary: hsl(var(--foreground) / 4%);
   --ant-color-fill-dark: hsl(var(--foreground) / 18%);
 }
+
+/*
+ * antd-next（对齐 antd v6）默认走 cssVar / zero-runtime 模式：把 --ant-color-* 输出在
+ * ConfigProvider 注入的 .css-var-* 作用域 div 上。该 div 比 :root 离组件更近，会盖掉上面
+ * :root 的兜底映射 —— 典型表现是 fill 系列回退成 antd 算法色（浅色下是半透明黑、而非
+ * EP 风格的冷调浅灰实色），导致聊天面板 / 抽屉灰底与 web-antd 对不上（web-antd 的 antd 4.x
+ * 不输出 cssVar，故那边 :root 兜底就够了，无需本段）。
+ *
+ * 这里把同一套 fill 映射重新声明到 cssVar 作用域上：用「双属性选择器」把权重叠到 (0,2,0)，
+ * 稳定压过 antd 自身的 .css-var-*(0,1,0)（不依赖样式注入顺序，也对自动生成的 key 名 css-var-v-0 无感）。
+ * 抽屉 / 弹窗传送到 body 后其根节点同样带 css-var-* 类，故这一条即可同时覆盖主界面与所有弹层。
+ * 只重映 fill 系列：bg / text / primary 等由 antd 算法从同源 token 推导、已与 web-antd 接近，
+ * 全量覆盖反而会把组件自身的算法派生色（如 primary-hover）拍平，故按最小集处理。
+ */
+:global([class*='css-var-'][class*='css-var-']) {
+  --ant-color-fill: #e2e6ec;
+  --ant-color-fill-secondary: #f4f6f9;
+  --ant-color-fill-tertiary: #eaedf2;
+  --ant-color-fill-dark: #d5dae2;
+}
+
+:global(.dark [class*='css-var-'][class*='css-var-']) {
+  --ant-color-fill: hsl(var(--foreground) / 12%);
+  --ant-color-fill-secondary: hsl(var(--foreground) / 8%);
+  --ant-color-fill-tertiary: hsl(var(--foreground) / 4%);
+  --ant-color-fill-dark: hsl(var(--foreground) / 18%);
+}
 </style>
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
index 93d6471b3..b05f4f21f 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
@@ -420,6 +420,7 @@ function handleOpenTransferOwner() {
   <!-- 聊天面板右侧群信息抽屉：成员宫格 + 群信息 + 开关 + 退出群聊，整体对齐微信 PC -->
   <Drawer
     v-model:open="visible"
+    :body-style="{ padding: 0 }"
     :closable="false"
     placement="right"
     width="380px"
@@ -427,7 +428,7 @@ function handleOpenTransferOwner() {
   >
     <div v-if="group" class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
       <!-- 上部：可滚动内容区 -->
-      <div class="flex-1 overflow-y-auto bg-[var(--im-conversation-side-bg)]">
+      <div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
         <!-- ==================== 群成员区 ==================== -->
         <div class="px-4 pt-4 pb-[10px] bg-[var(--ant-color-bg-container)]">
           <Input v-model:value="searchText" placeholder="搜索群成员" allow-clear>
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
index a7f16a477..7b0781a99 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
@@ -136,6 +136,7 @@ function handleGroupCreated(groupId: number) {
   -->
   <Drawer
     v-model:open="visible"
+    :body-style="{ padding: 0 }"
     :closable="false"
     placement="right"
     width="340px"
@@ -149,7 +150,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(--im-conversation-side-bg)]">
+      <div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
         <!-- 好友宫格：原 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]">
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 78322b19c..ee34c00d2 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
@@ -428,7 +428,7 @@ function handleOpenTransferOwner() {
   >
     <div v-if="group" class="flex flex-col h-full bg-[var(--ant-color-bg-container)]">
       <!-- 上部：可滚动内容区 -->
-      <div class="flex-1 overflow-y-auto bg-[var(--im-conversation-side-bg)]">
+      <div class="flex-1 overflow-y-auto bg-[var(--ant-color-fill-secondary)]">
         <!-- ==================== 群成员区 ==================== -->
         <div class="px-4 pt-4 pb-[10px] bg-[var(--ant-color-bg-container)]">
           <ElInput v-model="searchText" placeholder="搜索群成员" clearable>