Компоненты интерфейса

Единая библиотека компонентов интерфейса биллинга: состав, боковые панели, поиск внутри раздела и устройство библиотеки.

Единые компоненты интерфейса

Каталог живёт в Настройки → Лицензия и расширения → Единые компоненты (/admin/settings/components/) и содержит 59 компонентов с описанием, публичным API, местами применения и живыми демо. Среди последних добавленных:

• SmitDrawer — боковая панель проекта: карточки склада, тикеты, профиль, настройки AI. Панели складываются стопкой, закрываются по Esc и клику мимо, возвращают фокус на кнопку, из которой открылись.
• SmitIconSelect — селект с иконками; на нём все фильтры «Линейка услуг».
• SmitTable — таблица-основа: карточки на телефоне плюс перетаскивание, ширина и состав колонок с сохранением в аккаунте.
• SmitOrgSwitch — смена организации у объекта: меню, подтверждение со списком последствий и запрос на сервер.
• SmitInfiniteTable.fromArray — порционная отрисовка уже загруженного списка: строки рисуются по мере прокрутки.

Библиотека переиспользуемых UI-компонентов админки — единый визуальный язык вместо десятков локальных копий одной и той же логики. Каждый компонент — самодостаточный <script> без сборки и внешних зависимостей: подключается один раз в base_adminlte.html, публикует своё API в window.* и работает в любом разделе. Все компоненты поддерживают тёмную тему, мобильную вёрстку и prefers-reduced-motion.

Живой каталог с демо: /admin/settings/components/ — карточка на каждый компонент с описанием, API и работающим примером.

Состав библиотеки

Боковые панели: одна механика на весь биллинг

Боковая панель одна на весь биллинг: раздел передаёт заголовок, иконку, вкладки и содержимое, а затемнение, обработку Esc, блокировку прокрутки и порядок слоёв (карточка клиента → видео) берёт на себя компонент.

• Стопка. Панель, открытая поверх другой, ложится сверху и слегка сдвигает нижнюю. Esc и клик мимо закрывают только верхнюю — предыдущая остаётся там, где вы её оставили.
• Содержимое по адресу. Пока грузятся данные, показывается скелет; если запрос не прошёл — «Повторить», а не пустая панель.
• Возврат фокуса. После закрытия фокус возвращается на кнопку или строку таблицы, из которой панель открыли — с клавиатуры работать можно без мыши.
• На телефоне панель занимает весь экран, закрывается свайпом вниз по заголовку и кнопкой «Закрыть».

flowchart LR
    T["Строка таблицы
или кнопка"] --> D1["Панель 1
карточка позиции"]
    D1 --> D2["Панель 2
карточка единицы"]
    D2 --> D3["Панель 3
вложенная — видео, IPTV"]
    D3 -. "Esc / клик мимо" .-> D2
    D2 -. "Esc / клик мимо" .-> D1
    D1 -. "закрытие" .-> T

Поиск внутри раздела

В разделах настроек десятки полей и до тринадцати вкладок. Строка поиска стоит в одной линии с полосой вкладок и ищет только по своему разделу — глобальный поиск клиентов живёт в шапке админки, и путать их не нужно. Курсор в поле ставит Ctrl+K из любого места страницы.

Подсказка показывает путь «Вкладка · Карточка» и значок подраздела. Если настройка на открытой вкладке — поле подсвечивается на месте; если на соседней — раздел откроется на ней и подсветит нужное поле.

flowchart LR
    Q["Оператор вводит
«порог»"] --> IDX["Индекс раздела"]
    IDX --> D["Поля открытой
страницы"]
    IDX --> J["Серверный список
(вкладки грузятся
по одной)"]
    IDX --> F["Свой источник:
карточки, строки таблиц"]
    D --> HIT["Подсказка:
Порог суммы (₽)
Сообщения · Низкий баланс"]
    J --> HIT
    F --> HIT
    HIT --> HERE{"Настройка
на этой вкладке?"}
    HERE -- да --> MARK["Показать вкладку
и подсветить поле"]
    HERE -- нет --> GO["Перейти на вкладку
?find=<поле>"]
    GO --> MARK

Список полей для разделов, где вкладки грузятся по одной, собирается из самих шаблонов вкладок — вести его руками не нужно: добавили поле в форму, оно само появилось в поиске. Разбор выполняется один раз после обновления биллинга.

flowchart TD
    T["Шаблоны вкладок раздела"] --> P["Разбор: подпись ↔ поле
+ карточка, в которой оно лежит"]
    P --> C["Список настроек раздела
(«Настройки системы» — 124 поля)"]
    C --> S["Строка поиска"]
    N["Новое поле в форме"] --> T

Где вкладки лежат на одной странице (Интеграции, Сообщения), поиск берёт поля прямо со страницы и сам переключает вкладку, в которой нашлась настройка. Где искать нужно не поле, а блок (профиль сотрудника) — в подсказки попадают заголовки карточек.

Как это устроено

Каждый компонент следует одному паттерну: самовыполняющаяся функция с защитой от повторной инициализации (if (window.X) return), публичное API в window.X, инъекция своих стилей в <head>. CSS подключается в шапке base_adminlte.html, JS — в подвале. Разделу достаточно вызвать API или разметить элемент data-атрибутом — компонент сам себя инициализирует.

flowchart LR
    REG["base_adminlte.html
CSS в head + JS в подвале"] --> BUS["window.OrgBadge / SmitPhone /
ProfileSelect / SmitToast / …"]
    BUS --> M1["Разметка: data-org-badge
data-smit-phone / data-smit-daterange"]
    BUS --> M2["JS-вызов: OrgBadge.html id
ProfileSelect.create"]
    M1 --> RENDER["Автоинициализация
+ MutationObserver для AJAX"]
    M2 --> RENDER
    RENDER --> THEME["Тёмная тема · мобильная вёрстка
prefers-reduced-motion · a11y"]