# LanDrop

**Repository Path**: lee-good/lan-drop

## Basic Information

- **Project Name**: LanDrop
- **Description**: LanDrop 是一个基于 Vue 3 + Node.js 的本地文件管理器，提供直观的 Web 界面来浏览、上传、下载和管理本地文件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Nodejs, Vue

## README

# LanDrop

LanDrop 是一个基于 Vue 3 + Node.js 的本地文件管理器，提供直观的 Web 界面来浏览、上传、下载和管理本地文件。

![LanDrop 界面截图](./image/home.png)

## 功能特性

- 🔐 **用户认证**：基于 JWT 的用户注册/登录系统，数据隔离
- 📁 **文件浏览**：支持多级目录浏览，面包屑导航
- 🔍 **智能搜索**：支持文件名实时搜索（500ms 防抖）
- 📤 **文件上传**：支持多文件批量上传、拖拽上传
- 📥 **文件下载**：支持文件下载和预览
- 📋 **文件管理**：支持创建文件夹、重命名、删除操作
- 🖼️ **图片预览**：支持图片画廊模式，可左右切换查看文件夹内所有图片
- 🎬 **视频预览**：支持视频弹窗播放，带控制条和全屏功能
- 📄 **文件图标**：根据文件类型显示对应图标（PDF、Word、Excel、PPT、Zip 等）
- 🎨 **现代 UI**：简洁美观的界面设计，支持深色/浅色主题
- 📱 **响应式**：适配不同屏幕尺寸

## 技术栈

### 前端

- **框架**：Vue 3 + Composition API
- **构建工具**：Vite 6
- **UI 组件库**：Element Plus
- **图标**：自定义 SVG 图标 + Element Plus 图标
- **样式**：CSS3 + 自定义主题

### 后端

- **运行时**：Node.js 18+
- **框架**：Express.js
- **数据库**：sql.js（SQLite 的纯 JS 实现）
- **认证**：JWT (jsonwebtoken) + bcryptjs
- **文件处理**：Multer（文件上传）、fs-extra
- **跨域**：CORS 支持

## 快速开始

### 环境要求

- Node.js 18 或更高版本
- pnpm（推荐）或 npm

### 安装依赖

```bash
# 克隆项目
git clone <your-repo-url>
cd LanDrop

# 安装后端依赖
cd server
pnpm install

# 安装前端依赖
cd ../client
pnpm install
```

### 数据库初始化

数据库会在首次启动后端服务时**自动初始化**：

1. 后端启动时会检查 `server/data.db` 是否存在
2. 如果不存在，会自动创建新的 SQLite 数据库
3. 自动创建 `users` 表用于存储用户信息
4. 每次数据写入操作后自动保存到文件

**无需手动创建或迁移数据库**，直接启动服务即可。

> **注意**：`data.db` 文件已添加到 `.gitignore`，不会被提交到版本控制。每个部署环境需要独立注册用户。

### 启动开发服务器

```bash
# 启动后端服务（端口 3000）
cd server
pnpm dev

# 启动前端服务（端口 5100）
cd client
pnpm dev --host
```

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

### 构建生产版本

```bash
# 构建前端
cd client
pnpm build

# 构建后端（如需）
cd ../server
pnpm build
```

## API 端点

后端服务运行在 `http://localhost:3000`，提供以下 API：

### 认证接口（无需 Token）

| 方法 | 端点                 | 描述     |
| ---- | -------------------- | -------- |
| POST | `/api/auth/register` | 用户注册 |
| POST | `/api/auth/login`    | 用户登录 |

### 文件管理接口（需要 JWT Token）

| 方法   | 端点                  | 描述                           |
| ------ | --------------------- | ------------------------------ |
| GET    | `/api/auth/me`        | 获取当前用户信息               |
| GET    | `/api/files?path=`    | 获取文件列表                   |
| POST   | `/api/upload?path=`   | 上传文件                       |
| GET    | `/api/download?path=` | 下载文件                       |
| GET    | `/api/preview?path=`  | 预览文件（支持图片、视频流式） |
| DELETE | `/api/delete?path=`   | 删除文件/文件夹                |
| POST   | `/api/rename`         | 重命名文件/文件夹              |
| POST   | `/api/folder`         | 创建文件夹                     |

## 项目结构

```
LanDrop/
├── client/                 # 前端项目
│   ├── src/
│   │   ├── components/     # Vue 组件
│   │   │   ├── BaseIcon.vue
│   │   │   ├── FileManager.vue
│   │   │   ├── Header.vue
│   │   │   └── Sidebar.vue
│   │   ├── api/           # API 调用
│   │   ├── assets/        # 静态资源
│   │   │   ├── icons/     # 自定义 SVG 图标
│   │   │   └── logo.svg   # 项目 Logo
│   │   └── App.vue
│   ├── package.json
│   └── vite.config.js
├── server/                 # 后端项目
│   ├── src/
│   │   ├── index.js       # 主入口
│   │   ├── routes/        # API 路由
│   │   └── utils/         # 工具函数
│   ├── uploads/           # 上传文件存储
│   └── package.json
└── README.md
```

## 配置选项

### 前端配置

- 端口：可在 `client/vite.config.js` 中修改 `server.port`
- 代理：后端 API 代理配置在 `vite.config.js` 的 `server.proxy`

### 后端配置

- 端口：在 `server/src/index.js` 中修改 `PORT`
- 上传目录：在 `server/src/index.js` 中修改 `uploadDir`
- 文件大小限制：在 Multer 配置中调整

## 开发指南

### 添加新图标

1. 将 SVG 文件放入 `client/src/assets/icons/`
2. 确保文件名以 `lc-` 开头
3. 在组件中使用 `<BaseIcon name="lc-your-icon" />`

### 自定义主题

- 主要颜色变量在组件的 `<style>` 中定义
- 支持 Element Plus 主题定制

### 扩展文件类型

- 修改 `FileManager.vue` 中的 `isImage()` 函数来支持更多图片格式
- 添加对应的图标到 `assets/icons/`

## 注意事项

- **首次使用**：需要先注册账号，系统会自动创建数据库
- **用户隔离**：每个用户的文件存储在独立的目录 `server/uploads/{user_uuid}/`
- **文件存储**：上传的文件保存在服务器本地，不同用户之间完全隔离
- **删除操作**：删除操作不可撤销，请谨慎操作
- **Token 管理**：JWT Token 存储在浏览器 localStorage，退出登录会自动清除
- **生产部署**：建议配置环境变量 `JWT_SECRET` 用于 Token 签名

## 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 贡献

欢迎提交 Issue 和 Pull Request！

---

如有问题，请在 GitHub Issues 中反馈。