cattom/PersonalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update SocialLinks component styling and functionality

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 01:35:51 +08:00
parent f752449dc4
commit 65f44b146b
1 changed files with 79 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/components/SocialLinks.vue
View File

@ -1,114 +1,108 @@
<script setup>
import { computed } from 'vue'
import { useMouseInElement } from '@vueuse/core'
import { useTheme } from 'vuetify'
import { computed } from "vue";
import { useMouseInElement } from "@vueuse/core";
import { useTheme } from "vuetify";
// 主题控制
const theme = useTheme()
const theme = useTheme();
// 鼠标悬停效果
const cardRef = ref(null)
const { elementX, elementY } = useMouseInElement(cardRef)
const cardRef = ref(null);
const { elementX, elementY } = useMouseInElement(cardRef);
// 社交平台数据配置
const socialPlatforms = [
{
name: 'GitHub',
icon: 'ri-github-fill',
url: 'https://github.com/cattom',
color: '#181717',
hoverColor: '#6e5494',
ariaLabel: '访问我的GitHub主页'
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: "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: "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: "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: '/assets/qr-wechat.png',
showQr: ref(false)
}
]
name: "WeChat",
icon: "ri-wechat-fill",
color: "#07C160",
hoverColor: "#2DC100",
ariaLabel: "扫描我的微信二维码",
qrCode: "/assets/qr-wechat.png",
showQr: ref(false),
},
];
// 计算卡片倾斜效果
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: `
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)'
}
})
transition: "transform 0.5s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
};
});
// 处理二维码显示
const toggleQrCode = (platform) => {
if (!platform.qrCode) return
platform.showQr.value = !platform.showQr.value
}
const props = defineProps({
socialPlatforms: {
type: Array,
required: true
}
})
const platformsWithQr = computed(() =>
props.socialPlatforms.filter(p => p.qrCode)
)
// 打开外部链接
const openLink = (url) => {
if (!url) return
window.open(url, '_blank', 'noopener,noreferrer')
}
if (!url) return;
window.open(url, "_blank", "noopener,noreferrer");
};
</script>
<template>
<div
ref="cardRef"
class="social-links-card"
:style="cardTransform"
>
<div ref="cardRef" class="social-links-card" :style="cardTransform">
<!-- 微信二维码弹窗 -->
<Transition name="fade">
<TransitionGroup name="fade" tag="div" class="qr-container">
<div
v-for="platform in socialPlatforms.filter(p => p.qrCode)"
v-for="platform in platformsWithQr"
v-show="platform.showQr?.value"
:key="`qr-${platform.name}`"
class="qr-overlay"
@click.self="platform.showQr.value = false"
class="qr-code"
>
<div class="qr-container">
<img
:src="platform.qrCode"
:alt="`${platform.name}二维码`"
class="qr-image"
>
<p class="qr-hint">扫码添加{{ platform.name }}</p>
</div>
<img :src="platform.qrCode" :alt="`${platform.name}二维码`" />
</div>
</Transition>
</TransitionGroup>
<!-- 社交链接主体 -->
<div class="social-grid">
@ -117,7 +111,9 @@ const openLink = (url) => {
:key="index"
class="social-item"
:style="{ '--hover-color': platform.hoverColor }"
@click="platform.qrCode ? toggleQrCode(platform) : openLink(platform.url)"
@click="
platform.qrCode ? toggleQrCode(platform) : openLink(platform.url)
"
>
<div class="social-icon-wrapper">
<i
@ -142,21 +138,17 @@ 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;
}
/* 暗黑模式适配 */
[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);
}