导航页FlatNas多端支持docker部署-飞牛OS-零柒柒优

2T超大网盘，下载不限速，免费领取 | 2T超大网盘，下载不限速，免费领取

FlatNas 是一个轻量级、高度可定制的个人导航页与仪表盘系统。它基于 Vue 3 和 Express 构建，旨在为 NAS 用户、极客和开发者提供一个优雅的浏览器起始页。因为没找到自己喜欢的导航页才想着自己做的，内外网判断依据没有根据延迟来判定，不会出现内网环境也一直用外网地址打开的情况。另外还添加了一个登录前也可以设置想展现图标的功能，方便车机用户或不方便输入的用户在不用登录的环境下也可以打开某个项目的地址,还有有待办，便签，都方便随后记录。

**默认密码**: 系统初始密码为 admin ，请登录后在设置中及时修改。

映射./music路径是给随机播放音乐使用的，可以设置打开后自动播放，在外观布局里设置，登录后才能使用编辑功能，编辑模式下可以调整组件的大小，分组的顺序，卡片的顺序。设置里面可以添加组件，勾选公开后，未登录页面也可以展现。

📅 最近更新 (v1.0.21)

新增功能:
- 壁纸库: 新增壁纸库功能，并支持独立的手机端壁纸库。
- 万能窗口:
  - 添加了手机端展现开关。
  - 增加了适应窗口按钮状态的持久化保存。
优化与调整:
- 移动端适配: 优化了设置栏在手机端的显示效果。
- UI/布局:
  - 调整了项目修改的布局。
  - 修改了卡片模式下标题的显示方式。
- 稳定性: 强化了系统整体稳定性。
BUG修复:
- 收藏夹:
  - 修复了收藏夹组件无法编辑的问题。
  - 修复了收藏夹弹窗位置异常的 BUG。
- RSS: 修复了 RSS 订阅无法使用的 BUG。
近期新增 (v1.0.15):
- 多用户模式: 新增多用户模式支持。
- 侧边栏组件: 添加侧边栏组件。
- 网络模式切换: 左上角添加手动切换内网/外网模式功能。
- 长连接支持: 引入 Socket.IO 技术保持长连接。
- 自定义地理位置: 添加自定义地理位置设置。
- 自定义天气源: 天气组件支持配置自定义 API 源，满足个性化数据需求。
- 设置分类优化: “万能窗口”相关设置独立为单独的标签页，管理更加便捷清晰。
优化与修复:
- 安全策略: 升级了系统安全策略。
- 配置优化: 优化了配置保存的逻辑。
- 界面调整: 默认缩短行间距，设置中增加分组行间距调整选项；修改默认添加分组开关位置；优化了万能窗口设置页的按钮布局，防止遮挡。
- 交互优化: 优化了分组删除的弹窗逻辑。
- Bug修复: 解决了手机端输入法回车失效的问题。
- 引导提示: 在相关设置项增加了关于浏览器插件的引导提示，帮助解决跨域访问问题。

🖥️ 仪表盘与布局

网格布局: 自由拖拽布局，支持不同尺寸的组件。
分组管理: 支持创建多个分组，分类管理应用和书签。
响应式设计: 完美适配桌面端和移动端访问。
编辑模式: 直观的所见即所得编辑体验，轻松添加、删除和重新排列组件。

🧩 丰富的小组件

FlatNas 内置了多种实用的小组件，满足日常需求：

书签组件: 快速访问常用网站，支持自定义图标。首次启动时会自动填充常用的 10 个网站（如 GitHub, Bilibili 等）。
时钟与天气: 实时显示当前时间、日期及当地天气情况。
待办事项 (Todo): 简单的任务管理，随时记录灵感和待办。
RSS 订阅: 内置 RSS 阅读器，实时获取订阅源的最新内容。
热搜榜单: 集成微博热搜、新闻热榜等，不错过即时热点。
计算器: 随时可用的简易计算器。
音乐播放器: 内置 MiniPlayer，支持播放服务器端的本地音乐文件。

🎨 个性化定制

图标管理: 内置图标库，并支持上传自定义图片作为图标。
背景设置: 支持自定义壁纸。
数据安全:
- 本地存储配置 (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 双栈 识别，自动处理 ::ffff: 映射格式。
网络连通性探测:
- 提供 /api/ping 接口，后端调用系统底层 ICMP 协议探测目标主机（默认 223.5.5.5）的延迟。
- 用于辅助判断服务器是否具备外网访问能力。

环境判断算法:

// 前端综合判定逻辑
const isLanMode =
  isInternalIp(clientIp) || // 客户端IP属于内网段 (192.168.x.x, 10.x.x.x, etc.)
  isInternalHostname(window.location.hostname) // 访问域名属于内网 (localhost, .local)

3. 使用指南

配置内网地址:
- 在编辑模式下，右键点击任意组件选择”编辑”。
- 在弹出的对话框中，除了填写”链接地址”（外网）外，还可以填写 “内网链接”。
典型场景:
- 家庭 NAS: 外网填 https://nas.yourdomain.com，内网填 http://192.168.1.10:5000。
- 开发调试: 自动识别 localhost 访问，优先走本地服务端口。

4. 注意事项

反向代理设置: 如果使用 Nginx/Traefik 等反向代理，务必透传真实 IP，否则后端可能无法正确识别客户端来源：
```
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
```
Fallback 机制: 如果未配置内网地址，即使在内网环境也会回退使用外网地址，确保服务可用性。
部署教程
docker-compose

   version: '3.8'

   services:
     flatnas:
       image: qdnas/flatnas:latest
       container_name: flatnas
       restart: unless-stopped
       ports:
         - '23000:3000'
       volumes:
         - ./data:/app/server/data
         - ./music:/app/server/music #映射音乐文件路径给随机音乐播放使用

导航页FlatNas多端支持docker部署