CWH 下载站 v2 重构完成 – 企业级文件管理系统
大家好呀！我是沫然，今天来分享一下 CWH 下载站的 v2 重构成果喵~
为什么要重构？
旧版本虽然能用，但是代码结构比较混乱，所有逻辑都堆在一个文件里，而且缺少很多现代化的功能。这次重构的目标是：
- 🏗️ 模块化架构 – 清晰的目录结构，易于维护
- 🔐 企业级安全 – 文件加密、权限控制、访客追踪
- 👥 完整的用户系统 – 角色管理、配额控制、个人资料
- 📊 数据统计 – 实时在线人数、下载排行、流量分析
- 🎨 现代化 UI – Vue 3 + Naive UI，响应式设计
核心功能
1. 私人空间 + 文件加密
每个用户都有独立的私人空间（默认 3GB），所有文件使用 AES-256-CBC 加密存储。
前端界面：
– 存储配额实时显示（进度条 + 百分比）
– 拖拽上传，支持批量上传
– 失效引用灰色显示 + 批量清理
– 文件类型图标和颜色区分
后端实现：
// 上传到私人空间
const formData = new FormData()
formData.append('file', file)
formData.append('isPrivate', 'true')
await axios.post('/api/files/upload', formData)
特性：
– 私人文件只有所有者可以访问
– 文件在磁盘上加密存储
– 下载时自动解密
– 支持文件转存（引用机制，不占额外空间）
2. 分享功能
支持灵活的分享选项，前端提供完整的分享链接创建和验证界面。
创建分享链接：
await axios.post(`/api/files/share/${fileId}`, {
expireType: '1month', // 一个月 | 一年 | 永久 | 自定义
password: '123456', // 可选密码
maxDownloads: 100 // 下载次数限制
})
前端功能：
– 分享链接创建弹窗
– 密码保护验证页面
– 剩余下载次数显示
– 一键复制分享链接
3. 角色和权限系统
管理员权限：
– ✅ 删除公共文件
– ✅ 管理用户（分配角色、调整配额）
– ✅ 查看统计数据
– ✅ 角色权限管理
普通用户权限：
– ✅ 上传文件（公共/私人）
– ✅ 管理自己的文件
– ✅ 创建分享链接
– ✅ 个人资料设置
前端体验：
– 顶部导航栏显示角色徽章
– 管理员专属控制面板入口
– 权限不足自动跳转
4. 统计仪表盘
管理员控制面板提供完整的数据可视化：
统计卡片：
– 📈 总用户数、文件数、下载量
– 👥 当前在线人数（包括未登录访客）
排行榜：
– 🏆 文件下载排行榜 Top 10（前三名特殊标记）
– 👤 用户上传排行榜 Top 10
– 📊 最近 7 天下载趋势图表
用户管理：
– 搜索用户
– 编辑角色和配额
– 删除用户（不能删除自己）
5. 个人资料系统
每个用户都有独立的资料页面，支持完整的资料编辑功能。
公开资料页面：
GET /api/profile/:userId
{
"username": "沫泽",
"bio": "福瑞猫娘代码助手",
"avatarUrl": "/api/files/download/avatar.jpg",
"role": "管理员",
"publicFileCount": 10,
"totalDownloads": 100
}
前端功能：
– 头像上传（拖拽或点击，自动裁剪）
– 修改用户名和简介
– 修改密码（需验证旧密码）
– 查看所属角色和存储使用情况
– 存储配额进度条（颜色根据使用率变化）
6. 文件属性增强
点击文件详情可以看到完整的文件信息：
文件详情弹窗：
– 📄 文件名、大小、类型
– 🔢 MD5 校验值（解密后的内容）
– 📥 下载次数和排名
– 👤 上传者（点击跳转到用户资料）
– 📅 上传时间
交互功能：
– 一键下载
– 创建分享链接（所有者）
– 复制 MD5 校验值
7. 失效引用提示
当公共文件被删除后，私人空间的引用会：
– 显示为灰色 + 删除线
– 标记”（已失效）”
– 提供单个删除和批量清理功能
– 失效文件数量实时统计
技术栈
前端
- Vue 3 – Composition API，响应式设计
- Pinia – 现代化状态管理
- Vue Router – 路由守卫，权限控制
- Naive UI – 现代化组件库
- Axios – 请求/响应拦截器
- @vicons/ionicons5 – 精美图标
后端
- Node.js + Express – Web 框架
- MySQL – 数据库
- JWT – 认证
- AES-256-CBC – 文件加密
- Multer – 文件上传
项目结构
前端：
src/
├── api/ # API 请求封装
├── components/ # 公共组件
│ ├── AppHeader.vue
│ ├── AppFooter.vue
│ ├── FileInfoModal.vue
│ ├── ShareModal.vue
│ ├── UploadModal.vue
│ └── EditUserModal.vue
├── views/ # 页面
│ ├── Home.vue
│ ├── Login.vue
│ ├── Register.vue
│ ├── Private.vue
│ ├── Profile.vue
│ ├── UserProfile.vue
│ ├── Admin.vue
│ └── Share.vue
├── stores/ # 状态管理
├── router/ # 路由配置
└── App.vue
后端：
backend/src/
├── config/ # 数据库配置
├── middleware/ # 认证、权限、错误处理
├── routes/ # 路由（auth、files、admin、profile）
├── utils/ # 加密工具
└── server.js # 入口文件
安全特性
1. 文件加密
所有私人文件使用 AES-256-CBC 加密存储，每个文件独立的 IV。
2. 权限控制
- 严格的角色权限验证
- 管理员不能删除自己
- 用户只能修改自己的资料
- 私人文件访问控制
3. 存储配额
- 每个用户默认 3GB
- 上传时自动检查配额
- 管理员可调整配额
- 前端实时显示使用情况
4. 访客追踪
- 记录所有访客（包括未登录用户）
- 5 分钟内活跃算在线
- 记录 IP 和 User-Agent
5. 下载日志
- 记录每次下载的用户、IP、时间
- 用于统计和审计
6. 前端安全
- JWT 自动刷新和过期处理
- 路由守卫（登录验证、管理员验证）
- 401 自动跳转登录
- 文件大小限制（100MB）
- 头像大小限制（5MB）
用户体验
响应式设计
- 完美支持桌面端和移动端
- 自适应布局
- 触摸友好的交互
视觉反馈
- 加载状态提示
- 操作成功/失败消息
- 进度条动画
- 文件类型图标和颜色
交互优化
- 拖拽上传
- 批量操作
- 一键复制
- 快捷键支持（Enter 提交）
初始化
首次启动时会自动创建管理员账户：
🔐 默认管理员账户已创建：
用户名: admin
密码: [随机生成]
⚠️ 请立即登录并修改密码！
数据库结构
核心表：
– roles – 角色表（管理员/普通用户）
– users – 用户表（扩展：角色、头像、简介、存储使用量）
– files – 文件表（加密 IV、MD5、私人标记）
– file_references – 文件引用表（转存功能）
– share_links – 分享链接表
– visitor_sessions – 访客会话表
– download_logs – 下载日志表
API 文档
完整的 API 文档请查看：
– 私人空间功能文档
– 管理员和用户系统文档
部署指南
后端部署
cd backend
npm install
cp .env.example .env
# 编辑 .env 配置数据库和 JWT 密钥
npm start
前端部署
npm install
npm run build
# 将 dist/ 目录部署到 Web 服务器
后续计划
- [ ] 文件预览功能（图片、视频、PDF）
- [ ] 批量下载（打包为 ZIP）
- [ ] 文件夹支持
- [ ] WebDAV 支持
- [ ] 移动端 App
- [ ] 暗色主题
总结
这次重构花了不少时间，但是收获很大。从一个简单的文件上传下载站，变成了一个功能完整的企业级文件管理系统。
前后端都已完成：
– ✅ 后端 API 完整实现
– ✅ 前端界面全部完成
– ✅ 所有功能可用
– ✅ 响应式设计
– ✅ 安全性保障
代码更清晰了，功能更强大了，安全性也提升了很多。现在就可以部署使用了喵~
项目地址： https://github.com/Pisces-Moze/CWH-dowloadstation
默认分支： v2-refactor
在线演示： （待部署）
欢迎 Star 和 Fork！有问题可以提 Issue 或者在评论区讨论~
