linux-mirror-browser/README.md

Linux 镜像源文件浏览器

一个使用 Next.js 构建的现代化 Linux 镜像源文件浏览网站，支持暗黑模式、镜像源自动配置等功能。

🚀 特性

• 现代化界面: 基于 Next.js 16 和 Tailwind CSS 4 构建的响应式界面
• 文件浏览: 支持列表和网格两种视图模式
• 暗黑模式: 自动检测系统主题，支持手动切换
• 镜像源配置: 一键生成常用 Linux 发行版的镜像源配置命令
• 搜索功能: 快速搜索文件和目录
• 实时统计: 显示目录数量、文件数量和总大小
• 配置文件: 通过 JSON 配置文件轻松自定义

📦 支持的 Linux 发行版

• Ubuntu (Debian 包管理器)
• CentOS/RHEL (YUM/DNF 包管理器)
• Debian (APT 包管理器)
• Arch Linux (Pacman 包管理器)
• Fedora (DNF 包管理器)

🛠️ 技术栈

• 前端: Next.js 16 (App Router), React 19, TypeScript
• 样式: Tailwind CSS 4, Font Awesome 6
• 构建工具: Turbopack, ESLint
• 部署: 支持 Vercel, Docker 等多种部署方式

🚀 快速开始

1. 安装依赖

npm install
# 或
yarn install
# 或
pnpm install

2. 启动开发服务器

npm run dev
# 或
yarn dev

3. 打开浏览器

访问 http://localhost:3000 查看应用。

⚙️ 配置

项目通过 config.json 文件进行配置：

{
  "mirror": {
    "name": "Linux 镜像源",
    "description": "快速、稳定的 Linux 发行版镜像服务",
    "baseUrl": "https://mirror.example.com"
  },
  "directories": [
    {
      "name": "ubuntu",
      "path": "/var/mirror/ubuntu",
      "description": "Ubuntu Linux 发行版",
      "icon": "fab fa-ubuntu",
      "color": "#E95420"
    }
  ],
  "features": {
    "enableSearch": true,
    "enableDarkMode": true,
    "enableStats": true,
    "enableDownload": true,
    "enableCopyLink": true
  },
  "ui": {
    "itemsPerPage": 50,
    "defaultView": "list",
    "showHiddenFiles": false
  }
}

📁 项目结构

src/
├── app/                    # Next.js App Router
│   ├── api/               # API 路由
│   │   ├── browse/        # 文件浏览 API
│   │   ├── command/       # 镜像源配置 API
│   │   └── config/        # 配置信息 API
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 主页面
├── components/            # React 组件
│   ├── FileBrowser.tsx    # 文件浏览器组件
│   ├── Header.tsx         # 头部组件
│   ├── Footer.tsx         # 底部组件
│   └── CommandModal.tsx   # 镜像源配置弹窗
├── lib/                   # 工具库
│   ├── config.ts          # 配置读取
│   ├── filesystem.ts      # 文件系统操作
│   └── demo-data.ts       # 演示数据
└── types/                 # TypeScript 类型定义
    └── index.ts

🏗️ 部署

传统部署

# 构建项目
npm run build

# 启动生产服务器
npm start

🔧 自定义

添加新的 Linux 发行版

1. 在 config.json 的 directories 中添加新目录
2. 在 linuxCommands 中添加对应的配置命令
3. 在 src/lib/demo-data.ts 中添加演示数据（可选）

修改样式

• 编辑 src/app/globals.css 添加自定义样式
• 修改 tailwind.config.js 配置 Tailwind CSS

扩展功能

• 在 src/app/api/ 下添加新的 API 路由
• 在 src/components/ 下添加新的组件

🔒 安全注意事项

1. 路径安全: 项目包含路径验证，防止目录遍历攻击
2. 文件权限: 确保运行用户有适当权限访问镜像目录
3. 网络安全: 生产环境建议配置 HTTPS 和防火墙

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

• Next.js - React 框架
• Tailwind CSS - CSS 框架
• Font Awesome - 图标库
• Context7 - 技术文档支持

📱 功能演示

主要功能

1. 文件浏览: 以列表或网格形式浏览镜像文件
2. 搜索: 实时搜索文件和目录
3. 镜像源配置: 点击"添加镜像源"按钮生成配置命令
4. 暗黑模式: 点击月亮/太阳图标切换主题
5. 响应式设计: 支持手机、平板和桌面设备

使用镜像源配置

1. 点击页面顶部的"添加镜像源"按钮
2. 选择您的 Linux 发行版
3. 复制生成的命令
4. 在终端中执行命令
5. 更新软件包列表

配置文件说明

• config.json: 主配置文件，包含镜像源信息、目录配置和功能开关
• 支持通过修改配置文件来自定义界面颜色、图标、功能等
• 配置更改后需要重启开发服务器