chore: 初始化项目仓库

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

pages/friends.vue

@@ -0,0 +1,98 @@
+<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>