logo
2
3
Login

云网盘前端界面

这是一个基于 FastAPI 后端的云网盘前端界面,提供了美观的用户界面来管理文件和文件夹。

功能特性

  • 🗂️ 文件夹管理:创建、删除、浏览文件夹
  • 📁 文件管理:上传、下载、删除文件
  • 🎨 美观界面:现代化的 UI 设计,响应式布局
  • 📱 拖拽上传:支持拖拽文件到上传区域
  • 🔄 实时更新:操作后自动刷新列表
  • 📊 文件信息:显示文件大小、创建时间等信息

界面特点

设计风格

  • 使用 Tailwind CSS 框架,界面简洁现代
  • 采用卡片式布局,视觉层次清晰
  • 支持悬停效果和过渡动画
  • 响应式设计,适配不同屏幕尺寸

交互体验

  • 直观的导航面包屑
  • 模态框确认操作,防止误删
  • 加载状态指示器
  • 错误提示和用户反馈

使用说明

文件夹操作

  1. 创建文件夹:点击"新建文件夹"按钮,输入名称后确认
  2. 进入文件夹:点击文件夹卡片进入查看文件
  3. 删除文件夹:点击文件夹卡片右上角的删除按钮
  4. 返回根目录:点击面包屑中的"根目录"

文件操作

  1. 上传文件
    • 先进入一个文件夹
    • 点击"上传文件"按钮或拖拽文件到上传区域
    • 支持单个文件上传,最大50GB
  2. 下载文件:点击文件右侧的下载图标
  3. 分享链接:点击文件右侧的分享图标,获取10小时有效的下载链接
  4. 删除文件:点击文件右侧的删除图标

注意事项

  • 只支持在根目录下创建一级目录
  • 不支持在目录下再创建子目录
  • 每个文件夹最多支持50个文件
  • 文件上传需要先选择目标文件夹

技术栈

  • 前端:HTML5, CSS3, JavaScript (ES6+)
  • 样式框架:Tailwind CSS
  • 图标库:Font Awesome
  • 后端API:FastAPI (Python)

文件结构

app/ ├── main.py # FastAPI 后端服务 ├── static/ # 静态文件目录 │ ├── index.html # 主页面 │ └── script.js # JavaScript 逻辑 └── README.md # 说明文档

启动服务

确保已安装所需的 Python 依赖:

pip install fastapi uvicorn httpx

启动服务:

python app/main.py

或者使用 uvicorn:

uvicorn app.main:app --host 0.0.0.0 --port 8080

访问 http://localhost:8080 即可使用网盘界面。

API 接口

前端使用以下后端接口:

  • GET /folders - 获取文件夹列表
  • POST /folders - 创建文件夹
  • DELETE /folders/{release_id} - 删除文件夹
  • GET /folders/{release_id}/files - 获取文件列表
  • POST /folders/{release_id}/files - 上传文件
  • DELETE /folders/{release_id}/files/{asset_id} - 删除文件
  • GET /folders/{release_id}/files/{filename}/download - 获取下载链接(支持share参数)

环境配置

确保设置了以下环境变量:

  • CNB_BASE_URL - CNB API 基础URL
  • CNB_REPO_SLUG - 仓库标识
  • CNB_TOKEN - 访问令牌

浏览器兼容性

支持现代浏览器:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

About

No description, topics, or website provided.
Language
JavaScript40.2%
Python22.3%
HTML14.2%
Markdown8.4%
Others14.9%