🔥 Pepper:这款开源个人导航面板,让你效率翻倍!
在这个信息爆炸的时代,我们每天都在无数网站、工具和应用中切换。书签栏塞满了链接,重要任务散落在各个角落,提醒事项总是错过……
有没有一个工具,能把这些统统整合在一起?
答案是:有! 而且完全免费、开源、无需安装!
今天就给大家介绍这款神器 —— Pepper 个人导航面板。

🎯 什么是 Pepper?
Pepper 是一款高端个人导航面板,集网站管理、本地程序启动、任务管理、提醒系统、云端同步于一体。
最惊艳的是:它采用纯前端单文件设计,下载下来就是一个 HTML 文件,双击就能用!无需安装任何依赖,真正开箱即用。
项目地址:https://hujerry618.github.io/Pepper/
开源地址:https://github.com/hujerry618/Pepper
✨ 核心功能一览
1️⃣ 双主题 + 7 种主题色,颜值爆表
- 深色/浅色模式
一键切换(🌙/☀️),保护你的眼睛 
- 7 种主题色
随心切换:蓝/绿/紫/灰/粉/橙/玫红 
每种颜色都有精心调配的渐变效果,界面美到犯规!
2️⃣ 响应式布局,多端适配
自适应桌面/平板/手机 侧边栏鼠标悬停显示/移出隐藏,支持锁定 随时随地高效工作
3️⃣ 双区域设计,工作生活分离
- 左侧 💻 办公区
:企业邮箱、钉钉、腾讯文档、GitHub…… - 右侧 🏠 休闲区
:B站、网易云音乐、微博、下厨房…… 清晰划分工作与生活,进入状态更快
4️⃣ 智能拖拽,自由定制
- 分类拖拽
:支持分类卡片跨区拖拽、重新排序 - 网站拖拽
:详情页内拖拽排序,或拖到其他分类 - 预览线指示
:拖拽时显示蓝色渐变预览线,精确指示插入位置 你的面板,你做主!
5️⃣ 三种类型,全面覆盖
拖拽添加:从桌面拖拽文件/网址到面板自动识别,爽到飞起!
6️⃣ 艾森豪威尔矩阵,任务管理神器
Pepper 内置经典的四象限任务管理系统:

紧急 ↑ ┌─────┼─────┐ ┌─────┼─────┤ │ ⚡ │ 🔥 │ 重要 │ 轻 │ 重 │ ├─────┼─────┤ │ 📝 │ 🎯 │ │ 轻 │ 重 │ └─────┼─────┘ ↓ 不紧急 - 🔥 重要·急
:今日必须完成,红色高亮,最高优先级 - 🎯 重要·缓
:核心任务,蓝色标识,重要但不紧急 - ⚡ 紧急·轻
:高优工作,橙色标识,紧急但不重要 - 📝 轻·缓
:常规工作,灰色标识,日常事务
强大功能:
✅ 任务拖拽:跨象限拖拽调整优先级 ✅ 时间节点:支持多个时间点(如 09:00, 14:00, 17:00) ✅ 截止日期:设置任务截止日期(YYYY-MM-DD) ✅ 完成特效:勾选完成时触发粒子动画效果 ✅ 进度条:每个象限底部显示完成进度(x/y 百分比)
7️⃣ 智能提醒,不再错过

⏰ 定时检查:每 30 秒自动检查即将到期的提醒 🔔 弹窗通知:到时间自动弹窗 + 提示音 💤 稍后提醒:支持 5 分钟后再次提醒 📅 时间排序:提醒按时间自动排序
通知方式:
浏览器通知(Web Notifications API,切换标签页也能收到) 标题闪烁(提醒触发时浏览器 Tab 标题闪烁 🔔) 提示音(双音阶提示音,清晰不刺耳) 持久显示(直到用户主动关闭)
8️⃣ 数据自动归档,工作报告自动生成
- 每日归档
:跨天自动将已完成任务归档到历史记录 - 历史保留
:最近 30 天归档历史 - 报告自动生成
:归档时根据设置自动生成工作报告 
🚀 进阶功能
🔐 安全锁定

0-120 分钟无操作自动锁定(0 表示禁用) 4 位数字密码保护(初始密码:0000) 立即锁定:一键锁定面板 活动检测:鼠标/键盘/触摸操作自动重置计时
🌐 云端同步
账户注册:邮箱 + 密码注册 登录/退出:安全登录,Token 鉴权 手动同步:一键同步面板数据到云端 自动同步:开关控制,暂停/恢复自动同步 后端部署于 Vercel,本地开发时自动切换到 localhost:3000
⌨️ 快捷键,效率翻倍

🌏 中英文切换
完整界面翻译(含设置面板、模态框、报告内容) 即时生效,切换语言无需刷新 分类名称翻译:默认分类支持多语言
💡 使用场景
场景 1:上班族的高效工作台
办公区配置:
💼 企业邮箱、钉钉、腾讯文档 🔧 ProcessOn、TinyPNG 💻 GitHub、Stack Overflow
效果:一键打开所有工作网站,任务四象限管理当日工作,提醒系统确保不错过任何会议。
场景 2:学生的个人学习中心
学习区配置:
📚 B站学习、知乎 🎨 站酷、花瓣网 💻 LeetCode、Coursera
效果:学习网站一键直达,任务系统管理学习任务,提醒系统规划学习时间。
场景 3:自由职业者的全能面板
工作+生活整合:
左侧:客户项目、工作工具 右侧:娱乐、社交、新闻
效果:工作生活清晰分离,任务管理系统规划全天,数据云端同步不丢失。
📥 如何使用?
方法 1:直接访问(最简单)
直接访问:https://hujerry618.github.io/Pepper/
方法 2:本地部署(推荐)
# Pythoncd personal-panelpython -m http.server 8080# Node.jsnpx serve .# 然后访问 http://localhost:8080方法 3:静态托管
上传到任意静态网页托管平台:
GitHub Pages Vercel Netlify 或使用 IIS/Apache/Nginx 部署
🎁 特别功能
1. 访问计数 + 智能排序
自动记录每个网站的打开次数 分类内网站按访问频率排序,常用靠前 长名称自动换行,最多显示 2 行
2. 协议处理器,启动本地程序
支持 mypanel://协议处理器启动本地程序安装 launcher/install.bat即可使用测试:按 Win+R,输入 mypanel://notepad.exe
3. 数据导入导出,安全备份
- 导出备份
:导出所有数据为 JSON 文件 - 导入恢复
:从 JSON 文件导入数据 - 重置默认
:一键恢复初始分类和网站 - 今日工作导出
:导出为易读的 TXT 文本格式(工作日报) - 今日工作导入
:支持 JSON 和 TXT 格式恢复 
🔧 技术栈
- 纯前端
:单 HTML 文件,无需后端(同步功能需配合后端 API) - 原生 JS
:无第三方依赖 - localStorage
:本地数据持久化 - CSS Variables
:主题切换支持 - Drag & Drop API
:原生拖拽支持 - Web Notifications API
:浏览器原生通知 - Web Audio API
:提示音生成 - 自定义协议
: mypanel://协议处理器启动本地程序 - 云端同步
:RESTful API + JWT Token 鉴权(后端部署于 Vercel)
📊 项目信息
- 授权人
:Jerry.h - 开发者
:花椒(Huājiāo) - 版本
:v1.0 - 更新日期
:2026-04-12 - 开源协议
:MIT License
🌟 为什么选择 Pepper?
🚀 立即体验
项目地址:https://hujerry618.github.io/Pepper/
开源地址:https://github.com/hujerry618/Pepper
如果你觉得这个项目对你有帮助,请给它点个 Star ⭐,让更多人发现这个神器!
💬 互动时间
你平时是如何管理工作任务和常用网站的?
你会给 Pepper 添加什么新功能?
欢迎在评论区分享你的想法!
标签:#效率工具 #开源项目 #个人导航 #任务管理 #时间管理 #生产力 #GitHub #纯前端
版权声明:本文为原创内容,未经授权不得转载。Pepper 项目版权归原作者所有。
夜雨聆风