Printorian

ФЕРМА 3D-ПЕЧАТИ · ПРОЗРАЧНАЯ ЦЕНА · АВТОМАТИЧЕСКОЕ РАСПРЕДЕЛЕНИЕ ЗАДАНИЙ

ПЕРЕКЛЮЧАЕТСЯ НА ВСЕХ ЭКРАНАХ

Экраны

ВСЕ ЭКРАНЫ — СТАТИЧЕСКИЕ HTML + CSS 3 ФАЙЛА СТИЛЕЙ

Принципы

Линия, а не заливка

Контраст создаёт волосяная линия на чёрном, а не серая плашка. Поэтому интерфейс читается как прибор, а не как набор карточек. Углы — скобки, а не рамки: они очерчивают область, не запирая её.

Цвет = состояние

Всё монохромно, пока что-то не происходит. Цветной пиксель всегда означает состояние машины: печатает, свободен, внимание, ошибка. Ни один акцент не декоративен.

Число важнее подписи

Везде табличные цифры и выключка вправо, чтобы значения сравнивались взглядом по вертикали. Под ценой всегда стоит основание расчёта — это то, ради чего вся система и строится.

Палитра

TOKENS.CSS

VOID · #000000

RAISED · ПАНЕЛИ

INSET · ПОЛЯ ВВОДА

LINE · ВОЛОСЯНАЯ

LIVE · В РАБОТЕ

GOOD · ГОТОВО

WARN · ВНИМАНИЕ

BAD · ОШИБКА

Типографика

ORBITRON · CHAKRA PETCH · SHARE TECH MONO

АБВГД

01234

DISPLAY · ОДИН РАЗ НА ЭКРАН · ЗАГОЛОВОК-ПЛАКАТ

HV-H · ЗАГОЛОВОК ПАНЕЛИ

HV-LABEL · ПОДПИСЬ ПОЛЯ

HV-MONO · 1 234.56 ₽ · 23.5 Ч

HV-MICRO · ОСНОВАНИЕ РАСЧЁТА, ТЕХНИЧЕСКАЯ СНОСКА

Проза — единственное место, где отменяется разрядка и разрешён строчный регистр. Всё остальное — прописные с трекингом.

Оконная обвязка

ОДИНАКОВА НА ВСЕХ ЭКРАНАХ

Раздел :: Название

CODE :: 2AFPQJJTVNGDOBFF PRESET :: LISTING.5X7

PRINTORIAN OS ./v2.0

C:/PRINTORIAN/РАЗДЕЛ/ОБЪЕКТ

STATUS :: ONLINE

ТАБ — ГДЕ ВЫ · МЕТА — ИДЕНТИФИКАТОРЫ ЗАПУСКА · ПУТЬ — ПОЛОЖЕНИЕ В ДАННЫХ

Контейнеры

hv-frame

СКОБОЧНЫЕ УГЛЫ · ОСНОВНАЯ ОБЛАСТЬ

hv-frame--live

ЖИВЫЕ ДАННЫЕ · ПОТОК СОБЫТИЙ

hv-panel

ТЕЛО ПАНЕЛИ

ПОДВАЛ

Данные

Строки с отточием

Материал412.8 Г × 2.94 ₽/Г1 213 ₽
Скидка за объём− 396 ₽
Срочное производство+ 1 320 ₽

Итого6 016 ₽

За штуку601.60 ₽


P-01	Печатает	2 418 ч
P-05	Свободен	640 ч
P-04	Ошибка	1 140 ч
P-08	Не в сети	220 ч

ЗАГОЛОВКИ СОРТИРУЮТ · ТЕГИ ФИЛЬТРУЮТ · СЧЁТЧИК ОПИСЫВАЕТ ВЕСЬ НАБОР

Индикаторы

Прогресс

63%

34%

Печатают сейчас 07 / 12 ЗАГРУЗКА ПАРКА 58%

Ход заказа

Оплачен

08.08 14:07

Подготовка

08.08 14:22

В очереди

08.08 15:40

Назначен

09.08 14:22

Печатается

63%

Постобработка

—

Контроль

—

Упаковка

—

Отправлен

—

Управление

Текстовое поле

Выпадающий список

Ползунок 100%

ФлажокС пояснением под подписью

Перетащите STL / 3MFИЛИ НАЖМИТЕ ДЛЯ ВЫБОРА · ДО 200 МБ

Как это встраивается

tokens.css — единственное место, где принимаются решения о цвете и метрике. Переменные названы --hv-*, чтобы жить рядом с текущими --pr-* и не конфликтовать во время перехода.

harvester.css — компоненты. Каждый класс уже соответствует тому, что рисует существующий React: .hv-table ↔ DataTable, .hv-tag ↔ StatusTags, .hv-leader ↔ PriceBreakdown, .hv-option__delta ↔ DeltaPreview.

js/kit.js при интеграции удаляется — он существует только чтобы шаблоны можно было щёлкать при просмотре.

Соответствие компонентов

Класс	Существующий компонент
.hv-table	packages/ui · DataTable
.hv-tag	packages/ui · StatusTags
.hv-leader	packages/ui · PriceBreakdown
.hv-option__delta	packages/ui · DeltaPreview
.hv-state	fleet · printer.state.*
.hv-pipe	ordering · OrderStatus
.hv-appbar	apps/web · App.tsx nav