Enterprise-интерфейсы на React: вёрстка и кастомизация с Ant Design

Типичная ситуация: заказчик хочет 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(),
  },
];

Типовые компоненты и время настройки

Сравнение с кастомной вёрсткой

Ant Design в 2–3 раза быстрее кастомной вёрстки. Это подтверждает наш опыт: среднее время создания админ-панели с 10 сущностями — 8 дней.

Процесс работы и что входит

1. Аналитика — выявляем типовые страницы и сущности. Описываем сценарии использования.
2. Проектирование — настраиваем тему, выбираем компоненты. Собираем прототип на стейджинге.
3. Реализация — вёрстка страниц, интеграция с API. Используем TypeScript и современные подходы.
4. Тестирование — проверка кросс-браузерности, производительности (LCP, CLS).
5. Деплой — настройка CI/CD, передача доступов.

Входит в работу: документация по теме и компонентам, доступы к репозиторию и стейджингу, обучение команды (2–3 часа), поддержка в течение месяца после сдачи.

Сроки и стоимость

Настройка ConfigProvider и темы: 2–4 часа. Полный admin-panel с CRUD-операциями: 5–10 дней в зависимости от количества сущностей. Стоимость рассчитывается индивидуально после оценки объёма работ. Получите консультацию инженера — обсудим ваш проект и подготовим оценку.

Гарантируем стабильную работу и соблюдение сроков. Опыт более пяти лет и 70+ реализованных проектов подтверждают надёжность. Закажите разработку — мы свяжемся с вами в течение дня.