前言

随着互联网快速演进，个人与团队的需求也在持续变化。在日常工作中，一个简洁且高效的浏览器起始页，不仅能够优化使用感受，还可以帮助用户更高效地管理和访问常用工具与资源。对于 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 地址

🔒 下载链接仅对登录用户可见，请登录或注册后查看。

本教程使用的官方 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
      - ./doc:/app/server/doc       #文件传输数据
      - ./PC:/app/server/PC         #映射PC端壁纸路径
      - ./APP:/app/server/APP       #映射移动端壁纸路径
      - /var/run/docker.sock:/var/run/docker.sock      #映射Docker Socket

三、执行容器运行命令

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