Отметим: когда стандартная админ-панель слишком жесткая, а кастомная разработка — слишком дорогая, AdminJS (см. GitHub-репозиторий) предлагает золотую середину. Но в коробке он часто не покрывает сложные бизнес-правила: кастомные экшены, загрузку файлов, ролевой доступ. Мы разработали админ-панели на AdminJS для e-commerce, логистики и SaaS с 20+ проектами за плечами. Однажды для сети магазинов мы внедрили кастомный экшен массового изменения цен — обработка 5000 товаров за 30 секунд. В этой статье расскажем, как кастомизировать AdminJS, какие инструменты используем и где проходят границы возможностей.
Какие проблемы решает AdminJS?
AdminJS генерирует CRUD-интерфейс на основе моделей данных. Он подходит для быстрого запуска админки, но требует доработки под нестандартные сценарии. Вот основные сложности, которые мы решаем:
- Кастомные действия — массовая рассылка, генерация отчётов, интеграция с внешними API. Например, для логистического стартапа мы добавили экшен автоматического создания накладных, обрабатывающий 10 000 записей за минуту.
- Загрузка файлов — через
@adminjs/uploadс S3 или локальным хранилищем. Поддерживаем автогенерацию превью и миниатюр для изображений товаров. - Права доступа — разграничение по ролям и действиям (просмотр, редактирование, удаление). Настраиваем ролевую модель на основе
currentAdmin.roleс каскадными разрешениями. - Кастомные компоненты — замена стандартных полей на React-виджеты: datepicker, autocomplete, wysiwyg-редакторы. Для одного клиента мы разработали компонент выбора склада с геолокацией.
- Производительность — оптимизация запросов для таблиц с 100k+ записей: добавляем индексы, используем серверную фильтрацию, подключаем Elasticsearch для полнотекстового поиска.
Как кастомизировать AdminJS под бизнес-требования?
Стек: Node.js, TypeScript, React 18, AdminJS 7.x, TypeORM / Prisma. Деплой — Docker, Nginx, Vercel.
Рассмотрим пример: интернет-магазин с товарами, заказами и клиентами. Базовая настройка AdminJS с аутентификацией и кастомными правами:
Пример кода настройки AdminJS
import AdminJS from 'adminjs'; import AdminJSExpress from '@adminjs/express'; import { Database, Resource, getModelByName } from '@adminjs/typeorm'; AdminJS.registerAdapter({ Database, Resource }); const adminJs = new AdminJS({ resources: [ { resource: getModelByName('User'), options: { properties: { password: { isVisible: { list: false, edit: false, filter: false, show: false } }, createdAt: { isVisible: { edit: false } } }, actions: { delete: { isAccessible: ({ currentAdmin }) => currentAdmin?.role === 'superadmin' } } } }, { resource: getModelByName('Order'), options: { listProperties: ['id', 'customer', 'status', 'total', 'createdAt'], filterProperties: ['status', 'createdAt'], sort: { sortBy: 'createdAt', direction: 'desc' } } } ], dashboard: { component: AdminJS.bundle('./components/Dashboard') }, branding: { companyName: 'Мой Магазин', logo: '/admin-logo.svg' } }); const router = AdminJSExpress.buildAuthenticatedRouter(adminJs, { authenticate: async (email, password) => { const admin = await Admin.findOne({ email }); if (admin && await bcrypt.compare(password, admin.passwordHash)) { return admin; } return null; }, cookiePassword: process.env.COOKIE_SECRET }); Кастомный компонент для отображения статуса заказа цветом:
import { BasePropertyProps } from 'adminjs'; const OrderStatusCell: React.FC<BasePropertyProps> = ({ record }) => { const status = record.params.status; const colors = { pending: 'orange', completed: 'green', cancelled: 'red' }; return <span style={{ color: colors[status] }}>{status}</span>; }; export default OrderStatusCell; Загрузка изображений товаров в S3 через @adminjs/upload:
import uploadFeature from '@adminjs/upload'; import { s3Client } from './s3-client'; { resource: getModelByName('Product'), features: [ uploadFeature({ provider: { aws: { bucket: 'my-bucket', s3Client } }, properties: { file: 'imageFile', filePath: 'imageUrl', filename: 'imageName', mimeType: 'imageMimeType' }, uploadPath: (record, filename) => `products/${record.id()}/${filename}` }) ] } Почему AdminJS экономит до 60% времени и бюджета?
Написание админ-панели с нуля на React и Express занимает около 3–4 недель для типового CRUD. AdminJS сокращает этот срок до 1–2 недель, что в 2-3 раза быстрее. Для проектов с 10+ сущностями экономия времени достигает 60%, а следовательно и бюджета. При добавлении кастомных компонентов экономия сохраняется на уровне 30–40%.
Согласно официальной документации AdminJS, фреймворк поддерживает все популярные ORM и ускоряет разработку за счёт генерации интерфейса из моделей. Но важно понимать: коробочная версия даёт базовый функционал, а реальная экономия получается при правильной настройке и кастомизации.
| ORM | Скорость разработки | Сложность кастомизации |
|---|---|---|
| TypeORM | Высокая | Низкая |
| Prisma | Средняя | Средняя |
| Mongoose | Высокая | Низкая |
| Sequelize | Средняя | Средняя |
Что делать, если производительность AdminJS не устраивает?
Для таблиц с 100k+ записей стандартные механизмы могут тормозить. Мы применяем несколько подходов. Первый — серверная фильтрация: все фильтры выполняются на стороне БД, а не во фронтенде. Второй — индексация часто запрашиваемых полей. Третий — отказ от find с загрузкой всех связанных сущностей; используем QueryBuilder с select only. В крайнем случае подключаем Elasticsearch для полнотекстового поиска.
Пример оптимизации: в одном проекте таблица заказов (200k записей) открывалась 5 секунд. После добавления композитного индекса по (status, createdAt) и фильтрации по статусу время загрузки упало до 200 мс.
Как мы разрабатываем админ-панель?
| Этап | Время (дни) |
|---|---|
| Аналитика | 1 |
| Проектирование | 1-2 |
| Реализация | 5-10 |
| Тестирование | 2-3 |
| Деплой | 1 |
- Аналитика — изучаем структуру данных, бизнес-процессы, права доступа. Оцениваем объём за 1 день.
- Проектирование — определяем ресурсы, экшены, компоненты, схему прав.
- Реализация — настройка AdminJS, написание кастомных компонентов и экшенов, интеграция с внешними сервисами.
- Тестирование — проверка сценариев, нагрузочное тестирование (до 10 000 запросов).
- Деплой и документация — развёртывание на вашем сервере, описание инструкций для администраторов.
Что входит в результат работы
- Полностью готовая админ-панель на AdminJS с аутентификацией.
- Кастомные компоненты и экшены по вашему ТЗ.
- Интеграция с загрузкой файлов (S3, MinIO).
- Разграничение прав доступа (роли, действия).
- Исходный код, документация, инструкция по развёртыванию.
- Гарантия 6 месяцев на выявленные ошибки.
Для простых проектов AdminJS сокращает время разработки админки на 60% по сравнению с написанием с нуля. Свяжитесь с нами, чтобы обсудить ваш проект — получите консультацию и предварительную оценку за 1 день. Закажите разработку админ-панели на AdminJS.