Философия дизайна

lh-ui-plus воплощает дизайн-философию «Красота традиций — основа кода», объединяя традиционную китайскую эстетику с современной фронтенд-инженерией.

Эстетика в китайском стиле

Палитра

Цвет	Источник	Значение	Назначение
Индиго	глазурь 青花瓷 (сине-белый фарфор)	#2B4C7C	основной цвет (--lh-primary-color)
松花绿 (сосново-зелёный)	зелень бамбуковых теней	#5B8C5A	цвет успеха (--lh-success-color)
藤黄 (gamboge)	золотая осенняя листва	#C4A35A	цвет предупреждения (--lh-warning-color)
朱砂 (киноварь)	красная печатная паста	#B23A3A	цвет опасности (--lh-danger-color)
Тёмно-серый	лёгкие краски тушью	#7A7A7A	информационный цвет (--lh-info-color)
水墨 (тушь)	пять оттенков туши	#2C2C2C	цвет текста (--lh-text-color-primary)
宣纸 (рисовая бумага)	белый цвет старинной рисовой бумаги	#FAF6F0	цвет фона (--lh-bg-color)

Полную палитру и уровни смотрите в разделе Настройка темы.

Узорные фоны

В библиотеку встроено 6 традиционных узоров в виде SVG-фонов (применяются через --lh-bg-pattern, значением служит соответствующая CSS-переменная):

• willow — узор 柳叶 (ивовый лист, мягкий и утончённый, --lh-pattern-willow)
• cloud — узор 祥云 (благоприятное облако, плавно извивается, --lh-pattern-cloud)
• water — узор 水波 (лёгкая рябь на воде, струится слой за слоем, --lh-pattern-water)
• snow — узор 雪花 (шестиугольная снежинка с тонкими ветвями, --lh-pattern-snow)
• plum — узор 梅花 (цветение сливы, пять лепестков вокруг сердцевины, --lh-pattern-plum)
• bamboo — узор 竹叶 (листья бамбука, расположены в естественном беспорядке, --lh-pattern-bamboo)

Кросс-фреймворковая архитектура

Ключевая логика выделена в чистые функции, отвязанные от фреймворка:

@lh-ui/share           слой чистой логики + исходники стилей (без зависимостей от фреймворка, подключается как npm-зависимость)
packages/components/   слой обёрток компонентов Vue 3
packages/composables/  composables для Vue

На базе TypeScript

Типобезопасность TypeScript на всём пути:

• Строго типизированные определения Props / Emit
• Сигнатуры колбэков событий несут типы полезной нагрузки
• Умное автодополнение в IDE
• Покрытие типов защищается pnpm typecheck (динамические инструментальные типы вроде LhSxProps сохраняют контролируемые индексные сигнатуры)

Система тем на CSS-переменных

88+ дизайн-токенов с префиксом --lh-*. Поддерживаются мгновенное переключение тем, тёмная тема и глобальная настройка через ConfigProvider.

Локализация

Встроена система настройки через ConfigProvider с единым управление переводами. Сейчас встроены полные языковые пакеты: zh-CN, en-US; ja-JP, ko-KR, de-DE, fr-FR зарегистрированы как структурные заглушки (непереведённые части временно fallback на английский) — их можно дополнить по инструкции в разделе Локализация.

Доступность

• Навигация с клавиатуры
• ARIA-атрибуты
• Контрастность по WCAG 2.1 AA

Красота традиций — основа кода.