Основываясь на Quasar: шаблон для административной системы

Quasar, по сравнению с ElementUI, предлагает более широкие возможности для настройки. Каждый компонент сохраняет множество слотов и событий, что позволяет настраивать его в соответствии с предпочтениями. Кроме того, документация на официальном сайте достаточно подробна, чтобы решить большинство проблем. Интерфейс также выглядит довольно привлекательно.

Ещё одним большим преимуществом Quasar является его адаптация к мобильным устройствам.

Однако есть некоторые проблемы с использованием Quasar. Некоторые функции и компоненты, которые обычно используются в Китае, отсутствуют в Quasar, поэтому необходимо разрабатывать их самостоятельно или использовать другие библиотеки JavaScript.

Репозитории кода:

• Github: https://github.com/jinjingmail/quasar-admin-template
• Gitee: https://gitee.com/jinjinge/quasar-admin-template

Основные характеристики: — возможность поставить «звёздочку»; — хорошая адаптация к маленьким экранам мобильных устройств; — возможность свободно переключаться между тёмным и светлым режимами; — можно настроить цвета и стили для тёмного и светлого режимов и сохранить их в LocalStorage, при этом они не теряются после закрытия браузера; — настройка ширины левой боковой панели меню, цвета фона, цвета шрифта, цвета верхней панели заголовка, положения и отображения меток панели вкладок и т. д.; — автоматическое создание левой боковой панели на основе конфигурации маршрута; — демонстрация нескольких стилей реализации панели поиска на странице (потребовалось много времени); — расширенная разработка CoDialog для реализации перетаскивания и максимизации; — расширенное развитие CoTree с добавлением множества функций; — улучшенная разработка CoTable с новым стилем загрузки и дополнительными функциями, такими как sticky-header, sticky-first-column и sticky-last-column; — усовершенствованная разработка CoForm, CoDate, CoInput, CoOptionGroup и CoFormItem с добавлением некоторых полезных функций; — добавление CoDateSelect; — добавление CoTreeSelect; — добавление CoTreeTable.

Благодарность: eladmin-web, vue-element-admin, quasar-admin-crm, quasar-element-pro.

TODO:

1. Co-dialog: — сделать возможным перемещение значка заголовка диалогового окна при наведении курсора мыши; — предотвратить прокрутку заголовка и нижней панели инструментов при прокрутке содержимого диалогового окна.
2. Добавить функцию сохранения выбранных полей на страницах.
3. Добавить функцию выбора размера таблицы на страницах (сохранение).
4. Сделать общую панель инструментов для редактирования, удаления, изменения и поиска либо полупрозрачной, либо исчезающей.
5. Если панель вкладок не отображается, все страницы не должны кэшироваться (keep-alive).
6. Ускорить загрузку значков.
7. Сделать текст заголовка меню серым.
8. Открыть внешние URL (iframe или другое решение) справа.
9. Добавить страницу «Личные настройки».
10. Добавить поддержку метки «new» в меню.
11. Улучшить обработку ошибок в CoOptionGroup.
12. В CoDateSelect добавить возможность ручного ввода даты и выбора «Последние 7 дней», «Последние 30 дней», «Этот месяц» и т.д.
13. В Co-tree добавить параметры tree-class / tree-style tree-class-mobile tree-style-mobile.
14. Исправить проблему с потерей функциональности слота prepend, append, before и after в CoInput при использовании popup-proxy.
15. Отменить перетаскивание после максимизации диалоговых окон.
16. Исправить ошибку с цветом текста в тёмном режиме для графиков.

Демо: http://jinjinge.gitee.io/quasar-admin-template.

Скриншоты интерфейса:

См. каталог «UI».

Эффект на ПК:

• индекс: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/index.jpg;
• индекс в тёмном режиме: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/index_dark.jpg;
• значки: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/icons.jpg;
• логин: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/login.jpg;
• диалог поиска страницы: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_search_dialog.jpg;
• всплывающее окно поиска страницы: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_search_popup.jpg;
• всплывающее окно поиска страницы в тёмном режиме: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_search_popup_dark.jpg;
• таблица страниц: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_table.jpg;
• таблица страниц в тёмном режиме: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_table_dark.jpg;
• таблица страниц с диалогом: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_table_with_dialog.jpg;
• древовидный список страниц: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_tree_select.jpg;
• древовидная таблица страниц 2: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/page_tree_table2.jpg;
• правая панель настроек: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/right_bar_setting.jpg.

Эффект на мобильных устройствах:

• индекс: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/index.png;
• индекс в тёмном режиме: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/index_dark.png;
• левая боковая панель: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/left_sidebar.png;
• диалоговое окно поиска страницы: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/page_search_popup.png;
• таблица страниц: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/page_table.png;
• таблица страниц в тёмном режиме: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/page_table_dark.png;
• таблица страниц с диалогом: https://gitee.com/jinjinge/quasar-admin-template/raw/main/UI/v0.9/mobile/page_table_with_dialog.png.