feat: 优化 WechatModal 组件的样式和动画效果，使用 grid 布局和新增淡入缩放动画

src/components/WechatModal.vue

@@ -203,14 +203,11 @@ onUnmounted(() => {
 .wechat-modal-mask {
   position: fixed;
   z-index: v-bind('zIndex');
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background-color: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  place-items: center;
+  animation: fadeIn 0.3s ease;
   backdrop-filter: blur(8px);
   transition: opacity 0.3s ease;
 }
@@ -372,15 +369,29 @@ onUnmounted(() => {
   }
 }
 
-/* 过渡动画 */
-.wechat-modal-enter-from,
-.wechat-modal-leave-to {
-  opacity: 0;
+/* 独立卡片动画 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-.wechat-modal-enter-from .wechat-modal-container,
-.wechat-modal-leave-to .wechat-modal-container {
-  transform: scale(0.8);
+@keyframes scaleUp {
+  from {
+    transform: scale(0.8) translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+.wechat-modal-enter-active .wechat-modal-container {
+  animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
+}
+
+.wechat-modal-leave-active .wechat-modal-container {
+  animation: scaleUp 0.2s reverse;
 }
 
 .wechat-modal-enter-active .wechat-modal-container,