# الواجهة واللغة والمعاينة

تُحمّل واجهة الوشوم من الملفات الناتجة في `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، اطلب مصادر الواجهة وأنشئ بناءً جديدًا؛ فهذه الملفات المصدرية ليست ضمن التسليم الموصوف هنا.

## تخصيص المظهر

للتغييرات الكبيرة على التخطيط أو المكوّنات أو نصوص React، استخدم مصادر الواجهة إذا سُلّمت إليك منفصلة. أهم الملفات:

- `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/`، وتُنسخ إلى بناء الإنتاج. احتفظ بالأسماء والمسارات التي يتوقعها الكتالوج. أما الصور التي توفرها الحزم الخارجية فتبقى ضمن تلك الموارد؛ ولا تُنسخ تلقائيًا إلى الواجهة.

يحمّل 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/` وفيه `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/ar/01-cxg-tattoos/03-configuracion.md).