From 0022b86ddad59c70f0ae933830634a03ff51ed86 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 11:56:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20SocialLinks=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E4=BD=BF=E7=94=A8=20Teleport=20=E5=8C=85?=
 =?UTF-8?q?=E8=A3=B9=20WechatModal=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A8=A1?=
 =?UTF-8?q?=E6=80=81=E6=A1=86=E7=9A=84=E6=B8=B2=E6=9F=93=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=EF=BC=8C=E5=90=8C=E6=97=B6=E8=B0=83=E6=95=B4=20WechatModal=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=9B=B8=E5=AF=B9=E5=AE=9A=E4=BD=8D=E5=92=8C=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SocialLinks.vue | 19 +++++++++++--------
 src/components/WechatModal.vue |  5 +++++
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/SocialLinks.vue b/src/components/SocialLinks.vue
index 911c4e6..e8ceaed 100644
--- a/src/components/SocialLinks.vue
+++ b/src/components/SocialLinks.vue
@@ -3,6 +3,7 @@ import { ref, computed } from "vue";
 import { useMouseInElement } from "@vueuse/core";
 import { useTheme } from "vuetify";
 import WechatModal from "./WechatModal.vue";
+import { Teleport } from "vue";
 
 const theme = useTheme();
 const cardRef = ref(null);
@@ -107,13 +108,15 @@ const openLink = (url) => {
 <template>
   <div ref="cardRef" class="social-links-card" :style="cardTransform">
     <!-- 使用WechatModal组件 -->
-    <WechatModal
-      v-model="showWechatModal"
-      :qr-code="currentQrCode"
-      title="微信扫码添加"
-      hint="打开微信扫一扫，添加我为好友"
-      @closed="currentQrCode = ''"
-    />
+    <Teleport to="body">
+      <WechatModal
+        v-model="showWechatModal"
+        :qr-code="currentQrCode"
+        title="微信扫码添加"
+        hint="打开微信扫一扫，添加我为好友"
+        @closed="currentQrCode = ''"
+      />
+    </Teleport>
 
     <!-- 社交链接主体 -->
     <div class="social-grid">
@@ -156,7 +159,7 @@ const openLink = (url) => {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   will-change: transform;
-  overflow: hidden;
+  overflow: visible;
   transition: background 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.05);
   width: 100%;
diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue
index ea62f35..caf53fd 100644
--- a/src/components/WechatModal.vue
+++ b/src/components/WechatModal.vue
@@ -210,6 +210,7 @@ onUnmounted(() => {
   animation: fadeIn 0.3s ease;
   backdrop-filter: blur(8px);
   transition: opacity 0.3s ease;
+  isolation: isolate;
 }
 
 .dark-mode.wechat-modal-mask {
@@ -217,6 +218,7 @@ onUnmounted(() => {
 }
 
 .wechat-modal-container {
+  position: relative;
   width: 400px;
   height: 400px;
   aspect-ratio: 1;
@@ -226,6 +228,7 @@ onUnmounted(() => {
   overflow: hidden;
   transform: scale(0.9);
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
+  z-index: v-bind('zIndex + 1');
 }
 
 .wechat-modal-header {
@@ -404,6 +407,7 @@ onUnmounted(() => {
   .wechat-modal-container {
     width: 95vw;
     height: 95vw;
+    margin: 10px;
   }
   .qr-code-wrapper {
     width: 80%;
@@ -415,6 +419,7 @@ onUnmounted(() => {
 @media (min-width: 361px) {
   .wechat-modal-container {
     width: min(420px, 90vw);
+    margin: 20px;
   }
   .qr-code-wrapper {
     width: 280px;