Темизация

Страницы Escalated наследуют макет вашего приложения и могут быть стилизованы с помощью пользовательских CSS-свойств через Vue-плагин.

Регистрация плагина

Передайте ваш аутентифицированный макет, чтобы страницы Escalated отображались внутри интерфейса вашего приложения:

import { EscalatedPlugin } from '@escalated-dev/escalated';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';

createApp({ ... })
  .use(EscalatedPlugin, {
    layout: AuthenticatedLayout,
    theme: {
      primary: '#3b82f6',
      radius: '0.75rem',
    }
  })

Пользовательские CSS-свойства

• --esc-primary -- Основной цвет действий (по умолчанию: #4f46e5)
• --esc-primary-hover -- Вариант при наведении (автоматически затемняется, если не указан)
• --esc-radius -- Радиус скругления для полей ввода и кнопок (по умолчанию: 0.5rem)
• --esc-radius-lg -- Радиус скругления для карточек и панелей (автоматически масштабируется, если не указан)
• --esc-font-family -- Переопределение шрифта (по умолчанию наследуется от основного приложения)

Требования к макету

Ваш макет должен предоставлять слот #header и слот по умолчанию. Escalated встраивает заголовок страницы и навигацию в шапку.

Стилизация панели

Панели администратора и агента можно стилизовать независимо для брендирования или white-label решений. Стилизация панели настраивается через опцию theme.panel и поддерживает два уровня: быстрая настройка и полный white-label.

Быстрая настройка

Задайте режим, акцентный цвет, название приложения и логотип:

createApp({ ... })
  .use(EscalatedPlugin, {
    layout: AuthenticatedLayout,
    theme: {
      primary: '#3b82f6',
      panel: {
        mode: 'dark',
        accent: '#e94560',
        appName: 'HelpDesk Pro',
        logo: '/img/brand-logo.svg',
      }
    }
  })

Опция	Тип	По умолчанию	Описание
mode	'dark' | 'light'	'dark'	Базовая цветовая схема для панелей администратора и агента
accent	string	'#06b6d4' (dark) / '#3b82f6' (light)	Основной акцентный цвет для кнопок и ссылок
appName	string	'Escalated'	Название бренда в боковой панели и навигации агента
logo	string | Component	null	URL изображения или Vue-компонент для замены логотипа по умолчанию

Когда logo — строка, он отображается как тег <img>. Когда это Vue-компонент, он отображается через <component :is>. Если не указан, используется логотип Escalated по умолчанию.

Полный white-label

Переопределите отдельные токены дизайна для полного контроля над внешним видом панели:

createApp({ ... })
  .use(EscalatedPlugin, {
    theme: {
      panel: {
        mode: 'dark',
        appName: 'ClientDesk',
        logo: MyLogoComponent,
        accent: '#e94560',
        accentSecondary: '#ff6b6b',
        bg: '#0f0f23',
        sidebarBg: '#1a1a2e',
        topbarBg: 'rgba(15,15,35,0.8)',
        surface: '#16213e',
        surfaceAlt: '#0f0f23',
        border: 'rgba(255,255,255,0.08)',
        borderInput: 'rgba(255,255,255,0.12)',
        text: '#ffffff',
        textSecondary: '#a0aec0',
        textMuted: '#718096',
      }
    }
  })

Каждый токен соответствует пользовательскому CSS-свойству на :root. Вы также можете переопределить эти свойства напрямую в вашем CSS.

Пользовательские CSS-свойства панели

Все токены панели имеют разумные значения по умолчанию для тёмного и светлого режимов. При установке mode: 'light' вся палитра по умолчанию переключается автоматически.

CSS-свойство	Ключ конфигурации	Тёмное по умолчанию	Светлое по умолчанию	Описание
--esc-panel-bg	bg	#000000	#f9fafb	Фон страницы
--esc-panel-sidebar-bg	sidebarBg	#0a0a0a	#ffffff	Фон боковой панели
--esc-panel-topbar-bg	topbarBg	rgba(0,0,0,0.8)	rgba(255,255,255,0.95)	Фон верхней панели
--esc-panel-surface	surface	rgba(23,23,23,0.6)	#ffffff	Карточки и панели
--esc-panel-surface-alt	surfaceAlt	#0a0a0a	#f9fafb	Поля ввода и вложенные поверхности
--esc-panel-border	border	rgba(255,255,255,0.06)	#e5e7eb	Рамки и разделители
--esc-panel-border-input	borderInput	rgba(255,255,255,0.1)	#d1d5db	Рамки полей ввода
--esc-panel-text	text	#ffffff	#111827	Основной текст
--esc-panel-text-secondary	textSecondary	#e5e5e5	#374151	Подписи и основной текст
--esc-panel-text-tertiary	textTertiary	#a3a3a3	#6b7280	Вторичные подписи
--esc-panel-text-muted	textMuted	#737373	#9ca3af	Подсказки и плейсхолдеры
--esc-panel-accent	accent	#06b6d4	#3b82f6	Основной акцент
--esc-panel-accent-secondary	accentSecondary	#8b5cf6	#6366f1	Конец градиента / вторичный акцент
--esc-panel-accent-hover	accentHover	#22d3ee	#2563eb	Состояние наведения акцента
--esc-panel-accent-secondary-hover	accentSecondaryHover	#a78bfa	#818cf8	Наведение вторичного акцента
--esc-panel-hover	hover	rgba(255,255,255,0.03)	rgba(0,0,0,0.02)	Фон наведения на строки и элементы
--esc-panel-active	active	rgba(255,255,255,0.08)	#eff6ff	Фон активного элемента навигации

Примечание: Цвета индикаторов статусов и приоритетов (open, closed, escalated и т.д.) не затрагиваются стилизацией панели. Они остаются фиксированными для сохранения семантического значения во всех брендированных развёртываниях.

Переопределение только через CSS

Если вы предпочитаете переопределять стили панели без JavaScript-конфигурации, задайте пользовательские CSS-свойства напрямую:

:root {
  --esc-panel-accent: #e94560;
  --esc-panel-accent-secondary: #ff6b6b;
  --esc-panel-bg: #0f0f23;
  --esc-panel-sidebar-bg: #1a1a2e;
}

Это работает вместе с конфигурацией theme.panel или вместо неё. CSS-переопределения имеют приоритет, если применяются после инициализации плагина.