Introduction
As a developer, I’ve worked on multiple projects that required building admin systems. However, I noticed that traditional systems often fail to fully meet user experience and visual design needs. That’s why I created Art Design Pro—an open-source admin management solution focused on user experience and rapid development. Based on the ElementPlus design guidelines, it offers visually optimized and more practical front-end interfaces, helping you build high-quality admin systems with ease.
Preview
Live Preview
Features
High-Quality Design
Meticulous UI Design: Built on Element Plus, with carefully optimized visuals that offer a clean and refined aesthetic.
Rich Theme Switching: Supports both light and dark modes, and can automatically adapt to the system theme, catering to user preferences.
Personalization: Provides a wide range of customization options, allowing you to tweak every detail to suit your needs.
High Performance & Availability
Modern Tech Stack: Powered by the latest technologies like Vue 3, TypeScript, Vite, and Element Plus.
Robust Persistence Solution: Implements powerful local storage with persistent data management, including built-in data validation to ensure data remains intact across page switches and refreshes.
Comprehensive Permission Management: Offers permission control at the routing, menu, and feature module levels, ensuring both security and flexibility.
Superior User Experience
Global Search & Favorites: Supports global search based on system language, and allows users to favorite search results for enhanced efficiency.
Multi-Tab & Breadcrumb Navigation: Enables quick switching between multiple pages and offers intuitive breadcrumb navigation.
Mobile Compatibility: Fully responsive for mobile devices, ensuring a consistent experience across different screen sizes.
Tech Stack
Framework: Vue 3, TypeScript, Vite, Element Plus
State Management: Pinia
Code Standards: ESLint, Prettier, Stylelint, Husky, Lint-staged, CommitLint, cz-git
Utilities: mittBus event bus, code highlighting directives, high-quality icon library
Key Features
Rich Theme Switching: Offers multiple theme modes, including customizable themes, allowing users to switch between light and dark modes.
Global Search: Built-in powerful global search that adapts to the system language, with support for search history to improve productivity.
Multi-Tab Browsing: Users can open multiple pages simultaneously and switch between different modules, enhancing multitasking abilities.
Global Breadcrumb Navigation: Provides intuitive navigation showing the user’s current location within the system.
Multi-Language Support: Integrated internationalization, allowing the system to adjust its interface based on the selected language, catering to global users.
Icon Library: Includes a rich icon set based on Element Plus, optimized for easy use by developers.
Rich Text Editor: Features a powerful rich text editor with advanced functions like code highlighting and fragment processing, ensuring smooth performance when handling complex content.
Echarts Integration: Built-in support for Echarts for data visualization, making it easier for users to interpret data.
Utils Toolkit: Provides common utility functions and methods for quick access, boosting development efficiency.
Network Exception Handling: Includes network status detection and exception notification components, improving user experience by alerting them to connectivity issues.
Route-Level Authorization: Ensures that only authorized users can access specific routes, enhancing system security.
Sidebar Menu Authorization: Dynamically generates sidebar menus based on user permissions, ensuring users only see the menus they have access to.
Authorization Directives: Offers directive-based permission control to validate access to specific elements on a page, hiding or disabling unauthorized operations.
Mobile Adaptation: Fully responsive design for mobile devices, ensuring a seamless experience across various screen sizes.
Advanced Persistence Solution: Utilizes a cutting-edge local storage solution with support for data persistence and version control, preventing conflicts during version updates.
Local Data Validation: Ensures data consistency and integrity during storage, preventing data corruption or loss.
Code Validation & Formatting on Commit: Integrated with ESLint, Prettier, Stylelint, and Husky, with automatic validation and formatting during code commits to maintain code quality.
Commit Message Standardization: Uses CommitLint and cz-git to enforce consistent commit messages, improving project maintainability and collaboration efficiency.
Project Links
GitHub: https://github.com/Daymychen/art-design-pro
Gitee: https://gitee.com/lingchen163/art-design-pro
Top comments (0)