Как я стандартизировала сложные drawer-сценарии на Vue 3

В ui kit моей компании используются drawer-панели для сложных пользовательских сценариев: например, для форм и связанных между собой вложенных разделов.

Во многих проектах код таких сценариев стал хаотичным: бизнес-логика смешивается с layout-компонентами, состояние drawer-панелей зависит от конкретной страницы, а каждый новый сценарий реализовывается по-разному.

В своем текущем проекте (о котором я писала в предыдущем посте) на Vue 3 я спроектировала единую архитектуру drawer-сценариев, при которой drawer создается один раз и динамически заменяет контент внутри.

Ключевая идея в следующем: 1. Drawer регистрируется в реестре по имени роута и открывается, когда имя появляется в url. 2. Контент содержит бизнес-логику. Он регистрирует действия и состояния кнопок футера и хедера. 3. Футер и хедер не содержат бизнес-логики и изолированы от контента. 4. useDrawerContentApi синхронизирует состояние между контентом и футером. Из контента действия и состояния кнопок футера передаются в функцию, которая их регистрирует и следит за их изменением через watchEffect.

Для связанных drawer-сценариев я добавила компонент-обертку, который делает централизованные запросы, а затем делится состояниями между вложенными разделами.

В результате drawer-сценарии стали декларативными и переиспользуемыми, реализация сложных сценариев стандартизировалась, а время их разработки сократилось с 1-2 дней до нескольких часов.

Мне было очень интересно строить эту систему. Для меня это был первый опыт проектирования внутренней архитектуры такого масштаба. Теперь моя новая задача - уместить весь этот опыт в резюме :)