@ozontech/seq-ui

@ozontech/seq-ui

seq-ui как Nuxt-слой: страницы поиска и лога, компоненты и контракты, через которые seq-ui общается с платформой. Standalone-сборка (apps/standalone) использует то же ядро без Nuxt.

Подключение

// nuxt.config.ts хоста
export default defineNuxtConfig({
  extends: ['@ozontech/seq-ui'],
  seqUi: {
    basePath: '/seq',                 // страницы: /seq и /seq/logs/:id
    layout: 'default',                // layout хоста
    apiUrl: 'https://seq-ui.example', // или runtimeConfig.public.seqUi.apiUrl, или адаптер config
    ui: '~/seq-ui/kit',               // свой UI-кит (необязательно)
    slots: { LogFieldValue: '~/seq-ui/log-field-value' }, // свои слоты (необязательно)
    css: true,                        // подключить dist/seq-ui.css
    preflight: false,                 // сброс стилей Tailwind: только для хостов без своей дизайн-системы
  },
})

Сервисы (адаптеры)

Контракты описаны в src/adapters/types.ts. Хост переопределяет любой контракт целиком в своём плагине:

// plugins/seq-ui.ts хоста
import { configureSeqUi } from '#seq-ui/adapters'

export default defineNuxtPlugin(() => {
  configureSeqUi({
    config: { apiUrl: '...' },
    http: (Service, baseURL) => new Service(createAxiosWithAuth(baseURL)),
    auth: { user: computed(() => ({ name: '...' })) },
    notify: { success, info, warn, error },
    logger: { error, warn, info },
    storage: { get, set },
  })
})

Плагин слоя выполняется раньше плагинов хоста, поэтому переопределения хоста применяются последними. Дефолты ядра без внешних зависимостей: console, localStorage с префиксом seq-ui:, анонимный пользователь. Уведомления через vue-sonner — #seq-ui/adapters/sonner.

UI-кит и слоты

• Ядро импортирует компоненты только из #seq-ui-kit. Опция ui направляет алиас на модуль хоста. Чтобы заменить отдельные компоненты, реэкспортируйте дефолтный кит и перекройте нужные:

  export * from '#seq-ui/ui'
  export { Button } from './button'
  

• Слоты — заменяемые фичи целиком. Контракты пропсов — в src/slots/types.ts, список и дефолты — в src/slots/defaults.ts:

  Слот	Что это
  SearchControls	строка поиска: запрос, интервал, кнопка поиска, «добавить виджет»
  HistogramWidget	виджет гистограммы
  AggregationWidget	виджет одной агрегации
  AggregationDrawer	форма создания агрегации
  LogTable	таблица сообщений
  LogView	карточка лога (в таблице и на странице лога)
  LogFieldValue	значение поля лога
  NotFound	лог не найден

  Слот хоста может использовать логику ядра: компоненты (#seq-ui/components/..., например ExpressionInput с bare), сторы, хелперы и useLogActions (пермалинк, копирование JSON, соседние сообщения).

Стили

• dist/seq-ui.css собирается заранее (npm run build:css, в разработке npm run dev:css), хосту Tailwind не нужен.
• Цвета, шрифт и зазор между блоками страницы (--seq-page-gap) берутся из переменных --seq-*. Их значения по умолчанию лежат в слое seq-ui-defaults, который модуль объявляет раньше CSS хоста: хост переопределяет токены обычным CSS (:root { --seq-font-sans: ... }).
• Корень страниц помечен классом .seq-ui, сброс нативных кнопок и полей действует только внутри него и в порталах reka-ui/vaul.

Локальная разработка с хостом

# в seq-ui-fe
npm install
npm run dev:css

# в хосте: nuxt.config.ts → extends: [process.env.SEQ_UI_LAYER || '@ozontech/seq-ui']
SEQ_UI_LAYER=/path/to/seq-ui-fe/packages/seq-ui npm run dev

Модуль сам добавляет vite.resolve.dedupe для vue/vue-router/pinia и разрешает Vite читать файлы из seq-ui-fe. Ограничение режима: tsc хоста видит типы vue/axios из двух node_modules, поэтому возможны ложные ошибки несовместимости типов. При установке слоя пакетом их нет.