Продуктовые экраны ADMY

Инвентарь приложения frontend_old в терминах канона «42»: 126 роутов, 11 архетипов с порядком регионов и правилами, карта легаси → канон. Машинная проекция — /product-screens.json; подробный гайд для дизайнеров и ИИ — product-screens.md.

Архетипы

АрхетипЭкрановНазначение
report Отчёт-таблица44Метрики по срезу (даты, кампании, страны, источники) с фильтрами, итогами и экспортом.
list Список сущностей33Кампании, креативы, пользователи, домены: карточки или таблица с массовыми действиями и созданием.
editor Редактор сущности27Карточка кампании, площадки, пользователя: табы разделов, острова с полями, сводка сбоку, сохранение.
dashboard Дашборд4Сводка по роли: ключевые числа, графики, новости и быстрые переходы.
auth Вход и регистрация5Вход, регистрация, восстановление пароля, подтверждение — форма на карточке поверх тёмного фона.
wizard Мастер создания2Создание сущности за несколько шагов: тип, настройки, подтверждение.
chat Чат поддержки1Лента сообщений с вложениями и полем ввода.
tool Инструмент2Расчёт или преобразование: форма параметров и результат таблицей.
settings Настройки2Профиль, уведомления, трекер: табы разделов и острова с переключателями.
docs Документация2Статьи, API и справка внутри продукта.
service Служебные экраны4404, результат оплаты, мобильное меню «ещё», корневой layout.

Отчёт-таблица 44

Метрики по срезу (даты, кампании, страны, источники) с фильтрами, итогами и экспортом.

РегионКомпоненты канонаКак собирать
headerpage-headerзаголовок отчёта; в действиях справа — экспорт и обновление (`button` ghost со значком)
filtersisland,input-date-range,combobox,segmented-control,button,drawerпериод первым, затем сущности (combobox с подгрузкой), режимы include/exclude; больше четырёх фильтров — в Drawer по кнопке
toolbaraction-panel,input,tagпоиск, сортировка и применённые фильтры чипами над таблицей
tabletable,column-settings,pagination`fixed` первая колонка с названием, `total` для метрик, `expandable` только для разбивки по часам/дням, `sortable`, `size="s"` для плотных отчётов, `column-settings` при более чем восьми колонках
  • must — Числовые колонки выровнены по `end`, первая колонка заморожена и содержит название сущности.
  • must — Строка итогов есть, если в таблице есть суммируемые метрики.
  • should — Фильтр периода стоит первым; выбор сущностей — Combobox с ленивой подгрузкой.
  • must-not — Не раскрывать строки без вложенной разбивки: `expandable` только там, где есть дети.

Мобильный вариант. Page Header(m), подстраницы через Page Navigation, фильтры в Drawer, таблица с одной замороженной колонкой и `size="s"`.

Экраны архетипа (44)
РоутНазначениеКомпоненты dsТаблица
/advertiser-reports/by-campaignsОтчёт рекламодателя по кампаниям (с раскрытием строк, пагинацией)action-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,tableexpand, fixed, sort, totals
/advertiser-reports/by-conversionОтчёт рекламодателя по конверсиям (пагинация, фильтры-компараторы)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,table#cell, sort, totals
/advertiser-reports/by-countryОтчёт рекламодателя по странамaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tablefixed, sort, totals
/advertiser-reports/by-dateОтчёт рекламодателя по датам: таблица с раскрытием по часам, итоги, вид «график» (ChartReportView + ModalSettingsChart)action-panel,aside,button,chart,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tableexpand, sort, totals
/advertiser-reports/by-ispОтчёт рекламодателя по ISPaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,segmented-control,select,tablesize, sort, totals
/advertiser-reports/by-sourceОтчёт рекламодателя по источникам: действия над source id (ставка, добавить/удалить в optlist)action-panel,alert,aside,button,column-settings,combobox,dialog,drawer,input,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,table#cell, show-empty, sort, totals
/advertiser-reports/by-userОтчёт рекламодателя по пользователям (админ)action-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,tablefixed, sort, totals
/analysis/by-dspАнализ по DSPaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,table#cell, fixed, sort, totals
/analysis/dsp-by-daysАнализ синхронизации DSP по днямaction-panel,alert,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,table#cell, fixed, sort, totals
/audiences-reports/by-dateОтчёт по аудиториям по датам (таблица с итогами)action-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,tablesort, totals
/dsp-dashboardДашборд DSP (таблица с итогами)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,segmented-control,select,table#cell, fixed, sort, totals
/dsp-reports/by-countryОтчёт DSP по странамaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tablesort, totals
/dsp-reports/by-dateОтчёт DSP по датам (раскрытие, график)action-panel,aside,button,chart,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tableexpand, sort, totals
/dsp-reports/by-logsОтчёт DSP по логам (dev/prod)action-panel,alert,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,tablesort, totals
/dsp-reports/by-sourceОтчёт DSP по источникамaction-panel,alert,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,tablesort, totals
/dsp-reports/by-userОтчёт DSP по пользователямaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,tablefixed, sort, totals
/endpoints-dashboardДашборд эндпоинтов (таблица с итогами и фильтрами)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,segmented-control,select,table#cell, fixed, size, sort, totals
/endpoints-dashboard-inactiveДашборд неактивных эндпоинтовaction-panel,aside,button,column-settings,page-header,table#cell, fixed, size, sort, totals
/estimation-tools/by-geoИнструмент оценки объёма трафика по гео (локальная таблица, фильтры)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,page-navigation,segmented-control,select,table#cell, local, sort
/estimation-tools/by-trafficИнструмент оценки по типу трафика (локальная таблица, фильтры)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,page-navigation,segmented-control,select,table#cell, local, sort
/lp-reports/by-countryОтчёт по лендингам по странамaction-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,page-navigation,segmented-control,table#cell, fixed, sort, totals
/lp-reports/by-dateОтчёт по лендингам по датам (раскрытие)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,page-navigation,segmented-control,table#cell, expand, fixed, sort, totals
/publisher-reports/by-countryОтчёт паблишера по странамaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tablesort, totals
/publisher-reports/by-dateОтчёт паблишера по датам (раскрытие по часам, график)action-panel,aside,button,chart,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tableexpand, sort, totals
/publisher-reports/by-domainОтчёт паблишера по доменамaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,tablefixed, sort, totals
/publisher-reports/by-rejectsОтчёт паблишера по отклонённым запросамaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,tablesort, totals
/publisher-reports/by-sourceОтчёт паблишера по источникамaction-panel,alert,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,tablesort, totals
/publisher-reports/by-userОтчёт паблишера по пользователямaction-panel,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,tablefixed, sort, totals
/referral/reportРеферальный отчёт пользователяaction-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,pagination,segmented-control,tablesize, sort, totals
/referral/report-adminРеферальный отчёт (админ)action-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,pagination,segmented-control,table#cell, size, sort, totals
/reports/campaigns-by-endpointКросс-отчёт кампании по эндпоинтуaction-panel,alert,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,page-navigation,segmented-control,select,table#cell, fixed, sort, totals
/reports/dsp-by-endpointКросс-отчёт DSP по эндпоинтуaction-panel,alert,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,table#cell, fixed, sort, totals
/reports/endpoints-by-campaignКросс-отчёт эндпоинты по кампанииaction-panel,alert,aside,button,column-settings,combobox,drawer,input,input-date-range,island,page-header,page-navigation,segmented-control,select,table#cell, fixed, sort, totals
/reports/endpoints-by-dspКросс-отчёт эндпоинты по DSPaction-panel,alert,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,table#cell, fixed, sort, totals
/tch/commonTCH common (dev): сводная таблица (TableSimple) с фильтрами, IncludeExcludeaction-panel,alert,aside,button,combobox,drawer,grid,input,input-date-range,island,page-header,segmented-control,stack
/tch/common-devTCH common-dev: сводная таблица (TableSimple) с фильтрами, wide-Islandalert,aside,button,combobox,drawer,grid,input-date-range,island,page-header,pagination,segmented-control,select,stack
/tch/endpoints-reportОтчёт Traffic Check по эндпоинтамaction-panel,alert,aside,button,column-settings,combobox,drawer,input-date-range,island,page-header,segmented-control,table#cell, size, sort, totals
/tch/reportОтчёт Traffic Check по ссылкамaction-panel,alert,aside,button,column-settings,combobox,drawer,input-date-range,island,loader,page-header,pagination,segmented-control,select,table#cell, size, sort, totals
/ureportУниверсальный отчёт-конструктор: TableUniversal, DragAndDrop порядка колонок, модальные фильтры (pinnable), высота строкaction-panel,alert,aside,button,checkbox,column-settings,combobox,divider,drag-and-drop,flipper,grid,input-date-range,page-header,select,table
/widgets-reports/by-countryОтчёт по виджетам по странамaction-panel,aside,button,checkbox,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tablesort, totals
/widgets-reports/by-date/:date?Отчёт по виджетам по датам (раскрытие)action-panel,aside,button,checkbox,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,select,tableexpand, sort, totals
/widgets-reports/by-siteОтчёт по виджетам по сайтамaction-panel,aside,button,checkbox,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,segmented-control,select,tablefixed, sort, totals
/widgets-reports/by-sourceОтчёт по виджетам по источникамaction-panel,aside,button,checkbox,column-settings,combobox,drawer,input-date-range,island,loader,page-header,page-navigation,pagination,segmented-control,select,tablesort, totals
/widgets-reports/by-widgetОтчёт по виджетамaction-panel,aside,button,checkbox,column-settings,combobox,drawer,input-date-range,island,page-header,page-navigation,segmented-control,tablefixed, sort, totals

Список сущностей 33

Кампании, креативы, пользователи, домены: карточки или таблица с массовыми действиями и созданием.

РегионКомпоненты канонаКак собирать
headerpage-header,buttonзаголовок и одно акцентное действие «создать»
filtersisland,combobox,segmented-control,input,drawerстатус, владелец, поиск; редкие фильтры — в Drawer
toolbaraction-panel,toggle-group,tagмассовые действия над выбранным, переключение вида карточки / таблица, применённые фильтры
listcard,table,status,badge,paginationкарточки в Grid или таблица с `selectable`; статус — Status или Badge; страницы — Pagination
modalsdialog,form-modal,entities-list-dialogсоздание — Form Modal, удаление — alertdialog с названием объекта, вставка списка ID — Entities List Dialog
  • must — Одно акцентное действие на экране — создание сущности; остальные — default или ghost.
  • must — Удаление подтверждается диалогом с конкретным объектом и последствием.
  • should — Вид карточки / таблица переключается Toggle Group и запоминается.

Мобильный вариант. Карточки колонкой, фильтры в Drawer, массовые действия в Action Panel снизу, создание в Form Modal.

Экраны архетипа (33)
РоутНазначениеКомпоненты dsТаблица
/articlesСтатьи базы знаний (админ): таблица, фильтры, удалениеaction-panel,aside,button,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,segmented-control,table,tag#cell, fixed, totals
/audiencesАудитории: карточки/таблица, модалки создания, удаления и авто-импорта UIDaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,grid,icon,input,input-date-range,island,page-header,pagination,segmented-control,stack,table,tag,textarea#cell, fixed
/blacklist-dspЧёрный список источников по DSP: таблица с checkbox, массовые действияaction-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,pagination,segmented-control,table#cell, checkbox, disabled-lines, sort
/blacklist-endpointЧёрный список источников по эндпоинтам: таблица с checkbox, массовые действияaction-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,pagination,segmented-control,table#cell, checkbox, disabled-lines, sort
/blacklist-selfserveЧёрный список источников self-serve: таблица с checkbox и оверлеем отключённых строк, массовые действия, экспортaction-panel,aside,button,column-settings,combobox,drawer,input,input-date-range,island,loader,page-header,pagination,segmented-control,table#cell, checkbox, disabled-lines, sort
/campaignsСписок рекламных кампаний (self-serve): вид карточки/таблица, фильтры, массовые действия (активность, баланс, усреднение), архив/восстановление, копирование, модалка креативовaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,page-navigation,pagination,radio,segmented-control,stack,table,tag#cell, checkbox, fixed
/campaigns-analysisСписок анализов кампаний (карточки CardCampaignAnalysis), модалка создания (кампания + эндпоинт)action-panel,alert,aside,button,card,column-settings,combobox,dialog,icon,input,page-header,stack
/cashbackКэшбэк пользователей: таблица с checkbox, массовое обновление уровней (модалка)action-panel,aside,button,column-settings,combobox,dialog,drawer,grid,input-date-range,island,loader,menu,page-header,pagination,segmented-control,stack,table,tag#cell, checkbox, fixed, size, wide
/companiesКомпании (white-label сети): карточки, удалениеaction-panel,alert,aside,button,card,column-settings,dialog,icon,input,page-header,pagination,stack,tag
/creativesСписок креативов: карточки/таблица, фильтры, массовые действия (статусы, активность, URL), копирование в кампанию, удалениеaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,page-navigation,pagination,segmented-control,stack,table,tag#cell, checkbox, fixed
/demand-price-limitsЛимиты цен спроса (DPL): карточки, удалениеaction-panel,alert,aside,button,card,dialog,grid,page-header,stack
/domainsДомены: карточки, удалениеaction-panel,alert,aside,button,card,column-settings,dialog,icon,input,page-header,pagination,stack,tag
/dspDSP (покупатели трафика): карточки/таблица, создание, копирование, удалениеaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/dsp-analysisАнализ DSP: карточки, модалка созданияaction-panel,alert,aside,button,card,column-settings,combobox,dialog,icon,input,page-header,stack
/endpointsЭндпоинты (источники трафика паблишера): карточки/таблица, фильтры, копирование, удалениеaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,loader,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/endpoints-analysisАнализ эндпоинтов: карточки, модалка созданияaction-panel,alert,aside,button,card,column-settings,combobox,dialog,icon,input,page-header,stack
/financeФинансы: виджеты баланса/кэшбэка, список операций (карточки/таблица), пополнение (способы оплаты), запрос выплатыaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,grid,input-date-range,island,menu,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/lpЛендинги: карточки, удалениеaction-panel,alert,aside,button,card,dialog,page-header,pagination,stack
/lptШаблоны лендингов: карточкиaction-panel,alert,aside,button,card,dialog,page-header,stack
/newsНовости (админ): списокalert,aside,button,card,page-header,stack
/optlistsСписки оптимизации (optlists): карточки/таблица, фильтры, модалка созданияaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,page-navigation,pagination,segmented-control,select,stack,table,tag#cell, fixed
/payment-systemsПлатёжные системы: карточки, фильтры, модалка созданияaction-panel,aside,button,card,column-settings,combobox,dialog,drawer,grid,icon,input-date-range,island,page-header,pagination,segmented-control,select,stack,tag
/referral/financeРеферальные финансы: карточки/таблица выплат, создание, удалениеaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,input-date-range,island,menu,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/rolesРоли: карточкиaction-panel,alert,aside,button,card,dialog,page-header,stack
/sitesСайты паблишера: карточки/таблица, модалка созданияaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/smart-optlistsУмные списки оптимизации: карточки/таблица, модалка созданияaction-panel,alert,aside,button,card,column-settings,combobox,dialog,icon,input,input-date-range,island,page-header,page-navigation,pagination,segmented-control,stack,table,tag#cell, fixed
/tag-groupsГруппы тегов: карточкиaction-panel,alert,aside,button,card,dialog,page-header,stack
/tagsТеги: карточки, удалениеaction-panel,alert,aside,button,card,dialog,page-header,stack
/tch/linksTraffic Check: список ссылок (карточки/таблица), модалка созданияaction-panel,alert,aside,button,card,column-settings,combobox,dialog,grid,icon,input,page-header,pagination,select,stack,table,tag#cell, fixed
/userlogsЛоги пользователей (карточки), фильтрыaction-panel,alert,aside,button,card,combobox,drawer,input-date-range,island,menu,page-header,pagination,segmented-control,stack,tag
/usersПользователи: карточки/таблица, фильтры, вход под пользователем, удалениеaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/widgetsВиджеты (рекламные блоки сайтов): карточки/таблица, фильтрыaction-panel,alert,aside,button,card,column-settings,combobox,dialog,drawer,icon,input,input-date-range,island,page-header,pagination,segmented-control,stack,table,tag#cell, fixed
/worklogsРабочие логи (карточки CardWorklog с модалкой деталей), фильтрыaction-panel,alert,aside,button,card,combobox,drawer,input,input-date-range,island,page-header,pagination,segmented-control,select,stack

Редактор сущности 27

Карточка кампании, площадки, пользователя: табы разделов, острова с полями, сводка сбоку, сохранение.

РегионКомпоненты канонаКак собирать
headerpage-header,buttonстрелка назад, редактируемое название (`editable`), справа — сохранить и второстепенные действия
tabspage-navigationразделы редактора табами; активный — из маршрута
mainaside,island,stack,grid,input,select,combobox,textarea,switch,dualist,scheduler,file-upload,fields-group,combo,tag-inputострова по смыслу с заголовком, внутри Stack полей, 2–3 колонки через Grid; тяжёлые выборы — Dualist, расписание — Scheduler, креатив — File Upload с кадрированием
contextcard,user-line,amount,status,copy-fieldсводка сущности справа: владелец, статус, баланс, ID и ссылки для копирования
footerbuttonсохранение дублируется внизу длинной формы; сброс — default
  • must — Поля сгруппированы по островам с заголовком; обязательные помечены звёздочкой, подсказка — Hint.
  • must — Несохранённые изменения помечаются точкой `changed` у поля и предупреждением при уходе.
  • should — Колонок полей не больше трёх; связанные поля одной строки — Fields Group.
  • must-not — Не прятать сохранение в меню: акцентная кнопка всегда видна.

Мобильный вариант. Редактор открывается в Form Modal поверх списка: табы Page Navigation сверху, острова колонкой, сохранение в подвале.

Экраны архетипа (27)
РоутНазначениеКомпоненты dsТаблица
/articles/:id/:nav?Редактор статьи: заголовок/URL, компания, роль, Markdown-редактор (Editor)aside,button,card,combobox,input,island,page-header,stack
/audiences/:id/:nav?Редактор аудитории: имя, пользователь, конструктор правил (RuleBuilder/RuleInput)aside,button,card,combobox,grid,icon,input,island,label,page-header,select,stack,tag,user-line
/campaigns-analysis/:id/:nav?Карточка анализа кампании: таб general с параметрами и пользователемaside,badge,card,checkbox,grid,icon,island,page-header,page-navigation,stack,user-line
/campaigns/:id/:nav?Редактор кампании: 12 табов (general, filters, fast-filters, audiences-filter, opt-lists, rules, schedule, source-id-bidding, daily-spend-limits, push-other, experimental, _53), правая колонка с балансом, пользователем, тегами/гео, креативами, комментариемalert,amount,aside,badge,button,card,checkbox,combo,combobox,copy-field,description,dialog,divider,drawer,dualist,entities-list-dialog,fields-group,grid,icon,indicator,input,input-number,island,link,page-header,page-navigation,pagination,scheduler,segmented-control,select,stack,tag,tag-input,textarea,user-line
/companies/:id/:nav?Редактор компании: 11 табов (general, settings, themes с превью десктоп/моб, email, registration, self_serve, support_info, tracking_code, default_domains, max_prices, traffic_check)aside,button,checkbox,combo,divider,file-upload,grid,input,island,label,page-header,page-navigation,select,stack,tag-input,textarea
/creatives/:id/:nav?Редактор креатива: форма по типу трафика (_trafficTypes: banner, push, inpage_push, native, pop, video, interstitial, calendar_ios, tg_inpage_push, tg_rewarded, tg_video), превью, проверка домена, виджет кампании, загрузка изображений/видео/ZIPalert,amount,aside,badge,button,card,combobox,divider,entities-list-dialog,file-upload,grid,input,island,page-header,segmented-control,select,stack,status,tag,textarea,user-line
/demand-price-limits/:id/:nav?Редактор DPL: поля цен, Combo условий, Snippetaside,button,card,checkbox,combo,copy-field,grid,input,island,label,page-header,stack
/domains/:id/:nav?Редактор домена: статус, SSL, проверка (Island check)aside,button,card,checkbox,icon,input,island,page-header,select,stack,status,textarea
/dsp-analysis/:id/:nav?Карточка анализа DSP: таб generalaside,badge,card,checkbox,grid,icon,island,page-header,page-navigation,stack,user-line
/dsp/:id/:nav?Редактор DSP: 16 табов (general, request, response, open-rtb, hosts, bidfloor, api-integration, platform-filters, fast-filters, opt-lists, push-other, referrer-list, spend-limits, sync-stat, _50), баланс, проверка (ModalCheck)alert,amount,aside,button,card,checkbox,combo,combobox,copy-field,dialog,divider,dualist,entities-list-dialog,fields-group,grid,icon,input,input-number,island,page-header,page-navigation,picker,segmented-control,select,stack,status,textarea,user-line
/endpoints-analysis/:id/:nav?Карточка анализа эндпоинта: таб general + карточки DSP (DspCard)aside,badge,card,grid,icon,island,page-header,page-navigation,select,stack,user-line
/endpoints/:id/:nav?Редактор эндпоинта: 18 табов (general, filters, fast-filters, opt-lists, hosts, api-integration, response-request/open-rtb, cloaking, creatives-check, session-storage, source-id-autoblock, traffic-check, referrer-list, other, _50…)alert,aside,button,card,checkbox,combo,combobox,copy-field,divider,dualist,entities-list-dialog,fields-group,grid,icon,input,island,label,page-header,page-navigation,picker,segmented-control,select,stack,status,textarea,user-line
/finance/:id/:nav?Редактор фин. операции: статус, пользователь, сумма, дата, комментарийaside,button,checkbox,grid,input,input-date,island,page-header,select,stack,status,textarea,user-line
/lp/:idРедактор лендинга: шаблон, эндпоинты, расписание (Scheduler), код (Snippet)aside,button,card,checkbox,combobox,copy-field,input,island,page-header,scheduler,stack,textarea,user-line
/lpt/:idРедактор шаблона лендинга: имя, превью (ImageAttach), архив (FileAttach)aside,button,card,file-upload,input,island,page-header,stack,textarea
/news/:id/:nav?Редактор новости: заголовок, тип, дата (Datepicker), картинка, Markdown (Editor)aside,badge,button,checkbox,file-upload,grid,icon,input,input-date,island,page-header,select,stack
/optlists/:id/:nav?Редактор optlist: секции ip, isp, sourceID, originalSourceID (DualList, IncludeExclude, Textarea)alert,aside,button,checkbox,combobox,divider,dualist,grid,input,island,page-header,segmented-control,select,stack,textarea,user-line
/payment-systems/:id/:nav?Редактор платёжной системы: табы general, settings, инструкция (Manual), логотипaside,button,card,checkbox,combobox,copy-field,divider,file-upload,grid,input,island,link,page-header,page-navigation,stack,textarea
/referral/finance/:id/:nav?Редактор реферальной фин. операции (сумма, комментарий, пользователь)aside,button,input,island,page-header,stack,textarea,user-line
/roles/:id/:nav?Редактор роли: табы general и permissions (группы прав, IncludeExclude)aside,button,card,input,island,page-header,page-navigation,segmented-control,select,stack,textarea
/sites/:id/:nav?Редактор сайта: таб general, статус, код подключения (Snippet)alert,aside,button,card,copy-field,description,grid,input,island,page-header,select,stack,status,textarea,user-line
/smart-optlists/:id/:nav?Редактор smart-optlist: имя, список источников (SourceList) и кандидаты (SourceCandidates)aside,button,input,island,page-header,stack,user-line
/tag-groups/:id/:nav?Редактор группы теговaside,button,card,input,island,page-header,page-navigation,stack
/tags/:id/:nav?Редактор тега (имя, группа)aside,button,card,input,island,page-header,page-navigation,select,stack
/tch/links/:id/:nav?Редактор TCH-ссылки: табы general, ivt-settings, captchaaside,button,card,checkbox,copy-field,grid,input,island,page-header,page-navigation,select,stack,status,textarea,user-line
/users/:id/:nav?Редактор пользователя: 10 табов (general, other, max_prices, fast-filter, referral, widget-endpoints, sessions, user-logs, finance-logs, _24), аватар, контакты, реквизитыalert,amount,aside,button,card,checkbox,combo,combobox,copy-field,dialog,divider,dualist,entities-list-dialog,file-upload,grid,input,input-date,island,label,page-header,page-navigation,popover,segmented-control,select,stack,status,tag,textarea,user-line
/widgets/:id/:nav?Редактор виджета: выбор формата (RadioImageGroup), табы general/settings, настройки по типу (banner, inpage, native, popunder, push, video), ColorInput, код вставкиalert,aside,button,card,checkbox,combobox,copy-field,divider,grid,icon,input,input-color,island,page-header,page-navigation,radio,select,stack,status,textarea

Дашборд 4

Сводка по роли: ключевые числа, графики, новости и быстрые переходы.

РегионКомпоненты канонаКак собирать
headerpage-header,input-date-rangeзаголовок и период
summarygrid,card,amount,meter,progressкарточки ключевых чисел в Grid: баланс, расход, кэшбэк
chartswidget,kpi,delta,stat-list,chart-line,chart-bars,chart-donut,chart-ranked,legend,chart,column-settingsграфики в островах; серии настраиваются Column Settings
feedscard,table,linkновости, платежи, последние сущности
  • must — Ключевые числа — Amount с валютой, отрицательные — цветом опасности.
  • should — Не больше двух графиков в первом экране; остальное ниже.

Мобильный вариант. Карточки колонкой, графики во всю ширину.

Экраны архетипа (4)
РоутНазначениеКомпоненты dsТаблица
/dashboardДашборд — стартовый экран, по роли рендерит один из пяти экранов (_screens: platform-admin, advert-selfserve, advert-DSP, direct-publisher, default): виджеты баланса/кэшбэка/новостей/платежей/ленты, графики chart.js (line/donut), онбординг «Getting started», реферальный блокamount,aside,badge,button,card,combobox,dialog,divider,grid,icon,island,loader,stack
/dsp-metricsМетрики DSP: графики кодов ответовaction-panel,alert,aside,button,chart,checkbox,combobox,copy-field,drawer,grid,input-date-range,island,page-header,segmented-control,select,stack
/dsp-time-metricsМетрики времени ответа DSP (график)action-panel,alert,aside,button,chart,checkbox,combobox,drawer,grid,input-date-range,island,page-header,segmented-control,select,stack
/endpoints-metricsМетрики эндпоинтов: графики кодов ответов (MetricsChart, MetricsCodes)action-panel,alert,aside,button,chart,checkbox,combobox,copy-field,drawer,grid,input-date-range,island,page-header,segmented-control,select,stack

Вход и регистрация 5

Вход, регистрация, восстановление пароля, подтверждение — форма на карточке поверх тёмного фона.

РегионКомпоненты канонаКак собирать
layoutauth-layout,logo,lang-menuтёмный фон, логотип сверху, язык в углу
formisland,input,button,link,recaptcha,checkboxполя с плавающей подписью, одно акцентное действие, ссылки на соседние сценарии
  • must — Ошибка входа — под полем или Alert над кнопкой, без перезагрузки формы.
  • should — Показ пароля — `revealable` у Input.

Мобильный вариант. Та же карточка во всю ширину.

Экраны архетипа (5)
РоутНазначениеКомпоненты dsТаблица
/loginВход: email/пароль, Recaptcha, ссылки на восстановление/регистрациюauth-layout,button,form-modal,input,link,recaptcha,stack
/password-reset/:tokenНовый пароль по токенуauth-layout,button,form-modal,input,stack
/recoveryВосстановление пароля (email)auth-layout,button,form-modal,grid,icon,input,link,stack
/registration/:typeРегистрация по типу (:type): роль, контакты, согласие, Recaptcha; на мобильном — StepByStepauth-layout,button,checkbox,combo,divider,form-modal,grid,input,link,recaptcha,stack,wizard
/registration/confirm/:tokenПодтверждение регистрации по токенуauth-layout,divider,island,link,stack

Мастер создания 2

Создание сущности за несколько шагов: тип, настройки, подтверждение.

РегионКомпоненты канонаКак собирать
stepswizard,stepsполоса шагов и кнопки назад / далее
steppicker,island,input,select,gridвыбор типа плитками Picker, затем поля шага
  • must — Далее недоступно, пока обязательные поля шага пусты; проверка внутри шага.
  • must — Последний шаг показывает сводку и отправляет.

Мобильный вариант. Мастер в Form Modal.

Экраны архетипа (2)
РоутНазначениеКомпоненты dsТаблица
/campaigns/createМастер создания кампании: шаги adFormat → user → geo → price → balance → postback (useCreationMaster, Picker форматов)alert,aside,avatar,button,checkbox,combobox,copy-field,dialog,divider,dualist,grid,input,island,page-header,page-navigation,picker,stack
/endpoints/createМастер создания эндпоинта: шаги adFormat → user → platform → _50 (Picker, RangeSlider, IncludeExclude)alert,aside,avatar,badge,button,checkbox,combobox,dialog,divider,fields-group,grid,input,island,page-header,page-navigation,picker,segmented-control,slider,stack

Чат поддержки 1

Лента сообщений с вложениями и полем ввода.

РегионКомпоненты канонаКак собирать
headerpage-header,user-line,statusсобеседник и статус
chatchatлента с метками дня, вложениями и полем ввода; правка своих сообщений
  • must — Новые сообщения отмечены разделителем; прокрутка к началу подгружает историю.

Мобильный вариант. Чат во весь экран, поле ввода закреплено снизу.

Экраны архетипа (1)
РоутНазначениеКомпоненты dsТаблица
/chat/:id?Чат поддержки: меню чатов (ChatMenu), окно сообщений (lib Chat), инфо о пользователе, поиск, удалениеalert,aside,avatar,button,chat,combobox,dialog,divider,grid,icon,input,island,loader,page-header,stack

Инструмент 2

Расчёт или преобразование: форма параметров и результат таблицей.

РегионКомпоненты канонаКак собирать
headerpage-headerназвание инструмента
paramsisland,grid,input,select,buttonпараметры в островe, акцентная кнопка расчёта
resulttable,copy-field,alertрезультат таблицей с локальной сортировкой или полем для копирования
  • should — Результат появляется под формой без перехода на другой экран.

Мобильный вариант. Форма и результат колонкой.

Экраны архетипа (2)
РоутНазначениеКомпоненты dsТаблица
/decode-urlИнструмент декодирования URL: Textarea → таблица разобранных параметровaside,button,grid,island,page-header,stack,table,textarea#cell, fixed, size, wide
/sourceid-converterИнструмент конвертации source id: форма (эндпоинт, пользователь, период, IncludeExclude, список) + результат в Tablealert,aside,button,combobox,grid,input-date-range,island,page-header,segmented-control,stack,table,textarea

Настройки 2

Профиль, уведомления, трекер: табы разделов и острова с переключателями.

РегионКомпоненты канонаКак собирать
headerpage-headerзаголовок
tabspage-navigationразделы настроек
sectionsisland,switch,input,select,copy-field,buttonострова с переключателями и полями; ключи и ссылки — Copy Field
  • must — Переключатели применяются сразу или с явной кнопкой сохранения — не смешивать в одном острове.

Мобильный вариант. Острова колонкой, табы Page Navigation.

Экраны архетипа (2)
РоутНазначениеКомпоненты dsТаблица
/settings/:nav?Настройки профиля: табы general (аватар, контакты, реквизиты, Telegram), change-password, notifications, referral, sessions (карточки сессий), payment (моб.)aside,button,card,checkbox,combo,combobox,copy-field,dialog,divider,file-upload,grid,icon,input,island,page-header,page-navigation,stack
/trackerТрекер конверсий: табы postback_settings, link_builder, coversion_tracking, conversion_test (PostbackLink)aside,button,copy-field,grid,icon,island,page-header,page-navigation,stack,textarea

Документация 2

Статьи, API и справка внутри продукта.

РегионКомпоненты канонаКак собирать
headerpage-headerзаголовок статьи
bodyisland,code,description,link,feedbackтекст с примерами кода и оценкой полезности
  • should — Код — компонент Code с копированием; оценка статьи — Feedback внизу.

Мобильный вариант. Колонка текста.

Экраны архетипа (2)
РоутНазначениеКомпоненты dsТаблица
/article/:url*Просмотр статьи по URL (компонент Doc с меню документации и Feedback)code,description,page-header,page-navigation
/docs/:url*Документация по URL (компонент Doc)code,description

Служебные экраны 4

404, результат оплаты, мобильное меню «ещё», корневой layout.

РегионКомпоненты канонаКак собирать
bodyisland,animation,link,button,alert,menuкороткое сообщение, анимация и один переход
  • must — Одно действие выхода со служебного экрана — ссылка на главную или назад.

Мобильный вариант. То же.

Экраны архетипа (4)
РоутНазначениеКомпоненты dsТаблица
/apiAPI-документация: встроенный Redoc (openapi.json backgoapi)aside
/bffBFF-документация: встроенный Redoc (dev)aside
/finance/failСтраница неуспешной оплатыaside,button,grid,stack
/finance/successСтраница успешной оплатыaside,button,grid,stack

Карта легаси → канон

Библиотека VueКанон
Pageaside
PageHeaderpage-header
VerticalGridstack
Btnbutton
Alertalert
Islandisland
Gridgrid
ModalSettingsTablecolumn-settings
Daterangeinput-date-range
Iconicon
TextInputinput
Checkboxcheckbox
Paginationpagination
Textareatextarea
Selectselect
Separatordivider
Loaderloader
TextInputSearchinput
Modaldialog
Snippetcopy-field
PageMenupage-navigation
IncludeExcludesegmented-control
Amountamount
ModalEntitiesListentities-list-dialog
FormModalform-modal
Linklink
Datepickerinput-date
Labellabel
Avataravatar
Tagtag
Recaptcharecaptcha
Pickerpicker
Schedulerscheduler
DualListLivedualist
ModalSettingsChartcolumn-settings
ShortTextdescription
Tabletable
RadioImageGroupradio
StatusIconindicator
Chatchat
Combocombo
RangeSliderslider
TableUniversaltable
DragAndDropdrag-and-drop
FlipperRowHeightflipper
ColorInputinput-color
StepByStepwizard
PickerItempicker
Lottieanimation
DualListdualist
Popoverpopover
Editor— сторонний Markdown/WYSIWYG-редактор (md-editor-v3) — подключается в продукте, в каноне Textarea и Code
Container— мобильный контейнер — мобильный кит ещё не перенесён

Обёртки приложения — композиции канона

ОбёрткаКанон
ActionPanelaction-panel
BtnFilterbutton + drawer
TableLocaltable
PageFilterDynamicisland + input-date-range + combobox + segmented-control
BtnRefreshbutton
BtnAddbutton
ModalFilterdrawer
BtnExportbutton
EntityBriefcard
Selectselect
Subpagespage-navigation
Useruser-line
LayoutEntityaside
TextInputinput
Cardscard
BtnSavebutton
ModalDeletedialog
Chipstag
ModalSettingsTablecolumn-settings
Statusstatus
MarkFormatbadge
Btnbutton
Checkboxcheckbox
Commentisland + textarea
Authauth-layout
ImageAttachfile-upload
GeoFilterdualist
TextareaArrayLiketextarea
TextInputComparatorinput + select
ComboContactscombo
UserLineuser-line
MetricsChartchart
FieldsGroupPlatformFiltersfields-group
WidgetInfoBalancecard
WidgetInfoCashbackcard
WidgetInfocard
Doccode + description
TagCountriestag
FreezeRulestag-input
DualListLivedualist
BtnSortbutton + menu
MetricsCodescopy-field
CardSessioncard
ChartReportViewchart
BlackListActionsaction-panel
PostbackLinkcopy-field
FrequencyCapinput-number
ComboPlatformFilterscombo
ModalCreateFinancedialog
ChangeAvatarfile-upload
ModalSetSourceIdBiddingdialog
CardAudiencecard
CardCampaigncard
CardCompanycard
CardCreativecard
CardDPLcard
CardDomaincard
CardCampaignAnalysiscard
ModalCreateAudiencedialog
ModalSelectUserdialog
ModalCreateSmartOptlistCampaigndialog
DrawerChangeCampaignBalancedrawer
ComboRegistrationPathcombo
BannerArchiveAttachfile-upload
VideoAttachfile-upload
WidgetCashbackcard
WidgetNewscard
WidgetFeedcard
WidgetPaymentscard
Amountamount
Combocombo
TypePickerpicker
SelectUsercombobox
SelectCompanycombobox
SelectEndpointcombobox
SelectCampaigncombobox
SelectDspcombobox
SelectSupportManagercombobox
SelectCampaignGroupcombobox
SelectCountrycombobox
SelectTagscombobox
SelectInternalcombobox
SelectSitecombobox
SelectWidgetcombobox
SelectAudiencecombobox
SelectLanguagecombobox
SelectRolecombobox
SelectGroupcombobox