# WNDS-Client

**Repository Path**: wisterialee/wnds-client

## Basic Information

- **Project Name**: WNDS-Client
- **Description**: WNDS (Wisteria Netdisk System · 紫藤网盘系统) — 基于 RuoYi-Vue 框架二次开发的私有云盘系统。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-09-08
- **Last Updated**: 2026-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, HTML, CSS, JavaScript, scss

## README

<div align="center">
    <img alt="WNDS Logo" src="./assets/logo.png" width="160">
</div>

<h1 align="center">WNDS-Client</h1>

<p align="center">
    Wisteria Netdisk System · 紫藤网盘系统（前端工程）
</p>

<p align="center">
    <a href="README_EN.md">English</a> | <strong>中文</strong>
</p>

---

## 项目简介

**WNDS (Wisteria Netdisk System)** 是一套基于 SpringBoot + Vue3 前后端分离架构的私有云存储解决方案，致力于为个人及小型团队提供安全、高效、便捷的一站式文件资产管理服务。

系统深度整合了现代化的前后端技术栈，着力解决传统文件存储分散、检索困难、传输效率低以及数据安全性难以保障等核心痛点。用户可以轻松实现海量文件的云端上传、下载、分类管理与精细化回收站防误删功能，随时随地访问个人数据资产。

<table>
  <tr>
    <td>名称</td>
    <td>Gitee</td>
    <td>Github</td>
  </tr>
  <tr>  
    <td>WNDS-Server</td>
    <td>https://gitee.com/wisterialee/wnds-server</td>
    <td>https://github.com/Wisteria0712/WNDS-Server</td>
  </tr>
  <tr>
    <td>WNDS-Client</td>
    <td>https://gitee.com/wisterialee/wnds-client</td>
    <td>https://github.com/Wisteria0712/WNDS-Client</td>
  </tr>
</table>

---

## 系统功能

### 网盘核心功能（用户侧）

#### 1. 门户欢迎页

- 现代化 UI 设计，系统品牌 LOGO 展示
- 核心能力动态展示：文件在线预览、智能分类、一键极速分享
- 登录 / 注册快捷入口，已登录用户一键进入网盘

#### 2. 用户账户体系

- **用户登录**：账号 + 密码 + 图片验证码三重校验，支持密码错误 5 次后锁定 10 分钟机制
- **用户注册**：邮箱验证码注册，验证码 15 分钟有效
- **忘记密码**：独立页面 `/forget`，通过绑定邮箱接收验证码 + 重置密码，提供 5 条「收不到验证码」排查建议（核对邮箱、查垃圾箱、等待延迟、检查拦截、更换邮箱）
- **个人中心**：修改个人头像、编辑基本资料、重置登录密码

#### 3. 文件管理中心

- **文件目录树**：支持多级文件夹结构，面包屑导航快速跳转
- **新建文件夹**：在当前目录下快速创建新目录
- **文件上传**：集成 MD5 秒传 + 断点续传 + 批量上传引擎，多文件同时上传，实时进度条显示
- **文件下载**：服务端生成一次性下载码（5 分钟有效），安全高速下载至本地
- **文件重命名**：在线即时修改文件 / 文件夹名称
- **移动文件**：单文件移动 + 批量移动（BatchMoveVo），灵活整理目录结构
- **批量删除**：多选后批量移入回收站
- **智能分类视图**（按 FileCategoryEnums / FileTypeEnums）：
    - 全部：展示所有层级的文件与文件夹
    - 视频：自动聚合 .mp4 / .avi / .mkv 等格式
    - 音频：集中展示 .mp3 / .flac / .wav 等资源
    - 图片：汇集 .jpg / .png / .gif 等，支持缩略图预览
    - 文档：筛选 .pdf / .doc / .xlsx / .txt / 代码等办公文档
    - 其他：归档压缩包及未分类格式

#### 4. 文件在线预览

- **视频预览**：支持 HLS (M3U8) 流媒体在线播放，DPlayer + hls.js，H.265 自动转 H.264 兼容浏览器
- **音频预览**：内置音乐播放器，支持列表播放
- **图片预览**：大图浏览、缩放、切换
- **PDF 预览**：基于 PDF.js / vue3-pdfjs 的在线 PDF 阅读器
- **Excel 预览**：在线查看表格数据（@vue-office/excel）
- **Word / Docx 预览**：在线文档渲染（@vue-office/docx）
- **代码 / 文本预览**：语法高亮展示代码与文本文件

#### 5. 文件分享功能

- **灵活有效期**：按 ShareValidTypeEnums 支持 1 天 / 7 天 / 30 天 / 永久有效 4 种选择
- **安全提取码**：自定义 5 位提取码或一键随机生成
- **一键复制**：自动生成访问链接、提取码，使用 clipboard.js 复制到剪贴板
- **提取码校验页**（`/webShareCheck/:shareId`）：独立页面，分享链接头 + 分享者信息卡 + 提取码输入 + 过期错误页
- **匿名分享浏览页**（`/webShare/:shareId`）：独立头部 LOGO + 分享者信息栏（头像、昵称、分享时间）+ 面包屑 + 文件列表（含多选下载）+
  嵌入 FilePreview 在线预览

#### 6. 分享管理中心

- 查看全部历史分享记录（文件名、提取码、有效期、失效时间、分享时间）
- 支持按有效期字典 / 分享时间双条件筛选
- 链接状态实时监控（正常 / 已过期 / 已取消），字典标签渲染
- **分享信息弹窗**：一键查看分享链接 + 提取码，一键复制
- 单条取消分享 / 批量取消分享（链接立即失效）

#### 7. 回收站机制

- 删除文件自动移入回收站，默认保留 **30 天**
- **有效天数列**：剩余天数 ≤10 天高亮红色警示（warning-text 样式）
- 10 种文件专用图标（文件夹 / 视频 / 音频 / 图片 / PDF / DOC / EXCEL / TXT / CODE / ZIP / OTHER）
- 顶部操作区：还原 / 批量彻底删除 / 清空回收站 3 个按钮
- **文件还原**：一键恢复至删除前的原始路径（单条 / BatchRestoreVo 批量）
- **彻底删除**：物理销毁文件并释放空间（BatchDeleteVo 二次确认，不可恢复）
- **清空回收站**：一键清空所有内容（二次确认）

#### 8. 存储空间扩容

- 实时查看个人存储空间使用情况（已用 / 剩余 / 总容量）
- **兑换码扩容**：输入有效兑换码一键升级存储空间

#### 9. 通知公告

- 查看系统发布的各类公告与通知消息
- 未读 / 已读状态标识

---

### 系统管理功能（管理员侧）

#### 1. 用户管理

- 系统全量用户查询与管理
- 重置用户密码、禁用 / 启用账号
- 删除无效或违规用户账户

#### 2. 邮箱验证码管理

- 查看每条验证码的生成时间、接收邮箱、使用状态
- 支持导出全部验证码记录 Excel

#### 3. 文件管理（全局）

- 支持按 用户ID / 文件名称 / 文件类型（文件夹/文件）/ 文件分类（10 种类型）4 条件组合筛选
- 查看系统内所有用户上传的文件信息
- 删除标记列：显示正常(2) / 回收站(1) / 彻底删除(-1)，字典标签渲染
- 一键导出文件管理 Excel（v-hasPermi `file:file:export`）

#### 4. 空间管理

- 查看全部用户的存储空间使用详情
- 动态分配 / 调整用户存储容量配额
- 导出空间使用统计数据

#### 5. 兑换码管理

- 新增兑换码（可指定容量大小、数量）
- 查看兑换码总览：使用状态、使用者、生成 / 使用时间
- 单条删除 / 批量删除兑换码
- 导出兑换码记录

#### 6. 通知公告管理

- 新增、编辑、删除系统公告
- 控制公告发布状态（正常 / 关闭）
- 批量删除操作

---

### 若依框架基础功能（简化说明）

| 模块       | 功能简述                                                           |
|----------|----------------------------------------------------------------|
| **角色管理** | 角色菜单权限分配、数据范围权限划分                                              |
| **菜单管理** | 系统菜单配置、操作权限与按钮权限标识                                             |
| **部门管理** | 系统组织机构（公司、部门、小组）树状结构                                           |
| **岗位管理** | 系统用户所属职务配置                                                     |
| **字典管理** | 维护系统中固定类型数据（valid_type / folder_type / file_type / del_flag 等） |
| **参数设置** | 系统动态参数配置管理                                                     |
| **操作日志** | 系统正常操作与异常信息日志记录查询                                              |
| **登录日志** | 用户登录日志查询（含异常登录）                                                |
| **在线用户** | 当前系统活跃用户状态实时监控                                                 |
| **定时任务** | 在线增删改任务调度，含执行日志（系统内置回收站自动清理、过期分享清理、新年祝福邮件等任务）                  |
| **服务监控** | CPU、内存、磁盘、堆栈等系统资源实时监视                                          |
| **缓存监控** | Redis 缓存信息查询与命令统计                                              |
| **代码生成** | 一键生成前后端 CRUD 代码（Java / Vue / XML / SQL）                        |
| **系统接口** | Swagger 自动生成的 API 接口文档                                         |

---

## 技术栈

### 前端技术栈

| 技术                                          | 版本      | 说明                    |
|---------------------------------------------|---------|-----------------------|
| **Vue**                                     | 3.4.31  | 渐进式 JavaScript 框架     |
| **Vite**                                    | 5.3.2   | 下一代前端构建工具             |
| **Element Plus**                            | 2.7.6   | 基于 Vue 3 的企业级组件库      |
| **Pinia**                                   | 2.1.7   | Vue 官方状态管理库           |
| **Vue Router**                              | 4.4.0   | Vue.js 官方路由管理器        |
| **Axios**                                   | 0.28.1  | Promise 风格 HTTP 网络请求库 |
| **ECharts**                                 | 5.5.1   | 数据可视化图表库              |
| **@vue-office/docx**                        | ^1.6.3  | Docx 文档在线预览           |
| **@vue-office/excel**                       | ^1.7.14 | Excel 表格在线预览          |
| **@vue-office/pdf**                         | ^2.0.10 | PDF 文档在线预览            |
| **pdfjs-dist / vue-pdf-embed / vue3-pdfjs** | -       | PDF 渲染增强（字体、分页、缩放）    |
| **DPlayer**                                 | ^1.27.1 | 视频播放器（支持弹幕、HLS 流媒体）   |
| **hls.min.js**                              | -       | HLS (M3U8) 流媒体播放支持    |
| **vue-audio-better**                        | ^3.0.1  | 音频播放器组件（列表 / 进度控制）    |
| **vue-cropper**                             | 1.1.1   | 头像 / 图片裁剪上传组件         |
| **spark-md5**                               | ^3.0.2  | 文件 MD5 计算（秒传判定）       |
| **clipboard**                               | -       | 分享链接 / 提取码一键复制到剪贴板    |
| **file-saver**                              | 2.0.5   | 浏览器文件下载保存             |
| **jsencrypt**                               | 3.3.2   | RSA 前端密码加密传输          |
| **js-cookie**                               | 3.0.5   | 浏览器 Cookie 轻量操作       |
| **NProgress**                               | 0.2.0   | 页面切换顶部进度条             |
| **Fuse.js**                                 | 6.6.2   | 前端模糊搜索                |
| **SortableJS / Vuedraggable**               | -       | 列表拖拽排序                |
| **@vueuse/core**                            | 10.11.0 | Vue 组合式 API 工具集       |
| **Sass**                                    | 1.77.5  | CSS 预处理器              |

---

## 快速开始

### 环境要求

- Node.js >= 16.x
- 包管理器：推荐 pnpm / npm / yarn

### 安装与运行

```bash
# 进入项目目录
cd WNDS-Client

# 安装依赖
pnpm install
# 或使用 npm
npm install
# 或使用 yarn
yarn install

# 启动开发服务器（默认端口参考 vite.config.js）
pnpm dev
# 或
npm run dev

# 构建生产环境
pnpm build:prod
# 或
npm run build:prod

# 构建测试环境
pnpm build:stage

# 本地预览构建结果
pnpm preview
```

### 默认账号

| 角色  | 用户名   | 密码       |
|-----|-------|----------|
| 管理员 | admin | admin123 |

> 提示：后端服务默认运行在 4399 端口，前端代理配置请参考 `.env.development` 与 `vite.config.js`。

---

## 重要说明

### 关于 FFmpeg

本系统的视频转码、切片（M3U8）、封面提取等功能由后端通过 **JavaCV (FFmpeg)** 实现。前端视频预览依赖后端转码生成的 HLS
流，DPlayer + hls.js 组合播放。确保后端项目中 `javacv-platform` 依赖正确加载，系统无需单独安装 FFmpeg 命令行工具（JavaCV
已内置全平台二进制）。

### 配套项目

- 后端仓库：`../WNDS-Server`
- 数据库脚本：位于后端项目 `sql/wnds.sql`

---

## 系统效果图

<table>
    <tr>
        <td><img src="./assets/图片1.png"/></td>
        <td><img src="./assets/图片2.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片3.png"/></td>
        <td><img src="./assets/图片4.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片5.png"/></td>
        <td><img src="./assets/图片6.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片7.png"/></td>
        <td><img src="./assets/图片8.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片9.png"/></td>
        <td><img src="./assets/图片10.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片11.png"/></td>
        <td><img src="./assets/图片12.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片13.png"/></td>
        <td><img src="./assets/图片14.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片15.png"/></td>
        <td><img src="./assets/图片16.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片17.png"/></td>
        <td><img src="./assets/图片18.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片19.png"/></td>
        <td><img src="./assets/图片20.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片21.png"/></td>
        <td><img src="./assets/图片22.png"/></td>
    </tr>
    <tr>
        <td><img src="./assets/图片23.png"/></td>
        <td><img src="./assets/图片24.png"/></td>
    </tr>
</table>

---

## 关于若依框架

本项目基于 **若依 (RuoYi) v3.8.9** 开源快速开发框架修改而来：

- 前端基础框架：RuoYi-Vue3（Vue3 + Vite + Element Plus）
- 后端基础框架：RuoYi-Vue（Spring Boot + Spring Security + MyBatis）
- 框架官网：[http://www.ruoyi.vip](http://www.ruoyi.vip)
- 开源地址：[https://gitee.com/y_project/RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue)

感谢若依团队提供如此优秀的开源框架！