Обновлено: 03.11.2026 (P14). Направление A, Inter.
Каталог в двух слоях:
/design кабинета SaaS DSP
(src/editions/saas/pages/DesignPage.vue) и /design основной SSP
(ssp-web/src/views/DesignSystemView.vue). Компоненты основной DSP (Ds*
на Element Plus) показываются на своих экранах; отдельной витрины у
основной DSP нет.Главная дизайн-бука. Поля и форма кампании. Реестры покрытия: компоненты, экраны.
src/utils/design-system (токены, Inter, иконки, иллюстрации, logic/ -
чистые функции без UI) -> общие семантические контракты -> адаптер Element
Plus основной DSP (src/components/ds) / Bc* SaaS и admin
(src/editions/saas/ui) / Ds* основной SSP (ssp-web/src/components/ds) ->
предметные компоненты. Копии SSP обновляются только штатно:
node scripts/sync-design-system.mjs и node scripts/sync-saas-ui.mjs в
ssp-web; каталоги заменяются целиком, хеш копии в .source-hash,
scripts/check-edition.mjs (часть npm run build:saas) сверяет его и, если
dsp-web лежит рядом, хеш исходника.
Статус "принят к test-all": компонент в продукте, потребители переведены, тесты написаны и ждут общего прогона test-all. Пути от корня репозитория.
| Семейство | SaaS DSP и admin, SaaS SSP (Bc*) | Основная DSP (адаптер Element Plus) | Основная SSP (Ds*) | Статус | | --- | --- | --- | --- | --- | | Контракт поля | BcField, BcInput, BcNumberField, BcIntegerField, BcMoneyField, BcPercentField | el-form-item + el-input; DsNumberInput, DsMoneyInput, DsPercentInput; DsFieldShell | DsInput, DsNumberInput, DsMoneyInput, DsPercentInput | принят к test-all | | Флажок, переключатель | BcCheckbox, BcToggle, BcRadio, BcChip | el-checkbox, el-switch, el-radio | DsCheckbox, DsToggle, DsRadio | принят к test-all | | Выбор и справочник | BcSelect, BcCombobox, BcMultiSelect, BcListEditor, BcSearch | el-select на правиле шеврона, DsEntitySelect | DsSelect, MultiSelectSearch | принят к test-all | | Дерево | BcTreePicker | GeoTreePicker, InventoryTreePicker (el-tree) | нет деревьев | принят к test-all | | Меню и подсказка | BcActionMenu, BcTooltip | DsActionMenu, RowActionsMenu, el-tooltip | DsMenu, RowActionsMenu, DsTooltip | принят к test-all | | Окно и панель | BcModal, BcDrawer, BcConfirmDialog, BcQuestionDialog, BcFormDialog, OverlayGuard | DsDialog, DsDrawer, DsMessageDialog (dsConfirm, dsAlert, dsPrompt), DsOverlayGuard | DsModal, ConfirmDialog | принят к test-all | | Таблица и пагинация | BcTable, BcPagination | el-table + useElTableRoute, DsPagination | DsColumnHead, DsSortLabel, BulkActionBar | принят к test-all | | Дата и период | BcCalendar, BcDatePicker, BcDateRange, BcDateTimeRange | DsDatePicker, DsDateRange, DsDateTimePicker | DsCalendar, PeriodSelector | принят к test-all | | Загрузка | BcMediaDropzone, BcMediaQueue, BcUploadProgress, BcUpload (один файл) | CreativeUploadButton, DsMediaQueue, DsUploadProgress | загрузки нет | принят к test-all | | Медиа | BcImagePreview, BcVideoPlayer, BcPosterPicker, BcMetadataEditor, BcMediaPassport, BcAssetPicker | CreativeViewer, DsVideoPlayer, DsImagePreview, DsPosterPicker, DsMetadataEditor | просмотр креатива модерации | принят к test-all | | Вкладки, шаги, навигация | BcTabs, BcBreadcrumbs, BcPageHead | el-tabs, el-steps, EntityFormShell | DsTabs, DsPillTabs, DsStepper, DsBreadcrumbs, DsSidebar, DsGuidePanel | принят к test-all | | Графики и карта | BcChart, BcStackChart, BcShareBars, BcPie, BcGeoMap, BcKpi | ECharts экранов | DsBarChart, DsColumnChart, DsDonutChart, DsWorldMap | принят к test-all | | Бейдж, метка, пустое состояние | BcBadge, BcEmpty, BcIllustration, BcIcon, BcCard, BcToastHost | el-tag, EmptyState | DsBadge, DsLabelChip, DsFilterChip, DsInheritedLabel, DsSpinner, DsIcon | принят к test-all |
Логика без UI (src/utils/design-system/logic): contracts, numbers, pagination,
period, calendar, zone, choice, tree, overlay, list-state, selection,
draft-sync, campaign-outcome, semantic-diff, delivery-readiness, upload-queue,
upload-engine, media-job, media-view, field-errors.
Размер по задаче: примерно 440-560 px для сообщения/подтверждения и короткой формы, 760 px для периода; ширина всегда ограничена окном. В каталоге четыре типа построены на одном контроллере. alertdialog используется для предупреждения и подтверждения, dialog - для вопроса и формы; у каждого aria-labelledby/describedby.
Открытие сохраняет инициатора, блокирует прокрутку фона и перемещает фокус. Tab и Shift+Tab циклически обходят доступные элементы; Escape и крестик отменяют. Опасная кнопка не получает начальный фокус. Клик по фону не закрывает форму. При незавершенном вводе отмена показывает вопрос внутри того же окна; нового наложенного диалога нет. Во время сохранения повтор, Escape и закрытие блокируются. Ошибка сохранения сохраняет значения и предлагает повтор; успешный результат отображается на странице в role=status.
Существующий overlay.ts BcModal перемещает и возвращает фокус, закрывает по
Escape и блокирует фон, но не содержит цикла Tab. Существующий BcModal закрывается
по фону и не имеет busy/dirty контракта. Эти расхождения записаны как задачи
внедрения; работа эталона не означает их исправление в продукте.
Демо содержит 125 локальных записей, а не три строки. Размер страницы 10/25/50; выбор строк сохраняется между страницами, чекбокс заголовка выбирает видимую страницу и показывает indeterminate. Поиск и фильтр начинают с первой страницы. Сортировка применяется ко всему набору до нарезки на страницы; aria-sort сообщает порядок. Выбранная страница отмечена aria-current, диапазон и total - в aria-live.
Страницы, поиск, статус и сортировка сохраняются в URL; «Назад» восстанавливает предыдущее состояние. В реальном адаптере нужны limit/offset/total, серверная сортировка и отмена устаревшего запроса. Здесь сеть не имитируется как настоящая: переключатель «Состояние образца» явно показывает loading, empty и error.
На телефоне прокручивается только таблица, не вся страница. Область имеет доступное имя и tabindex; пагинатор остается снаружи горизонтальной прокрутки. Пустой список отличается от пустого результата поиска. При loading/error навигация страниц недоступна; ошибка содержит «Повторить».
Серверный поиск, большие справочники, loading/error/pagination combobox не подключены в эталоне. Они обязательны для будущего EntityCombobox и не считаются принятыми по четырем локальным вариантам.
Планирование и отчетность разделены. DatePicker кампании разрешает будущую дату; DateRangePicker отчета запрещает даты позже демо-даты 01.11.2026. Это фиксированная дата воспроизводимого примера, не системная функция определения текущего времени.
Месяц начинается с понедельника. Для дней есть выбранная граница, внутренний диапазон, сегодня и disabled. ArrowLeft/Right/Up/Down, Home/End, PageUp/PageDown перемещают фокус; Enter/Space выбирают день. У месяца один вход по Tab; дни реализованы как именованные кнопки с roving tabindex, без неполного role=grid. На телефоне виден один месяц с навигацией вместо двух сжатых календарей.
Диапазон хранит отдельный draft. Первый клик задает начало, второй - конец; при обратном порядке кликов границы упорядочиваются. Ручной обратный диапазон показывает ошибку и не меняется без ведома пользователя. Неполный или будущий период нельзя применить. «Отмена» не меняет applied. Быстрые периоды: сегодня, 7 дней, 30 дней и текущий месяц. Границы включительны; число дней считается по календарным ISO-датам. UTC явно показан рядом с отчетным периодом.
119/119 проверок Chromium в checks.json. Проверены четыре диалога, циклы Tab,
Escape и возврат фокуса, незавершенный ввод, ошибка/повтор/busy формы,
таблица/поиск/фильтр/сортировка/страницы/история, меню и combobox с клавиатуры,
календарь и границы периода, apply/cancel, 320/390/768/1280/1440 в обеих темах.
Рендеры открытых окон и календаря просмотрены визуально. Общие исходники
продукта не менялись, сборки приложений для локальных HTML-образцов не требуются.
Повтор из dsp-web при http.server на 4325:
python3 -m http.server 4325 --bind 127.0.0.1
# В другом терминале:
node design-book/components/check.mjs
| Шаг | Изменение | Приемка | | --- | --- | --- | | DS1 | Overlay-контроллер и типизированные Warning/Confirm/Question/FormDialog | Цикл фокуса, безопасный фокус, busy/dirty, роль/описание, фон и возврат фокуса в обеих редакциях | | DS2 | Контракт DataTable/Pagination | URL, total, серверная сортировка, выбор, 0/1/125/1000 записей, устаревшие ответы, все состояния | | DS3 | Select/EntityCombobox/ActionMenu | Большой справочник, async/ошибки, стабильный ID, клавиатура, закрытие, disabled | | DS4 | DatePicker/DateRangePicker | Пояс, DST, ручной ввод, будущие/пустые даты, границы месяца/года, apply/cancel, мобильный и клавиатура | | DS5 | Синхронизация SSP и приемка реальных адаптеров | Обе темы, DSP/SSP/admin, API и устройства, профильные регрессии |
Согласование DS1-DS4 с C1-C7 формы кампании обязательно: не создавать второй набор несвязанных полей или overlay. DS0 (каталог и эталоны) завершен; DS1-DS5 не отмечены выполненными.
Интерактивный медиа-процесс, контракты и внедрение M0-M5, галерея состояний. Загрузка, проверка, очередь, преобразование, превью/плеер/постер, редактор метаданных и готовность ассета разделены по компонентам. Локальная конвертация изображений настоящая; видеопроцесс и передача явно обозначены как демо.
Исправление шеврона: SVG 20px, правый отступ 14px, резерв 48px, обе темы, нативная семантика. 72 замера геометрии на трех страницах.