Единая система компонентов терминала
Здесь собраны только те элементы, которые реально используются в интерфейсе терминала 800×480. Стили, размеры и состояния — 1:1 с продуктом. Если элемента нет ниже — его нет и в интерфейсе.
Палитра
Семантические токены OKLCH из src/styles.css. Бренд-акценты: #63BB8E, #27A0DB, #0771B8.
Типографика
Inter — единственный шрифт интерфейса. Используется и для текста, и для чисел/идентификаторов (с tabular-nums для моноширинных цифр).
Шрифт и размеры
В системе один шрифт — Inter. Размеры — фиксированная шкала, не используйте промежуточные значения.
Поля ввода
Только те паттерны, что реально встречаются: токен/адрес сервера, поиск, Wi-Fi список.
Бейджи статусов
Используются на карточках заказов и станков. Стиль — outline + 10% заливка.
Прогресс-линии
Тонкие линии (h-1 / h-1.5) с градиентом info → accent → primary. Используются в выполнении и на карточках заказов.
Панели и карточки
Базовые контейнеры .panel и .panel-elevated с типовым содержимым из реальных экранов.
Шапка терминала
Компонент TerminalHeader. Высота — 56px (h-14). Все системные кнопки и Wi-Fi — 42×42 px. Используется на всех экранах.
| Проп | Тип / значение | Описание |
|---|---|---|
| eyebrow | string? | Маленькая надпись над заголовком |
| title | string | Заголовок экрана. Обязательный |
| terminalId | string? | ИД терминала справа (≥sm breakpoint) |
| connectionState | "ok" | "unauth" | "off" | "unknown" | Статус блока «Онлайн». По умолчанию ok |
| onBack | () => void? | Кнопка «Назад» слева (42×42) |
| onOpenSettings | () => void? | Кнопка «Настройки» (42×42) |
| onLogout | () => void? | Кнопка «Выход» (42×42, destructive) |
| extra | ReactNode? | Доп. слот между ИД и системными кнопками |
| hideWifi | boolean? | Скрыть индикатор Wi-Fi (42×42) |
| backDisabled | boolean? | Заблокировать кнопку «Назад» |
| backDisabledTitle | string? | Подсказка при блокировке Back |
Диалог ввода количества
Полноэкранный диалог из WorkScreen для списания и добавления материалов. Шаг 1 — выбор материала плитками 88px, шаг 2 — pinpad h-16 + большой num-display.
- Шапка h-12: иконка Package + заголовок, кнопка X 44×44
- Шаг 1: сетка плиток материала 88px высотой, 3 колонки
- Шаг 2: левая панель — большой num-display text-6xl, текущее факт/план, кнопки НАЗАД (1fr) + ДЕЙСТВИЕ (2fr) высотой h-12
- Pinpad справа · ширина 320px · клавиши h-16 text-2xl, DEL — destructive
- Цвет акции: accent — СПИСАТЬ, info — ДОБАВИТЬ
| Проп | Тип / значение | Описание |
|---|---|---|
| max-width контейнера | 760 px | max-w-[760px] |
| высота шапки | 48 px | h-12 |
| плитка материала | 88 px | h-[88px], grid-cols-3 |
| клавиша pinpad | 64 px | h-16, text-2xl |
| правая колонка pinpad | 320 px | grid-cols-[1fr_320px] |
| цифровой дисплей | text-6xl black | min-h-[120px] |
| кнопки действий | 48 px | h-12, flex 1 / flex 2 |
Диалог подтверждения
ConfirmDialog. Используется при выходе с экрана «Выполнение» (Назад / Выход) и завершении смены. Variants: danger / warning.
| Проп | Тип / значение | Описание |
|---|---|---|
| open | boolean | Открыт ли диалог |
| title | string | Заголовок (label-tag в шапке) |
| message | ReactNode | Текст подтверждения |
| confirmLabel | string? | Текст основной кнопки. По умолчанию «ДА» |
| cancelLabel | string? | Текст отмены. По умолчанию «ОТМЕНА» |
| variant | "danger" | "warning" | Цвет основной кнопки. По умолчанию danger |
| onConfirm | () => void | Колбэк подтверждения |
| onCancel | () => void | Колбэк отмены / закрытия |
Иконки
Lucide React. Размеры: size-3 / size-4 / size-5. currentColor.