🐱 猫猫导航 (Mao Nav)

由于原作者没修bug所以我全部修了所以重建仓库！

致歉原作者！

💡 致谢与声明

本项目基于原作者 猫猫导航 开发。

🔗 原项目主页：https://github.com/maodeyu180/mao_nav

---

⭐ 如果这个项目对你有帮助，请给它一个 Star！

一个简洁美观的个人导航网站，支持分类管理和自定义收藏夹

🛠️ 更新记录

• 2025-08-20 重磅更新：支持通用型部署，可通过环境变量自定义网站标题和后台名称，无需修改代码。
• 2025-08-11 增加夜间模式，增加默认搜索引擎设置功能。
• 2025-07-30 修复item展示问题，增加环境变量 VITE_OPEN_LOCK，支持私有化部署（首页访问验证）。
• 2025-07-22 增加站点拖拽排序，优化 icon 获取逻辑。
• 2025-07-16 完善 Admin 管理后台，支持可视化编辑分类和站点。

效果预览

示例站点: 猫猫导航

✨ 特性

• 🎨 现代化设计 - 简洁美观的界面，支持响应式布局
• 📱 多设备适配 - 完美支持桌面端、平板和移动端
• ☁️ Serverless - 无需数据库，数据以 JSON 格式存储在你的 GitHub 仓库中。
• 🔥 分类管理 - 支持自定义分类和网站管理
• ⚡ 快速访问 - 基于 Vue 3 + Vite 构建，加载速度极快
• 🌐 免费部署 - 支持 Cloudflare Pages 免费部署
• 👨‍💻 可视化管理 - 内置 /admin 管理后台，支持增删改查、拖拽排序。
• 🌐 通用部署 - 支持通过环境变量自定义网站标题，方便 Fork 使用。
• 🛠️ 易于定制 - 简单的配置即可个性化你的导航
• 👨‍💻 管理界面 - 可选配置管理员界面，支持可视化添加/编辑分类和网站（需要GitHub Token）
• 🔒 隐私保护 - 支持开启全站访问密码保护。

⚙️ 配置说明 (环境变量)

1. 配置环境变量本地【可选】

• 如果你在 自己的服务器 去部署：

• 需要进行如下操作： 项目根目录创建 .env 文件.

  我会在github项目根目录创建一个例子文件

  该文件禁止上传在github项目 只能放在你的服务器本地

  我将在根目录创建一个env文件 仅供参考修改

2. 配置环境变量【必选】

• 如果你使用 Vercel 或 Cloudflare Pages 部署：
  请在对应平台的「环境变量」设置界面，添加下方这些变量，无需在项目中创建 .env 文件。 (注意：修改环境变量后，必须重新触发部署 (Redeploy) 才会生效)

变量名	必填	说明	示例
VITE_ADMIN_PASSWORD	✅	管理员密钥。进入 /admin 后台或解锁前台（如果开启锁）时使用。	mypassword123
VITE_GITHUB_TOKEN	✅	GitHub Token。用于后台保存数据到仓库。权限要求见下文。	ghp_xxxxxx
VITE_GITHUB_OWNER	⚪	你的 GitHub 用户名。如果不填，尝试自动获取。	yourname
VITE_GITHUB_REPO	⚪	你的仓库名称。	mao_nav
VITE_GITHUB_BRANCH	⚪	数据存储分支。	master 或 main
VITE_SITE_TITLE	⚪	网站标题。浏览器标签页和首页大标题 (最高优先级，覆盖默认值)。	烈火导航
VITE_ADMIN_TITLE	⚪	后台标题。自定义后台管理界面的标题。	管理后台-烈火
VITE_SITE_DESCRIPTION	⚪	网站描述。用于 SEO 搜索引擎抓取和分享时的介绍文字。	一个简洁、美观的导航网站
VITE_OPEN_LOCK	⚪	前台锁定。设为 true 时，访问首页也需要输入密码。	false

🎯 如何使用管理后台

部署成功后，访问你的网站域名加上 /admin：

例如：https://your-nav.vercel.app/admin

1. 输入你在环境变量中设置的 VITE_ADMIN_PASSWORD。
2. 进入后台后，你可以：
   • 添加/编辑/删除分类。
   • 添加/编辑/删除网站链接。
   • 自动获取网站图标。
   • 拖拽排序（需先选择具体分类）。
   • 修改网站标题和默认搜索引擎。
3. 修改完成后，点击 "保存到 GitHub"。
   • 注意：保存后，GitHub 会触发自动构建，通常需要 2-3 分钟，更新的内容才会显示在线上。

🚀 快速开始

图文教程可访问猫猫导航图文教程

🚀 部署到 Cloudflare（推荐）

1. Fork 本项目

• 点击页面右上角的 "Fork" 按钮
• 将项目 Fork 到你的 GitHub 账号下

2. 在 Cloudflare Pages 控制台部署

1. 访问 Cloudflare Dashboard
2. 注册/登录 Cloudflare 账号（免费）
3. 点击左侧菜单 "Workers & Pages"
4. 点击 "Create application" → "Pages" → "Connect to Git"
5. 授权 GitHub 并选择你 Fork 的 mao_nav 仓库
6. 配置构建设置：
   • Framework preset: Vue
   • Build command: npm run build
   • Build output directory: dist 7.（可选）在 Environment Variables 里添加你的环境变量（如需用到管理员功能）
7. 点击 "Save and Deploy"

✅ 完成！ 几分钟后你就有了自己的导航网站，每次修改代码都会自动重新部署。

3. 自定义你的导航

• 编辑 src/mock/mock_data.js 文件，添加你自己的网站分类和链接
• 提交更改，Cloudflare 会自动重新部署

4. 绑定自定义域名（可选）

• 在 Cloudflare Pages 项目设置中点击 "Custom domains"
• 添加你的域名并按提示配置 DNS

---

🚀 部署到 Vercel

1. Fork 本项目

• 同上，先 Fork 到你的 GitHub 账号

2. 在 Vercel 控制台部署

1. 访问 Vercel 官网
2. 注册/登录 Vercel 账号（免费）
3. 点击右上角 "Add New" → "Project"
4. 选择你 Fork 的 mao_nav 仓库，点击 "Import"
5. 保持默认设置，Vercel 会自动检测到是 Vue 项目
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
6. （可选）在 Environment Variables 里添加你的环境变量（如需用到管理员功能）
7. 点击 "Deploy"

✅ 完成！ 部署成功后会自动生成一个 vercel.app 域名，每次推送代码会自动重新部署。

3. 自定义你的导航

• 编辑 src/mock/mock_data.js 文件，添加你自己的网站分类和链接
• 提交更改，Vercel 会自动重新部署

4. 绑定自定义域名（可选）

• 在 Vercel 项目设置中点击 "Domains"
• 添加你的域名并按提示配置 DNS

🛠️ 配置管理员界面（可选）

如果你想使用管理员界面来可视化管理导航数据，可以配置 GitHub Token：

1. 获取 GitHub Personal Access Token

1. 访问 GitHub Settings → Developer settings → Personal access tokens
2. 点击 "Generate new token" → "Generate new token (fine-grained token)"
3. 设置 Token 名称，选择过期时间，并只选择你的 mao_nav 仓库（这样即使 token 泄露也不会影响你其他项目）
4. 在 Repository permissions (仓库权限) 部分，勾选以下权限：
   • Contents - Read and write ✅
     用于读取和修改 src/mock/mock_data.js 文件，这是管理系统的核心功能
   • Metadata - Read ✅
     用于访问仓库基本信息，GitHub API 的基础权限
5. 在 Account permissions (账户权限) 部分：
   不需要勾选任何账户权限 ❌，我们只操作特定仓库，不需要账户级别的权限
6. 点击 "Generate token" 并复制生成的 Token（只显示一次）

本地开发

1. 克隆项目

git clone https://github.com/your-username/mao_nav.git
cd mao_nav

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 打开浏览器访问 http://localhost:5173

---

项目结构

mao_nav/
├── public/ # 公共静态文件 (favicon, logo等)
├── src/ # 源代码目录
│ ├── apis/ # GitHub API 交互逻辑
│ ├── assets/ # 静态资源 (CSS, 图片)
│ ├── components/ # Vue 组件 (SiteManager, CategoryManager...)
│ ├── mock/ # mock_data.js (本地数据/数据存储文件)
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── views/ # 页面视图 (NavHomeView, AdminView)
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # HTML 模板入口
├── package.json # 项目依赖配置
├── vite.config.js # Vite 构建配置
└── wrangler.toml # Cloudflare 部署配置

🎯 自定义配置

修改导航数据

有两种方式来自定义你的导航分类和网站：

方式1：直接编辑文件（推荐） 编辑 src/mock/mock_data.js 文件来自定义你的导航分类和网站：

export const mockData = {
  categories: [
    {
      id: "my-favorites",
      name: "我的常用",
      icon: "💥",
      order: 0,
      sites: [
        {
          id: "example",
          name: "示例网站",
          url: "https://example.com",
          description: "网站描述",
          icon: "https://example.com/favicon.ico"
        }
      ]
    }
  ]
}

方式2：使用管理员界面（可选） 如果你配置了管理员界面（见上方配置说明），可以通过以下步骤可视化管理：

1. 访问 http://localhost:5173/admin 或 https://your-domain.com/admin
2. 输入管理员密钥登录
3. 在界面中添加、编辑或删除分类和网站
4. 点击"保存到GitHub"按钮保存更改
5. 系统会自动在 2-3 分钟内重新部署

自定义样式

• 主要样式文件：src/assets/main.css
• 基础样式：src/assets/base.css

🛠️ 开发命令

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

# 代码检查和修复
npm run lint

📋 部署清单

在部署前请检查：

• [✅ ] 已修改 src/mock/mock_data.js 为你的个人数据
• [✅ ] 已更新 package.json 中的项目信息
• [✅ ] 已配置 Cloudflare 账号（用于部署）
• [✅ ] 已测试构建命令 npm run build
• [✅ ] 已验证 dist 目录生成正常
• [✅ ] （可选）已配置管理员界面的环境变量

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request

📄 许可证

本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详情

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具
• Cloudflare Pages - 现代化的 JAMstack 平台
• Pinia - Vue.js 状态管理库

📞 联系方式

如果你有任何问题或建议，欢迎通过以下方式联系：

• 提交 Issue
• 发起 Discussion

---