Makeit Admin Pro 3.x

Makeit Admin Pro — это готовый к использованию шаблон на основе Vue 3.x для создания комбинированных сред управления бэкендом.

(An out-of-box UI solution for enterprise applications built on Vue3.x)

Makeit Admin Pro 3.x

**Makeit Admin Pro** представляет собой шаблон, предназначенный для использования в качестве основы при создании систем управления бэкендом со средним и высоким уровнем сложности. Он разработан с использованием Vue 3.x и Vite 5.x, а также библиотеки Ant Design Vue 4.x.

Шаблон включает в себя готовые компоненты для различных функций, таких как:

* унифицированный макет страницы;
* регистрация;
* вход в систему;
* восстановление пароля;
* слайдер для проверки капчи;
* динамическое меню;
* управление разрешениями и другие.

Это позволяет разработчикам сосредоточиться на бизнес-логике приложения, не тратя время на создание базовых элементов интерфейса.

<div>

    **Makeit Admin Pro** построен на Vue 3.x с использованием Vite 5.x и Ant Design Vue 4.x для разработки комбинированного шаблона управления бэкендом, который можно использовать «из коробки».

</div>

<div>

    (An out-of-box UI solution for enterprise applications built on Vue 3.x with Vite 5.x and Ant Design Vue 4.x.)

</div>

Примечание

• Версия 3.x пакета npm теперь называется @miitvip/admin-pro.
• Версия 2.x пакета npm доступна по адресу https://2x.makeit.vip.

О продукте

Makeit Admin Pro — это набор компонентов пользовательского интерфейса (UI), предназначенных для упрощения процесса создания систем управления бэкендом. Продукт основан на Vue 3.x, Vite 5.x и Ant Design Vue 4.x.

Цель проекта — избавить разработчиков от необходимости создавать базовые элементы интерфейса и предоставить им возможность сосредоточиться на реализации бизнес-логики приложения. Makeit Admin Pro включает в себя следующие функции:

• унифицированный макет страницы;
• регистрация;
• вход в систему;
• восстановление пароля;
• слайдер для проверки капчи;
• динамическое меню;
• управление разрешениями.

Проект находится в стадии разработки и постоянно обновляется.

Примеры дизайна

Тёмная тема

Пример тёмной темы можно увидеть здесь: https://admin.makeit.vip

Светлая тема

Пример светлой темы можно увидеть здесь: https://admin.makeit.vip

Смена темы

Быстрое начало работы со сменой темы доступно здесь: https://admin.makeit.vip

Свёрнутое меню

Пример свёрнутого меню доступен здесь: https://admin.makeit.vip

Мобильный вид

Пример мобильного вида доступен здесь: https://admin.makeit.vip

Глобальные настройки

В Makeit Admin Pro реализованы следующие глобальные настройки:

• Тема: настройка внешнего вида приложения с помощью CSS-модулей и CSS-переменных.
• Локализация: поддержка многоязычности с использованием vue-i18n.
• Cookie: работа с файлами cookie с помощью document.cookie.
• Storage: доступ к локальному и сеансовому хранилищу с помощью localStorage и sessionStorage.
• Запрос: выполнение запросов с помощью axios.
• Глобальная конфигурация: определение общих настроек приложения.
• Инструменты: предоставление набора глобальных функций для использования в приложении.

Базовые компоненты

Makeit Admin Pro предоставляет следующие базовые компоненты:

• Layout: базовый компонент для организации структуры приложения.

• Captcha: компонент для реализации слайдера для проверки капчи.

• Anchor: компонент для создания ссылок на определённые разделы приложения.

• Clock: компонент для отображения времени.

• Dropdown: компонент для создания выпадающих меню.

• Forget: компонент для восстановления пароля.

• Link: компонент для добавления ссылок в приложение.

• Palette: компонент для выбора цветов.

• Login: компонент для входа в систему.

• Register: компонент для регистрации новых пользователей. Европейский замок:

• Авторизованный вход (Socialite): Авторизация.

• Навигация по меню (Menu): Меню.

• Анимация всплывающих окон (Modal): Всплывающие окна.

• Центр уведомлений (Notice): Уведомления.

• Настройка пароля (Password): Пароли.

• Компонент поиска (Search): Поиск.

• Выделение кода (Code): Подсветка кода.

• Установка заголовка (Title): Заголовки.

• Цитирование (Quotes): Цитаты.

• Возврат к началу (Backtop): Возврат к началу.

Расширенные функции

• Контроль доступа: солнцезащитные очки.

• Управление приложением: роза.

• Конфигурация меню (динамические маршруты): треугольный флаг на почте.

• Языковая конфигурация: снежинка.

• Редактор форматированного текста: океан.

• Выбор региона: кошка с сердечками в глазах.

• Страница ошибок (404): спящий.

• Личный кабинет: глаза с сердечком.

·······

Установка и использование

npm i @miitvip/admin-pro

Глобальное внедрение

import { createApp } from 'vue'
import MakeitAdminPro from '@miitvip/admin-pro'
import App from './app.vue'

const app = createApp(App)
app.use(MakeitAdminPro)
app.mount('#app')

Загрузка по требованию

import { createApp } from 'vue'
import router from './router'
import App from './app.vue'
import { Layout, Notice } from '@miitvip/admin-pro'

const app = createApp(App)
app.use(router)
const components = [Layout, Notice]
components.forEach((component) => app.use(component))
app.mount('#app')

Базовая компоновка

<template>
    <mi-layout />
</template>

<script lang="ts" setup>
    import { useStoreMenu } from '@miitvip/admin-pro'

    // Обновление меню
    const menuStore = useStoreMenu()
    menuStore.updateMenus([
        {
            name: 'dashboard',
            path: '/dashboard',
            meta: {
                title: 'Контроль центра',
                subTitle: 'Dashboard',
                icon: DashboardOutlined,
                tag: {color: '#f50', content: 'Hot'}
            }
        }, {
            // ... боковое меню
        }
    ])
</script>

Страница входа

<template>
    <mi-login action="/v1/login" />
</template>

Регистрационная страница

<template>
    <mi-register action="/v1/register" />
</template>

Дополнительные функции

Для получения дополнительной информации и использования посетите онлайн-пример: https://admin.makeit.vip.