Add Launcher application template and icon system
This commit is contained in:
DCCONSTRUCTIONS
+7
-3
@@ -19,6 +19,8 @@
|
||||
- Dropdown/Select;
|
||||
- Window/Confirmation;
|
||||
- AppHeader.
|
||||
- ApplicationShell/ApplicationPanel;
|
||||
- Icon/IconButton.
|
||||
|
||||
Локальные реализации удаляются только после функционального и визуального сравнения.
|
||||
|
||||
@@ -40,14 +42,17 @@
|
||||
|
||||
## Новые приложения
|
||||
|
||||
Шаблон приложения пока не входит в scope. До его появления новый проект должен:
|
||||
Новый React-проект начинает с `ApplicationShell`:
|
||||
|
||||
- установить опубликованные NODE.DC UI packages;
|
||||
- выбрать theme и accent;
|
||||
- использовать AppHeader и Window/Dropdown primitives;
|
||||
- передать фиксированный AppHeader, stage, navigation и content;
|
||||
- использовать Window/Dropdown и канонический Icon вместо локальных реализаций;
|
||||
- проверять registry перед созданием локального control;
|
||||
- хранить доменные компоненты у себя.
|
||||
|
||||
Нижняя service rail добавляется только продуктам с витриной сервисов. В обычном оконном приложении она отсутствует.
|
||||
|
||||
## Adoption matrix
|
||||
|
||||
| Приложение | Текущий источник | Целевой adapter | Первый набор |
|
||||
@@ -66,4 +71,3 @@
|
||||
- не поддерживать отдельную тему путём fork компонента;
|
||||
- не использовать legacy Engine inspector как промежуточный канон;
|
||||
- не удалять production local component до проверки package replacement.
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
# Шаблон приложения
|
||||
|
||||
`ApplicationShell` — канонический форм-фактор нового приложения NODE.DC. Он повторяет устойчивую механику Launcher/Hub, но не включает продуктовую витрину и нижнюю service rail.
|
||||
|
||||
## Состав
|
||||
|
||||
1. `AppHeader` — фиксированная трёхосевая шапка `logo / workspace + navigation / profile`.
|
||||
2. `stage` — главное медиа- или предметное окно приложения.
|
||||
3. `navigation` — левая панель шириной `clamp(332px, 19.5vw, 352px)`.
|
||||
4. `content` — отдельное рабочее окно справа от навигации.
|
||||
5. `ApplicationPanel` — заголовок, действия expand/close и независимо прокручиваемое тело контента.
|
||||
|
||||
Позиции шапки не пересчитываются под конкретное приложение. Меняются подписи, доступные navigation actions, профиль и содержимое stage.
|
||||
|
||||
## Состояния desktop
|
||||
|
||||
| Состояние | Навигация | Content window | Stage |
|
||||
| --- | --- | --- | --- |
|
||||
| Главная | закрыта | закрыто | занимает рабочую область |
|
||||
| Guideline открыт | слева | закрыто | сдвинут вправо |
|
||||
| Оконный режим | слева | средняя колонка | остаётся видимым справа |
|
||||
| Развёрнутый режим | слева | до правого края | уезжает за viewport |
|
||||
|
||||
Между панелями используется 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-поведением.
|
||||
@@ -27,6 +27,8 @@ Core не зависит от React.
|
||||
|
||||
`@nodedc/ui-react` предоставляет компоненты для Launcher/Hub, Engine, Ops и React-модулей. Компоненты контролируемые: бизнес-состояние остаётся у приложения, а визуальное и базовое интерактивное поведение принадлежит библиотеке.
|
||||
|
||||
`ApplicationShell` и `ApplicationPanel` образуют готовый launcher-style шаблон нового React-приложения. `Icon` предоставляет ограниченный аудированный словарь glyph, чтобы приложения не импортировали vendor-наборы независимо.
|
||||
|
||||
### DOM
|
||||
|
||||
`@nodedc/ui-dom` предоставляет контроллеры для CMS, BIM Viewer и других приложений без React. DOM-слой не создаёт вторую стилизацию: он использует те же классы и токены `@nodedc/ui-core`.
|
||||
@@ -44,6 +46,8 @@ Core не зависит от React.
|
||||
- floating layers;
|
||||
- окна;
|
||||
- навигационная геометрия;
|
||||
- application shell и фиксированная шапка;
|
||||
- канонический набор иконок;
|
||||
- inspector/settings layout;
|
||||
- состояния загрузки, пустоты и ошибки.
|
||||
|
||||
@@ -76,4 +80,3 @@ Core не зависит от React.
|
||||
- major — удаление/переименование экспорта или несовместимая геометрия/семантика.
|
||||
|
||||
Приложение должно зависеть от опубликованной версии пакета, а не от копии файлов или произвольного commit URL.
|
||||
|
||||
|
||||
+22
-1
@@ -95,11 +95,32 @@ Pill navigation для верхней панели и компактного п
|
||||
|
||||
В Hub-форме центр состоит из круглого workspace trigger и segmented navigation. Справа используется единая profile-group поверхность с иконкой, подписью и круглым avatar. Эти элементы нельзя заменять случайными standalone-кнопками, сохраняя только приблизительную позицию.
|
||||
|
||||
В каноническом `ApplicationShell` шапка фиксирована. Её три оси не двигаются при открытии navigation/content и не зависят от ширины предметного контента.
|
||||
|
||||
## ApplicationShell и ApplicationPanel
|
||||
|
||||
Общий шаблон приложения по механике Launcher/Hub: фиксированный `AppHeader`, центральный stage, левая navigation panel и отдельное правое content window.
|
||||
|
||||
- на главной виден только stage;
|
||||
- открытая navigation сдвигает stage;
|
||||
- content открывается справа от navigation;
|
||||
- expand растягивает content до правого края и уводит stage за viewport;
|
||||
- на мобильном navigation и content используют всю область под шапкой последовательно;
|
||||
- нижняя service rail не входит в шаблон — это элемент витрины Launcher.
|
||||
|
||||
Точные состояния и размеры зафиксированы в `docs/APPLICATION_TEMPLATE.md`.
|
||||
|
||||
## AdminNavigationPanel
|
||||
|
||||
Левая выезжающая панель Hub/Launcher. Библиотека владеет оболочкой `352 px`, радиусом `21.6 px`, внутренними отступами, full-bleed context/navigation pills, круглыми icon surfaces и анимацией появления. Приложение передаёт workspace/company, маршруты, active id и footer identity.
|
||||
|
||||
На desktop открытая панель занимает отдельную колонку с зазором `12 px` до основного контента, а не перекрывает его затемнённым overlay.
|
||||
На desktop открытая панель занимает отдельную колонку с Launcher page gap `20 px` до content/stage, а не перекрывает их затемнённым overlay.
|
||||
|
||||
## Icon
|
||||
|
||||
`Icon` предоставляет только подтверждённый общий subset иконок. Каноническое имя описывает смысл (`close`, `expand`, `refresh`), а не конкретный путь SVG. Базовые размеры — `16`, `18` и `20 px`, stroke — `1.8`.
|
||||
|
||||
Поверхность, круглая форма, hit target, active и disabled состояния принадлежат `IconButton`, `Button` или navigation item. Полный список находится в `registry/icons.json` и `docs/ICONS.md`.
|
||||
|
||||
## StatusBadge
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
# Иконки
|
||||
|
||||
Канонический набор собран по реально используемым действиям Launcher/Hub, SEO, BIM Viewer и разрешённым новым участкам Engine. Полные vendor-наборы не являются частью дизайн-системы: наличие SVG в Font Awesome или export в Lucide не делает иконку канонической.
|
||||
|
||||
## Геометрия
|
||||
|
||||
| Контекст | Размер glyph | Hit target |
|
||||
| --- | ---: | ---: |
|
||||
| Плотная строка/label | `16px` | задаёт строка |
|
||||
| Обычная кнопка | `18px` | `46.72px` круг или кнопка с текстом |
|
||||
| Крупное оконное действие | `20px` | `46.72px` круг |
|
||||
|
||||
Базовый stroke — `1.8`. Иконка наследует `currentColor`. Фон и active/disabled/hover состояния принадлежат `IconButton`, `Button`, navigation item или другому компоненту поверхности.
|
||||
|
||||
## Группы
|
||||
|
||||
| Группа | Канонические имена |
|
||||
| --- | --- |
|
||||
| Окно и слой | `close`, `plus`, `expand`, `minimize`, `refresh`, `panel`, `apps` |
|
||||
| Навигация | `chevron-left`, `chevron-right`, `chevron-down`, `grid`, `list`, `sliders`, `search` |
|
||||
| Редактирование | `save`, `edit`, `trash`, `copy`, `upload`, `download`, `external` |
|
||||
| Состояние и доступ | `check`, `alert`, `activity`, `lock`, `key`, `shield`, `circle` |
|
||||
| Сущности | `profile`, `users`, `building`, `globe`, `database`, `network`, `inbox`, `mail` |
|
||||
| Контент | `image`, `video`, `file`, `folder`, `clipboard`, `settings` |
|
||||
|
||||
Живая таблица с названиями, поверхностями и размерами находится в разделе `Guideline → Иконки`. Машинный список — в `registry/icons.json`.
|
||||
|
||||
## Правило расширения
|
||||
|
||||
Новая иконка добавляется только после подтверждённого применения в продукте. Нужно выбрать семантическое имя, добавить export в `Icon`, запись в registry и specimen в каталоге. Локальный импорт иконки только ради немного другой формы запрещён.
|
||||
@@ -15,6 +15,8 @@
|
||||
|
||||
Для точной геометрии используются `src/widgets/top-bar/TopBar.tsx`, `src/widgets/admin-overlay/AdminOverlay.tsx` и `src/styles/globals.css`: трёхосевая шапка, круглый workspace trigger, segmented navigation, profile group и левая admin panel `352 px`.
|
||||
|
||||
`src/app/LauncherApp.tsx`, `src/widgets/service-stage/ServiceStage.tsx` и те же global styles подтверждают общий application shell: stage сдвигается при открытии navigation/content, а content разворачивается независимо. Нижняя ServiceRail исключена из общего шаблона как продуктовая часть витрины.
|
||||
|
||||
Существовавший `dc-ui-guideline` использован как исходный инвентарь. Он больше не должен развиваться как независимая копия после подключения центрального репозитория.
|
||||
|
||||
## SEO и CMS
|
||||
@@ -48,6 +50,10 @@ CMS подтверждает необходимость DOM-пакета без
|
||||
|
||||
Используется как ограничение архитектуры: общий UI должен работать без React. В baseline включены общие требования к toolbar, settings menu и glass select, но не BIM-domain controls.
|
||||
|
||||
## Аудит иконок
|
||||
|
||||
Launcher/Hub и SEO подтверждают Lucide как основной outline-язык; BIM Viewer использует Font Awesome в legacy/vendor-слое; Engine содержит локальные inline SVG. В библиотеку перенесён только пересекающийся семантический subset действий и сущностей. Полные vendor-каталоги и legacy Engine glyph не являются каноном.
|
||||
|
||||
## Почему код не копируется целиком
|
||||
|
||||
Исторические реализации содержат:
|
||||
|
||||
Reference in New Issue
Block a user