Маршрутизация¶

Обзор¶

Маршрутизация построена на библиотеке React Router версии 7. Все маршруты определены в файле App.tsx внутри компонента BrowserRouter. Каждый маршрут отрисовывается внутри общей разметки Layout, которая обеспечивает боковое меню и контейнер для всплывающих окон.

Таблица маршрутов¶

Адрес	Страница	Описание
`/`	`Dashboard`	Главная --- сводка по количеству файлов, документов и групп, последние задания, состояние системы
`/archive/*`	`Archive`	Файловый архив --- дерево папок, загрузка, перенос, удаление, импорт с Яндекс.Диска
`/processing`	`Processing`	Очередь обработки --- список заданий со статусами, управление очередью
`/doc-types`	`DocTypes`	Типы документов --- список распознанных типов с количеством и подтипами
`/groups`	`Groups`	Группы документов --- список групп, подтверждение, разгруппировка
`/search`	`Search`	Поиск --- полнотекстовый поиск по извлечённым данным документов
`/registries`	`Registries`	Реестры --- список загруженных файлов Excel, статусы, статистика
`/registries/:registryId/wizard/*`	`RegistryWizard`	Мастер настройки реестра --- пошаговая привязка колонок и правил сопоставления
`/registries/:registryId/results`	`RegistryResults`	Результаты по реестру --- таблица совпадений, фильтрация, подтверждение, выгрузка
`/yandex-imports`	`YandexImports`	История загрузок с Яндекс.Диска --- запущенные и завершённые импорты
`/settings`	`Settings`	Настройки --- режим обработки, модель распознавания, поля поиска, месторождения

Динамические сегменты¶

Два маршрута содержат параметр :registryId:

/registries/:registryId/wizard/* --- мастер настройки конкретного реестра. Завершающий * позволяет мастеру управлять внутренними шагами без дополнительных маршрутов.
/registries/:registryId/results --- результаты сверки конкретного реестра.

Маршрут /archive/* также использует завершающий *, чтобы страница архива самостоятельно обрабатывала навигацию по дереву папок.

Всплывающие окна через параметры адресной строки¶

Помимо основных маршрутов, приложение использует параметры запроса в адресной строке для управления всплывающими окнами. Этим занимается перехватчик useModalRouter:

Параметр	Окно	Пример
`doc`	Просмотр и редактирование документа	`?doc=6721a3b...`
`original`	Просмотр исходного файла	`?doc=6721a3b...&original=page2`
`archive`	Просмотр файла из архива	`?archive=6721a3b...`

Такой подход позволяет:

делиться ссылкой на конкретный документ или исходник;
использовать кнопки «Назад» и «Вперёд» в браузере для навигации по открытым окнам;
накладывать окна друг на друга (например, исходник поверх документа).

Контейнер ModalContainer считывает параметры из адресной строки при каждом изменении и решает, какие окна отобразить.

Боковое меню¶

Боковое меню (Sidebar.tsx) содержит девять пунктов навигации, каждый ведёт на один из основных маршрутов. Активный пункт подсвечивается с помощью компонента NavLink из React Router, который отслеживает текущий адрес.

Пункты меню:

Главная (/)
Архив (/archive)
Очередь обработки (/processing)
Типы документов (/doc-types)
Группы (/groups)
Поиск (/search)
Реестры (/registries)
Загрузки с Яндекс.Диска (/yandex-imports)
Настройки (/settings)

Страницы мастера настройки реестра и результатов по реестру не отображаются в боковом меню --- переход к ним осуществляется со страницы «Реестры».

Общая разметка¶

Компонент Layout оборачивает все маршруты и обеспечивает единообразный внешний вид:

┌─────────────────────────────────────────────┐
│ ┌──────────┐ ┌────────────────────────────┐ │
│ │          │ │                            │ │
│ │ Боковое  │ │   Содержимое страницы      │ │
│ │  меню    │ │   (определяется маршрутом) │ │
│ │          │ │                            │ │
│ │          │ │                            │ │
│ └──────────┘ └────────────────────────────┘ │
│                                             │
│         Всплывающие окна (поверх)           │
│         Уведомления (поверх)                │
└─────────────────────────────────────────────┘

Боковое меню может быть свёрнуто пользователем --- в этом случае отображаются только значки, а названия пунктов появляются как всплывающие подсказки. Состояние сворачивания сохраняется в localStorage и восстанавливается при следующем визите.