refactor：删除已弃用的组件和样式，迁移到 Tailwind CSS

- 改进项目页面、网站页面、友链页面
- 从 styles.css 中移除全局样式。
- 添加 tailwind.config.ts 以配置 Tailwind CSS。
- 更新 tsconfig.json，加入 Vue 组件的新路径映射。

app/pages/about.vue

@@ -0,0 +1,84 @@
+<template>
+    <main class="page">
+        <HeroSection :profile="profile" />
+        <SkillsSection :skills="skills" />
+        <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>
+
+<script setup lang="ts">
+import { onMounted, reactive } from "vue";
+import { useRuntimeConfig, definePageMeta } from "#imports";
+import HeroSection from "~/components/HeroSection.vue";
+import SkillsSection from "~/components/SkillsSection.vue";
+import StatsSection from "~/components/StatsSection.vue";
+import siteConfig from "@/config/siteConfig";
+
+const profile = siteConfig.profile;
+const skills = siteConfig.skills;
+const wakatime = siteConfig.wakatime;
+const config = useRuntimeConfig();
+const githubToken = config.public.githubToken ?? "";
+
+type GithubHeatmap = {
+    username: string;
+    heatmapUrl: string;
+    languages?: { name: string; percent: number }[];
+};
+
+const github = reactive<GithubHeatmap>({
+    ...siteConfig.github,
+    heatmapUrl: `https://ghchart.rshah.org/${siteConfig.github.username}`,
+    languages: [],
+});
+
+definePageMeta({
+    order: 1,
+    label: "关于",
+});
+
+onMounted(() => {
+    fetchGithubMeta();
+});
+
+async function fetchGithubMeta() {
+    try {
+        const headers: HeadersInit = {};
+        if (githubToken) {
+            headers.Authorization = `Bearer ${githubToken}`;
+        }
+        const resp = await fetch(`https://api.github.com/users/${github.username}/repos?per_page=100&sort=updated`, {
+            headers,
+        });
+        const data = await resp.json();
+        if (!Array.isArray(data)) return;
+        type GithubRepo = { language?: string };
+        const repos = data as GithubRepo[];
+        const counts: Record<string, number> = {};
+        repos.forEach((repo) => {
+            if (!repo.language) return;
+            counts[repo.language] = (counts[repo.language] || 0) + 1;
+        });
+        const total = Object.values(counts).reduce((sum, value) => sum + value, 0) || 1;
+        const parsed = Object.entries(counts)
+            .map(([name, count]) => ({ name, count }))
+            .sort((a, b) => b.count - a.count)
+            .slice(0, 5);
+        github.languages = parsed.map((item) => ({
+            name: item.name,
+            percent: Math.round((item.count / total) * 100),
+        }));
+    } catch (error) {
+        console.error("Failed to fetch GitHub metadata:", error);
+    }
+}
+</script>

app/pages/friends.vue

@@ -0,0 +1,17 @@
+<template>
+    <main class="page">
+        <FriendsSection :friends="friends" />
+    </main>
+</template>
+
+<script setup>
+import FriendsSection from "~/components/FriendsSection.vue";
+import siteConfig from "~/config/siteConfig";
+
+const friends = siteConfig.friends;
+
+definePageMeta({
+    order: 4,
+    label: "友链",
+});
+</script>

app/pages/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <main class="page">
+        <HeroSection :profile="profile" />
+        <SocialLinks :links="socialLinks" />
+        <AboutSection :items="about" :profile="profile" />
+    </main>
+</template>
+
+<script setup>
+import HeroSection from "~/components/HeroSection.vue";
+import SocialLinks from "~/components/SocialLinks.vue";
+import AboutSection from "~/components/AboutSection.vue";
+import siteConfig from "~/config/siteConfig";
+
+const profile = siteConfig.profile;
+const socialLinks = siteConfig.socialLinks;
+const about = siteConfig.about;
+
+definePageMeta({
+    order: 0,
+    label: "首页",
+});
+</script>

app/pages/projects.vue

@@ -0,0 +1,17 @@
+<template>
+    <main class="page">
+        <ProjectsSection :projects="projects" />
+    </main>
+</template>
+
+<script setup>
+import ProjectsSection from "~/components/ProjectsSection.vue";
+import siteConfig from "~/config/siteConfig";
+
+const projects = siteConfig.projects;
+
+definePageMeta({
+    order: 3,
+    label: "项目",
+});
+</script>

app/pages/sites.vue

@@ -0,0 +1,17 @@
+<template>
+    <main class="page">
+        <SitesSection :sites="sites" />
+    </main>
+</template>
+
+<script setup>
+import SitesSection from "~/components/SitesSection.vue";
+import siteConfig from "~/config/siteConfig";
+
+const sites = siteConfig.sites;
+
+definePageMeta({
+    order: 2,
+    label: "网站",
+});
+</script>