# Ревью проекта и план FSD/Vue рефакторинга Дата: 2026-06-22 Проект: `analytical-panel` Цель документа: зафиксировать техническое ревью, источники best practices, проблемы текущей реализации и пошаговый план рефакторинга без потери визуального или логического поведения приложения. ## 1. Главный принцип рефакторинга Рефакторинг должен идти маленькими проверяемыми шагами. На каждом шаге нужно сохранять: - тот же пользовательский сценарий авторизации; - тот же redirect guard для защищенных страниц; - те же запросы к backend и параметры фильтров; - те же состояния загрузки, ошибки и пустых данных; - те же вкладки аналитики: `all`, `sez`, `technoparks`, `clusters`, режим рейтинга регионов; - ту же сортировку таблиц; - те же тултипы графиков и интерактивные элементы; - ту же адаптивную верстку; - те же публичные UI-kit импорты, пока не будет отдельного шага по оптимизации bundle. Визуальный редизайн не входит в первый этап. Сначала нужно привести код к поддерживаемой архитектуре, не меняя внешний вид. ## 2. Исследованные источники и применимые выводы ### 2.1. Feature-Sliced Design Официальные источники: - FSD Overview: https://fsd.how/docs/get-started/overview/ - FSD Layers: https://feature-sliced.design/docs/reference/layers - FSD Slices and segments: https://feature-sliced.design/docs/reference/slices-segments - FSD Public API: https://feature-sliced.design/docs/reference/public-api - FSD Migration from custom architecture: https://feature-sliced.design/docs/guides/migration/from-custom - FSD Migration from v2.0 to v2.1: https://feature-sliced.design/docs/guides/migration/from-v2-0 - FSD Handling API Requests: https://feature-sliced.design/docs/guides/examples/api-requests - FSD Types: https://feature-sliced.design/docs/guides/examples/types - FSD Authentication: https://feature-sliced.design/docs/guides/examples/auth - FSD Page layouts: https://feature-sliced.design/docs/guides/examples/page-layout - FSD Desegmentation smell: https://feature-sliced.design/docs/guides/issues/desegmented - FSD Cross-import smell: https://feature-sliced.design/docs/guides/issues/cross-imports - FSD Routing smell: https://feature-sliced.design/docs/guides/issues/routes Ключевые выводы для проекта: - FSD не требует использовать все слои. Минимально нормальная структура может состоять из `app`, `pages`, `shared`; `widgets`, `features`, `entities` добавляются только когда дают реальную пользу. - Актуальная ментальная модель FSD v2.1: `pages first`. Сначала страница становится понятным слайсом, затем действительно переиспользуемая логика выносится ниже. - Основное правило импортов: код внутри слайса может импортировать только слайсы слоев ниже. Исключения: `app` и `shared`, потому что в них нет бизнес-слайсов. - Каждый слайс и каждый сегмент без слайсов должен иметь public API. Внешний код не должен импортировать внутренние файлы напрямую. - Внутри одного слайса лучше использовать относительные импорты напрямую к нужному файлу, а не импортировать из собственного `index.ts`, чтобы не создавать цикл через barrel-файл. - `shared/ui` и `shared/lib` не должны превращаться в одну большую бочку экспортов, если это ухудшает tree-shaking и размер bundle. Для крупных UI-наборов допустимы отдельные entrypoints. - DTO и generated API допустимо держать в `shared/api`, особенно если они связаны между доменами. Мапперы стоит держать рядом с DTO/API-оберткой или рядом со слайсом, если маппер специфичен для страницы. - Логика auth token storage и refresh может жить в `shared/api`, если она является частью общего API-клиента. UI-действия вроде logout лучше не прятать в `shared/ui`. - Layout с бизнес-виджетами можно держать в `app/layouts` либо строить через slots/render props, чтобы не нарушать направление зависимостей. - Cross-import между слайсами одного слоя является code smell и должен быть либо устранен, либо явно документирован. - Hardcoded routing/URLs на нижних слоях размазывает ответственность. Роутинг должен концентрироваться в `app`/`pages`, а нижним слоям лучше передавать callbacks, props или route descriptors. ### 2.2. Vue 3 Официальные источники: - Vue Style Guide, Essential: https://vuejs.org/style-guide/rules-essential - Vue Style Guide, Strongly Recommended: https://vuejs.org/style-guide/rules-strongly-recommended.html - Vue `