把整个局域网装进一个浏览器标签页：我的自建导航首页折腾记

如果你家里/公司有一堆 NAS、虚拟机、路由器、监控摄像头，你一定经历过这样的痛苦：IP 记不住、端口搞混、服务太多没入口、想查个磁盘占用还得开终端敲命令…… 于是就有了这个项目：一个跑在局域网里、用浏览器打开就能用的「个人导航首页」。它不只收录书签，还把天气、备忘、API 余额、服务器状态全部搬上了顶栏——打开它，等于打开了整个内网的控制面板。  先说结论：前端 React + Vite，后端一个 Express 单文件服务，数据全部落在本地 JSON 里，部署在群晖/软路由/任意一台常开小主机上，全家设备浏览器打开即用。

为什么不用现成的导航站

市面上的 Homepage、Dashy、Heimdall 都很漂亮，但对我来说有三点不满足： 1. **书签以外的信息想看但没地方放**——天气、备忘录、API 余额这种高频信息，传统导航页要么不支持、要么得开好几个服务。 2. **想深度定制内网运维入口**——比如直接看到某台虚拟机的开关状态。 3. **数据要 100% 本地**——书签、密钥都不该过第三方服务器。 干脆自己写一个，从零开始迭代，把想要的模块一个个长出来。

技术栈：极简但够用

| 层 | 选型 | |---|---| | 前端 | React 18 + Vite | | 状态 | Zustand（带持久化） | | 后端 | Node.js + Express（单文件） | | 数据 | JSON 文件直读直写 | | 样式 | 手写 CSS + 毛玻璃动效 | 前后端用同一个 Express 服务托管：`dist/` 静态资源 + `/api` 接口，一个端口搞定，部署时直接 `node server/index.js`，没有任何反向代理配置负担。  毛玻璃（glassmorphism）是整套 UI 的基调：半透明面板 + 背景模糊 + 细腻的渐变背景，深浅两套主题都能在 1 秒内热切换。为了背景不那么呆板，内置了多套动态渐变，主题切换时背景会跟随明暗自动配对。

顶栏：可拖拽排序的功能区

页面右上角有一条「顶栏」，是整套系统最灵活的部分——每个模块都是一个独立小组件，可以在设置里拖拽排序、按需开关。  目前常驻的模块有： - **时钟**：日期 + 实时时间 - **天气**：自动定位城市，展示当日天气与温度 - **备忘录**：随手记一条，JSON 落盘，跨设备同步 - **API 余额**：实时查询大模型 API 账户余额（含本地费用估算） - **提醒事项**：到期提醒 - **服务器监控**：内网虚拟化平台的 VM 状态总览 每个监控类模块都是同一种架构套路：后端一个 `/status` 接口轮询目标服务，一个 `/config` 接口保存连接信息（**密码只存后端**，前端永远拿不到明文），前端小组件定时拉取刷新。

天气：城市可配置的小组件

 天气数据来自免费公开接口，城市信息支持手动配置（在脱敏演示里我把它设成了一座海滨小城）。面板会展示实时温度、体感温度、湿度、风速和天气描述，周末和节假日的天气也一目了然。

备忘录：轻量级本地笔记

 不需要笔记软件的重型同步体系，导航页里的备忘录就解决两个诉求：**记下来** + **看得见**。支持多条目、时间戳、已完成划线；内容按文本存在本地 JSON，跨设备通过同一个内网地址访问即可同步。对「待办」轻量场景来说，这比开一个完整笔记应用顺手得多。

大模型 API 余额：心里有数才敢跑任务

 接入大模型 API 后，最大的焦虑是「这个月额度还有多少」。这个面板直接调用余额查询接口，把**总余额、已用、剩余额度**展示出来，并附赠一个本地费用估算曲线——按每日消耗推算还能撑几天，跑长任务之前先瞄一眼，心里踏实。余额数据仅存后端缓存，密钥同样只在服务端配置文件里。

设置：模块编排 + 主题 + 数据导入导出

 设置面板承担三件事： - **顶栏模块编排**：勾选要显示的模块、拖拽调顺序 - **主题切换**：亮 / 暗 / 跟随背景 - **数据备份**：整个书签与配置一键导出为 JSON、一键导入 加上右键快捷操作、文件上传压缩这些小功能，日常使用基本不需要再碰配置文件。

虚拟化平台监控：浏览器里管理虚拟机

 内网跑着一套虚拟化平台，里面有若干开发测试虚拟机。这个面板通过平台 API 读取每台 VM 的状态，在线列表带绿色状态点；点击可执行**开机、关机、重启**。自那以后，我半夜想重启个服务再也不用爬起来开管理后台——手机浏览器打开导航页就能操作。连接信息（地址、账号、密码）只写在服务端配置，前端面板只拿状态和发起操作。

移动端：手机也能当遥控器

 整套布局是响应式的，手机上同样可用。配合把导航页设置成浏览器主页，手机解锁 → 打开浏览器 → 所有内网服务都在手边。

开发中踩过的一些坑

- **Node 没有热重载**：后端是单文件 Express，每次改完 `server/index.js` 都得手动重启，端口还有 TIME_WAIT 要等一会儿才能重新绑定——后来固定成「改完必重启」的习惯。 - **内网证书**：给虚拟化平台 API 走 HTTPS 自签证书，前端请求要处理证书校验，稍不留神就静默失败。 - **截图自动化**：为了给文章配图，我把首页数据临时替换成脱敏样例再截屏，完事后再还原真实数据——避免把个人书签和密钥拍进图里。

安全设计

- 服务仅绑定内网，不暴露公网端口 - 所有密钥/密码只存服务端本地配置，前端一律不返回明文 - 提供一键导出备份，方便迁移与容灾

下一步想做的

- 更多监控目标（NAS 存储水位、路由带宽） - 多用户支持与基础权限 - 在公网通过 WireGuard 回家，把导航页当远程入口 --- 折腾的乐趣在于：每加一个模块，家里那台常年吃灰的小主机就又「活」了一点。如果你也在捣鼓内网服务，欢迎交流。