From db520f931e453951dcf012f23915e5e662330a6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=96=BB=E5=8B=87=E7=A5=A5?= <237899745@qq.com> Date: Mon, 24 Nov 2025 19:21:39 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20=E9=87=8D=E5=86=99=20README=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3=20&=20=E2=9C=A8=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 文档更新： - 完全重写 README.md，更加详细和专业 - 添加一键部署命令（curl 和 wget 两种方式） - 详细介绍双存储模式、邮件系统、安全防护等特性 - 添加完整的使用指南和常见问题解答 - 更新项目结构和技术栈说明 - 添加版本更新日志 前端优化： - 优化存储管理界面交互 - 改进文件管理功能 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- README.md | 500 ++++++++++++++++++++++++++++++++-------------- frontend/app.html | 16 ++ frontend/app.js | 47 +++-- 3 files changed, 403 insertions(+), 160 deletions(-) diff --git a/README.md b/README.md index 30475e1..bc2230b 100644 --- a/README.md +++ b/README.md @@ -1,244 +1,452 @@ -# 玩玩云 - Web SFTP 文件管理系统 +# 玩玩云 - 现代化云存储管理平台 -> 一个基于Web的SFTP文件管理系统，提供文件上传、下载、分享等功能，支持多用户管理。 +> 一个功能完整的云存储管理系统，支持本地存储和SFTP存储，提供文件管理、分享、邮件验证等企业级功能。 -## 📋 项目简介 +
-玩玩云是一个现代化的Web文件管理系统,让您可以通过浏览器管理SFTP服务器上的文件。系统支持文件的上传、下载、重命名、删除、分享等操作，并提供桌面端上传工具，方便快速上传大文件。 +![Version](https://img.shields.io/badge/version-1.1.0-blue.svg) +![License](https://img.shields.io/badge/license-Personal%20Use-green.svg) +![Node](https://img.shields.io/badge/node-20.x-brightgreen.svg) +![Vue](https://img.shields.io/badge/vue-3.x-42b883.svg) -### 主要特性 +
-- ✅ **文件管理** - 浏览、上传、下载、重命名、删除文件 -- ✅ **文件分享** - 生成分享链接，支持密码保护和有效期设置 -- ✅ **多用户系统** - 用户注册、登录、权限管理 -- ✅ **桌面上传工具** - 拖拽上传，实时显示进度 -- ✅ **流式下载** - 服务器零存储，纯中转下载 -- ✅ **管理员功能** - 用户管理、文件审查、系统设置 -- ✅ **Docker部署** - 一键部署，易于维护 +## ✨ 项目特色 -## 🛠️ 技术栈 +玩玩云是一个现代化的Web文件管理系统，让您可以通过浏览器轻松管理文件。系统支持**双存储模式**（本地存储/SFTP存储），提供完整的用户管理、文件分享、邮件通知等企业级功能。 -### 前端 -- **Vue.js 3** - 渐进式JavaScript框架 -- **Axios** - HTTP请求库 -- **Font Awesome** - 图标库 +### 核心特性 -### 后端 -- **Node.js 20** - JavaScript运行时 -- **Express** - Web应用框架 -- **better-sqlite3** - 轻量级数据库 -- **ssh2-sftp-client** - SFTP客户端 -- **JWT** - 用户认证 +#### 🗂️ 双存储模式 +- **本地存储** - 快速读写，适合小型部署 +- **SFTP存储** - 连接远程服务器，支持大容量存储 +- **一键切换** - 在管理面板轻松切换存储方式 -### 部署 -- **Docker** - 容器化 -- **Docker Compose** - 容器编排 -- **Nginx** - 反向代理 +#### 📁 完整的文件管理 +- 文件浏览、上传、下载、重命名、删除 +- 支持文件夹操作 +- 流式下载，服务器零存储中转 +- 实时进度显示 + +#### 🔗 智能文件分享 +- 生成分享链接，支持密码保护 +- 支持有效期设置（1小时-永久） +- 分享密码防爆破保护（10次失败封锁20分钟） +- 支持HTTP直链和SFTP双模式下载 + +#### 👥 完善的用户系统 +- 用户注册、登录、邮箱验证 +- 密码加密存储（bcrypt） +- 邮件找回密码功能 +- JWT令牌认证 +- 管理员权限管理 + +#### 🔐 企业级安全防护 +- **登录验证码** - 2次密码错误后自动显示验证码 +- **防爆破保护** - 5次登录失败封锁30分钟 +- **分享密码保护** - 10次密码错误封锁20分钟 +- **智能限流** - 基于IP和用户名双重维度 +- **安全日志** - 详细记录所有安全事件 + +#### 📧 邮件通知系统 +- 注册邮箱验证 +- 密码重置邮件 +- 支持SMTP配置 +- 邮件模板可自定义 + +#### 🖥️ 桌面上传工具 +- 拖拽上传，简单易用 +- 实时显示上传进度 +- 自动配置，无需手动设置 +- 支持大文件上传 + +#### ⚡ 一键部署 +- 全自动安装脚本（install.sh） +- 自动检测和安装依赖（Node.js、Nginx等） +- 支持宝塔面板环境 +- 自动配置Nginx反向代理 +- 支持Docker容器化部署 ## 🚀 快速开始 ### 环境要求 -- **Docker**: 20.10.0+ -- **Docker Compose**: 2.0.0+ -- **操作系统**: Linux (Ubuntu 20.04+ / Debian 10+ / CentOS 7+) +- **操作系统**: Linux (Ubuntu 18.04+ / Debian 10+ / CentOS 7+) - **内存**: 最低 1GB RAM（推荐 2GB+） +- **磁盘空间**: 至少 2GB 可用空间 -### 方法1: 一键部署（推荐） +### 方式1: 一键部署（推荐）⭐ + +使用我们的自动化安装脚本，5分钟即可完成部署： ```bash -# 1. 上传或克隆项目 -cd /var/www -# 将项目文件上传到此目录 +# 使用 curl +curl -fsSL https://gitee.com/yu-yon/vue-driven-cloud-storage/raw/master/install.sh | bash -# 2. 进入项目目录 -cd ftp-web-manager - -# 3. 一键部署 -bash deploy.sh +# 或使用 wget +wget -qO- https://gitee.com/yu-yon/vue-driven-cloud-storage/raw/master/install.sh | bash ``` -deploy.sh脚本会自动： -- 检查Docker和Docker Compose环境 -- 创建必要的目录 -- 构建并启动所有服务 -- 显示访问信息和默认账号 +安装脚本会自动完成以下工作： +- ✅ 检测系统环境 +- ✅ 安装 Node.js 20.x（如未安装） +- ✅ 安装 Nginx（如未安装） +- ✅ 克隆项目代码 +- ✅ 安装依赖包 +- ✅ 配置 Nginx 反向代理 +- ✅ 配置系统服务（systemd） +- ✅ 自动启动服务 +- ✅ 显示访问信息 -### 方法2: 手动部署 +### 方式2: Docker 部署 + +适合熟悉 Docker 的用户： ```bash -# 1. 进入项目目录 -cd /var/www/ftp-web-manager +# 1. 克隆项目 +git clone https://gitee.com/yu-yon/vue-driven-cloud-storage.git +cd vue-driven-cloud-storage -# 2. 创建必要的目录 -mkdir -p certbot/conf certbot/www backend/uploads +# 2. 启动服务 +docker-compose up -d -# 3. 构建并启动服务 -docker-compose up --build -d - -# 4. 查看日志 +# 3. 查看日志 docker-compose logs -f ``` -### 访问系统 +### 方式3: 手动部署 -部署完成后： +详细步骤请参考 [INSTALL_GUIDE.md](./INSTALL_GUIDE.md) -- **前端地址**: http://服务器IP:8080 -- **后端API**: http://服务器IP:40001 +### 首次访问 + +部署完成后，访问系统： + +- **访问地址**: http://你的服务器IP - **默认管理员账号**: - 用户名: `admin` - 密码: `admin123` - ⚠️ **请立即登录并修改密码！** -## 📖 使用教程 +## 📖 使用指南 -### 配置SFTP服务器 +### 配置存储方式 -首次使用需要配置SFTP连接信息： +登录后进入"管理面板" → "存储管理"，选择存储方式： -1. 登录后点击右上角用户菜单 -2. 选择"设置" -3. 填写SFTP配置： - - **SFTP主机**: 您的SFTP服务器IP - - **SFTP端口**: 默认22 - - **SFTP用户名**: SFTP账号 - - **SFTP密码**: SFTP密码 - - **HTTP下载基础URL**（可选）: 如果有HTTP直接下载地址 +#### 本地存储（推荐新手） +- 无需额外配置 +- 文件存储在服务器本地 +- 适合小型部署 -4. 点击"保存配置" +#### SFTP存储（适合独立存储） +1. 点击"切换到 SFTP" +2. 填写SFTP配置： + - SFTP主机: 远程服务器IP + - SFTP端口: 默认22 + - SFTP用户名: SFTP账号 + - SFTP密码: SFTP密码 + - 远程路径: 文件存储路径 +3. 保存配置 + +### 配置邮件服务 + +进入"管理面板" → "系统设置" → "邮件配置"： + +``` +SMTP服务器: smtp.example.com +SMTP端口: 465 +发件邮箱: noreply@example.com +SMTP密码: 你的授权码 +``` + +配置后即可使用邮箱验证和密码重置功能。 ### 文件管理 -- **浏览文件**: 点击文件夹图标进入子目录 - **上传文件**: 点击"上传文件"按钮选择本地文件 -- **下载文件**: 点击文件行的下载按钮 -- **重命名**: 点击"重命名"按钮修改文件名 -- **删除**: 点击"删除"按钮删除文件 +- **下载文件**: 点击文件行的下载图标 +- **重命名**: 点击文件名旁的编辑图标 +- **删除文件**: 点击删除图标 +- **创建文件夹**: 点击"新建文件夹"按钮 ### 文件分享 -1. 点击文件行的"分享"按钮 +1. 选择要分享的文件，点击"分享"按钮 2. 设置分享选项： - - **分享密码**（可选） - - **有效期**（可选） + - 分享密码（可选） + - 有效期（1小时、1天、7天、永久） 3. 复制分享链接发送给他人 +4. 在"我的分享"中管理所有分享链接 -## 🔧 维护操作 +### 使用桌面上传工具 + +1. 进入"上传工具"页面 +2. 下载适合你系统的上传工具 +3. 输入服务器地址和API密钥 +4. 拖拽文件即可上传 + +## 📁 项目结构 + +``` +vue-driven-cloud-storage/ +├── backend/ # 后端服务 +│ ├── server.js # Express 服务器 +│ ├── database.js # SQLite 数据库操作 +│ ├── auth.js # JWT 认证中间件 +│ ├── mailer.js # 邮件发送模块 +│ ├── package.json # 依赖配置 +│ └── uploads/ # 本地存储目录 +│ +├── frontend/ # 前端代码 +│ ├── index.html # 登录注册页面 +│ ├── app.html # 主应用页面 +│ ├── app.js # 应用逻辑 +│ ├── share.html # 分享页面 +│ └── libs/ # 第三方库 (Vue.js, Axios, etc.) +│ +├── nginx/ # Nginx 配置 +│ └── nginx.conf # 反向代理配置 +│ +├── upload-tool/ # 桌面上传工具 +│ ├── upload_tool.py # Python 上传工具源码 +│ └── build.bat # Windows 打包脚本 +│ +├── install.sh # 一键安装脚本 ⭐ +├── deploy.sh # Docker 部署脚本 +├── docker-compose.yml # Docker 编排文件 +├── .gitignore # Git 忽略文件 +└── README.md # 本文件 +``` + +## 🛠️ 技术栈 + +### 后端技术 +- **Node.js 20** - JavaScript 运行时 +- **Express 4.x** - Web 应用框架 +- **better-sqlite3** - 轻量级数据库 +- **ssh2-sftp-client** - SFTP 客户端库 +- **jsonwebtoken** - JWT 认证 +- **bcrypt** - 密码加密 +- **nodemailer** - 邮件发送 +- **svg-captcha** - 验证码生成 +- **express-session** - Session 管理 + +### 前端技术 +- **Vue.js 3** - 渐进式 JavaScript 框架 +- **Axios** - HTTP 请求库 +- **Font Awesome** - 图标库 +- **原生 CSS** - 现代化界面设计 + +### 部署方案 +- **Docker** - 容器化 +- **Docker Compose** - 容器编排 +- **Nginx** - 反向代理和静态资源服务 +- **Systemd** - 系统服务管理 + +## 🔐 安全特性 + +### 认证与授权 +- ✅ bcrypt 密码加密（10轮盐值） +- ✅ JWT 令牌认证 +- ✅ Session 安全管理 +- ✅ CORS 跨域配置 +- ✅ SQL 注入防护（参数化查询） +- ✅ XSS 防护（输入过滤） + +### 防爆破保护 +- ✅ 登录验证码（2次失败后显示） +- ✅ 登录防爆破（5次失败封锁30分钟） +- ✅ 分享密码防爆破（10次失败封锁20分钟） +- ✅ 基于 IP + 用户名双重维度限流 +- ✅ 支持反向代理 X-Forwarded-For + +### 数据安全 +- ✅ SFTP 密码加密存储 +- ✅ 数据库事务支持 +- ✅ 定期清理过期分享 +- ✅ 安全日志记录 + +## 🔧 管理维护 + +### 查看服务状态 + +```bash +# Systemd 部署 +sudo systemctl status vue-cloud-storage + +# Docker 部署 +docker-compose ps +``` ### 查看日志 ```bash -# 查看所有日志 -docker-compose logs -f +# Systemd 部署 +sudo journalctl -u vue-cloud-storage -f -# 查看后端日志 +# Docker 部署 docker-compose logs -f backend ``` ### 重启服务 ```bash -# 重启所有容器 +# Systemd 部署 +sudo systemctl restart vue-cloud-storage + +# Docker 部署 docker-compose restart - -# 重启指定容器 -docker-compose restart backend -``` - -### 停止服务 - -```bash -docker-compose down ``` ### 备份数据 ```bash # 备份数据库 -cp backend/ftp-manager.db backup/ftp-manager.db.$(date +%Y%m%d) +sudo cp /var/www/vue-driven-cloud-storage/backend/ftp-manager.db \ + /backup/ftp-manager.db.$(date +%Y%m%d) -# 备份整个项目 -tar -czf backup/wanwanyun-$(date +%Y%m%d).tar.gz . +# 备份上传文件（本地存储模式） +sudo tar -czf /backup/uploads-$(date +%Y%m%d).tar.gz \ + /var/www/vue-driven-cloud-storage/backend/uploads/ ``` -### 更新代码 +### 更新系统 ```bash -# 拉取最新代码 +cd /var/www/vue-driven-cloud-storage git pull - -# 重新构建并重启 -docker-compose up --build -d +cd backend && npm install +sudo systemctl restart vue-cloud-storage ``` -## 🔐 安全建议 +## 📊 性能优化建议 -1. **修改默认密码**: 首次登录后立即修改admin密码 -2. **使用HTTPS**: 配置SSL证书，使用HTTPS访问 -3. **修改JWT密钥**: 在backend/.env文件中设置随机的JWT_SECRET -4. **定期备份**: 定期备份数据库文件 -5. **限制端口**: 不要对外暴露40001端口，只通过Nginx访问 +### 生产环境配置 + +1. **启用 HTTPS** + - 使用 Let's Encrypt 免费证书 + - 在 Nginx 中配置 SSL + +2. **配置缓存** + - 启用 Nginx 静态资源缓存 + - 配置浏览器缓存策略 + +3. **数据库优化** + - 定期清理过期数据 + - 定期备份数据库 + +4. **监控告警** + - 配置日志监控 + - 设置磁盘空间告警 ## ❓ 常见问题 -### Docker容器启动失败 +### 安装相关 -```bash -# 查看日志 -docker-compose logs backend +**Q: 一键安装脚本支持哪些系统？** +A: Ubuntu 18.04+、Debian 10+、CentOS 7+、宝塔面板环境。 -# 重新构建 -docker-compose down -docker-compose up --build -d -``` +**Q: 如何查看安装进度？** +A: 安装脚本会实时显示进度，完成后显示访问地址。 -### 上传失败提示权限错误 +### 使用相关 -检查SFTP服务器目录权限，确保上传目录有写权限。 +**Q: 如何切换存储方式？** +A: 登录后进入"管理面板" → "存储管理"，点击切换按钮即可。 -### 分享链接无法访问 +**Q: 忘记管理员密码怎么办？** +A: 点击登录页的"忘记密码"，通过邮箱重置密码。如未配置邮箱，需要手动重置数据库。 -检查nginx配置和防火墙设置，确保端口8080可访问。 +**Q: 上传文件大小限制是多少？** +A: 默认限制 5GB，可在 Nginx 配置中修改 `client_max_body_size`。 -## 📁 项目结构 +### 故障排查 -``` -ftp-web-manager/ -├── backend/ # 后端代码 -│ ├── server.js # 主服务器文件 -│ ├── database.js # 数据库操作 -│ ├── auth.js # 认证中间件 -│ ├── Dockerfile # Docker镜像 -│ └── package.json # 依赖配置 -│ -├── frontend/ # 前端代码 -│ ├── index.html # 登录页面 -│ ├── app.html # 主应用页面 -│ ├── share.html # 分享页面 -│ └── libs/ # 第三方库 -│ -├── nginx/ # Nginx配置 -│ └── nginx.conf # 配置文件 -│ -├── upload-tool/ # 上传工具 -│ ├── upload_tool.py # Python源码 -│ └── build.bat # 打包脚本 -│ -├── docker-compose.yml # Docker编排 -├── deploy.sh # 一键部署脚本 -├── .gitignore # Git忽略文件 -└── README.md # 本文件 -``` +**Q: 无法访问系统** +1. 检查服务是否启动：`sudo systemctl status vue-cloud-storage` +2. 检查防火墙是否开放端口 +3. 查看 Nginx 日志：`sudo tail -f /var/log/nginx/error.log` + +**Q: SFTP 连接失败** +1. 检查 SFTP 服务器是否可访问 +2. 验证用户名和密码是否正确 +3. 检查远程路径权限 + +**Q: 邮件发送失败** +1. 检查 SMTP 配置是否正确 +2. 确认 SMTP 密码是授权码（非登录密码） +3. 查看后端日志排查错误 + +## 📝 更新日志 + +### v1.1.0 (2025-11-13) +- ✨ 新增登录验证码功能 +- ✨ 新增登录防爆破保护（5次失败封锁30分钟） +- ✨ 新增分享密码防爆破保护（10次失败封锁20分钟） +- ✨ 支持反向代理 X-Forwarded-For +- 🐛 修复更新脚本导致上传工具丢失 +- 💄 优化管理面板界面 + +### v1.0.0 (2025-11-01) +- 🎉 首个正式版本发布 +- ✨ 完整的文件管理功能 +- ✨ 双存储模式（本地/SFTP） +- ✨ 文件分享功能 +- ✨ 用户管理系统 +- ✨ 邮件验证和密码重置 +- ✨ 桌面上传工具 +- ✨ 一键部署脚本 + +完整更新日志请查看 [VERSION.txt](./VERSION.txt) ## 🤝 贡献指南 -欢迎提交Issue和Pull Request！ +欢迎提交 Issue 和 Pull Request！ + +### 开发环境搭建 + +```bash +# 克隆项目 +git clone https://gitee.com/yu-yon/vue-driven-cloud-storage.git +cd vue-driven-cloud-storage + +# 安装依赖 +cd backend && npm install + +# 启动开发服务器 +node server.js +``` + +### 提交规范 + +- feat: 新功能 +- fix: 修复bug +- docs: 文档更新 +- style: 代码格式调整 +- refactor: 重构 +- test: 测试相关 +- chore: 构建/工具相关 ## 📄 许可证 本项目仅供学习和个人使用。 +## 💬 联系方式 + +- **项目地址**: https://gitee.com/yu-yon/vue-driven-cloud-storage +- **问题反馈**: 请在 Gitee 提交 Issue + +## 🙏 致谢 + +感谢所有开源项目的贡献者！ + --- -**玩玩云** - 让文件管理更简单 ☁️ +**玩玩云** - 让云存储管理更简单 ☁️ + +
+ +Made with ❤️ by 玩玩云团队 + +
diff --git a/frontend/app.html b/frontend/app.html index ca966f1..e324bfd 100644 --- a/frontend/app.html +++ b/frontend/app.html @@ -1102,6 +1102,22 @@ + +
+
+

切换到 SFTP 存储

+

+ 需要先填写 SFTP 连接信息才能使用 SFTP 存储。是否前往配置？ +

+
+ + +
+
+
+
diff --git a/frontend/app.js b/frontend/app.js index e6bd596..08dd875 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -214,7 +214,10 @@ createApp({ // 存储切换状态 storageSwitching: false, - storageSwitchTarget: null + storageSwitchTarget: null, + + // SFTP配置引导弹窗 + showSftpGuideModal: false }; }, @@ -1843,20 +1846,9 @@ handleDragLeave(e) { return; } - // 切到SFTP但还未配置，引导去配置 + // 切到SFTP但还未配置，引导弹窗 if (type === 'sftp' && (!this.user?.has_ftp_config)) { - this.showToast('info', '需要配置SFTP', '请先填写SFTP信息再切换'); - this.currentView = 'settings'; - this.forceSftpConfigVisible = true; - if (this.user && !this.user.is_admin) { - this.loadFtpConfig(); - } - this.$nextTick(() => { - const sftpSection = document.getElementById('sftp-config-section'); - if (sftpSection) { - sftpSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - }); + this.showSftpGuideModal = true; return; } @@ -1888,6 +1880,33 @@ handleDragLeave(e) { } }, + ensureSftpConfigSection() { + this.currentView = 'settings'; + this.forceSftpConfigVisible = true; + if (this.user && !this.user.is_admin) { + this.loadFtpConfig(); + } + this.$nextTick(() => { + const sftpSection = document.getElementById('sftp-config-section'); + if (sftpSection) { + sftpSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); + }, + + openSftpGuideModal() { + this.showSftpGuideModal = true; + }, + + closeSftpGuideModal() { + this.showSftpGuideModal = false; + }, + + proceedSftpGuide() { + this.showSftpGuideModal = false; + this.ensureSftpConfigSection(); + }, + // 切换视图并自动刷新数据 switchView(view) { // 如果已经在当前视图，不重复刷新