From 922973af935a21adfcdec2cfeefa586fb18a9517 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 01:59:28 +0800
Subject: [PATCH] feat: update SocialLinks styling and optimize Vite config

---
 src/components/SocialLinks.vue | 116 +++++++++++++++++----------------
 vite.config.js                 |   7 ++
 2 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/src/components/SocialLinks.vue b/src/components/SocialLinks.vue
index 1604241..cdb59d4 100644
--- a/src/components/SocialLinks.vue
+++ b/src/components/SocialLinks.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref, computed } from "vue"
-import { useMouseInElement } from "@vueuse/core"
-import { useTheme } from "vuetify"
+import { ref, computed } from "vue";
+import { useMouseInElement } from "@vueuse/core";
+import { useTheme } from "vuetify";
 
-const theme = useTheme()
-const cardRef = ref(null)
-const { elementX, elementY } = useMouseInElement(cardRef)
+const theme = useTheme();
+const cardRef = ref(null);
+const { elementX, elementY } = useMouseInElement(cardRef);
 
 // 定义props并设置默认值
 const props = defineProps({
@@ -19,7 +19,7 @@ const props = defineProps({
         url: "https://github.com/cattom",
         color: "#181717",
         hoverColor: "#6e5494",
-        ariaLabel: "访问我的GitHub主页"
+        ariaLabel: "访问我的GitHub主页",
       },
       {
         name: "Twitter",
@@ -27,7 +27,7 @@ const props = defineProps({
         url: "https://twitter.com/cattom",
         color: "#000000",
         hoverColor: "#1DA1F2",
-        ariaLabel: "在Twitter上关注我"
+        ariaLabel: "在Twitter上关注我",
       },
       {
         name: "LinkedIn",
@@ -35,7 +35,7 @@ const props = defineProps({
         url: "https://linkedin.com/in/cattom",
         color: "#0A66C2",
         hoverColor: "#0077B5",
-        ariaLabel: "查看我的LinkedIn资料"
+        ariaLabel: "查看我的LinkedIn资料",
       },
       {
         name: "Email",
@@ -43,7 +43,7 @@ const props = defineProps({
         url: "mailto:hi@cattom.me",
         color: "#D44638",
         hoverColor: "#EA4335",
-        ariaLabel: "发送电子邮件给我"
+        ariaLabel: "发送电子邮件给我",
       },
       {
         name: "WeChat",
@@ -51,41 +51,42 @@ const props = defineProps({
         color: "#07C160",
         hoverColor: "#2DC100",
         ariaLabel: "扫描我的微信二维码",
-        qrCode: "/assets/qr-wechat.png",
-        showQr: false
-      }
+        qrCode: new URL("./assets/wechat-qr.png", import.meta.url).href,
+        showQr: false,
+      },
     ],
-    validator: platforms => 
-      Array.isArray(platforms) && 
-      platforms.every(p => 
-        typeof p === 'object' && 
-        p !== null && 
-        p.name && 
-        typeof p.name === 'string'
-      )
-  }
-})
+    validator: (platforms) =>
+      Array.isArray(platforms) &&
+      platforms.every(
+        (p) =>
+          typeof p === "object" &&
+          p !== null &&
+          p.name &&
+          typeof p.name === "string"
+      ),
+  },
+});
 
 // 微信二维码显示状态管理
-const qrStates = ref({})
+const qrStates = ref({});
 const toggleQrCode = (platform) => {
   if (platform.qrCode) {
-    qrStates.value[platform.name] = !qrStates.value[platform.name]
-    emit('showWechat', qrStates.value[platform.name])
+    qrStates.value[platform.name] = !qrStates.value[platform.name];
+    emit("showWechat", qrStates.value[platform.name]);
   }
-}
+};
 
-const emit = defineEmits(['showWechat'])
+const emit = defineEmits(["showWechat"]);
 
 // 计算属性
-const platformsWithQr = computed(() => 
-  props.socialPlatforms.filter(p => p.qrCode)
-)
+const platformsWithQr = computed(() =>
+  props.socialPlatforms.filter((p) => p.qrCode)
+);
 
 const cardTransform = computed(() => {
-  const MAX_TILT = 8
-  const x = (elementX.value - (cardRef.value?.offsetWidth / 2 || 0)) / 20
-  const y = ((cardRef.value?.offsetHeight / 2 || 0) - elementY.value) / 20
+  const MAX_TILT = 8;
+  const x = (elementX.value - (cardRef.value?.offsetWidth / 2 || 0)) / 20;
+  const y = ((cardRef.value?.offsetHeight / 2 || 0) - elementY.value) / 20;
 
   return {
     transform: `
@@ -93,14 +94,14 @@ const cardTransform = computed(() => {
       rotateX(${Math.min(Math.max(-y, -MAX_TILT), MAX_TILT)}deg)
       rotateY(${Math.min(Math.max(x, -MAX_TILT), MAX_TILT)}deg)
     `,
-    transition: "transform 0.5s cubic-bezier(0.03, 0.98, 0.52, 0.99)"
-  }
-})
+    transition: "transform 0.5s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
+  };
+});
 
 const openLink = (url) => {
-  if (!url) return
-  window.open(url, "_blank", "noopener,noreferrer")
-}
+  if (!url) return;
+  window.open(url, "_blank", "noopener,noreferrer");
+};
 </script>
 
 <template>
@@ -113,12 +114,13 @@ const openLink = (url) => {
         :key="`qr-${platform.name}`"
         class="qr-code"
       >
-        <img 
-          :src="platform.qrCode" 
-          :alt="`${platform.name}二维码`" 
-          @click.stop
+        <img
+          v-if="qrStates[platform.name]"
+          :src="platform.qrCode"
+          loading="lazy"
+          :alt="`${platform.name}二维码`"
         />
-        <button 
+        <button
           class="qr-close"
           @click="toggleQrCode(platform)"
           aria-label="关闭二维码"
@@ -135,11 +137,15 @@ const openLink = (url) => {
         :key="index"
         class="social-item"
         :style="{ '--hover-color': platform.hoverColor || platform.color }"
-        @click="platform.qrCode ? toggleQrCode(platform) : openLink(platform.url)"
+        @click="
+          platform.qrCode ? toggleQrCode(platform) : openLink(platform.url)
+        "
         role="button"
         :aria-label="platform.ariaLabel || `${platform.name}链接`"
         tabindex="0"
-        @keydown.enter="platform.qrCode ? toggleQrCode(platform) : openLink(platform.url)"
+        @keydown.enter="
+          platform.qrCode ? toggleQrCode(platform) : openLink(platform.url)
+        "
       >
         <div class="social-icon-wrapper">
           <i
@@ -162,22 +168,18 @@ const openLink = (url) => {
   background: rgba(var(--v-theme-surface), 0.8);
   backdrop-filter: blur(12px);
   border-radius: 1.5rem;
-  box-shadow: 
-    0 10px 30px rgba(0, 0, 0, 0.1),
+  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;
-  transition: 
-    background 0.3s ease, 
-    box-shadow 0.3s ease;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 /* 暗黑模式适配 */
 :global([data-theme="dark"]) .social-links-card {
   background: rgba(var(--v-theme-surface), 0.6);
-  box-shadow: 
-    0 10px 30px rgba(0, 0, 0, 0.3),
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
     inset 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 
@@ -347,14 +349,14 @@ const openLink = (url) => {
   .social-icon {
     font-size: 1.4rem;
   }
-  
+
   .qr-code {
     padding: 1rem;
   }
-  
+
   .qr-code img {
     width: 150px;
     height: 150px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/vite.config.js b/vite.config.js
index 4e955f5..d33a298 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -26,5 +26,12 @@ export default defineConfig({
         implementation: 'sass-embedded'
       }
     }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/[name]-[hash][extname]'
+      }
+    }
   }
 })