empty —— Пустое состояние

Пустое состояние — это «состояние нуля данных» для списков, таблиц и результатов поиска. Состояние в core/empty максимально простое — один логический hasImage, потому что главное визуальное решение здесь — «пользователь передал своё изображение или используется стандартное из библиотеки 水墨 (тушь)», и у этих вариантов разная раскладка (пользовательское изображение уважает исходные размеры, а стандартное — специально изготовленная полноширинная картина в стиле 水墨 (тушь)).

Когда использовать

При реализации LhEmpty на каждой платформе: нет данных в таблице, нет результатов поиска, очищенный список, сообщение о нехватке прав.
Сценарии, где нужно переиспользовать визуал пустого состояния в стиле 水墨 (тушь).
Не следует использовать: состояние загрузки. Это зона ответственности LhSkeleton или LhLoading; пустое состояние означает «данных точно ноль», а не «они ещё не пришли».

Импорт

import { getEmptyClassNames } from '@lh-ui/share/core/empty'
import type { LhEmptyState } from '@lh-ui/share/core/empty'

Замысел

В core/empty всего одно поле hasImage, потому что всё остальное (заголовок, описание, кнопки действий) — это содержимое, а не состояние: содержимое отрисовывается напрямую через слоты/props и не требует вычислений. Прогонять содержимое через core — значит лишь добавлять лишний уровень опосредования без пользы.

Эта граница «вычисляем только состояние, а не содержимое» — общий принцип core-слоя lh-ui: входные данные core-функций должны быть только тем, что влияет на результат.

Таблица функций

Функция	Сигнатура	Возврат	Назначение
`getEmptyClassNames`	`(state: LhEmptyState) => string[]`	массив классов	различает пользовательское и стандартное изображение

Пример вывода:

getEmptyClassNames({ hasImage: true })   // ['lh-empty', 'lh-empty--custom-image']
getEmptyClassNames({ hasImage: false })  // ['lh-empty']

Определения типов

export interface LhEmptyState {
  hasImage: boolean
}

Доступность

core/empty не выводит набор aria-атрибутов. Ключевые моменты доступности пустого состояния лежат в UI-слое:

Когда появляется пустое состояние, предшествующий ему список/таблица должны получить aria-live="polite" или активное уведомление после завершения загрузки данных, иначе пользователь скринридера останется при старом впечатлении «в списке 0 элементов».
Стандартное изображение 水墨 (тушь) — декоративное, ему нужен aria-hidden="true" (обрабатывается при отрисовке в UI-слое).
Описательный текст несёт настоящую информацию («Нет данных, нажмите кнопку, чтобы обновить») и должен быть читаемым.
Если в пустое состояние входит кнопка действия, ей достаточно нативной семантики.

Примеры использования

import { getEmptyClassNames } from '@lh-ui/share/core/empty'

getEmptyClassNames({ hasImage: false })  // ['lh-empty']

<!-- Vue3 -->
<div :class="getEmptyClassNames({ hasImage: !!image })">
  <div class="lh-empty__image">
    <slot name="image">
      <InkWash />   <!-- стандартный плейсхолдер в стиле туши, aria-hidden -->
    </slot>
  </div>
  <p class="lh-empty__description">{{ description }}</p>
  <div class="lh-empty__actions"><slot name="actions" /></div>
</div>

// React
const hasImage = !!image
return (
  <div className={getEmptyClassNames({ hasImage }).join(' ')}>
    <div className="lh-empty__image">{image ?? <DefaultInkWash aria-hidden="true" />}</div>
    <p className="lh-empty__description">{description}</p>
    <div className="lh-empty__actions">{actions}</div>
  </div>
)

// uniapp: стандартное изображение в стиле туши — svg, на не-h5 платформах его нужно заменить
// на графический ресурс (обрабатывается UI-слоем каждой платформы)

Стили и токены

Класс	Семантика
`.lh-empty`	базовый класс: центрирование, вертикальные отступы
`.lh-empty--custom-image`	пользовательское изображение: снимает фиксированные размеры стандартного
`.lh-empty__image`	область изображения
`.lh-empty__description`	описание (вторичный цвет текста)
`.lh-empty__actions`	область кнопок действий
`.lh-empty__illustration` / `__ink-*`	элементы стандартной иллюстрации 水墨 (тушь) (далёкие горы, тушевые разводы, печать, рамка)

Стандартная иллюстрация 水墨 (тушь) — одна из фирменных элементов китайского стиля lh-ui: она нарисована чистым CSS/SVG и имеет отдельную палитру для тёмной темы.

Замечания

Решение о hasImage принимает UI-слой: любое содержимое, переданное пользователем через prop image или слот image, считается «пользовательским изображением».
Пустое состояние должно появляться на месте исходных данных (в теле таблицы, в контейнере списка), а не всплывать глобальным уведомлением — это не обратная связь, а одно из состояний данных.
Для сценариев вроде 404 или «нет прав», где «данные не пусты, а запрещены», семантически ближе предупреждение: LhResult (если есть на платформе) или кастомная раскладка подойдут лучше, чем LhEmpty.

@lh-ui/share/core/empty → getEmptyClassNames( )

返回值

（填好参数后点运行）