Описание проекта
Описание проекта
Заголовок раздела «Описание проекта»@lh-ui/share — единственный общий слой семейства компонентных библиотек lh-ui, не зависящий от фреймворков.
Он выделяет «ту половину» библиотеки компонентов, которая не зависит от фреймворка, в отдельный репозиторий: вычисление классов, конечные автоматы, наборы атрибутов доступности, движок позиционирования, виртуальная прокрутка, design-токены, тексты интернационализации, исходники компонентных стилей. UI-библиотеки различных платформ (lh-ui-plus / lh-ui-vue2 / lh-ui-react / lh-ui-uniapp) потребляют этот пакет при публикации в виде npm-зависимости; при локальной разработке внутри семейства изменения исходников этого репозитория сразу же действуют в UI-библиотеках — без сборки и релиза.
Зачем нужен этот слой
Заголовок раздела «Зачем нужен этот слой»Лишь небольшая часть логики библиотеки компонентов действительно зависит от реактивности фреймворка:
- добавить класс или нет — это чистое вычисление
(size, disabled) => string; - в какую сторону перевернуть выпадающую панель — это геометрическое вычисление;
- какие строки списка рендерить — это вычисление индексного диапазона;
- текст кнопки «Подтвердить» — это lookup в языковом пакете.
Если заложить это в чистые функции, то четырём платформам не нужно писать каждую вещь заново, ошибаться заново и исправлять заново. У слоя фреймворка остаётся только одно дело: привязать вывод чистых функций к шаблону и передать пользовательский ввод обратно в чистые функции.
Что внутри репозитория
Заголовок раздела «Что внутри репозитория»| Слой | Содержимое | Количество |
|---|---|---|
src/core/<компонент>/ |
Чистые функции компонентов (logic.ts / types.ts), без импорта фреймворков | 56 компонентов |
src/core/shared/ |
Общее ядро для компонентов (popper / virtual / sx / keyboard / focus-trap …) | 12 модулей |
src/theme/ |
TS-сторона темы: типы + 5 пресетов + runtime-примитивы | — |
styles/ |
Единый источник BEM-стиилей компонентов + токены theme/common/*.scss |
58 наборов стилей |
src/locales/ |
Интернационализация (LhLocale — чистый генератор событий) + 6 языковых скелетов | — |
src/constants/ src/types/ src/utils/ |
Константы / типы / чистые утилиты (включая createNamespace) | — |
Методика подсчёта: core — это 56 каталогов компонентов, styles — 58 наборов: у
layout/tree-selectесть источники стилей, но логика полностью находится в слое UI (контейнер разметки, клей выбора дерева на стороне фреймворка), аconfigв каталоге стилей называетсяconfig-provider. Подробнее см. Структуру пакета.
Принципы дизайна
Заголовок раздела «Принципы дизайна»- Нулевая зависимость от фреймворков: внутри
src/запрещеныimport 'vue' | 'react' | '@dcloudio/*'; за этим следит CI-гейт с помощью grep. В пакетеexternal: []— полная сборка без зависимостей. - Единый источник стилей:
styles/— единственный источник BEM-стиилей компонентов для всего семейства; ни одна UI-библиотека не имеет права держать у себя локальную копию компонентного scss. Различия переходных классов между платформами собраны в трех mixin-ахtransition.scss. - Единый экземпляр unit-тестов: unit-тесты для core находятся только в
tests/unit/этого репозитория; три библиотеки используют этот результат и не копируют его. - Реактивность относится к слою UI: core только производит данные; подписка / реактивная разводка принадлежит UI-библиотекам. Поэтому LhLocale
— чистый emitter: увеличение
versionзаставляет каждую платформу перерендерить своим механизмом. - Светлое и тёмное на равных: все компоненты по умолчанию поддерживают и светлую, и тёмную тему; компонентам разрешено пользоваться токенами только через
var(--lh-*, fallback), а полноту тёмной темы охраняет пункт 7 вverify:styles.
Чем этот пакет не является
Заголовок раздела «Чем этот пакет не является»- Не UI-библиотека: этот пакет ничего не рендерит, в нём нет runtime-а компонентов. Если нужны готовые компоненты, установите
библиотеку соответствующей платформы:
@lh-ui/vue3/@lh-ui/vue2и др. - Не зависит ни от одной UI-библиотеки и ни от одного фреймворка: это самый нижний слой — на него опираются, он ни на кого не опирается.
- Не отвечает за развёртывание: результат настройки темы — это текст
<style>и CSS-переменные; то, как они внедряются в DOM, решает ConfigProvider на каждой платформе.
Расположение в семействе
Заголовок раздела «Расположение в семействе»lh-ui/├── lh-ui-share/ ← этот репозиторий: общий слой, независимый от фреймворков (core / theme / styles / locales)├── lh-ui-plus/ Платформа Vue3 (полная инъекция стилей через side-effect)├── lh-ui-vue2/ Платформа Vue2 (подключение по требованию: theme.css + style/<name>)├── lh-ui-react/ Платформа React├── lh-ui-uniapp/ Платформа uniapp├── docs/ Сайт документации семейства (другой репозиторий)└── native/ Нативные платформы (android / ios / harmony, applicationId равен top.lhgb.*)Порядок релизов — жёсткое ограничение: сначала релизится share, затем UI-библиотеки. Любое изменение share → пишется changeset → релиз →
в каждой библиотеке выполняется pnpm up @lh-ui/share и проводится регрессия.
Следующие шаги
Заголовок раздела «Следующие шаги»- Начало работы — установить пакет, подключить стили, запустить первую чистую функцию
- Точка входа пакета и подпути — как выбирать из 77 ключей exports по требованию
- Как share используется на каждой платформе — примеры разводки для Vue3 / Vue2 / React / uniapp
Copyright © 2024-2026 FengMo WenXue