Ant Design Pro

Ant Design Pro — это расширение библиотеки Ant Design, ориентированное на построение комплексных административных панелей и корпоративных интерфейсов. Он базируется на React, использует TypeScript по умолчанию и интегрируется с современными инструментами сборки, такими как Vite или Webpack.

Для создания нового проекта используется команда:

npm create umi

или, если используется Yarn:

yarn create umi

При выборе шаблона необходимо указать Ant Design Pro. После создания проекта установка зависимостей выполняется через:

npm install

или

yarn

Запуск приложения производится командой:

npm start

Стандартная структура проекта включает следующие ключевые директории:

  • src/pages – страницы приложения, разделенные по маршрутам.
  • src/layouts – базовые шаблоны страниц, включая навигацию, сайдбар и шапку.
  • src/components – переиспользуемые компоненты UI.
  • config – конфигурации маршрутов, прокси и темизации.

Структура маршрутов и Layout

Ant Design Pro использует декларативную конфигурацию маршрутов. Файл config/routes.ts описывает иерархию страниц, их компоненты и права доступа. Пример маршрута:

export default [
  {
    path: '/dashboard',
    name: 'dashboard',
    icon: 'DashboardOutlined',
    component: './Dashboard',
  },
  {
    path: '/users',
    name: 'users',
    icon: 'UserOutlined',
    routes: [
      {
        path: '/users/list',
        name: 'userList',
        component: './Users/List',
      },
      {
        path: '/users/profile/:id',
        name: 'userProfile',
        hideInMenu: true,
        component: './Users/Profile',
      },
    ],
  },
];
  • path — путь маршрута.
  • name — отображаемое имя в меню.
  • icon — иконка из библиотеки Ant Design Icons.
  • component — путь к React-компоненту страницы.
  • routes — вложенные маршруты.
  • hideInMenu — скрытие маршрута из навигационного меню.

Layout управляет общим каркасом страницы: шапкой, боковым меню и футером. В src/layouts/BasicLayout.tsx используется компонент ProLayout, который предоставляет встроенную поддержку:

  • многоуровневой навигации;
  • динамической смены темы;
  • интеграции с правами доступа;
  • breadcrumb-навигации.

Пример использования ProLayout:

import ProLayout from '@ant-design/pro-layout';

<ProLayout
  title="Admin Panel"
  menuDataRender={() => menuData}
  breadcrumbRender={(routes) => [...routes]}
>
  {children}
</ProLayout>

Компоненты и визуальные элементы

Ant Design Pro расширяет стандартный набор компонентов Ant Design за счет готовых блоков и шаблонов:

Таблицы и списки

Используется компонент ProTable, который обеспечивает:

  • поддержку сортировки и фильтрации;
  • пагинацию и экспорт данных;
  • встроенную интеграцию с формами поиска.

Пример конфигурации ProTable:

import { ProTable } from '@ant-design/pro-components';

<ProTable
  columns={[
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'Имя', dataIndex: 'name', key: 'name' },
    { title: 'Email', dataIndex: 'email', key: 'email' },
  ]}
  request={async (params) => {
    const response = await fetch('/api/users?' + new URLSearchParams(params));
    return { data: await response.json(), success: true };
  }}
  rowKey="id"
/>

Формы и редакторы

ProForm позволяет создавать сложные формы с поддержкой валидации и асинхронной загрузки данных:

import { ProForm, ProFormText } from '@ant-design/pro-components';

<ProForm
  onFin ish={async (values) => {
    await fetch('/api/save', { method: 'POST', body: JSON.stringify(values) });
  }}
>
  <ProFormText name="username" label="Имя пользователя" rules={[{ required: true }]} />
  <ProFormText.Password name="password" label="Пароль" />
</ProForm>

Особенности ProForm:

  • интеграция с Ant Design Form API;
  • поддержка различных типов полей (текст, селект, дата, переключатели);
  • возможность использования кастомных компонентов.

Графики и аналитика

Для визуализации данных используется @ant-design/charts, совместимый с Pro. Поддерживаются диаграммы:

  • линейные, столбчатые, круговые;
  • составные графики;
  • диаграммы с анимацией и интерактивностью.

Пример линейного графика:

import { Line } from '@ant-design/charts';

const config = {
  data,
  xField: 'date',
  yField: 'value',
  smooth: true,
};

<Line {...config} />

Темизация и кастомизация

Ant Design Pro поддерживает динамическую смену темы и модификацию стилей через less variables. Пример изменения цвета:

@primary-color: #1DA57A;
@link-color: #1DA57A;

Можно подключить динамическую смену темы через @ant-design/pro-layout:

import { ConfigProvider } from 'antd';

<ConfigProvider
  theme={{
    token: { colorPrimary: '#1890ff' },
  }}
>
  <App />
</ConfigProvider>

Управление правами доступа

Ant Design Pro предоставляет встроенную систему прав доступа через Authorized и настройку маршрутов:

import Authorized from '@/components/Authorized';

<Authorized authority={currentUser.role} noMatch={<NoAccess />}>
  <Dashboard />
</Authorized>
  • authority — список разрешенных ролей;
  • noMatch — компонент, отображаемый при отсутствии доступа.

Работа с API и состояния

Для асинхронной работы с данными используется umi-request или любой другой HTTP-клиент. Ant Design Pro интегрируется с React Query и Redux, но чаще всего применяется useRequest из Pro Components:

import { useRequest } from '@umijs/max';

const { data, loading } = useRequest('/api/users');

Особенности:

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

Производительность и оптимизация

  • Code Splitting — разбивка кода по маршрутам через dynamic import;
  • Lazy Loading — ленивое подключение страниц и компонентов;
  • Memoization — использование React.memo и useMemo для тяжелых компонентов;
  • Virtualization — виртуальные списки для больших таблиц через react-virtualized.

Инструменты разработки

  • ProComponents — коллекция готовых UI-компонентов (ProTable, ProForm, ProDescriptions).
  • Ant Design Icons — библиотека иконок с полной интеграцией.
  • Mock API — встроенный сервер моков для разработки без backend.
  • Localization — поддержка многоязычных интерфейсов.

Ant Design Pro позволяет создавать корпоративные интерфейсы с современными практиками React-разработки, упрощая интеграцию таблиц, форм, графиков, маршрутов и управления доступом, сохраняя единый визуальный стиль.

Оглавление