diff --git a/README.md b/README.md
index 6783822..8eabc54 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Cloud Home
 
-一个基于 Nuxt 3 (Vue 3) 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
+一款基于 Nuxt 4 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
 
 ## 特性
 
@@ -11,10 +11,16 @@
 
 ## 技术栈
 
-- 前端：Nuxt 3（Vue 3）+ HTML + CSS
-- 构建 / 运行：Nuxt 3 + Nitro
+- 前端：Nuxt 4 + Tailwind CSS
+- 构建 / 运行：Nuxt 4 + Nitro
 - 部署：Vercel（Nuxt 构建 + Nitro 函数）
 
+## TODO
+
+- [ ] 增加主题色配置
+- [ ] 增加追番模块
+- [ ] 增加留言板模块
+
 ## 致谢
 
 排名不分先后
diff --git a/src/app.vue b/app/app.vue
similarity index 91%
rename from src/app.vue
rename to app/app.vue
index 669ae64..348dce4 100644
--- a/src/app.vue
+++ b/app/app.vue
@@ -46,18 +46,12 @@ const checkIfMobile = () => {
 onMounted(() => {
     checkIfMobile();
     window.addEventListener("resize", checkIfMobile);
-    // const script = document.createElement("script");
-    // script.src = "/js/netease-mini-player-v2.js";
-    // document.head.appendChild(script);
 });
 
 const getBackgroundImage = () => {
     if (!bg.enable) return undefined;
-
     const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
-
     if (!image) return undefined;
-
     return image.startsWith("http") ? image : `/${image}`;
 };
 
@@ -65,9 +59,7 @@ const backgroundStyle = computed(() => ({ backgroundColor: "#0f1629" }));
 
 const overlayStyle = computed(() => {
     const imageUrl = getBackgroundImage();
-
     if (!bg.enable || !imageUrl) return {};
-
     return {
         backgroundImage: `linear-gradient(${bg.overlay}, ${bg.overlay}), url('${imageUrl}')`,
         backgroundSize: "cover",
diff --git a/app/components/AboutSection.vue b/app/components/AboutSection.vue
new file mode 100644
index 0000000..32f2836
--- /dev/null
+++ b/app/components/AboutSection.vue
@@ -0,0 +1,84 @@
+<template>
+    <section class="card flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1">个人简介</h2>
+        <p class="text-text-muted text-sm m-0 mb-3 block">关于我 · About Me</p>
+
+        <div class="flex flex-wrap justify-center gap-3.5">
+            <article v-if="age"
+                class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/40 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-primary/6">
+                <div class="flex items-center gap-2">
+                    <span class="text-xl leading-none">🎂</span>
+                    <h3 class="m-0 text-sm font-semibold text-white/90">年龄</h3>
+                </div>
+                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+                    {{ age }} 岁
+                </p>
+            </article>
+
+            <article v-if="profile?.gender"
+                class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
+                <div class="flex items-center gap-2">
+                    <span class="text-xl leading-none">⚧️</span>
+                    <h3 class="m-0 text-sm font-semibold text-white/90">性别</h3>
+                </div>
+                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+                    {{ profile.gender }}
+                </p>
+            </article>
+
+            <article v-if="profile?.pronouns"
+                class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
+                <div class="flex items-center gap-2">
+                    <span class="text-xl leading-none">🗣️</span>
+                    <h3 class="m-0 text-sm font-semibold text-white/90">代词</h3>
+                </div>
+                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+                    {{ profile.pronouns }}
+                </p>
+            </article>
+
+            <article v-if="profile?.location"
+                class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
+                <div class="flex items-center gap-2">
+                    <span class="text-xl leading-none">📍</span>
+                    <h3 class="m-0 text-sm font-semibold text-white/90">地区</h3>
+                </div>
+                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+                    {{ profile.location }}
+                </p>
+            </article>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mt-2.5">
+            <article v-for="item in items" :key="item.title"
+                class="bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
+                <div class="flex items-center gap-2 mb-1.5">
+                    <span class="text-2xl leading-none">{{ item.icon }}</span>
+                    <h3 class="m-0 text-base font-semibold">{{ item.title }}</h3>
+                </div>
+                <p class="text-text-muted text-sm m-0">{{ item.desc }}</p>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    items: Array,
+    profile: Object,
+});
+
+const age = computed(() => {
+    if (!props.profile?.birthday) return null;
+    const birthDate = new Date(props.profile.birthday);
+    const today = new Date();
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const m = today.getMonth() - birthDate.getMonth();
+    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+        age--;
+    }
+    return age;
+});
+</script>
diff --git a/src/components/FooterSection.vue b/app/components/FooterSection.vue
similarity index 64%
rename from src/components/FooterSection.vue
rename to app/components/FooterSection.vue
index 0c32047..70cfdd9 100644
--- a/src/components/FooterSection.vue
+++ b/app/components/FooterSection.vue
@@ -1,18 +1,38 @@
 <template>
-    <footer class="card footer">
-        <p class="muted" v-if="showHitokoto && quote">
-            「{{ quote }}」<span v-if="from" class="from">—— {{ from }}</span>
+    <footer class="card text-center mt-auto w-full flex flex-col gap-1">
+        <!-- 一言 -->
+        <p class="text-text-muted text-sm m-0 italic" v-if="showHitokoto && quote">
+            「{{ quote }}」<span v-if="from" class="ml-1.5">—— {{ from }}</span>
         </p>
-        <p class="muted stats" v-if="showStats && !statsError">
-            👁️ {{ visitors }} visitors · 📊 {{ pageviews }} pageviews
+
+        <!-- 访问统计 -->
+        <p class="text-text-muted text-xs m-0" v-if="showStats && !statsError">
+            👁️ {{ visitors }} · 📊 {{ pageviews }}
         </p>
-        <!-- <p class="muted stats" v-if="showStats && statsError">🔒 由于启用了隐私保护拓展，禁用状态统计</p> -->
-        <p class="muted beian" v-if="contact.beian">
-            <a :href="contact.beianLink || 'https://beian.miit.gov.cn/'" target="_blank" rel="noreferrer">
+
+        <!-- 备案信息 -->
+        <p class="text-text-muted text-xs m-0" v-if="contact.beian">
+            <a :href="contact.beianLink || 'https://beian.miit.gov.cn/'" target="_blank" rel="noreferrer"
+                class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100">
                 {{ contact.beian }}
             </a>
         </p>
-        <div class="custom-html" v-if="contact.customHtml" v-html="contact.customHtml"></div>
+
+        <!-- 框架与技术栈信息 -->
+        <p class="text-text-muted text-xs m-0">
+            Powered by
+            <a href="https://nuxt.com" target="_blank" rel="noreferrer"
+                class="text-primary hover:text-accent transition-colors">Nuxt 4</a>
+            ·
+            <a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
+                class="text-primary hover:text-accent transition-colors">Tailwind CSS</a>
+            ·
+            <a href="https://vuejs.org" target="_blank" rel="noreferrer"
+                class="text-primary hover:text-accent transition-colors">Vue 3</a>
+        </p>
+
+        <!-- 自定义 HTML -->
+        <div v-if="contact.customHtml" v-html="contact.customHtml"></div>
     </footer>
 </template>
 
@@ -103,45 +123,3 @@ onMounted(() => {
     if (showStats.value) fetchStats();
 });
 </script>
-
-<style scoped>
-.footer {
-    text-align: center;
-    margin-top: auto;
-    width: 100%;
-}
-
-.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;
-}
-
-.stats {
-    font-size: 12px;
-    margin: 6px 0;
-    letter-spacing: 0.2px;
-}
-</style>
diff --git a/app/components/FriendsSection.vue b/app/components/FriendsSection.vue
new file mode 100644
index 0000000..d59c47a
--- /dev/null
+++ b/app/components/FriendsSection.vue
@@ -0,0 +1,225 @@
+<template>
+    <div class="card panel flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1 gradient-text">友情链接</h2>
+        <p class="text-text-muted text-sm m-0 mb-3 block">欢迎互换友链 · Friends</p>
+        <div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
+            <article v-for="f in displayedFriends" :key="f.url"
+                class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-pink-400/50 w-[290px] h-[145px] flex flex-col">
+                <div class="flex items-center justify-between mb-1.5">
+                    <div class="flex items-center gap-2 min-w-0">
+                        <img v-if="f.avatar" :src="f.avatar" :alt="f.name" loading="lazy"
+                            class="w-12 h-12 rounded-full object-cover border border-white/15" />
+                        <h3 class="m-0 font-semibold text-base whitespace-nowrap overflow-hidden text-ellipsis">
+                            {{ f.name }}
+                        </h3>
+                    </div>
+                    <span class="rounded-full px-2.5 py-1 text-xs bg-purple-400/15 text-purple-300">友链</span>
+                </div>
+
+                <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
+                    {{ f.desc || "一个有趣的站点" }}
+                </p>
+
+                <a :href="f.url" target="_blank" rel="noreferrer"
+                    class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-pink-300 hover:text-pink-400 transition-all duration-200 hover:gap-2">
+                    访问 →
+                </a>
+            </article>
+        </div>
+    </div>
+    <section class="card flex flex-col gap-2.5">
+        <div class="flex justify-center items-center align-center flex-wrap">
+            <button @click="openForm"
+                class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/80 hover:shadow-lg hover:shadow-primary/25">
+                申请友链
+            </button>
+        </div>
+    </section>
+    <Teleport to="body">
+        <div v-if="showDialog" class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
+            @click.self="closeDialog">
+            <div
+                class="min-w-[280px] max-w-[420px] bg-gradient-to-br from-pink-500/12 to-white/8 border border-white/15 rounded-2xl p-4 shadow-xl">
+                <h3 class="m-0 mb-2">{{ dialogTitle }}</h3>
+                <p class="text-text-muted text-sm mb-4">{{ dialogText }}</p>
+                <div class="flex justify-end">
+                    <button @click="closeDialog"
+                        class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary cursor-pointer hover:bg-primary/20 transition-all">
+                        好的
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+
+    <!-- 申请友链模态弹窗 -->
+    <Teleport to="body">
+        <div v-if="showFormModal"
+            class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
+            @click.self="showFormModal = false">
+            <div
+                class="w-[92%] max-w-[540px] bg-gradient-to-br from-white/8 to-primary/6 border border-white/15 rounded-2xl p-6 shadow-xl">
+                <h3 class="m-0 mb-4 text-center">申请友链</h3>
+
+                <div class="mb-4 text-sm text-text-primary">
+                    <div class="mb-2 font-semibold">请在申请前在你站点添加以下信息（示例 JSON）：</div>
+                    <pre
+                        class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto"><code>{{ exampleJson }}</code></pre>
+                </div>
+
+                <form @submit.prevent="submitForm" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
+                        网站名称 *
+                        <input v-model="form.name" required placeholder="网站名称"
+                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+                    </label>
+
+                    <!-- URL 与 Email 同行 -->
+                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+                        网站链接 *
+                        <input v-model="form.url" type="url" required placeholder="https://example.com"
+                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+                    </label>
+                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+                        联系邮箱 *
+                        <input v-model="form.email" type="email" required placeholder="example@example.com"
+                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+                    </label>
+
+                    <!-- 描述 与 头像 同行 -->
+                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+                        网站描述
+                        <input v-model="form.desc" placeholder="可选"
+                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+                    </label>
+                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+                        头像链接
+                        <input v-model="form.avatar" type="url" placeholder="可选，展示头像"
+                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+                    </label>
+
+                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
+                        想说的话
+                        <div class="flex items-center gap-2">
+                            <textarea v-model="form.message" placeholder="可选，最多50字" maxlength="50"
+                                class="flex-1 px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary h-24 resize-none"></textarea>
+                        </div>
+                    </label>
+
+                    <div class="sm:col-span-2 flex items-center justify-center gap-3 mt-2">
+                        <button type="button" @click="showFormModal = false"
+                            class="px-3 py-2 rounded-2xl border border-white/10 bg-white/6">
+                            取消
+                        </button>
+                        <button type="submit" :disabled="loading"
+                            class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary disabled:opacity-50">
+                            {{ loading ? "提交中..." : "提交" }}
+                        </button>
+                    </div>
+                    <div class="sm:col-span-2">
+                        <span class="text-text-muted text-sm">{{ message }}</span>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup>
+import { reactive, ref, watch, computed } from "vue";
+import siteConfig from "../config/siteConfig";
+const props = defineProps({ friends: { type: Array, default: () => [] } });
+const showFormModal = 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: "",
+    message: "",
+});
+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 exampleJson = computed(() => {
+    const name = siteConfig.profile?.name || siteConfig.siteMeta?.title || "";
+    const url = siteConfig.siteMeta?.url || "";
+    const desc = siteConfig.profile?.bio || "";
+    const email = siteConfig.profile.email || "";
+    const avatarRaw = siteConfig.profile?.avatar || "";
+    const avatar = resolveUrl(avatarRaw);
+    return JSON.stringify({ name, url, desc, email, avatar }, null, 2);
+});
+
+const openForm = () => {
+    showFormModal.value = true;
+};
+
+// resolve possible local paths to absolute URLs using site meta URL
+const resolveUrl = (p) => {
+    if (!p) return "";
+    const s = String(p).trim();
+    if (/^https?:\/\//i.test(s) || /^\/\//.test(s)) return s;
+    const base = (siteConfig.siteMeta && siteConfig.siteMeta.url) ? String(siteConfig.siteMeta.url).replace(/\/$/, "") : "";
+    if (!base) return s;
+    if (s.startsWith("/")) return base + s;
+    return base + "/" + s;
+};
+
+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(form),
+        });
+        if (!resp.ok) throw new Error("send failed");
+        form.name = "";
+        form.url = "";
+        form.desc = "";
+        form.email = "";
+        form.avatar = "";
+        form.message = "";
+        message.value = "提交成功，已发送申请邮件";
+        showFormModal.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>
diff --git a/app/components/GithubSection.vue b/app/components/GithubSection.vue
new file mode 100644
index 0000000..9ed8311
--- /dev/null
+++ b/app/components/GithubSection.vue
@@ -0,0 +1,50 @@
+<template>
+    <section class="card flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1">GitHub</h2>
+        <div class="mt-3">
+            <h3 class="m-0 mb-1">提交热力图</h3>
+            <p class="text-text-muted text-sm m-0 mb-3 block">我的提交热力图 · Acitivity Heatmap</p>
+            <img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy"
+                class="rounded-xl border border-white/10 hover:border-primary/30 transition-all duration-200"
+                class="w-full rounded-2xl border border-white/10" />
+        </div>
+        <div class="mt-3">
+            <h3 class="m-0 mb-1">常用语言</h3>
+            <p class="text-text-muted text-sm m-0 mb-3 block">我常用的语言 · Languages</p>
+            <ul class="list-none p-0 m-0 flex flex-col gap-2.5">
+                <li v-for="lang in topLanguages" :key="lang.name"
+                    class="bg-white/5 border border-white/10 rounded-xl p-2.5">
+                    <div class="flex items-center gap-2 font-semibold mb-1.5">
+                        <span class="w-2.5 h-2.5 rounded-full inline-block"
+                            :style="{ background: colorFor(lang.name) }"></span>
+                        <span class="text-text-primary">{{ lang.name }}</span>
+                        <span class="text-text-muted text-sm">{{ lang.percent }}%</span>
+                    </div>
+                    <div class="h-2 rounded-full bg-white/5 overflow-hidden">
+                        <span class="block h-full rounded-full transition-all duration-300"
+                            :style="barStyle(lang)"></span>
+                    </div>
+                </li>
+            </ul>
+        </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>
diff --git a/app/components/HeroSection.vue b/app/components/HeroSection.vue
new file mode 100644
index 0000000..97f5d8e
--- /dev/null
+++ b/app/components/HeroSection.vue
@@ -0,0 +1,20 @@
+<template>
+    <section class="card grid grid-cols-[120px_1fr] gap-4 items-center hover:shadow-lg-dark group">
+        <div class="relative">
+            <div
+                class="absolute inset-0 rounded-full bg-gradient-to-br from-primary/30 to-accent/20 blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100">
+            </div>
+            <img class="relative w-30 h-30 rounded-full object-cover border-2 border-primary/40 shadow-md-dark bg-white transition-transform duration-300 group-hover:scale-105"
+                :src="profile.avatar" alt="avatar" loading="lazy" />
+        </div>
+        <div class="overflow-hidden">
+            <h1 class="text-2xl font-bold">{{ profile.name }}</h1>
+            <p class="text-text-muted text-sm mt-1">{{ profile.title }}</p>
+            <p class="mt-2 line-clamp-2">{{ profile.bio }}</p>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ profile: Object });
+</script>
diff --git a/src/components/MusicPlayer.vue b/app/components/MusicPlayer.vue
similarity index 53%
rename from src/components/MusicPlayer.vue
rename to app/components/MusicPlayer.vue
index 6f1dbfd..90a61c6 100644
--- a/src/components/MusicPlayer.vue
+++ b/app/components/MusicPlayer.vue
@@ -1,18 +1,10 @@
 <template>
-    <div
-        v-if="music.enable && (music.playlistId || music.songId)"
-        class="netease-mini-player"
+    <div v-if="music.enable && (music.playlistId || music.songId)" class="netease-mini-player"
         :data-playlist-id="music.mode === 'floating' ? music.playlistId : undefined"
-        :data-song-id="music.mode === 'embed' ? music.songId : undefined"
-        :data-embed="music.mode === 'embed'"
-        :data-position="music.position"
-        :data-lyric="music.lyric"
-        :data-theme="music.theme"
-        :data-autoplay="music.autoplay"
-        :data-default-minimized="music.defaultMinimized"
-        :data-auto-pause="music.autoPause"
-        :data-api-urls="JSON.stringify(music.apiUrls)"
-    ></div>
+        :data-song-id="music.mode === 'embed' ? music.songId : undefined" :data-embed="music.mode === 'embed'"
+        :data-position="music.position" :data-lyric="music.lyric" :data-theme="music.theme"
+        :data-autoplay="music.autoplay" :data-default-minimized="music.defaultMinimized"
+        :data-auto-pause="music.autoPause" :data-api-urls="JSON.stringify(music.apiUrls)"></div>
 </template>
 
 <script setup lang="ts">
diff --git a/app/components/PageSwitcher.vue b/app/components/PageSwitcher.vue
new file mode 100644
index 0000000..50e3dae
--- /dev/null
+++ b/app/components/PageSwitcher.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="my-4 mx-auto max-w-3xl w-full px-4 py-3 grid grid-cols-[auto_1fr_auto] gap-3 items-center">
+        <button :disabled="currentIndex <= 0" @click="goPrev"
+            class="bg-white/10 text-text-primary border border-white/15 rounded-2xl px-3 py-2 cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed">
+            上一页
+        </button>
+        <div class="flex gap-2 flex-wrap justify-center">
+            <button v-for="item in pages" :key="item.name" :class="{
+                'bg-primary/30 border-primary/60 text-primary shadow-lg shadow-primary/25':
+                    item.name === route.name,
+            }" @click="router.push({ name: item.name })"
+                class="px-2.5 py-2 bg-white/10 text-text-primary border border-white/15 rounded-2xl cursor-pointer transition-all duration-200 hover:bg-white/15 hover:border-primary/40">
+                {{ item.label }}
+            </button>
+        </div>
+        <button :disabled="currentIndex >= pages.length - 1" @click="goNext"
+            class="bg-white/10 text-text-primary border border-white/15 rounded-2xl px-3 py-2 cursor-pointer transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed">
+            下一页
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const pages = [
+    { name: "index", label: "首页" },
+    { name: "about", label: "关于" },
+    { name: "sites", label: "网站" },
+    { name: "projects", label: "项目" },
+    { name: "friends", label: "友链" },
+];
+
+const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));
+
+const goPrev = () => {
+    if (currentIndex.value > 0) {
+        router.push({ name: pages[currentIndex.value - 1].name });
+    }
+};
+
+const goNext = () => {
+    if (currentIndex.value < pages.length - 1) {
+        router.push({ name: pages[currentIndex.value + 1].name });
+    }
+};
+</script>
diff --git a/app/components/ProjectsSection.vue b/app/components/ProjectsSection.vue
new file mode 100644
index 0000000..7f46528
--- /dev/null
+++ b/app/components/ProjectsSection.vue
@@ -0,0 +1,35 @@
+<template>
+    <section class="card panel flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
+
+        <p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
+
+        <div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
+            <article v-for="p in projects" :key="p.url"
+                class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-yellow-400/50 w-[290px] h-[145px] flex flex-col">
+                <div class="flex items-center justify-between mb-1.5">
+                    <h3 class="font-medium truncate">
+                        {{ p.name }}
+                    </h3>
+
+                    <span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-sky-300"> 项目 </span>
+                </div>
+
+                <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
+                    {{ p.desc }}
+                </p>
+
+                <a :href="p.url" target="_blank" rel="noreferrer"
+                    class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-yellow-300 hover:text-yellow-400 transition-all duration-200 hover:gap-2">
+                    查看仓库 →
+                </a>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({
+    projects: Array,
+});
+</script>
diff --git a/app/components/SitesSection.vue b/app/components/SitesSection.vue
new file mode 100644
index 0000000..b143af8
--- /dev/null
+++ b/app/components/SitesSection.vue
@@ -0,0 +1,35 @@
+<template>
+    <section class="card panel flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
+
+        <p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
+
+        <div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
+            <article v-for="site in sites" :key="site.url"
+                class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-blue-400/50 w-[290px] h-[145px] flex flex-col">
+                <div class="flex items-center justify-between mb-1.5">
+                    <h3 class="font-medium truncate">
+                        {{ site.name }}
+                    </h3>
+
+                    <span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-green-300"> 在线 </span>
+                </div>
+
+                <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
+                    {{ site.desc }}
+                </p>
+
+                <a :href="site.url" target="_blank" rel="noreferrer"
+                    class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-blue-300 hover:text-blue-400 transition-all duration-200 hover:gap-2">
+                    查看 →
+                </a>
+            </article>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({
+    sites: Array,
+});
+</script>
diff --git a/app/components/SitesSection_old.vue b/app/components/SitesSection_old.vue
new file mode 100644
index 0000000..5965146
--- /dev/null
+++ b/app/components/SitesSection_old.vue
@@ -0,0 +1,34 @@
+<template>
+    <section class="card flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1 gradient-text">我的网站</h2>
+        <p class="text-text-muted text-sm m-0 mb-3 block">正在运行的站点 · Websites</p>
+        <div class="w-full -mx-[1.125rem] -mb-[1.125rem]">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-[1.125rem] pb-[1.125rem]">
+                <article
+                    v-for="site in sites"
+                    :key="site.url"
+                    class="bg-gradient-to-br from-white/5 to-white/1 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/60 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-yellow-500/6"
+                >
+                    <div class="flex items-center justify-between mb-1.5">
+                        <h3 class="m-0 font-semibold text-base">{{ site.name }}</h3>
+                        <span class="px-2.5 py-1 rounded-full bg-green-500/14 text-green-300 text-xs font-medium"
+                            >在线</span
+                        >
+                    </div>
+                    <p class="text-text-muted text-sm m-0 mb-2.5">{{ site.desc }}</p>
+                    <a
+                        :href="site.url"
+                        target="_blank"
+                        rel="noreferrer"
+                        class="inline-flex items-center gap-1.5 mt-2.5 text-blue-400 font-semibold text-sm hover:text-blue-300 transition-all duration-200 hover:gap-2"
+                        >查看 →</a
+                    >
+                </article>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup>
+defineProps({ sites: Array });
+</script>
diff --git a/app/components/SkillsSection.vue b/app/components/SkillsSection.vue
new file mode 100644
index 0000000..525e972
--- /dev/null
+++ b/app/components/SkillsSection.vue
@@ -0,0 +1,28 @@
+<template>
+    <section class="card flex flex-col gap-2.5">
+        <div>
+            <h2 class="m-0 mb-1">技能专长</h2>
+            <p class="text-text-muted text-sm m-0 mb-3">我常用的工具与技术 · Skills & Technologies</p>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <article v-for="group in skills" :key="group.title"
+                class="bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-primary/8">
+                <header class="mb-3">
+                    <h3 class="text-base font-semibold m-0">{{ group.title }}</h3>
+                </header>
+                <div class="flex flex-wrap gap-2">
+                    <span v-for="item in group.items" :key="item"
+                        class="inline-flex items-center p-1.5 rounded-2xl bg-primary/14 border border-primary/18 transition-all duration-200 hover:bg-primary/24 hover:border-primary/40 hover:scale-110">
+                        <img :src="iconSrc(item)" :alt="item" :title="item" loading="lazy"
+                            class="w-7 h-7 rounded-2xl" />
+                    </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>
diff --git a/src/components/SocialLinks.vue b/app/components/SocialLinks.vue
similarity index 65%
rename from src/components/SocialLinks.vue
rename to app/components/SocialLinks.vue
index 65596ae..2ac6b22 100644
--- a/src/components/SocialLinks.vue
+++ b/app/components/SocialLinks.vue
@@ -1,12 +1,13 @@
 <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">
+    <section class="card flex flex-col gap-2.5">
+        <h2 class="m-0 mb-1">社交链接</h2>
+        <p class="text-text-muted text-sm m-0 mb-3 block">社交账号 · Links</p>
+        <div class="flex flex-wrap gap-2.5">
+            <a v-for="link in links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer"
+                class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/10 text-text-primary text-sm font-medium transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary hover:-translate-y-1">
+                <span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
                     <i v-if="iconFor(link).fa" :class="iconFor(link).fa"></i>
-                    <img v-else :src="iconFor(link).src" :alt="link.name" loading="lazy" />
+                    <img v-else :src="iconFor(link).src" :alt="link.name" loading="lazy" class="w-full h-full" />
                 </span>
                 <span>{{ link.name }}</span>
             </a>
@@ -53,44 +54,9 @@ onMounted(() => {
     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.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
     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>
diff --git a/src/components/StatsSection.vue b/app/components/StatsSection.vue
similarity index 90%
rename from src/components/StatsSection.vue
rename to app/components/StatsSection.vue
index e2c1e93..43d68d2 100644
--- a/src/components/StatsSection.vue
+++ b/app/components/StatsSection.vue
@@ -6,11 +6,8 @@
                 <button class="tab-button" :class="{ active: activeTab === 'github' }" @click="activeTab = 'github'">
                     GitHub
                 </button>
-                <button
-                    class="tab-button"
-                    :class="{ active: activeTab === 'wakatime' }"
-                    @click="activeTab = 'wakatime'"
-                >
+                <button class="tab-button" :class="{ active: activeTab === 'wakatime' }"
+                    @click="activeTab = 'wakatime'">
                     Wakatime
                 </button>
             </div>
@@ -91,18 +88,12 @@
 
             <div class="wakatime-tabs" v-if="allTimeData">
                 <div class="wakatime-mini-tabs">
-                    <button
-                        class="wakatime-tab-button"
-                        :class="{ active: wakatimeActiveTab === 'weekly' }"
-                        @click="wakatimeActiveTab = 'weekly'"
-                    >
+                    <button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'weekly' }"
+                        @click="wakatimeActiveTab = 'weekly'">
                         最近7天
                     </button>
-                    <button
-                        class="wakatime-tab-button"
-                        :class="{ active: wakatimeActiveTab === 'allTime' }"
-                        @click="wakatimeActiveTab = 'allTime'"
-                    >
+                    <button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'allTime' }"
+                        @click="wakatimeActiveTab = 'allTime'">
                         所有时间
                     </button>
                 </div>
@@ -122,7 +113,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, reactive, computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 
 const props = defineProps({ github: Object, wakatime: Object });
 const github = props.github;
diff --git a/src/components/WakatimeSection.vue b/app/components/WakatimeSection.vue
similarity index 94%
rename from src/components/WakatimeSection.vue
rename to app/components/WakatimeSection.vue
index 0896dbf..6af1153 100644
--- a/src/components/WakatimeSection.vue
+++ b/app/components/WakatimeSection.vue
@@ -6,12 +6,8 @@
                 <button class="tab-button" :class="{ active: activeTab === 'weekly' }" @click="activeTab = 'weekly'">
                     最近7天
                 </button>
-                <button
-                    class="tab-button"
-                    :class="{ active: activeTab === 'allTime' }"
-                    @click="activeTab = 'allTime'"
-                    v-if="allTimeData"
-                >
+                <button class="tab-button" :class="{ active: activeTab === 'allTime' }" @click="activeTab = 'allTime'"
+                    v-if="allTimeData">
                     所有时间
                 </button>
             </div>
diff --git a/src/config/siteConfig.ts b/app/config/siteConfig.ts
similarity index 88%
rename from src/config/siteConfig.ts
rename to app/config/siteConfig.ts
index 8dcb5ca..e5ccbda 100644
--- a/src/config/siteConfig.ts
+++ b/app/config/siteConfig.ts
@@ -4,6 +4,7 @@ const siteConfig = {
         title: "I'm RhenCloud.",
         avatar: "/avatar.webp", // public/avatar.webp
         bio: "趁世界还未重启之前 约一次爱恋",
+        email: "i@rhen.cloud",
         birthday: "2010-03-28",
         // gender: "女",
         pronouns: "她",
@@ -31,6 +32,7 @@ const siteConfig = {
 
     siteMeta: {
         title: "RhenCloud",
+        url: "https://rhen.cloud",
         icon: "/favicon.svg", // public/favicon.svg
         startDate: "2025-12-06",
     },
@@ -40,7 +42,7 @@ const siteConfig = {
             enable: true,
             // URL 支持：可使用外部 URL 或本地路径
             // 例如: "https://example.com/bg.jpg" 或 "background.webp"
-            image: "background.png", // 背景图片 URL 或本地路径（桌面端）
+            image: "background.webp", // 背景图片 URL 或本地路径（桌面端）
             mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
             blur: 0, // 背景模糊程度 (0-100)
             overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
@@ -117,6 +119,11 @@ const siteConfig = {
         { 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: "跨平台、多网站、模块化的小说下载器" },
+        {
+            name: "Test",
+            url: "https://github.com/RhenCloud/ILP-Cpp",
+            desc: "",
+        },
     ],
     friends: [
         {
@@ -131,6 +138,12 @@ const siteConfig = {
             url: "https://blog.sakura.ink",
             avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
         },
+        {
+            name: "鈴奈咲桜のBlog",
+            desc: "一个普普通通的Blog",
+            url: "https://blog.sakura.ink",
+            avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
+        },
     ],
 
     footer: {
diff --git a/src/pages/about.vue b/app/pages/about.vue
similarity index 83%
rename from src/pages/about.vue
rename to app/pages/about.vue
index 461f44f..50d887d 100644
--- a/src/pages/about.vue
+++ b/app/pages/about.vue
@@ -2,7 +2,16 @@
     <main class="page">
         <HeroSection :profile="profile" />
         <SkillsSection :skills="skills" />
-        <StatsSection :github="github" :wakatime="wakatime" />
+        <Suspense>
+            <template #default>
+                <StatsSection :github="github" :wakatime="wakatime" />
+            </template>
+            <template #fallback>
+                <div class="card" style="text-align: center; padding: 40px">
+                    <p>加载统计数据中...</p>
+                </div>
+            </template>
+        </Suspense>
     </main>
 </template>
 
diff --git a/src/pages/friends.vue b/app/pages/friends.vue
similarity index 100%
rename from src/pages/friends.vue
rename to app/pages/friends.vue
diff --git a/src/pages/index.vue b/app/pages/index.vue
similarity index 100%
rename from src/pages/index.vue
rename to app/pages/index.vue
diff --git a/src/pages/projects.vue b/app/pages/projects.vue
similarity index 100%
rename from src/pages/projects.vue
rename to app/pages/projects.vue
diff --git a/src/pages/sites.vue b/app/pages/sites.vue
similarity index 100%
rename from src/pages/sites.vue
rename to app/pages/sites.vue
diff --git a/src/plugins/neteaseMiniPlayer.client.ts b/app/plugins/neteaseMiniPlayer.client.ts
similarity index 100%
rename from src/plugins/neteaseMiniPlayer.client.ts
rename to app/plugins/neteaseMiniPlayer.client.ts
diff --git a/src/plugins/umami.client.ts b/app/plugins/umami.client.ts
similarity index 100%
rename from src/plugins/umami.client.ts
rename to app/plugins/umami.client.ts
diff --git a/app/styles.global.css b/app/styles.global.css
new file mode 100644
index 0000000..f7b3030
--- /dev/null
+++ b/app/styles.global.css
@@ -0,0 +1,353 @@
+@import "tailwindcss";
+
+/* Font Awesome 字体优化 */
+@font-face {
+    font-family: "Font Awesome 6 Solid";
+    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
+    font-display: swap;
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Font Awesome 6 Brands";
+    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
+    font-display: swap;
+    font-weight: 400;
+    font-style: normal;
+}
+
+@layer base {
+    html {
+        height: 100%;
+        scroll-behavior: smooth;
+    }
+
+    :root {
+        color-scheme: light dark;
+        background: #0f1629;
+        color: #e8eefc;
+    }
+
+    body {
+        margin: 0;
+        min-height: 100%;
+        background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    h1,
+    h2,
+    h3 {
+        margin: 0;
+        margin-bottom: 0.5rem;
+        font-weight: 600;
+    }
+
+    p {
+        margin-top: 0.375rem;
+        margin-bottom: 0.375rem;
+    }
+
+    a {
+        color: #7cc1ff;
+        text-decoration: none;
+        transition: color 0.2s ease;
+    }
+
+    a:hover {
+        color: #a8d5ff;
+    }
+}
+
+@layer components {
+    .info-card {
+        @apply rounded-[14px] border border-white/10
+           bg-gradient-to-br from-white/5 to-white/0
+           px-4 py-3.5 transition-all duration-200;
+    }
+}
+
+@layer components {
+    .app-shell {
+        position: relative;
+        min-height: 100vh;
+        color: #e8eefc;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        z-index: 0;
+        isolation: isolate;
+    }
+
+    .background-overlay {
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        z-index: -10;
+        background-repeat: no-repeat;
+    }
+
+    .content-stack {
+        position: relative;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+
+    .app-body {
+        position: relative;
+        z-index: 10;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .background-toggle {
+        position: fixed;
+        right: 1.125rem;
+        bottom: 1.125rem;
+        z-index: 40;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.625rem 0.875rem;
+        border-radius: 999px;
+        border: 1px solid rgba(255, 255, 255, 0.25);
+        background: rgba(255, 255, 255, 0.14);
+        backdrop-filter: blur(10px);
+        color: #f7fbff;
+        font-weight: 600;
+        cursor: pointer;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+    }
+
+    .background-toggle:hover,
+    .background-toggle:focus-visible {
+        background: rgba(124, 193, 255, 0.25);
+        border-color: rgba(124, 193, 255, 0.65);
+        box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
+        outline: none;
+    }
+
+    .background-toggle:active {
+        transform: translateY(1px) scale(0.99);
+    }
+
+    .background-toggle.active {
+        background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
+        border-color: rgba(124, 193, 255, 0.8);
+        color: #0f1629;
+        box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
+    }
+
+    .background-toggle .toggle-icon {
+        font-size: 18px;
+        line-height: 1;
+    }
+
+    .background-toggle .toggle-label {
+        font-size: 14px;
+        letter-spacing: 0.2px;
+    }
+
+    .card {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 1rem;
+        padding: 1.125rem 1.25rem;
+        backdrop-filter: blur(8px);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+        transition: all 0.3s ease;
+    }
+
+    .card:hover {
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 12px 48px rgba(124, 193, 255, 0.15);
+    }
+
+    .page {
+        max-width: 960px;
+        margin: 0 auto;
+        padding: 2rem 1rem 3rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.625rem;
+    }
+
+    .chips a,
+    .chip {
+        padding: 0.375rem 0.75rem;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #e8eefc;
+        font-size: 0.875rem;
+        font-weight: 500;
+        transition: all 0.2s ease;
+    }
+
+    .chips a:hover,
+    .chip:hover {
+        background: rgba(124, 193, 255, 0.2);
+        border-color: rgba(124, 193, 255, 0.4);
+        color: #a8d5ff;
+        transform: translateY(-2px);
+    }
+
+    .list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .list li {
+        margin-bottom: 0.5rem;
+    }
+
+    .netease-mini-player,
+    .netease-mini-player-embed,
+    .nmpv2-player,
+    .nmpv2-root {
+        position: fixed !important;
+        bottom: 20px !important;
+        left: 20px !important;
+        right: auto !important;
+        max-width: calc(100% - 40px) !important;
+        z-index: 40001 !important;
+        margin: 0 !important;
+        transform: none !important;
+    }
+
+    .netease-mini-player > * {
+        box-sizing: border-box;
+    }
+
+    .netease-mini-player.minimized {
+        width: 80px !important;
+        height: 80px !important;
+        border-radius: 50% !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+        box-shadow: none !important;
+    }
+
+    .netease-mini-player.minimized .album-cover-container {
+        width: 100% !important;
+        height: 100% !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        border-radius: 50% !important;
+        overflow: hidden !important;
+    }
+
+    .netease-mini-player.minimized .album-cover {
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover !important;
+        border-radius: 50% !important;
+    }
+
+    .netease-mini-player[data-position="bottom-left"] .playlist-container,
+    .netease-mini-player[data-position="bottom-right"] .playlist-container {
+        position: fixed !important;
+        bottom: calc(20px + 80px) !important;
+    }
+
+    .muted {
+        color: #a8b3cf;
+        font-size: 0.875rem;
+    }
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+        opacity: 0;
+    }
+
+    .fade-down-enter-active,
+    .fade-down-leave-active {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .fade-down-enter-from {
+        opacity: 0;
+        transform: translateY(0.5rem);
+    }
+
+    .fade-down-leave-to {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+
+    .fade-up-enter-active,
+    .fade-up-leave-active {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .fade-up-enter-from {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+
+    .fade-up-leave-to {
+        opacity: 0;
+        transform: translateY(0.5rem);
+    }
+}
+
+@layer utilities {
+    .truncate-lines-2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .truncate-lines-3 {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .glass {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(8px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .glass-sm {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(4px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    @media (max-width: 640px) {
+        .background-toggle {
+            right: 0.75rem;
+            bottom: 0.75rem;
+            padding: 0.5625rem 0.75rem;
+            gap: 0.3125rem;
+        }
+
+        .background-toggle .toggle-label {
+            font-size: 0.8125rem;
+        }
+    }
+}
diff --git a/app/utils/cssLoader.ts b/app/utils/cssLoader.ts
new file mode 100644
index 0000000..00f8a1d
--- /dev/null
+++ b/app/utils/cssLoader.ts
@@ -0,0 +1,9 @@
+/**
+ * CSS 加载工具 (已禁用)
+ *
+ * 此工具不再使用，因为Nuxt会自动处理CSS加载和优化
+ * 保留此文件以供参考，但不会被导入
+ */
+
+// 所有导出的函数已被删除
+// 使用 nuxt.config.ts 的 css 配置代替
diff --git a/index1.html b/index1.html
deleted file mode 100644
index 2ba24c7..0000000
--- a/index1.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-cn">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cloud Home</title>
-    <link rel="icon" href="/favicon.ico" />
-    <!-- NeteaseMiniPlayer v2 CSS -->
-    <link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
-</head>
-
-<body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-    <!-- NeteaseMiniPlayer v2 JS -->
-    <script src="/js/netease-mini-player-v2.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f76f0f8..2f26bb5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,22 +1,57 @@
 import { defineNuxtConfig } from "nuxt/config";
-import siteConfig from "./src/config/siteConfig";
+import siteConfig from "./app/config/siteConfig";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineNuxtConfig({
     compatibilityDate: "2025-12-12",
-    srcDir: "src/",
-    css: ["~/styles.css"],
+    srcDir: "app/",
+    // 禁用 Vue Router 的非关键警告
+    vue: {
+        compilerOptions: {
+            isCustomElement: (tag) => tag.startsWith("ion-"),
+        },
+    },
+    // Tailwind CSS 集成
+    css: ["~/styles.global.css"],
+    vite: {
+        plugins: [tailwindcss()],
+    },
     app: {
         head: {
             title: siteConfig.siteMeta.title,
-            link: [{ rel: "icon", href: siteConfig.siteMeta.icon }],
+            link: [
+                { rel: "icon", href: siteConfig.siteMeta.icon },
+                // Font Awesome CDN 预加载和优化
+                {
+                    rel: "preload",
+                    as: "style",
+                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css",
+                    crossorigin: "anonymous",
+                },
+                {
+                    rel: "preload",
+                    as: "font",
+                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2",
+                    type: "font/woff2",
+                    crossorigin: "anonymous",
+                },
+                {
+                    rel: "preload",
+                    as: "font",
+                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2",
+                    type: "font/woff2",
+                    crossorigin: "anonymous",
+                },
+            ],
         },
     },
-    // nitro: {
-    //     prerender: {
-    //         crawlLinks: true,
-    //         routes: ["/sitemap.xml", "/rss.xml"],
-    //     },
-    // },
+    nitro: {
+        prerender: {
+            crawlLinks: true,
+            // routes: ["/sitemap.xml", "/rss.xml"],
+        },
+        minify: true,
+    },
     runtimeConfig: {
         smtpHost: process.env.SMTP_HOST ?? "",
         smtpPort: Number(process.env.SMTP_PORT ?? 465),
diff --git a/package.json b/package.json
index aeeac6a..bdbe849 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,15 @@
     "dependencies": {
         "@jaseeey/vue-umami-plugin": "^1.4.0",
         "nodemailer": "^7.0.11",
-        "nuxt": "^4.2.2"
+        "nuxt": "^4.2.2",
+        "vite-tsconfig-paths": "^6.0.1"
     },
     "devDependencies": {
+        "@tailwindcss/vite": "^4.1.18",
         "@types/node": "^24.10.1",
         "@types/nodemailer": "^7.0.4",
+        "autoprefixer": "^10.4.22",
+        "tailwindcss": "^4.1.18",
         "typescript": "^5.9.3"
     }
 }
\ No newline at end of file
diff --git a/public/avatar.webp b/public/avatar.webp
index 1d61fad..6d81fa5 100644
Binary files a/public/avatar.webp and b/public/avatar.webp differ
diff --git a/public/background.png b/public/background.png
deleted file mode 100644
index 143f71d..0000000
Binary files a/public/background.png and /dev/null differ
diff --git a/public/background.webp b/public/background.webp
new file mode 100644
index 0000000..7c8ea69
Binary files /dev/null and b/public/background.webp differ
diff --git a/src/components/AboutSection.vue b/src/components/AboutSection.vue
deleted file mode 100644
index fc69095..0000000
--- a/src/components/AboutSection.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-    <section class="card panel">
-        <h2>个人简介</h2>
-        <p class="muted">关于我 · About Me</p>
-
-        <div class="about-grid info-grid">
-            <article v-if="age" class="about-card info-card">
-                <div class="about-head">
-                    <span class="icon">🎂</span>
-                    <h3>年龄</h3>
-                </div>
-                <p class="muted">{{ age }} 岁</p>
-            </article>
-
-            <article v-if="profile?.gender" class="about-card info-card">
-                <div class="about-head">
-                    <span class="icon">⚧️</span>
-                    <h3>性别</h3>
-                </div>
-                <p class="muted">{{ profile.gender }}</p>
-            </article>
-
-            <article v-if="profile?.pronouns" class="about-card info-card">
-                <div class="about-head">
-                    <span class="icon">🗣️</span>
-                    <h3>代词</h3>
-                </div>
-                <p class="muted">{{ profile.pronouns }}</p>
-            </article>
-
-            <article v-if="profile?.location" class="about-card info-card">
-                <div class="about-head">
-                    <span class="icon">📍</span>
-                    <h3>地区</h3>
-                </div>
-                <p class="muted">{{ profile.location }}</p>
-            </article>
-        </div>
-
-        <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>
-import { computed } from "vue";
-
-const props = defineProps({
-    items: Array,
-    profile: Object,
-});
-
-const age = computed(() => {
-    if (!props.profile?.birthday) return null;
-    const birthDate = new Date(props.profile.birthday);
-    const today = new Date();
-    let age = today.getFullYear() - birthDate.getFullYear();
-    const m = today.getMonth() - birthDate.getMonth();
-    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
-        age--;
-    }
-    return age;
-});
-</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;
-}
-.info-grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 14px;
-}
-.about-grid + .about-grid {
-    margin-top: 10px;
-}
-@media (max-width: 720px) {
-    .about-grid {
-        grid-template-columns: 1fr;
-    }
-    .info-grid {
-        display: flex;
-        gap: 10px;
-    }
-}
-.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;
-}
-.info-card {
-    flex: 1 1 140px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 10px 14px;
-}
-.info-card .about-head {
-    margin-bottom: 0;
-}
-.info-card .about-head h3 {
-    font-size: 15px;
-    color: rgba(255, 255, 255, 0.9);
-    font-weight: 600;
-    margin: 0;
-}
-.info-card .icon {
-    font-size: 18px;
-}
-.info-card .muted {
-    margin: 0;
-    text-align: right;
-    white-space: nowrap;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 13px;
-}
-.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>
diff --git a/src/components/FriendsSection.vue b/src/components/FriendsSection.vue
deleted file mode 100644
index 13e5a52..0000000
--- a/src/components/FriendsSection.vue
+++ /dev/null
@@ -1,347 +0,0 @@
-<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>
-            <label>
-                想说的话
-                <div class="textarea-wrapper">
-                    <textarea v-model="form.message" placeholder="可选，最多50字" maxlength="50"></textarea>
-                    <span class="char-count">{{ form.message?.length || 0 }}/50</span>
-                </div>
-            </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: "",
-    message: "",
-});
-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,
-                message: form.message,
-            }),
-        });
-        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;
-    justify-content: center;
-    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;
-}
-.textarea-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.friend-form textarea {
-    flex: 1;
-    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;
-    font-family: inherit;
-    height: 36px;
-    resize: none;
-    overflow: auto;
-}
-.friend-form input::placeholder,
-.friend-form textarea::placeholder {
-    color: rgba(232, 238, 252, 0.7);
-}
-.friend-form input:focus,
-.friend-form textarea: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);
-}
-.char-count {
-    font-size: 12px;
-    color: rgba(232, 238, 252, 0.6);
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-.form-actions {
-    grid-column: 1 / -1;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    justify-content: center;
-}
-.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>
diff --git a/src/components/GithubSection.vue b/src/components/GithubSection.vue
deleted file mode 100644
index 3610284..0000000
--- a/src/components/GithubSection.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <section class="card">
-        <h2>GitHub</h2>
-        <div class="heatmap">
-            <h3>提交热力图</h3>
-            <p class="muted">我的提交热力图 · Acitivity Heatmap</p>
-            <img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
-        </div>
-        <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>
-    </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>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
deleted file mode 100644
index fb9c284..0000000
--- a/src/components/HeroSection.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<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: 3px solid var(--accent);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
-    background: #fff;
-}
-</style>
diff --git a/src/components/PageSwitcher.vue b/src/components/PageSwitcher.vue
deleted file mode 100644
index bbedab5..0000000
--- a/src/components/PageSwitcher.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-    <div class="pager">
-        <button :disabled="currentIndex <= 0" @click="goPrev">上一页</button>
-        <div class="dots">
-            <button
-                v-for="item in pages"
-                :key="item.name"
-                :class="{ active: item.name === route.name }"
-                @click="router.push({ name: item.name })"
-            >
-                {{ item.label }}
-            </button>
-        </div>
-        <button :disabled="currentIndex >= pages.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 pages = [
-    { name: "index", label: "首页" },
-    { name: "about", label: "关于" },
-    { name: "sites", label: "网站" },
-    { name: "projects", label: "项目" },
-    { name: "friends", label: "友链" },
-];
-
-const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));
-
-const goPrev = () => {
-    if (currentIndex.value > 0) {
-        router.push({ name: pages[currentIndex.value - 1].name });
-    }
-};
-
-const goNext = () => {
-    if (currentIndex.value < pages.length - 1) {
-        router.push({ name: pages[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: center;
-    }
-}
-</style>
diff --git a/src/components/ProjectsSection.vue b/src/components/ProjectsSection.vue
deleted file mode 100644
index 19c2057..0000000
--- a/src/components/ProjectsSection.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<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>
diff --git a/src/components/SitesSection.vue b/src/components/SitesSection.vue
deleted file mode 100644
index a3ed6c6..0000000
--- a/src/components/SitesSection.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<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>
diff --git a/src/components/SkillsSection.vue b/src/components/SkillsSection.vue
deleted file mode 100644
index b332a20..0000000
--- a/src/components/SkillsSection.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<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>
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index b5e89d4..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,289 +0,0 @@
-html {
-    height: 100%;
-}
-
-: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: 100%;
-    background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
-}
-
-/* Layout shell keeps background and toggle visible even when content is hidden */
-
-.app-shell {
-    position: relative;
-    min-height: 100vh;
-    color: #e8eefc;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    isolation: isolate;
-}
-
-.background-overlay {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: -1;
-    background-repeat: no-repeat;
-}
-
-.content-stack {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-.app-body {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-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;
-}
-
-/* Ensure the Netease mini player doesn't occupy page layout space
-   and stays fixed above content. Use !important to override
-   styles injected by third-party scripts. */
-.netease-mini-player {
-    position: fixed !important;
-    bottom: 20px !important;
-    left: 20px !important;
-    right: auto !important;
-    /* do not force width here — let the player's own minimized/expanded
-       styles control sizing. Only constrain max width as a safety net. */
-    max-width: calc(100% - 40px) !important;
-    z-index: 10001 !important;
-    margin: 0 !important;
-    transform: none !important;
-}
-
-/* If the player injects a full-width bar, make sure it won't
-   push page content by forcing it out of the normal flow. */
-.netease-mini-player > * {
-    box-sizing: border-box;
-}
-
-/* Defensive: hide any accidental full-width injected container from the player
-   that might occupy vertical space. This targets common helper classes used
-   by the player script. */
-.netease-mini-player-embed,
-.nmpv2-player,
-.nmpv2-root {
-    position: fixed !important;
-    bottom: 20px !important;
-    left: 20px !important;
-    right: auto !important;
-    z-index: 10001 !important;
-}
-
-/* Fix: prevent playlist dropdown from increasing document height
-   by forcing the playlist container to be fixed and clipped to viewport. */
-.netease-mini-player[data-position="bottom-left"] .playlist-container,
-.netease-mini-player[data-position="bottom-right"] .playlist-container {
-    position: fixed !important;
-    bottom: calc(20px + 80px) !important;
-    left: 20px !important;
-    right: auto !important;
-    width: 290px !important;
-    max-height: 50vh !important;
-    overflow: auto !important;
-    z-index: 10002 !important;
-}
-
-.netease-mini-player[data-position="top-left"] .playlist-container,
-.netease-mini-player[data-position="top-right"] .playlist-container {
-    position: fixed !important;
-    top: calc(20px + 80px) !important;
-    left: 20px !important;
-    right: auto !important;
-    width: 290px !important;
-    max-height: 50vh !important;
-    overflow: auto !important;
-    z-index: 10002 !important;
-}
-
-/* If player is docked to the right, align playlist to right edge */
-.netease-mini-player[data-position="bottom-right"] .playlist-container,
-.netease-mini-player[data-position="top-right"] .playlist-container {
-    left: auto !important;
-    right: 20px !important;
-}
-
-/* Ensure minimized player displays as a circle and its album cover fits */
-.netease-mini-player.minimized {
-    width: 80px !important;
-    height: 80px !important;
-    border-radius: 50% !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    box-shadow: none !important;
-}
-
-.netease-mini-player.minimized .album-cover-container {
-    width: 100% !important;
-    height: 100% !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    border-radius: 50% !important;
-    overflow: hidden !important;
-}
-
-.netease-mini-player.minimized .album-cover {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    border-radius: 50% !important;
-}
-
-/* Floating background show/hide toggle (bottom-right) */
-.background-toggle {
-    position: fixed;
-    right: 18px;
-    bottom: 18px;
-    z-index: 10000;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 10px 14px;
-    border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    background: rgba(255, 255, 255, 0.14);
-    backdrop-filter: blur(10px);
-    color: #f7fbff;
-    font-weight: 600;
-    cursor: pointer;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
-    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
-}
-
-.background-toggle:hover,
-.background-toggle:focus-visible {
-    background: rgba(124, 193, 255, 0.25);
-    border-color: rgba(124, 193, 255, 0.65);
-    box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
-    outline: none;
-}
-
-.background-toggle:active {
-    transform: translateY(1px) scale(0.99);
-}
-
-.background-toggle .toggle-icon {
-    font-size: 18px;
-    line-height: 1;
-}
-
-.background-toggle .toggle-label {
-    font-size: 14px;
-    letter-spacing: 0.2px;
-}
-
-.background-toggle.active {
-    background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
-    border-color: rgba(124, 193, 255, 0.8);
-    color: #0f1629;
-    box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
-}
-
-@media (max-width: 640px) {
-    .background-toggle {
-        right: 12px;
-        bottom: 12px;
-        padding: 9px 12px;
-        gap: 5px;
-    }
-    .background-toggle .toggle-label {
-        font-size: 13px;
-    }
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
deleted file mode 100644
index 68af4be..0000000
--- a/src/vite-env.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module "*.vue" {
-    import type { DefineComponent } from "vue";
-    const component: DefineComponent<{}, {}, any>;
-    export default component;
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..b497129
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,39 @@
+import type { Config } from "tailwindcss";
+
+export default {
+    content: ["./app/**/*.{vue,js,ts}", "./app/components/**/*.vue", "./app/pages/**/*.vue", "./app/layouts/**/*.vue"],
+    theme: {
+        extend: {
+            colors: {
+                // 自定义颜色变量（对应现有的 CSS 变量）
+                primary: "rgb(124, 193, 255)",
+                accent: "rgb(124, 193, 255)",
+                "surface-primary": "rgb(15, 22, 41)",
+                "surface-secondary": "rgb(27, 43, 75)",
+                "text-primary": "rgb(232, 238, 252)",
+                "text-secondary": "rgb(159, 172, 200)",
+                "text-muted": "rgb(104, 120, 152)",
+            },
+            fontFamily: {
+                sans: ['"Inter"', "system-ui", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "sans-serif"],
+            },
+            spacing: {
+                "safe-x": "max(1rem, env(safe-area-inset-left))",
+                "safe-y": "max(1rem, env(safe-area-inset-top))",
+            },
+            boxShadow: {
+                "sm-dark": "0 4px 12px rgba(0, 0, 0, 0.15)",
+                "md-dark": "0 8px 24px rgba(0, 0, 0, 0.18)",
+                "lg-dark": "0 12px 32px rgba(0, 0, 0, 0.22)",
+                "xl-dark": "0 16px 48px rgba(0, 0, 0, 0.25)",
+            },
+            backgroundImage: {
+                "gradient-dark": "radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629)",
+            },
+            backdropBlur: {
+                xs: "2px",
+            },
+        },
+    },
+    plugins: [],
+} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
index 6b07ed8..9e2c134 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,5 +3,8 @@
     "compilerOptions": {
         "types": ["node"]
     },
-    "include": ["nuxt.config.ts", "src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "server/**/*.ts"]
+    "vueCompilerOptions": {
+        "globalTypesPath": "./node_modules/.vue-global-types"
+    },
+    "include": ["nuxt.config.ts", "app/**/*.ts", "app/**/*.vue", "app/**/*.d.ts", "server/**/*.ts"]
 }