47 lines
4.6 KiB
Markdown
47 lines
4.6 KiB
Markdown
# Шаблон приложения
|
||
|
||
`ApplicationShell` — канонический форм-фактор нового приложения NODE.DC. Он повторяет устойчивую механику Launcher/Hub, но не включает продуктовую витрину и нижнюю service rail.
|
||
|
||
## Состав
|
||
|
||
1. `AppHeader` — фиксированная трёхосевая шапка `logo / workspace + navigation / profile`; внешний toolbar `68 px`, видимая строка `48 px`.
|
||
2. `stage` — главное медиа- или предметное окно приложения.
|
||
3. `navigation` — левая панель шириной `clamp(332px, 19.5vw, 352px)`.
|
||
4. `content` — отдельное рабочее окно справа от навигации.
|
||
5. `ApplicationPanel` — заголовок, постоянные utility actions, действия expand/close и независимо прокручиваемое тело контента.
|
||
|
||
Позиции шапки не пересчитываются под конкретное приложение. Меняются подписи, доступные navigation actions, профиль и содержимое stage. `HeaderNavigation`, `HeaderWorkspace`, `HeaderProfile`, `HeaderProfileButton` и `HeaderAvatar` должны использоваться как готовые части пресета; consumer не назначает им собственные размеры и offsets.
|
||
|
||
Действие, относящееся ко всему рабочему окну, передаётся через `ApplicationPanel.utilityActions`. Например, сохранение настроенного layout всегда находится в шапке перед expand/close и остаётся доступным при переходе между разделами; отдельные карточки не рисуют собственные копии этой кнопки.
|
||
|
||
Постоянный theme switch передаётся через `ApplicationPanel.headerTools` и располагается в той же action-зоне. Если приложение использует Engine/BIM toolbar, он подключается отдельно к общему workspace-state и может располагаться слева, справа или снизу.
|
||
|
||
## Состояния desktop
|
||
|
||
| Состояние | Навигация | Content window | Stage |
|
||
| --- | --- | --- | --- |
|
||
| Главная | закрыта | закрыто | занимает рабочую область |
|
||
| Guideline открыт | слева | закрыто | сдвинут вправо |
|
||
| Оконный режим | слева | средняя колонка | остаётся видимым справа |
|
||
| Развёрнутый режим | слева | до правого края | уезжает за viewport |
|
||
|
||
Эти переходы принадлежат `useApplicationWorkspace` в React и `createApplicationWorkspaceController` в DOM. Оба API реализуют одинаковые команды: `openNavigation`, `closeNavigation`, `toggleNavigation`, `openView`, `closeView`, `setContentExpanded`.
|
||
|
||
Между панелями используется page gap `20px`. На Guideline-главной нижней rail нет: она является продуктовым элементом витрины Launcher, а не частью общего shell.
|
||
|
||
## Узкий viewport
|
||
|
||
До `760px` шапка перестраивается в две строки. Navigation и content занимают доступную область под шапкой последовательно: открытый content скрывает navigation, но не уничтожает его состояние. Кнопка expand скрывается, потому что content уже использует всю доступную ширину.
|
||
|
||
Modal остаётся portal-слоем. Его тело прокручивается независимо, footer остаётся внутри viewport, а поля складываются в одну колонку.
|
||
|
||
## Что принадлежит приложению
|
||
|
||
- route/state выбранного раздела;
|
||
- данные профиля;
|
||
- медиа и содержание stage;
|
||
- пункты navigation;
|
||
- предметное содержимое content window.
|
||
|
||
Shell владеет геометрией, слоями, переходами и breakpoint-поведением. См. готовый путь подключения в `docs/CONSUMPTION.md`.
|