personal-site-hub

Vue 3（CDN）实现的个人站点导航页，支持配置驱动、分组筛选、搜索、收藏、最近访问与现代化动画交互。

快速开始

1. 进入目录：cd personal-site-hub
2. 启动本地静态服务：python3 -m http.server 8080
3. 浏览器访问：http://localhost:8080

说明：页面使用 Vue 3 CDN（unpkg），需联网加载框架脚本。

如何配置站点

核心配置在 config/sites.config.js。

顶层字段

• meta: 页面标题、副标题、页脚文案。
• preferences: 偏好设置（如新标签打开、最近访问保留数、性能模式与特效开关）。
• sections: 分组配置。

站点项示例

{
  id: "my-site",
  name: "我的站点",
  url: "https://example.com",
  description: "站点描述",
  icon: "🌐",
  tags: ["主站", "个人"]
}

已实现能力

• Vue 响应式渲染与配置驱动
• 分组筛选、关键词搜索、收藏、最近访问优先排序
• 主题切换（极光/夜航）与本地持久化
• 粒子连线背景动效（默认关闭，可在配置开启）
• 卡片 3D 跟随、列表过渡动画
• 桌面与移动端自适应布局

性能说明

• 新增页面内开关：性能：省电 / 标准
• 默认是省电模式：preferences.performanceMode = "eco"
• 省电模式会强制关闭粒子、背景动态、卡片 3D 跟随
• 标准模式会按以下开关启用特效：
  • preferences.enableParticles
  • preferences.enableBackgroundMotion
  • preferences.enableCardTilt
• 粒子特效已做限帧（30fps）与粒子数量上限优化

Cloudflare Pages 发布

详见：docs/cloudflare-pages.md

项目结构

• index.html: Vue 模板入口
• assets/app.js: Vue 业务逻辑
• assets/styles.css: 视觉系统与动画
• config/sites.config.js: 导航配置
• docs/requirements.md: 需求分析