🧭 无界·Nav Infinity-Nav

一个极简、高颜值、无后端的静态导航网站。 A minimalist, aesthetic, serverless static navigation site.

无界·Nav 不仅仅是一个导航页，它是一套完整的静态网站解决方案。它包含一个前台展示页面和一个可视化后台编辑器。所有数据存储在本地 JSON 文件中，无需数据库，无需后端服务器，部署即可使用。

🛠 技术栈 (Tech Stack)

本项目采用 "No-Build" (无构建) 的现代前端开发理念，无需安装 Node.js，无需 npm install，源码即产物，开箱即用。

• 核心框架: Vue.js 3 (通过 CDN 引入，利用 Composition API 实现高效的响应式逻辑)
• CSS 引擎: Tailwind CSS (通过 CDN 运行时解析，实现极速 UI 开发与深色模式适配)
• 图标系统: RemixIcon (一套精美、开源的中性风格系统符号，超 2000+ 图标)
• 数据存储: JSON (纯文本数据，易于迁移、备份和版本控制)

✨ 特性亮点

🎨 极致美学与交互

• Zinc 极简色系：拒绝千篇一律的模板感。精心调教的 Zinc (锌灰) 色系，在深色模式下呈现深邃的高级黑，亮色模式下呈现通透的陶瓷白。
• Glassmorphism 质感：侧边栏与卡片采用细腻的磨砂玻璃效果，配合微弱的背景光晕，界面通透且富有层次。
• 微交互动画：鼠标悬停时的光影流转、卡片上浮、按钮缩放，每一个操作都有舒适的反馈。

📱 全平台响应式设计

• PC 端：采用 Bento Grid (便当盒) 网格布局，侧边栏固定，信息密度适中，适合作为桌面 Dashboard。
• 移动端：自动变身为 底部导航 App 模式，侧边栏收纳至底部，符合拇指操作习惯，让导航站既是桌面主页，也是随身书签。

🚀 独创的智能图标系统

• 三级降级策略 (High Availability)：
  1. 首屏秒开：默认优先渲染网站首字母，保证页面瞬间加载，绝不留白。
  2. 竞速加载：后台静默请求多个 Favicon API 源，谁快用谁。
  3. 无感替换：图标加载成功后，自动淡入替换掉文字；加载失败则保持文字兜底。拒绝难看的“裂图”图标。
• 智能反色 Logo：头部 Brand Logo 具备智能反色逻辑，在深色背景下自动变白，浅色背景下自动变黑，确保任何时候都清晰可见。

⚡️ Serverless 与数据安全

• 零后端：纯静态文件，可部署在 GitHub Pages、Vercel、Netlify 甚至对象存储上，运行成本几乎为零。
• 数据完全掌控：数据存储于 data.json，没有数据库被注入的风险。采用 "离线编辑-上传" 模式，物理隔离了写入权限，安全性极高。

🛠 人性化的后台管理

• 可视化编辑器：内置 admin.html，提供所见即所得的管理界面。
• 智能辅助：
  • HTTPS 补全：输入 baidu.com 自动补全为 https://baidu.com。
  • 图标代码清洗：直接粘贴 <i class="ri-home-line"></i> 或 ri-home-line，编辑器都能自动识别并提取正确代码。
  • 实时预览：修改配置实时生效，无需反复刷新。

📂 文件结构

项目非常轻量，核心只有 3 个文件：

.
├── index.html      # [前台] 给访客看的导航主页
├── admin.html      # [后台] 给你用的数据管理编辑器
├── data.json       # [数据] 存储所有配置和书签数据
└── README.md       # 说明文档

🚀 快速开始

方式一：直接使用（推荐给服务器用户）

1. 下载本项目源码。
2. 将文件上传至任意静态 Web 服务器（Nginx, Apache, IIS）或对象存储（OSS/COS）的根目录。
3. 访问 http://your-domain.com/index.html 即可。

方式二：GitHub Pages（推荐给个人用户）

1. Fork 本仓库。
2. 在仓库 Settings → Pages 中，将 Source 设置为 main branch。
3. 访问 GitHub 分配的链接：https://username.github.io/

方式三：本地运行

由于浏览器的 CORS 安全策略，直接双击打开 index.html 可能无法读取 JSON 数据。
请使用 VS Code 插件 Live Server 或通过 Python 开启本地服务：

# Python 3
python -m http.server 8000
# 访问 http://localhost:8000

⚙️ 如何管理数据

为了无服务器/低占用要求运行， 我们摒弃了繁重的数据库，采用了最安全的 “离线编辑-上传” 模式：

1. 访问你的后台地址：http://你的域名/admin.html。
2. 在界面上进行分类添加、链接修改、图标配置等操作。
3. 点击右上角的 “生成并保存” 按钮。
4. 编辑器会将最新的 JSON 代码复制到剪贴板。
5. 打开你的服务器/代码仓库中的 data.json 文件，全选 → 粘贴 → 保存。
6. 刷新前台页面，更新即刻生效。

🎨 个性化配置

在编辑器的 Global Settings 中，你可以自定义：

• Site Title: 浏览器标签页标题。
• Logo Icon: 侧边栏顶部的品牌图标（支持 RemixIcon class，如 ri-compass-3-fill）。
• Brand Name: 侧边栏底部的品牌名称（Footer 区域）。
• Copyright: 版权信息。
• ICP: 中国大陆网站备案号（填写后自动显示并链接至工信部）。

🤝 贡献

如果你觉得这个项目对你有帮助，欢迎 Star ⭐️。
同时也欢迎提交 Issue 或 PR 来改进它。

📄 开源协议

MIT License. 意味着你可以免费用于个人或商业项目，只需保留原作者版权声明。