Projekt: System Magazynu NOVA LAB

Czas zastosować wszystkie wzorce magazynowe w jednym projekcie! Zbudujesz kompletny system zarządzania cargo bay stacji NOVA LAB, który wykorzystuje:

• Default i Named Slots - elastyczny layout panelu cargo
• Scoped Slots - renderowanie listy modułów
• Dynamic Components - przełączanie widoków stacji
• KeepAlive - zachowanie stanu formularzy
• Teleport - modal alertu krytycznego

Architektura

1App
2  ├── StationDashboard (named slots: header, default, footer)
3  │     ├── #header → Navigation tabs
4  │     ├── #default → <component :is> + KeepAlive
5  │     │     ├── CargoList (scoped slot → renderowanie itemów)
6  │     │     ├── AddModule (formularz z lokalnym stanem)
7  │     │     └── StationLog (log zdarzeń)
8  │     └── #footer → StatusBar
9  └── Teleport → AlertModal (modal krytyczny w body)

Zadanie

Przeanalizuj kod w edytorze i zrozum jak wszystkie wzorce współpracują:

1. StationDashboard - komponent z named slots (header, default, footer) tworzący layout
2. CargoList - scoped slot pozwalający rodzicowi zdecydować jak renderować każdy moduł cargo
3. Dynamic components -

   <component :is>

   przełącza między CargoList, AddModule i StationLog
4. KeepAlive - zachowuje stan AddModule po przełączeniu tabów
5. Teleport - AlertModal renderowany w body, wywoływany z dowolnego panelu

Kluczowe obserwacje:

• Named slots w StationDashboard dają elastyczny layout bez hardcoded struktury
• Scoped slots w CargoList oddzielają logikę danych od prezentacji
• KeepAlive zapobiega utracie danych formularza w AddModule
• Teleport zapewnia prawidłowe pozycjonowanie modala