99 lines
4.4 KiB
Vue
99 lines
4.4 KiB
Vue
<script setup lang="ts">
|
||
import { siteConfig } from '~/config/site'
|
||
|
||
useSeoMeta({
|
||
title: `友链 - ${siteConfig.siteName}`,
|
||
description: '友情链接，欢迎互相访问交流',
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container mx-auto max-w-6xl px-4 py-12">
|
||
<div class="mb-8 text-center anim-fade-in-up">
|
||
<h1 class="mb-4 text-4xl font-bold">友情链接</h1>
|
||
<p class="text-lg text-muted-foreground">这里是我的朋友们，欢迎互相访问交流</p>
|
||
</div>
|
||
|
||
<!-- 申请友链 -->
|
||
<div class="mb-8 anim-fade-in-up anim-delay-1">
|
||
<div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
<h2 class="mb-2 text-xl font-semibold">申请友链</h2>
|
||
<p class="mb-4 text-sm text-muted-foreground">欢迎与我交换友链，请在下方提交你的网站信息</p>
|
||
<div class="mb-4 space-y-2 text-sm text-muted-foreground">
|
||
<p><span class="font-semibold text-foreground">网站名称：</span>{{ siteConfig.siteName }}</p>
|
||
<p><span class="font-semibold text-foreground">网站地址：</span>{{ siteConfig.url }}</p>
|
||
<p><span class="font-semibold text-foreground">网站描述：</span>{{ siteConfig.description }}</p>
|
||
<p><span class="font-semibold text-foreground">网站头像：</span>{{ siteConfig.avatar }}</p>
|
||
</div>
|
||
<div class="rounded-lg p-4 text-sm" style="background: var(--color-bg-hover);">
|
||
<p class="mb-2 font-semibold">申请方式：</p>
|
||
<ol class="list-decimal list-inside space-y-1 text-muted-foreground">
|
||
<li>请先在你的网站添加本站友链</li>
|
||
<li>通过以下任意方式提交你的网站信息（名称、地址、描述、头像）</li>
|
||
<li>审核通过后会添加到友链列表</li>
|
||
</ol>
|
||
<div class="mt-3 flex flex-wrap gap-2">
|
||
<a
|
||
v-for="link in siteConfig.socialLinks"
|
||
:key="link.name"
|
||
:href="link.url"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-pill"
|
||
>
|
||
<img
|
||
:src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
|
||
:alt="link.name"
|
||
class="w-4 h-4"
|
||
/>
|
||
<span>{{ link.name }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 友链列表 -->
|
||
<div class="anim-fade-in-up anim-delay-2">
|
||
<h2 class="mb-6 text-2xl font-bold">友链列表 ({{ siteConfig.friends.length }})</h2>
|
||
<div v-if="siteConfig.friends.length === 0" class="rounded-xl border p-12 text-center text-muted-foreground" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
|
||
暂无友链，欢迎成为第一个！
|
||
</div>
|
||
<div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
<a
|
||
v-for="friend in siteConfig.friends"
|
||
:key="friend.url"
|
||
:href="friend.url"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="block rounded-xl border p-4 transition-all hover:shadow-lg"
|
||
style="border-color: var(--color-border); background-color: var(--color-bg-card);"
|
||
>
|
||
<div class="flex items-start gap-4">
|
||
<div class="shrink-0">
|
||
<img
|
||
v-if="friend.avatar"
|
||
:src="friend.avatar"
|
||
:alt="friend.name"
|
||
style="width:64px;height:64px;border-radius:50%;object-fit:cover;display:block"
|
||
@error="(e) => { e.target.style.display = 'none'; e.target.nextElementSibling.style.display = 'flex' }"
|
||
/>
|
||
<div
|
||
style="width:64px;height:64px;border-radius:50%;background:#e5e7eb;display:none;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#6b7280"
|
||
>
|
||
{{ friend.name.charAt(0) }}
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 overflow-hidden">
|
||
<div class="mb-1 truncate font-semibold">{{ friend.name }}</div>
|
||
<div class="line-clamp-2 text-sm text-muted-foreground">
|
||
{{ friend.description || '暂无描述' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|