Типичная ситуация: заказчик хочет CRM с 30 экранами, 10 сущностями и сложной отчётностью. Разработка с нуля — 3 месяца и высокий бюджет. С Ant Design мы сокращаем срок до 2–3 недель, а стоимость — на 40–50%. За пять лет и 70+ проектов мы накопили библиотеку шаблонов, которые покрывают 90% сценариев. Например, в проекте для логистической компании мы заменили самописную админку на Ant Design и сократили время разработки нового функционала с 2 недель до 3 дней. Клиент сэкономил $12 000 на разработке. В этой статье я расскажу, как настроить Ant Design 5, кастомизировать тему и собрать типовые страницы. Свяжитесь с нами, чтобы обсудить ваш проект и получить предварительную оценку.
Почему Ant Design 5 — стандарт для enterprise-интерфейсов?
Ant Design — компонентная библиотека от Alibaba, и главное её преимущество — единообразие. Все компоненты следуют одним принципам: одинаковые отступы, цвета, поведение. Это экономит часы согласований с дизайнером. Ant Design 5 отказался от Less в пользу CSS-in-JS (@ant-design/cssinjs), что даёт runtime-тему и отсутствие конфликтов стилей — об этом говорится в официальной документации Ant Design.
Настройка темы через CSS-in-JS и Design Tokens
Вместо переопределения Less-переменных используем Design Tokens. Это объект с алгоритмом и настройками компонентов. Пример базовой темы:
// src/antd-theme.ts import { ThemeConfig, theme as antTheme } from 'antd'; const { defaultAlgorithm, darkAlgorithm } = antTheme; const lightTheme: ThemeConfig = { algorithm: defaultAlgorithm, token: { // Базовые цвета colorPrimary: '#2563eb', colorSuccess: '#16a34a', colorWarning: '#d97706', colorError: '#dc2626', colorInfo: '#0891b2', // Типографика fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', fontSize: 14, fontSizeLG: 16, fontSizeHeading1: 38, fontSizeHeading2: 30, fontSizeHeading3: 24, // Отступы padding: 16, paddingLG: 24, paddingXL: 32, margin: 16, marginLG: 24, // Форма borderRadius: 8, borderRadiusLG: 12, // Цвета фона colorBgContainer: '#ffffff', colorBgLayout: '#f5f7fa', colorBorderSecondary: '#e5e7eb', }, components: { Button: { controlHeight: 40, controlHeightLG: 48, controlHeightSM: 32, paddingContentHorizontal: 20, borderRadius: 8, }, Card: { paddingLG: 24, borderRadius: 12, }, Table: { headerBg: '#f9fafb', borderColor: '#f3f4f6', }, Form: { labelColor: '#374151', labelFontSize: 14, }, Menu: { itemBorderRadius: 8, }, }, }; export default lightTheme; Как кастомизация темы влияет на производительность?
Runtime-тема через CSS-in-JS не снижает производительность, так как токены компилируются в CSS-переменные. Мы тестировали на проектах с 50+ компонентами — разница в скорости рендеринга менее 5%. Это позволяет менять тему на лету без пересборки, что критично для white-label решений. Например, для клиента из fintech мы настроили 12 тем под разные продукты, и переключение между ними происходит без перезагрузки страницы.
Структура страницы с Ant Design Layout
Типовой макет: Sider слева, Header с хлебными крошками и уведомлениями, Content с контентом, Footer. Sider может быть collapsible.
import { Layout, Menu, Breadcrumb, Avatar, Badge, Space } from 'antd'; import { BellOutlined, UserOutlined, MenuFoldOutlined } from '@ant-design/icons'; import { useState } from 'react'; const { Header, Sider, Content, Footer } = Layout; const AppLayout: FC<{ children: ReactNode }> = ({ children }) => { const [collapsed, setCollapsed] = useState(false); return ( <Layout style={{ minHeight: '100vh' }}> <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed} theme="light" style={{ boxShadow: '1px 0 8px rgba(0,0,0,0.06)', overflow: 'auto', position: 'sticky', top: 0, height: '100vh', }} > <div style={{ padding: '16px 24px', fontWeight: 700, fontSize: 18 }}> {collapsed ? 'L' : 'Logo'} </div> <Menu mode="inline" defaultSelectedKeys={['dashboard']} items={menuItems} /> </Sider> <Layout> <Header style={{ background: '#fff', padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid #f3f4f6', }} > <Breadcrumb items={breadcrumbItems} /> <Space size={16}> <Badge count={3}> <BellOutlined style={{ fontSize: 18 }} /> </Badge> <Avatar icon={<UserOutlined />} /> </Space> </Header> <Content style={{ margin: 24 }}> {children} </Content> <Footer style={{ textAlign: 'center', color: '#9ca3af' }}> © Company. All rights reserved. </Footer> </Layout> </Layout> ); }; Формы с валидацией
Ant Design Form поддерживает декларативные правила. Обработка отправки с загрузкой и сообщениями.
import { Form, Input, Select, Button, message } from 'antd'; interface ContactFormValues { name: string; email: string; department: string; message: string; } const ContactForm = () => { const [form] = Form.useForm<ContactFormValues>(); const [loading, setLoading] = useState(false); const onFinish = async (values: ContactFormValues) => { setLoading(true); try { await submitContact(values); message.success('Сообщение отправлено'); form.resetFields(); } catch { message.error('Ошибка отправки'); } finally { setLoading(false); } }; return ( <Form form={form} layout="vertical" onFinish={onFinish} requiredMark="optional" > <Form.Item name="name" label="Имя" rules={[{ required: true, message: 'Введите имя' }]} > <Input placeholder="Иван Иванов" size="large" /> </Form.Item> <Form.Item name="email" label="Email" rules={[ { required: true, message: 'Введите email' }, { type: 'email', message: 'Некорректный email' }, ]} > <Input type="email" placeholder="[email protected]" size="large" /> </Form.Item> <Form.Item name="department" label="Отдел"> <Select size="large" placeholder="Выберите отдел" options={[ { value: 'sales', label: 'Продажи' }, { value: 'support', label: 'Поддержка' }, ]} /> </Form.Item> <Form.Item name="message" label="Сообщение" rules={[{ required: true, min: 10, message: 'Минимум 10 символов' }]} > <Input.TextArea rows={4} placeholder="Опишите запрос..." showCount maxLength={500} /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" size="large" loading={loading} block > Отправить </Button> </Form.Item> </Form> ); }; Таблицы с сортировкой и фильтрацией
Table — ключевой компонент для работы с данными. Ant Design Table предоставляет встроенную сортировку, фильтрацию и кастомный рендер. Достаточно определить массив columns с типом ColumnsType и передать данные в Table. Для сортировки указываем sorter, для фильтрации — filters. Пример кода можно развернуть ниже.
Пример компонента таблицы
import { Table, Tag, Space } from 'antd'; import type { ColumnsType } from 'antd/es/table'; interface DataItem { key: string; name: string; status: 'active' | 'inactive' | 'pending'; created: string; } const columns: ColumnsType<DataItem> = [ { title: 'Название', dataIndex: 'name', sorter: (a, b) => a.name.localeCompare(b.name), }, { title: 'Статус', dataIndex: 'status', filters: [ { text: 'Активен', value: 'active' }, { text: 'Неактивен', value: 'inactive' }, ], onFilter: (value, record) => record.status === value, render: (status) => ( <Tag color={status === 'active' ? 'green' : status === 'pending' ? 'orange' : 'red'}> {status === 'active' ? 'Активен' : status === 'pending' ? 'Ожидание' : 'Неактивен'} </Tag> ), }, { title: 'Дата создания', dataIndex: 'created', sorter: (a, b) => new Date(a.created).getTime() - new Date(b.created).getTime(), }, ]; Типовые компоненты и время настройки
| Компонент | Время настройки | Типовые use-cases |
|---|---|---|
| Layout | 30 мин | Базовая структура админки |
| Table | 2 часа | Отображение списков с сортировкой |
| Form | 1–2 часа | Ввод данных с валидацией |
| Menu | 30 мин | Навигация по разделам |
| Modal/Drawer | 30 мин | Всплывающие окна |
Сравнение с кастомной вёрсткой
Ant Design в 2–3 раза быстрее кастомной вёрстки. Это подтверждает наш опыт: среднее время создания админ-панели с 10 сущностями — 8 дней.
| Параметр | Ant Design | Кастомная вёрстка |
|---|---|---|
| Время разработки типовой страницы | 1–2 дня | 3–5 дней |
| Единообразие компонентов | Гарантировано | Требуется контроль |
| Адаптивность | Из коробки | Ручная настройка |
| Документация и комьюнити | Огромное | Отсутствует |
| Поддержка тем | Runtime-тема через токены | Пересборка стилей |
Процесс работы и что входит
- Аналитика — выявляем типовые страницы и сущности. Описываем сценарии использования.
- Проектирование — настраиваем тему, выбираем компоненты. Собираем прототип на стейджинге.
- Реализация — вёрстка страниц, интеграция с API. Используем TypeScript и современные подходы.
- Тестирование — проверка кросс-браузерности, производительности (LCP, CLS).
- Деплой — настройка CI/CD, передача доступов.
Входит в работу: документация по теме и компонентам, доступы к репозиторию и стейджингу, обучение команды (2–3 часа), поддержка в течение месяца после сдачи.
Сроки и стоимость
Настройка ConfigProvider и темы: 2–4 часа. Полный admin-panel с CRUD-операциями: 5–10 дней в зависимости от количества сущностей. Стоимость рассчитывается индивидуально после оценки объёма работ. Получите консультацию инженера — обсудим ваш проект и подготовим оценку.
Гарантируем стабильную работу и соблюдение сроков. Опыт более пяти лет и 70+ реализованных проектов подтверждают надёжность. Закажите разработку — мы свяжемся с вами в течение дня.