feat: 初始化项目

- 初始化 Vue 3 + Vite 项目结构
- 添加核心组件 (Hero, About, Projects, Friends 等)
- 配置页面路由和基础样式
- 添加服务端 API 接口 (邮件发送, 好友请求)
- 添加项目配置文件 (vercel.json, vite.config.js)

src/App.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="app-shell">
+        <main class="app-body">
+            <router-view />
+        </main>
+        <PageSwitcher />
+        <FooterSection :contact="contact" />
+    </div>
+</template>
+
+<script setup>
+import PageSwitcher from "./components/PageSwitcher.vue";
+import FooterSection from "./components/FooterSection.vue";
+import siteConfig from "./config/siteConfig";
+
+const contact = siteConfig.footer;
+</script>
+
+<style scoped>
+.app-shell {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+.app-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+</style>

src/components/AboutSection.vue

@@ -0,0 +1,67 @@
+<template>
+    <section class="card panel">
+        <h2>个人简介</h2>
+        <p class="muted">关于我 · About Me</p>
+        <div class="about-grid">
+            <article v-for="item in items" :key="item.title" class="about-card">
+                <div class="about-head">
+                    <span class="icon">{{ item.icon }}</span>
+                    <h3>{{ item.title }}</h3>
+                </div>
+                <p class="muted">{{ item.desc }}</p>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ items: Array });
+</script>
+
+<style scoped>
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+h2 {
+    margin: 0 0 4px;
+}
+.muted {
+    margin: 0 0 12px;
+    display: block;
+}
+.about-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(240px, 1fr));
+    gap: 14px;
+}
+@media (max-width: 720px) {
+    .about-grid {
+        grid-template-columns: 1fr;
+    }
+}
+.about-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 12px 14px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.about-card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(124, 193, 255, 0.4);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
+}
+.about-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+.icon {
+    font-size: 20px;
+    line-height: 1;
+}
+</style>

src/components/FooterSection.vue

@@ -0,0 +1,80 @@
+<template>
+    <footer class="card footer">
+        <p class="muted" v-if="showHitokoto && quote">
+            「{{ quote }}」<span v-if="from" class="from">—— {{ from }}</span>
+        </p>
+        <p class="muted beian" v-if="contact.beian">
+            <a :href="contact.beianLink || 'https://beian.miit.gov.cn/'" target="_blank" rel="noreferrer">
+                {{ contact.beian }}
+            </a>
+        </p>
+        <div class="custom-html" v-if="contact.customHtml" v-html="contact.customHtml"></div>
+    </footer>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+const props = defineProps({ contact: Object });
+const quote = ref("");
+const from = ref("");
+const showHitokoto = props.contact?.showHitokoto !== false;
+
+const buildHitokotoUrl = () => {
+    const url = new URL("https://v1.hitokoto.cn/");
+    const type = props.contact?.hitokotoType;
+    if (Array.isArray(type)) {
+        type.filter(Boolean).forEach((t) => url.searchParams.append("c", t));
+    } else if (typeof type === "string") {
+        type.split("&")
+            .map((t) => t.trim())
+            .filter(Boolean)
+            .forEach((t) => url.searchParams.append("c", t));
+    }
+    return url.toString();
+};
+
+const fetchHitokoto = async () => {
+    try {
+        const resp = await fetch(buildHitokotoUrl());
+        const data = await resp.json();
+        quote.value = data.hitokoto || "";
+        from.value = data.from || "";
+    } catch (e) {
+        console.warn("Hitokoto fetch failed", e);
+    }
+};
+
+onMounted(() => {
+    if (showHitokoto) fetchHitokoto();
+});
+</script>
+
+<style scoped>
+.footer {
+    text-align: center;
+    margin-top: 8px;
+}
+.from {
+    margin-left: 6px;
+}
+.beian {
+    font-size: 12px;
+    margin: 6px 0;
+    letter-spacing: 0.2px;
+}
+.beian a {
+    color: inherit;
+    opacity: 0.85;
+    padding: 3px 8px;
+    border-radius: 8px;
+    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+}
+.beian a:hover {
+    color: var(--accent, #7cc1ff);
+    background: rgba(124, 193, 255, 0.1);
+    opacity: 1;
+}
+.custom-html {
+    margin-top: 6px;
+}
+</style>

src/components/FriendsSection.vue

@@ -0,0 +1,311 @@
+<template>
+    <section class="card panel">
+        <h2>友情链接</h2>
+        <p class="muted">欢迎互换友链 · Friends</p>
+        <div class="actions">
+            <button class="primary" @click="openForm = !openForm">{{ openForm ? "收起申请" : "申请友链" }}</button>
+        </div>
+        <form v-if="openForm" class="friend-form" @submit.prevent="submitForm">
+            <label>
+                网站名称 *
+                <input v-model="form.name" required placeholder="Exmaple Site" />
+            </label>
+            <label>
+                网站链接 *
+                <input v-model="form.url" type="url" required placeholder="https://example.com" />
+            </label>
+            <label>
+                网站描述
+                <input v-model="form.desc" placeholder="可选" />
+            </label>
+            <label>
+                联系邮箱 *
+                <input v-model="form.email" type="email" required placeholder="you@example.com" />
+            </label>
+            <label>
+                头像链接
+                <input v-model="form.avatar" type="url" placeholder="可选，展示头像" />
+            </label>
+            <div class="form-actions">
+                <button type="submit" class="primary" :disabled="loading">
+                    {{ loading ? "提交中..." : "提交申请" }}
+                </button>
+                <span class="muted" v-if="message">{{ message }}</span>
+            </div>
+        </form>
+        <div class="card-grid">
+            <article v-for="f in displayedFriends" :key="f.url" class="info-card">
+                <div class="card-head">
+                    <div class="title-wrap">
+                        <img v-if="f.avatar" class="avatar" :src="f.avatar" :alt="f.name" loading="lazy" />
+                        <h3>{{ f.name }}</h3>
+                    </div>
+                    <span class="pill tertiary">友链</span>
+                </div>
+                <p class="muted">{{ f.desc || "一个有趣的站点" }}</p>
+                <a :href="f.url" target="_blank" rel="noreferrer" class="link-btn">访问 →</a>
+            </article>
+        </div>
+    </section>
+    <Teleport to="body">
+        <div v-if="showDialog" class="dialog-backdrop" @click.self="closeDialog">
+            <div class="dialog-card">
+                <h3>{{ dialogTitle }}</h3>
+                <p class="muted">{{ dialogText }}</p>
+                <div class="dialog-actions">
+                    <button class="primary" @click="closeDialog">好的</button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+const props = defineProps({ friends: { type: Array, default: () => [] } });
+const openForm = ref(false);
+const loading = ref(false);
+const message = ref("");
+const showDialog = ref(false);
+const dialogTitle = ref("");
+const dialogText = ref("");
+const form = reactive({
+    name: "",
+    url: "",
+    desc: "",
+    email: "",
+    avatar: "",
+});
+const displayedFriends = ref([]);
+
+const shuffle = (list) => {
+    const arr = [...list];
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+};
+
+watch(
+    () => props.friends,
+    (val) => {
+        displayedFriends.value = shuffle(val || []);
+    },
+    { immediate: true }
+);
+
+const submitForm = async () => {
+    loading.value = true;
+    message.value = "";
+    try {
+        const resp = await fetch("/api/send-mail", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                name: form.name,
+                url: form.url,
+                desc: form.desc,
+                email: form.email,
+                avatar: form.avatar,
+            }),
+        });
+        if (!resp.ok) throw new Error("send failed");
+        Object.keys(form).forEach((k) => (form[k] = ""));
+        message.value = "提交成功，已发送申请邮件";
+        openForm.value = false;
+        dialogTitle.value = "提交成功";
+        dialogText.value = "已发送申请邮件，感谢你的提交，将会尽快审核并在通过后通过邮件联系。";
+        showDialog.value = true;
+    } catch (e) {
+        message.value = "提交失败，请稍后重试";
+        dialogTitle.value = "提交失败";
+        dialogText.value = "邮件发送失败，请稍后重试或检查网络连接。";
+        showDialog.value = true;
+        console.error(e);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const closeDialog = () => {
+    showDialog.value = false;
+};
+</script>
+
+<style scoped>
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+h2 {
+    margin: 0 0 4px;
+}
+.muted {
+    margin: 0 0 12px;
+    display: block;
+}
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+}
+.primary {
+    padding: 8px 12px;
+    border-radius: 10px;
+    border: 1px solid rgba(124, 193, 255, 0.5);
+    background: rgba(124, 193, 255, 0.12);
+    color: #e8eefc;
+    cursor: pointer;
+}
+.tip {
+    font-size: 12px;
+}
+.friend-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 10px;
+    margin-bottom: 12px;
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(124, 193, 255, 0.06));
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
+}
+.friend-form label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 14px;
+    color: #e8eefc;
+    font-weight: 600;
+}
+.friend-form input {
+    padding: 8px 10px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    background: rgba(255, 255, 255, 0.06);
+    color: inherit;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+.friend-form input::placeholder {
+    color: rgba(232, 238, 252, 0.7);
+}
+.friend-form input:focus {
+    outline: none;
+    border-color: rgba(124, 193, 255, 0.8);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 0 2px rgba(124, 193, 255, 0.25);
+}
+.form-actions {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: flex-end;
+}
+.form-actions .primary {
+    min-width: 120px;
+}
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(320px, 1fr));
+    gap: 16px;
+    max-width: 1100px;
+    width: 100%;
+    margin: 0 auto;
+}
+@media (max-width: 720px) {
+    .card-grid {
+        grid-template-columns: 1fr;
+    }
+}
+.info-card {
+    background: linear-gradient(135deg, rgba(244, 151, 218, 0.12), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 14px 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.info-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(244, 151, 218, 0.55);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+}
+.card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+.title-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+.title-wrap h3 {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.pill {
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(244, 151, 218, 0.16);
+    color: #f497da;
+    font-size: 12px;
+}
+.pill.tertiary {
+    background: rgba(155, 140, 252, 0.14);
+    color: #9b8cfc;
+}
+.link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+    color: #f497da;
+    font-weight: 600;
+}
+.avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+}
+.dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+}
+.dialog-card {
+    min-width: 280px;
+    max-width: 420px;
+    background: linear-gradient(135deg, rgba(244, 151, 218, 0.12), rgba(255, 255, 255, 0.05));
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 14px;
+    padding: 16px 18px;
+    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
+}
+.dialog-card h3 {
+    margin: 0 0 8px;
+}
+.dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+}
+</style>

src/components/GithubSection.vue

@@ -0,0 +1,132 @@
+<template>
+    <section class="card">
+        <h2>GitHub</h2>
+        <div class="lang-wrap">
+            <h3>常用语言</h3>
+            <p class="muted">我常用的语言 · Languages</p>
+            <div class="lang-chart">
+                <ul class="list lang-list">
+                    <li v-for="lang in topLanguages" :key="lang.name" class="lang-row">
+                        <div class="lang-label">
+                            <span class="dot" :style="{ background: colorFor(lang.name) }"></span>
+                            <span class="lang-name">{{ lang.name }}</span>
+                            <span class="lang-percent">{{ lang.percent }}%</span>
+                        </div>
+                        <div class="lang-bar">
+                            <span class="lang-bar-fill" :style="barStyle(lang)"></span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="heatmap">
+            <h3>提交热力图</h3>
+            <p class="muted">我的提交热力图 · Acitivity Heatmap</p>
+            <img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
+        </div>
+    </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({ github: Object });
+const github = props.github;
+
+const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
+
+const topLanguages = computed(() => (Array.isArray(github.languages) ? github.languages.slice(0, 5) : []));
+
+const colorFor = (name) => {
+    const idx = github.languages.findIndex((l) => l.name === name);
+    return palette[(idx >= 0 ? idx : 0) % palette.length];
+};
+const barStyle = (lang) => ({
+    width: `${Math.max(8, lang.percent)}%`,
+    background: colorFor(lang.name),
+});
+</script>
+
+<style scoped>
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+h2 {
+    margin: 0 0 4px;
+}
+h3 {
+    margin: 0 0 4px;
+}
+.muted {
+    margin: 0 0 12px;
+    display: block;
+}
+.lang-wrap {
+    margin-top: 12px;
+}
+.lang-chart {
+    display: block;
+}
+.lang-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.lang-row {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    padding: 8px 10px;
+}
+.lang-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+}
+.lang-name {
+    color: #e8eefc;
+}
+.lang-percent {
+    color: #a8b3cf;
+    font-size: 0.9rem;
+}
+.lang-bar {
+    margin-top: 6px;
+    height: 8px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+}
+.lang-bar-fill {
+    display: block;
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.3s ease;
+}
+.dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 6px;
+}
+.heatmap {
+    margin-top: 12px;
+}
+.heatmap img {
+    width: 100%;
+    display: block;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}
+@media (max-width: 640px) {
+    .lang-chart {
+        grid-template-columns: 1fr;
+    }
+    .pie {
+        margin: 0 auto;
+    }
+}
+</style>

src/components/HeroSection.vue

@@ -0,0 +1,30 @@
+<template>
+    <section class="card hero">
+        <img class="avatar" :src="profile.avatar" alt="avatar" />
+        <div>
+            <h1>{{ profile.name }}</h1>
+            <p class="muted">{{ profile.title }}</p>
+            <p>{{ profile.bio }}</p>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ profile: Object });
+</script>
+
+<style scoped>
+.hero {
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    gap: 16px;
+    align-items: center;
+}
+.avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid rgba(255, 255, 255, 0.18);
+}
+</style>

src/components/PageSwitcher.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="pager">
+        <button :disabled="currentIndex <= 0" @click="goPrev">上一页</button>
+        <div class="dots">
+            <button
+                v-for="r in ordered"
+                :key="r.name"
+                :class="{ active: r.name === route.name }"
+                @click="router.push({ name: r.name })"
+            >
+                {{ r.meta.label || r.name }}
+            </button>
+        </div>
+        <button :disabled="currentIndex >= ordered.length - 1" @click="goNext">下一页</button>
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const ordered = computed(() =>
+    router
+        .getRoutes()
+        .filter((r) => typeof r.meta?.order === "number")
+        .sort((a, b) => a.meta.order - b.meta.order)
+);
+
+const currentIndex = computed(() => ordered.value.findIndex((r) => r.name === route.name));
+
+const goPrev = () => {
+    if (currentIndex.value > 0) router.push({ name: ordered.value[currentIndex.value - 1].name });
+};
+const goNext = () => {
+    if (currentIndex.value < ordered.value.length - 1)
+        router.push({ name: ordered.value[currentIndex.value + 1].name });
+};
+</script>
+
+<style scoped>
+.pager {
+    margin: 16px auto 24px;
+    max-width: 960px;
+    width: 100%;
+    padding: 12px 16px;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 12px;
+    align-items: center;
+}
+button {
+    background: rgba(255, 255, 255, 0.08);
+    color: inherit;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+}
+button:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+.dots {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.dots button {
+    padding: 8px 10px;
+}
+.dots .active {
+    border-color: var(--accent, #7cc1ff);
+    color: var(--accent, #7cc1ff);
+}
+@media (max-width: 640px) {
+    .pager {
+        grid-template-columns: 1fr;
+    }
+    .dots {
+        justify-content: flex-start;
+    }
+}
+</style>

src/components/ProjectsSection.vue

@@ -0,0 +1,86 @@
+<template>
+    <section class="card panel">
+        <h2>项目作品</h2>
+        <p class="muted">一些正在维护或已发布的项目 · Projects</p>
+        <div class="card-grid">
+            <article v-for="p in projects" :key="p.url" class="info-card">
+                <div class="card-head">
+                    <h3>{{ p.name }}</h3>
+                    <span class="pill secondary">项目</span>
+                </div>
+                <p class="muted">{{ p.desc }}</p>
+                <a :href="p.url" target="_blank" rel="noreferrer" class="link-btn">查看仓库 →</a>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ projects: Array });
+</script>
+
+<style scoped>
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+h2 {
+    margin: 0 0 4px;
+}
+.muted {
+    margin: 0 0 12px;
+    display: block;
+}
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(320px, 1fr));
+    gap: 16px;
+    max-width: 1100px;
+    width: 100%;
+    margin: 0 auto;
+}
+@media (max-width: 720px) {
+    .card-grid {
+        grid-template-columns: 1fr;
+    }
+}
+.info-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 14px 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.info-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(255, 209, 102, 0.5);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+}
+.card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+}
+.pill {
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(255, 209, 102, 0.16);
+    color: #ffd166;
+    font-size: 12px;
+}
+.pill.secondary {
+    background: rgba(124, 193, 255, 0.14);
+    color: #7cc1ff;
+}
+.link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+    color: #ffd166;
+    font-weight: 600;
+}
+</style>

src/components/SitesSection.vue

@@ -0,0 +1,97 @@
+<template>
+    <section class="card panel">
+        <h2>我的网站</h2>
+        <p class="muted">正在运行的站点 · Websites</p>
+        <div class="card-grid">
+            <article v-for="site in sites" :key="site.url" class="info-card">
+                <div class="card-head">
+                    <div class="title-wrap">
+                        <h3>{{ site.name }}</h3>
+                    </div>
+                    <span class="pill">在线</span>
+                </div>
+                <p class="muted">{{ site.desc || "点击访问了解更多" }}</p>
+                <a :href="site.url" target="_blank" rel="noreferrer" class="link-btn">查看 →</a>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ sites: Array });
+</script>
+
+<style scoped>
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+h2 {
+    margin: 0 0 4px;
+}
+.muted {
+    margin: 0 0 12px;
+    display: block;
+}
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(320px, 1fr));
+    gap: 16px;
+    max-width: 1100px;
+    width: 100%;
+    margin: 0 auto;
+}
+@media (max-width: 720px) {
+    .card-grid {
+        grid-template-columns: 1fr;
+    }
+}
+.info-card {
+    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 14px 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.info-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(124, 193, 255, 0.4);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+}
+.card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+.title-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+.title-wrap h3 {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.pill {
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(124, 193, 255, 0.12);
+    color: #7cc1ff;
+    font-size: 12px;
+}
+.link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+    color: #7cc1ff;
+    font-weight: 600;
+}
+</style>

src/components/SkillsSection.vue

@@ -0,0 +1,81 @@
+<template>
+    <section class="card panel">
+        <div class="head">
+            <h2>技能专长</h2>
+            <p class="muted">我常用的工具与技术 · Skills & Technologies</p>
+        </div>
+        <div class="grid">
+            <article v-for="group in skills" :key="group.title" class="skill-card">
+                <header>
+                    <h3>{{ group.title }}</h3>
+                </header>
+                <div class="tags">
+                    <span v-for="item in group.items" :key="item" class="tag">
+                        <img :src="iconSrc(item)" :alt="item" :title="item" loading="lazy" />
+                    </span>
+                </div>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ skills: { type: Array, default: () => [] } });
+const iconSrc = (id) => `https://skillicons.dev/icons?i=${encodeURIComponent(id)}&theme=dark`;
+</script>
+
+<style scoped>
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.head h2 {
+    margin: 0 0 4px;
+}
+.head p {
+    margin: 0 0 12px;
+}
+.grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(260px, 1fr));
+    gap: 12px;
+}
+@media (max-width: 640px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+.skill-card {
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 12px 14px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.skill-card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(124, 193, 255, 0.4);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
+}
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+}
+.tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px;
+    border-radius: 12px;
+    background: rgba(124, 193, 255, 0.14);
+    border: 1px solid rgba(124, 193, 255, 0.18);
+}
+.tag img {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+}
+</style>

src/components/SocialLinks.vue

@@ -0,0 +1,96 @@
+<template>
+    <section class="card panel">
+        <h2>社交链接</h2>
+        <p class="muted">社交账号 · Links</p>
+        <div class="chips">
+            <a v-for="link in links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer">
+                <span v-if="iconFor(link)" class="icon">
+                    <i v-if="iconFor(link).fa" :class="iconFor(link).fa"></i>
+                    <img v-else :src="iconFor(link).src" :alt="link.name" loading="lazy" />
+                </span>
+                <span>{{ link.name }}</span>
+            </a>
+        </div>
+    </section>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+const props = defineProps({ links: Array });
+
+const iconMap = {
+    bilibili: "fa-brands fa-bilibili",
+    github: "fa-brands fa-github",
+    blog: "fa-solid fa-rss",
+    email: "fa-solid fa-envelope",
+    mail: "fa-solid fa-envelope",
+    telegram: "fa-brands fa-telegram",
+    twitter: "fa-brands fa-x-twitter",
+    x: "fa-brands fa-x-twitter",
+    linkedin: "fa-brands fa-linkedin",
+    youtube: "fa-brands fa-youtube",
+    facebook: "fa-brands fa-facebook",
+    instagram: "fa-brands fa-instagram",
+    reddit: "fa-brands fa-reddit",
+    discord: "fa-brands fa-discord",
+    weibo: "fa-brands fa-weibo",
+    zhihu: "fa-brands fa-zhihu",
+    wechat: "fa-brands fa-weixin",
+    weixin: "fa-brands fa-weixin",
+    qq: "fa-brands fa-qq",
+};
+
+const iconFor = (link) => {
+    const key = (link.name || "").toLowerCase();
+    if (iconMap[key]) return { fa: iconMap[key] };
+    if (link.icon) return { src: link.icon };
+    return null;
+};
+
+onMounted(() => {
+    const id = "fa-cdn";
+    if (document.getElementById(id)) return;
+    const link = document.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
+    link.crossOrigin = "anonymous";
+    link.referrerPolicy = "no-referrer";
+    document.head.appendChild(link);
+});
+</script>
+
+<style scoped>
+h2 {
+    margin: 0 0 4px;
+}
+.muted {
+    margin: 0 0 12px;
+    display: block;
+}
+.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+a {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+}
+.icon {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    align-items: center;
+    justify-content: center;
+}
+.icon i,
+.icon img {
+    width: 18px;
+    height: 18px;
+}
+</style>

src/config/siteConfig.ts

@@ -0,0 +1,144 @@
+interface SiteConfig {
+    profile: {
+        name: string;
+        title: string;
+        avatar: string;
+        bio: string;
+    };
+    socialLinks: Array<{
+        name: string;
+        url: string;
+    }>;
+    github: {
+        username: string;
+    };
+    about: Array<{
+        title: string;
+        desc: string;
+        icon: string;
+    }>;
+    siteMeta: {
+        title: string;
+        icon: string;
+    };
+    skills: Array<{
+        title: string;
+        items: string[];
+    }>;
+    sites: Array<{
+        name: string;
+        desc: string;
+        url: string;
+    }>;
+    projects: Array<{
+        name: string;
+        url: string;
+        desc: string;
+    }>;
+    friends: Array<{
+        name: string;
+        desc: string;
+        url: string;
+        avatar: string;
+    }>;
+    footer: {
+        beian: string;
+        beianLink: string;
+        showHitokoto: boolean;
+        hitokotoType: string;
+        customHtml: string;
+    };
+}
+
+const siteConfig: SiteConfig = {
+    profile: {
+        name: "RhenCloud",
+        title: "I'm RhenCloud.",
+        avatar: "avatar.webp", // public/avatar.webp
+        bio: "趁世界还未重启之前 约一次爱恋",
+    },
+
+    socialLinks: [
+        { name: "GitHub", url: "https://github.com/RhenCloud" },
+        { name: "Email", url: "mailto:i@rhen.cloud" },
+        { name: "Telegram", url: "https://t.me/RhenCloud" },
+        { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
+        { name: "Blog", url: "https://blog.rhen.cloud" },
+    ],
+
+    github: {
+        username: "RhenCloud",
+    },
+
+    about: [
+        { title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
+        { title: "Developer", desc: "专注后端 / 云原生，热爱自动化与高可用。", icon: "🛠️" },
+        { title: "Anime Fan", desc: "二次元爱好者，享受故事与想象力。", icon: "🎬" },
+        { title: "Just For Fun", desc: "我喜欢尝试新鲜事物，折腾小众技术", icon: "🎮" },
+    ],
+
+    siteMeta: {
+        title: "RhenCloud",
+        icon: "favicon.ico", // public/favicon.ico
+    },
+
+    skills: [
+        { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
+        { title: "后端 / 云", items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"] },
+        { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
+        { title: "操作系统", items: ["arch", "linux", "windows"] },
+    ],
+
+    sites: [
+        {
+            name: "个人主页",
+            desc: "个人主页",
+            url: "https://rhen.cloud",
+        },
+        {
+            name: "我的博客",
+            desc: "分享与记录",
+            url: "https://blog.rhen.cloud",
+        },
+        {
+            name: "来视奸我",
+            desc: "使用Sleepy项目搭建的视奸网站",
+            url: "https://sleepy.rhen.cloud",
+        },
+        {
+            name: "网站监控",
+            desc: "网站运行状态监控",
+            url: "https://status.rhen.cloud",
+        },
+    ],
+
+    projects: [
+        { name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
+        { name: "ILP", url: "https://github.com/RhenCloud/ILP", desc: "跨平台、多网站、模块化的小说下载器" },
+        { name: "ILP-C++", url: "https://github.com/RhenCloud/ILP-Cpp", desc: "跨平台、多网站、模块化的小说下载器" },
+    ],
+    friends: [
+        {
+            name: "wuxian",
+            desc: "wuxian's web",
+            url: "https://www.alxian.cn",
+            avatar: "https://www.alxian.cn/_next/image?url=%2Fimages%2Favatar.jpg&w=256&q=75",
+        },
+        {
+            name: "鈴奈咲桜のBlog",
+            desc: "一个普普通通的Blog",
+            url: "https://blog.sakura.ink",
+            avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
+        },
+    ],
+
+    footer: {
+        beian: "津ICP备2025039003号-1",
+        beianLink: "https://beian.miit.gov.cn/",
+        showHitokoto: true,
+        hitokotoType: "a&b&c&d&j",
+        customHtml: '<span style="opacity:.8">© 2025 <a href="https://rhen.cloud">RhenCloud</a></span>',
+    },
+};
+
+export default siteConfig;

src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import "./styles.css";
+
+createApp(App).use(router).mount("#app");

src/router/index.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
+import Home from "../views/Home.vue";
+import About from "../views/About.vue";
+import Sites from "../views/Sites.vue";
+import Projects from "../views/Projects.vue";
+import Friends from "../views/Friends.vue";
+
+const routes: RouteRecordRaw[] = [
+    { path: "/", name: "Home", component: Home, meta: { order: 0, label: "首页" } },
+    { path: "/about", name: "About", component: About, meta: { order: 1, label: "关于" } },
+    { path: "/sites", name: "Sites", component: Sites, meta: { order: 2, label: "网站" } },
+    { path: "/projects", name: "Projects", component: Projects, meta: { order: 3, label: "项目" } },
+    { path: "/friends", name: "Friends", component: Friends, meta: { order: 4, label: "友链" } },
+];
+
+export default createRouter({
+    history: createWebHistory(),
+    routes,
+});

src/styles.css

@@ -0,0 +1,92 @@
+:root {
+    color-scheme: light dark;
+    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: #0f1629;
+    color: #e8eefc;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
+}
+
+a {
+    color: #7cc1ff;
+    text-decoration: none;
+}
+
+.page {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 32px 16px 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 18px 20px;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+}
+
+.hero {
+    display: grid;
+    grid-template-columns: 96px 1fr;
+    gap: 16px;
+    align-items: center;
+}
+
+.avatar {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+h1,
+h2,
+h3 {
+    margin: 0 0 8px 0;
+}
+
+p {
+    margin: 6px 0;
+}
+
+.muted {
+    color: #a8b3cf;
+    font-size: 0.95rem;
+}
+
+.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.chips a {
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.list li {
+    margin-bottom: 8px;
+}
+
+.footer {
+    text-align: center;
+    margin-top: 8px;
+}

src/views/About.vue

@@ -0,0 +1,65 @@
+<template>
+    <main class="page">
+        <HeroSection :profile="profile" />
+        <SkillsSection :skills="skills" />
+        <GithubSection :github="github" />
+    </main>
+</template>
+
+<script setup>
+import { onMounted, reactive } from "vue";
+import HeroSection from "../components/HeroSection.vue";
+import SkillsSection from "../components/SkillsSection.vue";
+import GithubSection from "../components/GithubSection.vue";
+import siteConfig from "../config/siteConfig";
+
+const profile = siteConfig.profile;
+const siteMeta = siteConfig.siteMeta;
+const skills = siteConfig.skills;
+
+const github = reactive({
+    ...siteConfig.github,
+    heatmapUrl: `https://ghchart.rshah.org/${siteConfig.github.username}`,
+});
+
+// 修改此处：使用 VITE_ 前缀
+const githubToken = import.meta.env.VITE_GITHUB_TOKEN ?? "";
+
+console.log(githubToken);
+
+onMounted(() => {
+    document.title = siteMeta.title;
+    const link = document.querySelector("link[rel~='icon']") || document.createElement("link");
+    link.rel = "icon";
+    link.href = siteMeta.icon;
+    document.head.appendChild(link);
+    fetchGithubMeta();
+});
+
+async function fetchGithubMeta() {
+    try {
+        const headers = githubToken ? { Authorization: `Bearer ${githubToken}` } : {};
+        const resp = await fetch(`https://api.github.com/users/${github.username}/repos?per_page=100&sort=updated`, {
+            headers,
+        });
+        const repos = await resp.json();
+        if (!Array.isArray(repos)) return;
+        const counts = repos.reduce((acc, repo) => {
+            if (!repo.language) return acc;
+            acc[repo.language] = (acc[repo.language] || 0) + 1;
+            return acc;
+        }, {});
+        const total = Object.values(counts).reduce((a, b) => a + b, 0) || 1;
+        const parsed = Object.entries(counts)
+            .map(([name, count]) => ({ name, count }))
+            .sort((a, b) => b.count - a.count)
+            .slice(0, 4);
+        github.languages = parsed.map((item) => ({
+            name: item.name,
+            percent: Math.round((item.count / total) * 100),
+        }));
+    } catch (error) {
+        console.error("Failed to fetch GitHub metadata:", error);
+    }
+}
+</script>

src/views/Friends.vue

@@ -0,0 +1,12 @@
+<template>
+    <main class="page">
+        <FriendsSection :friends="friends" />
+    </main>
+</template>
+
+<script setup>
+import FriendsSection from "../components/FriendsSection.vue";
+import siteConfig from "../config/siteConfig";
+
+const friends = siteConfig.friends;
+</script>

src/views/Home.vue

@@ -0,0 +1,36 @@
+<template>
+    <main class="page">
+        <HeroSection :profile="profile" />
+        <SocialLinks :links="socialLinks" />
+        <AboutSection :items="about" />
+    </main>
+</template>
+
+<script setup>
+import { onMounted, reactive } from "vue";
+import HeroSection from "../components/HeroSection.vue";
+import SocialLinks from "../components/SocialLinks.vue";
+import AboutSection from "../components/AboutSection.vue";
+import siteConfig from "../config/siteConfig";
+
+const profile = siteConfig.profile;
+const socialLinks = siteConfig.socialLinks;
+const siteMeta = siteConfig.siteMeta;
+const about = siteConfig.about;
+
+onMounted(() => {
+    document.title = siteMeta.title;
+    const link = document.querySelector("link[rel~='icon']") || document.createElement("link");
+    link.rel = "icon";
+    link.href = siteMeta.icon;
+    document.head.appendChild(link);
+});
+</script>
+
+<style scoped>
+.page {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+</style>

src/views/Projects.vue

@@ -0,0 +1,12 @@
+<template>
+    <main class="page">
+        <ProjectsSection :projects="projects" />
+    </main>
+</template>
+
+<script setup>
+import ProjectsSection from "../components/ProjectsSection.vue";
+import siteConfig from "../config/siteConfig";
+
+const projects = siteConfig.projects;
+</script>

src/views/Sites.vue

@@ -0,0 +1,12 @@
+<template>
+    <main class="page">
+        <SitesSection :sites="sites" />
+    </main>
+</template>
+
+<script setup>
+import SitesSection from "../components/SitesSection.vue";
+import siteConfig from "../config/siteConfig";
+
+const sites = siteConfig.sites;
+</script>

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+    import type { DefineComponent } from "vue";
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}