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

تُحمّل واجهة الوشوم من الملفات الناتجة في 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/:

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. لتفاصيل هذه المعاملات، راجع الإعداد.