【需求 21096】 perf: 优化过度

src/components/common/MessageBox/index.vue

 <template>
   <Teleport to="body">
-    <Transition name="confirm" @after-leave="emit('afterLeave')">
-      <div v-if="visible" class="fixed inset-0 z-3000 flex items-center justify-center p-4">
-        <!-- Backdrop -->
-        <div class="confirm-backdrop absolute inset-0 bg-black/20" />
+    <Transition
+      name="confirm"
+      :duration="{ enter: 520, leave: 520 }"
+      @after-leave="emit('afterLeave')"
+    >
+      <div
+        v-if="visible"
+        class="confirm-overlay-root fixed inset-0 z-3000 flex items-center justify-center p-4"
+      >
+        <!-- 蒙层：企微等 WebView 常不支持 backdrop-filter，必须保证纯色半透明始终可见 -->
+        <div class="confirm-backdrop absolute inset-0" aria-hidden="true" />
 
         <!-- Card -->
         <div
@@ -134,16 +141,6 @@ const normalizedMousePosition = computed(() => {
   }
 })
 
-onMounted(() => {
-  console.log('onMounted')
-})
-onUpdated(() => {
-  console.log('onUpdated')
-})
-onUnmounted(() => {
-  console.log('onUnmounted')
-})
-
 const normalizedMessage = computed(() => {
   if (!message) return ''
 
@@ -191,32 +188,66 @@ defineExpose({ open, close })
 </script>
 
 <style scoped>
-/* 背景透明度过渡：打开时 0→1，关闭时 1→0 */
-.confirm-enter-active,
-.confirm-leave-active {
-  transition: opacity 0.2s ease;
+/* 独立合成层，部分 WebView 下 fixed 遮罩更稳定 */
+.confirm-overlay-root {
+  isolation: isolate;
 }
 
-.confirm-enter-from {
-  opacity: 0;
+/* 蒙层淡入淡出（不依赖整层 opacity，避免与卡片动画打架） */
+.confirm-enter-active .confirm-backdrop,
+.confirm-leave-active .confirm-backdrop {
+  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.confirm-leave-to {
+.confirm-enter-from .confirm-backdrop,
+.confirm-leave-to .confirm-backdrop {
   opacity: 0;
 }
 
+@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .confirm-enter-active .confirm-backdrop,
+  .confirm-leave-active .confirm-backdrop {
+    transition:
+      opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
+      backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+      -webkit-backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .confirm-enter-from .confirm-backdrop,
+  .confirm-leave-to .confirm-backdrop {
+    -webkit-backdrop-filter: blur(0px) saturate(1);
+    backdrop-filter: blur(0px) saturate(1);
+  }
+}
+
+/* 基础蒙层：无模糊支持时也能明显压暗（企微常见） */
+.confirm-backdrop {
+  background-color: #0003;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .confirm-backdrop {
+    /* 有模糊时可略浅一点 */
+    background-color: #0003;
+    -webkit-backdrop-filter: blur(10px) saturate(1.12);
+    backdrop-filter: blur(10px) saturate(1.12);
+  }
+}
+
 /* card 动画 */
 
 .confirm-enter-active .confirm-card {
   transition:
-    transform 0.2s cubic-bezier(0.22, 1.2, 0.36, 1),
-    opacity 0.2s ease;
+    transform 0.5s cubic-bezier(0.22, 1.2, 0.36, 1),
+    opacity 0.5s ease;
 }
 
 .confirm-leave-active .confirm-card {
   transition:
-    transform 0.2s ease,
-    opacity 0.2s ease;
+    transform 0.5s ease,
+    opacity 0.5s ease;
 }
 
 /* 从点击点展开（先用固定坐标 200px,200px 测试动画是否生效） */