Под NDA — отчёты по обследованию зданий
Несколько веб-приложений для формирования инженерных отчётов об обследовании зданий. Миграция с Vue 2 на Vue 3, конструктор форм, роли и права, темизация, оптимизация.
Контекст
Компания разрабатывает веб-приложения для работы с отчётами об обследовании зданий. На старте — несколько приложений на Vue 2, накопившийся технический долг, тяжёлый интерфейс: пользователи путались, делали ошибки, разобраться в UI с ходу было сложно.
Решение
Мигрировал три приложения с Vue 2 + Vuex на Vue 3 + Pinia, обновил UI-кит с PrimeVue 2 до PrimeVue 3. Одно приложение на Vue 2 поддерживаю параллельно.
Разработал конструктор форм: компонент, позволяющий собирать произвольные формы из готовых блоков прямо на странице. Каждый блок отвечает за свой тип поля — глубоко декомпозировано, расширяется без изменения ядра. Архитектура на Pinia: каждый раздел — отдельный store, lazy-mount по мере открытия.
Реализовал систему ролей и прав. Региональная специфика — наборы функциональностей для разных городов и областей управляются через конфиг без дублирования кода.
Автосохранение, undo, инкрементальная валидация и сериализация отчётов в собственный формат для бэка. Abort-контроллеры на запросах — устаревшие обращения отменяются при навигации, гонок данных нет. SWR-кэширование на фронте — повторные запросы к одним данным не уходят на сервер.
Светлая и тёмная тема, настройка дизайн-токенов прямо из интерфейса. Skeleton-лоадеры вместо спиннеров — структура страницы сохраняется при загрузке. Большие таблицы с отчётными данными.
Параллельно с рефакторингом переработал дизайн переписанных приложений: упростил интерфейс, убрал лишние шаги и источники ошибок.
Результат
Три приложения переведены на Vue 3, Pinia, PrimeVue 3 и переработаны визуально — интерфейс стал чище, ошибок при заполнении меньше. Конструктор форм закрыл основной источник дублирования логики между разделами. SWR-кэш и abort-контроллеры дали заметный прирост в отзывчивости и стабильности.