前言
随着互联网的飞速发展，个人和团队的需求也在不断变化。在日常工作中，一个简洁而高效的浏览器起始页不仅能提升使用体验，还能帮助用户更好地管理和访问常用的工具与资源。对于 NAS 用户、开发者以及极客来说，能够随时随地快速获取信息、管理任务并享受个性化定制的导航页，是提升工作效率的重要工具。
FlatNas 就是这样一款轻量级、高度可定制的个人导航页与仪表盘系统。它基于 Vue 3 和 Express 构建，专为那些追求简洁、实用和美观的用户设计。无论是在个人的 NAS 环境中，还是通过 VPS 部署，FlatNas 都能提供优雅的浏览器起始页，兼顾视觉和功能的双重需求。
本文将介绍如何使用 Docker 部署 FlatNas，带你深入了解其强大的功能、智能的网络环境检测以及个性化的定制选项，助你打造属于自己的高效导航站点。无论是家庭用户还是开发者，FlatNas 都能成为你日常使用中的得力助手。
有关截图
主界面
小组件配置
RSS订阅
搜索引擎
万能窗口
多用户支持
功能亮点
仪表盘与布局
- 网格布局：自由拖拽布局，支持不同尺寸的组件。
- 分组管理：支持创建多个分组，分类管理应用和书签。
- 响应式设计：完美适配桌面端和移动端访问。
- 编辑模式：直观的所见即所得编辑体验，轻松添加、删除和重新排列组件。
🧩 丰富的小组件
FlatNas 内置了多种实用的小组件，满足日常需求：
- 书签组件：快速访问常用网站，支持自定义图标。首次启动时会自动填充常用的 10 个网站（如 GitHub、Bilibili 等）。
- 时钟与天气：实时显示当前时间、日期及当地天气情况。
- 待办事项 (Todo)：简单的任务管理，随时记录灵感和待办事项。
- RSS 订阅：内置 RSS 阅读器，实时获取订阅源的最新内容。
- 热搜榜单：集成微博热搜、新闻热榜等，不错过即时热点。
- 计算器：随时可用的简易计算器。
- 音乐播放器：内置 MiniPlayer，支持播放服务器端的本地音乐文件。
🎨 个性化定制
- 图标管理：内置图标库，支持上传自定义图片，并全面支持 Hex 颜色代码 (如 #ffffff) 自定义图标背景色。
- 背景设置：支持自定义壁纸。
- 分组卡片背景：支持在分组设置中统一配置该组所有卡片的背景（图片、模糊、遮罩），实现风格统一的视觉效果。
- 访客统计：底部页脚显示网站总访问量、今日访问量及当前在线时长（需在设置中开启）。
- 数据安全：本地存储配置 (server/data/data.json)，数据完全掌握在自己手中。
- 简单的密码访问保护：默认密码：admin，保护隐私配置。
- CGI 扩展：支持通过 Node.js 编写 CGI 脚本扩展后端功能（位于 server/cgi-bin）。
- 更新提醒：内置版本检测功能，自动检查 GitHub 最新 Release 版本，并在设置面板提示 Docker 更新。
智能网络环境检测
FlatNas 后端集成了智能网络环境识别功能，能够根据用户的访问来源自动切换内外网访问策略，完美解决混合网络环境下的访问难题。
1. 功能描述
- 多维度识别：结合客户端 IP、访问域名 和 网络延迟三个维度，精准判断用户当前所处的网络环境（局域网/互联网）。
- 自动路由：当检测到用户处于局域网（LAN）时，系统会自动优先使用配置的内网地址 (LanUrl)，实现高速直连；在公网环境则自动切换至外网地址。
- 无感切换：用户无需手动干预，无论是在家（内网）还是外出（外网），点击同一个图标即可自动跳转至最佳地址。
2. 技术实现
核心检测逻辑后端（server/server.js）与前端协同工作，实现了以下检测流程：
- IP 来源分析：后端通过解析 HTTP 请求头中的 X-Forwarded-For 和 Socket Remote Address 获取真实客户端 IP，支持 IPv4/IPv6 双栈识别。
- 网络连通性探测：提供 /api/ping 接口，后端调用系统底层 ICMP 协议探测目标主机（默认 223.5.5.5）的延迟，用于辅助判断服务器是否具备外网访问能力。
3. 使用指南
- 配置内网地址：在编辑模式下，右键点击任意组件选择"编辑"。在弹出的对话框中，除了填写"链接地址"（外网）外，还可以填写 “内网链接”。
- 典型场景：
- 家庭 NAS：外网填 https://nas.yourdomain.com，内网填 http://192.168.1.10:5000。
- 典型场景：
部署方法
使用Docker安装
本教程使用docker的方式安装部署,简单便捷
准备条件
1）一台服务器
我们使用莱卡云VPS和飞牛云NAS来演示
需要vps的可以看以下信息配置,可以参考以下资源占用情况
莱卡云官网
本期docker容器占用资源情况如下仅供参考,内存占用大约40M
2）本项目使用到的项目
本教程使用的官方github地址
https://github.com/Garry-QD/FlatNas
本教程使用的官方gitee地址
https://gitee.com/gjx0808/FlatNas
本教程使用的官方docker-hub地址
https://hub.docker.com/r/qdnas/flatnas
3）域名(可选)
根据自己的需求
如果部署在VPS的建议绑定下域名
如果部署在本地NAS也可以绑定公网Cloudflare-Tunnels教程
① VPS部署
一、Docker环境部署
在vps安装docker和docker-compose
Docker官方安装文档（英文）
https://duan.yyzq.eu.org/docker-001
Docker-Compose官方安装文档（英文)
https://duan.yyzq.eu.org/docker-002
Centos安装Docker和Docker-compose（中文）
https://duan.yyzq.eu.org//03
Ubuntu安装Docker和Docker-compose（中文）
https://duan.yyzq.eu.org//04
推荐直接用一键脚本
docker安装脚本
bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh)
docker-compose安装脚本
curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose
二、部署命令
登录服务器使用root账户执行以下步骤
docker-compose命令
创建一个目录，并进入此目录
mkdir flatnas ;cd flatnas
然后再新建docker-compose.yml
vim docker-compose.yml
services:
flatnas:
image: qdnas/flatnas:latest # 使用的镜像
container_name: flatnas # 容器名称
restart: always # 容器重启策略：无论容器退出状态如何，始终重启
ports:
- '23000:3000' # 映射端口：将宿主机的23000端口映射到容器的3000端口
volumes:
- ./data:/app/server/data # 映射本地 ./data 目录到容器的 /app/server/data
- ./music:/app/server/music # 映射本地 ./music 目录(替换成你音乐的目录)到容器的 /app/server/music
三、执行容器运行命令
docker-compose up -d #运行容器
docker-compose ps #查看是否启动成功
正常启动如下所示
docker-compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
flatnas qdnas/flatnas:latest "docker-entrypoint.s…" flatnas 6 seconds ago Up 4 seconds 0.0.0.0:23000->3000/tcp, [::]:23000->3000/tcp
四、web界面
打开web页面使用
成功以后需要打开自己相应的端口23000)防火墙就可以web端访问了
主界面
http://ip:23000
直接ip加端口就可以了
默认管理员密码：
admin
自行修改
②飞牛云NAS部署
我们直接复制以上VPS的compose配置即可
启动成功
注意音乐路径改成自己NAS的路径
绑定域名
VPS上的建议绑定下域名，方便公网使用
绑定域名的教程参考以下内容
绑定域名视频教程
B站
YouTube
绑定域名可以参考
NginxProxyManager
https://duan.yyzq.eu.org//npm-ch
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
欢迎关注我们的微信公众号！
评论区