Астрахань
не верифицирован
Был на сайте:
Клиент — промышленное предприятие — поставил задачу разработать с нуля веб-интерфейс корпоративной системы управления инженерными данными (PDM-класс). Система призвана централизованно хранить, версионировать и контролировать документацию, детали, изделия и их экземпляры в рамках жизненного цикла продукта.
Ключевые цели:
Заменить разрозненные Excel-таблицы и файловые хранилища единой структурированной системой с веб-доступом.
Реализовать строгое версионирование инженерной документации с поддержкой буквенных и числовых схем.
Обеспечить разграничение прав доступа по ролям: ответственные за документацию и конфигурацию работают только со «своими» объектами в активном статусе.
Автоматизировать процесс внесения изменений через механизм замечаний/извещений (ЗНИ) со статусной моделью и назначением исполнителей.
Дать пользователям инструмент гибкой фильтрации и поиска — конструктор запросов с сохранением фильтров.
Поддержать работу с 3D-моделями прямо в браузере (просмотрщик на BabylonJS).
Сделать интерфейс кастомизируемым: каждое рабочее пространство и каждый пользователь могут настраивать отображение столбцов таблиц под себя.
Интегрировать корпоративную авторизацию через LDAP/SSO.
Что было сделано:
Разработан фронтенд с нуля на React 18 + TypeScript с архитектурой Feature-Sliced Design (FSD). Это позволило структурировать кодовую базу на 5 слоёв (shared, entities, features, widgets, pages) и поддерживать масштабируемость при росте числа фич.
Реализованы 13 функциональных требований (ФТ):
версионирование документов и деталей (буквенные/числовые схемы)
маски для нумерации ID объектов
конструктор запросов с сохранением и применением фильтров
ролевая модель доступа (RBAC) с 5+ ролями
статусная модель ЗНИ с 5 статусами и динамическими переходами
принудительная регистрация/разрегистрация документов ролью OTV
настройка отображения столбцов (глобальная и персональная)
3D-просмотрщик моделей в браузере (BabylonJS)
экспорт данных в Excel, импорт из Word
нагрузочное тестирование (скрипты создания тестовых данных)
Параллельно проведён полный FSD-рефакторинг (~13 этапов): перенесено 110+ файлов, создано 20 фич и 5 виджетов, устранено ~236 строк дублированного кода, объём страниц сокращён в среднем на 37%.
Стек: React 18, TypeScript, Ant Design 5, TanStack Query v5, TanStack Router, Vite, BabylonJS, React Hook Form + Yup, Docker, Nginx, SCSS.
1. Архитектура с нуля по Feature-Sliced Design
Вместо монолитной структуры выбрана FSD-архитектура: 5 слоёв (shared → entities → features → widgets → pages), строгие границы зависимостей, алиасы путей через Vite. Это позволило команде параллельно работать над разными фичами без конфликтов и обеспечило читаемость кодовой базы при масштабировании.
Создано: 6 entities, 20 features, 5 widgets, 22 shared UI-компонента, 17 переиспользуемых хуков.
2. Версионирование документов
Реализована сложная логика версионирования: поддержка буквенных схем с ограничением разрядности, числовых итераций, статусов REGISTERED/DEREGISTERED. Логика группировки деталей по версиям вынесена в отдельный хук useDetailsGrouping (70+ строк алгоритма) — фильтрация по ролям, сортировка по дате, построение карты версий.
3. Ролевая модель доступа (RBAC)
Разграничение прав реализовано на уровне UI: видимость кнопок, доступность полей и целых разделов зависит от роли и текущего статуса объекта. Например, исполнитель по документации (ИСПВД) может редактировать документ только если он исполнитель именно этого ЗНИ и статус = IN_PROGRESS_DOC. Логика вынесена в отдельные утилиты (changeRequestVisibility.ts, changeRequestStatusTransitions.ts).
4. Статусная модель ЗНИ (замечания/извещения)
Реализован полный цикл: 5 статусов (NEW → IN_PROGRESS_DOC → IN_PROGRESS_CONF → ON_REVIEW → COMPLETED), динамические кнопки переходов в зависимости от роли, выбор исполнителей с фильтрацией по ролям, цветовые индикаторы статусов. Структура — ~22 файла (типы, константы, утилиты, компоненты, сервисы, интеграции в 4 страницы).
5. Конструктор запросов
Визуальный построитель фильтров и сортировки с поддержкой сохранения запросов. Запрос конвертируется из UI-формата в бэкенд-формат через queryConverter.ts и применяется через React Query (useApplyDocumentQuery и аналоги). Интегрирован в страницы документов, деталей, изделий.
6. 3D-просмотрщик
Интегрирован BabylonJS (@babylonjs/core, @babylonjs/loaders) для отображения 3D-моделей прямо в браузере без сторонних сервисов. Поддерживаются форматы, используемые в инженерной практике.
7. Кастомизация таблиц
Реализованы два уровня настройки столбцов: глобальный (на рабочее пространство) и персональный (на пользователя). Настройки хранятся на сервере, применяются при загрузке страницы. Фича выделена в отдельный FSD-слой features/column-settings.
8. Оптимизация и рефакторинг
Проведён полный FSD-рефакторинг в 13 этапов:
перенесено 110+ файлов на FSD-импорты
устранено ~236 строк дублированного кода через useServerFilters
создан универсальный BulkActionsPanel — удалено 6 дублирующихся компонентов, −425 строк
объём страниц сокращён в среднем на 37%
9. Инфраструктура
Сборка через Vite с конфигурациями для dev/stage/production. Docker + Nginx для деплоя. CI/CD через переменные окружения. Скрипты нагрузочного тестирования для генерации тестовых данных (Python).
Что получилось
Разработан полнофункциональный фронтенд корпоративной PDM-системы — от пустого репозитория до production-деплоя. Система закрыла все 13 функциональных требований заказчика и введена в опытную эксплуатацию.
Технические показатели:
Кодовая база: ~110 FSD-модулей, 20 фич, 6 сущностей, 5 виджетов
Покрытие архитектуры: 100% соответствие FSD, нулевые нарушения границ слоёв
Оптимизация: −37% кода на страницах, −425 строк за счёт унификации BulkActionsPanel, −236 строк дублирования через useServerFilters
Скорость разработки ФТ011 (ролевая модель + ЗНИ): 30-40 часов вместо расчётных 90-130 часов без инструментов ИИ
Как применяется на практике
Система используется инженерными командами для ведения жизненного цикла изделий:
Документооборот — создание, версионирование, регистрация и разрегистрация инженерной документации. Каждое изменение проходит через статусную модель с назначением исполнителей и контролем прав.
Управление изменениями — извещения об изменениях (ЗНИ) связывают документы и детали с конкретным заданием на изменение. Ответственный создаёт ЗНИ, назначает исполнителей, контролирует прохождение по статусам до завершения.
Разграничение доступа — каждый сотрудник видит и редактирует только то, на что у него есть права по роли и текущему статусу объекта. Исключены ошибочные правки чужих объектов.
Поиск и аналитика — конструктор запросов позволяет строить сложные выборки по документам и деталям с сохранением фильтров для повторного использования. Заменяет ручной поиск по Excel.
3D-визуализация — инженеры просматривают 3D-модели деталей прямо в браузере без установки специализированного ПО.
Персонализация — каждый пользователь настраивает состав и порядок столбцов таблиц под свой рабочий процесс.
Итог для заказчика
Предприятие получило единую веб-систему, которая заменила разрозненные файловые хранилища и ручные процессы согласования. Архитектура FSD обеспечивает поддерживаемость: новые фичи добавляются без риска поломки существующей логики, а разграничение слоёв упрощает онбординг новых разработчиков.
Пожаловаться
