在無數個深夜碼字的時刻，我曾反覆問自己：如何才能讓那一成不變的後台管理系統煥發新生？在不斷地摸索和嘗試中，我發現傳統系統總是缺少那份能觸動人心的美感和流暢體驗。於是，一個念頭悄然萌生——為什麼不創造一個既賞心悦目又高效便捷的後台管理解決方案呢？

那一刻，我與代碼對話，與設計共舞，Art-Design-Pro 應運而生。它不僅承載着我對美學和用户體驗的執着追求，更是基於 ElementPlus 的設計規範，傾注心血打造而成。每一處細節都經過精心雕琢，力圖為開發者們呈現一個既美觀又實用的管理系統模板。如今，這份禮物希望能陪你一起輕鬆構建高質量的後台系統，共同體驗設計與編碼帶來的無限可能。

預覽

• 在線預覽

項目地址

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

演示圖

• 淺色主題
  

• 暗黑主題
  

特點

• 漂亮的 UI 設計、極致的用户體驗和細節處理
• 使用最新技術棧
• 內置常用業務組件模版
• 提供多種主題模式，可以自定義主題
• 提供多種菜單佈局模式
• 系統全面支持自定義設置，滿足您的個性化需求
• 對 ElementUI 組件庫組件進行樣式調優，讓整個系統風格更統一
• 適配 PC、移動端、平板
• Chrome 性能測試綜合得分：86、Performance（性能）：90、Accessibility（無障礙）：86、Best Practices（最佳實踐）：100

技術棧

• 開發框架：Vue3、Vite、TypeScript、Element-Plus
• 代碼規範：Eslint、Prettier、Stylelint、Husky、Lint-staged、cz-git 等工具保證代碼質量

功能

• 豐富主題切換
• 針對 ElementPlus 組件庫自定義主題、大部分組件樣式調優
• 四種菜單佈局：左側菜單、頂部菜單、頂部左側菜單、雙列菜單
• 全局搜索：支持快捷鍵操作、歷史記錄
• 鎖屏
• 多標籤頁
• 全局面包屑
• 多語言
• 圖標庫包含 650+ 常用圖標
• 富文本編輯器
• Echarts 圖表
• Utils 工具包
• 網絡異常處理
• 權限：菜單權限、按鈕級別權限（自定義指令）、動態路由註冊
• 適配 PC、移動端、平板
• 優秀的持久化存儲方案，對本地數據校驗、數據類型校驗，確保數據安全
• 代碼提交校驗與格式化
• 容器模式：邊框、陰影
• 可自定義容器圓角大小
• 容器寬度：鋪滿、定寬
• 菜單自定義寬度
• 頁面切換動畫
• 多標籤頁：支持多種關閉方式、可以水平跟橫向兩種滾動模式
• 頂欄按鈕動畫處理
• 頂欄快速入口模塊
• 通知組件
• 異常頁面：403、404、500
• 結果頁面：成功、失敗
• 模版中心：聊天頁面、統計卡片、進度卡片、圖表卡片、數據卡片、圖片卡片、橫幅、日曆、定價頁面
• 組件中心：圖標選擇器、圖像裁剪、Excel 導入導出、視頻播放器、數字滾動、富文本編輯器、右鍵菜單、二維碼、拖拽、文字滾動、禮花效果
• 系統精心設計了一套完整的 CSS 變量，在開發過程中使用這些變量能使系統 UI 保持一致性
• 富文本：文章預覽、代碼塊高亮處理、切片渲染代碼塊、超大富文本秒開（100k 可秒開）、複製功能

結尾

在不斷前行的旅途中，我們曾共同見證每一個小小突破背後的努力和堅持。回想起那些長夜裏與代碼為伴、與設計共舞的時光，每一次迭代都如同一場精彩的冒險。Art-Design-Pro 不僅僅是一個後台管理系統，更像是一部記錄着開發者夢想與追求的史詩，在每一行代碼中都流淌着我們對美學與效率的不懈追求。如今，站在新的起點，我們將繼續探索、不斷創新，期待與你一同開啓更多未知的可能，共同書寫未來數字世界的傳奇篇章。