# 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. 安装依赖

```bash
npm install
# 或
yarn install
# 或
pnpm install
```

### 2. 启动开发服务器

```bash
npm run dev
# 或
yarn dev
```

### 3. 打开浏览器

访问 [http://localhost:3000](http://localhost:3000) 查看应用。

## ⚙️ 配置

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

```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
```

## 🏗️ 部署

### 传统部署

```bash
# 构建项目
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](https://nextjs.org/) - React 框架
- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
- [Font Awesome](https://fontawesome.com/) - 图标库
- [Context7](https://context7.dev/) - 技术文档支持

## 📱 功能演示

### 主要功能

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

### 使用镜像源配置

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

### 配置文件说明

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