feat: update SocialLinks styling and optimize Vite config

src/components/SocialLinks.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { ref, computed } from "vue"
+import { ref, computed } from "vue";
-import { useMouseInElement } from "@vueuse/core"
+import { useMouseInElement } from "@vueuse/core";
-import { useTheme } from "vuetify"
+import { useTheme } from "vuetify";
 
-const theme = useTheme()
+const theme = useTheme();
-const cardRef = ref(null)
+const cardRef = ref(null);
-const { elementX, elementY } = useMouseInElement(cardRef)
+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",
+        qrCode: new URL("./assets/wechat-qr.png", import.meta.url).href,
-        showQr: false
+        showQr: false,
-      }
+      },
     ],
-    validator: platforms => 
+    validator: (platforms) =>
       Array.isArray(platforms) &&
-      platforms.every(p => 
+      platforms.every(
-        typeof p === 'object' && 
+        (p) =>
+          typeof p === "object" &&
           p !== null &&
           p.name &&
-        typeof p.name === 'string'
+          typeof p.name === "string"
-      )
+      ),
-  }
+  },
-})
+});
 
 // 微信二维码显示状态管理
-const qrStates = ref({})
+const qrStates = ref({});
 const toggleQrCode = (platform) => {
   if (platform.qrCode) {
-    qrStates.value[platform.name] = !qrStates.value[platform.name]
+    qrStates.value[platform.name] = !qrStates.value[platform.name];
-    emit('showWechat', 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)
+  props.socialPlatforms.filter((p) => p.qrCode)
-)
+);
 
 const cardTransform = computed(() => {
-  const MAX_TILT = 8
+  const MAX_TILT = 8;
-  const x = (elementX.value - (cardRef.value?.offsetWidth / 2 || 0)) / 20
+  const x = (elementX.value - (cardRef.value?.offsetWidth / 2 || 0)) / 20;
-  const y = ((cardRef.value?.offsetHeight / 2 || 0) - elementY.value) / 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
+  if (!url) return;
-  window.open(url, "_blank", "noopener,noreferrer")
+  window.open(url, "_blank", "noopener,noreferrer");
-}
+};
 </script>
 
 <template>
@@ -114,9 +115,10 @@ const openLink = (url) => {
         class="qr-code"
       >
         <img
+          v-if="qrStates[platform.name]"
           :src="platform.qrCode"
+          loading="lazy"
           :alt="`${platform.name}二维码`"
-          @click.stop
         />
         <button
           class="qr-close"
@@ -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: 
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
-    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: 
+  transition: background 0.3s ease, box-shadow 0.3s ease;
-    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: 
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
-    0 10px 30px rgba(0, 0, 0, 0.3),
     inset 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 

vite.config.js

@@ -26,5 +26,12 @@ export default defineConfig({
         implementation: 'sass-embedded'
       }
     }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/[name]-[hash][extname]'
+      }
+    }
   }
 })