# Интерфейс, язык и предпросмотр

Интерфейс татуировок загружается из собранных файлов `ui/dist/`. В пакет входят эта сборка и стандартные миниатюры из `ui/public/ImagenesVanilla/`; не следует считать, что в нём есть исходный код React или файлы разработки из `ui/`.

## Редактирование поставленных файлов

Для небольших изменений можно отредактировать файлы, поставленные вместе с ресурсом:

- **Цвета и шрифт:** откройте `ui/dist/assets/index-*.css` и измените значения переменных `--tat-*` и `--cxg-*`. Сохраните текущее имя CSS-файла, так как страница NUI ссылается на него. Этот CSS собран и может измениться в новой сборке; сохраните копию своих изменений.
- **Логотип:** замените `ui/dist/assets/cxg-logo-CmIGK6Fh.png`, сохранив точные имя и путь: на них ссылается сгенерированный JavaScript. Соблюдайте подходящие пропорции и прозрачность изображения.
- **Стандартные миниатюры:** замените файл с тем же именем в `ui/dist/ImagenesVanilla/`, чтобы изменение отображалось в рабочей версии. Если у вас есть соответствующая копия в `ui/public/ImagenesVanilla/`, замените и её: при новой сборке файлы из этой папки копируются в `dist/`.

Перед редактированием файлов сборки сделайте резервную копию и проверьте изменения в FiveM. Для масштабных изменений дизайна, новых компонентов или переводов React запросите исходники UI и соберите новую версию; эти исходники не входят в описанный здесь дистрибутив.

## Настройка внешнего вида

Для серьёзных изменений макета, компонентов или текстов React используйте исходники UI, если они были переданы отдельно. Основные точки входа:

- `ui/src/index.css`: глобальные переменные `--tat-*` для цветов, шрифтов, размеров и теней.
- `ui/src/studio-theme.css`: переменные `--cxg-*` и оформление студии.
- `ui/src/components/`: компоненты React и стили отдельных компонентов.
- `ui/src/main.tsx`: импорты Outfit Variable и Geist Mono Variable.

Начните с изменения переменных темы. При прямом редактировании правил компонентов сохраните состояния фокуса, ошибки, загрузки и отключённого элемента. Если вы также меняете шрифт, измените его в `main.tsx`; использующие его стили определяются переменными типографики.

## Миниатюры и изображения

Стандартные миниатюры находятся в `ui/public/ImagenesVanilla/` и копируются в сборку для production. Сохраняйте имена и пути, ожидаемые каталогом. Изображения внешних наборов остаются в соответствующих ресурсах: автоматически в UI они не копируются.

FiveM загружает `ui/dist/index.html` и файлы из `ui/dist/` для отображения NUI. Папка `ui/dist/` содержит сгенерированный результат; если вам передали исходный код, изменяйте исходники и собирайте их заново вместо ручного редактирования минифицированных файлов сборки.

## Язык

Параметры `Config.Locale` и `Config.LocaleFallback` в `config.lua` задают язык по умолчанию для сообщений Lua и NUI для всех игроков. Изменение применяется после перезапуска `cxg-tattoos`; это не индивидуальная настройка игрока и не переключатель внутри NUI. Поддерживаются коды `en`, `es`, `pt-BR`, `fr`, `de`, `it`, `pl`, `ru`, `tr`, `th` и `ar`.

Для собственных подписей React используются словари в `ui/src/i18n.tsx`, если исходники были переданы. Английский служит базовым языком и предоставляет значения для ключей без перевода; арабский включает направление текста RTL. Изменение `Config.Locale` выбирает доступный язык, а редактирование словарей меняет переводы, содержащиеся в UI. Это отдельные настройки.

## Сборка исходников UI

Эти шаги применимы только в том случае, если вам передали исходную папку `ui/` с файлами `package.json` и `package-lock.json`. Для них требуются Node.js и npm. Выполняйте команды из папки `ui/`:

```powershell
npm ci
npm run lint
npm run build
```

`npm run lint` проверяет типы TypeScript, а `npm run build` создаёт `ui/dist/` — содержимое, которое использует FiveM. Распространяйте обновлённую сборку вместе с ресурсом.

## Камера и одежда для предпросмотра

В `config.lua` можно настроить камеру и одежду, применяемую при открытии студии: `Config.CameraOffsets`, `Config.CameraFraming`, `Config.CameraFramingBySide`, `Config.CameraManualControls` и `Config.PreviewOutfit`. Подробности об этих параметрах приведены в разделе [Настройка](https://docs.cxgstudios.com/docs/ru/01-cxg-tattoos/03-configuracion.md).