🚀 BinNav - 自定义导航（可视化后台管理）

一个现代化的网站导航页面，发现优质网站，提升工作效率。支持可视化管理后台、智能图标获取、拖拽排序和自动部署更新。

✨ 核心特性

现代化设计

• 响应式布局，完美适配桌面端和移动端
• 毛玻璃效果和流畅动画
• 支持分类图标和网站图标自动获取
• 优雅的卡片式布局

强大的管理后台

• 网站管理 - 添加、编辑、删除网站，支持拖拽排序
• 分类管理 - 创建多级分类，自定义图标和排序
• 智能图标 - 自动获取网站图标，支持多种回退方案
• 待审核管理 - 用户提交的网站统一审核
• 系统设置 - 站点信息、Logo、备案信息配置

自动化部署

• 一键保存到GitHub，触发自动部署
• EdgeOne Functions API，响应速度快80%
• 支持配置文件本地备份下载
• 无需手动操作，保存即生效

智能搜索

• 站内搜索，快速定位网站
• 支持按分类筛选浏览
• 响应式侧边栏导航

🌐 在线预览

🔗 查看演示站点

📸 项目预览

首页展示

管理后台

快速部署

一键部署

EdgeOne Pages（国内推荐）

🎬 视频教程

• YouTube：BinNav - 自定义导航页（可视化后台管理）

手动部署：

1. 👉 Fork 本项目 到你自己的账号下
2. 登录EdgeOne，创建项目选择你 Fork 后的仓库
3. 添加环境变量并部署

Vercel（暂未开发完成）

Cloudflare Pages（暂未开发完成）

⚙️ 环境变量配置

基础配置

项目可以零配置运行，但为了完整功能体验，建议配置以下环境变量：

变量名	描述	必需	默认值	功能影响
ADMIN_PASSWORD	管理后台登录密码	否	admin	未设置时使用默认密码
GITHUB_TOKEN	GitHub Personal Access Token	否	-	未设置时无法自动保存配置到GitHub
GITHUB_REPO	GitHub仓库名（格式：用户名/仓库名）	否	-	未设置时无法自动保存配置到GitHub
RESEND_API_KEY	Resend API Key，用于邮件服务	否	-	未设置时无法发送邮件通知
ADMIN_EMAIL	管理员邮箱，接收新站点提交通知	否	-	未设置时无法接收邮件通知
RESEND_DOMAIN	Resend发送域名（仅域名部分）	否	-	未设置时无法发送邮件通知

功能说明

• 基础功能：无需任何配置即可正常使用导航和管理后台
• 自动保存：需要配置 GITHUB_TOKEN 和 GITHUB_REPO
• 邮件通知：需要配置 RESEND_API_KEY、ADMIN_EMAIL 和 RESEND_DOMAIN

管理后台登录

• 用户名：无需用户名，仅需密码
• 默认密码：admin（建议生产环境修改）
• 访问地址：/admin

GitHub Token 创建步骤

1. 访问 GitHub Settings > Tokens
2. 点击 "Generate new token (classic)"
3. 选择 repo 权限
4. 复制生成的 token

✉️ Resend 邮件功能配置指南

BinNav 集成了 Resend 的邮件发送能力，用户可在前端页面填写反馈，自动发送邮件至指定邮箱。你只需完成以下三步，即可启用该功能：

✅ 步骤一：注册 Resend 账号

1. 访问官网 https://resend.com
2. 使用邮箱或 GitHub 账户注册并登录

🔑 步骤二：创建 API Key

1. 登录后，点击左侧菜单栏 API Keys
2. 点击右上角 Create API Key
3. 输入名称（如 BinNav Key），点击生成
4. 复制生成的 key（如 re_xxxxxxxxxxxxxxxxx）并保存备用

🌐 步骤三：添加并验证发件域名（可使用免费二级域名）

1. 左侧菜单进入 Domains → 点击 Add Domain
2. 输入你的域名（如 yourdomain.com），或使用 Resend 提供的免费二级域名
3. 按照提示添加 DNS 记录以完成验证

本地开发

# 1. 克隆项目
git clone https://github.com/sindricn/BinNav.git
cd BinNav

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

访问地址：

• 🏠 首页: http://localhost:5173
• ⚙️ 管理后台: http://localhost:5173/admin（默认密码：admin）

🚨 常见问题

Q: 如何登录管理后台？

A: 管理后台登录信息：

• 访问地址：/admin
• 用户名：无需用户名
• 默认密码：admin
• 修改密码：设置环境变量 ADMIN_PASSWORD

Q: 为什么无法自动保存配置？

A: 自动保存功能需要配置：

• GITHUB_TOKEN - GitHub访问令牌
• GITHUB_REPO - 仓库名称（格式：用户名/仓库名）
• 未配置时可手动下载配置文件

Q: 邮件通知功能如何配置？

A: 邮件通知需要配置：

• RESEND_API_KEY - Resend API密钥
• ADMIN_EMAIL - 管理员邮箱
• RESEND_DOMAIN - 发送域名
• 未配置时用户提交不会发送邮件通知

🤝 贡献指南

欢迎参与 BinNav 的开发！

• 公开仓库开发主分支为 dev，请基于 dev 分支进行开发。
• 新功能或修复请创建自己的功能分支，例如 feature/xxx。

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

---

🌟 如果这个项目对你有帮助，请给个 Star ⭐

"本项目 CDN 加速及安全防护由 Tencent EdgeOne 赞助：EdgeOne 提供长期有效的免费套餐，包含不限量的流量和请求，覆盖中国大陆节点，且无任何超额收费，感兴趣的朋友可以点击下面的链接领取"

亚洲最佳CDN、边缘和安全解决方案 - Tencent EdgeOne