JCS Frontend - 云际网盘前端

基于 Vue 3 + TypeScript + Pinia + Element Plus + Axios 的云际网盘前端项目。

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - 类型安全的 JavaScript 超集
• Pinia - Vue 官方状态管理库
• Element Plus - Vue 3 组件库
• Axios - HTTP 客户端
• Sass - CSS 预处理器
• Vue Router - Vue 路由管理
• Vite - 下一代前端构建工具

项目结构

src/
├── api/                    # 接口请求配置
│   ├── index.ts           # Axios 配置与拦截器
│   └── storage.ts         # 存储服务 API 接口
├── components/             # 公共组件
│   └── layout/            # 布局组件
│       └── index.vue      # 主布局（侧边栏、顶部栏）
├── router/                 # 路由配置
│   └── index.ts          # 路由定义与守卫
├── store/                  # 状态管理
│   ├── index.ts          # 主 store 导出
│   └── storage.ts        # 存储状态管理
├── styles/                 # 样式文件
│   └── index.scss        # 全局样式与变量
├── views/                  # 页面组件
│   ├── login/            # 登录页面
│   ├── dashboard/        # 仪表盘页面
│   ├── files/            # 文件管理页面
│   │   ├── index.vue     # 全部文件
│   │   ├── recent.vue    # 最近使用
│   │   ├── favorites.vue # 收藏夹
│   │   └── shared.vue    # 我的分享
│   ├── drives/            # 云盘绑定页面
│   ├── transfers/        # 传输任务页面
│   └── sync/             # 同步备份页面
├── App.vue                # 根组件
└── main.ts                # 应用入口

API 接口

基础配置

• 接口地址: https://jcs.jointcloud.net:32200
• 认证方式: Bearer Token（存储在 localStorage）
• 请求拦截器: 自动添加 Authorization 头
• 响应拦截器: 401 时自动跳转登录页

存储管理接口 (StorageService)

接口	方法	路径	说明
查询存储列表	GET	/storage/list	支持按 ID 或名称筛选
创建存储	POST	/storage/create	创建新的存储配置
更新存储	POST	/storage/update	更新存储配置
删除存储	POST	/storage/delete	删除存储配置
测试存储	POST	/storage/test	测试存储连接
下载包到存储	POST	/storage/downloadPackage	下载包到存储
创建包	POST	/storage/createPackage	从存储创建包
下载对象	POST	/storage/downloadObject	下载对象到存储
上传对象	POST	/storage/uploadObject	从存储上传对象

原生存储接口 (StorageNativeService)

接口	方法	路径	说明
获取文件信息	GET	/storage/native/info	获取文件或目录信息
列出目录	GET	/storage/native/list	列出目录内容
上传文件	POST	/storage/native/upload	上传文件到存储
下载文件	GET	/storage/native/download	下载文件（支持断点续传）
创建目录	POST	/storage/native/mkdir	创建目录
删除文件	POST	/storage/native/delete	删除文件或目录

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产构建

npm run preview

环境变量

在项目根目录创建 .env 文件配置环境变量：

VITE_API_BASE_URL=https://jcs.jointcloud.net:32200

路由守卫

• /login - 登录页（无需认证）
• 其他页面需要登录，未登录自动跳转到登录页
• 已登录用户访问登录页自动跳转到仪表盘

开发规范

• 使用 TypeScript 严格模式
• 组件使用 Composition API (<script setup lang="ts">)
• 样式使用 Scoped CSS 和 SCSS
• 路由使用懒加载
• API 接口统一在 src/api/ 目录管理
• 状态管理统一在 src/store/ 目录管理

页面功能

登录页

• 用户名/密码登录
• 记住我功能
• 其他登录方式（阿里云、微信）
• 登录成功自动跳转仪表盘

仪表盘

• 统计卡片（文件数、存储量、同步任务、云盘绑定）
• 最近文件列表
• 传输速度图表
• 存储分布图表

文件管理

• Tab 切换（原始存储 / 云际存储）
• 文件列表展示
• 云盘筛选
• 上传文件 / 新建文件夹
• 存储桶管理

云盘绑定

• 云厂商选择（本地、阿里云、腾讯云、华为云、百度云、Amazon S3）
• AK/SK 和 Token 认证
• 连接测试
• 存储 CRUD 操作

传输任务

• 任务统计卡片
• 传输速度监控
• 上传/下载/同步任务列表
• 批量操作

同步备份

• 同步任务列表
• 双向/单向同步配置
• 同步日志

许可证

MIT