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

Интерфейс татуировок загружается из собранных файлов 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/:

Код

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. Подробности об этих параметрах приведены в разделе Настройка.