feat: 添加站点元数据配置以增强SEO支持

在多个组件中将 `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` 配置，以支持预渲染和增量静态生成。

.github/workflows/lint-format.yml

@@ -0,0 +1,80 @@
+name: Lint and Format
+
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+    branches: ["**"]
+
+jobs:
+  lint:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: "npm"
+
+      - name: Enable corepack and install npm
+        run: |
+          corepack enable
+          corepack prepare npm@latest --activate
+
+      - name: Install dependencies
+        run: npm install --frozen-lockfile
+
+      - name: Run ESLint
+        run: npm lint
+
+      - name: Run Prettier check
+        run: npm format:check
+
+  format:
+    name: Auto-format (eslint --fix)
+    runs-on: ubuntu-latest
+    needs: lint
+    if: github.event_name == 'push'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: "npm"
+
+      - name: Enable corepack and install npm
+        run: |
+          corepack enable
+          corepack prepare npm@latest --activate
+
+      - name: Install dependencies
+        run: npm install --frozen-lockfile
+
+      - name: Run Prettier --write
+        run: npm format
+
+      - name: Run ESLint --fix
+        run: npm lint:fix
+
+      - name: Commit & push fixes
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          if ! git diff --quiet; then
+            git add -A
+            git commit -m "chore: auto format by GitHub Actions" || echo "No changes to commit"
+            git push
+          else
+            echo "No formatting changes"
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,6 +1,6 @@
 # dependencies
 node_modules/
-pnpm-lock.yaml
+# pnpm-lock.yaml
 package-lock.json
 yarn.lock
 

.prettierignore

@@ -0,0 +1,18 @@
+node_modules/
+.output/
+.nuxt/
+dist/
+build/
+public/build/
+.vscode/
+.pnp.*
+coverage/
+*.log
+*.lock
+pnpm-lock.yaml
+.env
+.env.*
+.DS_Store
+
+# ignore generated images
+public/images/generated/

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css"
+}

README.md

@@ -1,231 +1,242 @@
-# Cloud Home
+# Cloud Home
-
+
-一款基于 Nuxt 4 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
+一款基于 Nuxt 4 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
-
+
-## 特性
+## 特性
-
+
-- 🎨 个性化主页：头像、社交链接、技能、站点/项目列表可配置。
+- 🎨 个性化主页：头像、社交链接、技能、站点/项目列表可配置。
-- 🔗 友链模块：支持申请表单、邮件通知、随机顺序展示。
+- 🔗 友链模块：支持申请表单、邮件通知、随机顺序展示。
-- 📱 响应式设计：适配桌面与移动端。
+- 📱 响应式设计：适配桌面与移动端。
-- ⚙️ Serverless 部署支持
+- ⚙️ Serverless 部署支持
-
+
-## 技术栈
+## 技术栈
-
+
-- 前端：Nuxt 4 + Tailwind CSS
+- 前端：Nuxt 4 + Tailwind CSS
-- 构建 / 运行：Nuxt 4 + Nitro
+- 构建 / 运行：Nuxt 4 + Nitro
-- 部署：Vercel（Nuxt 构建 + Nitro 函数）
+- 部署：Vercel（Nuxt 构建 + Nitro 函数）
-
+
-## TODO
+## TODO
-
+
-- [ ] 增加主题色配置
+- [ ] 增加主题色配置
-- [ ] 增加追番模块
+- [ ] 增加追番模块
-- [ ] 增加留言板模块
+- [ ] 增加留言板模块
-
+
-## 致谢
+## 致谢
-
+
-排名不分先后
+排名不分先后
-
+
-- [Skill Icons](https://github.com/tandpfun/skill-icons)：技能图标库，本项目的技能图标来源。
+- [Skill Icons](https://github.com/tandpfun/skill-icons)：技能图标库，本项目的技能图标来源。
-- [Netease Mini Player](https://github.com/numakkiyu/NeteaseMiniPlayer)：迷你网易云播放器组件，为本项目的音乐播放功能提供支持。（本项目使用[本人fork的版本](https://github.com/RhenCloud/NeteaseMiniPlayer)）
+- [Netease Mini Player](https://github.com/numakkiyu/NeteaseMiniPlayer)：迷你网易云播放器组件，为本项目的音乐播放功能提供支持。（本项目使用[本人fork的版本](https://github.com/RhenCloud/NeteaseMiniPlayer)）
-
+
-感谢以上开源项目原作者与维护者的贡献。
+感谢以上开源项目原作者与维护者的贡献。
-
+
-## 配置指南
+## 配置指南
-
+
-### 站点配置文件 (`src/config/siteConfig.ts`)
+### 站点配置文件 (`src/config/siteConfig.ts`)
-
+
-本项目的所有静态内容配置均集中在 `src/config/siteConfig.ts` 文件中。
+本项目的所有静态内容配置均集中在 `src/config/siteConfig.ts` 文件中。
-
+
-```typescript
+```typescript
-const siteConfig: SiteConfig = {
+const siteConfig: SiteConfig = {
-    profile: {
+  profile: {
-        name: "Example User", // 你的名字
+    name: "Example User", // 你的名字
-        title: "I'm a software developer.", // 你的简介，可为空
+    title: "I'm a software developer.", // 你的简介，可为空
-        avatar: "/avatar.webp", // 你的头像，可为public目录下的文件或外部链接
+    avatar: "/avatar.webp", // 你的头像，可为public目录下的文件或外部链接
-        bio: "Hello World", // 你的喜欢的一句话，可为空
+    bio: "Hello World", // 你的喜欢的一句话，可为空
-        birthday: "xxxx-xx-xx", // 你的生日，可为空
+    birthday: "xxxx-xx-xx", // 你的生日，可为空
-        gender: "", // 你的性别，可为空
+    gender: "", // 你的性别，可为空
-        pronouns: "", // 你希望别人如何称呼你，可为空
+    pronouns: "", // 你希望别人如何称呼你，可为空
-        location: "", // 你的居住地，可为空
+    location: "", // 你的居住地，可为空
-    },
+  },
-
+
-    // 社交链接，预定义的社交链接可在 `src/components/SocialLink.vue` 中查阅
+  // 社交链接，预定义的社交链接可在 `src/components/SocialLink.vue` 中查阅
-    socialLinks: [
+  socialLinks: [
-        { name: "GitHub", url: "https://github.com/ExampleUser" },
+    { name: "GitHub", url: "https://github.com/ExampleUser" },
-        { name: "Email", url: "mailto:you@example.com" },
+    { name: "Email", url: "mailto:you@example.com" },
-        { name: "Telegram", url: "https://t.me/ExampleUser" },
+    { name: "Telegram", url: "https://t.me/ExampleUser" },
-        { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
+    { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
-        { name: "Blog", url: "https://blog.example.com" },
+    { name: "Blog", url: "https://blog.example.com" },
-    ],
+  ],
-
+
-    github: {
+  github: {
-        username: "ExampleUser", // 你的 GitHub 用户名
+    username: "ExampleUser", // 你的 GitHub 用户名
-    },
+  },
-
+
-    // 个人介绍卡片
+  // 个人介绍卡片
-    about: [
+  about: [
-        { title: "Example", desc: "Example description", icon: "🧠" },
+    { title: "Example", desc: "Example description", icon: "🧠" },
-        { title: "Example", desc: "Example description", icon: "🛠️" },
+    { title: "Example", desc: "Example description", icon: "🛠️" },
-        { title: "Example", desc: "Example description", icon: "🎬" },
+    { title: "Example", desc: "Example description", icon: "🎬" },
-        { title: "Example", desc: "Example description", icon: "🎮" },
+    { title: "Example", desc: "Example description", icon: "🎮" },
-    ],
+  ],
-
+
-    siteMeta: {
+  siteMeta: {
-        title: "Example Title", // 网站标题
+    title: "Example Title", // 网站标题
-        icon: "/favicon.ico", // 网站图标，可为public目录下的文件或外部链接
+    icon: "/favicon.ico", // 网站图标，可为public目录下的文件或外部链接
-        startDate:"xxxx-xx-xx", // 网站创建日期
+    startDate: "xxxx-xx-xx", // 网站创建日期
-    },
+  },
-
+
-    music: {
+  music: {
-        // 是否启用音乐播放器
+    // 是否启用音乐播放器
-        enable: true,
+    enable: true,
-        // floating - 浮动模式播放器（推荐）- 用于播放网易云歌单
+    // floating - 浮动模式播放器（推荐）- 用于播放网易云歌单
-        // embed - 嵌入模式播放器 - 用于播放网易云单曲
+    // embed - 嵌入模式播放器 - 用于播放网易云单曲
-        mode: "floating", // "floating" 或 "embed"
+    mode: "floating", // "floating" 或 "embed"
-        // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
+    // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
-        playlistId: undefined, // 例如: "14273792576"
+    playlistId: undefined, // 例如: "14273792576"
-        // 歌曲ID：仅在嵌入模式下使用
+    // 歌曲ID：仅在嵌入模式下使用
-        songId: undefined, // 例如: "554242291"
+    songId: undefined, // 例如: "554242291"
-        // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
+    // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
-        position: "bottom-left",
+    position: "bottom-left",
-        // 是否显示歌词
+    // 是否显示歌词
-        lyric: true,
+    lyric: true,
-        // 主题: "light" | "dark" | "auto"
+    // 主题: "light" | "dark" | "auto"
-        theme: "dark",
+    theme: "dark",
-        // 是否自动播放
+    // 是否自动播放
-        autoplay: false,
+    autoplay: false,
-        // 是否默认以黑胶唱片状态启动（仅浮动模式）
+    // 是否默认以黑胶唱片状态启动（仅浮动模式）
-        defaultMinimized: true,
+    defaultMinimized: true,
-        // 标签页非激活时是否自动暂停
+    // 标签页非激活时是否自动暂停
-        autoPause: false,
+    autoPause: false,
-        // Music API 配置
+    // Music API 配置
-        apiUrls: ["https://www.bilibili.uno/api", "https://meting-api.wangcy.site/api"],
+    apiUrls: ["https://www.bilibili.uno/api", "https://meting-api.wangcy.site/api"],
-    },
+  },
-
+
-    umami: {
+  umami: {
-        enable: true, // 是否启用 Umami 分析
+    enable: true, // 是否启用 Umami 分析
-        url: "https://cloud.umami.is/script.js", // Umami 分析脚本 URL，一般无需修改
+    url: "https://cloud.umami.is/script.js", // Umami 分析脚本 URL，一般无需修改
-        websiteId: "YOUR_WEBSITE_ID", // Umami 网站 ID
+    websiteId: "YOUR_WEBSITE_ID", // Umami 网站 ID
-        apiBase: "https://api.umami.is", // Umami API 地址，一般无需修改
+    apiBase: "https://api.umami.is", // Umami API 地址，一般无需修改
-    },
+  },
-
+
-    wakatime: {
+  wakatime: {
-        enable: true, // 是否启用 Wakatime 统计
+    enable: true, // 是否启用 Wakatime 统计
-        apiUrl: "https://wakatime.com/api/v1", // Wakatime API 地址，默认官方地址
+    apiUrl: "https://wakatime.com/api/v1", // Wakatime API 地址，默认官方地址
-    },
+  },
-
+
-    // 技能图标展示，详见https://github.com/tandpfun/skill-icons#icons-list
+  // 技能图标展示，详见https://github.com/tandpfun/skill-icons#icons-list
-    skills: [
+  skills: [
-        { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
+    { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
-        { title: "后端 / 云", items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"] },
+    {
-        { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
+      title: "后端 / 云",
-        { title: "操作系统", items: ["arch", "linux", "windows"] },
+      items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"],
-    ],
+    },
-
+    { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
-    sites: [
+    { title: "操作系统", items: ["arch", "linux", "windows"] },
-        {
+  ],
-            name: "Example Site 1",
+
-            desc: "Example Site 1",
+  sites: [
-            url: "https://example1.com",
+    {
-        },
+      name: "Example Site 1",
-        {
+      desc: "Example Site 1",
-            name: "Example Site 2",
+      url: "https://example1.com",
-            desc: "Example Site 2",
+    },
-            url: "https://example2.com",
+    {
-        },
+      name: "Example Site 2",
-    ],
+      desc: "Example Site 2",
-
+      url: "https://example2.com",
-    projects: [
+    },
-        { name: "Example Project 1", url: "https://github.com/ExampleUser/example-project-1", desc: "Example Project 1" },
+  ],
-        { name: "Example Project 2", url: "https://github.com/ExampleUser/example-project-2", desc: "Example Project 2" },
+
-    ],
+  projects: [
-
+    {
-    friends: [
+      name: "Example Project 1",
-        {
+      url: "https://github.com/ExampleUser/example-project-1",
-            name: "Example Site 1",
+      desc: "Example Project 1",
-            desc: "Example Site 1",
+    },
-            url: "https://example1.com",
+    {
-            avatar: "https://example1.com/avatar.png",
+      name: "Example Project 2",
-        },
+      url: "https://github.com/ExampleUser/example-project-2",
-        {
+      desc: "Example Project 2",
-            name: "Example Site 2",
+    },
-            desc: "Example Site 2",
+  ],
-            url: "https://example2.com",
+
-            avatar: "https://example2.com/avatar.png",
+  friends: [
-        },
+    {
-    ],
+      name: "Example Site 1",
-
+      desc: "Example Site 1",
-    footer: {
+      url: "https://example1.com",
-        beian: "备案号", // 备案号，留空则不显示
+      avatar: "https://example1.com/avatar.png",
-        beianLink: "https://beian.miit.gov.cn/", // 备案号链接，一般无需修改
+    },
-        customHtml: '', // 自定义 HTML 代码，如统计代码等
+    {
-        hitokoto: {
+      name: "Example Site 2",
-            enable: true, // 是否启用一言
+      desc: "Example Site 2",
-            type: "a&b&c&d&j", // 一言类型，详见 https://developer.hitokoto.cn/sentence/#%E5%8F%A5%E5%AD%90%E7%B1%BB%E5%9E%8B-%E5%8F%82%E6%95%B0
+      url: "https://example2.com",
-        },
+      avatar: "https://example2.com/avatar.png",
-    },
+    },
-};
+  ],
-```
+
-
+  footer: {
-### 其他配置
+    beian: "备案号", // 备案号，留空则不显示
-
+    beianLink: "https://beian.miit.gov.cn/", // 备案号链接，一般无需修改
-- **404 页面**：修改 `public/404.html` 来自定义 404 错误页面的样式与内容。
+    customHtml: "", // 自定义 HTML 代码，如统计代码等
-- **友链展示逻辑**：`FriendsSection.vue` 默认使用随机顺序渲染 `siteConfig.friends`，如需固定顺序请修改该组件。
+    hitokoto: {
-
+      enable: true, // 是否启用一言
-## 环境变量
+      type: "a&b&c&d&j", // 一言类型，详见 https://developer.hitokoto.cn/sentence/#%E5%8F%A5%E5%AD%90%E7%B1%BB%E5%9E%8B-%E5%8F%82%E6%95%B0
-
+    },
-在 Vercel 控制台或本地 `.env` 配置：
+  },
-
+};
-- `NUXT_PUBLIC_GITHUB_TOKEN`: 具有仓库读取权限的 GitHub Token，用于绕过 GitHub API 速率限制。（可选）
+```
-- `NUXT_PUBLIC_UMAMI_API_KEY`: 可选的 Umami API Key，用于展示访问量统计数据。
+
-- `WAKATIME_API_KEY`: Wakatime API Key，用于获取编码统计数据。
+### 其他配置
-- `WAKATIME_API_URL`: Wakatime API 地址，覆盖默认 `https://wakatime.com/api/v1`（可选）。
+
-- `SMTP_HOST`: 邮件服务器主机名
+- **404 页面**：修改 `public/404.html` 来自定义 404 错误页面的样式与内容。
-- `SMTP_PORT`: 端口（如 465 或 587）
+- **友链展示逻辑**：`FriendsSection.vue` 默认使用随机顺序渲染 `siteConfig.friends`，如需固定顺序请修改该组件。
-- `SMTP_USER`: 发件人邮箱账号
+
-- `SMTP_PASS`: 邮箱授权码或密码
+## 环境变量
-- `SENDER_EMAIL`: 发件人地址（通常同 SMTP_USER）
+
-- `ADMIN_EMAIL`: 接收通知的邮箱地址
+在 Vercel 控制台或本地 `.env` 配置：
-- `SMTP_SECURE`：是否强制启用 SSL/TLS（默认为 `true` 当端口为 465）。
+
-
+- `NUXT_PUBLIC_GITHUB_TOKEN`: 具有仓库读取权限的 GitHub Token，用于绕过 GitHub API 速率限制。（可选）
-## 本地开发
+- `NUXT_PUBLIC_UMAMI_API_KEY`: 可选的 Umami API Key，用于展示访问量统计数据。
-
+- `WAKATIME_API_KEY`: Wakatime API Key，用于获取编码统计数据。
-```bash
+- `WAKATIME_API_URL`: Wakatime API 地址，覆盖默认 `https://wakatime.com/api/v1`（可选）。
-pnpm install
+- `SMTP_HOST`: 邮件服务器主机名
-pnpm dev
+- `SMTP_PORT`: 端口（如 465 或 587）
-```
+- `SMTP_USER`: 发件人邮箱账号
-
+- `SMTP_PASS`: 邮箱授权码或密码
-访问 `http://localhost:3000/`。
+- `SENDER_EMAIL`: 发件人地址（通常同 SMTP_USER）
-
+- `ADMIN_EMAIL`: 接收通知的邮箱地址
-## 构建
+- `SMTP_SECURE`：是否强制启用 SSL/TLS（默认为 `true` 当端口为 465）。
-
+
-```bash
+## 本地开发
-pnpm build
+
-```
+```bash
-
+pnpm install
-产物输出到 Nuxt 的 `.output/` 目录，该目录同时包含静态资源与 Nitro 服务器入口。
+pnpm dev
-
+```
-## 部署到 Vercel
+
-
+访问 `http://localhost:3000/`。
-1. 导入仓库到 Vercel。
+
-2. 设置上文的环境变量。
+## 构建
-
+
-## API
+```bash
-
+pnpm build
-雁型的 Nitro 路由位于 `server/api`，依旧暴露同样的 `/api` 前缀。
+```
-
+
-- `POST /api/send-mail`：友链申请邮件发送。请求体示例：
+产物输出到 Nuxt 的 `.output/` 目录，该目录同时包含静态资源与 Nitro 服务器入口。
-
+
-```json
+## 部署到 Vercel
-{
+
-    "name": "RhenCloud",
+1. 导入仓库到 Vercel。
-    "url": "https://example.com",
+2. 设置上文的环境变量。
-    "desc": "个人博客",
+
-    "email": "you@example.com",
+## API
-    "avatar": "https://example.com/avatar.png"
+
-}
+雁型的 Nitro 路由位于 `server/api`，依旧暴露同样的 `/api` 前缀。
-```
+
-
+- `POST /api/send-mail`：友链申请邮件发送。请求体示例：
-## 许可
+
-
+```json
-MIT License.
+{
+  "name": "RhenCloud",
+  "url": "https://example.com",
+  "desc": "个人博客",
+  "email": "you@example.com",
+  "avatar": "https://example.com/avatar.png"
+}
+```
+
+## 许可
+
+MIT License.

app/app.vue

@@ -1,75 +1,75 @@
-<template>
+<template>
-    <div class="app-shell" :style="backgroundStyle">
+  <div class="app-shell" :style="backgroundStyle">
-        <div class="background-overlay" :style="overlayStyle"></div>
+    <div class="background-overlay" :style="overlayStyle" />
-        <button
+    <button
-            class="background-toggle"
+      class="background-toggle"
-            @click="hideComponents = !hideComponents"
+      :title="hideComponents ? '显示内容' : '隐藏内容'"
-            :title="hideComponents ? '显示内容' : '隐藏内容'"
+      :class="{ active: hideComponents }"
-            :class="{ active: hideComponents }"
+      @click="hideComponents = !hideComponents"
-        >
+    >
-            <span class="toggle-icon">{{ hideComponents ? "👁️" : "🙈" }}</span>
+      <span class="toggle-icon">{{ hideComponents ? "👁️" : "🙈" }}</span>
-            <span class="toggle-label">{{ hideComponents ? "显示" : "隐藏" }}</span>
+      <span class="toggle-label">{{ hideComponents ? "显示" : "隐藏" }}</span>
-        </button>
+    </button>
-        <div class="content-stack">
+    <div class="content-stack">
-            <Transition name="fade-down">
+      <Transition name="fade-down">
-                <main class="app-body" v-if="!hideComponents" key="content">
+        <main v-if="!hideComponents" key="content" class="app-body">
-                    <NuxtPage />
+          <NuxtPage />
-                </main>
+        </main>
-            </Transition>
+      </Transition>
-            <Transition name="fade-up">
+      <Transition name="fade-up">
-                <PageSwitcher v-if="!hideComponents" key="switcher" />
+        <PageSwitcher v-if="!hideComponents" key="switcher" />
-            </Transition>
+      </Transition>
-            <Transition name="fade-down">
+      <Transition name="fade-down">
-                <FooterSection v-if="!hideComponents" :contact="contact" key="footer" />
+        <FooterSection v-if="!hideComponents" key="footer" :contact="contact" />
-            </Transition>
+      </Transition>
-        </div>
+    </div>
-        <MusicPlayer />
+    <MusicPlayer />
-    </div>
+  </div>
-</template>
+</template>
-
+
-<script setup>
+<script setup>
-import { onMounted, computed, ref } from "vue";
+import { onMounted, computed, ref } from "vue";
-import PageSwitcher from "~/components/PageSwitcher.vue";
+import PageSwitcher from "~/components/PageSwitcher.vue";
-import FooterSection from "~/components/FooterSection.vue";
+import FooterSection from "~/components/FooterSection.vue";
-import MusicPlayer from "~/components/MusicPlayer.vue";
+import MusicPlayer from "~/components/MusicPlayer.vue";
-import siteConfig from "~/config/siteConfig";
+import siteConfig from "~/config/siteConfig";
-
+
-const contact = siteConfig.footer;
+const contact = siteConfig.footer;
-const bg = siteConfig.appearance.background;
+const bg = siteConfig.appearance.background;
-const isMobile = ref(false);
+const isMobile = ref(false);
-const hideComponents = ref(false);
+const hideComponents = ref(false);
-
+
-const checkIfMobile = () => {
+const checkIfMobile = () => {
-    isMobile.value = typeof window !== "undefined" && window.innerWidth <= 768;
+  isMobile.value = typeof window !== "undefined" && window.innerWidth <= 768;
-};
+};
-
+
-onMounted(() => {
+onMounted(() => {
-    checkIfMobile();
+  checkIfMobile();
-    window.addEventListener("resize", checkIfMobile);
+  window.addEventListener("resize", checkIfMobile);
-});
+});
-
+
-const getBackgroundImage = () => {
+const getBackgroundImage = () => {
-    if (!bg.enable) return undefined;
+  if (!bg.enable) return undefined;
-    const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
+  const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
-    if (!image) return undefined;
+  if (!image) return undefined;
-    return image.startsWith("http") ? image : `/${image}`;
+  return image.startsWith("http") ? image : `/${image}`;
-};
+};
-
+
-const backgroundStyle = computed(() => ({ backgroundColor: "#0f1629" }));
+const backgroundStyle = computed(() => ({ backgroundColor: "#0f1629" }));
-
+
-const overlayStyle = computed(() => {
+const overlayStyle = computed(() => {
-    const imageUrl = getBackgroundImage();
+  const imageUrl = getBackgroundImage();
-    if (!bg.enable || !imageUrl) return {};
+  if (!bg.enable || !imageUrl) return {};
-    return {
+  return {
-        backgroundImage: `linear-gradient(${bg.overlay}, ${bg.overlay}), url('${imageUrl}')`,
+    backgroundImage: `linear-gradient(${bg.overlay}, ${bg.overlay}), url('${imageUrl}')`,
-        backgroundSize: "cover",
+    backgroundSize: "cover",
-        backgroundPosition: "center",
+    backgroundPosition: "center",
-        backgroundAttachment: "fixed",
+    backgroundAttachment: "fixed",
-        filter: bg.blur ? `blur(${bg.blur}px)` : undefined,
+    filter: bg.blur ? `blur(${bg.blur}px)` : undefined,
-    };
+  };
-});
+});
-</script>
+</script>
-
+
-<!-- <style>
+<!-- <style>
-@import "/css/netease-mini-player-v2.css";
+@import "/css/netease-mini-player-v2.css";
-</style> -->
+</style> -->

app/components/AboutSection.vue

@@ -1,84 +1,109 @@
-<template>
+<template>
-    <section class="card flex flex-col gap-2.5">
+  <section class="card flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1">个人简介</h2>
+    <h2 class="m-0 mb-1">个人简介</h2>
-        <p class="text-text-muted text-sm m-0 mb-3 block">关于我 · About Me</p>
+    <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">
+    <div class="flex flex-wrap justify-center gap-3.5">
-            <article v-if="age"
+      <article
-                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">
+        v-if="age"
-                <div class="flex items-center gap-2">
+        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"
-                    <span class="text-xl leading-none">🎂</span>
+      >
-                    <h3 class="m-0 text-sm font-semibold text-white/90">年龄</h3>
+        <div class="flex items-center gap-2">
-                </div>
+          <span class="text-xl leading-none">🎂</span>
-                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+          <h3 class="m-0 text-sm font-semibold text-white/90">年龄</h3>
-                    {{ age }} 岁
+        </div>
-                </p>
+        <p
-            </article>
+          class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60"
-
+        >
-            <article v-if="profile?.gender"
+          {{ 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-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark">
+        </p>
-                <div class="flex items-center gap-2">
+      </article>
-                    <span class="text-xl leading-none">⚧️</span>
+
-                    <h3 class="m-0 text-sm font-semibold text-white/90">性别</h3>
+      <article
-                </div>
+        v-if="profile?.gender"
-                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+        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"
-                    {{ profile.gender }}
+      >
-                </p>
+        <div class="flex items-center gap-2">
-            </article>
+          <span class="text-xl leading-none">⚧️</span>
-
+          <h3 class="m-0 text-sm font-semibold text-white/90">性别</h3>
-            <article v-if="profile?.pronouns"
+        </div>
-                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">
+        <p
-                <div class="flex items-center gap-2">
+          class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60"
-                    <span class="text-xl leading-none">🗣️</span>
+        >
-                    <h3 class="m-0 text-sm font-semibold text-white/90">代词</h3>
+          {{ profile.gender }}
-                </div>
+        </p>
-                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+      </article>
-                    {{ profile.pronouns }}
+
-                </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?.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">
-                <div class="flex items-center gap-2">
+          <span class="text-xl leading-none">🗣️</span>
-                    <span class="text-xl leading-none">📍</span>
+          <h3 class="m-0 text-sm font-semibold text-white/90">代词</h3>
-                    <h3 class="m-0 text-sm font-semibold text-white/90">地区</h3>
+        </div>
-                </div>
+        <p
-                <p class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60">
+          class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60"
-                    {{ profile.location }}
+        >
-                </p>
+          {{ profile.pronouns }}
-            </article>
+        </p>
-        </div>
+      </article>
-
+
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mt-2.5">
+      <article
-            <article v-for="item in items" :key="item.title"
+        v-if="profile?.location"
-                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">
+        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 mb-1.5">
+      >
-                    <span class="text-2xl leading-none">{{ item.icon }}</span>
+        <div class="flex items-center gap-2">
-                    <h3 class="m-0 text-base font-semibold">{{ item.title }}</h3>
+          <span class="text-xl leading-none">📍</span>
-                </div>
+          <h3 class="m-0 text-sm font-semibold text-white/90">地区</h3>
-                <p class="text-text-muted text-sm m-0">{{ item.desc }}</p>
+        </div>
-            </article>
+        <p
-        </div>
+          class="text-text-muted text-xs m-0 text-right whitespace-nowrap font-medium text-white/60"
-    </section>
+        >
-</template>
+          {{ profile.location }}
-
+        </p>
-<script setup>
+      </article>
-import { computed } from "vue";
+    </div>
-
+
-const props = defineProps({
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mt-2.5">
-    items: Array,
+      <article
-    profile: Object,
+        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"
-const age = computed(() => {
+      >
-    if (!props.profile?.birthday) return null;
+        <div class="flex items-center gap-2 mb-1.5">
-    const birthDate = new Date(props.profile.birthday);
+          <span class="text-2xl leading-none">{{ item.icon }}</span>
-    const today = new Date();
+          <h3 class="m-0 text-base font-semibold">{{ item.title }}</h3>
-    let age = today.getFullYear() - birthDate.getFullYear();
+        </div>
-    const m = today.getMonth() - birthDate.getMonth();
+        <p class="text-text-muted text-sm m-0">{{ item.desc }}</p>
-    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+      </article>
-        age--;
+    </div>
-    }
+  </section>
-    return age;
+</template>
-});
+
-</script>
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  profile: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+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>

app/components/FooterSection.vue

@@ -1,125 +1,146 @@
-<template>
+<template>
-    <footer class="card text-center mt-auto w-full flex flex-col gap-1">
+  <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>
+      「{{ quote }}」<span v-if="from" class="ml-1.5">—— {{ from }}</span>
-        </p>
+    </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 }}
+      👁️ {{ visitors }} · 📊 {{ pageviews }}
-        </p>
+    </p>
-
+
-        <!-- 备案信息 -->
+    <!-- 备案信息 -->
-        <p class="text-text-muted text-xs m-0" v-if="contact.beian">
+    <p v-if="contact?.beian" class="text-text-muted text-xs m-0">
-            <a :href="contact.beianLink || 'https://beian.miit.gov.cn/'" target="_blank" rel="noreferrer"
+      <NuxtLink
-                class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100">
+        :to="contact.beianLink || '/'"
-                {{ contact.beian }}
+        class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100"
-            </a>
+      >
-        </p>
+        {{ contact.beian }}
-
+      </NuxtLink>
-        <!-- 框架与技术栈信息 -->
+    </p>
-        <p class="text-text-muted text-xs m-0">
+
-            Powered by
+    <!-- 框架与技术栈信息 -->
-            <a href="https://nuxt.com" target="_blank" rel="noreferrer"
+    <p class="text-text-muted text-xs m-0">
-                class="text-primary hover:text-accent transition-colors">Nuxt 4</a>
+      Powered by
-            ·
+      <a
-            <a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
+        href="https://nuxt.com"
-                class="text-primary hover:text-accent transition-colors">Tailwind CSS</a>
+        target="_blank"
-            ·
+        rel="noreferrer"
-            <a href="https://vuejs.org" target="_blank" rel="noreferrer"
+        class="text-primary hover:text-accent transition-colors"
-                class="text-primary hover:text-accent transition-colors">Vue 3</a>
+        >Nuxt 4</a
-        </p>
+      >
-
+      ·
-        <!-- 自定义 HTML -->
+      <a
-        <div v-if="contact.customHtml" v-html="contact.customHtml"></div>
+        href="https://tailwindcss.com"
-    </footer>
+        target="_blank"
-</template>
+        rel="noreferrer"
-
+        class="text-primary hover:text-accent transition-colors"
-<script setup>
+        >Tailwind CSS</a
-import { onMounted, ref } from "vue";
+      >
-import { useRuntimeConfig } from "#imports";
+      ·
-import siteConfig from "~/config/siteConfig";
+      <a
-const props = defineProps({ contact: Object });
+        href="https://vuejs.org"
-const config = useRuntimeConfig();
+        target="_blank"
-const quote = ref("");
+        rel="noreferrer"
-const from = ref("");
+        class="text-primary hover:text-accent transition-colors"
-const pageviews = ref(0);
+        >Vue 3</a
-const visitors = ref(0);
+      >
-const statsError = ref(true);
+    </p>
-const showHitokoto = siteConfig.footer?.hitokoto?.enable;
+
-const showStats = ref(siteConfig.umami?.enable);
+    <!-- eslint-disable-next-line vue/no-v-html -->
-
+    <div v-if="contact?.customHtml" v-html="contact.customHtml" />
-const buildHitokotoUrl = () => {
+  </footer>
-    const type = siteConfig.footer?.hitokoto?.type;
+</template>
-    const url = new URL("https://v1.hitokoto.cn/");
+
-    if (Array.isArray(type)) {
+<script setup>
-        type.filter(Boolean).forEach((t) => url.searchParams.append("c", t));
+import { onMounted, ref } from "vue";
-    } else if (typeof type === "string") {
+import { useRuntimeConfig } from "#imports";
-        type.split("&")
+import siteConfig from "~/config/siteConfig";
-            .map((t) => t.trim())
+const contact = siteConfig.footer || {};
-            .filter(Boolean)
+const config = useRuntimeConfig();
-            .forEach((t) => url.searchParams.append("c", t));
+const quote = ref("");
-    }
+const from = ref("");
-    return url.toString();
+const pageviews = ref(0);
-};
+const visitors = ref(0);
-
+const statsError = ref(true);
-const fetchHitokoto = async () => {
+const showHitokoto = siteConfig.footer?.hitokoto?.enable;
-    try {
+const showStats = ref(siteConfig.umami?.enable);
-        const resp = await fetch(buildHitokotoUrl());
+
-        const data = await resp.json();
+const buildHitokotoUrl = () => {
-        quote.value = data.hitokoto || "";
+  const type = siteConfig.footer?.hitokoto?.type;
-        from.value = data.from || "";
+  const url = new URL("https://v1.hitokoto.cn/");
-    } catch (e) {
+  if (Array.isArray(type)) {
-        console.warn("Hitokoto fetch failed", e);
+    type.filter(Boolean).forEach((t) => url.searchParams.append("c", t));
-    }
+  } else if (typeof type === "string") {
-};
+    type
-
+      .split("&")
-const fetchStats = async () => {
+      .map((t) => t.trim())
-    try {
+      .filter(Boolean)
-        if (!siteConfig.umami?.apiBase || !siteConfig.umami?.websiteId) {
+      .forEach((t) => url.searchParams.append("c", t));
-            return;
+  }
-        }
+  return url.toString();
-        const apiBase = siteConfig.umami.apiBase;
+};
-        const websiteId = siteConfig.umami.websiteId;
+
-        const apiKey = config.public.umamiApiKey;
+const fetchHitokoto = async () => {
-
+  try {
-        if (!apiKey) return;
+    const resp = await fetch(buildHitokotoUrl());
-
+    const data = await resp.json();
-        // 获取统计数据
+    quote.value = data.hitokoto || "";
-        const endAt = Date.now();
+    from.value = data.from || "";
-        const startAt = new Date(siteConfig.siteMeta.startDate).getTime();
+  } catch (e) {
-
+    console.warn("Hitokoto fetch failed", e);
-        const resp = await fetch(`${apiBase}/v1/websites/${websiteId}/stats?startAt=${startAt}&endAt=${endAt}`, {
+  }
-            headers: {
+};
-                Authorization: `Bearer ${apiKey}`,
+
-            },
+const fetchStats = async () => {
-        });
+  try {
-
+    if (!siteConfig.umami?.apiBase || !siteConfig.umami?.websiteId) {
-        if (!resp.ok) {
+      return;
-            console.warn(`Stats API returned ${resp.status}`);
+    }
-            statsError.value = true;
+    const apiBase = siteConfig.umami.apiBase;
-            return;
+    const websiteId = siteConfig.umami.websiteId;
-        }
+    const apiKey = config.public.umamiApiKey;
-
+
-        const data = await resp.json();
+    if (!apiKey) return;
-        if (data) {
+
-            statsError.value = false;
+    // 获取统计数据
-            pageviews.value = data.pageviews;
+    const endAt = Date.now();
-            visitors.value = data.visitors;
+    const startAt = new Date(siteConfig.siteMeta.startDate).getTime();
-        }
+
-
+    const resp = await fetch(
-        if (pageviews.value === 0 && visitors.value === 0) {
+      `${apiBase}/v1/websites/${websiteId}/stats?startAt=${startAt}&endAt=${endAt}`,
-            showStats.value = false;
+      {
-        }
+        headers: {
-    } catch (e) {
+          Authorization: `Bearer ${apiKey}`,
-        statsError.value = true;
+        },
-        console.debug("Stats fetch failed (this is normal if blocked by ad blocker):", e.message);
+      }
-    }
+    );
-};
+
-
+    if (!resp.ok) {
-onMounted(() => {
+      console.warn(`Stats API returned ${resp.status}`);
-    if (showHitokoto) fetchHitokoto();
+      statsError.value = true;
-    if (showStats.value) fetchStats();
+      return;
-});
+    }
-</script>
+
+    const data = await resp.json();
+    if (data) {
+      statsError.value = false;
+      pageviews.value = data.pageviews;
+      visitors.value = data.visitors;
+    }
+
+    if (pageviews.value === 0 && visitors.value === 0) {
+      showStats.value = false;
+    }
+  } catch (e) {
+    statsError.value = true;
+    console.debug("Stats fetch failed (this is normal if blocked by ad blocker):", e.message);
+  }
+};
+
+onMounted(() => {
+  if (showHitokoto) fetchHitokoto();
+  if (showStats.value) fetchStats();
+});
+</script>

app/components/FriendsSection.vue

@@ -1,225 +1,283 @@
-<template>
+<template>
-    <div class="card panel flex flex-col gap-2.5">
+  <div class="card panel flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1 gradient-text">友情链接</h2>
+    <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>
+    <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">
+    <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
-                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">
+        v-for="f in displayedFriends"
-                <div class="flex items-center justify-between mb-1.5">
+        :key="f.url"
-                    <div class="flex items-center gap-2 min-w-0">
+        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"
-                        <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" />
+        <div class="flex items-center justify-between mb-1.5">
-                        <h3 class="m-0 font-semibold text-base whitespace-nowrap overflow-hidden text-ellipsis">
+          <div class="flex items-center gap-2 min-w-0">
-                            {{ f.name }}
+            <NuxtImg
-                        </h3>
+              v-if="f.avatar"
-                    </div>
+              :src="f.avatar"
-                    <span class="rounded-full px-2.5 py-1 text-xs bg-purple-400/15 text-purple-300">友链</span>
+              :alt="f.name"
-                </div>
+              loading="lazy"
-
+              class="w-12 h-12 rounded-full object-cover border border-white/15"
-                <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
+            />
-                    {{ f.desc || "一个有趣的站点" }}
+            <h3 class="m-0 font-semibold text-base whitespace-nowrap overflow-hidden text-ellipsis">
-                </p>
+              {{ f.name }}
-
+            </h3>
-                <a :href="f.url" target="_blank" rel="noreferrer"
+          </div>
-                    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">
+          <span class="rounded-full px-2.5 py-1 text-xs bg-purple-400/15 text-purple-300"
-                    访问 →
+            >友链</span
-                </a>
+          >
-            </article>
+        </div>
-        </div>
+
-    </div>
+        <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
-    <section class="card flex flex-col gap-2.5">
+          {{ f.desc || "一个有趣的站点" }}
-        <div class="flex justify-center items-center align-center flex-wrap">
+        </p>
-            <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">
+        <NuxtLink
-                申请友链
+          :to="f.url"
-            </button>
+          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"
-        </div>
+        >
-    </section>
+          访问 →
-    <Teleport to="body">
+        </NuxtLink>
-        <div v-if="showDialog" class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
+      </article>
-            @click.self="closeDialog">
+    </div>
-            <div
+  </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">
+  <section class="card flex flex-col gap-2.5">
-                <h3 class="m-0 mb-2">{{ dialogTitle }}</h3>
+    <div class="flex justify-center items-center align-center flex-wrap">
-                <p class="text-text-muted text-sm mb-4">{{ dialogText }}</p>
+      <button
-                <div class="flex justify-end">
+        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 @click="closeDialog"
+        @click="openForm"
-                        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>
+      </button>
-                </div>
+    </div>
-            </div>
+  </section>
-        </div>
+  <Teleport to="body">
-    </Teleport>
+    <div
-
+      v-if="showDialog"
-    <!-- 申请友链模态弹窗 -->
+      class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
-    <Teleport to="body">
+      @click.self="closeDialog"
-        <div v-if="showFormModal"
+    >
-            class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
+      <div
-            @click.self="showFormModal = false">
+        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"
-            <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-2">{{ dialogTitle }}</h3>
-                <h3 class="m-0 mb-4 text-center">申请友链</h3>
+        <p class="text-text-muted text-sm mb-4">{{ dialogText }}</p>
-
+        <div class="flex justify-end">
-                <div class="mb-4 text-sm text-text-primary">
+          <button
-                    <div class="mb-2 font-semibold">请在申请前在你站点添加以下信息（示例 JSON）：</div>
+            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"
-                    <pre
+            @click="closeDialog"
-                        class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto"><code>{{ exampleJson }}</code></pre>
+          >
-                </div>
+            好的
-
+          </button>
-                <form @submit.prevent="submitForm" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        </div>
-                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
+      </div>
-                        网站名称 *
+    </div>
-                        <input v-model="form.name" required placeholder="网站名称"
+  </Teleport>
-                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+
-                    </label>
+  <!-- 申请友链模态弹窗 -->
-
+  <Teleport to="body">
-                    <!-- URL 与 Email 同行 -->
+    <div
-                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+      v-if="showFormModal"
-                        网站链接 *
+      class="fixed inset-0 bg-black/45 backdrop-blur-sm flex items-center justify-center z-50"
-                        <input v-model="form.url" type="url" required placeholder="https://example.com"
+      @click.self="showFormModal = false"
-                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+    >
-                    </label>
+      <div
-                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+        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"
-                        联系邮箱 *
+      >
-                        <input v-model="form.email" type="email" required placeholder="example@example.com"
+        <h3 class="m-0 mb-4 text-center">申请友链</h3>
-                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+
-                    </label>
+        <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">
-                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
+                    <code>{{ exampleJson }}</code>
-                        网站描述
+                </pre>
-                        <input v-model="form.desc" placeholder="可选"
+        </div>
-                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+
-                    </label>
+        <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">
+          <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
-                        头像链接
+            网站名称 *
-                        <input v-model="form.avatar" type="url" placeholder="可选，展示头像"
+            <input
-                            class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none" />
+              v-model="form.name"
-                    </label>
+              required
-
+              placeholder="网站名称"
-                    <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
+              class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none"
-                        想说的话
+            />
-                        <div class="flex items-center gap-2">
+          </label>
-                            <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>
+          <!-- URL 与 Email 同行 -->
-                        </div>
+          <label class="flex fl ex-col gap-1 text-sm text-text-primary font-semibold">
-                    </label>
+            网站链接 *
-
+            <input
-                    <div class="sm:col-span-2 flex items-center justify-center gap-3 mt-2">
+              v-model="form.url"
-                        <button type="button" @click="showFormModal = false"
+              type="url"
-                            class="px-3 py-2 rounded-2xl border border-white/10 bg-white/6">
+              required
-                            取消
+              placeholder="https://example.com"
-                        </button>
+              class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none"
-                        <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">
+          </label>
-                            {{ loading ? "提交中..." : "提交" }}
+          <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
-                        </button>
+            联系邮箱 *
-                    </div>
+            <input
-                    <div class="sm:col-span-2">
+              v-model="form.email"
-                        <span class="text-text-muted text-sm">{{ message }}</span>
+              type="email"
-                    </div>
+              required
-                </form>
+              placeholder="example@example.com"
-            </div>
+              class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none"
-        </div>
+            />
-    </Teleport>
+          </label>
-</template>
+
-
+          <!-- 描述 与 头像 同行 -->
-<script setup>
+          <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
-import { reactive, ref, watch, computed } from "vue";
+            网站描述
-import siteConfig from "../config/siteConfig";
+            <input
-const props = defineProps({ friends: { type: Array, default: () => [] } });
+              v-model="form.desc"
-const showFormModal = ref(false);
+              placeholder="可选"
-const loading = ref(false);
+              class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none"
-const message = ref("");
+            />
-const showDialog = ref(false);
+          </label>
-const dialogTitle = ref("");
+          <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
-const dialogText = ref("");
+            头像链接
-const form = reactive({
+            <input
-    name: "",
+              v-model="form.avatar"
-    url: "",
+              type="url"
-    desc: "",
+              placeholder="可选，展示头像"
-    email: "",
+              class="px-2.5 py-2 rounded-xl border border-white/20 bg-white/8 text-text-primary focus:outline-none"
-    avatar: "",
+            />
-    message: "",
+          </label>
-});
+
-const displayedFriends = ref([]);
+          <label class="flex flex-col gap-1 text-sm text-text-primary font-semibold sm:col-span-2">
-
+            想说的话
-const shuffle = (list) => {
+            <div class="flex items-center gap-2">
-    const arr = [...list];
+              <textarea
-    for (let i = arr.length - 1; i > 0; i--) {
+                v-model="form.message"
-        const j = Math.floor(Math.random() * (i + 1));
+                placeholder="可选，最多50字"
-        [arr[i], arr[j]] = [arr[j], arr[i]];
+                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"
-    return arr;
+              />
-};
+            </div>
-
+          </label>
-watch(
+
-    () => props.friends,
+          <div class="sm:col-span-2 flex items-center justify-center gap-3 mt-2">
-    (val) => {
+            <button
-        displayedFriends.value = shuffle(val || []);
+              type="button"
-    },
+              class="px-3 py-2 rounded-2xl border border-white/10 bg-white/6"
-    { immediate: true }
+              @click="showFormModal = false"
-);
+            >
-
+              取消
-const exampleJson = computed(() => {
+            </button>
-    const name = siteConfig.profile?.name || siteConfig.siteMeta?.title || "";
+            <button
-    const url = siteConfig.siteMeta?.url || "";
+              type="submit"
-    const desc = siteConfig.profile?.bio || "";
+              :disabled="loading"
-    const email = siteConfig.profile.email || "";
+              class="px-3 py-2 rounded-2xl border border-primary/50 bg-primary/12 text-text-primary disabled:opacity-50"
-    const avatarRaw = siteConfig.profile?.avatar || "";
+            >
-    const avatar = resolveUrl(avatarRaw);
+              {{ loading ? "提交中..." : "提交" }}
-    return JSON.stringify({ name, url, desc, email, avatar }, null, 2);
+            </button>
-});
+          </div>
-
+          <div class="sm:col-span-2">
-const openForm = () => {
+            <span class="text-text-muted text-sm">{{ message }}</span>
-    showFormModal.value = true;
+          </div>
-};
+        </form>
-
+      </div>
-// resolve possible local paths to absolute URLs using site meta URL
+    </div>
-const resolveUrl = (p) => {
+  </Teleport>
-    if (!p) return "";
+</template>
-    const s = String(p).trim();
+
-    if (/^https?:\/\//i.test(s) || /^\/\//.test(s)) return s;
+<script setup>
-    const base = (siteConfig.siteMeta && siteConfig.siteMeta.url) ? String(siteConfig.siteMeta.url).replace(/\/$/, "") : "";
+import { reactive, ref, watch, computed } from "vue";
-    if (!base) return s;
+import siteConfig from "../config/siteConfig";
-    if (s.startsWith("/")) return base + s;
+const props = defineProps({ friends: { type: Array, default: () => [] } });
-    return base + "/" + s;
+const showFormModal = ref(false);
-};
+const loading = ref(false);
-
+const message = ref("");
-const submitForm = async () => {
+const showDialog = ref(false);
-    loading.value = true;
+const dialogTitle = ref("");
-    message.value = "";
+const dialogText = ref("");
-    try {
+const form = reactive({
-        const resp = await fetch("/api/send-mail", {
+  name: "",
-            method: "POST",
+  url: "",
-            headers: { "Content-Type": "application/json" },
+  desc: "",
-            body: JSON.stringify(form),
+  email: "",
-        });
+  avatar: "",
-        if (!resp.ok) throw new Error("send failed");
+  message: "",
-        form.name = "";
+});
-        form.url = "";
+const displayedFriends = ref([]);
-        form.desc = "";
+
-        form.email = "";
+const shuffle = (list) => {
-        form.avatar = "";
+  const arr = [...list];
-        form.message = "";
+  for (let i = arr.length - 1; i > 0; i--) {
-        message.value = "提交成功，已发送申请邮件";
+    const j = Math.floor(Math.random() * (i + 1));
-        showFormModal.value = false;
+    [arr[i], arr[j]] = [arr[j], arr[i]];
-        dialogTitle.value = "提交成功";
+  }
-        dialogText.value = "已发送申请邮件，感谢你的提交，将会尽快审核并在通过后通过邮件联系。";
+  return arr;
-        showDialog.value = true;
+};
-    } catch (e) {
+
-        message.value = "提交失败，请稍后重试";
+watch(
-        dialogTitle.value = "提交失败";
+  () => props.friends,
-        dialogText.value = "邮件发送失败，请稍后重试或检查网络连接。";
+  (val) => {
-        showDialog.value = true;
+    displayedFriends.value = shuffle(val || []);
-        console.error(e);
+  },
-    } finally {
+  { immediate: true }
-        loading.value = false;
+);
-    }
+
-};
+const exampleJson = computed(() => {
-
+  const name = siteConfig.profile?.name || siteConfig.siteMeta?.title || "";
-const closeDialog = () => {
+  const url = siteConfig.siteMeta?.url || "";
-    showDialog.value = false;
+  const desc = siteConfig.profile?.bio || "";
-};
+  const email = siteConfig.profile.email || "";
-</script>
+  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>

app/components/GithubSection.vue

@@ -1,50 +1,69 @@
-<template>
+<template>
-    <section class="card flex flex-col gap-2.5">
+  <section class="card flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1">GitHub</h2>
+    <h2 class="m-0 mb-1">GitHub</h2>
-        <div class="mt-3">
+    <div class="mt-3">
-            <h3 class="m-0 mb-1">提交热力图</h3>
+      <h3 class="m-0 mb-1">提交热力图</h3>
-            <p class="text-text-muted text-sm m-0 mb-3 block">我的提交热力图 · Acitivity Heatmap</p>
+      <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
-                class="rounded-xl border border-white/10 hover:border-primary/30 transition-all duration-200"
+        :src="github.heatmapUrl"
-                class="w-full rounded-2xl border border-white/10" />
+        alt="GitHub Heatmap"
-        </div>
+        loading="lazy"
-        <div class="mt-3">
+        class="rounded-xl border border-white/10 hover:border-primary/30 transition-all duration-200"
-            <h3 class="m-0 mb-1">常用语言</h3>
+      />
-            <p class="text-text-muted text-sm m-0 mb-3 block">我常用的语言 · Languages</p>
+    </div>
-            <ul class="list-none p-0 m-0 flex flex-col gap-2.5">
+    <div class="mt-3">
-                <li v-for="lang in topLanguages" :key="lang.name"
+      <h3 class="m-0 mb-1">常用语言</h3>
-                    class="bg-white/5 border border-white/10 rounded-xl p-2.5">
+      <p class="text-text-muted text-sm m-0 mb-3 block">我常用的语言 · Languages</p>
-                    <div class="flex items-center gap-2 font-semibold mb-1.5">
+      <ul class="list-none p-0 m-0 flex flex-col gap-2.5">
-                        <span class="w-2.5 h-2.5 rounded-full inline-block"
+        <li
-                            :style="{ background: colorFor(lang.name) }"></span>
+          v-for="lang in topLanguages"
-                        <span class="text-text-primary">{{ lang.name }}</span>
+          :key="lang.name"
-                        <span class="text-text-muted text-sm">{{ lang.percent }}%</span>
+          class="bg-white/5 border border-white/10 rounded-xl p-2.5"
-                    </div>
+        >
-                    <div class="h-2 rounded-full bg-white/5 overflow-hidden">
+          <div class="flex items-center gap-2 font-semibold mb-1.5">
-                        <span class="block h-full rounded-full transition-all duration-300"
+            <span
-                            :style="barStyle(lang)"></span>
+              class="w-2.5 h-2.5 rounded-full inline-block"
-                    </div>
+              :style="{ background: colorFor(lang.name) }"
-                </li>
+            />
-            </ul>
+            <span class="text-text-primary">{{ lang.name }}</span>
-        </div>
+            <span class="text-text-muted text-sm">{{ lang.percent }}%</span>
-    </section>
+          </div>
-</template>
+          <div class="h-2 rounded-full bg-white/5 overflow-hidden">
-
+            <span
-<script setup>
+              class="block h-full rounded-full transition-all duration-300"
-import { computed } from "vue";
+              :style="barStyle(lang)"
-const props = defineProps({ github: Object });
+            />
-const github = props.github;
+          </div>
-
+        </li>
-const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
+      </ul>
-
+    </div>
-const topLanguages = computed(() => (Array.isArray(github.languages) ? github.languages.slice(0, 5) : []));
+  </section>
-
+</template>
-const colorFor = (name) => {
+
-    const idx = github.languages.findIndex((l) => l.name === name);
+<script setup>
-    return palette[(idx >= 0 ? idx : 0) % palette.length];
+import { computed } from "vue";
-};
+const props = defineProps({
-const barStyle = (lang) => ({
+  github: {
-    width: `${Math.max(8, lang.percent)}%`,
+    type: Object,
-    background: colorFor(lang.name),
+    required: false,
-});
+    default: () => ({ languages: [] }),
-</script>
+  },
+});
+
+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>

app/components/HeroSection.vue

@@ -1,20 +1,32 @@
-<template>
+<template>
-    <section class="card grid grid-cols-[120px_1fr] gap-4 items-center hover:shadow-lg-dark group">
+  <section class="card grid grid-cols-[120px_1fr] gap-4 items-center hover:shadow-lg-dark group">
-        <div class="relative">
+    <div class="relative">
-            <div
+      <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">
+        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"
+      <NuxtImg
-                :src="profile.avatar" alt="avatar" loading="lazy" />
+        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"
-        </div>
+        :src="profile.avatar"
-        <div class="overflow-hidden">
+        alt="avatar"
-            <h1 class="text-2xl font-bold">{{ profile.name }}</h1>
+        loading="eager"
-            <p class="text-text-muted text-sm mt-1">{{ profile.title }}</p>
+      />
-            <p class="mt-2 line-clamp-2">{{ profile.bio }}</p>
+    </div>
-        </div>
+    <div class="overflow-hidden">
-    </section>
+      <h1 class="text-2xl font-bold">{{ profile.name }}</h1>
-</template>
+      <p class="text-text-muted text-sm mt-1">{{ profile.title }}</p>
-
+      <p class="mt-2 line-clamp-2">{{ profile.bio }}</p>
-<script setup>
+    </div>
-defineProps({ profile: Object });
+  </section>
-</script>
+</template>
+
+<script setup>
+import siteConfig from "../config/siteConfig";
+
+const { profile } = defineProps({
+  profile: {
+    type: Object,
+    required: false,
+    default: () => siteConfig.profile || {},
+  },
+});
+</script>

app/components/MusicPlayer.vue

@@ -1,24 +1,32 @@
-<template>
+<template>
-    <div v-if="music.enable && (music.playlistId || music.songId)" class="netease-mini-player"
+  <div
-        :data-playlist-id="music.mode === 'floating' ? music.playlistId : undefined"
+    v-if="music.enable && (music.playlistId || music.songId)"
-        :data-song-id="music.mode === 'embed' ? music.songId : undefined" :data-embed="music.mode === 'embed'"
+    class="netease-mini-player"
-        :data-position="music.position" :data-lyric="music.lyric" :data-theme="music.theme"
+    :data-playlist-id="music.mode === 'floating' ? music.playlistId : undefined"
-        :data-autoplay="music.autoplay" :data-default-minimized="music.defaultMinimized"
+    :data-song-id="music.mode === 'embed' ? music.songId : undefined"
-        :data-auto-pause="music.autoPause" :data-api-urls="JSON.stringify(music.apiUrls)"></div>
+    :data-embed="music.mode === 'embed'"
-</template>
+    :data-position="music.position"
-
+    :data-lyric="music.lyric"
-<script setup lang="ts">
+    :data-theme="music.theme"
-import siteConfig from "~/config/siteConfig";
+    :data-autoplay="music.autoplay"
-
+    :data-default-minimized="music.defaultMinimized"
-const music = siteConfig.music;
+    :data-auto-pause="music.autoPause"
-</script>
+    :data-api-urls="JSON.stringify(music.apiUrls)"
-
+  />
-<!-- <style scoped>
+</template>
-/* 音乐播放器样式由 NeteaseMiniPlayer 提供 */
+
-/* 使用 display: contents 使外层容器不占用空间 */
+<script setup lang="ts">
-/* 确保播放器浮动定位，不影响页面布局 */
+import siteConfig from "~/config/siteConfig";
-:deep(.netease-mini-player) {
+
-    position: fixed !important;
+const music = siteConfig.music;
-    z-index: 999 !important;
+</script>
-}
+
-</style> -->
+<!-- <style scoped>
+/* 音乐播放器样式由 NeteaseMiniPlayer 提供 */
+/* 使用 display: contents 使外层容器不占用空间 */
+/* 确保播放器浮动定位，不影响页面布局 */
+:deep(.netease-mini-player) {
+    position: fixed !important;
+    z-index: 999 !important;
+}
+</style> -->

app/components/PageSwitcher.vue

@@ -1,51 +1,65 @@
-<template>
+<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">
+  <div
-        <button :disabled="currentIndex <= 0" @click="goPrev"
+    class="my-4 mx-auto max-w-3xl w-full px-4 py-3 grid grid-cols-[auto_1fr_auto] gap-3 items-center"
-            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
-        </button>
+      :disabled="currentIndex <= 0"
-        <div class="flex gap-2 flex-wrap justify-center">
+      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 v-for="item in pages" :key="item.name" :class="{
+      @click="goPrev"
-                'bg-primary/30 border-primary/60 text-primary shadow-lg shadow-primary/25':
+    >
-                    item.name === route.name,
+      上一页
-            }" @click="router.push({ name: item.name })"
+    </button>
-                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">
+    <div class="flex gap-2 flex-wrap justify-center">
-                {{ item.label }}
+      <button
-            </button>
+        v-for="item in pages"
-        </div>
+        :key="item.name"
-        <button :disabled="currentIndex >= pages.length - 1" @click="goNext"
+        :class="{
-            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">
+          'bg-primary/30 border-primary/60 text-primary shadow-lg shadow-primary/25':
-            下一页
+            item.name === route.name,
-        </button>
+        }"
-    </div>
+        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"
-</template>
+        @click="router.push({ name: item.name })"
-
+      >
-<script setup>
+        {{ item.label }}
-import { computed } from "vue";
+      </button>
-import { useRoute, useRouter } from "vue-router";
+    </div>
-
+    <button
-const router = useRouter();
+      :disabled="currentIndex >= pages.length - 1"
-const route = useRoute();
+      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"
-const pages = [
+    >
-    { name: "index", label: "首页" },
+      下一页
-    { name: "about", label: "关于" },
+    </button>
-    { name: "sites", label: "网站" },
+  </div>
-    { name: "projects", label: "项目" },
+</template>
-    { name: "friends", label: "友链" },
+
-];
+<script setup>
-
+import { computed } from "vue";
-const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));
+import { useRoute, useRouter } from "vue-router";
-
+
-const goPrev = () => {
+const router = useRouter();
-    if (currentIndex.value > 0) {
+const route = useRoute();
-        router.push({ name: pages[currentIndex.value - 1].name });
+
-    }
+const pages = [
-};
+  { name: "index", label: "首页" },
-
+  { name: "about", label: "关于" },
-const goNext = () => {
+  { name: "sites", label: "网站" },
-    if (currentIndex.value < pages.length - 1) {
+  { name: "projects", label: "项目" },
-        router.push({ name: pages[currentIndex.value + 1].name });
+  { name: "friends", label: "友链" },
-    }
+  { name: "comments", label: "留言" },
-};
+];
-</script>
+
+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>

app/components/ProjectsSection.vue

@@ -1,35 +1,41 @@
 <template>
-    <section class="card panel flex flex-col gap-2.5">
+  <section class="card panel flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
+    <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>
 
-        <p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
+          <span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-sky-300"> 项目 </span>
-
-        <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>
+
+        <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
+          {{ p.desc }}
+        </p>
+
+        <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"
+        >
+          查看仓库 →
+        </NuxtLink>
+      </article>
+    </div>
+  </section>
 </template>
 
 <script setup>
 defineProps({
-    projects: Array,
+  projects: {
+    type: Array,
+    default: () => [],
+  },
 });
 </script>

app/components/SitesSection.vue

@@ -1,35 +1,43 @@
-<template>
+<template>
-    <section class="card panel flex flex-col gap-2.5">
+  <section class="card panel flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
+    <h2 class="m-0 mb-1 text-lg font-semibold">我的网站</h2>
-
+
-        <p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
+    <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">
+    <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"
+      <article
-                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">
+        v-for="site in sites"
-                <div class="flex items-center justify-between mb-1.5">
+        :key="site.url"
-                    <h3 class="font-medium truncate">
+        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"
-                        {{ site.name }}
+      >
-                    </h3>
+        <div class="flex items-center justify-between mb-1.5">
-
+          <h3 class="font-medium truncate">
-                    <span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-green-300"> 在线 </span>
+            {{ site.name }}
-                </div>
+          </h3>
-
+
-                <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
+          <span class="rounded-full px-2.5 py-1 text-xs bg-sky-400/15 text-green-300"> 在线 </span>
-                    {{ site.desc }}
+        </div>
-                </p>
+
-
+        <p class="text-sm text-white/60 flex-1 overflow-hidden truncate-lines-2 mb-2">
-                <a :href="site.url" target="_blank" rel="noreferrer"
+          {{ site.desc }}
-                    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">
+        </p>
-                    查看 →
+
-                </a>
+        <NuxtLink
-            </article>
+          :to="site.url"
-        </div>
+          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"
-    </section>
+        >
-</template>
+          查看 →
-
+        </NuxtLink>
-<script setup>
+      </article>
-defineProps({
+    </div>
-    sites: Array,
+  </section>
-});
+</template>
-</script>
+
+<script setup>
+defineProps({
+  sites: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>

app/components/SitesSection_old.vue

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

app/components/SkillsSection.vue

@@ -1,28 +1,39 @@
-<template>
+<template>
-    <section class="card flex flex-col gap-2.5">
+  <section class="card flex flex-col gap-2.5">
-        <div>
+    <div>
-            <h2 class="m-0 mb-1">技能专长</h2>
+      <h2 class="m-0 mb-1 font-semibold">技能专长</h2>
-            <p class="text-text-muted text-sm m-0 mb-3">我常用的工具与技术 · Skills & Technologies</p>
+      <p class="text-text-muted text-sm m-0 mb-3">我常用的工具与技术 · Skills & Technologies</p>
-        </div>
+    </div>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <article v-for="group in skills" :key="group.title"
+      <article
-                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">
+        v-for="group in skills"
-                <header class="mb-3">
+        :key="group.title"
-                    <h3 class="text-base font-semibold m-0">{{ group.title }}</h3>
+        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>
+      >
-                <div class="flex flex-wrap gap-2">
+        <header class="mb-3">
-                    <span v-for="item in group.items" :key="item"
+          <h3 class="text-base font-semibold m-0">{{ group.title }}</h3>
-                        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">
+        </header>
-                        <img :src="iconSrc(item)" :alt="item" :title="item" loading="lazy"
+        <div class="flex flex-wrap gap-2">
-                            class="w-7 h-7 rounded-2xl" />
+          <span
-                    </span>
+            v-for="item in group.items"
-                </div>
+            :key="item"
-            </article>
+            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"
-        </div>
+          >
-    </section>
+            <NuxtImg
-</template>
+              :src="iconSrc(item)"
-
+              :alt="item"
-<script setup>
+              :title="item"
-defineProps({ skills: { type: Array, default: () => [] } });
+              loading="lazy"
-const iconSrc = (id) => `https://skillicons.dev/icons?i=${encodeURIComponent(id)}&theme=dark`;
+              class="w-7 h-7 rounded-2xl"
-</script>
+            />
+          </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>

app/components/SocialLinks.vue

@@ -1,62 +1,57 @@
-<template>
+<template>
-    <section class="card flex flex-col gap-2.5">
+  <section class="card flex flex-col gap-2.5">
-        <h2 class="m-0 mb-1">社交链接</h2>
+    <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>
+    <p class="text-text-muted text-sm m-0 mb-3 block">社交账号 · Links</p>
-        <div class="flex flex-wrap gap-2.5">
+    <div class="flex flex-wrap gap-2.5">
-            <a v-for="link in links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer"
+      <template v-for="link in links" :key="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">
+        <NuxtLink
-                <span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
+          :to="link.url"
-                    <i v-if="iconFor(link).fa" :class="iconFor(link).fa"></i>
+          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"
-                    <img v-else :src="iconFor(link).src" :alt="link.name" loading="lazy" class="w-full h-full" />
+        >
-                </span>
+          <span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
-                <span>{{ link.name }}</span>
+            <Icon v-if="iconFor(link).name" :name="iconFor(link).name" width="20" height="20" />
-            </a>
+          </span>
-        </div>
+          <span>{{ link.name }}</span>
-    </section>
+        </NuxtLink>
-</template>
+      </template>
-
+    </div>
-<script setup>
+  </section>
-import { onMounted } from "vue";
+</template>
-const props = defineProps({ links: Array });
+
-
+<script setup>
-const iconMap = {
+defineProps({
-    bilibili: "fa-brands fa-bilibili",
+  links: {
-    github: "fa-brands fa-github",
+    type: Array,
-    blog: "fa-solid fa-rss",
+    required: true,
-    email: "fa-solid fa-envelope",
+  },
-    mail: "fa-solid fa-envelope",
+});
-    telegram: "fa-brands fa-telegram",
+
-    twitter: "fa-brands fa-x-twitter",
+const iconMap = {
-    x: "fa-brands fa-x-twitter",
+  bilibili: "simple-icons:bilibili",
-    linkedin: "fa-brands fa-linkedin",
+  github: "simple-icons:github",
-    youtube: "fa-brands fa-youtube",
+  blog: "fa6-solid:book",
-    facebook: "fa-brands fa-facebook",
+  email: "fa6-solid:envelope",
-    instagram: "fa-brands fa-instagram",
+  mail: "fa6-solid:envelope",
-    reddit: "fa-brands fa-reddit",
+  telegram: "simple-icons:telegram",
-    discord: "fa-brands fa-discord",
+  twitter: "simple-icons:twitter",
-    weibo: "fa-brands fa-weibo",
+  x: "simple-icons:x",
-    zhihu: "fa-brands fa-zhihu",
+  linkedin: "simple-icons:linkedin",
-    wechat: "fa-brands fa-weixin",
+  youtube: "simple-icons:youtube",
-    weixin: "fa-brands fa-weixin",
+  facebook: "simple-icons:facebook",
-    qq: "fa-brands fa-qq",
+  instagram: "simple-icons:instagram",
-};
+  reddit: "simple-icons:reddit",
-
+  discord: "simple-icons:discord",
-const iconFor = (link) => {
+  weibo: "simple-icons:sinaweibo",
-    const key = (link.name || "").toLowerCase();
+  zhihu: "simple-icons:zhihu",
-    if (iconMap[key]) return { fa: iconMap[key] };
+  wechat: "simple-icons:wechat",
-    if (link.icon) return { src: link.icon };
+  weixin: "simple-icons:wechat",
-    return null;
+  qq: "simple-icons:qq",
-};
+};
-
+
-onMounted(() => {
+const iconFor = (link) => {
-    const id = "fa-cdn";
+  const key = (link.name || "").toLowerCase();
-    if (document.getElementById(id)) return;
+  if (iconMap[key]) return { name: iconMap[key] };
-    const link = document.createElement("link");
+  if (link.icon) return { src: link.icon };
-    link.id = id;
+  return null;
-    link.rel = "stylesheet";
+};
-    link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
+</script>
-    link.crossOrigin = "anonymous";
-    link.referrerPolicy = "no-referrer";
-    document.head.appendChild(link);
-});
-</script>

app/components/StatsSection.vue

@@ -1,392 +1,434 @@
-<template>
+<template>
-    <section class="card">
+  <section class="card">
-        <div class="header">
+    <div class="header">
-            <h2>开发统计</h2>
+      <h2 class="m-0 mb-1 font-semibold">开发统计</h2>
-            <div class="tabs">
+      <div class="tabs">
-                <button class="tab-button" :class="{ active: activeTab === 'github' }" @click="activeTab = 'github'">
+        <button
-                    GitHub
+          class="tab-button"
-                </button>
+          :class="{ active: activeTab === 'github' }"
-                <button class="tab-button" :class="{ active: activeTab === 'wakatime' }"
+          @click="activeTab = 'github'"
-                    @click="activeTab = 'wakatime'">
+        >
-                    Wakatime
+          GitHub
-                </button>
+        </button>
-            </div>
+        <button
-        </div>
+          class="tab-button"
-
+          :class="{ active: activeTab === 'wakatime' }"
-        <!-- GitHub 内容 -->
+          @click="activeTab = 'wakatime'"
-        <div v-if="activeTab === 'github'">
+        >
-            <div class="heatmap">
+          Wakatime
-                <h3>提交热力图</h3>
+        </button>
-                <p class="muted">我的提交热力图 · Activity Heatmap</p>
+      </div>
-                <img :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
+    </div>
-            </div>
+
-            <div class="lang-wrap">
+    <!-- GitHub 内容 -->
-                <h3>常用语言</h3>
+    <div v-if="activeTab === 'github'">
-                <p class="muted">我常用的语言 · Languages</p>
+      <div class="heatmap">
-                <div class="lang-chart">
+        <h3>提交热力图</h3>
-                    <ul class="list lang-list">
+        <p class="muted">我的提交热力图 · Activity Heatmap</p>
-                        <li v-for="lang in githubLanguages" :key="lang.name" class="lang-row">
+        <NuxtImg :src="github.heatmapUrl" alt="GitHub Heatmap" loading="lazy" />
-                            <div class="lang-label">
+      </div>
-                                <span class="dot" :style="{ background: colorFor(lang.name, 'github') }"></span>
+      <div class="lang-wrap">
-                                <span class="lang-name">{{ lang.name }}</span>
+        <h3>常用语言</h3>
-                                <span class="lang-percent">{{ lang.percent }}%</span>
+        <p class="muted">我常用的语言 · Languages</p>
-                            </div>
+        <div class="lang-chart">
-                            <div class="lang-bar">
+          <ul class="list lang-list">
-                                <span class="lang-bar-fill" :style="barStyle(lang, 'github')"></span>
+            <li v-for="lang in githubLanguages" :key="lang.name" class="lang-row">
-                            </div>
+              <div class="lang-label">
-                        </li>
+                <span class="dot" :style="{ background: colorFor(lang.name, 'github') }" />
-                    </ul>
+                <span class="lang-name">{{ lang.name }}</span>
-                </div>
+                <span class="lang-percent">{{ lang.percent }}%</span>
-            </div>
+              </div>
-        </div>
+              <div class="lang-bar">
-
+                <span class="lang-bar-fill" :style="barStyle(lang, 'github')" />
-        <!-- Wakatime 内容 -->
+              </div>
-        <div v-if="activeTab === 'wakatime'">
+            </li>
-            <div class="stats-wrap">
+          </ul>
-                <h3>编码统计</h3>
+        </div>
-                <p class="muted">
+      </div>
-                    {{ wakatimeActiveTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }}
+    </div>
-                </p>
+
-                <div class="stats-grid">
+    <!-- Wakatime 内容 -->
-                    <div class="stat-item">
+    <div v-if="activeTab === 'wakatime'">
-                        <span class="stat-value">{{
+      <div class="stats-wrap">
-                            currentWakatimeData?.total_seconds ? formatTime(currentWakatimeData.total_seconds) : "N/A"
+        <h3>编码统计</h3>
-                        }}</span>
+        <p class="muted">
-                        <span class="stat-label">总时间</span>
+          {{ wakatimeActiveTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }}
-                    </div>
+        </p>
-                    <div class="stat-item">
+        <div class="stats-grid">
-                        <span class="stat-value">{{
+          <div class="stat-item">
-                            currentWakatimeData?.daily_average ? formatTime(currentWakatimeData.daily_average) : "N/A"
+            <span class="stat-value">{{
-                        }}</span>
+              currentWakatimeData?.total_seconds
-                        <span class="stat-label">日均</span>
+                ? formatTime(currentWakatimeData.total_seconds)
-                    </div>
+                : "N/A"
-                    <div class="stat-item">
+            }}</span>
-                        <span class="stat-value">{{ currentWakatimeData?.days_including_holidays ?? "N/A" }}</span>
+            <span class="stat-label">总时间</span>
-                        <span class="stat-label">活跃天数</span>
+          </div>
-                    </div>
+          <div class="stat-item">
-                </div>
+            <span class="stat-value">{{
-            </div>
+              currentWakatimeData?.daily_average
-
+                ? formatTime(currentWakatimeData.daily_average)
-            <div class="lang-wrap" v-if="currentWakatimeData?.languages && currentWakatimeData.languages.length">
+                : "N/A"
-                <h3>编程语言</h3>
+            }}</span>
-                <p class="muted">语言使用统计 · Languages</p>
+            <span class="stat-label">日均</span>
-                <div class="lang-chart">
+          </div>
-                    <ul class="list lang-list">
+          <div class="stat-item">
-                        <li v-for="lang in wakatimeLanguages" :key="lang.name" class="lang-row">
+            <span class="stat-value">{{
-                            <div class="lang-label">
+              currentWakatimeData?.days_including_holidays ?? "N/A"
-                                <span class="dot" :style="{ background: colorFor(lang.name, 'wakatime') }"></span>
+            }}</span>
-                                <span class="lang-name">{{ lang.name }}</span>
+            <span class="stat-label">活跃天数</span>
-                                <span class="lang-percent">{{ lang.percent }}%</span>
+          </div>
-                            </div>
+        </div>
-                            <div class="lang-bar">
+      </div>
-                                <span class="lang-bar-fill" :style="barStyle(lang, 'wakatime')"></span>
+
-                            </div>
+      <div
-                        </li>
+        v-if="currentWakatimeData?.languages && currentWakatimeData.languages.length"
-                    </ul>
+        class="lang-wrap"
-                </div>
+      >
-            </div>
+        <h3>编程语言</h3>
-
+        <p class="muted">语言使用统计 · Languages</p>
-            <div class="wakatime-tabs" v-if="allTimeData">
+        <div class="lang-chart">
-                <div class="wakatime-mini-tabs">
+          <ul class="list lang-list">
-                    <button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'weekly' }"
+            <li v-for="lang in wakatimeLanguages" :key="lang.name" class="lang-row">
-                        @click="wakatimeActiveTab = 'weekly'">
+              <div class="lang-label">
-                        最近7天
+                <span class="dot" :style="{ background: colorFor(lang.name, 'wakatime') }" />
-                    </button>
+                <span class="lang-name">{{ lang.name }}</span>
-                    <button class="wakatime-tab-button" :class="{ active: wakatimeActiveTab === 'allTime' }"
+                <span class="lang-percent">{{ lang.percent }}%</span>
-                        @click="wakatimeActiveTab = 'allTime'">
+              </div>
-                        所有时间
+              <div class="lang-bar">
-                    </button>
+                <span class="lang-bar-fill" :style="barStyle(lang, 'wakatime')" />
-                </div>
+              </div>
-            </div>
+            </li>
-
+          </ul>
-            <div class="status-wrap" v-if="statusData">
+        </div>
-                <h3>当前状态</h3>
+      </div>
-                <p class="muted">实时状态 · Current Status</p>
+
-                <div class="status-item">
+      <div v-if="allTimeData" class="wakatime-tabs">
-                    <span class="status-indicator" :class="{ active: statusData.is_coding }"></span>
+        <div class="wakatime-mini-tabs">
-                    <span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
+          <button
-                    <span class="status-project" v-if="statusData.project">{{ statusData.project }}</span>
+            class="wakatime-tab-button"
-                </div>
+            :class="{ active: wakatimeActiveTab === 'weekly' }"
-            </div>
+            @click="wakatimeActiveTab = 'weekly'"
-        </div>
+          >
-    </section>
+            最近7天
-</template>
+          </button>
-
+          <button
-<script setup>
+            class="wakatime-tab-button"
-import { ref, onMounted, computed } from "vue";
+            :class="{ active: wakatimeActiveTab === 'allTime' }"
-
+            @click="wakatimeActiveTab = 'allTime'"
-const props = defineProps({ github: Object, wakatime: Object });
+          >
-const github = props.github;
+            所有时间
-const wakatime = props.wakatime;
+          </button>
-
+        </div>
-const activeTab = ref("github");
+      </div>
-const wakatimeActiveTab = ref("weekly");
+
-
+      <div v-if="statusData" class="status-wrap">
-const weeklyData = ref(null);
+        <h3>当前状态</h3>
-const allTimeData = ref(null);
+        <p class="muted">实时状态 · Current Status</p>
-const statusData = ref(null);
+        <div class="status-item">
-const showComponent = ref(true);
+          <span class="status-indicator" :class="{ active: statusData.is_coding }" />
-
+          <span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
-const githubPalette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
+          <span v-if="statusData.project" class="status-project">{{ statusData.project }}</span>
-const wakatimePalette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
+        </div>
-
+      </div>
-const githubLanguages = computed(() => (Array.isArray(github.languages) ? github.languages.slice(0, 5) : []));
+    </div>
-
+  </section>
-const currentWakatimeData = computed(() => {
+</template>
-    return wakatimeActiveTab.value === "weekly" ? weeklyData.value : allTimeData.value;
+
-});
+<script setup>
-
+import { ref, onMounted, computed } from "vue";
-const wakatimeLanguages = computed(() => {
+
-    if (!currentWakatimeData.value || !currentWakatimeData.value.languages) return [];
+const props = defineProps({
-    return currentWakatimeData.value.languages.slice(0, 5);
+  github: {
-});
+    type: Object,
-
+    default: () => ({}),
-const colorFor = (name, type) => {
+  },
-    const palette = type === "github" ? githubPalette : wakatimePalette;
+  wakatime: {
-    const languages = type === "github" ? github.languages : currentWakatimeData.value?.languages || [];
+    type: Object,
-    const idx = languages.findIndex((l) => l.name === name);
+    default: () => ({}),
-    return palette[(idx >= 0 ? idx : 0) % palette.length];
+  },
-};
+});
-
+const github = props.github;
-const barStyle = (lang, type) => ({
+const wakatime = props.wakatime;
-    width: `${Math.max(8, lang.percent)}%`,
+
-    background: colorFor(lang.name, type),
+const activeTab = ref("github");
-});
+const wakatimeActiveTab = ref("weekly");
-
+
-const formatTime = (seconds) => {
+const weeklyData = ref(null);
-    const hours = Math.floor(seconds / 3600);
+const allTimeData = ref(null);
-    const minutes = Math.floor((seconds % 3600) / 60);
+const statusData = ref(null);
-    return `${hours}h ${minutes}m`;
+const showComponent = ref(true);
-};
+
-
+const githubPalette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
-const fetchWakatimeData = async () => {
+const wakatimePalette = [
-    if (!wakatime.enable) return;
+  "#7cc1ff",
-
+  "#6bdba6",
-    try {
+  "#ffd166",
-        const params = new URLSearchParams();
+  "#f497da",
-        if (wakatime.apiUrl && wakatime.apiUrl !== "https://wakatime.com/api/v1") {
+  "#9b8cfc",
-            params.append("apiUrl", wakatime.apiUrl);
+  "#5ce1e6",
-        }
+  "#ffa3a3",
-        const url = `/api/wakatime${params.toString() ? `?${params.toString()}` : ""}`;
+];
-        const response = await fetch(url);
+
-
+const githubLanguages = computed(() =>
-        if (response.ok) {
+  Array.isArray(github.languages) ? github.languages.slice(0, 5) : []
-            const data = await response.json();
+);
-            weeklyData.value = data.weekly;
+
-            allTimeData.value = data.allTime;
+const currentWakatimeData = computed(() => {
-            statusData.value = data.status;
+  return wakatimeActiveTab.value === "weekly" ? weeklyData.value : allTimeData.value;
-        } else {
+});
-            const errorText = await response.text();
+
-            console.error("API Error:", response.status, errorText);
+const wakatimeLanguages = computed(() => {
-            if (response.status === 500 && errorText.includes("Wakatime API Key not configured")) {
+  if (!currentWakatimeData.value || !currentWakatimeData.value.languages) return [];
-                console.warn("Wakatime API Key not configured - hiding component");
+  return currentWakatimeData.value.languages.slice(0, 5);
-                showComponent.value = false;
+});
-                return;
+
-            }
+const colorFor = (name, type) => {
-            throw new Error(`API returned ${response.status}: ${errorText}`);
+  const palette = type === "github" ? githubPalette : wakatimePalette;
-        }
+  const languages =
-    } catch (error) {
+    type === "github" ? github.languages : currentWakatimeData.value?.languages || [];
-        console.error("Failed to fetch Wakatime data:", error);
+  const idx = languages.findIndex((l) => l.name === name);
-    }
+  return palette[(idx >= 0 ? idx : 0) % palette.length];
-};
+};
-
+
-onMounted(() => {
+const barStyle = (lang, type) => ({
-    fetchWakatimeData();
+  width: `${Math.max(8, lang.percent)}%`,
-});
+  background: colorFor(lang.name, type),
-</script>
+});
-
+
-<style scoped>
+const formatTime = (seconds) => {
-.header {
+  const hours = Math.floor(seconds / 3600);
-    display: flex;
+  const minutes = Math.floor((seconds % 3600) / 60);
-    justify-content: space-between;
+  return `${hours}h ${minutes}m`;
-    align-items: center;
+};
-    margin-bottom: 1.5rem;
+
-}
+const fetchWakatimeData = async () => {
-
+  if (!wakatime.enable) return;
-.tabs {
+
-    display: flex;
+  try {
-    gap: 0.5rem;
+    const params = new URLSearchParams();
-}
+    if (wakatime.apiUrl && wakatime.apiUrl !== "https://wakatime.com/api/v1") {
-
+      params.append("apiUrl", wakatime.apiUrl);
-.tab-button {
+    }
-    padding: 0.5rem 1rem;
+    const url = `/api/wakatime${params.toString() ? `?${params.toString()}` : ""}`;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    const response = await fetch(url);
-    background: rgba(255, 255, 255, 0.04);
+
-    color: #e8eefc;
+    if (response.ok) {
-    border-radius: 6px;
+      const data = await response.json();
-    cursor: pointer;
+      weeklyData.value = data.weekly;
-    transition: all 0.2s ease;
+      allTimeData.value = data.allTime;
-    font-size: 0.875rem;
+      statusData.value = data.status;
-}
+    } else {
-
+      const errorText = await response.text();
-.tab-button:hover {
+      console.error("API Error:", response.status, errorText);
-    background: rgba(255, 255, 255, 0.08);
+      if (response.status === 500 && errorText.includes("Wakatime API Key not configured")) {
-}
+        console.warn("Wakatime API Key not configured - hiding component");
-
+        showComponent.value = false;
-.tab-button.active {
+        return;
-    background: #7cc1ff;
+      }
-    color: white;
+      throw new Error(`API returned ${response.status}: ${errorText}`);
-    border-color: #7cc1ff;
+    }
-}
+  } catch (error) {
-
+    console.error("Failed to fetch Wakatime data:", error);
-.stats-grid {
+  }
-    display: grid;
+};
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+
-    gap: 1rem;
+onMounted(() => {
-    margin-top: 1rem;
+  fetchWakatimeData();
-}
+});
-
+</script>
-.stat-item {
+
-    text-align: center;
+<style scoped>
-    padding: 1rem;
+.header {
-    background: rgba(255, 255, 255, 0.04);
+  display: flex;
-    border-radius: 8px;
+  justify-content: space-between;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+  align-items: center;
-}
+  margin-bottom: 1.5rem;
-
+}
-.stat-value {
+
-    display: block;
+.tabs {
-    font-size: 1.5rem;
+  display: flex;
-    font-weight: bold;
+  gap: 0.5rem;
-    color: #e8eefc;
+}
-    margin-bottom: 0.5rem;
+
-}
+.tab-button {
-
+  padding: 0.5rem 1rem;
-.stat-label {
+  border: 1px solid rgba(255, 255, 255, 0.08);
-    font-size: 0.875rem;
+  background: rgba(255, 255, 255, 0.04);
-    color: #a8b3cf;
+  color: #e8eefc;
-}
+  border-radius: 6px;
-
+  cursor: pointer;
-.wakatime-tabs {
+  transition: all 0.2s ease;
-    margin-top: 1rem;
+  font-size: 0.875rem;
-}
+}
-
+
-.wakatime-mini-tabs {
+.tab-button:hover {
-    display: flex;
+  background: rgba(255, 255, 255, 0.08);
-    gap: 0.25rem;
+}
-    justify-content: center;
+
-}
+.tab-button.active {
-
+  background: #7cc1ff;
-.wakatime-tab-button {
+  color: white;
-    padding: 0.25rem 0.75rem;
+  border-color: #7cc1ff;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+}
-    background: rgba(255, 255, 255, 0.04);
+
-    color: #e8eefc;
+.stats-grid {
-    border-radius: 4px;
+  display: grid;
-    cursor: pointer;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    transition: all 0.2s ease;
+  gap: 1rem;
-    font-size: 0.75rem;
+  margin-top: 1rem;
-}
+}
-
+
-.wakatime-tab-button:hover {
+.stat-item {
-    background: rgba(255, 255, 255, 0.08);
+  text-align: center;
-}
+  padding: 1rem;
-
+  background: rgba(255, 255, 255, 0.04);
-.wakatime-tab-button.active {
+  border-radius: 8px;
-    background: #6bdba6;
+  border: 1px solid rgba(255, 255, 255, 0.08);
-    color: white;
+}
-    border-color: #6bdba6;
+
-}
+.stat-value {
-
+  display: block;
-.status-item {
+  font-size: 1.5rem;
-    display: flex;
+  font-weight: bold;
-    align-items: center;
+  color: #e8eefc;
-    gap: 0.5rem;
+  margin-bottom: 0.5rem;
-    padding: 1rem;
+}
-    background: rgba(255, 255, 255, 0.04);
+
-    border-radius: 8px;
+.stat-label {
-    border: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 0.875rem;
-    margin-top: 1rem;
+  color: #a8b3cf;
-}
+}
-
+
-.status-indicator {
+.wakatime-tabs {
-    width: 12px;
+  margin-top: 1rem;
-    height: 12px;
+}
-    border-radius: 50%;
+
-    background: #a8b3cf;
+.wakatime-mini-tabs {
-}
+  display: flex;
-
+  gap: 0.25rem;
-.status-indicator.active {
+  justify-content: center;
-    background: #6bdba6;
+}
-}
+
-
+.wakatime-tab-button {
-.status-text {
+  padding: 0.25rem 0.75rem;
-    font-weight: 500;
+  border: 1px solid rgba(255, 255, 255, 0.08);
-}
+  background: rgba(255, 255, 255, 0.04);
-
+  color: #e8eefc;
-.status-project {
+  border-radius: 4px;
-    color: #a8b3cf;
+  cursor: pointer;
-    font-size: 0.875rem;
+  transition: all 0.2s ease;
-}
+  font-size: 0.75rem;
-
+}
-.lang-wrap {
+
-    margin-top: 12px;
+.wakatime-tab-button:hover {
-}
+  background: rgba(255, 255, 255, 0.08);
-
+}
-.lang-chart {
+
-    display: block;
+.wakatime-tab-button.active {
-}
+  background: #6bdba6;
-
+  color: white;
-.lang-list {
+  border-color: #6bdba6;
-    display: flex;
+}
-    flex-direction: column;
+
-    gap: 10px;
+.status-item {
-}
+  display: flex;
-
+  align-items: center;
-.lang-row {
+  gap: 0.5rem;
-    background: rgba(255, 255, 255, 0.04);
+  padding: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
-    border-radius: 10px;
+  border-radius: 8px;
-    padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
-}
+  margin-top: 1rem;
-
+}
-.lang-label {
+
-    display: flex;
+.status-indicator {
-    align-items: center;
+  width: 12px;
-    gap: 8px;
+  height: 12px;
-    font-weight: 600;
+  border-radius: 50%;
-}
+  background: #a8b3cf;
-
+}
-.lang-name {
+
-    color: #e8eefc;
+.status-indicator.active {
-}
+  background: #6bdba6;
-
+}
-.lang-percent {
+
-    color: #a8b3cf;
+.status-text {
-    font-size: 0.9rem;
+  font-weight: 500;
-}
+}
-
+
-.lang-bar {
+.status-project {
-    margin-top: 6px;
+  color: #a8b3cf;
-    height: 8px;
+  font-size: 0.875rem;
-    border-radius: 999px;
+}
-    background: rgba(255, 255, 255, 0.05);
+
-    overflow: hidden;
+.lang-wrap {
-}
+  margin-top: 12px;
-
+}
-.lang-bar-fill {
+
-    display: block;
+.lang-chart {
-    height: 100%;
+  display: block;
-    border-radius: 999px;
+}
-    transition: width 0.3s ease;
+
-}
+.lang-list {
-
+  display: flex;
-.dot {
+  flex-direction: column;
-    display: inline-block;
+  gap: 10px;
-    width: 10px;
+}
-    height: 10px;
+
-    border-radius: 50%;
+.lang-row {
-    margin-right: 6px;
+  background: rgba(255, 255, 255, 0.04);
-}
+  border: 1px solid rgba(255, 255, 255, 0.08);
-
+  border-radius: 10px;
-.heatmap {
+  padding: 8px 10px;
-    margin-top: 12px;
+}
-}
+
-
+.lang-label {
-.heatmap img {
+  display: flex;
-    width: 100%;
+  align-items: center;
-    display: block;
+  gap: 8px;
-    border-radius: 12px;
+  font-weight: 600;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+}
-}
+
-</style>
+.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);
+}
+</style>

app/components/WakatimeSection.vue

@@ -1,329 +1,319 @@
-<template>
+<template>
-    <section class="card" v-if="showComponent && (weeklyData || allTimeData)">
+  <section v-if="showComponent && (weeklyData || allTimeData)" class="card">
-        <div class="header">
+    <div class="header">
-            <h2>Wakatime</h2>
+      <h2>Wakatime</h2>
-            <div class="tabs">
+      <div class="tabs">
-                <button class="tab-button" :class="{ active: activeTab === 'weekly' }" @click="activeTab = 'weekly'">
+        <button
-                    最近7天
+          class="tab-button"
-                </button>
+          :class="{ active: activeTab === 'weekly' }"
-                <button class="tab-button" :class="{ active: activeTab === 'allTime' }" @click="activeTab = 'allTime'"
+          @click="activeTab = 'weekly'"
-                    v-if="allTimeData">
+        >
-                    所有时间
+          最近7天
-                </button>
+        </button>
-            </div>
+        <button
-        </div>
+          v-if="allTimeData"
-
+          class="tab-button"
-        <div class="stats-wrap">
+          :class="{ active: activeTab === 'allTime' }"
-            <h3>编码统计</h3>
+          @click="activeTab = 'allTime'"
-            <p class="muted">{{ activeTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }}</p>
+        >
-            <div class="stats-grid">
+          所有时间
-                <div class="stat-item">
+        </button>
-                    <span class="stat-value">{{
+      </div>
-                        currentData.total_seconds ? formatTime(currentData.total_seconds) : "N/A"
+    </div>
-                    }}</span>
+
-                    <span class="stat-label">总时间</span>
+    <div class="stats-wrap">
-                </div>
+      <h3>编码统计</h3>
-                <div class="stat-item">
+      <p class="muted">
-                    <span class="stat-value">{{
+        {{ activeTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }}
-                        currentData.daily_average ? formatTime(currentData.daily_average) : "N/A"
+      </p>
-                    }}</span>
+      <div class="stats-grid">
-                    <span class="stat-label">日均</span>
+        <div class="stat-item">
-                </div>
+          <span class="stat-value">{{
-                <div class="stat-item">
+            currentData.total_seconds ? formatTime(currentData.total_seconds) : "N/A"
-                    <span class="stat-value">{{ currentData.days_including_holidays || "N/A" }}</span>
+          }}</span>
-                    <span class="stat-label">活跃天数</span>
+          <span class="stat-label">总时间</span>
-                </div>
+        </div>
-            </div>
+        <div class="stat-item">
-        </div>
+          <span class="stat-value">{{
-
+            currentData.daily_average ? formatTime(currentData.daily_average) : "N/A"
-        <div class="lang-wrap" v-if="currentData.languages && currentData.languages.length">
+          }}</span>
-            <h3>编程语言</h3>
+          <span class="stat-label">日均</span>
-            <p class="muted">语言使用统计 · Languages</p>
+        </div>
-            <div class="lang-chart">
+        <div class="stat-item">
-                <ul class="list lang-list">
+          <span class="stat-value">{{ currentData.days_including_holidays || "N/A" }}</span>
-                    <li v-for="lang in topLanguages" :key="lang.name" class="lang-row">
+          <span class="stat-label">活跃天数</span>
-                        <div class="lang-label">
+        </div>
-                            <span class="dot" :style="{ background: colorFor(lang.name) }"></span>
+      </div>
-                            <span class="lang-name">{{ lang.name }}</span>
+    </div>
-                            <span class="lang-percent">{{ lang.percent }}%</span>
+
-                        </div>
+    <div v-if="currentData.languages && currentData.languages.length" class="lang-wrap">
-                        <div class="lang-bar">
+      <h3>编程语言</h3>
-                            <span class="lang-bar-fill" :style="barStyle(lang)"></span>
+      <p class="muted">语言使用统计 · Languages</p>
-                        </div>
+      <div class="lang-chart">
-                    </li>
+        <ul class="list lang-list">
-                </ul>
+          <li v-for="lang in topLanguages" :key="lang.name" class="lang-row">
-            </div>
+            <div class="lang-label">
-        </div>
+              <span class="dot" :style="{ background: colorFor(lang.name) }" />
-
+              <span class="lang-name">{{ lang.name }}</span>
-        <div class="status-wrap" v-if="statusData">
+              <span class="lang-percent">{{ lang.percent }}%</span>
-            <h3>当前状态</h3>
+            </div>
-            <p class="muted">实时状态 · Current Status</p>
+            <div class="lang-bar">
-            <div class="status-item">
+              <span class="lang-bar-fill" :style="barStyle(lang)" />
-                <span class="status-indicator" :class="{ active: statusData.is_coding }"></span>
+            </div>
-                <span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
+          </li>
-                <span class="status-project" v-if="statusData.project">{{ statusData.project }}</span>
+        </ul>
-            </div>
+      </div>
-        </div>
+    </div>
-    </section>
+
-</template>
+    <div v-if="statusData" class="status-wrap">
-
+      <h3>当前状态</h3>
-<script setup>
+      <p class="muted">实时状态 · Current Status</p>
-import { ref, onMounted, computed } from "vue";
+      <div class="status-item">
-
+        <span class="status-indicator" :class="{ active: statusData.is_coding }" />
-const props = defineProps({ wakatime: Object });
+        <span class="status-text">{{ statusData.is_coding ? "正在编码" : "未在编码" }}</span>
-const wakatime = props.wakatime;
+        <span v-if="statusData.project" class="status-project">{{ statusData.project }}</span>
-
+      </div>
-const weeklyData = ref(null);
+    </div>
-const allTimeData = ref(null);
+  </section>
-const statusData = ref(null);
+</template>
-const showComponent = ref(true);
+
-const activeTab = ref("weekly");
+<script setup>
-
+import { ref, onMounted, computed } from "vue";
-const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#f497da", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
+import siteConfig from "~/config/siteConfig";
-
+
-const currentData = computed(() => {
+const wakapi = siteConfig.wakapi;
-    return activeTab.value === "weekly" ? weeklyData.value : allTimeData.value;
+
-});
+const weeklyData = ref(null);
-
+const allTimeData = ref(null);
-const topLanguages = computed(() => {
+const statusData = ref(null);
-    if (!currentData.value || !currentData.value.languages) return [];
+const showComponent = ref(true);
-    return currentData.value.languages.slice(0, 5);
+const activeTab = ref("weekly");
-});
+
-
+const palette = ["#7cc1ff", "#6bdba6", "#ffd166", "#201a1fff", "#9b8cfc", "#5ce1e6", "#ffa3a3"];
-const colorFor = (name) => {
+
-    const idx = currentData.value.languages.findIndex((l) => l.name === name);
+const currentData = computed(() => {
-    return palette[(idx >= 0 ? idx : 0) % palette.length];
+  return activeTab.value === "weekly" ? weeklyData.value : allTimeData.value;
-};
+});
-
+
-const barStyle = (lang) => ({
+const topLanguages = computed(() => {
-    width: `${Math.max(8, lang.percent)}%`,
+  if (!currentData.value || !currentData.value.languages) return [];
-    background: colorFor(lang.name),
+  return currentData.value.languages.slice(0, 5);
-});
+});
-
+
-const formatTime = (seconds) => {
+const colorFor = (name) => {
-    const hours = Math.floor(seconds / 3600);
+  const idx = currentData.value.languages.findIndex((l) => l.name === name);
-    const minutes = Math.floor((seconds % 3600) / 60);
+  return palette[(idx >= 0 ? idx : 0) % palette.length];
-    return `${hours}h ${minutes}m`;
+};
-};
+
-
+const barStyle = (lang) => ({
-const fetchWakatimeData = async () => {
+  width: `${Math.max(8, lang.percent)}%`,
-    if (!wakatime.enable) return;
+  background: colorFor(lang.name),
-
+});
-    try {
+
-        const params = new URLSearchParams();
+const formatTime = (seconds) => {
-        if (wakatime.apiUrl && wakatime.apiUrl !== "https://wakatime.com/api/v1") {
+  const hours = Math.floor(seconds / 3600);
-            params.append("apiUrl", wakatime.apiUrl);
+  const minutes = Math.floor((seconds % 3600) / 60);
-        }
+  return `${hours}h ${minutes}m`;
-        const url = `/api/wakatime${params.toString() ? `?${params.toString()}` : ""}`;
+};
-        console.log("Fetching Wakatime data from:", url);
+
-        const response = await fetch(url);
+const fetchWakatimeData = async () => {
-        console.log("Response status:", response.status);
+  if (!wakapi.enable) {
-        console.log("Response headers:", Object.fromEntries(response.headers.entries()));
+    console.warn("Wakatime is disabled in siteConfig.");
-
+    return;
-        if (response.ok) {
+  }
-            const data = await response.json();
+
-            console.log("Wakatime data:", data);
+  const apiUrl = wakapi.apiUrl || "https://wakatime.com/api/v1";
-            weeklyData.value = data.weekly;
+  const username = wakapi.username;
-            allTimeData.value = data.allTime;
+
-            statusData.value = data.status;
+  if (!username) {
-        } else {
+    console.error("Wakatime username is not configured.");
-            const errorText = await response.text();
+    return;
-            console.error("API Error:", response.status, errorText);
+  }
-            if (response.status === 500 && errorText.includes("Wakatime API Key not configured")) {
+
-                console.warn("Wakatime API Key not configured - hiding component");
+  try {
-                showComponent.value = false;
+    const [weeklyStatsResponse, allTimeStatsResponse, statusResponse] = await Promise.all([
-                return;
+      fetch(`${apiUrl}/users/${username}/stats/last_7_days`),
-            }
+      fetch(`${apiUrl}/users/${username}/stats`),
-            throw new Error(`API returned ${response.status}: ${errorText}`);
+      fetch(`${apiUrl}/users/${username}/status`),
-        }
+    ]);
-    } catch (error) {
+
-        console.error("Failed to fetch Wakatime data:", error);
+    if (weeklyStatsResponse.ok) {
-        // 在开发环境中，如果 API 不可用，设置一些示例数据
+      weeklyData.value = await weeklyStatsResponse.json();
-        if (import.meta.env.DEV) {
+    } else {
-            console.log("Using mock data for development");
+      console.error("Failed to fetch weekly stats:", weeklyStatsResponse.status);
-            weeklyData.value = {
+    }
-                total_seconds: 36000,
+
-                daily_average: 5142,
+    if (allTimeStatsResponse.ok) {
-                days_including_holidays: 7,
+      allTimeData.value = await allTimeStatsResponse.json();
-                languages: [
+    } else {
-                    { name: "TypeScript", percent: 45.2, total_seconds: 16272 },
+      console.warn("All-time stats not available:", allTimeStatsResponse.status);
-                    { name: "Vue", percent: 30.1, total_seconds: 10836 },
+    }
-                    { name: "JavaScript", percent: 15.3, total_seconds: 5508 },
+
-                    { name: "Python", percent: 9.4, total_seconds: 3384 },
+    if (statusResponse.ok) {
-                ],
+      statusData.value = await statusResponse.json();
-            };
+    } else {
-            allTimeData.value = {
+      console.warn("Status data not available:", statusResponse.status);
-                total_seconds: 864000,
+    }
-                daily_average: 2800,
+  } catch (error) {
-                days_including_holidays: 308,
+    console.error("Error fetching Wakatime data:", error);
-                languages: [
+  }
-                    { name: "JavaScript", percent: 35.2, total_seconds: 304128 },
+};
-                    { name: "TypeScript", percent: 28.1, total_seconds: 242688 },
+
-                    { name: "Python", percent: 20.3, total_seconds: 175392 },
+onMounted(() => {
-                    { name: "Vue", percent: 10.1, total_seconds: 87296 },
+  fetchWakatimeData();
-                    { name: "CSS", percent: 6.3, total_seconds: 54432 },
+});
-                ],
+</script>
-            };
+
-            statusData.value = { is_coding: false };
+<style scoped>
-        }
+.header {
-    }
+  display: flex;
-};
+  justify-content: space-between;
-
+  align-items: center;
-onMounted(() => {
+  margin-bottom: 1.5rem;
-    fetchWakatimeData();
+}
-});
+
-</script>
+.tabs {
-
+  display: flex;
-<style scoped>
+  gap: 0.5rem;
-.header {
+}
-    display: flex;
+
-    justify-content: space-between;
+.tab-button {
-    align-items: center;
+  padding: 0.5rem 1rem;
-    margin-bottom: 1.5rem;
+  border: 1px solid var(--border);
-}
+  background: var(--card-bg);
-
+  color: var(--text);
-.tabs {
+  border-radius: 6px;
-    display: flex;
+  cursor: pointer;
-    gap: 0.5rem;
+  transition: all 0.2s ease;
-}
+  font-size: 0.875rem;
-
+}
-.tab-button {
+
-    padding: 0.5rem 1rem;
+.tab-button:hover {
-    border: 1px solid var(--border);
+  background: var(--hover-bg);
-    background: var(--card-bg);
+}
-    color: var(--text);
+
-    border-radius: 6px;
+.tab-button.active {
-    cursor: pointer;
+  background: var(--accent);
-    transition: all 0.2s ease;
+  color: white;
-    font-size: 0.875rem;
+  border-color: var(--accent);
-}
+}
-
+
-.tab-button:hover {
+.stats-grid {
-    background: var(--hover-bg);
+  display: grid;
-}
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-
+  gap: 1rem;
-.tab-button.active {
+  margin-top: 1rem;
-    background: var(--accent);
+}
-    color: white;
+
-    border-color: var(--accent);
+.stat-item {
-}
+  text-align: center;
-
+  padding: 1rem;
-.stats-grid {
+  background: var(--card-bg);
-    display: grid;
+  border-radius: 8px;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  border: 1px solid var(--border);
-    gap: 1rem;
+}
-    margin-top: 1rem;
+
-}
+.stat-value {
-
+  display: block;
-.stat-item {
+  font-size: 1.5rem;
-    text-align: center;
+  font-weight: bold;
-    padding: 1rem;
+  color: var(--text);
-    background: var(--card-bg);
+  margin-bottom: 0.5rem;
-    border-radius: 8px;
+}
-    border: 1px solid var(--border);
+
-}
+.stat-label {
-
+  font-size: 0.875rem;
-.stat-value {
+  color: var(--muted);
-    display: block;
+}
-    font-size: 1.5rem;
+
-    font-weight: bold;
+.status-item {
-    color: var(--text);
+  display: flex;
-    margin-bottom: 0.5rem;
+  align-items: center;
-}
+  gap: 0.5rem;
-
+  padding: 1rem;
-.stat-label {
+  background: var(--card-bg);
-    font-size: 0.875rem;
+  border-radius: 8px;
-    color: var(--muted);
+  border: 1px solid var(--border);
-}
+  margin-top: 1rem;
-
+}
-.status-item {
+
-    display: flex;
+.status-indicator {
-    align-items: center;
+  width: 12px;
-    gap: 0.5rem;
+  height: 12px;
-    padding: 1rem;
+  border-radius: 50%;
-    background: var(--card-bg);
+  background: var(--muted);
-    border-radius: 8px;
+}
-    border: 1px solid var(--border);
+
-    margin-top: 1rem;
+.status-indicator.active {
-}
+  background: #6bdba6;
-
+}
-.status-indicator {
+
-    width: 12px;
+.status-text {
-    height: 12px;
+  font-weight: 500;
-    border-radius: 50%;
+}
-    background: var(--muted);
+
-}
+.status-project {
-
+  color: var(--muted);
-.status-indicator.active {
+  font-size: 0.875rem;
-    background: #6bdba6;
+}
-}
+
-
+.lang-wrap {
-.status-text {
+  margin-top: 12px;
-    font-weight: 500;
+}
-}
+
-
+.lang-chart {
-.status-project {
+  display: block;
-    color: var(--muted);
+}
-    font-size: 0.875rem;
+
-}
+.lang-list {
-
+  display: flex;
-.lang-wrap {
+  flex-direction: column;
-    margin-top: 12px;
+  gap: 10px;
-}
+}
-
+
-.lang-chart {
+.lang-row {
-    display: block;
+  background: rgba(255, 255, 255, 0.04);
-}
+  border: 1px solid rgba(255, 255, 255, 0.08);
-
+  border-radius: 10px;
-.lang-list {
+  padding: 8px 10px;
-    display: flex;
+}
-    flex-direction: column;
+
-    gap: 10px;
+.lang-label {
-}
+  display: flex;
-
+  align-items: center;
-.lang-row {
+  gap: 8px;
-    background: rgba(255, 255, 255, 0.04);
+  font-weight: 600;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+}
-    border-radius: 10px;
+
-    padding: 8px 10px;
+.lang-name {
-}
+  color: #e8eefc;
-
+}
-.lang-label {
+
-    display: flex;
+.lang-percent {
-    align-items: center;
+  color: #a8b3cf;
-    gap: 8px;
+  font-size: 0.9rem;
-    font-weight: 600;
+}
-}
+
-
+.lang-bar {
-.lang-name {
+  margin-top: 6px;
-    color: #e8eefc;
+  height: 8px;
-}
+  border-radius: 999px;
-
+  background: rgba(255, 255, 255, 0.05);
-.lang-percent {
+  overflow: hidden;
-    color: #a8b3cf;
+}
-    font-size: 0.9rem;
+
-}
+.lang-bar-fill {
-
+  display: block;
-.lang-bar {
+  height: 100%;
-    margin-top: 6px;
+  border-radius: 999px;
-    height: 8px;
+  transition: width 0.3s ease;
-    border-radius: 999px;
+}
-    background: rgba(255, 255, 255, 0.05);
+
-    overflow: hidden;
+.dot {
-}
+  display: inline-block;
-
+  width: 10px;
-.lang-bar-fill {
+  height: 10px;
-    display: block;
+  border-radius: 50%;
-    height: 100%;
+  margin-right: 6px;
-    border-radius: 999px;
+}
-    transition: width 0.3s ease;
+</style>
-}
-
-.dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    margin-right: 6px;
-}
-</style>

app/config/siteConfig.ts

@@ -1,160 +1,185 @@
-const siteConfig = {
+const siteConfig = {
-    profile: {
+  profile: {
-        name: "RhenCloud",
+    name: "RhenCloud",
-        title: "I'm RhenCloud.",
+    title: "I'm RhenCloud.",
-        avatar: "/avatar.webp", // public/avatar.webp
+    avatar: "/avatar-1.webp", // public/avatar.webp
-        bio: "趁世界还未重启之前 约一次爱恋",
+    bio: "趁世界还未重启之前 约一次爱恋",
-        email: "i@rhen.cloud",
+    email: "i@rhen.cloud",
-        birthday: "2010-03-28",
+    birthday: "2010-03-28",
-        // gender: "女",
+    // gender: "女",
-        pronouns: "她",
+    pronouns: "她",
-        location: "中国 · 天津",
+    location: "中国 · 天津",
-    },
+  },
-
+
-    socialLinks: [
+  socialLinks: [
-        { name: "GitHub", url: "https://github.com/RhenCloud" },
+    { name: "GitHub", url: "https://github.com/RhenCloud" },
-        { name: "Email", url: "mailto:i@rhen.cloud" },
+    { name: "Email", url: "mailto:i@rhen.cloud" },
-        { name: "Telegram", url: "https://t.me/RhenCloud" },
+    { name: "Telegram", url: "https://t.me/RhenCloud" },
-        { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
+    { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
-        { name: "Blog", url: "https://blog.rhen.cloud" },
+    { name: "Blog", url: "https://blog.rhen.cloud" },
-    ],
+    { name: "Twitter", url: "https://x.com/RhenCloud75" },
-
+  ],
-    github: {
+
-        username: "RhenCloud",
+  github: {
-    },
+    username: "RhenCloud",
-
+  },
-    about: [
+
-        { title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
+  about: [
-        { title: "Developer", desc: "专注后端 / 云原生，热爱自动化与高可用。", icon: "🛠️" },
+    { title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
-        { title: "Anime Fan", desc: "二次元爱好者，享受故事与想象力。", icon: "🎬" },
+    { title: "Developer", desc: "专注后端 / 云原生，热爱自动化与高可用。", icon: "🛠️" },
-        { title: "Just For Fun", desc: "我喜欢尝试新鲜事物，折腾小众技术", icon: "🎮" },
+    { title: "Anime Fan", desc: "二次元爱好者，享受故事与想象力。", icon: "🎬" },
-    ],
+    { title: "Just For Fun", desc: "我喜欢尝试新鲜事物，折腾小众技术", icon: "🎮" },
-
+  ],
-    siteMeta: {
+
-        title: "RhenCloud",
+  siteMeta: {
-        url: "https://rhen.cloud",
+    title: "RhenCloud",
-        icon: "/favicon.svg", // public/favicon.svg
+    description: "RhenCloud的个人主页，分享技术、生活、兴趣。",
-        startDate: "2025-12-06",
+    keywords: ["Technology", "Blog", "Development", "Programming"],
-    },
+    author: "RhenCloud",
-
+    url: "https://rhen.cloud",
-    appearance: {
+    favicon: "/favicon.svg", // public/favicon.svg
-        background: {
+    startDate: "2025-12-06",
-            enable: true,
+    lang: "zh-CN",
-            // URL 支持：可使用外部 URL 或本地路径
+  },
-            // 例如: "https://example.com/bg.jpg" 或 "background.webp"
+
-            image: "background.webp", // 背景图片 URL 或本地路径（桌面端）
+  appearance: {
-            mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
+    background: {
-            blur: 0, // 背景模糊程度 (0-100)
+      enable: true,
-            overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
+      // URL 支持：可使用外部 URL 或本地路径
-        },
+      // 例如: "https://example.com/bg.jpg" 或 "background.webp"
-    },
+      image: "background.webp", // 背景图片 URL 或本地路径（桌面端）
-
+      mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
-    music: {
+      blur: 0, // 背景模糊程度 (0-100)
-        enable: true,
+      overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
-        // 浮动模式播放器（推荐）- 用于播放网易云歌单
+    },
-        mode: "floating", // "floating" 或 "embed"
+  },
-        // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
+
-        playlistId: "14366453940", // 例如: "14273792576"
+  music: {
-        // 歌曲ID：仅在嵌入模式下使用
+    enable: true,
-        songId: undefined, // 例如: "554242291"
+    // 浮动模式播放器（推荐）- 用于播放网易云歌单
-        // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
+    mode: "floating", // "floating" 或 "embed"
-        position: "bottom-left",
+    // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
-        // 是否显示歌词
+    playlistId: "14366453940", // 例如: "14273792576"
-        lyric: true,
+    // 歌曲ID：仅在嵌入模式下使用
-        // 主题: "light" | "dark" | "auto"
+    songId: undefined, // 例如: "554242291"
-        theme: "dark",
+    // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
-        // 是否自动播放
+    position: "bottom-left",
-        autoplay: false,
+    // 是否显示歌词
-        // 是否默认以黑胶唱片状态启动（仅浮动模式）
+    lyric: true,
-        defaultMinimized: true,
+    // 主题: "light" | "dark" | "auto"
-        // 标签页非激活时是否自动暂停
+    theme: "dark",
-        autoPause: false,
+    // 是否自动播放
-        // Music API 配置
+    autoplay: false,
-        apiUrls: ["https://www.bilibili.uno/api", "https://meting-api.wangcy.site/api"],
+    // 是否默认以黑胶唱片状态启动（仅浮动模式）
-    },
+    defaultMinimized: true,
-
+    // 标签页非激活时是否自动暂停
-    umami: {
+    autoPause: false,
-        enable: true,
+    // Music API 配置
-        url: "https://cloud.umami.is/script.js",
+    apiUrls: ["https://www.bilibili.uno/api", "https://meting-api.wangcy.site/api"],
-        websiteId: "ddcd51c3-ccc7-45e4-81e6-11567027f69b",
+  },
-        apiBase: "https://api.umami.is",
+
-    },
+  umami: {
-
+    enable: true,
-    wakatime: {
+    url: "https://cloud.umami.is/script.js",
-        enable: true,
+    websiteId: "ddcd51c3-ccc7-45e4-81e6-11567027f69b",
-        apiUrl: "https://wakapi.rhen.cloud/api/v1",
+    apiBase: "https://api.umami.is",
-    },
+  },
-
+
-    skills: [
+  wakapi: {
-        { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
+    enable: false,
-        { title: "后端 / 云", items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"] },
+    apiUrl: "https://wakapi.rhen.cloud/api/v1",
-        { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
+    username: "RhenCloud",
-        { title: "操作系统", items: ["arch", "linux", "windows"] },
+  },
-    ],
+
-
+  skills: [
-    sites: [
+    { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
-        {
+    {
-            name: "个人主页",
+      title: "后端 / 云",
-            desc: "个人主页",
+      items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"],
-            url: "https://rhen.cloud",
+    },
-        },
+    { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
-        {
+    { title: "操作系统", items: ["arch", "linux", "windows"] },
-            name: "我的博客",
+  ],
-            desc: "分享与记录",
+
-            url: "https://blog.rhen.cloud",
+  sites: [
-        },
+    {
-        {
+      name: "个人主页",
-            name: "来视奸我",
+      desc: "个人主页",
-            desc: "使用Sleepy项目搭建的视奸网站",
+      url: "https://rhen.cloud",
-            url: "https://sleepy.rhen.cloud",
+    },
-        },
+    {
-        {
+      name: "我的博客",
-            name: "网站监控",
+      desc: "分享与记录",
-            desc: "网站运行状态监控",
+      url: "https://blog.rhen.cloud",
-            url: "https://status.rhen.cloud",
+    },
-        },
+    {
-    ],
+      name: "来视奸我",
-
+      desc: "使用Sleepy项目搭建的视奸网站",
-    projects: [
+      url: "https://sleepy.rhen.cloud",
-        { 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: "网站监控",
-        {
+      desc: "网站运行状态监控",
-            name: "Test",
+      url: "https://status.rhen.cloud",
-            url: "https://github.com/RhenCloud/ILP-Cpp",
+    },
-            desc: "",
+  ],
-        },
+
-    ],
+  projects: [
-    friends: [
+    { name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
-        {
+    {
-            name: "wuxian",
+      name: "ILP",
-            desc: "wuxian's web",
+      url: "https://github.com/RhenCloud/ILP",
-            url: "https://www.alxian.cn",
+      desc: "跨平台、多网站、模块化的小说下载器",
-            avatar: "https://www.alxian.cn/_next/image?url=%2Fimages%2Favatar.jpg&w=256&q=75",
+    },
-        },
+    {
-        {
+      name: "ILP-C++",
-            name: "鈴奈咲桜のBlog",
+      url: "https://github.com/RhenCloud/ILP-Cpp",
-            desc: "一个普普通通的Blog",
+      desc: "跨平台、多网站、模块化的小说下载器",
-            url: "https://blog.sakura.ink",
+    },
-            avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
+  ],
-        },
+
-        {
+  friends: [
-            name: "鈴奈咲桜のBlog",
+    {
-            desc: "一个普普通通的Blog",
+      name: "wuxian",
-            url: "https://blog.sakura.ink",
+      desc: "wuxian's web",
-            avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
+      url: "https://www.alxian.cn",
-        },
+      avatar: "https://www.alxian.cn/_next/image?url=%2Fimages%2Favatar.jpg&w=256&q=75",
-    ],
+    },
-
+    {
-    footer: {
+      name: "鈴奈咲桜のBlog",
-        beian: "津ICP备2025039003号-1",
+      desc: "一个普普通通的Blog",
-        beianLink: "https://beian.miit.gov.cn/",
+      url: "https://blog.sakura.ink",
-        customHtml: '<span style="opacity:.8">© 2025 <a href="https://rhen.cloud">RhenCloud</a></span>',
+      avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
-        hitokoto: {
+    },
-            enable: true,
+  ],
-            type: "a&b&c&d&j",
+
-        },
+  comments: {
-    },
+    enable: true,
-};
+    // twikoo: {
-
+    //     url: "https://twikoo.rhen.cloud",
-export default siteConfig;
+    // },
+    giscus: {
+      repo: "RhenCloud/Cloud-Home",
+      repoId: "R_kgDOQjx8rQ",
+      category: "Announcements",
+      categoryId: "DIC_kwDOQjx8rc4Cz4Qb",
+      mapping: "pathname",
+      reactionsEnabled: "1",
+      emitMetadata: "0",
+      inputPosition: "bottom",
+      theme: "preferred_color_scheme",
+    },
+  },
+
+  footer: {
+    beian: "津ICP备2025039003号-1",
+    beianLink: "https://beian.miit.gov.cn/",
+    customHtml: '<span style="opacity:.8">© 2025 <a href="https://rhen.cloud">RhenCloud</a></span>',
+    hitokoto: {
+      enable: true,
+      type: "a&b&c&d&j",
+    },
+  },
+};
+
+export default siteConfig;

app/pages/about.vue

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

app/pages/comments.vue

@@ -0,0 +1,82 @@
+<template>
+  <section class="container mx-auto py-8">
+    <p v-if="!giscus || !giscus.repo" class="text-sm text-red-500 mb-4">Giscus 未配置。</p>
+    <ClientOnly>
+      <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">在这里留下想说的话吧 · Comments</p>
+        <div class="giscus-wrapper">
+          <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>
+    </ClientOnly>
+  </section>
+</template>
+
+<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<Component | null>(null);
+
+async function tryUseOfficialComponent() {
+  try {
+    const mod = await import("@giscus/vue");
+    const comp = mod.default ?? mod;
+    if (comp) GiscusComponent.value = markRaw(comp);
+    return !!comp;
+  } catch (e) {
+    console.error("Failed to import Giscus component:", e);
+    return false;
+  }
+}
+
+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({
+  order: 5,
+  label: "留言",
+});
+</script>
+
+<style scoped>
+.container {
+  max-width: 880px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+h1 {
+  color: #e6eef8;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
+}
+</style>
+
+<!-- <style src="../styles/giscus.css"></style> -->

app/pages/friends.vue

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

app/pages/index.vue

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

app/pages/projects.vue

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

app/pages/sites.vue

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

app/plugins/neteaseMiniPlayer.client.ts

@@ -1,91 +1,102 @@
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin } from "#app";
-import siteConfig from "~/config/siteConfig";
+import siteConfig from "~/config/siteConfig";
-
+
-export default defineNuxtPlugin(() => {
+type NeteaseMiniPlayerGlobal = {
-    if (import.meta.server) return;
+  init?: () => void;
-
+};
-    // 检查配置是否启用了音乐播放器
+
-    if (!siteConfig.music?.enable) {
+type NeteaseWindow = Window & {
-        return;
+  NeteaseMiniPlayer?: NeteaseMiniPlayerGlobal;
-    }
+  __NETEASE_MUSIC_CONFIG__?: unknown;
-
+};
-    // 在本地开发环境禁用网易音乐播放器，避免网络超时
+
-    // if (
+export default defineNuxtPlugin(() => {
-    //     typeof window !== "undefined" &&
+  if (import.meta.server) return;
-    //     (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
+
-    // ) {
+  // 检查配置是否启用了音乐播放器
-    //     console.log("Netease Music Player disabled on localhost");
+  if (!siteConfig.music?.enable) {
-    //     return;
+    return;
-    // }
+  }
-
+
-    const cssHref = "/css/netease-mini-player-v2.css";
+  // 在本地开发环境禁用网易音乐播放器，避免网络超时
-    const scriptSrc = "/js/netease-mini-player-v2.js";
+  // if (
-
+  //     typeof window !== "undefined" &&
-    const ensureStyle = () => {
+  //     (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
-        if (document.querySelector(`link[href="${cssHref}"]`)) return;
+  // ) {
-        const link = document.createElement("link");
+  //     console.log("Netease Music Player disabled on localhost");
-        link.rel = "stylesheet";
+  //     return;
-        link.href = cssHref;
+  // }
-        link.onerror = () => {
+
-            console.warn("Failed to load Netease music player styles");
+  const cssHref = "/css/netease-mini-player-v2.css";
-        };
+  const scriptSrc = "/js/netease-mini-player-v2.js";
-        document.head.appendChild(link);
+
-    };
+  const ensureStyle = () => {
-
+    if (document.querySelector(`link[href="${cssHref}"]`)) return;
-    const ensureScript = () =>
+    const link = document.createElement("link");
-        new Promise<void>((resolve) => {
+    link.rel = "stylesheet";
-            // 检查全局对象是否已存在，表示脚本已加载
+    link.href = cssHref;
-            const anyWin = window as any;
+    link.onerror = () => {
-            if (anyWin.NeteaseMiniPlayer) {
+      console.warn("Failed to load Netease music player styles");
-                resolve();
+    };
-                return;
+    document.head.appendChild(link);
-            }
+  };
-
+
-            const existing = document.querySelector(`script[src="${scriptSrc}"]`) as HTMLScriptElement | null;
+  const ensureScript = () =>
-            if (existing) {
+    new Promise<void>((resolve) => {
-                // 脚本已存在但未加载，等待它加载
+      // 检查全局对象是否已存在，表示脚本已加载
-                existing.addEventListener("load", () => resolve(), { once: true });
+      const anyWin = window as NeteaseWindow;
-                existing.addEventListener("error", () => resolve(), { once: true });
+      if (anyWin.NeteaseMiniPlayer) {
-                return;
+        resolve();
-            }
+        return;
-
+      }
-            // 脚本不存在，创建并加载
+
-            const script = document.createElement("script");
+      const existing = document.querySelector(
-            script.src = scriptSrc;
+        `script[src="${scriptSrc}"]`
-            script.async = true;
+      ) as HTMLScriptElement | null;
-            script.onload = () => resolve();
+      if (existing) {
-            script.onerror = () => {
+        // 脚本已存在但未加载，等待它加载
-                console.warn("Failed to load Netease music player script");
+        existing.addEventListener("load", () => resolve(), { once: true });
-                resolve();
+        existing.addEventListener("error", () => resolve(), { once: true });
-            };
+        return;
-            document.body.appendChild(script);
+      }
-        });
+
-
+      // 脚本不存在，创建并加载
-    const initPlayer = () => {
+      const script = document.createElement("script");
-        const anyWin = window as any;
+      script.src = scriptSrc;
-
+      script.async = true;
-        // 将 siteConfig 的音乐配置传递给全局 window 对象
+      script.onload = () => resolve();
-        if (!anyWin.__NETEASE_MUSIC_CONFIG__) {
+      script.onerror = () => {
-            anyWin.__NETEASE_MUSIC_CONFIG__ = siteConfig.music;
+        console.warn("Failed to load Netease music player script");
-        }
+        resolve();
-
+      };
-        if (anyWin.NeteaseMiniPlayer?.init) {
+      document.body.appendChild(script);
-            try {
+    });
-                anyWin.NeteaseMiniPlayer.init();
+
-            } catch (error) {
+  const initPlayer = () => {
-                console.warn("Failed to initialize Netease music player:", error);
+    const anyWin = window as NeteaseWindow;
-            }
+
-        }
+    // 将 siteConfig 的音乐配置传递给全局 window 对象
-    };
+    if (!anyWin.__NETEASE_MUSIC_CONFIG__) {
-
+      anyWin.__NETEASE_MUSIC_CONFIG__ = siteConfig.music;
-    // 使用超时机制防止永久挂起
+    }
-    const timeout = setTimeout(() => {
+
-        console.warn("Netease music player initialization timeout");
+    if (anyWin.NeteaseMiniPlayer?.init) {
-    }, 15000);
+      try {
-
+        anyWin.NeteaseMiniPlayer.init();
-    ensureStyle();
+      } catch (error) {
-    ensureScript().then(() => {
+        console.warn("Failed to initialize Netease music player:", error);
-        clearTimeout(timeout);
+      }
-        initPlayer();
+    }
-    });
+  };
-});
+
+  // 使用超时机制防止永久挂起
+  const timeout = setTimeout(() => {
+    console.warn("Netease music player initialization timeout");
+  }, 15000);
+
+  ensureStyle();
+  ensureScript().then(() => {
+    clearTimeout(timeout);
+    initPlayer();
+  });
+});

app/plugins/umami.client.ts

@@ -1,29 +1,29 @@
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin } from "#app";
-import { VueUmamiPlugin } from "@jaseeey/vue-umami-plugin";
+import { VueUmamiPlugin } from "@jaseeey/vue-umami-plugin";
-import type { Router } from "vue-router";
+import type { Router } from "vue-router";
-import siteConfig from "~/config/siteConfig";
+import siteConfig from "~/config/siteConfig";
-
+
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin((nuxtApp) => {
-    if (!process.client) return;
+  if (!import.meta.client) return;
-    if (!siteConfig.umami?.enable) return;
+  if (!siteConfig.umami?.enable) return;
-
+
-    // 跳过在 localhost 环境下加载 Umami
+  // 跳过在 localhost 环境下加载 Umami
-    if (
+  if (
-        typeof window !== "undefined" &&
+    typeof window !== "undefined" &&
-        (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
+    (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
-    ) {
+  ) {
-        console.log("Umami plugin skipped on localhost");
+    console.log("Umami plugin skipped on localhost");
-        return;
+    return;
-    }
+  }
-
+
-    const router = nuxtApp.$router as Router | undefined;
+  const router = nuxtApp.$router as Router | undefined;
-    if (!router) return;
+  if (!router) return;
-
+
-    nuxtApp.vueApp.use(
+  nuxtApp.vueApp.use(
-        VueUmamiPlugin({
+    VueUmamiPlugin({
-            websiteID: siteConfig.umami.websiteId,
+      websiteID: siteConfig.umami.websiteId,
-            scriptSrc: siteConfig.umami.url,
+      scriptSrc: siteConfig.umami.url,
-            router,
+      router,
-        })
+    })
-    );
+  );
-});
+});

app/styles.global.css

@@ -1,353 +1,340 @@
-@import "tailwindcss";
+@import "tailwindcss";
-
+
-/* Font Awesome 字体优化 */
+@layer base {
-@font-face {
+  html {
-    font-family: "Font Awesome 6 Solid";
+    height: 100%;
-    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
+    scroll-behavior: smooth;
-    font-display: swap;
+  }
-    font-weight: 400;
+
-    font-style: normal;
+  :root {
-}
+    color-scheme: light dark;
-
+    background: #0f1629;
-@font-face {
+    color: #e8eefc;
-    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;
+  body {
-    font-weight: 400;
+    margin: 0;
-    font-style: normal;
+    min-height: 100%;
-}
+    background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
-
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
-@layer base {
+    -webkit-font-smoothing: antialiased;
-    html {
+    -moz-osx-font-smoothing: grayscale;
-        height: 100%;
+  }
-        scroll-behavior: smooth;
+
-    }
+  h1,
-
+  h2,
-    :root {
+  h3 {
-        color-scheme: light dark;
+    margin: 0;
-        background: #0f1629;
+    margin-bottom: 0.5rem;
-        color: #e8eefc;
+    font-weight: 600;
-    }
+  }
-
+
-    body {
+  p {
-        margin: 0;
+    margin-top: 0.375rem;
-        min-height: 100%;
+    margin-bottom: 0.375rem;
-        background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
+  }
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+
-        -webkit-font-smoothing: antialiased;
+  a {
-        -moz-osx-font-smoothing: grayscale;
+    color: #7cc1ff;
-    }
+    text-decoration: none;
-
+    transition: color 0.2s ease;
-    h1,
+  }
-    h2,
+
-    h3 {
+  a:hover {
-        margin: 0;
+    color: #a8d5ff;
-        margin-bottom: 0.5rem;
+  }
-        font-weight: 600;
+}
-    }
+
-
+@layer components {
-    p {
+  .info-card {
-        margin-top: 0.375rem;
+    @apply rounded-[14px] border border-white/10
-        margin-bottom: 0.375rem;
+           bg-gradient-to-br from-white/5 to-white/0
-    }
+           px-4 py-3.5 transition-all duration-200;
-
+  }
-    a {
+}
-        color: #7cc1ff;
+
-        text-decoration: none;
+@layer components {
-        transition: color 0.2s ease;
+  .app-shell {
-    }
+    position: relative;
-
+    min-height: 100vh;
-    a:hover {
+    color: #e8eefc;
-        color: #a8d5ff;
+    overflow: hidden;
-    }
+    display: flex;
-}
+    flex-direction: column;
-
+    z-index: 0;
-@layer components {
+    isolation: isolate;
-    .info-card {
+  }
-        @apply rounded-[14px] border border-white/10
+
-           bg-gradient-to-br from-white/5 to-white/0
+  .background-overlay {
-           px-4 py-3.5 transition-all duration-200;
+    position: fixed;
-    }
+    inset: 0;
-}
+    pointer-events: none;
-
+    z-index: -10;
-@layer components {
+    background-repeat: no-repeat;
-    .app-shell {
+  }
-        position: relative;
+
-        min-height: 100vh;
+  .content-stack {
-        color: #e8eefc;
+    position: relative;
-        overflow: hidden;
+    z-index: 10;
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-        z-index: 0;
+    min-height: 100vh;
-        isolation: isolate;
+  }
-    }
+
-
+  .app-body {
-    .background-overlay {
+    position: relative;
-        position: fixed;
+    z-index: 10;
-        inset: 0;
+    flex: 1;
-        pointer-events: none;
+    display: flex;
-        z-index: -10;
+    flex-direction: column;
-        background-repeat: no-repeat;
+  }
-    }
+
-
+  .background-toggle {
-    .content-stack {
+    position: fixed;
-        position: relative;
+    right: 1.125rem;
-        z-index: 10;
+    bottom: 1.125rem;
-        display: flex;
+    z-index: 40;
-        flex-direction: column;
+    display: inline-flex;
-        min-height: 100vh;
+    align-items: center;
-    }
+    gap: 0.375rem;
-
+    padding: 0.625rem 0.875rem;
-    .app-body {
+    border-radius: 999px;
-        position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.25);
-        z-index: 10;
+    background: rgba(255, 255, 255, 0.14);
-        flex: 1;
+    backdrop-filter: blur(10px);
-        display: flex;
+    color: #f7fbff;
-        flex-direction: column;
+    font-weight: 600;
-    }
+    cursor: pointer;
-
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
-    .background-toggle {
+    transition:
-        position: fixed;
+      transform 0.18s ease,
-        right: 1.125rem;
+      box-shadow 0.18s ease,
-        bottom: 1.125rem;
+      background 0.18s ease,
-        z-index: 40;
+      border-color 0.18s ease;
-        display: inline-flex;
+  }
-        align-items: center;
+
-        gap: 0.375rem;
+  .background-toggle:hover,
-        padding: 0.625rem 0.875rem;
+  .background-toggle:focus-visible {
-        border-radius: 999px;
+    background: rgba(124, 193, 255, 0.25);
-        border: 1px solid rgba(255, 255, 255, 0.25);
+    border-color: rgba(124, 193, 255, 0.65);
-        background: rgba(255, 255, 255, 0.14);
+    box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
-        backdrop-filter: blur(10px);
+    outline: none;
-        color: #f7fbff;
+  }
-        font-weight: 600;
+
-        cursor: pointer;
+  .background-toggle:active {
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+    transform: translateY(1px) scale(0.99);
-        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+  }
-    }
+
-
+  .background-toggle.active {
-    .background-toggle:hover,
+    background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
-    .background-toggle:focus-visible {
+    border-color: rgba(124, 193, 255, 0.8);
-        background: rgba(124, 193, 255, 0.25);
+    color: #0f1629;
-        border-color: rgba(124, 193, 255, 0.65);
+    box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
-        box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
+  }
-        outline: none;
+
-    }
+  .background-toggle .toggle-icon {
-
+    font-size: 18px;
-    .background-toggle:active {
+    line-height: 1;
-        transform: translateY(1px) scale(0.99);
+  }
-    }
+
-
+  .background-toggle .toggle-label {
-    .background-toggle.active {
+    font-size: 14px;
-        background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
+    letter-spacing: 0.2px;
-        border-color: rgba(124, 193, 255, 0.8);
+  }
-        color: #0f1629;
+
-        box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
+  .card {
-    }
+    background: rgba(255, 255, 255, 0.04);
-
+    border: 1px solid rgba(255, 255, 255, 0.08);
-    .background-toggle .toggle-icon {
+    border-radius: 1rem;
-        font-size: 18px;
+    padding: 1.125rem 1.25rem;
-        line-height: 1;
+    backdrop-filter: blur(8px);
-    }
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
-
+    transition: all 0.3s ease;
-    .background-toggle .toggle-label {
+  }
-        font-size: 14px;
+
-        letter-spacing: 0.2px;
+  .card:hover {
-    }
+    border-color: rgba(255, 255, 255, 0.15);
-
+    box-shadow: 0 12px 48px rgba(124, 193, 255, 0.15);
-    .card {
+  }
-        background: rgba(255, 255, 255, 0.04);
+
-        border: 1px solid rgba(255, 255, 255, 0.08);
+  .page {
-        border-radius: 1rem;
+    max-width: 960px;
-        padding: 1.125rem 1.25rem;
+    margin: 0 auto;
-        backdrop-filter: blur(8px);
+    padding: 2rem 1rem 3rem;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+    display: flex;
-        transition: all 0.3s ease;
+    flex-direction: column;
-    }
+    gap: 1rem;
-
+  }
-    .card:hover {
+
-        border-color: rgba(255, 255, 255, 0.15);
+  .chips {
-        box-shadow: 0 12px 48px rgba(124, 193, 255, 0.15);
+    display: flex;
-    }
+    flex-wrap: wrap;
-
+    gap: 0.625rem;
-    .page {
+  }
-        max-width: 960px;
+
-        margin: 0 auto;
+  .chips a,
-        padding: 2rem 1rem 3rem;
+  .chip {
-        display: flex;
+    padding: 0.375rem 0.75rem;
-        flex-direction: column;
+    border-radius: 999px;
-        gap: 1rem;
+    background: rgba(255, 255, 255, 0.08);
-    }
+    border: 1px solid rgba(255, 255, 255, 0.1);
-
+    color: #e8eefc;
-    .chips {
+    font-size: 0.875rem;
-        display: flex;
+    font-weight: 500;
-        flex-wrap: wrap;
+    transition: all 0.2s ease;
-        gap: 0.625rem;
+  }
-    }
+
-
+  .chips a:hover,
-    .chips a,
+  .chip:hover {
-    .chip {
+    background: rgba(124, 193, 255, 0.2);
-        padding: 0.375rem 0.75rem;
+    border-color: rgba(124, 193, 255, 0.4);
-        border-radius: 999px;
+    color: #a8d5ff;
-        background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+  }
-        color: #e8eefc;
+
-        font-size: 0.875rem;
+  .list {
-        font-weight: 500;
+    list-style: none;
-        transition: all 0.2s ease;
+    padding: 0;
-    }
+    margin: 0;
-
+  }
-    .chips a:hover,
+
-    .chip:hover {
+  .list li {
-        background: rgba(124, 193, 255, 0.2);
+    margin-bottom: 0.5rem;
-        border-color: rgba(124, 193, 255, 0.4);
+  }
-        color: #a8d5ff;
+
-        transform: translateY(-2px);
+  .netease-mini-player,
-    }
+  .netease-mini-player-embed,
-
+  .nmpv2-player,
-    .list {
+  .nmpv2-root {
-        list-style: none;
+    position: fixed !important;
-        padding: 0;
+    bottom: 20px !important;
-        margin: 0;
+    left: 20px !important;
-    }
+    right: auto !important;
-
+    max-width: calc(100% - 40px) !important;
-    .list li {
+    z-index: 40001 !important;
-        margin-bottom: 0.5rem;
+    margin: 0 !important;
-    }
+    transform: none !important;
-
+  }
-    .netease-mini-player,
+
-    .netease-mini-player-embed,
+  .netease-mini-player > * {
-    .nmpv2-player,
+    box-sizing: border-box;
-    .nmpv2-root {
+  }
-        position: fixed !important;
+
-        bottom: 20px !important;
+  .netease-mini-player.minimized {
-        left: 20px !important;
+    width: 80px !important;
-        right: auto !important;
+    height: 80px !important;
-        max-width: calc(100% - 40px) !important;
+    border-radius: 50% !important;
-        z-index: 40001 !important;
+    padding: 0 !important;
-        margin: 0 !important;
+    overflow: hidden !important;
-        transform: none !important;
+    box-shadow: none !important;
-    }
+  }
-
+
-    .netease-mini-player > * {
+  .netease-mini-player.minimized .album-cover-container {
-        box-sizing: border-box;
+    width: 100% !important;
-    }
+    height: 100% !important;
-
+    position: absolute !important;
-    .netease-mini-player.minimized {
+    top: 0 !important;
-        width: 80px !important;
+    left: 0 !important;
-        height: 80px !important;
+    border-radius: 50% !important;
-        border-radius: 50% !important;
+    overflow: hidden !important;
-        padding: 0 !important;
+  }
-        overflow: hidden !important;
+
-        box-shadow: none !important;
+  .netease-mini-player.minimized .album-cover {
-    }
+    width: 100% !important;
-
+    height: 100% !important;
-    .netease-mini-player.minimized .album-cover-container {
+    object-fit: cover !important;
-        width: 100% !important;
+    border-radius: 50% !important;
-        height: 100% !important;
+  }
-        position: absolute !important;
+
-        top: 0 !important;
+  .netease-mini-player[data-position="bottom-left"] .playlist-container,
-        left: 0 !important;
+  .netease-mini-player[data-position="bottom-right"] .playlist-container {
-        border-radius: 50% !important;
+    position: fixed !important;
-        overflow: hidden !important;
+    bottom: calc(20px + 80px) !important;
-    }
+  }
-
+
-    .netease-mini-player.minimized .album-cover {
+  .muted {
-        width: 100% !important;
+    color: #a8b3cf;
-        height: 100% !important;
+    font-size: 0.875rem;
-        object-fit: cover !important;
+  }
-        border-radius: 50% !important;
+
-    }
+  .fade-enter-active,
-
+  .fade-leave-active {
-    .netease-mini-player[data-position="bottom-left"] .playlist-container,
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    .netease-mini-player[data-position="bottom-right"] .playlist-container {
+  }
-        position: fixed !important;
+
-        bottom: calc(20px + 80px) !important;
+  .fade-enter-from,
-    }
+  .fade-leave-to {
-
+    opacity: 0;
-    .muted {
+  }
-        color: #a8b3cf;
+
-        font-size: 0.875rem;
+  .fade-down-enter-active,
-    }
+  .fade-down-leave-active {
-
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    .fade-enter-active,
+  }
-    .fade-leave-active {
+
-        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  .fade-down-enter-from {
-    }
+    opacity: 0;
-
+    transform: translateY(0.5rem);
-    .fade-enter-from,
+  }
-    .fade-leave-to {
+
-        opacity: 0;
+  .fade-down-leave-to {
-    }
+    opacity: 0;
-
+    transform: translateY(-0.5rem);
-    .fade-down-enter-active,
+  }
-    .fade-down-leave-active {
+
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  .fade-up-enter-active,
-    }
+  .fade-up-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-up-enter-from {
-    }
+    opacity: 0;
-
+    transform: translateY(-0.5rem);
-    .fade-down-leave-to {
+  }
-        opacity: 0;
+
-        transform: translateY(-0.5rem);
+  .fade-up-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);
+
-    }
+@layer utilities {
-
+  .truncate-lines-2 {
-    .fade-up-enter-from {
+    display: -webkit-box;
-        opacity: 0;
+    -webkit-line-clamp: 2;
-        transform: translateY(-0.5rem);
+    -webkit-box-orient: vertical;
-    }
+    overflow: hidden;
-
+  }
-    .fade-up-leave-to {
+
-        opacity: 0;
+  .truncate-lines-3 {
-        transform: translateY(0.5rem);
+    display: -webkit-box;
-    }
+    -webkit-line-clamp: 3;
-}
+    -webkit-box-orient: vertical;
-
+    overflow: hidden;
-@layer utilities {
+  }
-    .truncate-lines-2 {
+
-        display: -webkit-box;
+  .glass {
-        -webkit-line-clamp: 2;
+    background: rgba(255, 255, 255, 0.05);
-        -webkit-box-orient: vertical;
+    backdrop-filter: blur(8px);
-        overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
-    }
+  }
-
+
-    .truncate-lines-3 {
+  .glass-sm {
-        display: -webkit-box;
+    background: rgba(255, 255, 255, 0.05);
-        -webkit-line-clamp: 3;
+    backdrop-filter: blur(4px);
-        -webkit-box-orient: vertical;
+    border: 1px solid rgba(255, 255, 255, 0.1);
-        overflow: hidden;
+  }
-    }
+
-
+  @media (max-width: 640px) {
-    .glass {
+    .background-toggle {
-        background: rgba(255, 255, 255, 0.05);
+      right: 0.75rem;
-        backdrop-filter: blur(8px);
+      bottom: 0.75rem;
-        border: 1px solid rgba(255, 255, 255, 0.1);
+      padding: 0.5625rem 0.75rem;
-    }
+      gap: 0.3125rem;
-
+    }
-    .glass-sm {
+
-        background: rgba(255, 255, 255, 0.05);
+    .background-toggle .toggle-label {
-        backdrop-filter: blur(4px);
+      font-size: 0.8125rem;
-        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;
-        }
-    }
-}

app/utils/cssLoader.ts

@@ -1,9 +1,9 @@
-/**
+/**
- * CSS 加载工具 (已禁用)
+ * CSS 加载工具 (已禁用)
- *
+ *
- * 此工具不再使用，因为Nuxt会自动处理CSS加载和优化
+ * 此工具不再使用，因为Nuxt会自动处理CSS加载和优化
- * 保留此文件以供参考，但不会被导入
+ * 保留此文件以供参考，但不会被导入
- */
+ */
-
+
-// 所有导出的函数已被删除
+// 所有导出的函数已被删除
-// 使用 nuxt.config.ts 的 css 配置代替
+// 使用 nuxt.config.ts 的 css 配置代替

eslint.config.mjs

@@ -0,0 +1,19 @@
+// @ts-check
+import withNuxt from "./.nuxt/eslint.config.mjs";
+// import simpleImportSort from "eslint-plugin-simple-import-sort";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+
+export default withNuxt([eslintPluginPrettierRecommended], {
+  files: ["src/**/*.ts", "src/**/*.vue"],
+  ignores: [".nuxt/", "node_modules/"],
+  language: "vue",
+
+  // plugins: {
+  //   prettier: prettierPlugin,
+  // },
+  // rules: {
+  //   "prettier/prettier": "error",
+  //   "simple-import-sort/imports": "error",
+  //   "simple-import-sort/exports": "error",
+  // },
+});

netlify.toml

@@ -0,0 +1,2 @@
+[images]
+remote_images = ["https:\\/\\/.*"]

nuxt.config.ts

@@ -1,70 +1,113 @@
-import { defineNuxtConfig } from "nuxt/config";
+import { defineNuxtConfig } from "nuxt/config";
-import siteConfig from "./app/config/siteConfig";
+import siteConfig from "./app/config/siteConfig";
-import tailwindcss from "@tailwindcss/vite";
+import tailwindcss from "@tailwindcss/vite";
-
+
-export default defineNuxtConfig({
+export default defineNuxtConfig({
-    compatibilityDate: "2025-12-12",
+  compatibilityDate: "2025-12-12",
-    srcDir: "app/",
+  srcDir: "app",
-    // 禁用 Vue Router 的非关键警告
+
-    vue: {
+  modules: [
-        compilerOptions: {
+    "@nuxt/image",
-            isCustomElement: (tag) => tag.startsWith("ion-"),
+    "@nuxt/eslint",
-        },
+    "@nuxtjs/robots",
-    },
+    "@nuxtjs/sitemap",
-    // Tailwind CSS 集成
+    "@nuxt/icon",
-    css: ["~/styles.global.css"],
+    "@nuxtjs/seo",
-    vite: {
+  ],
-        plugins: [tailwindcss()],
+
-    },
+  // 禁用 Vue Router 的非关键警告
-    app: {
+  vue: {
-        head: {
+    compilerOptions: {
-            title: siteConfig.siteMeta.title,
+      isCustomElement: (tag) => tag.startsWith("ion-"),
-            link: [
+    },
-                { rel: "icon", href: siteConfig.siteMeta.icon },
+  },
-                // Font Awesome CDN 预加载和优化
+
-                {
+  // Tailwind CSS 集成
-                    rel: "preload",
+  css: ["~/styles.global.css"],
-                    as: "style",
+
-                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap",
+  vite: {
-                    crossorigin: "anonymous",
+    plugins: [tailwindcss()],
-                },
+    build: {
-                {
+      sourcemap: false,
-                    rel: "preload",
+      chunkSizeWarningLimit: 1000,
-                    as: "font",
+    },
-                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2?font-display=swap",
+  },
-                    type: "font/woff2",
+
-                    crossorigin: "anonymous",
+  postcss: {
-                },
+    plugins: {
-                {
+      "@tailwindcss/postcss": {},
-                    rel: "preload",
+    },
-                    as: "font",
+  },
-                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2?font-display=swap",
+
-                    type: "font/woff2",
+  routeRules: {
-                    crossorigin: "anonymous",
+    "/": { prerender: true },
-                },
+    "/about": { isr: 3600 },
-            ],
+    "/sites": { prerender: true },
-        },
+    "/projects": { prerender: true },
-    },
+    "/friends": { prerender: true },
-    nitro: {
+  },
-        prerender: {
+
-            crawlLinks: true,
+  robots: { groups: [{ userAgent: ["GPTBot", "ChatGPT-User"], disallow: ["/"] }] },
-            // routes: ["/sitemap.xml", "/rss.xml"],
+
-        },
+  sitemap: {
-        minify: true,
+    zeroRuntime: true,
-    },
+  },
-    runtimeConfig: {
+
-        smtpHost: process.env.SMTP_HOST ?? "",
+  app: {
-        smtpPort: Number(process.env.SMTP_PORT ?? 465),
+    head: {
-        smtpUser: process.env.SMTP_USER ?? "",
+      charset: "utf-8",
-        smtpPass: process.env.SMTP_PASS ?? "",
+      viewport: "width=device-width,initial-scale=1,maximum-scale=5",
-        senderEmail: process.env.SENDER_EMAIL ?? "",
+      title: siteConfig.siteMeta.title,
-        adminEmail: process.env.ADMIN_EMAIL ?? "",
+      titleTemplate: `%s - ${siteConfig.siteMeta.title}`,
-        smtpSecure: process.env.SMTP_SECURE ? process.env.SMTP_SECURE === "true" : undefined,
+      meta: [
-        wakatimeApiKey: process.env.WAKATIME_API_KEY ?? "",
+        { name: "author", content: siteConfig.siteMeta.author },
-        wakatimeApiUrl: process.env.WAKATIME_API_URL ?? "https://wakatime.com/api/v1",
+        { name: "language", content: "zh-CN" },
-        public: {
+        { name: "description", content: siteConfig.siteMeta.description },
-            githubToken: process.env.NUXT_PUBLIC_GITHUB_TOKEN ?? "",
+      ],
-            umamiApiKey: process.env.NUXT_PUBLIC_UMAMI_API_KEY ?? "",
+      link: [
-        },
+        { rel: "icon", href: siteConfig.siteMeta.favicon, type: "image/svg+xml" },
-    },
+        { rel: "canonical", href: siteConfig.siteMeta.url },
-});
+        { rel: "alternate", hreflang: siteConfig.siteMeta.lang, href: siteConfig.siteMeta.url },
+        { rel: "dns-prefetch", href: siteConfig.siteMeta.url },
+        { rel: "preconnect", href: siteConfig.siteMeta.url },
+        { rel: "icon", href: siteConfig.siteMeta.favicon },
+      ],
+    },
+    pageTransition: { name: "page", mode: "out-in" },
+    layoutTransition: { name: "layout", mode: "out-in" },
+  },
+
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+      // routes: ["/sitemap.xml", "/rss.xml"],
+    },
+    minify: true,
+    externals: {
+      inline: ["unhead"],
+    },
+  },
+
+  site: {
+    url: siteConfig.siteMeta.url,
+    name: siteConfig.siteMeta.title,
+    description: siteConfig.siteMeta.description,
+    author: siteConfig.siteMeta.author,
+  },
+
+  runtimeConfig: {
+    smtpHost: process.env.SMTP_HOST ?? "",
+    smtpPort: Number(process.env.SMTP_PORT ?? 465),
+    smtpUser: process.env.SMTP_USER ?? "",
+    smtpPass: process.env.SMTP_PASS ?? "",
+    senderEmail: process.env.SENDER_EMAIL ?? "",
+    adminEmail: process.env.ADMIN_EMAIL ?? "",
+    smtpSecure: process.env.SMTP_SECURE ? process.env.SMTP_SECURE === "true" : undefined,
+    githubToken: process.env.NUXT_PUBLIC_GITHUB_TOKEN ?? "",
+    umamiApiKey: process.env.UMAMI_API_KEY ?? "",
+    public: {
+      wakatimeApiKey: process.env.WAKATIME_API_KEY ?? "",
+      wakatimeApiUrl: process.env.WAKATIME_API_URL ?? "https://wakatime.com/api/v1",
+    },
+  },
+});

package.json

@@ -1,25 +1,49 @@
 {
-    "name": "cloud-home",
+  "name": "cloud-home",
-    "private": true,
+  "author": {
-    "type": "module",
+    "name": "RhenCloud",
-    "scripts": {
+    "email": "i@rhen.cloud",
-        "dev": "nuxt dev",
+    "url": "https://rhen.cloud"
-        "build": "nuxt build",
+  },
-        "generate": "nuxt generate",
+  "private": true,
-        "preview": "nuxt preview"
+  "type": "module",
-    },
+  "scripts": {
-    "dependencies": {
+    "dev": "nuxt dev",
-        "@jaseeey/vue-umami-plugin": "^1.4.0",
+    "build": "nuxt build",
-        "nodemailer": "^7.0.11",
+    "generate": "nuxt generate",
-        "nuxt": "^4.2.2",
+    "preview": "nuxt preview",
-        "vite-tsconfig-paths": "^6.0.1"
+    "lint": "eslint .",
-    },
+    "lint:fix": "eslint . --fix",
-    "devDependencies": {
+    "format": "prettier --write .",
-        "@tailwindcss/vite": "^4.1.18",
+    "format:check": "prettier --check ."
-        "@types/node": "^24.10.1",
+  },
-        "@types/nodemailer": "^7.0.4",
+  "dependencies": {
-        "autoprefixer": "^10.4.22",
+    "@giscus/vue": "^3.1.1",
-        "tailwindcss": "^4.1.18",
+    "@jaseeey/vue-umami-plugin": "^1.4.0",
-        "typescript": "^5.9.3"
+    "@nuxt/icon": "^2.2.0",
-    }
+    "@nuxt/image": "2.0.0",
-}
+    "@nuxtjs/icon": "^2.6.0",
+    "@nuxtjs/robots": "^5.6.7",
+    "@nuxtjs/seo": "3.3.0",
+    "@nuxtjs/sitemap": "^7.5.2",
+    "nodemailer": "^7.0.12",
+    "nuxt": "^4.2.2",
+    "vite-tsconfig-paths": "^6.0.4"
+  },
+  "devDependencies": {
+    "@iconify-json/fa6-brands": "^1.2.6",
+    "@iconify-json/simple-icons": "^1.2.66",
+    "@nuxt/eslint": "1.12.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/nodemailer": "^7.0.5",
+    "@typescript-eslint/parser": "^8.53.0",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "prettier": "^3.8.0",
+    "prettier-eslint": "^16.4.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  }
+}

pnpm-workspace.yaml

@@ -1,2 +1,2 @@
-onlyBuiltDependencies:
+ignoredBuiltDependencies:
-  - esbuild
+  - core-js

public/404.html

@@ -1,80 +1,86 @@
-<!doctype html>
+<!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN">
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>404 - Not Found</title>
-    <title>404 - Not Found</title>
+    <style>
-    <style>
+      :root {
-        :root {
+        color-scheme: dark;
-            color-scheme: dark;
+        font-family:
-            font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+          "Inter",
-        }
+          "Segoe UI",
-
+          system-ui,
-        * {
+          -apple-system,
-            box-sizing: border-box;
+          sans-serif;
-        }
+      }
-
+
-        body {
+      * {
-            margin: 0;
+        box-sizing: border-box;
-            min-height: 100vh;
+      }
-            display: grid;
+
-            place-items: center;
+      body {
-            background: radial-gradient(circle at 20% 20%, rgba(244, 151, 218, 0.14), transparent 32%),
+        margin: 0;
-                radial-gradient(circle at 80% 10%, rgba(124, 193, 255, 0.16), transparent 32%),
+        min-height: 100vh;
-                #0f1116;
+        display: grid;
-            color: #e8eefc;
+        place-items: center;
-        }
+        background:
-
+          radial-gradient(circle at 20% 20%, rgba(244, 151, 218, 0.14), transparent 32%),
-        .card {
+          radial-gradient(circle at 80% 10%, rgba(124, 193, 255, 0.16), transparent 32%), #0f1116;
-            width: min(480px, 92vw);
+        color: #e8eefc;
-            padding: 24px 26px;
+      }
-            border-radius: 16px;
+
-            border: 1px solid rgba(255, 255, 255, 0.12);
+      .card {
-            background: linear-gradient(135deg, rgba(244, 151, 218, 0.12), rgba(255, 255, 255, 0.05));
+        width: min(480px, 92vw);
-            box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
+        padding: 24px 26px;
-            text-align: center;
+        border-radius: 16px;
-        }
+        border: 1px solid rgba(255, 255, 255, 0.12);
-
+        background: linear-gradient(135deg, rgba(244, 151, 218, 0.12), rgba(255, 255, 255, 0.05));
-        h1 {
+        box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
-            margin: 0 0 8px;
+        text-align: center;
-            font-size: 32px;
+      }
-        }
+
-
+      h1 {
-        p {
+        margin: 0 0 8px;
-            margin: 0 0 18px;
+        font-size: 32px;
-            color: rgba(232, 238, 252, 0.82);
+      }
-        }
+
-
+      p {
-        a.btn {
+        margin: 0 0 18px;
-            display: inline-flex;
+        color: rgba(232, 238, 252, 0.82);
-            align-items: center;
+      }
-            justify-content: center;
+
-            gap: 8px;
+      a.btn {
-            padding: 10px 16px;
+        display: inline-flex;
-            border-radius: 12px;
+        align-items: center;
-            border: 1px solid rgba(124, 193, 255, 0.5);
+        justify-content: center;
-            background: rgba(124, 193, 255, 0.12);
+        gap: 8px;
-            color: #e8eefc;
+        padding: 10px 16px;
-            text-decoration: none;
+        border-radius: 12px;
-            font-weight: 600;
+        border: 1px solid rgba(124, 193, 255, 0.5);
-            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+        background: rgba(124, 193, 255, 0.12);
-        }
+        color: #e8eefc;
-
+        text-decoration: none;
-        a.btn:hover {
+        font-weight: 600;
-            transform: translateY(-2px);
+        transition:
-            border-color: rgba(244, 151, 218, 0.6);
+          transform 0.15s ease,
-            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
+          box-shadow 0.15s ease,
-        }
+          border-color 0.15s ease;
-    </style>
+      }
-</head>
+
-
+      a.btn:hover {
-<body>
+        transform: translateY(-2px);
-    <main class="card">
+        border-color: rgba(244, 151, 218, 0.6);
-        <h1>404</h1>
+        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
-        <p>页面不见了，或已被移除。</p>
+      }
-        <a class="btn" href="/">返回首页</a>
+    </style>
-    </main>
+  </head>
-</body>
+
-
+  <body>
-</html>
+    <main class="card">
+      <h1>404</h1>
+      <p>页面不见了，或已被移除。</p>
+      <a class="btn" href="/">返回首页</a>
+    </main>
+  </body>
+</html>

public/css/giscus.css

@@ -0,0 +1,167 @@
+/*!
+ * Modified from GitHub's Dark Dimmed theme, adapted for Cloud-Home
+ * License: MIT (see original project primer/primitives)
+ * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+
+:root {
+  --ch-bg: #0a0c14; /* 深色卡片背景 */
+  --ch-bg-2: rgba(6, 8, 15, 0.55);
+  --ch-border: rgba(255, 255, 255, 0.04);
+  --muted: #768390;
+  --fg: #e6eef8;
+
+  /* 添加 1.css 中的颜色变量 */
+  --color-prettylights-syntax-comment: #768390;
+  --color-prettylights-syntax-constant: #6cb6ff;
+  --color-prettylights-syntax-entity: #dcbdfb;
+  --color-prettylights-syntax-storage-modifier-import: #adbac7;
+  --color-prettylights-syntax-entity-tag: #8ddb8c;
+  --color-prettylights-syntax-keyword: #f47067;
+  --color-prettylights-syntax-string: #96d0ff;
+  --color-prettylights-syntax-variable: #f69d50;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  --color-prettylights-syntax-invalid-illegal-bg: #922323;
+  --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  --color-prettylights-syntax-string-regexp: #8ddb8c;
+  --color-prettylights-syntax-markup-list: #eac55f;
+  --color-prettylights-syntax-markup-heading: #316dca;
+  --color-prettylights-syntax-markup-italic: #adbac7;
+  --color-prettylights-syntax-markup-bold: #adbac7;
+  --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  --color-prettylights-syntax-markup-deleted-bg: #78191b;
+  --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  --color-prettylights-syntax-markup-changed-text: #ffddb0;
+  --color-prettylights-syntax-markup-changed-bg: #682d0f;
+  --color-prettylights-syntax-markup-ignored-text: #adbac7;
+  --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  --color-prettylights-syntax-brackethighlighter-angle: #768390;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+  --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+  --color-btn-text: #adbac7;
+  --color-btn-bg: #373e47;
+  --color-btn-border: #cdd9e51a;
+  --color-btn-shadow: 0 0 #0000;
+  --color-btn-inset-shadow: 0 0 #0000;
+  --color-btn-hover-bg: #444c56;
+  --color-btn-hover-border: #768390;
+  --color-btn-active-bg: #3d444d;
+  --color-btn-active-border: #636e7b;
+  --color-btn-selected-bg: #2d333b;
+  --color-btn-primary-text: #fff;
+  --color-btn-primary-bg: #347d39;
+  --color-btn-primary-border: #cdd9e51a;
+  --color-btn-primary-shadow: 0 0 #0000;
+  --color-btn-primary-inset-shadow: 0 0 #0000;
+  --color-btn-primary-hover-bg: #46954a;
+  --color-btn-primary-hover-border: #cdd9e51a;
+  --color-btn-primary-selected-bg: #347d39;
+  --color-btn-primary-selected-shadow: 0 0 #0000;
+  --color-btn-primary-disabled-text: #cdd9e580;
+  --color-btn-primary-disabled-bg: #347d3999;
+  --color-btn-primary-disabled-border: #cdd9e51a;
+  --color-action-list-item-default-hover-bg: #909dab1f;
+  --color-segmented-control-bg: #636e7b1a;
+  --color-segmented-control-button-bg: #22272e;
+  --color-segmented-control-button-selected-border: #636e7b;
+}
+
+/* 外部容器（在组件中也有一层） */
+.giscus-wrapper {
+  background: linear-gradient(180deg, rgba(6, 8, 15, 0.55), rgba(10, 12, 20, 0.45));
+  border: 1px solid var(--ch-border);
+  border-radius: 12px;
+  padding: 0.75rem;
+  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.6);
+  backdrop-filter: blur(6px) saturate(120%);
+  -webkit-backdrop-filter: blur(6px) saturate(120%);
+  margin-bottom: 1.25rem;
+}
+
+.giscus {
+  width: 100%;
+  color-scheme: dark;
+  overflow: hidden;
+}
+
+/* 兼容非组件 fallback 容器 */
+#giscus-container {
+  padding: 0.5rem;
+}
+
+/* GitHub Dark Dimmed inspired tweaks adapted to site theme */
+.gsc-reactions-count {
+  display: none !important;
+}
+.gsc-timeline {
+  flex-direction: column-reverse;
+}
+.gsc-header {
+  padding-bottom: 1rem;
+  color: var(--muted) !important;
+}
+.gsc-comments > .gsc-comment-box {
+  margin-bottom: 1rem;
+}
+.gsc-comments > .gsc-header {
+  order: 1;
+}
+.gsc-comments > .gsc-timeline {
+  order: 3;
+}
+
+/* 卡片风格：半透明+圆角+内阴影，契合站点 */
+.gsc-comment,
+.gsc-comment-body,
+.gsc-comment .gsc-comment-body {
+  background: linear-gradient(180deg, rgba(6, 8, 15, 0.5), rgba(10, 12, 20, 0.45)) !important;
+  border: 1px solid var(--ch-border) !important;
+  border-radius: 10px !important;
+  padding: 0.75rem !important;
+  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.55) !important;
+}
+
+/* 评论作者/元信息颜色 */
+.gsc-comment .gsc-comment-header,
+.gsc-comment .gsc-comment-meta {
+  color: var(--muted) !important;
+}
+
+/* 按钮 / 交互控件微调 */
+.gsc-reaction-button,
+.gsc-input button {
+  background: var(--color-btn-bg) !important;
+  border: var(--color-btn-border) !important;
+  color: var(--color-btn-text) !important;
+  border-radius: 6px !important;
+  box-shadow: var(--color-btn-shadow) !important;
+  border-radius: 6px !important;
+}
+
+/* 输入框样式 */
+.gsc-input textarea,
+.gsc-input input {
+  background: rgba(0, 0, 0, 0.35) !important;
+  color: var(--fg) !important;
+  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  border-radius: 8px !important;
+}
+
+/* 加载图像和首页背景微调 */
+main .gsc-loading-image {
+  background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif) !important;
+}
+.gsc-homepage-bg {
+  background-color: var(--color-canvas-subtle) !important;
+}
+
+/* 语义辅助：让嵌入内容更好地适配窄屏 */
+.giscus {
+  overflow: hidden;
+}

server/api/send-mail.ts

@@ -1,103 +1,112 @@
-import { defineEventHandler, createError, readBody } from "h3";
+import { defineEventHandler, createError, readBody } from "h3";
-import nodemailer from "nodemailer";
+import nodemailer from "nodemailer";
-import type SMTPTransport from "nodemailer/lib/smtp-transport";
+import type SMTPTransport from "nodemailer/lib/smtp-transport";
-import { useRuntimeConfig } from "#imports";
+import { useRuntimeConfig } from "#imports";
-
+
-type MailConfig = {
+type MailConfig = {
-    smtpHost?: string;
+  smtpHost?: string;
-    smtpPort?: number | string;
+  smtpPort?: number | string;
-    smtpUser?: string;
+  smtpUser?: string;
-    smtpPass?: string;
+  smtpPass?: string;
-    senderEmail?: string;
+  senderEmail?: string;
-    adminEmail?: string;
+  adminEmail?: string;
-    smtpSecure?: boolean;
+  smtpSecure?: boolean;
-};
+};
-
+
-type SendMailPayload = {
+type SendMailPayload = {
-    name?: string;
+  name?: string;
-    url?: string;
+  url?: string;
-    desc?: string;
+  desc?: string;
-    email?: string;
+  email?: string;
-    avatar?: string;
+  avatar?: string;
-    message?: string;
+  message?: string;
-};
+};
-
+
-const ensureValue = (value?: string, fallback = "未填写") => (value?.trim() ? value.trim() : fallback);
+const ensureValue = (value?: string, fallback = "未填写") =>
-
+  value?.trim() ? value.trim() : fallback;
-export default defineEventHandler(async (event) => {
+
-    const method = event.node.req.method;
+export default defineEventHandler(async (event) => {
-    if (method === "OPTIONS") {
+  const method = event.node.req.method;
-        event.node.res.statusCode = 200;
+  if (method === "OPTIONS") {
-        return { status: "ok" };
+    event.node.res.statusCode = 200;
-    }
+    return { status: "ok" };
-
+  }
-    if (method !== "POST") {
+
-        throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" });
+  if (method !== "POST") {
-    }
+    throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" });
-
+  }
-    const payload = (await readBody<SendMailPayload>(event)) || {};
+
-    const { name, url, desc, email, avatar, message } = payload;
+  const payload = (await readBody<SendMailPayload>(event)) || {};
-
+  const { name, url, desc, email, avatar, message } = payload;
-    if (!name?.trim() || !url?.trim() || !email?.trim()) {
+
-        throw createError({
+  if (!name?.trim() || !url?.trim() || !email?.trim()) {
-            statusCode: 400,
+    throw createError({
-            statusMessage: "Missing required fields: name, url, and email",
+      statusCode: 400,
-        });
+      statusMessage: "Missing required fields: name, url, and email",
-    }
+    });
-
+  }
-    const config = useRuntimeConfig() as MailConfig;
+
-    const { smtpHost, smtpPort: configSmtpPort, smtpUser, smtpPass, senderEmail, adminEmail, smtpSecure } = config;
+  const config = useRuntimeConfig() as MailConfig;
-
+  const {
-    const smtpPort = Number(configSmtpPort ?? 465);
+    smtpHost,
-    if (!smtpHost || !smtpUser || !smtpPass || !senderEmail || !adminEmail) {
+    smtpPort: configSmtpPort,
-        throw createError({ statusCode: 500, statusMessage: "SMTP server is not fully configured" });
+    smtpUser,
-    }
+    smtpPass,
-
+    senderEmail,
-    const secure = typeof smtpSecure === "boolean" ? smtpSecure : smtpPort === 465;
+    adminEmail,
-    const smtpOptions: SMTPTransport.Options = {
+    smtpSecure,
-        host: smtpHost,
+  } = config;
-        port: smtpPort,
+
-        secure,
+  const smtpPort = Number(configSmtpPort ?? 465);
-        auth: {
+  if (!smtpHost || !smtpUser || !smtpPass || !senderEmail || !adminEmail) {
-            user: smtpUser,
+    throw createError({ statusCode: 500, statusMessage: "SMTP server is not fully configured" });
-            pass: smtpPass,
+  }
-        },
+
-    };
+  const secure = typeof smtpSecure === "boolean" ? smtpSecure : smtpPort === 465;
-
+  const smtpOptions: SMTPTransport.Options = {
-    const transporter = nodemailer.createTransport(smtpOptions);
+    host: smtpHost,
-    const friendEntry = `{
+    port: smtpPort,
-    name: "${ensureValue(name).replace(/"/g, '\\"')}",
+    secure,
-    url: "${ensureValue(url).replace(/"/g, '\\"')}",
+    auth: {
-    desc: "${ensureValue(desc).replace(/"/g, '\\"')}",
+      user: smtpUser,
-    avatar: "${ensureValue(avatar).replace(/"/g, '\\"')}",
+      pass: smtpPass,
-},`;
+    },
-
+  };
-    const htmlMessage = `
+
-        <p>一个新的友链申请已提交，以下是可直接复制到项目中的配置：</p>
+  const transporter = nodemailer.createTransport(smtpOptions);
-        <pre style="background: #f5f5f5; padding: 12px; border-radius: 4px; overflow: auto;">
+  const friendEntry = `{
-<code>${friendEntry}</code>
+    name: "${ensureValue(name).replace(/"/g, '\\"')}",
-        </pre>
+    url: "${ensureValue(url).replace(/"/g, '\\"')}",
-        <hr style="margin: 20px 0;" />
+    desc: "${ensureValue(desc).replace(/"/g, '\\"')}",
-        <p><strong>申请者信息：</strong></p>
+    avatar: "${ensureValue(avatar).replace(/"/g, '\\"')}",
-        <p><strong>名称：</strong>${ensureValue(name)}</p>
+},`;
-        <p><strong>邮箱：</strong>${ensureValue(email)}</p>
+
-        <p><strong>站点：</strong><a href="${ensureValue(url)}">${ensureValue(url)}</a></p>
+  const htmlMessage = `
-        <p><strong>描述：</strong>${ensureValue(desc)}</p>
+        <p>一个新的友链申请已提交，以下是可直接复制到项目中的配置：</p>
-        <p><strong>头像：</strong>${ensureValue(avatar)}</p>
+        <pre style="background: #f5f5f5; padding: 12px; border-radius: 4px; overflow: auto;">
-        <p><strong>想说的话：</strong>${ensureValue(message)}</p>
+<code>${friendEntry}</code>
-        <p><strong>时间：</strong>${new Date().toISOString()}</p>
+        </pre>
-    `;
+        <hr style="margin: 20px 0;" />
-
+        <p><strong>申请者信息：</strong></p>
-    const info = await transporter.sendMail({
+        <p><strong>名称：</strong>${ensureValue(name)}</p>
-        from: senderEmail,
+        <p><strong>邮箱：</strong>${ensureValue(email)}</p>
-        to: adminEmail,
+        <p><strong>站点：</strong><a href="${ensureValue(url)}">${ensureValue(url)}</a></p>
-        replyTo: email,
+        <p><strong>描述：</strong>${ensureValue(desc)}</p>
-        subject: `友链申请 / 联系表单 · ${ensureValue(name)}`,
+        <p><strong>头像：</strong>${ensureValue(avatar)}</p>
-        html: htmlMessage,
+        <p><strong>想说的话：</strong>${ensureValue(message)}</p>
-    });
+        <p><strong>时间：</strong>${new Date().toISOString()}</p>
-
+    `;
-    return {
+
-        message: "Mail sent",
+  const info = await transporter.sendMail({
-        id: info.messageId,
+    from: senderEmail,
-    };
+    to: adminEmail,
-});
+    replyTo: email,
+    subject: `友链申请 / 联系表单 · ${ensureValue(name)}`,
+    html: htmlMessage,
+  });
+
+  return {
+    message: "Mail sent",
+    id: info.messageId,
+  };
+});

server/api/wakatime.ts

@@ -1,56 +1,56 @@
-import { defineEventHandler, getQuery, createError } from "h3";
+import { defineEventHandler, getQuery, createError } from "h3";
-import { useRuntimeConfig } from "#imports";
+import { useRuntimeConfig } from "#imports";
-
+
-export default defineEventHandler(async (event) => {
+export default defineEventHandler(async (event) => {
-    const res = event.node.res;
+  const res = event.node.res;
-    res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Origin", "*");
-    res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
+  res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
-    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
-
+
-    if (event.node.req.method === "OPTIONS") {
+  if (event.node.req.method === "OPTIONS") {
-        res.statusCode = 200;
+    res.statusCode = 200;
-        return "ok";
+    return "ok";
-    }
+  }
-
+
-    if (event.node.req.method !== "GET") {
+  if (event.node.req.method !== "GET") {
-        throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" });
+    throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" });
-    }
+  }
-
+
-    const config = useRuntimeConfig();
+  const config = useRuntimeConfig();
-    const apiKey = config.wakatimeApiKey;
+  const apiKey = config.wakatimeApiKey;
-    if (typeof apiKey !== "string") {
+  if (typeof apiKey !== "string") {
-        throw createError({ statusCode: 500, statusMessage: "Invalid WakaTime API Key configuration" });
+    throw createError({ statusCode: 500, statusMessage: "Invalid WakaTime API Key configuration" });
-    }
+  }
-
+
-    const query = getQuery(event);
+  const query = getQuery(event);
-    const apiUrl = (query.apiUrl as string) || config.wakatimeApiUrl;
+  const apiUrl = (query.apiUrl as string) || config.wakatimeApiUrl;
-
+
-    const headers = {
+  const headers = {
-        Authorization: `Basic ${Buffer.from(apiKey).toString("base64")}`,
+    Authorization: `Basic ${Buffer.from(apiKey).toString("base64")}`,
-    };
+  };
-
+
-    try {
+  try {
-        const [weeklyStatsResponse, allTimeStatsResponse, statusResponse] = await Promise.all([
+    const [weeklyStatsResponse, allTimeStatsResponse, statusResponse] = await Promise.all([
-            fetch(`${apiUrl}/users/current/stats/last_7_days`, { headers }),
+      fetch(`${apiUrl}/users/current/stats/last_7_days`, { headers }),
-            fetch(`${apiUrl}/users/current/stats/all_time`, { headers }),
+      fetch(`${apiUrl}/users/current/stats/all_time`, { headers }),
-            fetch(`${apiUrl}/users/current/status`, { headers }),
+      fetch(`${apiUrl}/users/current/status`, { headers }),
-        ]);
+    ]);
-
+
-        if (!weeklyStatsResponse.ok) {
+    if (!weeklyStatsResponse.ok) {
-            throw new Error(`Wakatime API error: ${weeklyStatsResponse.status}`);
+      throw new Error(`Wakatime API error: ${weeklyStatsResponse.status}`);
-        }
+    }
-
+
-        const weeklyStatsData = await weeklyStatsResponse.json();
+    const weeklyStatsData = await weeklyStatsResponse.json();
-        const allTimeStatsData = allTimeStatsResponse.ok ? await allTimeStatsResponse.json() : null;
+    const allTimeStatsData = allTimeStatsResponse.ok ? await allTimeStatsResponse.json() : null;
-        const statusData = statusResponse.ok ? await statusResponse.json() : null;
+    const statusData = statusResponse.ok ? await statusResponse.json() : null;
-
+
-        return {
+    return {
-            weekly: weeklyStatsData.data,
+      weekly: weeklyStatsData.data,
-            allTime: allTimeStatsData ? allTimeStatsData.data : null,
+      allTime: allTimeStatsData ? allTimeStatsData.data : null,
-            status: statusData,
+      status: statusData,
-        };
+    };
-    } catch (error) {
+  } catch (error) {
-        console.error("Wakatime API error:", error);
+    console.error("Wakatime API error:", error);
-        throw createError({ statusCode: 500, statusMessage: "Failed to fetch Wakatime data" });
+    throw createError({ statusCode: 500, statusMessage: "Failed to fetch Wakatime data" });
-    }
+  }
-});
+});

tailwind.config.ts

@@ -1,39 +1,51 @@
-import type { Config } from "tailwindcss";
+import type { Config } from "tailwindcss";
-
+
-export default {
+export default {
-    content: ["./app/**/*.{vue,js,ts}", "./app/components/**/*.vue", "./app/pages/**/*.vue", "./app/layouts/**/*.vue"],
+  content: [
-    theme: {
+    "./app/**/*.{vue,js,ts}",
-        extend: {
+    "./app/components/**/*.vue",
-            colors: {
+    "./app/pages/**/*.vue",
-                // 自定义颜色变量（对应现有的 CSS 变量）
+    "./app/layouts/**/*.vue",
-                primary: "rgb(124, 193, 255)",
+  ],
-                accent: "rgb(124, 193, 255)",
+  theme: {
-                "surface-primary": "rgb(15, 22, 41)",
+    extend: {
-                "surface-secondary": "rgb(27, 43, 75)",
+      colors: {
-                "text-primary": "rgb(232, 238, 252)",
+        // 自定义颜色变量（对应现有的 CSS 变量）
-                "text-secondary": "rgb(159, 172, 200)",
+        primary: "rgb(124, 193, 255)",
-                "text-muted": "rgb(104, 120, 152)",
+        accent: "rgb(124, 193, 255)",
-            },
+        "surface-primary": "rgb(15, 22, 41)",
-            fontFamily: {
+        "surface-secondary": "rgb(27, 43, 75)",
-                sans: ['"Inter"', "system-ui", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "sans-serif"],
+        "text-primary": "rgb(232, 238, 252)",
-            },
+        "text-secondary": "rgb(159, 172, 200)",
-            spacing: {
+        "text-muted": "rgb(104, 120, 152)",
-                "safe-x": "max(1rem, env(safe-area-inset-left))",
+      },
-                "safe-y": "max(1rem, env(safe-area-inset-top))",
+      fontFamily: {
-            },
+        sans: [
-            boxShadow: {
+          '"Inter"',
-                "sm-dark": "0 4px 12px rgba(0, 0, 0, 0.15)",
+          "system-ui",
-                "md-dark": "0 8px 24px rgba(0, 0, 0, 0.18)",
+          "-apple-system",
-                "lg-dark": "0 12px 32px rgba(0, 0, 0, 0.22)",
+          "BlinkMacSystemFont",
-                "xl-dark": "0 16px 48px rgba(0, 0, 0, 0.25)",
+          '"Segoe UI"',
-            },
+          "sans-serif",
-            backgroundImage: {
+        ],
-                "gradient-dark": "radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629)",
+      },
-            },
+      spacing: {
-            backdropBlur: {
+        "safe-x": "max(1rem, env(safe-area-inset-left))",
-                xs: "2px",
+        "safe-y": "max(1rem, env(safe-area-inset-top))",
-            },
+      },
-        },
+      boxShadow: {
-    },
+        "sm-dark": "0 4px 12px rgba(0, 0, 0, 0.15)",
-    plugins: [],
+        "md-dark": "0 8px 24px rgba(0, 0, 0, 0.18)",
-} satisfies Config;
+        "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;

tsconfig.json

@@ -1,10 +1,10 @@
-{
+{
-    "extends": "./.nuxt/tsconfig.json",
+  "extends": "./.nuxt/tsconfig.json",
-    "compilerOptions": {
+  "compilerOptions": {
-        "types": ["node"]
+    "types": ["node"]
-    },
+  },
-    "vueCompilerOptions": {
+  "vueCompilerOptions": {
-        "globalTypesPath": "./node_modules/.vue-global-types"
+    "globalTypesPath": "./node_modules/.vue-global-types"
-    },
+  },
-    "include": ["nuxt.config.ts", "app/**/*.ts", "app/**/*.vue", "app/**/*.d.ts", "server/**/*.ts"]
+  "include": ["nuxt.config.ts", "app/**/*.ts", "app/**/*.vue", "app/**/*.d.ts", "server/**/*.ts"]
-}
+}

tsconfig.node.json

@@ -1,11 +1,11 @@
-{
+{
-    "compilerOptions": {
+  "compilerOptions": {
-        "composite": true,
+    "composite": true,
-        "skipLibCheck": true,
+    "skipLibCheck": true,
-        "module": "ESNext",
+    "module": "ESNext",
-        "moduleResolution": "bundler",
+    "moduleResolution": "bundler",
-        "allowSyntheticDefaultImports": true,
+    "allowSyntheticDefaultImports": true,
-        "types": ["node"]
+    "types": ["node"]
-    },
+  },
-    "include": ["nuxt.config.ts"]
+  "include": ["nuxt.config.ts"]
-}
+}

vercel.json

@@ -1,4 +1,4 @@
-{
+{
-    "version": 2,
+  "version": 2,
-    "framework": "nuxtjs"
+  "framework": "nuxtjs"
-}
+}