Art Design Pro：高颜值、高性能的开源后台管理系统模版

介绍

作为一名开发者，我在多个项目中需要搭建后台管理系统，但发现传统系统在用户体验和视觉设计上不能完全满足需求。因此，我创建了 Art Design Pro。
一款专注于用户体验和快速开发的开源后台管理解决方案。基于 ElementPlus 设计规范，进行了视觉上的精心优化，提供更美观、更实用的前端界面，帮助你轻松构建高质量的后台系统。

预览

https://www.lingchen.kim/art-design-pro

特色

高颜值设计

精心的 UI 设计：基于 Element Plus，经过视觉上的精心优化，提供极简且精致的视觉风格。
丰富的主题切换：支持浅色和暗黑两种模式，系统主题可自动跟随操作系统设置，满足不同用户的喜好。
个性化配置：提供多种个性化配置选项，可根据实际需求调整每一个细节。

高性能与高可用性

最新技术栈：采用 Vue 3、TypeScript、Vite、Element-Plus 等最新技术。
优秀的持久化存储方案：实现强大的本地存储功能，支持用户数据的持久化管理，内置数据校验，确保数据在页面切换或刷新后依然保留。
全面的权限管理：提供路由级别、菜单级别、功能模块级别的权限控制，保障系统的安全性和灵活性。

极致的用户体验

全局搜索与收藏：支持根据系统语言的全局搜索功能，并允许用户收藏搜索结果，提升搜索效率。
多标签页与面包屑导航：方便用户在多个页面之间快速切换，提供直观的路径导航。
移动端适配：全面适配移动设备，确保在不同设备上都有一致的体验。

技术栈

开发框架：Vue 3、TypeScript、Vite、Element Plus
状态管理：Pinia
代码规范：ESLint、Prettier、Stylelint、Husky、Lint-staged、CommitLint、cz-git
辅助工具：mittBus 事件总线、代码高亮指令、高质量图标库

功能亮点

丰富主题切换：提供多种主题模式，用户可以根据喜好切换浅色或暗色主题，并支持自定义主题，满足个性化需求。
全局搜索：内置强大的全局搜索功能，支持根据当前系统语言进行搜索，帮助用户快速找到所需内容，并支持历史记录，提升工作效率。
多标签页：支持多标签页浏览，用户可以同时打开多个页面，在不同功能模块之间快速切换，增强多任务处理能力。
全局面包屑：提供直观的路径导航，显示当前页面在系统中的位置，方便用户了解当前所在的层级结构。
多语言支持：内置国际化方案，支持多种语言切换，系统会根据用户选择的语言自动调整界面，满足全球化的需求。
图标库：集成了丰富的图标库，基于 Element Plus 图标库设计，并对图标复制功能进行了优化，方便开发者快速使用所需的图标资源。
富文本编辑器：内置功能强大的富文本编辑器，支持代码高亮、分片处理等高级功能，确保在处理复杂内容时依然流畅。
Echarts 图表：集成了 Echarts 图表组件，支持各种数据可视化展示，帮助用户更直观地理解数据。
Utils 工具包：内置常用的工具函数和方法，方便开发者在项目中快速调用，提高开发效率。
网络异常处理：内置网络状态检测和异常提示组件，能够及时提醒用户网络异常，提升用户体验。
路由级别鉴权：提供路由级别的权限控制，确保只有授权用户才能访问特定的路由，增强系统的安全性。
侧边栏菜单鉴权：根据用户权限动态生成侧边栏菜单，用户只会看到自己有权限访问的菜单项。
鉴权指令：提供基于指令的权限控制，可针对页面中的特定元素进行权限校验，隐藏或禁用无权限的操作。
移动端适配：全面适配移动设备，支持响应式布局，确保在不同屏幕尺寸下都有良好的显示效果。
优秀的持久化存储方案：采用先进的本地存储方案，支持数据的持久化和版本控制，保证数据在更新版本时不会冲突。
本地数据存储校验：在数据存储过程中进行严格校验，确保数据的一致性和有效性，防止数据损坏或丢失。
代码提交校验与格式化：集成 ESLint、Prettier、Stylelint 等工具，配合 Husky、Lint-staged，实现代码提交时的自动校验与格式化，规范团队开发流程。
代码提交规范化：使用 CommitLint、cz-git 等工具，规范 Git 提交信息，提升项目的可维护性和协作效率。

项目地址

GitHub 地址：https://github.com/Daymychen/art-design-pro
Gitee 地址：https://gitee.com/lingchen163/art-design-pro