📝 重写 README 文档 & ✨ 优化前端功能

文档更新：
- 完全重写 README.md，更加详细和专业
- 添加一键部署命令（curl 和 wget 两种方式）
- 详细介绍双存储模式、邮件系统、安全防护等特性
- 添加完整的使用指南和常见问题解答
- 更新项目结构和技术栈说明
- 添加版本更新日志

前端优化：
- 优化存储管理界面交互
- 改进文件管理功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

README.md

@@ -1,244 +1,452 @@
-# 玩玩云 - Web SFTP 文件管理系统
+# 玩玩云 - 现代化云存储管理平台
 
-> 一个基于Web的SFTP文件管理系统，提供文件上传、下载、分享等功能，支持多用户管理。
+> 一个功能完整的云存储管理系统，支持本地存储和SFTP存储，提供文件管理、分享、邮件验证等企业级功能。
 
-## 📋 项目简介
+<div align="center">
 
-玩玩云是一个现代化的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)
 
-### 主要特性
+</div>
 
-- ✅ **文件管理** - 浏览、上传、下载、重命名、删除文件
-- ✅ **文件分享** - 生成分享链接，支持密码保护和有效期设置
-- ✅ **多用户系统** - 用户注册、登录、权限管理
-- ✅ **桌面上传工具** - 拖拽上传，实时显示进度
-- ✅ **流式下载** - 服务器零存储，纯中转下载
-- ✅ **管理员功能** - 用户管理、文件审查、系统设置
-- ✅ **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
+
+## 🙏 致谢
+
+感谢所有开源项目的贡献者！
+
 ---
 
-**玩玩云** - 让文件管理更简单 ☁️
+**玩玩云** - 让云存储管理更简单 ☁️
+
+<div align="center">
+
+Made with ❤️ by 玩玩云团队
+
+</div>

frontend/app.html

@@ -1102,6 +1102,22 @@
       </div>
     </div>
 
+    <!-- SFTP 配置引导弹窗 -->
+    <div v-if="showSftpGuideModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showSftpGuideModal')">
+      <div class="modal-content" @click.stop>
+        <h3 style="margin-bottom: 10px;">切换到 SFTP 存储</h3>
+        <p style="color: #555; line-height: 1.6; margin-bottom: 16px;">
+          需要先填写 SFTP 连接信息才能使用 SFTP 存储。是否前往配置？
+        </p>
+        <div style="display: flex; gap: 10px; justify-content: flex-end;">
+          <button class="btn btn-secondary" @click="closeSftpGuideModal">稍后再说</button>
+          <button class="btn btn-primary" @click="proceedSftpGuide">
+            <i class="fas fa-tools"></i> 去配置 SFTP
+          </button>
+        </div>
+      </div>
+    </div>
+
         <!-- 设置视图 -->
     <div v-if="isLoggedIn && currentView === 'settings'" class="main-container">
       <div class="card">

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) {
       // 如果已经在当前视图，不重复刷新