style(app): 使用 NuxtImg 替代 img 标签

在多个组件中将 `img` 标签替换为 `NuxtImg` 标签，提升图片加载的性能和优化。例如，在 `AboutSection.vue`、`FriendsSection.vue`、`HeroSection.vue`、`ProjectsSection.vue`、`SitesSection.vue` 和 `SkillsSection.vue` 中的图片标签。

refactor(app): 扩展 `nuxt.config.ts` 配置

扩展了 `nuxt.config.ts` 配置文件中的模块配置，添加了 `@nuxt/image` 和 `@nuxt/eslint` 模块。同时，优化了 `routeRules` 配置，以支持预渲染和增量静态生成。

app/app.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="app-shell" :style="backgroundStyle">
-        <div class="background-overlay" :style="overlayStyle"></div>
+        <div class="background-overlay" :style="overlayStyle"/>
         <button
             class="background-toggle"
-            @click="hideComponents = !hideComponents"
             :title="hideComponents ? '显示内容' : '隐藏内容'"
             :class="{ active: hideComponents }"
+            @click="hideComponents = !hideComponents"
         >
             <span class="toggle-icon">{{ hideComponents ? "👁️" : "🙈" }}</span>
             <span class="toggle-label">{{ hideComponents ? "显示" : "隐藏" }}</span>
         </button>
         <div class="content-stack">
             <Transition name="fade-down">
-                <main class="app-body" v-if="!hideComponents" key="content">
+                <main v-if="!hideComponents" key="content" class="app-body">
                     <NuxtPage />
                 </main>
             </Transition>
@@ -20,7 +20,7 @@
                 <PageSwitcher v-if="!hideComponents" key="switcher" />
             </Transition>
             <Transition name="fade-down">
-                <FooterSection v-if="!hideComponents" :contact="contact" key="footer" />
+                <FooterSection v-if="!hideComponents" key="footer" :contact="contact" />
             </Transition>
         </div>
         <MusicPlayer />

app/components/AboutSection.vue

@@ -4,8 +4,10 @@
         <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">
+            <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>
@@ -15,8 +17,10 @@
                 </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">
+            <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>
@@ -26,8 +30,10 @@
                 </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">
+            <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>
@@ -37,8 +43,10 @@
                 </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">
+            <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>
@@ -50,8 +58,11 @@
         </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">
+            <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>
@@ -66,8 +77,14 @@
 import { computed } from "vue";
 
 const props = defineProps({
-    items: Array,
-    profile: Object,
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    profile: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
 const age = computed(() => {

app/components/FooterSection.vue

@@ -1,38 +1,55 @@
 <template>
     <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">
+        <p v-if="showHitokoto && quote" class="text-text-muted text-sm m-0 italic">
             「{{ quote }}」<span v-if="from" class="ml-1.5">—— {{ from }}</span>
         </p>
 
         <!-- 访问统计 -->
-        <p class="text-text-muted text-xs m-0" v-if="showStats && !statsError">
+        <p v-if="showStats && !statsError" class="text-text-muted text-xs m-0">
             👁️ {{ visitors }} · 📊 {{ pageviews }}
         </p>
 
         <!-- 备案信息 -->
-        <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">
+        <p v-if="contact?.beian" class="text-text-muted text-xs m-0">
+            <NuxtLink
+                :to="contact.beianLink || '/'"
+                class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100"
+            >
                 {{ contact.beian }}
-            </a>
+            </NuxtLink>
         </p>
 
         <!-- 框架与技术栈信息 -->
         <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://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://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>
+            <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>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="contact?.customHtml" v-html="contact.customHtml" />
     </footer>
 </template>
 
@@ -40,7 +57,7 @@
 import { onMounted, ref } from "vue";
 import { useRuntimeConfig } from "#imports";
 import siteConfig from "~/config/siteConfig";
-const props = defineProps({ contact: Object });
+const contact = siteConfig.footer || {};
 const config = useRuntimeConfig();
 const quote = ref("");
 const from = ref("");

app/components/FriendsSection.vue

@@ -3,11 +3,13 @@
         <h2 class="m-0 mb-1 text-lg font-semibold">友情链接</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"
+            <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"
+                        <NuxtImg
+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 }}
@@ -20,31 +22,35 @@
                     {{ f.desc || "一个有趣的站点" }}
                 </p>
 
-                <a :href="f.url" target="_blank" rel="noreferrer"
+                <NuxtLink
+:to="f.url"
                     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>
+                </NuxtLink>
             </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
+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"
+                @click="openForm">
                 申请友链
             </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"
+        <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
+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"
+                        @click="closeDialog">
                         好的
                     </button>
                 </div>
@@ -54,7 +60,8 @@
 
     <!-- 申请友链模态弹窗 -->
     <Teleport to="body">
-        <div v-if="showFormModal"
+        <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
@@ -63,55 +70,64 @@
 
                 <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>
+                    <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">
+                <form class="grid grid-cols-1 sm:grid-cols-2 gap-3" @submit.prevent="submitForm">
                     <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" />
+                        <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" />
+                        <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" />
+                        <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" />
+                        <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" />
+                        <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>
+                            <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"/>
                         </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
+type="button" class="px-3 py-2 rounded-2xl border border-white/10 bg-white/6"
+                            @click="showFormModal = false">
                             取消
                         </button>
-                        <button type="submit" :disabled="loading"
+                        <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>

app/components/GithubSection.vue

@@ -4,25 +4,32 @@
         <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"
+            <NuxtImg
+                :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">
+                <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="w-2.5 h-2.5 rounded-full inline-block"
+                            :style="{ background: colorFor(lang.name) }"
+                        />
                         <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>
+                        <span class="block h-full rounded-full transition-all duration-300" :style="barStyle(lang)" />
                     </div>
                 </li>
             </ul>
@@ -32,7 +39,14 @@
 
 <script setup>
 import { computed } from "vue";
-const props = defineProps({ github: Object });
+const props = defineProps({
+    github: {
+        type: Object,
+        required: false,
+        default: () => ({ languages: [] }),
+    },
+});
+
 const github = props.github;
 
 const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];

app/components/HeroSection.vue

@@ -2,10 +2,14 @@
     <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" />
+                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"
+            />
+            <NuxtImg
+                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="eager"
+            />
         </div>
         <div class="overflow-hidden">
             <h1 class="text-2xl font-bold">{{ profile.name }}</h1>
@@ -16,5 +20,13 @@
 </template>
 
 <script setup>
-defineProps({ profile: Object });
+import siteConfig from "../config/siteConfig";
+
+const { profile } = defineProps({
+    profile: {
+        type: Object,
+        required: false,
+        default: () => siteConfig.profile || {},
+    },
+});
 </script>

app/components/MusicPlayer.vue

@@ -1,10 +1,11 @@
 <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-auto-pause="music.autoPause" :data-api-urls="JSON.stringify(music.apiUrls)"/>
 </template>
 
 <script setup lang="ts">

app/components/PageSwitcher.vue

@@ -1,20 +1,23 @@
 <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
+:disabled="currentIndex <= 0" 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"
+            @click="goPrev">
             上一页
         </button>
         <div class="flex gap-2 flex-wrap justify-center">
-            <button v-for="item in pages" :key="item.name" :class="{
+            <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">
+            }" 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"
+                @click="router.push({ name: item.name })">
                 {{ 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
+:disabled="currentIndex >= pages.length - 1" 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"
+            @click="goNext">
             下一页
         </button>
     </div>

app/components/ProjectsSection.vue

@@ -3,8 +3,11 @@
         <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">
+            <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 }}
@@ -17,10 +20,12 @@
                     {{ 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">
+                <NuxtLink
+                    :to="p.url"
+                    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>
+                </NuxtLink>
             </article>
         </div>
     </section>
@@ -28,6 +33,9 @@
 
 <script setup>
 defineProps({
-    projects: Array,
+    projects: {
+        type: Array,
+        default: () => [],
+    },
 });
 </script>

app/components/SitesSection.vue

@@ -5,8 +5,11 @@
         <p class="text-sm text-white/60 mb-3">正在运行的站点 · Websites</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">
+            <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 }}
@@ -19,10 +22,12 @@
                     {{ 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">
+                <NuxtLink
+                    :to="site.url"
+                    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>
+                </NuxtLink>
             </article>
         </div>
     </section>
@@ -30,6 +35,9 @@
 
 <script setup>
 defineProps({
-    sites: Array,
+    sites: {
+        type: Array,
+        default: () => [],
+    },
 });
 </script>

app/components/SkillsSection.vue

@@ -5,15 +5,18 @@
             <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"
+            <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"
+                    <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"
+                        <NuxtImg
+:src="iconSrc(item)" :alt="item" :title="item" loading="lazy"
                             class="w-7 h-7 rounded-2xl" />
                     </span>
                 </div>

app/components/SocialLinks.vue

@@ -3,21 +3,36 @@
         <h2 class="m-0 mb-1 text-lg font-semibold">社交链接</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" class="w-full h-full" />
-                </span>
-                <span>{{ link.name }}</span>
-            </a>
+            <template v-for="link in links" :key="link.url">
+                <NuxtLink
+                    :to="link.url"
+                    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" />
+                        <NuxtImg
+                            v-else
+                            :src="iconFor(link).src"
+                            :alt="link.name"
+                            loading="lazy"
+                            class="w-full h-full"
+                        />
+                    </span>
+                    <span>{{ link.name }}</span>
+                </NuxtLink>
+            </template>
         </div>
     </section>
 </template>
 
 <script setup>
 import { onMounted } from "vue";
-const props = defineProps({ links: Array });
+defineProps({
+    links: {
+        type: Array,
+        required: true,
+    },
+});
 
 const iconMap = {
     bilibili: "fa-brands fa-bilibili",

app/components/StatsSection.vue

@@ -6,8 +6,11 @@
                 <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>
@@ -18,7 +21,7 @@
             <div class="heatmap">
                 <h3>提交热力图</h3>
                 <p class="muted">我的提交热力图 · Activity Heatmap</p>
-                <img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
+                <NuxtImg :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
             </div>
             <div class="lang-wrap">
                 <h3>常用语言</h3>
@@ -27,12 +30,12 @@
                     <ul class="list lang-list">
                         <li v-for="lang in githubLanguages" :key="lang.name" class="lang-row">
                             <div class="lang-label">
-                                <span class="dot" :style="{ background: colorFor(lang.name, 'github') }"></span>
+                                <span class="dot" :style="{ background: colorFor(lang.name, 'github') }" />
                                 <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, 'github')"></span>
+                                <span class="lang-bar-fill" :style="barStyle(lang, 'github')" />
                             </div>
                         </li>
                     </ul>
@@ -67,45 +70,51 @@
                 </div>
             </div>
 
-            <div class="lang-wrap" v-if="currentWakatimeData?.languages && currentWakatimeData.languages.length">
+            <div v-if="currentWakatimeData?.languages && currentWakatimeData.languages.length" class="lang-wrap">
                 <h3>编程语言</h3>
                 <p class="muted">语言使用统计 · Languages</p>
                 <div class="lang-chart">
                     <ul class="list lang-list">
                         <li v-for="lang in wakatimeLanguages" :key="lang.name" class="lang-row">
                             <div class="lang-label">
-                                <span class="dot" :style="{ background: colorFor(lang.name, 'wakatime') }"></span>
+                                <span class="dot" :style="{ background: colorFor(lang.name, 'wakatime') }" />
                                 <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, 'wakatime')"></span>
+                                <span class="lang-bar-fill" :style="barStyle(lang, 'wakatime')" />
                             </div>
                         </li>
                     </ul>
                 </div>
             </div>
 
-            <div class="wakatime-tabs" v-if="allTimeData">
+            <div v-if="allTimeData" class="wakatime-tabs">
                 <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>
             </div>
 
-            <div class="status-wrap" v-if="statusData">
+            <div v-if="statusData" class="status-wrap">
                 <h3>当前状态</h3>
                 <p class="muted">实时状态 · Current Status</p>
                 <div class="status-item">
-                    <span class="status-indicator" :class="{ active: statusData.is_coding }"></span>
+                    <span class="status-indicator" :class="{ active: statusData.is_coding }" />
                     <span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
-                    <span class="status-project" v-if="statusData.project">{{ statusData.project }}</span>
+                    <span v-if="statusData.project" class="status-project">{{ statusData.project }}</span>
                 </div>
             </div>
         </div>
@@ -115,7 +124,16 @@
 <script setup>
 import { ref, onMounted, computed } from "vue";
 
-const props = defineProps({ github: Object, wakatime: Object });
+const props = defineProps({
+    github: {
+        type: Object,
+        default: () => ({}),
+    },
+    wakatime: {
+        type: Object,
+        default: () => ({}),
+    },
+});
 const github = props.github;
 const wakatime = props.wakatime;
 

app/components/WakatimeSection.vue

@@ -1,13 +1,17 @@
 <template>
-    <section class="card" v-if="showComponent && (weeklyData || allTimeData)">
+    <section v-if="showComponent && (weeklyData || allTimeData)" class="card">
         <div class="header">
             <h2>Wakatime</h2>
             <div class="tabs">
                 <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
+                    v-if="allTimeData"
+                    class="tab-button"
+                    :class="{ active: activeTab === 'allTime' }"
+                    @click="activeTab = 'allTime'"
+                >
                     所有时间
                 </button>
             </div>
@@ -36,32 +40,32 @@
             </div>
         </div>
 
-        <div class="lang-wrap" v-if="currentData.languages && currentData.languages.length">
+        <div v-if="currentData.languages && currentData.languages.length" 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="dot" :style="{ background: colorFor(lang.name) }" />
                             <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>
+                            <span class="lang-bar-fill" :style="barStyle(lang)" />
                         </div>
                     </li>
                 </ul>
             </div>
         </div>
 
-        <div class="status-wrap" v-if="statusData">
+        <div v-if="statusData" class="status-wrap">
             <h3>当前状态</h3>
             <p class="muted">实时状态 · Current Status</p>
             <div class="status-item">
-                <span class="status-indicator" :class="{ active: statusData.is_coding }"></span>
+                <span class="status-indicator" :class="{ active: statusData.is_coding }" />
                 <span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
-                <span class="status-project" v-if="statusData.project">{{ statusData.project }}</span>
+                <span v-if="statusData.project" class="status-project">{{ statusData.project }}</span>
             </div>
         </div>
     </section>
@@ -70,7 +74,13 @@
 <script setup>
 import { ref, onMounted, computed } from "vue";
 
-const props = defineProps({ wakatime: Object });
+const props = defineProps({
+    wakatime: {
+        type: Object,
+        required: false,
+        default: () => ({ languages: [] }),
+    },
+});
 const wakatime = props.wakatime;
 
 const weeklyData = ref(null);
@@ -79,7 +89,7 @@ const statusData = ref(null);
 const showComponent = ref(true);
 const activeTab = ref("weekly");
 
-const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
+const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#201a1fff", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
 
 const currentData = computed(() => {
     return activeTab.value === "weekly" ? weeklyData.value : allTimeData.value;

app/pages/comments.vue

@@ -6,11 +6,22 @@
                 <h2 class="m-0 mb-1 text-lg font-semibold">留言板</h2>
                 <p class="text-sm text-white/60 mb-3">在这里留下想说的话吧 · Comments</p>
                 <div class="giscus-wrapper">
-                    <component v-if="GiscusComponent" :is="GiscusComponent" :repo="giscus.repo" :repo-id="giscus.repoId"
-                        :category="giscus.category" :category-id="giscus.categoryId" :mapping="giscus.mapping"
-                        :strict="giscus.strict" :reactions-enabled="giscus.reactionsEnabled"
-                        :emit-metadata="giscus.emitMetadata" :input-position="giscus.inputPosition"
-                        :theme="'/css/giscus.css'" lang="zh-CN" class="giscus" />
+                    <component
+                        :is="GiscusComponent"
+                        v-if="GiscusComponent"
+                        :repo="giscus.repo"
+                        :repo-id="giscus.repoId"
+                        :category="giscus.category"
+                        :category-id="giscus.categoryId"
+                        :mapping="giscus.mapping"
+                        :strict="giscus.strict"
+                        :reactions-enabled="giscus.reactionsEnabled"
+                        :emit-metadata="giscus.emitMetadata"
+                        :input-position="giscus.inputPosition"
+                        :theme="'/css/giscus.css'"
+                        lang="zh-CN"
+                        class="giscus"
+                    />
                     <div v-else id="giscus-container" class="giscus" />
                 </div>
             </section>
@@ -21,10 +32,11 @@
 <script setup lang="ts">
 import { definePageMeta } from "#imports";
 import { onMounted, shallowRef, markRaw } from "vue";
+import type { Component } from "vue";
 import siteConfig from "~/config/siteConfig";
 
 const giscus = siteConfig.comments.giscus || {};
-const GiscusComponent = shallowRef(null as any);
+const GiscusComponent = shallowRef<Component | null>(null);
 
 async function tryUseOfficialComponent() {
     try {
@@ -38,12 +50,14 @@ async function tryUseOfficialComponent() {
     }
 }
 
-
 onMounted(async () => {
     // 如果没有配置 giscus，显示提示（由模板处理）
     if (!siteConfig.comments.enable) return;
     if (!giscus || !giscus.repo) return;
     const ok = await tryUseOfficialComponent();
+    if (!ok) {
+        console.error("Failed to load Giscus component.");
+    }
 });
 
 definePageMeta({

app/plugins/neteaseMiniPlayer.client.ts

@@ -1,6 +1,15 @@
 import { defineNuxtPlugin } from "#app";
 import siteConfig from "~/config/siteConfig";
 
+type NeteaseMiniPlayerGlobal = {
+    init?: () => void;
+};
+
+type NeteaseWindow = Window & {
+    NeteaseMiniPlayer?: NeteaseMiniPlayerGlobal;
+    __NETEASE_MUSIC_CONFIG__?: unknown;
+};
+
 export default defineNuxtPlugin(() => {
     if (import.meta.server) return;
 
@@ -35,7 +44,7 @@ export default defineNuxtPlugin(() => {
     const ensureScript = () =>
         new Promise<void>((resolve) => {
             // 检查全局对象是否已存在，表示脚本已加载
-            const anyWin = window as any;
+            const anyWin = window as NeteaseWindow;
             if (anyWin.NeteaseMiniPlayer) {
                 resolve();
                 return;
@@ -62,7 +71,7 @@ export default defineNuxtPlugin(() => {
         });
 
     const initPlayer = () => {
-        const anyWin = window as any;
+        const anyWin = window as NeteaseWindow;
 
         // 将 siteConfig 的音乐配置传递给全局 window 对象
         if (!anyWin.__NETEASE_MUSIC_CONFIG__) {

app/plugins/umami.client.ts

@@ -4,7 +4,7 @@ import type { Router } from "vue-router";
 import siteConfig from "~/config/siteConfig";
 
 export default defineNuxtPlugin((nuxtApp) => {
-    if (!process.client) return;
+    if (!import.meta.client) return;
     if (!siteConfig.umami?.enable) return;
 
     // 跳过在 localhost 环境下加载 Umami

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

nuxt.config.ts

@@ -5,17 +5,30 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
     compatibilityDate: "2025-12-12",
     srcDir: "app/",
+    modules: ["@nuxt/image", "@nuxt/eslint"],
+
     // 禁用 Vue Router 的非关键警告
     vue: {
         compilerOptions: {
             isCustomElement: (tag) => tag.startsWith("ion-"),
         },
     },
+
     // Tailwind CSS 集成
     css: ["~/styles.global.css"],
+
     vite: {
         plugins: [tailwindcss()],
     },
+
+    routeRules: {
+        "/": { prerender: true },
+        "/about": { isr: 3600 },
+        "/sites": { prerender: true },
+        "/projects": { prerender: true },
+        "/friends": { prerender: true },
+    },
+
     app: {
         head: {
             title: siteConfig.siteMeta.title,
@@ -45,6 +58,7 @@ export default defineNuxtConfig({
             ],
         },
     },
+
     nitro: {
         prerender: {
             crawlLinks: true,
@@ -52,6 +66,7 @@ export default defineNuxtConfig({
         },
         minify: true,
     },
+
     runtimeConfig: {
         smtpHost: process.env.SMTP_HOST ?? "",
         smtpPort: Number(process.env.SMTP_PORT ?? 465),

package.json

@@ -6,11 +6,16 @@
         "dev": "nuxt dev",
         "build": "nuxt build",
         "generate": "nuxt generate",
-        "preview": "nuxt preview"
+        "preview": "nuxt preview",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix"
     },
     "dependencies": {
         "@giscus/vue": "^3.1.1",
         "@jaseeey/vue-umami-plugin": "^1.4.0",
+        "@nuxt/eslint": "1.12.1",
+        "@nuxt/image": "2.0.0",
+        "eslint": "^9.39.2",
         "nodemailer": "^7.0.11",
         "nuxt": "^4.2.2",
         "vite-tsconfig-paths": "^6.0.1"

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 onlyBuiltDependencies:
-  - esbuild
+    - esbuild
+    - sharp@0.34.5