PersonalPage/src/components/SocialLinks.vue

<script setup>
import { ref, computed } from "vue";
import { useMouseInElement } from "@vueuse/core";
import { useTheme } from "vuetify";
import WechatModal from "./WechatModal.vue";

const theme = useTheme();
const cardRef = ref(null);
const { elementX, elementY } = useMouseInElement(cardRef);

// 定义props并设置默认值
const props = defineProps({
  socialPlatforms: {
    type: Array,
    required: false,
    default: () => [
      {
        name: "GitHub",
        icon: "ri-github-fill",
        url: "https://github.com/cattom",
        color: "#181717",
        hoverColor: "#6e5494",
        ariaLabel: "访问我的GitHub主页",
      },
      {
        name: "Twitter",
        icon: "ri-twitter-x-fill",
        url: "https://twitter.com/cattom",
        color: "#000000",
        hoverColor: "#1DA1F2",
        ariaLabel: "在Twitter上关注我",
      },
      {
        name: "LinkedIn",
        icon: "ri-linkedin-fill",
        url: "https://linkedin.com/in/cattom",
        color: "#0A66C2",
        hoverColor: "#0077B5",
        ariaLabel: "查看我的LinkedIn资料",
      },
      {
        name: "Email",
        icon: "ri-mail-fill",
        url: "mailto:hi@cattom.me",
        color: "#D44638",
        hoverColor: "#EA4335",
        ariaLabel: "发送电子邮件给我",
      },
      {
        name: "WeChat",
        icon: "ri-wechat-fill",
        color: "#07C160",
        hoverColor: "#2DC100",
        ariaLabel: "扫描我的微信二维码",
        qrCode: new URL("./assets/wechat-qr.png", import.meta.url).href,
      },
    ],
    validator: (platforms) =>
      Array.isArray(platforms) &&
      platforms.every(
        (p) =>
          typeof p === "object" &&
          p !== null &&
          p.name &&
          typeof p.name === "string"
      ),
  },
});

// 微信二维码显示状态管理
const showWechatModal = ref(false);
const currentQrCode = ref("");

const toggleQrCode = (platform) => {
  if (platform.qrCode) {
    currentQrCode.value = platform.qrCode;
    showWechatModal.value = !showWechatModal.value;
  }
};

// 计算属性
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;

  return {
    transform: `
      perspective(1000px)
      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)",
  };
});

const openLink = (url) => {
  if (!url) return;
  window.open(url, "_blank", "noopener,noreferrer");
};
</script>

<template>
  <div ref="cardRef" class="social-links-card" :style="cardTransform">
    <!-- 使用WechatModal组件 -->
    <WechatModal
      v-model="showWechatModal"
      :qr-code="currentQrCode"
      title="微信扫码添加"
      hint="打开微信扫一扫，添加我为好友"
      @closed="currentQrCode = ''"
    />

    <!-- 社交链接主体 -->
    <div class="social-grid">
      <div
        v-for="(platform, index) in props.socialPlatforms"
        :key="index"
        class="social-item"
        :style="{ '--hover-color': platform.hoverColor || platform.color }"
        @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)
        "
      >
        <div class="social-icon-wrapper">
          <i
            :class="platform.icon"
            class="social-icon"
            :style="{ color: platform.color }"
          />
        </div>
        <span class="social-name">{{ platform.name }}</span>
        <div class="hover-light" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.social-links-card {
  position: relative;
  padding: 1.5rem;
  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),
    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;
  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),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1.2rem;
  position: relative;
  z-index: 2;
}

.social-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0.8rem 0;
  border-radius: 0.8rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  outline: none;
}

.social-item:focus-visible {
  box-shadow: 0 0 0 2px var(--hover-color);
}

.social-item:hover {
  transform: translateY(-5px);
}

.social-icon-wrapper {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--v-theme-background), 0.7);
  border-radius: 50%;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.social-icon {
  font-size: 1.6rem;
  transition: all 0.3s ease;
}

.social-item:hover .social-icon {
  color: var(--hover-color);
  transform: scale(1.1);
}

.social-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.social-item:hover .social-name {
  color: var(--hover-color);
}

/* 悬停光效 */
.hover-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    var(--hover-color) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  border-radius: inherit;
}

.social-item:hover .hover-light {
  opacity: 0.15;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .social-grid {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 1rem;
  }

  .social-icon-wrapper {
    width: 3rem;
    height: 3rem;
  }

  .social-icon {
    font-size: 1.4rem;
  }
}
</style>