ZenNav - 个人静态导航站

ZenNav 是一个高性能、设计现代的个人导航仪表盘。它内置了极光流体背景特效、毛玻璃拟态 UI，并集成了 Google Gemini AI，能够自动分析链接并生成标题、描述及图标。

✨ 核心特性

• 🎨 极致设计: 采用极简主义、毛玻璃特效 (Glassmorphism)、深色/浅色模式无缝切换以及响应式布局。
• ☁️ 云端同步: 内置 GitHub Gist 同步功能，支持多设备数据共享。
• 🔍 智能搜索: 聚合 Google、百度、Bing、GitHub 多引擎，支持站内即时过滤搜索，快速找到你的收藏。
• ⚡️ 极致性能: 基于 Vite, React 18 和 Tailwind CSS 构建，轻量且迅速。
• 🛠 内置 CMS: 提供客户端后台管理界面 (Client-side Admin)，支持拖拽排序。
• 🤖 AI 增强: 利用 Gemini API 智能分析 URL，一键自动填充网站标题、简介并匹配图标。

🚀 快速开始

环境要求

• Node.js 18+
• Google Gemini API Key (用于 AI 智能识别)
• GitHub Access Token (用于数据同步，可选)

安装步骤

1. 克隆仓库到本地。
2. 安装依赖:

   npm install

3. 创建 .env 文件 (本地开发用):

   API_KEY=你的_GOOGLE_GEMINI_API_KEY
   ADMIN_PASSWORD=你的_xxxxx{密码自己设置}
   GITHUB_TOKEN=你的_GITHUB_TOKEN
   

本地开发

启动极速开发服务器:

npm run dev

☁️ 多设备数据同步 (详细指南)

ZenNav 使用 GitHub 的 Gist 服务作为免费的“云数据库”，让您在不同设备（家里电脑、公司电脑、手机）之间同步所有导航链接。

第一步：获取 GitHub Access Token

为了安全地读写数据，我们需要申请一个 Token。请严格按照以下步骤操作：

1. 进入创建页面:

   • 登录您的 GitHub 账号。
   • 访问 GitHub Settings > Developer settings > Personal access tokens。
   • 点击右上角的 "Generate new token" 按钮。
   • 【重要】 在下拉菜单中选择 "Generate new token (classic)" (传统模式)。不要选择 Fine-grained。

2. 配置 Token 参数 (对照您看到的页面):

   • Note (备注): 给它起个名字，例如输入 ZenNav Sync，方便日后识别。
   • Expiration (过期时间): 默认是 30 Days。
     • 💡 强烈建议选择 "No expiration" (永不过期)。
     • 原因：如果 Token 过期，您的同步功能会突然失效，需要重新生成并配置所有设备。
   • Select scopes (选择权限):
     • 向下滚动列表。
     • 找到 gist (Create gists) 这一项。
     • ✅ 勾选它。
     • 其他所有选项都不需要勾选。

3. 生成并复制:

   • 滚动到页面最底部，点击绿色按钮 "Generate token"。
   • 页面刷新后，您会看到一串以 ghp_ 开头的字符。
   • ⚠️ 立即复制保存它！ (GitHub 只会显示这一次，刷新页面后就再也看不到了)。

第二步：配置 Token

有两种方式配置 Token：

方式 A：通过环境变量 (推荐) 在部署时（如 Vercel 后台），将 Token 设置为环境变量 GITHUB_TOKEN。这样所有访问该部署版本的设备都会默认使用该 Token，无需手动输入。

方式 B：手动输入

1. 打开 ZenNav 网站，点击右上角的 锁形图标 🔐 进入后台。
2. 点击左侧侧边栏的 "☁️ 云端同步" 菜单。
3. 在 "GitHub Access Token" 输入框中，粘贴您的 ghp_xxxx... 字符串并保存。

第三步：如何使用同步

• 自动同步: 只要配置了 Token，每次在后台保存修改时，ZenNav 会自动将最新配置备份到云端。
• 手动下载: 在新设备上打开网站，进入后台的“云端同步”页面，点击 "手动下载 (Pull)" 即可恢复所有数据。

☁️ Vercel 部署指南

本项目已针对 Vercel 进行了完全优化。

1. 推送到 GitHub: 将本项目代码提交到你的 GitHub 仓库。

2. 导入到 Vercel:

   • 登录 Vercel Dashboard。
   • 点击 "Add New..." -> "Project"。
   • 找到并点击 "Import" 你的 GitHub 仓库。

3. 构建配置 (Build Settings): Vercel 通常会自动检测 Vite 框架，默认设置即可：

   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist

4. 环境变量 (Environment Variables): 在部署页面的 "Environment Variables" 区域添加：

   变量名 (Key)	描述	示例值
   API_KEY	(可选) Google Gemini API Key	AIzaSyD...
   ADMIN_PASSWORD	(可选) 后台管理密码，默认为 admin	MySecretPass123
   GITHUB_TOKEN	(可选) GitHub Token，用于自动配置同步	ghp_xxxxxxxx...

5. 部署: 点击 Deploy。

🛠 技术栈

• 构建工具: Vite
• 前端框架: React 18, TypeScript
• 样式库: Tailwind CSS
• AI 支持: Google GenAI SDK
• 数据同步: GitHub Gist API
• 图标库: Lucide React

---

Design by Qbvs Team