NODEDC_DESIGN_GUIDELINE/docs/APPLICATION_TEMPLATE.md

4.9 KiB
Raw Permalink Blame History

Шаблон приложения

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 и остаётся доступным при переходе между разделами; отдельные карточки не рисуют собственные копии этой кнопки.

Постоянный переключатель режима или темы располагается в центральной группе AppHeader рядом с primary navigation — это контракт SEO Mode, а не действие отдельного content window. ApplicationPanel.headerTools остаётся только для инструментов, относящихся к открытому окну. Если приложение использует 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.