Repos / allengaller / nerd-portal OWN

nerd-portal

Nerd Portal

在 GitHub 查看 ↗

Nerd Portal

文艺青年 × 资深极客 —— 一个 Chrome 新标签页的双面仪表盘

每次打开新标签页，上半屏是诗、书摘、写作灵感，下半屏是 GitHub 热门、开发者工具箱、代码片段库、待办。
一个浏览器的入口，同时容纳柔软与硬核。

两种用法，同一套代码：
- 🧩 Chrome 扩展版 —— 接管新标签页：npm run build → 加载 dist/
- 🌐 纯 Web 版 —— 浏览器直接打开，方便调试：npm run dev:web → localhost:5180

Nerd Portal

✨ 功能

文艺区（上半屏）

模块 数据来源 说明
每日一诗 本地语料库(ONE 一个 / 豆瓣摘句 / 西窗烛 三源按日轮换) 每日一条，可换一首、可切来源
书摘语录 一言 v1.hitokoto.cn 文学类随机名句
写作灵感 本地内置 29 条 prompt + chrome.storage 随机写作 prompt，随手记随笔
快捷方式 chrome.storage.local(默认 3 条) 常驻入口卡，增删改 + 拖拽排序，可恢复默认
每日壁纸 必应每日壁纸，失败时兜底 picsum 作全局背景层（可在设置中关闭）

极客区（下半屏）

模块 数据来源 说明
GitHub Trending GitHub Search API 近 7 天按 star 降序的热门新仓库（本地缓存 30 分钟）
开发者工具箱 纯前端 时间戳 ↔ 日期、JSON 格式化、正则测试、Base64 编解码、取色
代码片段库 chrome.storage.local 本地增删 + 标签 + 全文搜索 + 一键复制
待办 chrome.storage.local 最小 Todo（增删/完成）
番茄钟 纯前端 25 分钟专注 + 5 分钟休息循环，记录完成数

数据与隐私

  • 你写入的内容一律不出设备：设置、随笔、片段、待办、快捷方式只存在 chrome.storage.local
    （设置额外走 chrome.storage.sync，仅用于在你自己登录的 Chrome 账号间同步）。
    没有自建服务端，没有埋点，不收集任何个人信息。
  • 展示内容会向 4 个第三方域发起请求：一言（随机书摘）、GitHub API（热门仓库）、
    必应壁纸 / picsum（背景图）；快捷方式图标会按你添加的站点请求其 favicon。
    这些请求不携带你的任何数据，只取公开内容，且对应的模块都能在设置页里关掉。
    具体域名见 manifest.config.ts 的 host_permissions。
  • 展示内容全部可在设置页按模块关闭；随笔、片段、待办、快捷方式都能在对应卡片里逐条删除，
    也可用设置页「数据备份」导出成 JSON 自行留存。

🛠 技术栈

  • Chrome Extension MV3（chrome_url_overrides 接管新标签页）
  • React 18 + TypeScript + Vite
  • @crxjs/vite-plugin（manifest + 多入口 + HMR）
  • TailwindCSS + Zustand（持久化到 chrome.storage）+ lucide-react

📖 详细部署手册

从环境准备、开发、构建、加载到 Chrome、发布到商店、测试、排错，每一步都有详细说明：
👉 DEPLOY.md

🚀 开发

npm install      # 安装依赖
npm run dev      # 开发模式（HMR），按控制台提示加载 dist/ 到 chrome://extensions
npm run build    # 产出生产版 dist/

📦 在 Chrome 中加载

  1. npm run build
  2. 打开 chrome://extensions
  3. 右上角开启「开发者模式」
  4. 点「加载已解压」，选择项目下的 dist/ 目录
  5. 打开一个新标签页，即可看到仪表盘

设置入口：仪表盘右上角「设置」按钮，或扩展管理页的「详情 → 扩展程序选项」。

📁 项目结构

src/
├── newtab/          # 新标签页（仪表盘入口）
├── options/         # 设置页
├── components/
│   ├── layout/      # Dashboard / Background
│   ├── literary/    # 文艺区组件
│   ├── geek/        # 极客区组件
│   └── ui/          # Card / Button / Input
├── store/           # Zustand stores（持久化）
├── lib/             # api / storage / validate / backup / url 封装
├── hooks/           # useAsync
└── types/           # 类型定义

📝 关于 archive/

仓库根目录的 archive/ 是本项目的前身——一个老的 CakePHP（web + mobile）门户，
现已归档不再维护，仅作历史保留。

📜 License

MIT