前端
技术栈说明
Free FS 前端使用的核心技术和框架。
核心框架
- React 19.x - UI 框架
- TypeScript 5.x - 类型安全
- Vite 6.x - 构建工具
- React Router 6.x - 路由管理
- Zustand 5.x - 状态管理
UI 与样式
- shadcn/ui - 基于 Radix UI 的组件库
- Tailwind CSS 3.x - 样式框架
工具库
- Axios 1.x - HTTP 客户端
项目结构
free-fs-frontend/
├── public/ # 静态资源
├── src/
│ ├── api/ # API 接口定义
│ ├── components/ # 公共组件
│ │ ├── layout/ # 布局组件
│ │ └── ui/ # shadcn/ui 组件
│ ├── contexts/ # React Context
│ ├── hooks/ # 自定义 Hooks
│ ├── lib/ # 工具库
│ ├── pages/ # 页面组件
│ │ ├── files/ # 文件管理
│ │ ├── login/ # 登录注册
│ │ ├── settings/ # 系统设置
│ │ ├── share/ # 文件分享
│ │ ├── storage/ # 存储管理
│ │ └── transfer/ # 传输管理
│ ├── router/ # 路由配置
│ ├── services/ # 业务服务
│ ├── store/ # Zustand 状态管理
│ ├── styles/ # 全局样式
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ ├── App.tsx # 根组件
│ └── main.tsx # 应用入口
├── .env.example # 环境变量示例
└── vite.config.ts # Vite 配置主要功能
- 📂 文件管理:上传、下载、预览、重命名、移动、删除
- 🗂️ 文件夹管理:创建、浏览、面包屑导航
- 🔍 文件搜索:快速查找文件
- ⭐ 文件收藏:收藏常用文件
- 🗑️ 回收站:文件恢复和彻底删除
- 🔗 文件分享:生成分享链接,支持提取码和有效期
- 📊 存储管理:多存储平台配置
- 📈 传输管理:上传下载任务管理
- 🎨 主题切换:支持亮色/暗色模式
- 👤 用户管理:个人信息、账号设置