193 lines
5.5 KiB
Markdown
193 lines
5.5 KiB
Markdown
# 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`: 主配置文件，包含镜像源信息、目录配置和功能开关
|
||
- 支持通过修改配置文件来自定义界面颜色、图标、功能等
|
||
- 配置更改后需要重启开发服务器 |