FileMaster Frontend
一款使用React+Redux+TS+Vite+ material-ui搭建的文件管理系统，其中用到react-image-editor、axios、react-beautiful-dnd、react-dropzone、clsx、redux-logger等依赖库，还使用了eslint+prettier+stylelint规范代码和husky+commitlint+lint-staged规范commit
Overview
This product presents an intuitive and versatile file management system designed to enhance user experience through various functionalities. With the ability to toggle between folder tree and grid views, users can easily navigate through their files and folders, making file organization seamless. The system supports drag-and-drop operations, which simplifies the process of moving files, while a comprehensive right-click menu provides essential management tools at users' fingertips.
It also boasts features that support multi-file selection and sorting by various criteria, ensuring that you can quickly find and manage your content. The detailed information display and powerful image editing functions further enhance usability, catering to both casual users and professionals alike.
Features
- Expandable Folder Views: Choose between a folder tree or grid view for a flexible file organization experience.
- Drag and Drop Operations: Move files and folders effortlessly with simple drag-and-drop functionality that opens folders automatically.
- Comprehensive Right-Click Menu: Efficiently manage files and folders with options for operations like copy, paste, delete, and rename.
- Multi-Select Options: Easily select multiple files with features like select all, deselect all, and reverse selection for quick management.
- Sorting Capabilities: Organize files and folders by date, size, or name, with both ascending and descending sorting options available.
- File and Folder Details: Access in-depth information about your files and folders, ensuring you have all the context you need at a glance.
- Image Editing and Preview: Edit images within the system and preview changes without needing a separate application.
- Customizable Themes and Window Size: Tailor the interface to your preferences for a more personalized experience.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.