From 1d1b0a1d0f0490b1e55babb43a4264e28fe12481 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 19 Jun 2026 17:39:37 -0700
Subject: [PATCH] =?UTF-8?q?fix(im):=20=E4=BF=AE=E5=A4=8D=20vben=20?=
 =?UTF-8?q?=E4=B8=89=E7=AB=AF=20IM=20=E7=BB=84=E4=BB=B6=E5=BA=93=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复 web-ele Element Plus 属性误用
  - Switch 使用 model-value 展示开关状态
  - Badge 使用 value 展示未读角标
  - Image 使用 preview-src-list 恢复图片预览
  - TabPane 使用 label/name 恢复已读状态切换
  - Select 改用 ElOption 渲染频道和素材选项
  - Popover 使用 v-model:visible 控制显示
  - Input 使用 show-word-limit 展示字数统计
  - Descriptions/Table 使用 border 展示边框
- 清理 web-ele 无效 closable 和误用 content 属性
- 清理 web-antdv-next 直接组件的 deprecated prop
  - destroy-on-close 改为 destroy-on-hidden
  - mask-closable 改为 mask.closable
  - body-style 改为 styles.body
---
 .../components/friend/friend-add-dialog.vue   |  2 +-
 .../group/group-admin-set-dialog.vue          |  2 +-
 .../components/group/group-create-dialog.vue  |  2 +-
 .../group/group-member-add-dialog.vue         |  2 +-
 .../group/group-member-remove-dialog.vue      |  2 +-
 .../group/group-mute-member-dialog.vue        |  2 +-
 .../group/group-owner-transfer-dialog.vue     |  2 +-
 .../group/group-request-list-dialog.vue       |  2 +-
 .../rtc/rtc-call-member-picker-dialog.vue     |  2 +-
 .../components/user/recommend-card-dialog.vue |  2 +-
 .../forward/message-forward-dialog.vue        |  2 +-
 .../forward/message-merge-detail-dialog.vue   |  2 +-
 .../components/message/material-bubble.vue    |  2 +-
 .../manager/face/pack/modules/item-drawer.vue |  2 +-
 .../group/components/select-dialog.vue        |  2 +-
 .../views/im/manager/group/modules/detail.vue |  2 +-
 .../views/im/manager/rtc/modules/detail.vue   |  2 +-
 .../components/distribution-chart.vue         |  2 +-
 .../statistics/components/overview-cards.vue  |  2 +-
 .../statistics/components/trend-chart.vue     |  2 +-
 .../components/friend/friend-add-dialog.vue   |  2 +-
 .../components/rtc/rtc-group-call-banner.vue  |  2 +-
 .../src/views/im/home/components/tool-bar.vue |  4 ++--
 .../im/home/components/user/user-avatar.vue   |  4 +++-
 .../pages/contact/friend-request-list.vue     |  2 +-
 .../conversation/conversation-group-side.vue  | 20 +++++++++----------
 .../conversation-private-side.vue             |  8 ++++----
 .../forward/message-merge-detail-dialog.vue   |  2 --
 .../components/message/message-bubble.vue     |  3 ++-
 .../components/message/message-history.vue    |  4 ++--
 .../components/message/message-panel.vue      |  2 +-
 .../message/message-read-status.vue           |  6 +++---
 .../channel/list/components/select.vue        | 12 ++++++++---
 .../channel/material/components/select.vue    | 12 ++++++++---
 .../im/manager/group/modules/ban-form.vue     |  2 +-
 .../views/im/manager/group/modules/detail.vue |  4 ++--
 .../manager/message/group/modules/detail.vue  |  2 +-
 .../message/private/modules/detail.vue        |  2 +-
 .../views/im/manager/rtc/modules/detail.vue   |  4 ++--
 39 files changed, 75 insertions(+), 62 deletions(-)

diff --git a/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue
index bda55c723..8a22a55a5 100644
--- a/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/friend/friend-add-dialog.vue
@@ -163,7 +163,7 @@ async function handleSubmitApply() {
     v-model:open="visible"
     :title="dialogTitle"
     width="480px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     :footer="step === 'apply' ? undefined : null"
   >
     <!-- 第一层：搜索 + 用户列表 -->
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-admin-set-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-admin-set-dialog.vue
index 2a12a4ec3..e6fa26f92 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-admin-set-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-admin-set-dialog.vue
@@ -92,7 +92,7 @@ async function handleOk() {
     v-model:open="visible"
     title="设置群管理员"
     width="700px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-picker-dialog"
   >
     <div class="h-[480px]">
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-create-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-create-dialog.vue
index 496b806d0..786450a35 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-create-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-create-dialog.vue
@@ -114,7 +114,7 @@ async function handleOk() {
     v-model:open="visible"
     title="发起群聊"
     width="720px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-picker-dialog"
   >
     <div class="h-[480px]">
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-member-add-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-member-add-dialog.vue
index 8be0a9a48..324772951 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-member-add-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-member-add-dialog.vue
@@ -137,7 +137,7 @@ async function handleOk() {
     v-model:open="visible"
     title="添加群成员"
     width="720px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-picker-dialog"
   >
     <div class="h-[480px]">
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-member-remove-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-member-remove-dialog.vue
index 1f943dc76..7de7122e7 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-member-remove-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-member-remove-dialog.vue
@@ -69,7 +69,7 @@ async function handleOk() {
     v-model:open="visible"
     title="移出群成员"
     width="700px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-picker-dialog"
   >
     <div class="h-[480px]">
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-mute-member-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-mute-member-dialog.vue
index f8361aab8..03a80ff12 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-mute-member-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-mute-member-dialog.vue
@@ -59,7 +59,7 @@ defineExpose({ open })
 
 <template>
   <!-- 禁言时长选择弹窗 -->
-  <Modal v-model:open="visible" title="设置禁言" width="560px" :mask-closable="false">
+  <Modal v-model:open="visible" title="设置禁言" width="560px" :mask="{ closable: false }">
     <div class="flex flex-col gap-4">
       <!-- 成员信息卡：和 FriendAddDialog 的 user 卡保持一致的浅色背景 -->
       <div
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-owner-transfer-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-owner-transfer-dialog.vue
index 14a6a3e33..3e36bc3d0 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-owner-transfer-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-owner-transfer-dialog.vue
@@ -90,7 +90,7 @@ async function handleOk() {
     v-model:open="visible"
     title="选择新群主"
     width="700px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-picker-dialog"
   >
     <div class="h-[480px]">
diff --git a/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue
index 61609ec64..b93b3886e 100644
--- a/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/group/group-request-list-dialog.vue
@@ -167,7 +167,7 @@ function updateLocalResult(id: number, handleResult: number) {
     title="进群申请"
     width="560px"
     :footer="null"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-group-request-list__dialog"
   >
     <Spin :spinning="loading" wrapper-class-name="w-full">
diff --git a/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
index 6676c8fa0..694dbf993 100644
--- a/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
@@ -81,7 +81,7 @@ function handleOk() {
     v-model:open="visible"
     :title="title"
     width="720px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-picker-dialog"
   >
     <div class="h-[480px]">
diff --git a/apps/web-antdv-next/src/views/im/home/components/user/recommend-card-dialog.vue b/apps/web-antdv-next/src/views/im/home/components/user/recommend-card-dialog.vue
index 8cb811215..5f5c30e11 100644
--- a/apps/web-antdv-next/src/views/im/home/components/user/recommend-card-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/components/user/recommend-card-dialog.vue
@@ -221,7 +221,7 @@ async function handleCreateGroupAndSend() {
   <Modal
     v-model:open="visible"
     width="720px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     :footer="view === 'conversation' ? null : undefined"
     class="im-picker-dialog im-recommend-dialog"
   >
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue
index e480fc296..d2f257846 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue
@@ -303,7 +303,7 @@ async function handleCreateGroupAndSend() {
   <Modal
     v-model:open="visible"
     width="720px"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     :footer="view === 'conversation' ? null : undefined"
     class="im-picker-dialog im-forward-dialog"
   >
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
index 2cfc8218d..7677b37a6 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
@@ -61,7 +61,7 @@ function handleClose() {
     v-model:open="visible"
     width="560px"
     :footer="null"
-    :mask-closable="false"
+    :mask="{ closable: false }"
     class="im-merge-detail-dialog"
     :closable="true"
     @close="handleClose"
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue
index f271c1015..245bccc3c 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/message/material-bubble.vue
@@ -116,7 +116,7 @@ const onClick = async () => {
     :footer="null"
     width="100vw"
     wrap-class-name="im-material-detail-modal"
-    destroy-on-close
+    destroy-on-hidden
   >
     <Spin :spinning="detailLoading" wrapper-class-name="w-full">
       <div class="material-detail-body max-w-[720px] mx-auto px-5 pt-6 pb-20 min-h-[60vh]">
diff --git a/apps/web-antdv-next/src/views/im/manager/face/pack/modules/item-drawer.vue b/apps/web-antdv-next/src/views/im/manager/face/pack/modules/item-drawer.vue
index 6acd51184..4b743d924 100644
--- a/apps/web-antdv-next/src/views/im/manager/face/pack/modules/item-drawer.vue
+++ b/apps/web-antdv-next/src/views/im/manager/face/pack/modules/item-drawer.vue
@@ -148,7 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   <Drawer
     v-model:open="visible"
     :title="title"
-    destroy-on-close
+    destroy-on-hidden
     :styles="{ wrapper: { width: '65%' } }"
     @after-open-change="handleOpenChange"
   >
diff --git a/apps/web-antdv-next/src/views/im/manager/group/components/select-dialog.vue b/apps/web-antdv-next/src/views/im/manager/group/components/select-dialog.vue
index 88304754e..193e8e01e 100644
--- a/apps/web-antdv-next/src/views/im/manager/group/components/select-dialog.vue
+++ b/apps/web-antdv-next/src/views/im/manager/group/components/select-dialog.vue
@@ -258,7 +258,7 @@ defineExpose({ open: openModal });
     v-model:open="open"
     title="群选择"
     width="70%"
-    :destroy-on-close="true"
+    :destroy-on-hidden="true"
     @ok="handleConfirm"
     @cancel="closeModal"
   >
diff --git a/apps/web-antdv-next/src/views/im/manager/group/modules/detail.vue b/apps/web-antdv-next/src/views/im/manager/group/modules/detail.vue
index c78afb4f5..d30893693 100644
--- a/apps/web-antdv-next/src/views/im/manager/group/modules/detail.vue
+++ b/apps/web-antdv-next/src/views/im/manager/group/modules/detail.vue
@@ -65,7 +65,7 @@ defineExpose({ open });
 </script>
 
 <template>
-  <Drawer v-model:open="visible" destroy-on-close title="群详情" :styles="{ wrapper: { width: '900px' } }">
+  <Drawer v-model:open="visible" destroy-on-hidden title="群详情" :styles="{ wrapper: { width: '900px' } }">
     <Descriptions bordered :column="2">
       <DescriptionsItem label="群编号">{{ detail.id }}</DescriptionsItem>
       <DescriptionsItem label="群名称">{{ detail.name }}</DescriptionsItem>
diff --git a/apps/web-antdv-next/src/views/im/manager/rtc/modules/detail.vue b/apps/web-antdv-next/src/views/im/manager/rtc/modules/detail.vue
index c1969b4ba..8a68e06ac 100644
--- a/apps/web-antdv-next/src/views/im/manager/rtc/modules/detail.vue
+++ b/apps/web-antdv-next/src/views/im/manager/rtc/modules/detail.vue
@@ -51,7 +51,7 @@ defineExpose({ open });
 </script>
 
 <template>
-  <Drawer v-model:open="visible" destroy-on-close title="通话记录详情" :styles="{ wrapper: { width: '900px' } }">
+  <Drawer v-model:open="visible" destroy-on-hidden title="通话记录详情" :styles="{ wrapper: { width: '900px' } }">
     <Descriptions bordered :column="2">
       <DescriptionsItem label="编号">{{ detail.id }}</DescriptionsItem>
       <DescriptionsItem label="业务通话编号">{{ detail.room }}</DescriptionsItem>
diff --git a/apps/web-antdv-next/src/views/im/manager/statistics/components/distribution-chart.vue b/apps/web-antdv-next/src/views/im/manager/statistics/components/distribution-chart.vue
index 4812c11ce..d652c860a 100644
--- a/apps/web-antdv-next/src/views/im/manager/statistics/components/distribution-chart.vue
+++ b/apps/web-antdv-next/src/views/im/manager/statistics/components/distribution-chart.vue
@@ -104,7 +104,7 @@ onMounted(loadData);
 </script>
 
 <template>
-  <Card :body-style="{ padding: '12px 16px 16px' }" :title="titleMap[type]">
+  <Card :styles="{ body: { padding: '12px 16px 16px' } }" :title="titleMap[type]">
     <div class="relative min-h-[320px]">
       <EchartsUI ref="chartRef" height="320px" />
       <div
diff --git a/apps/web-antdv-next/src/views/im/manager/statistics/components/overview-cards.vue b/apps/web-antdv-next/src/views/im/manager/statistics/components/overview-cards.vue
index c45015105..049c74722 100644
--- a/apps/web-antdv-next/src/views/im/manager/statistics/components/overview-cards.vue
+++ b/apps/web-antdv-next/src/views/im/manager/statistics/components/overview-cards.vue
@@ -78,7 +78,7 @@ const cards = computed(() => {
 
 <template>
   <div class="grid grid-cols-4 gap-4 max-xl:grid-cols-2 max-md:grid-cols-1">
-    <Card v-for="card in cards" :key="card.title" :body-style="{ padding: '16px' }">
+    <Card v-for="card in cards" :key="card.title" :styles="{ body: { padding: '16px' } }">
       <div class="flex items-center">
         <div
           class="mr-3 flex size-12 shrink-0 items-center justify-center rounded"
diff --git a/apps/web-antdv-next/src/views/im/manager/statistics/components/trend-chart.vue b/apps/web-antdv-next/src/views/im/manager/statistics/components/trend-chart.vue
index bbee56df4..cd9d2e397 100644
--- a/apps/web-antdv-next/src/views/im/manager/statistics/components/trend-chart.vue
+++ b/apps/web-antdv-next/src/views/im/manager/statistics/components/trend-chart.vue
@@ -115,7 +115,7 @@ onMounted(loadData);
 </script>
 
 <template>
-  <Card :body-style="{ padding: '12px 16px 16px' }">
+  <Card :styles="{ body: { padding: '12px 16px 16px' } }">
     <template #title>
       <div class="flex items-center justify-between">
         <span>{{ title }}</span>
diff --git a/apps/web-ele/src/views/im/home/components/friend/friend-add-dialog.vue b/apps/web-ele/src/views/im/home/components/friend/friend-add-dialog.vue
index db6329a80..522c3619e 100644
--- a/apps/web-ele/src/views/im/home/components/friend/friend-add-dialog.vue
+++ b/apps/web-ele/src/views/im/home/components/friend/friend-add-dialog.vue
@@ -267,7 +267,7 @@ type="textarea"
         v-model="applyContent"
         :rows="3"
         :maxlength="255"
-        show-count
+        show-word-limit
         placeholder="请填写申请理由"
       />
 
diff --git a/apps/web-ele/src/views/im/home/components/rtc/rtc-group-call-banner.vue b/apps/web-ele/src/views/im/home/components/rtc/rtc-group-call-banner.vue
index aa8d7b6e3..32a03a357 100644
--- a/apps/web-ele/src/views/im/home/components/rtc/rtc-group-call-banner.vue
+++ b/apps/web-ele/src/views/im/home/components/rtc/rtc-group-call-banner.vue
@@ -145,7 +145,7 @@ async function handleJoin() {
   <!-- 仅当该群有活跃通话时显示；点击胶囊条展开 popover 看在通话成员 + 加入 -->
   <div v-if="activeCall" class="flex-shrink-0 px-4 pb-2 bg-[var(--ant-color-fill-secondary)]">
     <ElPopover
-      v-model="popoverVisible"
+      v-model:visible="popoverVisible"
       placement="bottom-start"
       :width="280"
       trigger="click"
diff --git a/apps/web-ele/src/views/im/home/components/tool-bar.vue b/apps/web-ele/src/views/im/home/components/tool-bar.vue
index cb0fcc963..827667776 100644
--- a/apps/web-ele/src/views/im/home/components/tool-bar.vue
+++ b/apps/web-ele/src/views/im/home/components/tool-bar.vue
@@ -78,7 +78,7 @@ const goProfile = () => router.push({ name: 'Profile' })
       >
         <ElBadge
           v-if="item.name === 'ImHomeConversation' && totalUnread > 0"
-          :count="totalUnread"
+          :value="totalUnread"
           :max="99"
           class="tool-bar__badge"
         >
@@ -86,7 +86,7 @@ const goProfile = () => router.push({ name: 'Profile' })
         </ElBadge>
         <ElBadge
           v-else-if="item.name === 'ImHomeContact' && unhandledRequestCount > 0"
-          :count="unhandledRequestCount"
+          :value="unhandledRequestCount"
           :max="99"
           class="tool-bar__badge"
         >
diff --git a/apps/web-ele/src/views/im/home/components/user/user-avatar.vue b/apps/web-ele/src/views/im/home/components/user/user-avatar.vue
index de45d34aa..9f2d225d5 100644
--- a/apps/web-ele/src/views/im/home/components/user/user-avatar.vue
+++ b/apps/web-ele/src/views/im/home/components/user/user-avatar.vue
@@ -110,7 +110,9 @@ function handleClick(e: MouseEvent) {
       v-if="url && previewable"
       class="block overflow-hidden"
       :src="url"
-      :preview="{ src: url, zIndex: previewZIndex }"
+      :preview-src-list="[url]"
+      :preview-teleported="true"
+      :z-index="previewZIndex"
       :style="imgStyle"
     />
     <img
diff --git a/apps/web-ele/src/views/im/home/pages/contact/friend-request-list.vue b/apps/web-ele/src/views/im/home/pages/contact/friend-request-list.vue
index 2b60adf60..25a47cfba 100644
--- a/apps/web-ele/src/views/im/home/pages/contact/friend-request-list.vue
+++ b/apps/web-ele/src/views/im/home/pages/contact/friend-request-list.vue
@@ -79,7 +79,7 @@ async function handleLoadMore() {
       <!-- 红点：未处理且别人加我的（统一走 store getter，避免本地 computed 跟 store 双口径） -->
       <ElBadge
         v-if="friendStore.getUnhandledRequestCount > 0"
-        :count="friendStore.getUnhandledRequestCount"
+        :value="friendStore.getUnhandledRequestCount"
         :max="99"
         class="mr-2"
       />
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 ae76c3328..ca75807dc 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
@@ -496,7 +496,7 @@ function handleOpenTransferOwner() {
           <!-- 群聊名称（群主可改） -->
           <ElPopover
             v-if="isOwner"
-            v-model="namePopoverVisible"
+            v-model:visible="namePopoverVisible"
             trigger="click"
             placement="left-start"
             :width="280"
@@ -528,7 +528,7 @@ function handleOpenTransferOwner() {
           <!-- 群公告（群主可改）：内容可能很长，加 > chevron 表示可展开编辑 -->
           <ElPopover
             v-if="isOwner"
-            v-model="noticePopoverVisible"
+            v-model:visible="noticePopoverVisible"
             trigger="click"
             placement="left-start"
             :width="320"
@@ -560,7 +560,7 @@ function handleOpenTransferOwner() {
                 type="textarea"
                 :rows="4"
                 :maxlength="1024"
-                show-count
+                show-word-limit
                 placeholder="请输入群公告"
               />
               <div class="flex justify-end gap-2">
@@ -586,7 +586,7 @@ function handleOpenTransferOwner() {
           <!-- 备注（仅自己可见；保存后会替换会话列表 / 顶部群名展示）；历史退群群隐藏：改备注走 updateGroupMember，已退群会被后端拒 -->
           <ElPopover
             v-if="!isQuitGroup"
-            v-model="groupRemarkPopoverVisible"
+            v-model:visible="groupRemarkPopoverVisible"
             trigger="click"
             placement="left-start"
             :width="280"
@@ -613,7 +613,7 @@ function handleOpenTransferOwner() {
                 type="textarea"
                 :rows="3"
                 :maxlength="64"
-                show-count
+                show-word-limit
                 placeholder="仅自己可见"
               />
               <div class="flex justify-end gap-2">
@@ -626,7 +626,7 @@ function handleOpenTransferOwner() {
           <!-- 我在本群的昵称（任何成员都能改自己的）；历史退群群隐藏：走 updateGroupMember，已退群会被后端拒 -->
           <ElPopover
             v-if="!isQuitGroup"
-            v-model="remarkPopoverVisible"
+            v-model:visible="remarkPopoverVisible"
             trigger="click"
             placement="left-start"
             :width="280"
@@ -695,16 +695,16 @@ function handleOpenTransferOwner() {
         <div class="bg-[var(--ant-color-bg-container)]">
           <div class="im-conversation-group-side__row flex items-center justify-between gap-3 px-4 py-[13px] text-14px min-h-6 transition-colors duration-150">
             <span class="flex-shrink-0 text-14px text-[var(--ant-color-text)]">消息免打扰</span>
-            <ElSwitch :checked="!!conversation?.silent" @change="onMutedChange" />
+            <ElSwitch :model-value="!!conversation?.silent" @change="onMutedChange" />
           </div>
           <div class="im-conversation-group-side__row flex items-center justify-between gap-3 px-4 py-[13px] text-14px min-h-6 transition-colors duration-150">
             <span class="flex-shrink-0 text-14px text-[var(--ant-color-text)]">置顶聊天</span>
-            <ElSwitch :checked="!!conversation?.top" @change="onTopChange" />
+            <ElSwitch :model-value="!!conversation?.top" @change="onTopChange" />
           </div>
           <!-- 全群禁言：仅群主或管理员可操作 -->
           <div v-if="isOwnerOrAdmin" class="im-conversation-group-side__row flex items-center justify-between gap-3 px-4 py-[13px] text-14px min-h-6 transition-colors duration-150">
             <span class="flex-shrink-0 text-14px text-[var(--ant-color-text)]">全群禁言</span>
-            <ElSwitch :checked="!!currentMutedAll" @change="onMuteAllChange" />
+            <ElSwitch :model-value="!!currentMutedAll" @change="onMuteAllChange" />
           </div>
         </div>
 
@@ -716,7 +716,7 @@ function handleOpenTransferOwner() {
             <!-- 进群审批：仅群主可操作；开启后普通成员的「申请」「邀请」路径都需群主 / 管理员同意；群主 / 管理员邀请直进 -->
             <div v-if="isOwner" class="im-conversation-group-side__row flex items-center justify-between gap-3 px-4 py-[13px] text-14px min-h-6 transition-colors duration-150">
               <span class="flex-shrink-0 text-14px text-[var(--ant-color-text)]">进群需要群主 / 群管理确认</span>
-              <ElSwitch :checked="!!group.joinApproval" @change="handleJoinApprovalChange" />
+              <ElSwitch :model-value="!!group.joinApproval" @change="handleJoinApprovalChange" />
             </div>
             <!-- 进群申请子项：仅当开启审批 + 当前用户是 owner / admin 时出现；点击进列表 dialog -->
             <div
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 4d1b843db..8349babe6 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
@@ -183,7 +183,7 @@ function handleGroupCreated(groupId: number) {
         <!-- 备注（仅自己可见）：点击弹 popover 编辑，保存后立即刷新本抽屉 + 会话列表展示名 -->
         <div class="bg-[var(--ant-color-bg-container)]">
           <ElPopover
-            v-model="displayNamePopoverVisible"
+            v-model:visible="displayNamePopoverVisible"
             trigger="click"
             placement="left-start"
             :width="280"
@@ -208,7 +208,7 @@ function handleGroupCreated(groupId: number) {
               <ElInput
                 v-model="editDisplayName"
                 :maxlength="16"
-                show-count
+                show-word-limit
                 placeholder="请输入备注名"
               />
               <div class="flex justify-end gap-2">
@@ -244,11 +244,11 @@ function handleGroupCreated(groupId: number) {
         <div class="bg-[var(--ant-color-bg-container)]">
           <div class="im-conversation-private-side__row flex items-center justify-between gap-3 px-4 py-[13px] text-14px min-h-6 transition-colors duration-150">
             <span class="flex-shrink-0 text-14px text-[var(--ant-color-text)]">消息免打扰</span>
-            <ElSwitch :checked="!!conversation?.silent" @change="handleMutedChange" />
+            <ElSwitch :model-value="!!conversation?.silent" @change="handleMutedChange" />
           </div>
           <div class="im-conversation-private-side__row flex items-center justify-between gap-3 px-4 py-[13px] text-14px min-h-6 transition-colors duration-150">
             <span class="flex-shrink-0 text-14px text-[var(--ant-color-text)]">置顶聊天</span>
-            <ElSwitch :checked="!!conversation?.top" @change="handleTopChange" />
+            <ElSwitch :model-value="!!conversation?.top" @change="handleTopChange" />
           </div>
         </div>
       </div>
diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
index 9659cf2e1..cd498f52e 100644
--- a/apps/web-ele/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
+++ b/apps/web-ele/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
@@ -60,10 +60,8 @@ function handleClose() {
   <ElDialog
     v-model="visible"
     width="560px"
-    
     :close-on-click-modal="false"
     class="im-merge-detail-dialog"
-    :closable="true"
     @close="handleClose"
   >
     <template #header>
diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-bubble.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-bubble.vue
index d694c5b39..dc5893b09 100644
--- a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-bubble.vue
+++ b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-bubble.vue
@@ -208,7 +208,8 @@ onBeforeUnmount(() => {
     <ElImage
       class="max-w-[220px] rounded cursor-zoom-in"
       :src="imagePayload.thumbnailUrl || imagePayload.url"
-      :preview="isUploading ? false : { src: imagePayload.url }"
+      :preview-src-list="isUploading ? [] : [imagePayload.url]"
+      :preview-teleported="true"
     />
     <div
       v-if="isUploading"
diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-history.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-history.vue
index ae4f58a60..8ad6ecd1a 100644
--- a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-history.vue
+++ b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-history.vue
@@ -565,7 +565,7 @@ function locateMessage(messageId: number) {
         </span>
         <!-- 日期：el-popover 包 el-calendar，确认后才落筛选 -->
         <ElPopover
-          v-model="datePopoverVisible"
+          v-model:visible="datePopoverVisible"
           trigger="click"
           placement="bottom"
           :width="320"
@@ -596,7 +596,7 @@ function locateMessage(messageId: number) {
         <!-- 群成员：仅群聊；popover 内自带搜索 + GroupMember 列表 -->
         <ElPopover
           v-if="isGroup"
-          v-model="memberPopoverVisible"
+          v-model:visible="memberPopoverVisible"
           trigger="click"
           placement="bottom"
           :width="320"
diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-panel.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-panel.vue
index 05e7678d9..80e91675d 100644
--- a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-panel.vue
+++ b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-panel.vue
@@ -567,7 +567,7 @@ watch(
             <!-- 通话入口：私聊弹「语音 / 视频」popover；群聊直接进选人弹窗 -->
             <ElPopover
               v-if="isPrivate"
-              v-model="callPopoverVisible"
+              v-model:visible="callPopoverVisible"
               placement="bottom-end"
               :width="140"
               trigger="click"
diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-read-status.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-read-status.vue
index 8de3690ac..b921f65d7 100644
--- a/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-read-status.vue
+++ b/apps/web-ele/src/views/im/home/pages/conversation/components/message/message-read-status.vue
@@ -123,7 +123,7 @@ async function loadReadUsers() {
     - 未读名单 = 当前群成员 − 自己 − 已退群 − 已读集合（前端聚合，后端只回已读 userId）
   -->
   <ElPopover
-    v-model="popVisible"
+    v-model:visible="popVisible"
     placement="left"
     trigger="click"
     :width="320"
@@ -138,7 +138,7 @@ async function loadReadUsers() {
     </template>
 
     <ElTabs v-model="activeTab">
-      <ElTabPane :tab="`已读(${readMembers.length})`" key="read">
+      <ElTabPane :label="`已读(${readMembers.length})`" name="read">
         <PagedScroller :items="readMembers" :page-size="20" item-key="userId" class="h-75">
           <template #default="{ item }">
             <GroupMember :member="item as GroupMemberLite" :height="40" :clickable="false" />
@@ -151,7 +151,7 @@ async function loadReadUsers() {
           {{ groupMembers.length === 0 ? '群成员未加载' : '暂无已读' }}
         </div>
       </ElTabPane>
-      <ElTabPane :tab="`未读(${unreadMembers.length})`" key="unread">
+      <ElTabPane :label="`未读(${unreadMembers.length})`" name="unread">
         <PagedScroller :items="unreadMembers" :page-size="20" item-key="userId" class="h-75">
           <template #default="{ item }">
             <GroupMember :member="item as GroupMemberLite" :height="40" :clickable="false" />
diff --git a/apps/web-ele/src/views/im/manager/channel/list/components/select.vue b/apps/web-ele/src/views/im/manager/channel/list/components/select.vue
index 1e49416ca..3636e340f 100644
--- a/apps/web-ele/src/views/im/manager/channel/list/components/select.vue
+++ b/apps/web-ele/src/views/im/manager/channel/list/components/select.vue
@@ -3,7 +3,7 @@ import type { ImManagerChannelApi } from '#/api/im/manager/channel';
 
 import { computed, onMounted, ref } from 'vue';
 
-import { ElSelect } from 'element-plus'
+import { ElOption, ElSelect } from 'element-plus'
 
 import { getSimpleChannelList } from '#/api/im/manager/channel';
 
@@ -59,8 +59,14 @@ onMounted(loadChannelList);
     :clearable="clearable"
     :disabled="disabled"
     :loading="loading"
-    :options="options"
     :placeholder="placeholder"
     class="w-full"
-  />
+  >
+    <ElOption
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </ElSelect>
 </template>
diff --git a/apps/web-ele/src/views/im/manager/channel/material/components/select.vue b/apps/web-ele/src/views/im/manager/channel/material/components/select.vue
index e94663886..069bd5432 100644
--- a/apps/web-ele/src/views/im/manager/channel/material/components/select.vue
+++ b/apps/web-ele/src/views/im/manager/channel/material/components/select.vue
@@ -3,7 +3,7 @@ import type { ImManagerChannelMaterialApi } from '#/api/im/manager/channel/mater
 
 import { computed, ref, watch } from 'vue';
 
-import { ElSelect } from 'element-plus'
+import { ElOption, ElSelect } from 'element-plus'
 
 import { getSimpleManagerChannelMaterialList } from '#/api/im/manager/channel/material';
 
@@ -64,8 +64,14 @@ watch(() => props.channelId, loadMaterialList, { immediate: true });
     :clearable="clearable"
     :disabled="!channelId"
     :loading="loading"
-    :options="options"
     :placeholder="placeholder"
     class="w-full"
-  />
+  >
+    <ElOption
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </ElSelect>
 </template>
diff --git a/apps/web-ele/src/views/im/manager/group/modules/ban-form.vue b/apps/web-ele/src/views/im/manager/group/modules/ban-form.vue
index bd8b1a2ec..0ed4f3b91 100644
--- a/apps/web-ele/src/views/im/manager/group/modules/ban-form.vue
+++ b/apps/web-ele/src/views/im/manager/group/modules/ban-form.vue
@@ -58,7 +58,7 @@ type="textarea"
           :maxlength="200"
           :rows="3"
           placeholder="请输入封禁原因"
-          show-count
+          show-word-limit
         />
       </ElFormItem>
     </ElForm>
diff --git a/apps/web-ele/src/views/im/manager/group/modules/detail.vue b/apps/web-ele/src/views/im/manager/group/modules/detail.vue
index e3480400e..0d4c746ef 100644
--- a/apps/web-ele/src/views/im/manager/group/modules/detail.vue
+++ b/apps/web-ele/src/views/im/manager/group/modules/detail.vue
@@ -44,7 +44,7 @@ defineExpose({ open });
 
 <template>
   <ElDrawer v-model="visible" destroy-on-close title="群详情" width="900">
-    <ElDescriptions bordered :column="2">
+    <ElDescriptions border :column="2">
       <ElDescriptionsItem label="群编号">{{ detail.id }}</ElDescriptionsItem>
       <ElDescriptionsItem label="群名称">{{ detail.name }}</ElDescriptionsItem>
       <ElDescriptionsItem label="头像">
@@ -84,7 +84,7 @@ defineExpose({ open });
     <ElTable
       v-loading="loading"
       :data="filteredMembers"
-      bordered
+      border
       row-key="userId"
       size="small"
     >
diff --git a/apps/web-ele/src/views/im/manager/message/group/modules/detail.vue b/apps/web-ele/src/views/im/manager/message/group/modules/detail.vue
index f9df132ba..11c23d90b 100644
--- a/apps/web-ele/src/views/im/manager/message/group/modules/detail.vue
+++ b/apps/web-ele/src/views/im/manager/message/group/modules/detail.vue
@@ -36,7 +36,7 @@ defineExpose({ open });
 
 <template>
   <ElDialog v-model="visible" title="群聊消息详情" width="700px">
-    <ElDescriptions bordered :column="2">
+    <ElDescriptions border :column="2">
       <ElDescriptionsItem label="编号">{{ detail.id }}</ElDescriptionsItem>
       <ElDescriptionsItem label="客户端编号">
         {{ detail.clientMessageId || '-' }}
diff --git a/apps/web-ele/src/views/im/manager/message/private/modules/detail.vue b/apps/web-ele/src/views/im/manager/message/private/modules/detail.vue
index 30a0adfb9..efeb77c8e 100644
--- a/apps/web-ele/src/views/im/manager/message/private/modules/detail.vue
+++ b/apps/web-ele/src/views/im/manager/message/private/modules/detail.vue
@@ -33,7 +33,7 @@ defineExpose({ open });
 
 <template>
   <ElDialog v-model="visible" title="私聊消息详情" width="700px">
-    <ElDescriptions bordered :column="2">
+    <ElDescriptions border :column="2">
       <ElDescriptionsItem label="编号">{{ detail.id }}</ElDescriptionsItem>
       <ElDescriptionsItem label="客户端编号">
         {{ detail.clientMessageId || '-' }}
diff --git a/apps/web-ele/src/views/im/manager/rtc/modules/detail.vue b/apps/web-ele/src/views/im/manager/rtc/modules/detail.vue
index 99bb62096..e3f97f515 100644
--- a/apps/web-ele/src/views/im/manager/rtc/modules/detail.vue
+++ b/apps/web-ele/src/views/im/manager/rtc/modules/detail.vue
@@ -42,7 +42,7 @@ defineExpose({ open });
 
 <template>
   <ElDrawer v-model="visible" destroy-on-close title="通话记录详情" width="900">
-    <ElDescriptions bordered :column="2">
+    <ElDescriptions border :column="2">
       <ElDescriptionsItem label="编号">{{ detail.id }}</ElDescriptionsItem>
       <ElDescriptionsItem label="业务通话编号">{{ detail.room }}</ElDescriptionsItem>
       <ElDescriptionsItem label="发起人">
@@ -84,7 +84,7 @@ defineExpose({ open });
     <ElTable
       v-loading="loading"
       :data="participants"
-      bordered
+      border
       row-key="id"
       size="small"
     >