在信息爆炸的今天，我们每天都要打开无数个网页：查邮件、看新闻、管理任务、听音乐、访问NAS……浏览器书签栏早已不堪重负。有没有一个解决方案，能将这些高频应用优雅地整合在一起，提供一个既美观又高效的个人工作台？今天要介绍的 FlatNas，就是这样一个让人眼前一亮的开源项目。
什么是 FlatNas？
FlatNas 是一个基于 Vue 3 和 Express 构建的轻量级、高度可定制的个人导航页与仪表盘系统。它最初为 NAS 用户设计，但凭借其强大的功能和优雅的设计，迅速吸引了极客、开发者和追求效率的所有用户群体。
简单来说，FlatNas 就是你的浏览器起始页+个人仪表盘，让你在一个页面上管理所有日常所需，告别杂乱无章的书签和散落各处的工具。
该项目在github 已有 109 star
github地址：https://github.com/Garry-QD/FlatNas
核心亮点：不止是导航页
🖥️ 自由拖拽的网格布局
FlatNas 采用了灵活的网格布局系统，所有组件——时钟、天气、书签、RSS阅读器——都可以像拼图一样自由拖拽、调整大小。你可以根据个人习惯，将最常用的组件放在最显眼的位置，打造独一无二的工作流界面。
🧩 开箱即用的丰富组件
项目内置了多种实用小组件，覆盖日常高频需求：
- 书签组件：支持自定义图标和链接，首次启动时会自动填充 GitHub、Bilibili 等10个常用网站。
- 时钟与天气：实时显示时间、日期和当地天气。
- 待办事项 (Todo)：轻量级任务管理，随时记录灵感。
- RSS 订阅器：内置阅读器，实时追踪订阅源更新。
- 热搜榜单：集成微博、新闻等热门榜单，把握即时热点。
- 简易计算器：无需切换应用，随时计算。
- 本地音乐播放器：播放存储在服务器端的音乐文件。
🎨 深度个性化定制
- 图标自定义：内置图标库 + 上传自定义图片 + Hex 颜色代码（如
#ff6b6b）设置背景色。 - 壁纸与背景：支持自定义全局壁纸，更可为每个分组单独设置卡片背景（图片、模糊、遮罩效果），实现风格统一的视觉分区。
- 访客统计：在页脚显示总访问量、今日访问量和在线时长（需在设置中开启）。
- 数据安全：所有配置数据存储在本地
data.json文件中，完全由你掌控。同时提供简单的密码保护（默认admin），保护你的隐私设置。
技术栈与架构
FlatNas 采用前后端分离架构：
- 前端：Vue 3 + Vite，提供流畅的交互体验。
- 后端：Node.js + Express，提供API服务和静态文件托管。
- 数据存储：纯 JSON 文件存储，简单直接，易于备份和迁移。
项目结构清晰：
FlatNas/
├── src/ # 前端 Vue 源码
├── server/ # 后端 Express 服务
│ ├── data/ # 用户配置数据 (data.json)
│ ├── music/ # 本地音乐文件目录
│ ├── cgi-bin/ # CGI 脚本扩展目录
│ └── server.js # 后端主程序
快速上手：多种部署方式
1. 本地开发/部署
适合想要二次开发或自定义功能的用户：
# 克隆项目
git clone https://github.com/Garry-QD/FlatNas.git
cd FlatNas
# 安装依赖并启动
npm install
npm start # 同时启动前端(5173端口)和后端(3000端口)
# 生产构建
npm run build
npm run server
2. Docker 部署（推荐）
项目提供了完整的 Docker 支持，部署极其简单：
- 创建docker-compose.yml文件
services:
flatnas:
image: qdnas/flatnas:latest
container_name: flatnas
restart: unless-stopped
ports:
- '23000:3000'
volumes:
- ./data:/app/server/data # 持久化配置数据
- ./music:/app/server/music # 映射音乐目录
- 启动服务
docker-compose up -d - 访问服务
浏览器打开 http://localhost:23000
使用
在浏览器中打开地址http://localhost:23000即可，管理员默认密码admin
如果需要给多个人使用的话切多用户模式
整体使用下来整个代办和便笺是我比较喜欢的功能，整体ui也比较好看
如果家人们只是需要一个类似与收藏夹的导航页面、对于ui和其他功能没啥要求的话也可以考虑下Sun-Panel
结语
FlatNas 不仅仅是一个导航页，它是一个可自由拼装的工作台，一个智能的网络访问助手，一个完全属于你的数字空间。它用简洁优雅的方式，解决了我们在数字生活中的碎片化问题。
无论你是想要一个漂亮的浏览器起始页，还是需要一个集中管理所有工具的个人仪表盘，FlatNas 都值得一试。它的开源特性意味着你可以完全掌控自己的数据，并按照自己的需求进行定制。
附录 其它导航Sun-Panel
一个服务器、NAS导航面板、Homepage、浏览器首页。
github地址：https://github.com/hslr-s/sun-panel
官网地址：https://doc.sun-panel.top/zh_cn/
docker-compose.yml
version: "3.3"
services:
sun-panel:
image: hslr/sun-panel:latest
container_name: sun-panel
volumes:
- ./conf:/app/conf
- ./uploads:/app/uploads
- ./database:/app/database
ports:
- 3002:3002
restart: always
environment:
TZ: 'Asia/Shanghai'
