136d45dee79f0ad497a0f6c2405eabb76d16d6d7
功能描述:
- 在分享所有文件(目录分享)时,点击文件图标可以放大查看
- 显示效果与分享单个文件时相同(居中大图标显示)
- 左上角显示"返回列表"按钮,点击可返回文件列表
- 单个文件分享时不显示返回按钮(避免混淆)
实现内容:
1. 添加状态管理
- viewingFile: 当前正在查看的文件(null表示在列表视图)
2. 新增方法
- handleFileClick(file): 处理文件点击
* 图片/视频/音频 → 打开媒体预览(保持原有行为)
* 其他文件 → 显示详情页面
- viewFileDetail(file): 设置viewingFile显示详情
- backToList(): 清除viewingFile返回列表
3. 修改HTML模板
- 标题添加返回按钮(条件:viewingFile存在且不是单文件分享)
- 单文件显示条件:viewingFile || files.length === 1
- 网格/列表视图条件:添加 !viewingFile 限制
- 单文件显示内容:使用 viewingFile || files[0]
4. 防止bug设计
- shareInfo.share_type !== 'file' 确保单文件分享不显示返回按钮
- handleFileClick 区分媒体文件和普通文件
- viewingFile 为null时正常显示文件列表
用户体验提升:
✅ 点击文件图标即可放大查看详情
✅ 查看体验与单文件分享一致
✅ 返回按钮清晰明了
✅ 媒体文件仍然打开预览
✅ 单文件分享不显示返回按钮(避免混淆)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
玩玩云 - Web SFTP 文件管理系统
一个基于Web的SFTP文件管理系统,提供文件上传、下载、分享等功能,支持多用户管理。
📋 项目简介
玩玩云是一个现代化的Web文件管理系统,让您可以通过浏览器管理SFTP服务器上的文件。系统支持文件的上传、下载、重命名、删除、分享等操作,并提供桌面端上传工具,方便快速上传大文件。
主要特性
- ✅ 文件管理 - 浏览、上传、下载、重命名、删除文件
- ✅ 文件分享 - 生成分享链接,支持密码保护和有效期设置
- ✅ 多用户系统 - 用户注册、登录、权限管理
- ✅ 桌面上传工具 - 拖拽上传,实时显示进度
- ✅ 流式下载 - 服务器零存储,纯中转下载
- ✅ 管理员功能 - 用户管理、文件审查、系统设置
- ✅ Docker部署 - 一键部署,易于维护
🛠️ 技术栈
前端
- Vue.js 3 - 渐进式JavaScript框架
- Axios - HTTP请求库
- Font Awesome - 图标库
后端
- Node.js 20 - JavaScript运行时
- Express - Web应用框架
- better-sqlite3 - 轻量级数据库
- ssh2-sftp-client - SFTP客户端
- JWT - 用户认证
部署
- Docker - 容器化
- Docker Compose - 容器编排
- Nginx - 反向代理
🚀 快速开始
环境要求
- Docker: 20.10.0+
- Docker Compose: 2.0.0+
- 操作系统: Linux (Ubuntu 20.04+ / Debian 10+ / CentOS 7+)
- 内存: 最低 1GB RAM(推荐 2GB+)
方法1: 一键部署(推荐)
# 1. 上传或克隆项目
cd /var/www
# 将项目文件上传到此目录
# 2. 进入项目目录
cd ftp-web-manager
# 3. 一键部署
bash deploy.sh
deploy.sh脚本会自动:
- 检查Docker和Docker Compose环境
- 创建必要的目录
- 构建并启动所有服务
- 显示访问信息和默认账号
方法2: 手动部署
# 1. 进入项目目录
cd /var/www/ftp-web-manager
# 2. 创建必要的目录
mkdir -p certbot/conf certbot/www backend/uploads
# 3. 构建并启动服务
docker-compose up --build -d
# 4. 查看日志
docker-compose logs -f
访问系统
部署完成后:
- 前端地址: http://服务器IP:8080
- 后端API: http://服务器IP:40001
- 默认管理员账号:
- 用户名:
admin - 密码:
admin123 - ⚠️ 请立即登录并修改密码!
- 用户名:
📖 使用教程
配置SFTP服务器
首次使用需要配置SFTP连接信息:
-
登录后点击右上角用户菜单
-
选择"设置"
-
填写SFTP配置:
- SFTP主机: 您的SFTP服务器IP
- SFTP端口: 默认22
- SFTP用户名: SFTP账号
- SFTP密码: SFTP密码
- HTTP下载基础URL(可选): 如果有HTTP直接下载地址
-
点击"保存配置"
文件管理
- 浏览文件: 点击文件夹图标进入子目录
- 上传文件: 点击"上传文件"按钮选择本地文件
- 下载文件: 点击文件行的下载按钮
- 重命名: 点击"重命名"按钮修改文件名
- 删除: 点击"删除"按钮删除文件
文件分享
- 点击文件行的"分享"按钮
- 设置分享选项:
- 分享密码(可选)
- 有效期(可选)
- 复制分享链接发送给他人
🔧 维护操作
查看日志
# 查看所有日志
docker-compose logs -f
# 查看后端日志
docker-compose logs -f backend
重启服务
# 重启所有容器
docker-compose restart
# 重启指定容器
docker-compose restart backend
停止服务
docker-compose down
备份数据
# 备份数据库
cp backend/ftp-manager.db backup/ftp-manager.db.$(date +%Y%m%d)
# 备份整个项目
tar -czf backup/wanwanyun-$(date +%Y%m%d).tar.gz .
更新代码
# 拉取最新代码
git pull
# 重新构建并重启
docker-compose up --build -d
🔐 安全建议
- 修改默认密码: 首次登录后立即修改admin密码
- 使用HTTPS: 配置SSL证书,使用HTTPS访问
- 修改JWT密钥: 在backend/.env文件中设置随机的JWT_SECRET
- 定期备份: 定期备份数据库文件
- 限制端口: 不要对外暴露40001端口,只通过Nginx访问
❓ 常见问题
Docker容器启动失败
# 查看日志
docker-compose logs backend
# 重新构建
docker-compose down
docker-compose up --build -d
上传失败提示权限错误
检查SFTP服务器目录权限,确保上传目录有写权限。
分享链接无法访问
检查nginx配置和防火墙设置,确保端口8080可访问。
📁 项目结构
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 # 本文件
🤝 贡献指南
欢迎提交Issue和Pull Request!
📄 许可证
本项目仅供学习和个人使用。
玩玩云 - 让文件管理更简单 ☁️
Description
Languages
JavaScript
74.5%
HTML
14.9%
Shell
10.5%